Skip to content

Add RocketSim branding and custom styling to Starlight docs #912

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
ngnijland merged 17 commits into from
Feb 4, 2026
Merged

Add RocketSim branding and custom styling to Starlight docs #912

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
17 commits
Select commit Hold shift + click to select a range
9d22601
Apply RocketSim branding to Starlight documentation
claude Jan 28, 2026
6453367
chore: update package-lock.json
claude Jan 28, 2026
e3365a1
fix: improve sidebar active state visibility
claude Jan 28, 2026
3302e70
fix: use white text for active sidebar items
claude Jan 28, 2026
b13a782
refactor: update Starlight CSS following best practices
claude Jan 28, 2026
5201d3c
feat: add footer links
ngnijland Feb 4, 2026
823ce26
feat: add logo to use in light mode
ngnijland Feb 4, 2026
a39533d
style: remove hover underline from docs homepage cards
ngnijland Feb 4, 2026
85b7ea6
feat: exclude docs homepage and testimonials page from search
ngnijland Feb 4, 2026
f9861fe
style: fix aside note styling
ngnijland Feb 4, 2026
1bede73
fix: GitHub link should link to repo
ngnijland Feb 4, 2026
c73b578
feat: enable edit links
ngnijland Feb 4, 2026
d2bf3f4
feat: 404 pages
ngnijland Feb 4, 2026
95c65db
style: use primary color in docs
ngnijland Feb 4, 2026
10b04f7
feat: add docs link to docs header
ngnijland Feb 4, 2026
6b5f3f4
style: buttons
ngnijland Feb 4, 2026
281f834
fix: linting and formatting
ngnijland Feb 4, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
41 changes: 40 additions & 1 deletion docs/astro.config.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,9 @@ const integrations: AstroIntegration[] = [
page !== "https://www.rocketsim.app/terms" &&
page !== "https://www.rocketsim.app/privacy" &&
page !== "https://www.rocketsim.app/thank-you" &&
page !== "https://www.rocketsim.app/signup/trial/thank-you",
page !== "https://www.rocketsim.app/signup/trial/thank-you" &&
page !== "https://www.rocketsim.app/404" &&
page !== "https://www.rocketsim.app/docs/404",
}),
AutoImport({
imports: [
Expand All @@ -43,8 +45,45 @@ if (!isProduction) {
integrations.push(
starlight({
title: "RocketSim Docs",
disable404Route: true,
logo: {
light: "./src/assets/rocketsim-logo-dark.svg",
dark: "./src/assets/rocketsim-logo.svg",
alt: "RocketSim",
replacesTitle: true,
},
favicon: "/favicon.svg",
customCss: ["./src/styles/starlight-custom.css"],
social: [
{
icon: "x.com",
label: "X/Twitter",
href: "https://x.com/rocketsim_app",
},
{
icon: "youtube",
label: "YouTube",
href: "https://www.youtube.com/@rocketsimapp",
},
{
icon: "linkedin",
label: "LinkedIn",
href: "https://linkedin.com/company/rocketsim",
},
{
icon: "github",
label: "GitHub",
href: "https://github.com/AvdLee/RocketSimApp",
},
],
editLink: {
baseUrl: "https://github.com/AvdLee/RocketSimApp/edit/master/docs/",
},
components: {
Head: "./src/components/starlight/Head.astro",
PageTitle: "./src/components/starlight/PageTitle.astro",
Footer: "./src/components/starlight/Footer.astro",
SiteTitle: "./src/components/starlight/SiteTitle.astro",
},
sidebar: [
{
Expand Down
3 changes: 3 additions & 0 deletions docs/src/assets/rocketsim-logo-dark.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
28 changes: 18 additions & 10 deletions docs/src/components/starlight/FeatureCard.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,9 +37,9 @@ const { title, description, href, icon, links } = Astro.props;

<style>
.feature-card {
background: var(--sl-color-bg-sidebar);
border: 1px solid var(--sl-color-hairline-light);
border-radius: 0.5rem;
background: var(--sl-color-bg-nav);
border: 1px solid var(--sl-color-hairline);
border-radius: 12px;
padding: 1.5rem;
transition: all 0.2s ease;
display: flex;
Expand All @@ -49,18 +49,26 @@ const { title, description, href, icon, links } = Astro.props;

.feature-card:hover {
border-color: var(--sl-color-text-accent);
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
box-shadow: 0 4px 24px rgba(0, 147, 255, 0.1);
transform: translateY(-2px);

& .card-main-link {
text-decoration: none;
}
}

:global([data-theme="light"]) .feature-card:hover {
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
}

.card-main-link {
text-decoration: none;
color: inherit;
flex: 1;

&:hover {
text-decoration: none !important;
}
}

.card-icon {
Expand All @@ -85,14 +93,14 @@ const { title, description, href, icon, links } = Astro.props;
}

:global([data-theme="light"]) .card-description {
color: var(--sl-color-gray-5);
color: var(--sl-color-gray-4);
}

.card-links {
list-style: none;
padding: 0;
margin: 1rem 0 0 0;
border-top: 1px solid var(--sl-color-hairline-light);
border-top: 1px solid var(--sl-color-hairline);
padding-top: 1rem;
}

Expand All @@ -104,11 +112,11 @@ const { title, description, href, icon, links } = Astro.props;
color: var(--sl-color-text-accent);
text-decoration: none;
font-size: var(--sl-text-sm);
transition: color 0.2s ease;
font-weight: 500;
transition: all 0.2s ease;
}

.card-links a:hover {
color: var(--sl-color-white);
text-decoration: underline;
color: var(--sl-color-accent-high);
}
</style>
20 changes: 20 additions & 0 deletions docs/src/components/starlight/Footer.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
---
/**
* Custom Footer component for RocketSim docs
* Includes the default Starlight footer plus custom footer links
*/
import Default from "@astrojs/starlight/components/Footer.astro";
import { Icon } from "@astrojs/starlight/components";
---

<Default {...Astro.props}><slot /></Default>

<div class="footer-links">
<a href="/"><Icon name="rocket" /> Home</a>
<a href="/team-licenses"><Icon name="star" /> For teams</a>
<a
href="https://apps.apple.com/app/apple-store/id1504940162?pt=117264678&ct=doc-footer&mt=8"
><Icon name="apple" /> Mac App Store</a
>
<a href="mailto:[email protected]"><Icon name="email" /> Contact us</a>
</div>
22 changes: 22 additions & 0 deletions docs/src/components/starlight/Head.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
---
/**
* Custom Head component for RocketSim docs
* Includes proper favicon and meta tags matching the main site
*/
import Default from "@astrojs/starlight/components/Head.astro";
---

<Default {...Astro.props}><slot /></Default>

<!-- Favicon -->
<link rel="icon" href="/favicon.svg" type="image/svg+xml" />
<link rel="icon" href="/favicon.ico" sizes="32x32" />
<link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96" />
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />

<!-- Theme color matching RocketSim dark theme -->
<meta name="theme-color" content="#000000" />
<meta name="color-scheme" content="dark light" />

<!-- Additional meta for better SEO -->
<meta name="author" content="RocketSim" />
28 changes: 19 additions & 9 deletions docs/src/components/starlight/PageTitle.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,30 +57,40 @@ const isHomepage = id === "docs";
.action-button {
display: inline-block;
padding: 0.75rem 1.25rem;
border-radius: 0.375rem;
border-radius: 9999px;
text-decoration: none;
font-weight: 600;
font-size: var(--sl-text-base);
transition: all 0.2s ease;
}

.action-button.primary {
background: #0093ff;
background: var(--sl-color-accent);
color: white;
}

.action-button.primary:hover {
background: #0062cc;
background: #0069d9;
}

.action-button.primary:active {
background: #005cbf;
}

.action-button.primary:focus-visible {
outline: 0.25rem solid #0069d9;
}

.action-button.secondary {
background: transparent;
color: var(--sl-color-white);
border: 1px solid var(--sl-color-gray-5);
background: #373739;
color: white;
border: 1px solid #373739;
transition: all 0.3s ease;
}

.action-button.secondary:hover {
border-color: var(--sl-color-text-accent);
background: var(--sl-color-gray-6);
:global([data-theme="light"]) .action-button.secondary {
background: #e9ecef;
color: #373739;
border-color: #e9ecef;
}
Comment on lines 84 to 95
Copy link

Copilot AI Feb 4, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The secondary action button lacks a hover state definition. Users won't receive visual feedback when hovering over the "Product Tour" button. Consider adding a hover state similar to the primary button, such as changing the background opacity or adjusting the border/background color to provide visual feedback.

Copilot uses AI. Check for mistakes.
</style>
70 changes: 70 additions & 0 deletions docs/src/components/starlight/SiteTitle.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,70 @@
---
/**
* Custom SiteTitle component for RocketSim docs
* Shows the RocketSim logo linking to main site and a "DOCS" badge linking to /docs
*/
// Import logo images
import logoDark from "../../assets/rocketsim-logo.svg";
import logoLight from "../../assets/rocketsim-logo-dark.svg";
---

<a href="/" class="site-title sl-flex" aria-label="RocketSim">
<img class="logo-dark" src={logoDark.src} alt="RocketSim" />
<img class="logo-light" src={logoLight.src} alt="RocketSim" />
</a>
<a href="/docs" class="docs-badge">DOCS</a>

<style>
.site-title {
display: flex;
align-items: center;
gap: 0.5rem;
text-decoration: none;
color: var(--sl-color-white);
font-weight: 600;
}

.site-title img {
height: 24px;
width: auto;
}

/* Dark mode: show dark logo, hide light logo */
.logo-dark {
display: block;
}
.logo-light {
display: none;
}

/* Light mode: show light logo, hide dark logo */
:global([data-theme="light"]) .logo-dark {
display: none;
}
:global([data-theme="light"]) .logo-light {
display: block;
}

.docs-badge {
display: inline-flex;
align-items: center;
margin-left: 0.5rem;
padding: 0.125rem 0.5rem;
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.05em;
text-transform: uppercase;
text-decoration: none;
color: var(--sl-color-accent);
border: 1px solid var(--sl-color-accent);
border-radius: 4px;
transition:
background-color 0.2s ease,
color 0.2s ease;
}

.docs-badge:hover {
background-color: var(--sl-color-accent);
color: white;
}
</style>
4 changes: 2 additions & 2 deletions docs/src/config/theme.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,8 @@
"default": {
"theme_color": {
"primary": "#0093ff",
"primary-active": "#0062cc",
"primary-accent": "#3961d0",
"primary-active": "#005cbf",
"primary-accent": "#0069d9",
"secondary": "#373739",
"tertiary": "#56C590",
"quaternary": "#CFD4FA",
Expand Down
Loading
Loading