Skip to content
Northwestern Starlight Theme

Getting Started

Installation

Section titled “Installation”
Terminal window
pnpm add @nu-appdev/northwestern-starlight-theme

Configuration

Section titled “Configuration”

Use defineNorthwesternConfig to handle integration ordering and plugin registration:

astro.config.ts
import { defineNorthwesternConfig } from "@nu-appdev/northwestern-starlight-theme/config";


export default defineNorthwesternConfig({
    site: "https://docs.example.northwestern.edu",
    starlight: {
        title: "My Docs",
        sidebar: [
            { label: "Guide", autogenerate: { directory: "guide" } },
        ],
    },
});

Colors, typography, navigation, and component styling apply automatically. The Style Guide previews every styled element.

Mermaid Diagrams (Optional)

Section titled “Mermaid Diagrams (Optional)”

Install astro-mermaid and mermaid to enable diagram support with Northwestern colors:

Terminal window
pnpm add astro-mermaid mermaid

See Customization for toolbar, theme overrides, and disabling.

Open Graph Images

Section titled “Open Graph Images”

Each page gets a branded 1200x630 preview image at build time. Slack, Teams, and social media link previews show a Northwestern purple card with the favicon logo, page title, and description.

Set site in your config so the meta tags use absolute URLs:

astro.config.ts
export default defineNorthwesternConfig({
    site: "https://docs.example.northwestern.edu",
    starlight: { title: "My Docs" },
});

To disable OG images, pass ogImage: false to the theme. See Customization.

Migrating an Existing Site

Section titled “Migrating an Existing Site”

If your project already has manual Northwestern branding, replace your astro.config.ts with defineNorthwesternConfig:

astro.config.ts
import { defineNorthwesternConfig } from "@nu-appdev/northwestern-starlight-theme/config";


export default defineNorthwesternConfig({
    site: "https://docs.example.northwestern.edu",
    starlight: {
        title: "My Docs",
        // Move your sidebar, editLink, etc. here
    },
});

Remove component overrides the theme now provides (Hero, EditLink, ThemeSelect), redundant font imports, favicon, and theme CSS.

Files to Delete

Section titled “Files to Delete”

Remove these if they exist only for Northwestern branding:

  • public/favicon.ico (or public/favicon.svg), replaced by the theme’s built-in favicon
  • src/components/ConditionalEditLink.astro
  • src/components/Hero.astro
  • src/styles/custom.css
  • src/styles/layout.css

Dependencies

Section titled “Dependencies”

You no longer need @fontsource/poppins. Keep astro-mermaid and mermaid if your site uses diagrams.