Starbright

A fork of Astro Starlight with all the styling ripped out.

This is a personal project. I wanted Starlight's functionality (content collections, routing, i18n, sidebar generation, search) without its opinions on styling. If you're looking for a polished documentation framework, use the original Starlight. If you want to bring your own design system to a docs site, this might be useful.

Use at your own risk. I maintain this for my own projects and make no guarantees about stability or compatibility.

Installation

npm install @sugarcube-org/starbright

Basic Setup

// astro.config.mjs
import { defineConfig } from 'astro/config';
import starbright from '@sugarcube-org/starbright';

export default defineConfig({
  integrations: [
    starbright({
      title: 'My Docs',
    }),
  ],
});

Content Collection

Create src/content.config.ts:

import { defineCollection } from 'astro:content';
import { docsLoader } from '@sugarcube-org/starbright/loaders';
import { docsSchema } from '@sugarcube-org/starbright/schema';

export const collections = {
  docs: defineCollection({
    loader: docsLoader(),
    schema: docsSchema(),
  }),
};

Put your markdown files in src/content/docs/.

Styling

There are no styles. You need to provide everything yourself.

Add your own CSS:

starbright({
  title: 'My Docs',
  customCss: ['./src/styles/global.css'],
})

Or import the markdown content styles if you want some baseline:

@import '@sugarcube-org/starbright/style/markdown.css';

Component Overrides

Replace any component with your own:

starbright({
  title: 'My Docs',
  components: {
    Header: './src/components/Header.astro',
    Sidebar: './src/components/Sidebar.astro',
    Footer: './src/components/Footer.astro',
  },
})

The full list of overridable components is in schemas/components.ts.

Route Data

Access the current page's data in components:

---
const { entry, sidebar, toc, hasSidebar } = Astro.locals.starbrightRoute;
---

Built-in Components

Import components for use in MDX:

import { Tabs, TabItem, Card, CardGrid } from '@sugarcube-org/starbright/components';

<Tabs>
  <TabItem label="npm">npm install foo</TabItem>
  <TabItem label="pnpm">pnpm add foo</TabItem>
</Tabs>

Configuration

All Starlight configuration options should work. Refer to the Starlight docs for the full list.

Credits

This is a fork of Starlight by the Astro team. All the hard work is theirs. I just deleted the CSS.

License

MIT