Toolbeam Docs Theme

Usage

1. Install the theme package to your project and the custom fonts.

   npm install toolbeam-docs-theme @fontsource/ibm-plex-mono

   Optionally, install packages for linked headings.

   npm install @astrojs/markdown-remark rehype-autolink-headings

2. Add the theme to your Starlight config.

   import theme from "toolbeam-docs-theme";
   
   export default defineConfig({
     // ...
     integrations: [
       starlight({
         // ...
         plugins: [theme({
           // Optionally, add your own header links
           headerLinks: [
             { name: "Home", url: "/" },
             { name: "Docs", url: "/docs/" },
             { name: "Blog", url: "/blog/" },
           ],
         })],
       }),
     ],
   });

   Optionally, add the config for the linked headings.

   import { rehypeHeadingIds } from "@astrojs/markdown-remark";
   import rehypeAutolinkHeadings from "rehype-autolink-headings";
   
   export default defineConfig({
     integrations: [
       starlight({
         markdown: {
           headingLinks: false
         }
       }),
     ],
     markdown: {
       rehypePlugins: [
         rehypeHeadingIds,
         [rehypeAutolinkHeadings, { behavior: "wrap" }],
       ],
     },
   });

Working locally

1. Install dependencies.

   pnpm install

2. Start the playground site.

   cd apps/docs
   pnpm dev

   Make changes to theme in packages/theme.

Publishing

1. Create a new changeset with the version and message.

   pnpm changeset

   Finally, push the changeset to main when it's ready.

   git push

2. Merge the changeset to create a new release and publish the package.