diff options
author | Chris Swithinbank | 2023-05-08 20:55:19 +0200 |
---|---|---|
committer | GitHub | 2023-05-08 20:55:19 +0200 |
commit | 707fca678f9324ffbbd8ce30d9a9552cfc6c81c9 (patch) | |
tree | d78325b01e3b7aa2ccbba456a49dc434451d8ff0 | |
parent | 1016dc94ca463a55240bc41eeff9e3053712af45 (diff) | |
download | IT.starlight-707fca678f9324ffbbd8ce30d9a9552cfc6c81c9.tar.gz IT.starlight-707fca678f9324ffbbd8ce30d9a9552cfc6c81c9.tar.bz2 IT.starlight-707fca678f9324ffbbd8ce30d9a9552cfc6c81c9.zip |
Rename to “Starlight” (#29)
-rw-r--r-- | LICENSE | 2 | ||||
-rw-r--r-- | docs/README.md | 8 | ||||
-rw-r--r-- | docs/astro.config.mjs | 8 | ||||
-rw-r--r-- | docs/package.json | 4 | ||||
-rw-r--r-- | docs/src/content/config.ts | 2 | ||||
-rw-r--r-- | docs/src/content/docs/getting-started.md | 22 | ||||
-rw-r--r-- | docs/src/content/docs/guides/i18n.md | 8 | ||||
-rw-r--r-- | docs/src/content/docs/index.mdx | 2 | ||||
-rw-r--r-- | docs/src/content/docs/reference/configuration.md | 26 | ||||
-rw-r--r-- | docs/src/content/docs/reference/markdown-syntax.md | 20 | ||||
-rw-r--r-- | package.json | 2 | ||||
-rw-r--r-- | packages/starbook/README.md | 24 | ||||
-rw-r--r-- | packages/starbook/components/SkipLink.astro | 18 | ||||
-rw-r--r-- | packages/starbook/style/asides.css | 49 | ||||
-rw-r--r-- | packages/starbook/style/props.css | 197 | ||||
-rw-r--r-- | packages/starbook/style/shiki.css | 13 | ||||
-rw-r--r-- | packages/starbook/types.ts | 1 | ||||
-rw-r--r-- | packages/starbook/virtual.d.ts | 9 | ||||
-rw-r--r-- | packages/starlight/404.astro (renamed from packages/starbook/404.astro) | 8 | ||||
-rw-r--r-- | packages/starlight/README.md | 24 | ||||
-rw-r--r-- | packages/starlight/components/ContentPanel.astro (renamed from packages/starbook/components/ContentPanel.astro) | 6 | ||||
-rw-r--r-- | packages/starlight/components/EditLink.astro (renamed from packages/starbook/components/EditLink.astro) | 2 | ||||
-rw-r--r-- | packages/starlight/components/FallbackContentNotice.astro (renamed from packages/starbook/components/FallbackContentNotice.astro) | 12 | ||||
-rw-r--r-- | packages/starlight/components/HeadSEO.astro (renamed from packages/starbook/components/HeadSEO.astro) | 2 | ||||
-rw-r--r-- | packages/starlight/components/Header.astro (renamed from packages/starbook/components/Header.astro) | 14 | ||||
-rw-r--r-- | packages/starlight/components/Icon.astro (renamed from packages/starbook/components/Icon.astro) | 6 | ||||
-rw-r--r-- | packages/starlight/components/Icons.ts (renamed from packages/starbook/components/Icons.ts) | 0 | ||||
-rw-r--r-- | packages/starlight/components/LanguageSelect.astro (renamed from packages/starbook/components/LanguageSelect.astro) | 10 | ||||
-rw-r--r-- | packages/starlight/components/LastUpdated.astro (renamed from packages/starbook/components/LastUpdated.astro) | 6 | ||||
-rw-r--r-- | packages/starlight/components/MarkdownContent.astro (renamed from packages/starbook/components/MarkdownContent.astro) | 36 | ||||
-rw-r--r-- | packages/starlight/components/MobileMenuToggle.astro (renamed from packages/starbook/components/MobileMenuToggle.astro) | 34 | ||||
-rw-r--r-- | packages/starlight/components/PrevNextLinks.astro (renamed from packages/starbook/components/PrevNextLinks.astro) | 12 | ||||
-rw-r--r-- | packages/starlight/components/RightSidebarPanel.astro (renamed from packages/starbook/components/RightSidebarPanel.astro) | 18 | ||||
-rw-r--r-- | packages/starlight/components/Search.astro (renamed from packages/starbook/components/Search.astro) | 112 | ||||
-rw-r--r-- | packages/starlight/components/Select.astro (renamed from packages/starbook/components/Select.astro) | 22 | ||||
-rw-r--r-- | packages/starlight/components/Sidebar.astro (renamed from packages/starbook/components/Sidebar.astro) | 4 | ||||
-rw-r--r-- | packages/starlight/components/SidebarSublist.astro (renamed from packages/starbook/components/SidebarSublist.astro) | 22 | ||||
-rw-r--r-- | packages/starlight/components/SkipLink.astro | 18 | ||||
-rw-r--r-- | packages/starlight/components/TableOfContents.astro (renamed from packages/starbook/components/TableOfContents.astro) | 6 | ||||
-rw-r--r-- | packages/starlight/components/TableOfContents/TableOfContentsList.astro (renamed from packages/starbook/components/TableOfContents/TableOfContentsList.astro) | 0 | ||||
-rw-r--r-- | packages/starlight/components/TableOfContents/generateToC.ts (renamed from packages/starbook/components/TableOfContents/generateToC.ts) | 2 | ||||
-rw-r--r-- | packages/starlight/components/ThemeProvider.astro (renamed from packages/starbook/components/ThemeProvider.astro) | 8 | ||||
-rw-r--r-- | packages/starlight/components/ThemeSelect.astro (renamed from packages/starbook/components/ThemeSelect.astro) | 14 | ||||
-rw-r--r-- | packages/starlight/index.astro (renamed from packages/starbook/index.astro) | 8 | ||||
-rw-r--r-- | packages/starlight/index.ts (renamed from packages/starbook/index.ts) | 42 | ||||
-rw-r--r-- | packages/starlight/integrations/asides.ts (renamed from packages/starbook/integrations/asides.ts) | 16 | ||||
-rw-r--r-- | packages/starlight/layout/PageFrame.astro (renamed from packages/starbook/layout/PageFrame.astro) | 38 | ||||
-rw-r--r-- | packages/starlight/layout/TwoColumnContent.astro (renamed from packages/starbook/layout/TwoColumnContent.astro) | 12 | ||||
-rw-r--r-- | packages/starlight/package.json (renamed from packages/starbook/package.json) | 2 | ||||
-rw-r--r-- | packages/starlight/schema.ts (renamed from packages/starbook/schema.ts) | 0 | ||||
-rw-r--r-- | packages/starlight/style/asides.css | 49 | ||||
-rw-r--r-- | packages/starlight/style/props.css | 197 | ||||
-rw-r--r-- | packages/starlight/style/reset.css (renamed from packages/starbook/style/reset.css) | 8 | ||||
-rw-r--r-- | packages/starlight/style/shiki.css | 13 | ||||
-rw-r--r-- | packages/starlight/style/util.css (renamed from packages/starbook/style/util.css) | 0 | ||||
-rw-r--r-- | packages/starlight/types.ts | 1 | ||||
-rw-r--r-- | packages/starlight/utils/git.ts (renamed from packages/starbook/utils/git.ts) | 0 | ||||
-rw-r--r-- | packages/starlight/utils/localizedUrl.ts (renamed from packages/starbook/utils/localizedUrl.ts) | 2 | ||||
-rw-r--r-- | packages/starlight/utils/navigation.ts (renamed from packages/starbook/utils/navigation.ts) | 4 | ||||
-rw-r--r-- | packages/starlight/utils/routing.ts (renamed from packages/starbook/utils/routing.ts) | 2 | ||||
-rw-r--r-- | packages/starlight/utils/slugs.ts (renamed from packages/starbook/utils/slugs.ts) | 2 | ||||
-rw-r--r-- | packages/starlight/utils/user-config.ts (renamed from packages/starbook/utils/user-config.ts) | 14 | ||||
-rw-r--r-- | packages/starlight/virtual.d.ts | 9 | ||||
-rw-r--r-- | pnpm-lock.yaml | 31 |
64 files changed, 620 insertions, 643 deletions
@@ -1,6 +1,6 @@ MIT License -Copyright (c) 2023 [Astro contributors](https://github.com/withastro/starbook/graphs/contributors) +Copyright (c) 2023 [Astro contributors](https://github.com/withastro/starlight/graphs/contributors) Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal diff --git a/docs/README.md b/docs/README.md index 99840342..ff08cbf6 100644 --- a/docs/README.md +++ b/docs/README.md @@ -1,9 +1,9 @@ -# StarBook Docs +# Starlight Docs -This directory contains the StarBook documentation website (built with StarBook!) +This directory contains the Starlight documentation website (built with Starlight!) -[](https://stackblitz.com/github/withastro/starbook/tree/main/docs) -[](https://codesandbox.io/p/sandbox/github/withastro/starbook/tree/main/docs) +[](https://stackblitz.com/github/withastro/starlight/tree/main/docs) +[](https://codesandbox.io/p/sandbox/github/withastro/starlight/tree/main/docs) ## 🧞 Commands diff --git a/docs/astro.config.mjs b/docs/astro.config.mjs index 3ad9a5fc..f8c0786f 100644 --- a/docs/astro.config.mjs +++ b/docs/astro.config.mjs @@ -1,13 +1,13 @@ import { defineConfig } from 'astro/config'; -import starbook from 'starbook'; +import starlight from 'starlight'; // https://astro.build/config export default defineConfig({ integrations: [ - starbook({ - title: 'StarBook Docs', + starlight({ + title: 'Starlight Docs', editLink: { - baseUrl: 'https://github.com/withastro/starbook/edit/main/docs/', + baseUrl: 'https://github.com/withastro/starlight/edit/main/docs/', }, locales: { root: { diff --git a/docs/package.json b/docs/package.json index 40dbee65..ac1301cb 100644 --- a/docs/package.json +++ b/docs/package.json @@ -1,5 +1,5 @@ { - "name": "starbook-docs", + "name": "starlight-docs", "private": true, "type": "module", "version": "0.0.1", @@ -12,6 +12,6 @@ }, "dependencies": { "astro": "^2.1.7", - "starbook": "workspace:*" + "starlight": "workspace:*" } } diff --git a/docs/src/content/config.ts b/docs/src/content/config.ts index 22718619..62061bde 100644 --- a/docs/src/content/config.ts +++ b/docs/src/content/config.ts @@ -1,5 +1,5 @@ import { defineCollection } from 'astro:content'; -import { docsSchema } from 'starbook/schema'; +import { docsSchema } from 'starlight/schema'; export const collections = { docs: defineCollection({ diff --git a/docs/src/content/docs/getting-started.md b/docs/src/content/docs/getting-started.md index d989a065..64d87255 100644 --- a/docs/src/content/docs/getting-started.md +++ b/docs/src/content/docs/getting-started.md @@ -2,22 +2,22 @@ title: Getting Started --- -Welcome to StarBook, an intuitive and user-friendly website builder that allows you to easily create and manage your documentation website. In this introductory guide, we will explore the main features and benefits of StarBook. +Welcome to Starlight, an intuitive and user-friendly website builder that allows you to easily create and manage your documentation website. In this introductory guide, we will explore the main features and benefits of Starlight. -## Getting Started with StarBook +## Getting Started with Starlight -To get started with StarBook, you will first need to install it. StarBook is built on top of the [Astro](https://astro.build) all-in-one framework, which means you will also need to install Astro before installing StarBook. Once both are installed, you can create a new StarBook project using the following command: +To get started with Starlight, you will first need to install it. Starlight is built on top of the [Astro](https://astro.build) all-in-one framework, which means you will also need to install Astro before installing Starlight. Once both are installed, you can create a new Starlight project using the following command: ```sh # create a new project with npm -npm create astro --template starbook +npm create astro --template starlight ``` This will create a new project directory with all the necessary files and configurations for your documentation website. -## Creating Content with StarBook +## Creating Content with Starlight -StarBook supports authoring content in Markdown and MDX, which means you can write your documentation using a simple and easy-to-learn syntax. You can also use a range of features and components supported by Docusaurus, GitBook, VitePress, MkDocs, Nextra, and Sphinx, including: +Starlight supports authoring content in Markdown and MDX, which means you can write your documentation using a simple and easy-to-learn syntax. You can also use a range of features and components supported by Docusaurus, GitBook, VitePress, MkDocs, Nextra, and Sphinx, including: - Syntax highlighting for code blocks - Tables and lists @@ -28,14 +28,14 @@ StarBook supports authoring content in Markdown and MDX, which means you can wri With these features, you can create rich and engaging documentation that is easy to read and understand. -### Customizing Your StarBook Website +### Customizing Your Starlight Website -One of the main benefits of StarBook is its flexibility and customization options. You can easily customize your website's layout, theme, and styling using the Astro framework's built-in tools and features. For example, you can customize your website's color scheme, fonts, and typography, as well as add custom components and plugins. +One of the main benefits of Starlight is its flexibility and customization options. You can easily customize your website's layout, theme, and styling using the Astro framework's built-in tools and features. For example, you can customize your website's color scheme, fonts, and typography, as well as add custom components and plugins. -### Deploying Your StarBook Website +### Deploying Your Starlight Website -Once you have created and customized your StarBook website, you can deploy it to a web server or hosting platform of your choice. Astro provides built-in support for several popular hosting platforms, including Netlify and Vercel, which means you can deploy your website with just a few simple commands. +Once you have created and customized your Starlight website, you can deploy it to a web server or hosting platform of your choice. Astro provides built-in support for several popular hosting platforms, including Netlify and Vercel, which means you can deploy your website with just a few simple commands. ## Conclusion -StarBook is a powerful and flexible website builder that makes it easy to create and manage your documentation website. With support for Markdown and MDX, as well as a range of features and components, you can create rich and engaging content that is easy to read and understand. So why not give StarBook a try today and see how it can help you take your documentation to the next level! +Starlight is a powerful and flexible website builder that makes it easy to create and manage your documentation website. With support for Markdown and MDX, as well as a range of features and components, you can create rich and engaging content that is easy to read and understand. So why not give Starlight a try today and see how it can help you take your documentation to the next level! diff --git a/docs/src/content/docs/guides/i18n.md b/docs/src/content/docs/guides/i18n.md index a6f48ffc..d1b71eeb 100644 --- a/docs/src/content/docs/guides/i18n.md +++ b/docs/src/content/docs/guides/i18n.md @@ -2,20 +2,20 @@ title: Internationalization (i18n) --- -StarBook provides built-in support for multilingual sites. +Starlight provides built-in support for multilingual sites. ## Configure i18n -1. Tell StarBook about the languages you support by passing a `locales` object to the StarBook integration: +1. Tell Starlight about the languages you support by passing a `locales` object to the Starlight integration: ```js // astro.config.mjs import { defineConfig } from 'astro/config'; - import starbook from 'starbook'; + import starlight from 'starlight'; export default defineConfig({ integrations: [ - starbook({ + starlight({ // Set English as the default language for this site. defaultLocale: 'en', locales: { diff --git a/docs/src/content/docs/index.mdx b/docs/src/content/docs/index.mdx index 68a0b347..910a195e 100644 --- a/docs/src/content/docs/index.mdx +++ b/docs/src/content/docs/index.mdx @@ -2,7 +2,7 @@ title: Welcome, world --- -My docs are built with StarBook. +My docs are built with Starlight. :::tip[Did you know?] Astro helps you build faster websites with [“Islands Architecture”](https://docs.astro.build/en/concepts/islands/). diff --git a/docs/src/content/docs/reference/configuration.md b/docs/src/content/docs/reference/configuration.md index 53ba8746..b0385718 100644 --- a/docs/src/content/docs/reference/configuration.md +++ b/docs/src/content/docs/reference/configuration.md @@ -2,9 +2,9 @@ title: Configuration Reference --- -## Configure the `starbook` integration +## Configure the `starlight` integration -You can pass the following options to the `starbook` integration. +You can pass the following options to the `starlight` integration. ### `title` (required) @@ -29,17 +29,17 @@ Configure the table of contents shown on the right of each page. By default, `<h **type:** `{ baseUrl: string }` -Enable “Edit this page” links by setting the base URL these should use. The final link will be `editLink.baseUrl` + the current page path. For example, to enable editing pages in the `withastro/starbook` repo on GitHub: +Enable “Edit this page” links by setting the base URL these should use. The final link will be `editLink.baseUrl` + the current page path. For example, to enable editing pages in the `withastro/starlight` repo on GitHub: ```js -starbook({ +starlight({ editLink: { - baseUrl: 'https://github.com/withastro/starbook/edit/main/', + baseUrl: 'https://github.com/withastro/starlight/edit/main/', }, }); ``` -With this config, a `/introduction` page would have an edit link pointing to `https://github.com/withastro/starbook/edit/main/src/docs/introduction.md`. +With this config, a `/introduction` page would have an edit link pointing to `https://github.com/withastro/starlight/edit/main/src/docs/introduction.md`. ### `sidebar` @@ -52,7 +52,7 @@ A sidebar is an array of groups, each with a `label` for the group and either an You can manually set the contents of a group using `items`, which is an array that can include links and subgroups. You can also automatically generate the contents of a group from a specific directory of your docs, using `autogenerate`. ```js -starbook({ +starlight({ sidebar: [ // A group labelled “Start Here” containing two links. { @@ -109,11 +109,11 @@ Each entry should use the directory where that language’s files are saved as t ```js // astro.config.mjs import { defineConfig } from 'astro/config'; -import starbook from 'starbook'; +import starlight from 'starlight'; export default defineConfig({ integrations: [ - starbook({ + starlight({ // Set English as the default language for this site. defaultLocale: 'en', locales: { @@ -164,7 +164,7 @@ The writing direction of this language; `"ltr"` for left-to-right (the default) You can serve the default language without a `/lang/` directory by setting a `root` locale: ```js -starbook({ +starlight({ locales: { root: { label: 'English', @@ -194,7 +194,7 @@ The default locale will be used to provide fallback content where translations a Optional details about the social media accounts for this site. ```js -starbook({ +starlight({ social: { // Main Twitter handle for this site twitter: 'astrodotbuild', @@ -204,12 +204,12 @@ starbook({ ### `customCss` -Provide CSS files to customize the look and feel of StarBook. +Provide CSS files to customize the look and feel of your Starlight site. Supports local CSS files relative to the root of your project, e.g. `'/src/custom.css'`, and CSS you installed as an npm module, e.g. `'@fontsource/roboto'`. ```js -starbook({ +starlight({ customCss: ['/src/custom-styles.css', '@fontsource/roboto'], }); ``` diff --git a/docs/src/content/docs/reference/markdown-syntax.md b/docs/src/content/docs/reference/markdown-syntax.md index bc5c734c..4d01e425 100644 --- a/docs/src/content/docs/reference/markdown-syntax.md +++ b/docs/src/content/docs/reference/markdown-syntax.md @@ -2,7 +2,7 @@ title: Markdown Syntax --- -StarBook supports the full range of Markdown syntax. +Starlight supports the full range of Markdown syntax. ## Inline styles @@ -54,27 +54,27 @@ You can structure content using a heading. Headings in Markdown are indicated by Asides (also known as “admonitions” or “callouts”) are useful for displaying secondary information alongside a page’s main content. -StarBook provides a custom Markdown syntax for rendering asides. Aside blocks are indicated using a triple colon `:::` and can be of type `note`, `tip`, `caution` or `danger`. +Starlight provides a custom Markdown syntax for rendering asides. Aside blocks are indicated using a triple colon `:::` and can be of type `note`, `tip`, `caution` or `danger`. You can nest any other Markdown content types inside an aside, but asides are best suited to short and concise chunks of content. ### Note aside :::note -StarBook is a documentation website toolkit built with [Astro](https://astro.build/). You can get started with this command: +Starlight is a documentation website toolkit built with [Astro](https://astro.build/). You can get started with this command: ```sh -npm run create astro@latest --template starbook +npm run create astro@latest --template starlight ``` ::: ````md :::note -StarBook is a documentation website toolkit built with [Astro](https://astro.build/). You can get started with this command: +Starlight is a documentation website toolkit built with [Astro](https://astro.build/). You can get started with this command: ```sh -npm run create astro@latest --template starbook +npm run create astro@latest --template starlight ``` ::: @@ -100,11 +100,11 @@ Caution and danger asides are helpful for drawing a user’s attention to detail If you find yourself using these a lot, it may also be a sign that the thing you are documenting could benefit from being redesigned. :::caution -If you are not sure you want an awesome docs site, think twice before using [StarBook](../../). +If you are not sure you want an awesome docs site, think twice before using [Starlight](../../). ::: :::danger -Your users may be more productive and find your product easier to use thanks to helpful StarBook features. +Your users may be more productive and find your product easier to use thanks to helpful Starlight features. - Clear navigation - User-configurable colour theme @@ -114,11 +114,11 @@ Your users may be more productive and find your product easier to use thanks to ```md :::caution -If you are not sure you want an awesome docs site, think twice before using [StarBook](../../). +If you are not sure you want an awesome docs site, think twice before using [Starlight](../../). ::: :::danger -Your users may be more productive and find your product easier to use thanks to helpful StarBook features. +Your users may be more productive and find your product easier to use thanks to helpful Starlight features. - Clear navigation - User-configurable colour theme diff --git a/package.json b/package.json index 7b1b4e48..438f33e5 100644 --- a/package.json +++ b/package.json @@ -1,5 +1,5 @@ { - "name": "starbook-root", + "name": "starlight-root", "private": true, "version": "1.0.0", "description": "", diff --git a/packages/starbook/README.md b/packages/starbook/README.md deleted file mode 100644 index ce0c299a..00000000 --- a/packages/starbook/README.md +++ /dev/null @@ -1,24 +0,0 @@ -# StarBook - -StarBook is a documentation website framework for [Astro][astro]. - -## Documentation - -[Read the StarBook docs][docs] (they’re built with StarBook!) - -## Contributing - -- [Code of Conduct][coc] -- [Community Guide][community] - -## License - -MIT - -Copyright (c) 2023–present [StarBook contributors][contributors] - -[astro]: https://astro.build/ -[docs]: https://star-book.netlify.app/ -[coc]: https://github.com/withastro/.github/blob/main/CODE_OF_CONDUCT.md -[community]: https://github.com/withastro/.github/blob/main/COMMUNITY_GUIDE.md -[contributors]: https://github.com/withastro/starbook/graphs/contributors diff --git a/packages/starbook/components/SkipLink.astro b/packages/starbook/components/SkipLink.astro deleted file mode 100644 index 3f3d2ca6..00000000 --- a/packages/starbook/components/SkipLink.astro +++ /dev/null @@ -1,18 +0,0 @@ -<a href="#starbook__overview">Skip to content</a> - -<style> - a { - position: fixed; - top: 0.75rem; - inset-inline-start: 0.75rem; - } - a:focus { - z-index: var(--sb-z-index-skiplink); - display: block; - padding: 0.5rem 1rem; - text-decoration: none; - color: var(--sb-color-text-invert); - background-color: var(--sb-color-text-accent); - box-shadow: var(--sb-shadow-lg); - } -</style> diff --git a/packages/starbook/style/asides.css b/packages/starbook/style/asides.css deleted file mode 100644 index 8e9b1030..00000000 --- a/packages/starbook/style/asides.css +++ /dev/null @@ -1,49 +0,0 @@ -.starbook-aside { - padding: 1rem; - border-inline-start: 0.25rem solid; - color: var(--sb-color-white); -} -.starbook-aside--note { - --sb-color-asides-text-accent: var(--sb-color-blue-high); - border-color: var(--sb-color-blue); - background-color: var(--sb-color-blue-low); -} -.starbook-aside--tip { - --sb-color-asides-text-accent: var(--sb-color-purple-high); - border-color: var(--sb-color-purple); - background-color: var(--sb-color-purple-low); -} -.starbook-aside--caution { - --sb-color-asides-text-accent: var(--sb-color-orange-high); - border-color: var(--sb-color-orange); - background-color: var(--sb-color-orange-low); -} -.starbook-aside--danger { - --sb-color-asides-text-accent: var(--sb-color-red-high); - border-color: var(--sb-color-red); - background-color: var(--sb-color-red-low); -} - -.starbook-aside__title { - display: flex; - gap: 0.5rem; - align-items: center; - font-size: var(--sb-text-h5); - font-weight: 600; - line-height: var(--sb-line-height-headings); - color: var(--sb-color-asides-text-accent); -} - -.starbook-aside__icon { - font-size: 1.333em; - width: 1em; - height: 1em; -} - -.starbook-aside__title + .starbook-aside__content { - margin-top: 0.5rem; -} - -.starbook-aside__content a { - color: var(--sb-color-asides-text-accent); -} diff --git a/packages/starbook/style/props.css b/packages/starbook/style/props.css deleted file mode 100644 index 95d7026f..00000000 --- a/packages/starbook/style/props.css +++ /dev/null @@ -1,197 +0,0 @@ -:root, -::backdrop { - /* Colors (dark mode) */ - --sb-color-white: hsl(0, 0%, 100%); /* “white” */ - --sb-color-gray-1: hsl(231, 23%, 94%); - --sb-color-gray-2: hsl(228, 8%, 77%); - --sb-color-gray-3: hsl(221, 8%, 56%); - --sb-color-gray-4: hsl(225, 9%, 36%); - --sb-color-gray-5: hsl(222, 11%, 23%); - --sb-color-gray-6: hsl(222, 13%, 16%); - --sb-color-black: hsl(223, 13%, 10%); - - --sb-hue-orange: 41; - --sb-color-orange-low: hsl(var(--sb-hue-orange), 39%, 22%); - --sb-color-orange: hsl(var(--sb-hue-orange), 82%, 63%); - --sb-color-orange-high: hsl(var(--sb-hue-orange), 82%, 87%); - --sb-hue-green: 101; - --sb-color-green-low: hsl(var(--sb-hue-green), 39%, 22%); - --sb-color-green: hsl(var(--sb-hue-green), 82%, 63%); - --sb-color-green-high: hsl(var(--sb-hue-green), 82%, 87%); - --sb-hue-blue: 234; - --sb-color-blue-low: hsl(var(--sb-hue-blue), 54%, 20%); - --sb-color-blue: hsl(var(--sb-hue-blue), 100%, 60%); - --sb-color-blue-high: hsl(var(--sb-hue-blue), 100%, 87%); - --sb-hue-purple: 281; - --sb-color-purple-low: hsl(var(--sb-hue-purple), 39%, 22%); - --sb-color-purple: hsl(var(--sb-hue-purple), 82%, 63%); - --sb-color-purple-high: hsl(var(--sb-hue-purple), 82%, 89%); - --sb-hue-red: 339; - --sb-color-red-low: hsl(var(--sb-hue-red), 39%, 22%); - --sb-color-red: hsl(var(--sb-hue-red), 82%, 63%); - --sb-color-red-high: hsl(var(--sb-hue-red), 82%, 87%); - - --sb-hue-accent: var(--sb-hue-blue); - --sb-color-accent-low: hsl(var(--sb-hue-accent), 54%, 20%); - --sb-color-accent: hsl(var(--sb-hue-accent), 100%, 60%); - --sb-color-accent-high: hsl(var(--sb-hue-accent), 100%, 87%); - - --sb-color-text: var(--sb-color-gray-2); - --sb-color-text-accent: var(--sb-color-accent-high); - --sb-color-text-invert: var(--sb-color-accent-low); - --sb-color-bg: var(--sb-color-black); - --sb-color-bg-nav: var(--sb-color-gray-6); - --sb-color-bg-sidebar: var(--sb-color-gray-6); - --sb-color-bg-inline-code: var(--sb-color-gray-5); - --sb-color-hairline: var(--sb-color-gray-6); - --sb-color-hairline-shade: var(--sb-color-black); - - --sb-color-backdrop-overlay: hsla(223, 13%, 10%, 0.66); - - /* Shadows (dark mode) */ - --sb-shadow-sm: 0px 1px 1px hsla(0, 0%, 0%, 0.12), - 0px 2px 1px hsla(0, 0%, 0%, 0.24); - --sb-shadow-md: 0px 8px 4px hsla(0, 0%, 0%, 0.08), - 0px 5px 2px hsla(0, 0%, 0%, 0.08), 0px 3px 2px hsla(0, 0%, 0%, 0.12), - 0px 1px 1px hsla(0, 0%, 0%, 0.15); - --sb-shadow-lg: 0px 25px 7px hsla(0, 0%, 0%, 0.03), - 0px 16px 6px hsla(0, 0%, 0%, 0.1), 0px 9px 5px hsla(223, 13%, 10%, 0.33), - 0px 4px 4px hsla(0, 0%, 0%, 0.75), 0px 4px 2px hsla(0, 0%, 0%, 0.25); - - /* Gradients (unchanged across dark & light modes) */ - --sb-gradient-blue-purple: linear-gradient( - to bottom, - hsl(234, 100%, 59.8%) 0%, - hsl(281, 82.1%, 62.7%) 100% - ); - --sb-gradient-red-pink: linear-gradient( - to bottom, - hsl(0, 67.9%, 52.4%) 0%, - hsl(295, 100%, 62.7%) 100% - ); - --sb-gradient-orange-yellow: linear-gradient( - to bottom, - hsl(54, 93.5%, 57.6%) 0%, - hsl(14, 100%, 66.5%) 100% - ); - --sb-gradient-blue-green: linear-gradient( - to bottom, - hsl(165, 86.6%, 62%) 0%, - hsl(227, 58.4%, 44.3%) 100% - ); - - /* Text size and line height */ - --sb-text-xs: 0.8125rem; /* 13px */ - --sb-text-sm: 0.875rem; /* 14px */ - --sb-text-base: 1rem; /* 16px */ - --sb-text-lg: 1.125rem; /* 18px */ - --sb-text-xl: 1.25rem; /* 20px */ - --sb-text-2xl: 1.5rem; /* 24px */ - --sb-text-3xl: 1.8125rem; /* 29px */ - --sb-text-4xl: 2.1875rem; /* 35px */ - --sb-text-5xl: 2.625rem; /* 42px */ - - --sb-text-body: var(--sb-text-base); - --sb-text-body-sm: var(--sb-text-xs); - --sb-text-code: var(--sb-text-base); - --sb-text-code-sm: var(--sb-text-xs); - --sb-text-h1: var(--sb-text-4xl); - --sb-text-h2: var(--sb-text-3xl); - --sb-text-h3: var(--sb-text-2xl); - --sb-text-h4: var(--sb-text-xl); - --sb-text-h5: var(--sb-text-lg); - - --sb-line-height: 1.8; - --sb-line-height-headings: 1.2; - - --sb-font-system: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, - 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, - 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'; - --sb-font-system-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, - 'Liberation Mono', 'Courier New', monospace; - --__sb-font: var(--sb-font, ''), var(--sb-font-system); - --__sb-font-mono: var(--sb-font-mono, ''), var(--sb-font-system-mono); - - /** Key layout values */ - --sb-nav-height: 4rem; - --sb-nav-pad-x: 1.5rem; - --sb-nav-pad-y: 0.75rem; - --sb-sidebar-width: 18.75rem; - --sb-sidebar-pad-x: 1rem; - --sb-content-width: 45rem; - --sb-content-pad-x: 1rem; - --sb-menu-button-size: 2rem; - --sb-nav-gap: var(--sb-content-pad-x); - - /* Global z-index values */ - --sb-z-index-navbar: 10; - --sb-z-index-skiplink: 20; -} - -:root[data-theme='light'], -[data-theme='light'] ::backdrop { - /* Colours (light mode) */ - --sb-color-white: hsl(223, 13%, 10%); - --sb-color-gray-1: hsl(222, 13%, 16%); - --sb-color-gray-2: hsl(222, 11%, 23%); - --sb-color-gray-3: hsl(225, 9%, 36%); - --sb-color-gray-4: hsl(221, 8%, 56%); - --sb-color-gray-5: hsl(228, 8%, 77%); - --sb-color-gray-6: hsl(231, 23%, 94%); - --sb-color-gray-7: hsl(240, 20%, 97%); - --sb-color-black: hsl(0, 0%, 100%); - - --sb-color-orange-high: hsl(var(--sb-hue-orange), 80%, 25%); - --sb-color-orange: hsl(var(--sb-hue-orange), 90%, 60%); - --sb-color-orange-low: hsl(var(--sb-hue-orange), 90%, 88%); - --sb-color-green-high: hsl(var(--sb-hue-green), 80%, 22%); - --sb-color-green: hsl(var(--sb-hue-green), 90%, 60%); - --sb-color-green-low: hsl(var(--sb-hue-green), 85%, 90%); - --sb-color-blue-high: hsl(var(--sb-hue-blue), 80%, 30%); - --sb-color-blue: hsl(var(--sb-hue-blue), 90%, 60%); - --sb-color-blue-low: hsl(var(--sb-hue-blue), 88%, 90%); - --sb-color-purple-high: hsl(var(--sb-hue-purple), 39%, 30%); - --sb-color-purple: hsl(var(--sb-hue-purple), 90%, 60%); - --sb-color-purple-low: hsl(var(--sb-hue-purple), 80%, 90%); - --sb-color-red-high: hsl(var(--sb-hue-red), 80%, 30%); - --sb-color-red: hsl(var(--sb-hue-red), 90%, 60%); - --sb-color-red-low: hsl(var(--sb-hue-red), 80%, 90%); - - --sb-color-accent-high: hsl(var(--sb-hue-accent), 80%, 30%); - --sb-color-accent: hsl(var(--sb-hue-accent), 90%, 60%); - --sb-color-accent-low: hsl(var(--sb-hue-accent), 88%, 90%); - - --sb-color-text-accent: var(--sb-color-accent); - --sb-color-text-invert: var(--sb-color-black); - --sb-color-bg-nav: var(--sb-color-gray-7); - --sb-color-bg-sidebar: var(--sb-color-bg); - --sb-color-bg-inline-code: var(--sb-color-gray-6); - --sb-color-hairline-shade: var(--sb-color-gray-6); - - --sb-color-backdrop-overlay: hsla(225, 9%, 36%, 0.66); - - /* Shadows (light mode) */ - --sb-shadow-sm: 0px 1px 1px hsla(0, 0%, 0%, 0.06), - 0px 2px 1px hsla(0, 0%, 0%, 0.06); - --sb-shadow-md: 0px 8px 4px hsla(0, 0%, 0%, 0.03), - 0px 5px 2px hsla(0, 0%, 0%, 0.03), 0px 3px 2px hsla(0, 0%, 0%, 0.06), - 0px 1px 1px hsla(0, 0%, 0%, 0.06); - --sb-shadow-lg: 0px 25px 7px rgba(0, 0, 0, 0.01), - 0px 16px 6px hsla(0, 0%, 0%, 0.03), 0px 9px 5px hsla(223, 13%, 10%, 0.08), - 0px 4px 4px hsla(0, 0%, 0%, 0.16), 0px 4px 2px hsla(0, 0%, 0%, 0.04); -} - -@media (min-width: 50em) { - :root { - --sb-text-h1: var(--sb-text-5xl); - --sb-text-h2: var(--sb-text-4xl); - --sb-text-h3: var(--sb-text-3xl); - --sb-text-h4: var(--sb-text-2xl); - } -} - -@media (min-width: 72rem) { - :root { - --sb-content-pad-x: 1.5rem; - } -} diff --git a/packages/starbook/style/shiki.css b/packages/starbook/style/shiki.css deleted file mode 100644 index d87cfce9..00000000 --- a/packages/starbook/style/shiki.css +++ /dev/null @@ -1,13 +0,0 @@ -:root { - --astro-code-color-text: var(--sb-color-white); - --astro-code-color-background: var(--sb-color-gray-6); - --astro-code-token-constant: var(--sb-color-blue-high); - --astro-code-token-string: var(--sb-color-green-high); - --astro-code-token-comment: var(--sb-color-gray-2); - --astro-code-token-keyword: var(--sb-color-purple-high); - --astro-code-token-parameter: var(--sb-color-red-high); - --astro-code-token-function: var(--sb-color-red-high); - --astro-code-token-string-expression: var(--sb-color-green-high); - --astro-code-token-punctuation: var(--sb-color-gray-2); - --astro-code-token-link: var(--sb-color-blue-high); -} diff --git a/packages/starbook/types.ts b/packages/starbook/types.ts deleted file mode 100644 index 638755df..00000000 --- a/packages/starbook/types.ts +++ /dev/null @@ -1 +0,0 @@ -export { StarbookConfig } from './utils/user-config'; diff --git a/packages/starbook/virtual.d.ts b/packages/starbook/virtual.d.ts deleted file mode 100644 index 2713e066..00000000 --- a/packages/starbook/virtual.d.ts +++ /dev/null @@ -1,9 +0,0 @@ -declare module 'virtual:starbook/user-config' { - const Config: import('./types').StarbookConfig; - export default Config; -} -declare module 'virtual:starbook/project-context' { - export default { root: string }; -} - -declare module 'virtual:starbook/user-css' {} diff --git a/packages/starbook/404.astro b/packages/starlight/404.astro index 428d7477..a0f8bb4c 100644 --- a/packages/starbook/404.astro +++ b/packages/starlight/404.astro @@ -26,7 +26,7 @@ const locale = undefined; <ThemeProvider /> <PageFrame> <Header slot="header" locale={locale} /> - <main id="starbook__overview"> + <main id="starlight__overview"> <MarkdownContent> <h1>404</h1> <p>Houston, we have a problem.</p> @@ -40,10 +40,10 @@ const locale = undefined; </PageFrame> <style> - #starbook__overview { + #starlight__overview { margin: auto; - padding: clamp(2rem, 10vmin, 6rem) var(--sb-nav-pad-x); - max-width: var(--sb-content-width); + padding: clamp(2rem, 10vmin, 6rem) var(--sl-nav-pad-x); + max-width: var(--sl-content-width); max-width: max-content; } </style> diff --git a/packages/starlight/README.md b/packages/starlight/README.md new file mode 100644 index 00000000..937ce2cd --- /dev/null +++ b/packages/starlight/README.md @@ -0,0 +1,24 @@ +# Starlight + +Starlight is a documentation website framework for [Astro][astro]. + +## Documentation + +[Read the Starlight docs][docs] (they’re built with Starlight!) + +## Contributing + +- [Code of Conduct][coc] +- [Community Guide][community] + +## License + +MIT + +Copyright (c) 2023–present [Starlight contributors][contributors] + +[astro]: https://astro.build/ +[docs]: https://starlight.astro.build/ +[coc]: https://github.com/withastro/.github/blob/main/CODE_OF_CONDUCT.md +[community]: https://github.com/withastro/.github/blob/main/COMMUNITY_GUIDE.md +[contributors]: https://github.com/withastro/starlight/graphs/contributors diff --git a/packages/starbook/components/ContentPanel.astro b/packages/starlight/components/ContentPanel.astro index 570dbae1..4f3aaa2a 100644 --- a/packages/starbook/components/ContentPanel.astro +++ b/packages/starlight/components/ContentPanel.astro @@ -4,13 +4,13 @@ <style> .content-panel { - padding: 1.5rem var(--sb-content-pad-x); + padding: 1.5rem var(--sl-content-pad-x); } .content-panel + .content-panel { - border-top: 1px solid var(--sb-color-hairline); + border-top: 1px solid var(--sl-color-hairline); } .container { - max-width: var(--sb-content-width); + max-width: var(--sl-content-width); } .container > :global(* + *) { diff --git a/packages/starbook/components/EditLink.astro b/packages/starlight/components/EditLink.astro index 9b44099f..833be123 100644 --- a/packages/starbook/components/EditLink.astro +++ b/packages/starlight/components/EditLink.astro @@ -1,6 +1,6 @@ --- import type { CollectionEntry } from 'astro:content'; -import config from 'virtual:starbook/user-config'; +import config from 'virtual:starlight/user-config'; interface Props { data: CollectionEntry<'docs'>['data']; diff --git a/packages/starbook/components/FallbackContentNotice.astro b/packages/starlight/components/FallbackContentNotice.astro index e4dc3a4a..fc05938d 100644 --- a/packages/starbook/components/FallbackContentNotice.astro +++ b/packages/starlight/components/FallbackContentNotice.astro @@ -6,22 +6,22 @@ import Icon from './Icon.astro'; <Icon name={'warning'} size="1.5em" - color="var(--sb-color-orange-high)" + color="var(--sl-color-orange-high)" /><span>This content is not available in your language yet.</span> </p> <style> p { - border: 1px solid var(--sb-color-orange); + border: 1px solid var(--sl-color-orange); padding: 0.75em 1em; - background-color: var(--sb-color-orange-low); - color: var(--sb-color-orange-high); + background-color: var(--sl-color-orange-low); + color: var(--sl-color-orange-high); width: max-content; max-width: 100%; display: flex; align-items: center; gap: 0.75em; - font-size: var(--sb-text-body-sm); - line-height: var(--sb-line-height-headings); + font-size: var(--sl-text-body-sm); + line-height: var(--sl-line-height-headings); } </style> diff --git a/packages/starbook/components/HeadSEO.astro b/packages/starlight/components/HeadSEO.astro index 9ebdde57..3b300355 100644 --- a/packages/starbook/components/HeadSEO.astro +++ b/packages/starlight/components/HeadSEO.astro @@ -1,6 +1,6 @@ --- import type { CollectionEntry } from 'astro:content'; -import config from 'virtual:starbook/user-config'; +import config from 'virtual:starlight/user-config'; import { localizedUrl } from '../utils/localizedUrl'; interface Props { diff --git a/packages/starbook/components/Header.astro b/packages/starlight/components/Header.astro index 020b621b..f35e9e79 100644 --- a/packages/starbook/components/Header.astro +++ b/packages/starlight/components/Header.astro @@ -1,5 +1,5 @@ --- -import config from 'virtual:starbook/user-config'; +import config from 'virtual:starlight/user-config'; import LanguageSelect from './LanguageSelect.astro'; import Search from './Search.astro'; import ThemeSelect from './ThemeSelect.astro'; @@ -21,16 +21,16 @@ interface Props { <style> .header { display: flex; - gap: var(--sb-nav-gap); + gap: var(--sl-nav-gap); justify-content: space-between; align-items: center; height: 100%; } .site-title { - font-size: var(--sb-text-2xl); + font-size: var(--sl-text-2xl); font-weight: 600; - color: var(--sb-color-text-accent); + color: var(--sl-color-text-accent); text-decoration: none; white-space: nowrap; } @@ -41,16 +41,16 @@ interface Props { @media (min-width: 50rem) { .header { - --__sidebar-width: var(--sb-sidebar-width) - var(--sb-nav-pad-x); + --__sidebar-width: var(--sl-sidebar-width) - var(--sl-nav-pad-x); --__main-column-fr: calc( - (100% - var(--sb-content-width) - 2 * var(--sb-sidebar-width)) / 2 + (100% - var(--sl-content-width) - 2 * var(--sl-sidebar-width)) / 2 ); display: grid; grid-template-columns: /* 1 (site title): runs up until the main content column’s left edge. */ calc( var(--__sidebar-width) + - max(0rem, var(--__main-column-fr) - var(--sb-nav-gap)) + max(0rem, var(--__main-column-fr) - var(--sl-nav-gap)) ) /* 2 (search box): all free space that is available. */ 1fr diff --git a/packages/starbook/components/Icon.astro b/packages/starlight/components/Icon.astro index e080d18f..a8a54c87 100644 --- a/packages/starbook/components/Icon.astro +++ b/packages/starlight/components/Icon.astro @@ -22,14 +22,14 @@ const a11yAttrs = label height="16" viewBox="0 0 24 24" fill="currentColor" - style={`--sb-icon-color: ${color}; --sb-icon-size: ${size};`} + style={`--sl-icon-color: ${color}; --sl-icon-size: ${size};`} set:html={Icons[name]} /> <style> svg { - color: var(--sb-icon-color, inherit); - font-size: var(--sb-icon-size, 1em); + color: var(--sl-icon-color, inherit); + font-size: var(--sl-icon-size, 1em); width: 1em; height: 1em; } diff --git a/packages/starbook/components/Icons.ts b/packages/starlight/components/Icons.ts index 133e6fe6..133e6fe6 100644 --- a/packages/starbook/components/Icons.ts +++ b/packages/starlight/components/Icons.ts diff --git a/packages/starbook/components/LanguageSelect.astro b/packages/starlight/components/LanguageSelect.astro index 65d978e2..ebdb0546 100644 --- a/packages/starbook/components/LanguageSelect.astro +++ b/packages/starlight/components/LanguageSelect.astro @@ -1,5 +1,5 @@ --- -import config from 'virtual:starbook/user-config'; +import config from 'virtual:starlight/user-config'; import { localizedUrl } from '../utils/localizedUrl'; import Select from './Select.astro'; @@ -17,7 +17,7 @@ function localizedPathname(locale: string | undefined): string { { config.isMultilingual && ( - <starbook-lang-select> + <starlight-lang-select> <Select icon="translate" label="Select language" @@ -29,12 +29,12 @@ function localizedPathname(locale: string | undefined): string { }))} width="7em" /> - </starbook-lang-select> + </starlight-lang-select> ) } <script> - class StarBookLanguageSelect extends HTMLElement { + class StarlightLanguageSelect extends HTMLElement { constructor() { super(); const select = this.querySelector('select'); @@ -47,5 +47,5 @@ function localizedPathname(locale: string | undefined): string { } } } - customElements.define('starbook-lang-select', StarBookLanguageSelect); + customElements.define('starlight-lang-select', StarlightLanguageSelect); </script> diff --git a/packages/starbook/components/LastUpdated.astro b/packages/starlight/components/LastUpdated.astro index 707aa980..07e30031 100644 --- a/packages/starbook/components/LastUpdated.astro +++ b/packages/starlight/components/LastUpdated.astro @@ -1,7 +1,7 @@ --- import type { CollectionEntry } from 'astro:content'; import { fileURLToPath } from 'node:url'; -import project from 'virtual:starbook/project-context'; +import project from 'virtual:starlight/project-context'; import { getFileCommitDate } from '../utils/git'; interface Props { @@ -35,7 +35,7 @@ try { <style> p { margin-block: 3rem 1.5rem; - font-size: var(--sb-text-sm); - color: var(--sb-color-gray-3); + font-size: var(--sl-text-sm); + color: var(--sl-color-gray-3); } </style> diff --git a/packages/starbook/components/MarkdownContent.astro b/packages/starlight/components/MarkdownContent.astro index c2d1c2fe..736ea2a6 100644 --- a/packages/starbook/components/MarkdownContent.astro +++ b/packages/starlight/components/MarkdownContent.astro @@ -36,8 +36,8 @@ } .content :global(:is(h1, h2, h3, h4, h5, h6)) { - color: var(--sb-color-white); - line-height: var(--sb-line-height-headings); + color: var(--sl-color-white); + line-height: var(--sl-line-height-headings); font-weight: 600; } @@ -47,41 +47,41 @@ } .content :global(h1) { - font-size: var(--sb-text-h1); + font-size: var(--sl-text-h1); } .content :global(h2) { - font-size: var(--sb-text-h2); + font-size: var(--sl-text-h2); } .content :global(h3) { - font-size: var(--sb-text-h3); + font-size: var(--sl-text-h3); } .content :global(h4) { - font-size: var(--sb-text-h4); + font-size: var(--sl-text-h4); } .content :global(h5) { - font-size: var(--sb-text-h5); + font-size: var(--sl-text-h5); } .content :global(h6) { - font-size: var(--sb-text-h6); + font-size: var(--sl-text-h6); } .content :global(a) { - color: var(--sb-color-text-accent); + color: var(--sl-color-text-accent); } .content :global(a:hover) { - color: var(--sb-color-white); + color: var(--sl-color-white); } .content :global(code) { - background-color: var(--sb-color-bg-inline-code); + background-color: var(--sl-color-bg-inline-code); margin-block: -0.125rem; padding: 0.125rem 0.375rem; } .content :global(pre) { - border: 1px solid var(--sb-color-gray-5); + border: 1px solid var(--sl-color-gray-5); padding: 0.75rem 1rem; - font-size: var(--sb-text-code); + font-size: var(--sl-text-code); } .content :global(pre code) { @@ -89,24 +89,24 @@ } .content :global(blockquote) { - border-inline-start: 1px solid var(--sb-color-gray-5); + border-inline-start: 1px solid var(--sl-color-gray-5); padding-inline-start: 1rem; } .content :global(table) { - border: 1px solid var(--sb-color-gray-5); + border: 1px solid var(--sl-color-gray-5); border-collapse: collapse; } .content :global(tr:nth-child(2n)) { - background-color: var(--sb-color-gray-7, var(--sb-color-gray-6)); + background-color: var(--sl-color-gray-7, var(--sl-color-gray-6)); } .content :global(:is(th, td)) { - border: 1px solid var(--sb-color-hairline); + border: 1px solid var(--sl-color-hairline); padding: 0.375rem 0.8125rem; } .content :global(hr) { border: 0; - border-bottom: 1px solid var(--sb-color-hairline); + border-bottom: 1px solid var(--sl-color-hairline); } </style> diff --git a/packages/starbook/components/MobileMenuToggle.astro b/packages/starlight/components/MobileMenuToggle.astro index 1063c8b3..b0d77b84 100644 --- a/packages/starbook/components/MobileMenuToggle.astro +++ b/packages/starlight/components/MobileMenuToggle.astro @@ -2,19 +2,19 @@ import Icon from './Icon.astro'; --- -<starbook-menu-button> +<starlight-menu-button> <button aria-expanded="false" aria-label="Menu" - aria-controls="starbook__sidebar" + aria-controls="starlight__sidebar" class="md:hidden" > <Icon name="bars" /> </button> -</starbook-menu-button> +</starlight-menu-button> <script> - class StarbookMenuButton extends HTMLElement { + class StarlightMenuButton extends HTMLElement { btn = this.querySelector('button')!; constructor() { @@ -46,39 +46,39 @@ import Icon from './Icon.astro'; } } - customElements.define('starbook-menu-button', StarbookMenuButton); + customElements.define('starlight-menu-button', StarlightMenuButton); </script> <style> button { position: fixed; - top: calc((var(--sb-nav-height) - var(--sb-menu-button-size)) / 2); - inset-inline-end: var(--sb-nav-pad-x); - z-index: var(--sb-z-index-navbar); + top: calc((var(--sl-nav-height) - var(--sl-menu-button-size)) / 2); + inset-inline-end: var(--sl-nav-pad-x); + z-index: var(--sl-z-index-navbar); border: 0; border-radius: 50%; display: flex; - width: var(--sb-menu-button-size); - height: var(--sb-menu-button-size); + width: var(--sl-menu-button-size); + height: var(--sl-menu-button-size); padding: 0.5rem; - background-color: var(--sb-color-white); - color: var(--sb-color-black); - box-shadow: var(--sb-shadow-md); + background-color: var(--sl-color-white); + color: var(--sl-color-black); + box-shadow: var(--sl-shadow-md); cursor: pointer; } [aria-expanded='true'] button { - background-color: var(--sb-color-gray-2); + background-color: var(--sl-color-gray-2); box-shadow: none; } :global([data-theme='light']) button { - background-color: var(--sb-color-black); - color: var(--sb-color-white); + background-color: var(--sl-color-black); + color: var(--sl-color-white); } :global([data-theme='light']) [aria-expanded='true'] button { - background-color: var(--sb-color-gray-5); + background-color: var(--sl-color-gray-5); } </style> diff --git a/packages/starbook/components/PrevNextLinks.astro b/packages/starlight/components/PrevNextLinks.astro index 81b937b0..70dd4856 100644 --- a/packages/starbook/components/PrevNextLinks.astro +++ b/packages/starlight/components/PrevNextLinks.astro @@ -54,11 +54,11 @@ const isRtl = dir === 'rtl'; width: 100%; flex-basis: calc(50% - 0.5rem); flex-grow: 1; - border: 1px solid var(--sb-color-gray-5); + border: 1px solid var(--sl-color-gray-5); border-radius: 0.5rem; padding: 1rem; text-decoration: none; - color: var(--sb-color-gray-2); + color: var(--sl-color-gray-2); } [rel='next'] { justify-content: end; @@ -66,12 +66,12 @@ const isRtl = dir === 'rtl'; flex-direction: row-reverse; } a:hover { - border-color: var(--sb-color-gray-2); + border-color: var(--sl-color-gray-2); } .link-title { - color: var(--sb-color-white); - font-size: var(--sb-text-2xl); - line-height: var(--sb-line-height-headings); + color: var(--sl-color-white); + font-size: var(--sl-text-2xl); + line-height: var(--sl-line-height-headings); } </style> diff --git a/packages/starbook/components/RightSidebarPanel.astro b/packages/starlight/components/RightSidebarPanel.astro index 92d8a031..81ce2e4d 100644 --- a/packages/starbook/components/RightSidebarPanel.astro +++ b/packages/starlight/components/RightSidebarPanel.astro @@ -6,32 +6,32 @@ <style> .right-sidebar-panel { - padding: 1rem var(--sb-sidebar-pad-x); + padding: 1rem var(--sl-sidebar-pad-x); } .right-sidebar-panel + .right-sidebar-panel { - border-top: 1px solid var(--sb-color-hairline); + border-top: 1px solid var(--sl-color-hairline); } .container { - width: var(--sb-sidebar-width); + width: var(--sl-sidebar-width); } .right-sidebar-panel :global(h2) { - color: var(--sb-color-white); - font-size: var(--sb-text-base); + color: var(--sl-color-white); + font-size: var(--sl-text-base); font-weight: 600; } .right-sidebar-panel :global(a) { display: block; - font-size: var(--sb-text-xs); + font-size: var(--sl-text-xs); text-decoration: none; - color: var(--sb-color-gray-3); + color: var(--sl-color-gray-3); } .right-sidebar-panel :global(a:hover) { - color: var(--sb-color-white); + color: var(--sl-color-white); } @media (min-width: 72rem) { .container { max-width: calc( - 100vw - var(--sb-content-width) - var(--sb-sidebar-width) + 100vw - var(--sl-content-width) - var(--sl-sidebar-width) ); } } diff --git a/packages/starbook/components/Search.astro b/packages/starlight/components/Search.astro index 4e8cac60..ec51c448 100644 --- a/packages/starbook/components/Search.astro +++ b/packages/starlight/components/Search.astro @@ -25,7 +25,7 @@ import Icon from './Icon.astro'; </div> ) : ( <div class="search-container"> - <div id="starbook__search" /> + <div id="starlight__search" /> </div> ) } @@ -87,7 +87,7 @@ import Icon from './Icon.astro'; onIdle(async () => { const { PagefindUI } = await import('@pagefind/default-ui'); new PagefindUI({ - element: '#starbook__search', + element: '#starlight__search', baseUrl: import.meta.env.BASE_URL, showImages: false, }); @@ -102,27 +102,27 @@ import Icon from './Icon.astro'; gap: 0.5rem; border: 0; background-color: transparent; - color: var(--sb-color-gray-1); + color: var(--sl-color-gray-1); cursor: pointer; height: 2.5rem; - font-size: var(--sb-text-xl); + font-size: var(--sl-text-xl); } @media (min-width: 50rem) { button[data-open-modal] { - border: 1px solid var(--sb-color-gray-5); + border: 1px solid var(--sl-color-gray-5); border-radius: 0.5rem; padding-inline-start: 0.75rem; padding-inline-end: 1rem; - background-color: var(--sb-color-black); - color: var(--sb-color-gray-2); - font-size: var(--sb-text-sm); + background-color: var(--sl-color-black); + color: var(--sl-color-gray-2); + font-size: var(--sl-text-sm); width: 100%; max-width: 22rem; } button[data-open-modal]:hover { - border-color: var(--sb-color-gray-2); - color: var(--sb-color-white); + border-color: var(--sl-color-gray-2); + color: var(--sl-color-white); } button[data-open-modal] > :last-child { @@ -132,20 +132,20 @@ import Icon from './Icon.astro'; dialog { margin: 0; - background-color: var(--sb-color-gray-6); - border: 1px solid var(--sb-color-gray-5); + background-color: var(--sl-color-gray-6); + border: 1px solid var(--sl-color-gray-5); width: 100%; max-width: 100%; height: 100%; max-height: 100%; - box-shadow: var(--sb-shadow-lg); + box-shadow: var(--sl-shadow-lg); } dialog[open] { display: grid; } dialog::backdrop { - background-color: var(--sb-color-backdrop-overlay); + background-color: var(--sl-color-backdrop-overlay); -webkit-backdrop-filter: blur(0.25rem); backdrop-filter: blur(0.25rem); } @@ -168,21 +168,21 @@ import Icon from './Icon.astro'; border: 0; background: transparent; cursor: pointer; - color: var(--sb-color-text-accent); + color: var(--sl-color-text-accent); } - #starbook__search { - --pagefind-ui-primary: var(--sb-color-accent-light); - --pagefind-ui-text: var(--sb-color-gray-2); - --pagefind-ui-background: var(--sb-color-black); - --pagefind-ui-border: var(--sb-color-gray-5); + #starlight__search { + --pagefind-ui-primary: var(--sl-color-accent-light); + --pagefind-ui-text: var(--sl-color-gray-2); + --pagefind-ui-background: var(--sl-color-black); + --pagefind-ui-border: var(--sl-color-gray-5); --pagefind-ui-border-width: 1px; - --sb-search-cancel-space: 5rem; + --sl-search-cancel-space: 5rem; } @media (min-width: 50rem) { - #starbook__search { - --sb-search-cancel-space: 0px; + #starlight__search { + --sl-search-cancel-space: 0px; } dialog { @@ -202,95 +202,95 @@ import Icon from './Icon.astro'; </style> <style is:global> - #starbook__search .pagefind-ui__form::before { - --pagefind-ui-text: var(--sb-color-gray-1); + #starlight__search .pagefind-ui__form::before { + --pagefind-ui-text: var(--sl-color-gray-1); opacity: 1; } - #starbook__search .pagefind-ui__search-input { - color: var(--sb-color-white); + #starlight__search .pagefind-ui__search-input { + color: var(--sl-color-white); font-weight: 400; - width: calc(100% - var(--sb-search-cancel-space)); + width: calc(100% - var(--sl-search-cancel-space)); } - #starbook__search input:focus { - --pagefind-ui-border: var(--sb-color-accent); + #starlight__search input:focus { + --pagefind-ui-border: var(--sl-color-accent); } - #starbook__search .pagefind-ui__search-clear { - inset-inline-end: var(--sb-search-cancel-space); + #starlight__search .pagefind-ui__search-clear { + inset-inline-end: var(--sl-search-cancel-space); width: calc(60px * var(--pagefind-ui-scale)); padding: 0; background-color: transparent; overflow: hidden; } - #starbook__search .pagefind-ui__search-clear:focus { - outline: 1px solid var(--sb-color-accent); + #starlight__search .pagefind-ui__search-clear:focus { + outline: 1px solid var(--sl-color-accent); } - #starbook__search .pagefind-ui__search-clear::before { + #starlight__search .pagefind-ui__search-clear::before { content: ''; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m13.41 12 6.3-6.29a1 1 0 1 0-1.42-1.42L12 10.59l-6.29-6.3a1 1 0 0 0-1.42 1.42l6.3 6.29-6.3 6.29a1 1 0 0 0 .33 1.64 1 1 0 0 0 1.09-.22l6.29-6.3 6.29 6.3a1 1 0 0 0 1.64-.33 1 1 0 0 0-.22-1.09L13.41 12Z'/%3E%3C/svg%3E") center / 50% no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m13.41 12 6.3-6.29a1 1 0 1 0-1.42-1.42L12 10.59l-6.29-6.3a1 1 0 0 0-1.42 1.42l6.3 6.29-6.3 6.29a1 1 0 0 0 .33 1.64 1 1 0 0 0 1.09-.22l6.29-6.3 6.29 6.3a1 1 0 0 0 1.64-.33 1 1 0 0 0-.22-1.09L13.41 12Z'/%3E%3C/svg%3E") center / 50% no-repeat; - background-color: var(--sb-color-text-accent); + background-color: var(--sl-color-text-accent); display: block; width: 100%; height: 100%; } - #starbook__search .pagefind-ui__results > * + * { + #starlight__search .pagefind-ui__results > * + * { margin-top: 0.5rem; } - #starbook__search .pagefind-ui__result { + #starlight__search .pagefind-ui__result { position: relative; border: 0; border-radius: 0.25rem; padding: 1rem; - background-color: var(--sb-color-black); + background-color: var(--sl-color-black); } - #starbook__search .pagefind-ui__result:hover, - #starbook__search .pagefind-ui__result:focus-within { - outline: 1px solid var(--sb-color-accent-high); + #starlight__search .pagefind-ui__result:hover, + #starlight__search .pagefind-ui__result:focus-within { + outline: 1px solid var(--sl-color-accent-high); } - #starbook__search .pagefind-ui__result:focus-within { - background-color: var(--sb-color-accent-low); + #starlight__search .pagefind-ui__result:focus-within { + background-color: var(--sl-color-accent-low); } - #starbook__search .pagefind-ui__result-thumb, - #starbook__search .pagefind-ui__result-inner { + #starlight__search .pagefind-ui__result-thumb, + #starlight__search .pagefind-ui__result-inner { margin-top: 0; } - #starbook__search .pagefind-ui__result-link { - --pagefind-ui-text: var(--sb-color-white); + #starlight__search .pagefind-ui__result-link { + --pagefind-ui-text: var(--sl-color-white); font-weight: 600; } - #starbook__search .pagefind-ui__result-link:hover { + #starlight__search .pagefind-ui__result-link:hover { text-decoration: none; } - #starbook__search .pagefind-ui__result-link::after { + #starlight__search .pagefind-ui__result-link::after { content: ''; position: absolute; inset: 0; } - #starbook__search .pagefind-ui__result-excerpt { - font-size: var(--sb-text-body-sm); + #starlight__search .pagefind-ui__result-excerpt { + font-size: var(--sl-text-body-sm); } - #starbook__search mark { - color: var(--sb-color-white); - background-color: var(--sb-color-accent-low); + #starlight__search mark { + color: var(--sl-color-white); + background-color: var(--sl-color-accent-low); font-weight: 500; padding: 0.1em 0.2em; } - #starbook__search .pagefind-ui__result:focus-within mark { + #starlight__search .pagefind-ui__result:focus-within mark { text-decoration: underline; } </style> diff --git a/packages/starbook/components/Select.astro b/packages/starlight/components/Select.astro index 1f816383..1cd5fbd3 100644 --- a/packages/starbook/components/Select.astro +++ b/packages/starlight/components/Select.astro @@ -14,7 +14,7 @@ interface Props { } --- -<label style={`--sb-select-width: ${Astro.props.width}`}> +<label style={`--sl-select-width: ${Astro.props.width}`}> <span class="sr-only">{Astro.props.label}</span> <Icon name={Astro.props.icon} class="icon label-icon" /> <select value={Astro.props.value}> @@ -29,17 +29,17 @@ interface Props { <style> label { - --sb-label-icon-size: 0.875rem; - --sb-caret-size: 1.25rem; + --sl-label-icon-size: 0.875rem; + --sl-caret-size: 1.25rem; position: relative; display: flex; align-items: center; gap: 0.25rem; - color: var(--sb-color-gray-1); + color: var(--sl-color-gray-1); } label:hover { - color: var(--sb-color-gray-2); + color: var(--sl-color-gray-2); } .icon { @@ -50,21 +50,21 @@ interface Props { } .label-icon { - font-size: var(--sb-label-icon-size); + font-size: var(--sl-label-icon-size); inset-inline-start: 0; } .caret { - font-size: var(--sb-caret-size); + font-size: var(--sl-caret-size); inset-inline-end: 0; } select { border: 0; padding-block: 0.625rem; - padding-inline: calc(var(--sb-label-icon-size) + 0.25rem) - calc(var(--sb-caret-size) + 0.25rem); - width: var(--sb-select-width); + padding-inline: calc(var(--sl-label-icon-size) + 0.25rem) + calc(var(--sl-caret-size) + 0.25rem); + width: var(--sl-select-width); background-color: transparent; text-overflow: ellipsis; color: inherit; @@ -74,7 +74,7 @@ interface Props { @media (min-width: 50rem) { select { - font-size: var(--sb-text-sm); + font-size: var(--sl-text-sm); } } </style> diff --git a/packages/starbook/components/Sidebar.astro b/packages/starlight/components/Sidebar.astro index 5ab43b43..cd514ffc 100644 --- a/packages/starbook/components/Sidebar.astro +++ b/packages/starlight/components/Sidebar.astro @@ -21,14 +21,14 @@ interface Props { <style> .sidebar { height: 100%; - padding: 1rem var(--sb-sidebar-pad-x); + padding: 1rem var(--sl-sidebar-pad-x); flex-direction: column; gap: 1rem; } .mobile-preferences { justify-content: space-between; - border-top: 1px solid var(--sb-color-gray-6); + border-top: 1px solid var(--sl-color-gray-6); padding: 0.5rem 0; } </style> diff --git a/packages/starbook/components/SidebarSublist.astro b/packages/starlight/components/SidebarSublist.astro index ecca5033..2065c889 100644 --- a/packages/starbook/components/SidebarSublist.astro +++ b/packages/starlight/components/SidebarSublist.astro @@ -27,16 +27,16 @@ interface Props { <style> ul { - --sb-sidebar-item-padding-inline: 0.5rem; + --sl-sidebar-item-padding-inline: 0.5rem; list-style: none; padding: 0; } h2 { - font-size: var(--sb-text-lg); + font-size: var(--sl-text-lg); font-weight: 600; - color: var(--sb-color-white); - padding-inline: var(--sb-sidebar-item-padding-inline); + color: var(--sl-color-white); + padding-inline: var(--sl-sidebar-item-padding-inline); } .sidebar-group + .sidebar-group { @@ -47,21 +47,21 @@ interface Props { display: block; border-radius: 0.25rem; text-decoration: none; - color: var(--sb-color-gray-2); - padding-inline: var(--sb-sidebar-item-padding-inline); + color: var(--sl-color-gray-2); + padding-inline: var(--sl-sidebar-item-padding-inline); } a:hover, a:focus { - color: var(--sb-color-white); + color: var(--sl-color-white); } [aria-current='true'], [aria-current='true']:hover, [aria-current='true']:focus { font-weight: 600; - color: var(--sb-color-text-invert); - background-color: var(--sb-color-text-accent); + color: var(--sl-color-text-invert); + background-color: var(--sl-color-text-accent); } @media (min-width: 50rem) { @@ -69,10 +69,10 @@ interface Props { margin-top: 0.5rem; } h2 { - font-size: var(--sb-text-base); + font-size: var(--sl-text-base); } a { - font-size: var(--sb-text-xs); + font-size: var(--sl-text-xs); } } </style> diff --git a/packages/starlight/components/SkipLink.astro b/packages/starlight/components/SkipLink.astro new file mode 100644 index 00000000..29120f89 --- /dev/null +++ b/packages/starlight/components/SkipLink.astro @@ -0,0 +1,18 @@ +<a href="#starlight__overview">Skip to content</a> + +<style> + a { + position: fixed; + top: 0.75rem; + inset-inline-start: 0.75rem; + } + a:focus { + z-index: var(--sl-z-index-skiplink); + display: block; + padding: 0.5rem 1rem; + text-decoration: none; + color: var(--sl-color-text-invert); + background-color: var(--sl-color-text-accent); + box-shadow: var(--sl-shadow-lg); + } +</style> diff --git a/packages/starbook/components/TableOfContents.astro b/packages/starlight/components/TableOfContents.astro index d58fc169..3732bce5 100644 --- a/packages/starbook/components/TableOfContents.astro +++ b/packages/starlight/components/TableOfContents.astro @@ -1,6 +1,6 @@ --- import type { MarkdownHeading } from 'astro'; -import config from 'virtual:starbook/user-config'; +import config from 'virtual:starlight/user-config'; import { generateToC } from './TableOfContents/generateToC'; import TableOfContentsList from './TableOfContents/TableOfContentsList.astro'; @@ -11,7 +11,7 @@ interface Props { const toc = generateToC(Astro.props.headings, config.tableOfContents); --- -<nav aria-labelledby="starbook__on-this-page"> - <h2 id="starbook__on-this-page">On this page</h2> +<nav aria-labelledby="starlight__on-this-page"> + <h2 id="starlight__on-this-page">On this page</h2> <TableOfContentsList toc={toc} /> </nav> diff --git a/packages/starbook/components/TableOfContents/TableOfContentsList.astro b/packages/starlight/components/TableOfContents/TableOfContentsList.astro index d05b60bd..d05b60bd 100644 --- a/packages/starbook/components/TableOfContents/TableOfContentsList.astro +++ b/packages/starlight/components/TableOfContents/TableOfContentsList.astro diff --git a/packages/starbook/components/TableOfContents/generateToC.ts b/packages/starlight/components/TableOfContents/generateToC.ts index 93dbbcd1..155eb285 100644 --- a/packages/starbook/components/TableOfContents/generateToC.ts +++ b/packages/starlight/components/TableOfContents/generateToC.ts @@ -24,7 +24,7 @@ export function generateToC( headings: MarkdownHeading[], { minHeadingLevel, maxHeadingLevel, title = 'Overview' }: TocOpts ) { - const overview = { depth: 2, slug: 'starbook__overview', text: title }; + const overview = { depth: 2, slug: 'starlight__overview', text: title }; headings = [ overview, ...headings.filter( diff --git a/packages/starbook/components/ThemeProvider.astro b/packages/starlight/components/ThemeProvider.astro index 4d785707..85890fd6 100644 --- a/packages/starbook/components/ThemeProvider.astro +++ b/packages/starlight/components/ThemeProvider.astro @@ -4,7 +4,7 @@ import Icon from './Icon.astro'; <script> declare global { - var StarbookThemeProvider: { + var StarlightThemeProvider: { updatePickers(theme?: string): void; }; } @@ -12,10 +12,10 @@ import Icon from './Icon.astro'; {/* This is intentionally inlined to avoid FOUC. */} <script is:inline> - window.StarbookThemeProvider = (() => { + window.StarlightThemeProvider = (() => { const storedTheme = typeof localStorage !== 'undefined' && - localStorage.getItem('starbook-theme'); + localStorage.getItem('starlight-theme'); const theme = storedTheme || (window.matchMedia('(prefers-color-scheme: light)').matches @@ -25,7 +25,7 @@ import Icon from './Icon.astro'; theme === 'light' ? 'light' : 'dark'; return { updatePickers(theme = storedTheme || 'auto') { - document.querySelectorAll('starbook-theme-select').forEach((picker) => { + document.querySelectorAll('starlight-theme-select').forEach((picker) => { const select = picker.querySelector('select'); if (select) select.value = theme; /** @type {HTMLTemplateElement | null} */ diff --git a/packages/starbook/components/ThemeSelect.astro b/packages/starlight/components/ThemeSelect.astro index c94a9852..246747bd 100644 --- a/packages/starbook/components/ThemeSelect.astro +++ b/packages/starlight/components/ThemeSelect.astro @@ -2,7 +2,7 @@ import Select from './Select.astro'; --- -<starbook-theme-select> +<starlight-theme-select> <Select icon="laptop" label="Select theme" @@ -14,19 +14,19 @@ import Select from './Select.astro'; ]} width="5.5em" /> -</starbook-theme-select> +</starlight-theme-select> {/* Inlined to avoid FOUC. Uses global scope from `ThemeProvider.astro` */} <script is:inline> - StarbookThemeProvider.updatePickers(); + StarlightThemeProvider.updatePickers(); </script> <script> type Theme = 'auto' | 'dark' | 'light'; - class StarBookThemeSelect extends HTMLElement { + class StarlightThemeSelect extends HTMLElement { /** Key in `localStorage` to store color theme preference at. */ - #key = 'starbook-theme'; + #key = 'starlight-theme'; constructor() { super(); @@ -59,7 +59,7 @@ import Select from './Select.astro'; /** Update select menu UI, document theme, and local storage state. */ #onThemeChange(theme: Theme): void { - StarbookThemeProvider.updatePickers(theme); + StarlightThemeProvider.updatePickers(theme); document.documentElement.dataset.theme = theme === 'auto' ? this.#getPreferredColorScheme() : theme; this.#storeTheme(theme); @@ -84,5 +84,5 @@ import Select from './Select.astro'; } } - customElements.define('starbook-theme-select', StarBookThemeSelect); + customElements.define('starlight-theme-select', StarlightThemeSelect); </script> diff --git a/packages/starbook/index.astro b/packages/starlight/index.astro index 4ae47c32..238ce8e6 100644 --- a/packages/starbook/index.astro +++ b/packages/starlight/index.astro @@ -1,6 +1,6 @@ --- import type { InferGetStaticPropsType } from 'astro'; -import config from 'virtual:starbook/user-config'; +import config from 'virtual:starlight/user-config'; import { getPrevNextLinks, getSidebar } from './utils/navigation'; import { paths } from './utils/routing'; @@ -32,7 +32,7 @@ import TwoColumnContent from './layout/TwoColumnContent.astro'; import './style/asides.css'; // Important that this is the last import so it can override built-in styles. -import 'virtual:starbook/user-css'; +import 'virtual:starlight/user-css'; export async function getStaticPaths() { return paths; @@ -75,14 +75,14 @@ const prevNextLinks = getPrevNextLinks(sidebar); </RightSidebarPanel> </Fragment> <main - id="starbook__overview" + id="starlight__overview" data-pagefind-body lang={entryMeta.lang} dir={entryMeta.dir} > <ContentPanel> <h1 - style="font-size: var(--sb-text-h1); line-height: var(--sb-line-height-headings); font-weight: 600; color: var(--sb-color-white); margin-top: 1rem;" + style="font-size: var(--sl-text-h1); line-height: var(--sl-line-height-headings); font-weight: 600; color: var(--sl-color-white); margin-top: 1rem;" > {entry.data.title} </h1> diff --git a/packages/starbook/index.ts b/packages/starlight/index.ts index 6e7b5fb7..ac4d452d 100644 --- a/packages/starbook/index.ts +++ b/packages/starlight/index.ts @@ -8,33 +8,33 @@ import type { import { spawn } from 'node:child_process'; import { dirname, relative } from 'node:path'; import { fileURLToPath } from 'node:url'; -import { starbookAsides } from './integrations/asides'; +import { starlightAsides } from './integrations/asides'; import { - StarBookUserConfig, - StarbookConfig, - StarbookConfigSchema, + StarlightUserConfig, + StarlightConfig, + StarlightConfigSchema, } from './utils/user-config'; -export default function StarbookIntegration( - opts: StarBookUserConfig +export default function StarlightIntegration( + opts: StarlightUserConfig ): AstroIntegration[] { - const userConfig = StarbookConfigSchema.parse(opts); + const userConfig = StarlightConfigSchema.parse(opts); - const StarBook: AstroIntegration = { - name: 'starbook', + const Starlight: AstroIntegration = { + name: 'starlight', hooks: { 'astro:config:setup': ({ config, injectRoute, updateConfig }) => { - injectRoute({ pattern: '404', entryPoint: 'starbook/404.astro' }); + injectRoute({ pattern: '404', entryPoint: 'starlight/404.astro' }); injectRoute({ pattern: '[...slug]', - entryPoint: 'starbook/index.astro', + entryPoint: 'starlight/index.astro', }); const newConfig: AstroUserConfig = { vite: { - plugins: [vitePluginStarBookUserConfig(userConfig, config)], + plugins: [vitePluginStarlightUserConfig(userConfig, config)], }, markdown: { - remarkPlugins: [...starbookAsides()], + remarkPlugins: [...starlightAsides()], shikiConfig: // Configure Shiki theme if the user is using the default github-dark theme. config.markdown.shikiConfig.theme !== 'github-dark' @@ -60,24 +60,24 @@ export default function StarbookIntegration( }, }; - return [StarBook, mdx()]; + return [Starlight, mdx()]; } function resolveVirtualModuleId(id: string) { return '\0' + id; } -/** Expose the StarBook user config object via a virtual module. */ -function vitePluginStarBookUserConfig( - opts: StarbookConfig, +/** Expose the Starlight user config object via a virtual module. */ +function vitePluginStarlightUserConfig( + opts: StarlightConfig, { root }: AstroConfig ): NonNullable<ViteUserConfig['plugins']>[number] { const modules = { - 'virtual:starbook/user-config': `export default ${JSON.stringify(opts)}`, - 'virtual:starbook/project-context': `export default ${JSON.stringify({ + 'virtual:starlight/user-config': `export default ${JSON.stringify(opts)}`, + 'virtual:starlight/project-context': `export default ${JSON.stringify({ root, })}`, - 'virtual:starbook/user-css': opts.customCss + 'virtual:starlight/user-css': opts.customCss .map((id) => `import "${id}";`) .join(''), }; @@ -89,7 +89,7 @@ function vitePluginStarBookUserConfig( ); return { - name: 'vite-plugin-starbook-user-config', + name: 'vite-plugin-starlight-user-config', resolveId(id): string | void { if (id in modules) return resolveVirtualModuleId(id); }, diff --git a/packages/starbook/integrations/asides.ts b/packages/starlight/integrations/asides.ts index 61a18278..6c3ca58b 100644 --- a/packages/starbook/integrations/asides.ts +++ b/packages/starlight/integrations/asides.ts @@ -42,9 +42,9 @@ function s(el: string, attrs: Properties = {}, children: any[] = []): P { * will produce this output * * ```astro - * <aside class="starbook-aside starbook-aside--tip" aria-label="Did you know?"> - * <p class="starbook-aside__title" aria-hidden="true">Did you know?</p> - * <section class="starbook-aside__content"> + * <aside class="starlight-aside starlight-aside--tip" aria-label="Did you know?"> + * <p class="starlight-aside__title" aria-hidden="true">Did you know?</p> + * <section class="starlight-aside__content"> * <p>Astro helps you build faster websites with “Islands Architecture”.</p> * </section> * </Aside> @@ -125,10 +125,10 @@ function remarkAsides(): Plugin<[], Root> { 'aside', { 'aria-label': title, - class: `starbook-aside starbook-aside--${variant}`, + class: `starlight-aside starlight-aside--${variant}`, }, [ - h('p', { class: 'starbook-aside__title', 'aria-hidden': 'true' }, [ + h('p', { class: 'starlight-aside__title', 'aria-hidden': 'true' }, [ s( 'svg', { @@ -136,13 +136,13 @@ function remarkAsides(): Plugin<[], Root> { width: 16, height: 16, fill: 'currentColor', - class: 'starbook-aside__icon', + class: 'starlight-aside__icon', }, iconPaths[variant] ), { type: 'text', value: title }, ]), - h('section', { class: 'starbook-aside__content' }, node.children), + h('section', { class: 'starlight-aside__content' }, node.children), ] ); @@ -159,6 +159,6 @@ type RemarkPlugins = NonNullable< NonNullable<AstroUserConfig['markdown']>['remarkPlugins'] >; -export function starbookAsides(): RemarkPlugins { +export function starlightAsides(): RemarkPlugins { return [remarkDirective, remarkAsides()]; } diff --git a/packages/starbook/layout/PageFrame.astro b/packages/starlight/layout/PageFrame.astro index bba5a3af..facce586 100644 --- a/packages/starbook/layout/PageFrame.astro +++ b/packages/starlight/layout/PageFrame.astro @@ -10,7 +10,7 @@ const hasSidebar = Astro.slots.has('sidebar'); hasSidebar && ( <nav class="sidebar" aria-label="Main"> <MobileMenuToggle /> - <div id="starbook__sidebar" class="sidebar-pane"> + <div id="starlight__sidebar" class="sidebar-pane"> <div class="sidebar-content"> <slot name="sidebar" /> </div> @@ -29,36 +29,36 @@ const hasSidebar = Astro.slots.has('sidebar'); } .header { - z-index: var(--sb-z-index-navbar); + z-index: var(--sl-z-index-navbar); position: fixed; inset-inline-start: 0; inset-block-start: 0; width: 100%; - height: var(--sb-nav-height); - border-bottom: 1px solid var(--sb-color-hairline-shade); - padding: var(--sb-nav-pad-y) var(--sb-nav-pad-x); - padding-inline-end: var(--sb-nav-pad-x); - background-color: var(--sb-color-bg-nav); + height: var(--sl-nav-height); + border-bottom: 1px solid var(--sl-color-hairline-shade); + padding: var(--sl-nav-pad-y) var(--sl-nav-pad-x); + padding-inline-end: var(--sl-nav-pad-x); + background-color: var(--sl-color-bg-nav); } .hasSidebar .header { padding-inline-end: calc( - var(--sb-nav-gap) + var(--sb-nav-pad-x) + var(--sb-menu-button-size) + var(--sl-nav-gap) + var(--sl-nav-pad-x) + var(--sl-menu-button-size) ); } .sidebar-pane { - visibility: var(--sb-sidebar-visibility, hidden); + visibility: var(--sl-sidebar-visibility, hidden); position: fixed; inset-block: 0; inset-inline-start: 0; - padding-top: var(--sb-nav-height); + padding-top: var(--sl-nav-height); width: 100%; - background-color: var(--sb-color-black); + background-color: var(--sl-color-black); } :global([aria-expanded='true']) ~ .sidebar-pane { - --sb-sidebar-visibility: visible; + --sl-sidebar-visibility: visible; } .sidebar-content { @@ -67,22 +67,22 @@ const hasSidebar = Astro.slots.has('sidebar'); } .main-frame { - padding-top: var(--sb-nav-height); + padding-top: var(--sl-nav-height); } @media (min-width: 50rem) { .hasSidebar .header { - padding-inline-end: var(--sb-nav-pad-x); + padding-inline-end: var(--sl-nav-pad-x); } .sidebar-pane { - --sb-sidebar-visibility: visible; - width: var(--sb-sidebar-width); - background-color: var(--sb-color-bg-sidebar); - border-inline-end: 1px solid var(--sb-color-hairline-shade); + --sl-sidebar-visibility: visible; + width: var(--sl-sidebar-width); + background-color: var(--sl-color-bg-sidebar); + border-inline-end: 1px solid var(--sl-color-hairline-shade); } .hasSidebar .main-frame { - padding-inline-start: var(--sb-sidebar-width); + padding-inline-start: var(--sl-sidebar-width); } } </style> diff --git a/packages/starbook/layout/TwoColumnContent.astro b/packages/starlight/layout/TwoColumnContent.astro index 0bc96bde..14e9db77 100644 --- a/packages/starbook/layout/TwoColumnContent.astro +++ b/packages/starlight/layout/TwoColumnContent.astro @@ -15,16 +15,16 @@ order: 2; position: relative; width: calc( - var(--sb-sidebar-width) + - (100% - var(--sb-content-width) - var(--sb-sidebar-width)) / 2 + var(--sl-sidebar-width) + + (100% - var(--sl-content-width) - var(--sl-sidebar-width)) / 2 ); } .right-sidebar { position: fixed; top: 0; - border-inline-start: 1px solid var(--sb-color-gray-6); - padding-top: var(--sb-nav-height); + border-inline-start: 1px solid var(--sl-color-gray-6); + padding-top: var(--sl-nav-height); width: 100%; height: 100vh; overflow-y: auto; @@ -34,8 +34,8 @@ .main-pane { order: 1; width: calc( - var(--sb-content-width) + - (100% - var(--sb-content-width) - var(--sb-sidebar-width)) / 2 + var(--sl-content-width) + + (100% - var(--sl-content-width) - var(--sl-sidebar-width)) / 2 ); } } diff --git a/packages/starbook/package.json b/packages/starlight/package.json index 7ca4cf73..4ddf4502 100644 --- a/packages/starbook/package.json +++ b/packages/starlight/package.json @@ -1,5 +1,5 @@ { - "name": "starbook", + "name": "starlight", "version": "0.0.0", "description": "Build beautiful, high-performance documentation websites with Astro", "scripts": {}, diff --git a/packages/starbook/schema.ts b/packages/starlight/schema.ts index 3178ba16..3178ba16 100644 --- a/packages/starbook/schema.ts +++ b/packages/starlight/schema.ts diff --git a/packages/starlight/style/asides.css b/packages/starlight/style/asides.css new file mode 100644 index 00000000..3fb3d16e --- /dev/null +++ b/packages/starlight/style/asides.css @@ -0,0 +1,49 @@ +.starlight-aside { + padding: 1rem; + border-inline-start: 0.25rem solid; + color: var(--sl-color-white); +} +.starlight-aside--note { + --sl-color-asides-text-accent: var(--sl-color-blue-high); + border-color: var(--sl-color-blue); + background-color: var(--sl-color-blue-low); +} +.starlight-aside--tip { + --sl-color-asides-text-accent: var(--sl-color-purple-high); + border-color: var(--sl-color-purple); + background-color: var(--sl-color-purple-low); +} +.starlight-aside--caution { + --sl-color-asides-text-accent: var(--sl-color-orange-high); + border-color: var(--sl-color-orange); + background-color: var(--sl-color-orange-low); +} +.starlight-aside--danger { + --sl-color-asides-text-accent: var(--sl-color-red-high); + border-color: var(--sl-color-red); + background-color: var(--sl-color-red-low); +} + +.starlight-aside__title { + display: flex; + gap: 0.5rem; + align-items: center; + font-size: var(--sl-text-h5); + font-weight: 600; + line-height: var(--sl-line-height-headings); + color: var(--sl-color-asides-text-accent); +} + +.starlight-aside__icon { + font-size: 1.333em; + width: 1em; + height: 1em; +} + +.starlight-aside__title + .starlight-aside__content { + margin-top: 0.5rem; +} + +.starlight-aside__content a { + color: var(--sl-color-asides-text-accent); +} diff --git a/packages/starlight/style/props.css b/packages/starlight/style/props.css new file mode 100644 index 00000000..54b7c4dc --- /dev/null +++ b/packages/starlight/style/props.css @@ -0,0 +1,197 @@ +:root, +::backdrop { + /* Colors (dark mode) */ + --sl-color-white: hsl(0, 0%, 100%); /* “white” */ + --sl-color-gray-1: hsl(231, 23%, 94%); + --sl-color-gray-2: hsl(228, 8%, 77%); + --sl-color-gray-3: hsl(221, 8%, 56%); + --sl-color-gray-4: hsl(225, 9%, 36%); + --sl-color-gray-5: hsl(222, 11%, 23%); + --sl-color-gray-6: hsl(222, 13%, 16%); + --sl-color-black: hsl(223, 13%, 10%); + + --sl-hue-orange: 41; + --sl-color-orange-low: hsl(var(--sl-hue-orange), 39%, 22%); + --sl-color-orange: hsl(var(--sl-hue-orange), 82%, 63%); + --sl-color-orange-high: hsl(var(--sl-hue-orange), 82%, 87%); + --sl-hue-green: 101; + --sl-color-green-low: hsl(var(--sl-hue-green), 39%, 22%); + --sl-color-green: hsl(var(--sl-hue-green), 82%, 63%); + --sl-color-green-high: hsl(var(--sl-hue-green), 82%, 87%); + --sl-hue-blue: 234; + --sl-color-blue-low: hsl(var(--sl-hue-blue), 54%, 20%); + --sl-color-blue: hsl(var(--sl-hue-blue), 100%, 60%); + --sl-color-blue-high: hsl(var(--sl-hue-blue), 100%, 87%); + --sl-hue-purple: 281; + --sl-color-purple-low: hsl(var(--sl-hue-purple), 39%, 22%); + --sl-color-purple: hsl(var(--sl-hue-purple), 82%, 63%); + --sl-color-purple-high: hsl(var(--sl-hue-purple), 82%, 89%); + --sl-hue-red: 339; + --sl-color-red-low: hsl(var(--sl-hue-red), 39%, 22%); + --sl-color-red: hsl(var(--sl-hue-red), 82%, 63%); + --sl-color-red-high: hsl(var(--sl-hue-red), 82%, 87%); + + --sl-hue-accent: var(--sl-hue-blue); + --sl-color-accent-low: hsl(var(--sl-hue-accent), 54%, 20%); + --sl-color-accent: hsl(var(--sl-hue-accent), 100%, 60%); + --sl-color-accent-high: hsl(var(--sl-hue-accent), 100%, 87%); + + --sl-color-text: var(--sl-color-gray-2); + --sl-color-text-accent: var(--sl-color-accent-high); + --sl-color-text-invert: var(--sl-color-accent-low); + --sl-color-bg: var(--sl-color-black); + --sl-color-bg-nav: var(--sl-color-gray-6); + --sl-color-bg-sidebar: var(--sl-color-gray-6); + --sl-color-bg-inline-code: var(--sl-color-gray-5); + --sl-color-hairline: var(--sl-color-gray-6); + --sl-color-hairline-shade: var(--sl-color-black); + + --sl-color-backdrop-overlay: hsla(223, 13%, 10%, 0.66); + + /* Shadows (dark mode) */ + --sl-shadow-sm: 0px 1px 1px hsla(0, 0%, 0%, 0.12), + 0px 2px 1px hsla(0, 0%, 0%, 0.24); + --sl-shadow-md: 0px 8px 4px hsla(0, 0%, 0%, 0.08), + 0px 5px 2px hsla(0, 0%, 0%, 0.08), 0px 3px 2px hsla(0, 0%, 0%, 0.12), + 0px 1px 1px hsla(0, 0%, 0%, 0.15); + --sl-shadow-lg: 0px 25px 7px hsla(0, 0%, 0%, 0.03), + 0px 16px 6px hsla(0, 0%, 0%, 0.1), 0px 9px 5px hsla(223, 13%, 10%, 0.33), + 0px 4px 4px hsla(0, 0%, 0%, 0.75), 0px 4px 2px hsla(0, 0%, 0%, 0.25); + + /* Gradients (unchanged across dark & light modes) */ + --sl-gradient-blue-purple: linear-gradient( + to bottom, + hsl(234, 100%, 59.8%) 0%, + hsl(281, 82.1%, 62.7%) 100% + ); + --sl-gradient-red-pink: linear-gradient( + to bottom, + hsl(0, 67.9%, 52.4%) 0%, + hsl(295, 100%, 62.7%) 100% + ); + --sl-gradient-orange-yellow: linear-gradient( + to bottom, + hsl(54, 93.5%, 57.6%) 0%, + hsl(14, 100%, 66.5%) 100% + ); + --sl-gradient-blue-green: linear-gradient( + to bottom, + hsl(165, 86.6%, 62%) 0%, + hsl(227, 58.4%, 44.3%) 100% + ); + + /* Text size and line height */ + --sl-text-xs: 0.8125rem; /* 13px */ + --sl-text-sm: 0.875rem; /* 14px */ + --sl-text-base: 1rem; /* 16px */ + --sl-text-lg: 1.125rem; /* 18px */ + --sl-text-xl: 1.25rem; /* 20px */ + --sl-text-2xl: 1.5rem; /* 24px */ + --sl-text-3xl: 1.8125rem; /* 29px */ + --sl-text-4xl: 2.1875rem; /* 35px */ + --sl-text-5xl: 2.625rem; /* 42px */ + + --sl-text-body: var(--sl-text-base); + --sl-text-body-sm: var(--sl-text-xs); + --sl-text-code: var(--sl-text-base); + --sl-text-code-sm: var(--sl-text-xs); + --sl-text-h1: var(--sl-text-4xl); + --sl-text-h2: var(--sl-text-3xl); + --sl-text-h3: var(--sl-text-2xl); + --sl-text-h4: var(--sl-text-xl); + --sl-text-h5: var(--sl-text-lg); + + --sl-line-height: 1.8; + --sl-line-height-headings: 1.2; + + --sl-font-system: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, + 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, + 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'; + --sl-font-system-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, + 'Liberation Mono', 'Courier New', monospace; + --__sb-font: var(--sl-font, ''), var(--sl-font-system); + --__sb-font-mono: var(--sl-font-mono, ''), var(--sl-font-system-mono); + + /** Key layout values */ + --sl-nav-height: 4rem; + --sl-nav-pad-x: 1.5rem; + --sl-nav-pad-y: 0.75rem; + --sl-sidebar-width: 18.75rem; + --sl-sidebar-pad-x: 1rem; + --sl-content-width: 45rem; + --sl-content-pad-x: 1rem; + --sl-menu-button-size: 2rem; + --sl-nav-gap: var(--sl-content-pad-x); + + /* Global z-index values */ + --sl-z-index-navbar: 10; + --sl-z-index-skiplink: 20; +} + +:root[data-theme='light'], +[data-theme='light'] ::backdrop { + /* Colours (light mode) */ + --sl-color-white: hsl(223, 13%, 10%); + --sl-color-gray-1: hsl(222, 13%, 16%); + --sl-color-gray-2: hsl(222, 11%, 23%); + --sl-color-gray-3: hsl(225, 9%, 36%); + --sl-color-gray-4: hsl(221, 8%, 56%); + --sl-color-gray-5: hsl(228, 8%, 77%); + --sl-color-gray-6: hsl(231, 23%, 94%); + --sl-color-gray-7: hsl(240, 20%, 97%); + --sl-color-black: hsl(0, 0%, 100%); + + --sl-color-orange-high: hsl(var(--sl-hue-orange), 80%, 25%); + --sl-color-orange: hsl(var(--sl-hue-orange), 90%, 60%); + --sl-color-orange-low: hsl(var(--sl-hue-orange), 90%, 88%); + --sl-color-green-high: hsl(var(--sl-hue-green), 80%, 22%); + --sl-color-green: hsl(var(--sl-hue-green), 90%, 60%); + --sl-color-green-low: hsl(var(--sl-hue-green), 85%, 90%); + --sl-color-blue-high: hsl(var(--sl-hue-blue), 80%, 30%); + --sl-color-blue: hsl(var(--sl-hue-blue), 90%, 60%); + --sl-color-blue-low: hsl(var(--sl-hue-blue), 88%, 90%); + --sl-color-purple-high: hsl(var(--sl-hue-purple), 39%, 30%); + --sl-color-purple: hsl(var(--sl-hue-purple), 90%, 60%); + --sl-color-purple-low: hsl(var(--sl-hue-purple), 80%, 90%); + --sl-color-red-high: hsl(var(--sl-hue-red), 80%, 30%); + --sl-color-red: hsl(var(--sl-hue-red), 90%, 60%); + --sl-color-red-low: hsl(var(--sl-hue-red), 80%, 90%); + + --sl-color-accent-high: hsl(var(--sl-hue-accent), 80%, 30%); + --sl-color-accent: hsl(var(--sl-hue-accent), 90%, 60%); + --sl-color-accent-low: hsl(var(--sl-hue-accent), 88%, 90%); + + --sl-color-text-accent: var(--sl-color-accent); + --sl-color-text-invert: var(--sl-color-black); + --sl-color-bg-nav: var(--sl-color-gray-7); + --sl-color-bg-sidebar: var(--sl-color-bg); + --sl-color-bg-inline-code: var(--sl-color-gray-6); + --sl-color-hairline-shade: var(--sl-color-gray-6); + + --sl-color-backdrop-overlay: hsla(225, 9%, 36%, 0.66); + + /* Shadows (light mode) */ + --sl-shadow-sm: 0px 1px 1px hsla(0, 0%, 0%, 0.06), + 0px 2px 1px hsla(0, 0%, 0%, 0.06); + --sl-shadow-md: 0px 8px 4px hsla(0, 0%, 0%, 0.03), + 0px 5px 2px hsla(0, 0%, 0%, 0.03), 0px 3px 2px hsla(0, 0%, 0%, 0.06), + 0px 1px 1px hsla(0, 0%, 0%, 0.06); + --sl-shadow-lg: 0px 25px 7px rgba(0, 0, 0, 0.01), + 0px 16px 6px hsla(0, 0%, 0%, 0.03), 0px 9px 5px hsla(223, 13%, 10%, 0.08), + 0px 4px 4px hsla(0, 0%, 0%, 0.16), 0px 4px 2px hsla(0, 0%, 0%, 0.04); +} + +@media (min-width: 50em) { + :root { + --sl-text-h1: var(--sl-text-5xl); + --sl-text-h2: var(--sl-text-4xl); + --sl-text-h3: var(--sl-text-3xl); + --sl-text-h4: var(--sl-text-2xl); + } +} + +@media (min-width: 72rem) { + :root { + --sl-content-pad-x: 1.5rem; + } +} diff --git a/packages/starbook/style/reset.css b/packages/starlight/style/reset.css index 4806e1f2..5ccb4d2e 100644 --- a/packages/starbook/style/reset.css +++ b/packages/starlight/style/reset.css @@ -10,7 +10,7 @@ html { color-scheme: dark; - accent-color: var(--sb-color-accent); + accent-color: var(--sl-color-accent); } html[data-theme='light'] { @@ -19,10 +19,10 @@ html[data-theme='light'] { body { font-family: var(--__sb-font); - line-height: var(--sb-line-height); + line-height: var(--sl-line-height); -webkit-font-smoothing: antialiased; - color: var(--sb-color-text); - background-color: var(--sb-color-bg); + color: var(--sl-color-text); + background-color: var(--sl-color-bg); } input, diff --git a/packages/starlight/style/shiki.css b/packages/starlight/style/shiki.css new file mode 100644 index 00000000..704eea85 --- /dev/null +++ b/packages/starlight/style/shiki.css @@ -0,0 +1,13 @@ +:root { + --astro-code-color-text: var(--sl-color-white); + --astro-code-color-background: var(--sl-color-gray-6); + --astro-code-token-constant: var(--sl-color-blue-high); + --astro-code-token-string: var(--sl-color-green-high); + --astro-code-token-comment: var(--sl-color-gray-2); + --astro-code-token-keyword: var(--sl-color-purple-high); + --astro-code-token-parameter: var(--sl-color-red-high); + --astro-code-token-function: var(--sl-color-red-high); + --astro-code-token-string-expression: var(--sl-color-green-high); + --astro-code-token-punctuation: var(--sl-color-gray-2); + --astro-code-token-link: var(--sl-color-blue-high); +} diff --git a/packages/starbook/style/util.css b/packages/starlight/style/util.css index e9354174..e9354174 100644 --- a/packages/starbook/style/util.css +++ b/packages/starlight/style/util.css diff --git a/packages/starlight/types.ts b/packages/starlight/types.ts new file mode 100644 index 00000000..70513dc2 --- /dev/null +++ b/packages/starlight/types.ts @@ -0,0 +1 @@ +export { StarlightConfig } from './utils/user-config'; diff --git a/packages/starbook/utils/git.ts b/packages/starlight/utils/git.ts index 0a15c694..0a15c694 100644 --- a/packages/starbook/utils/git.ts +++ b/packages/starlight/utils/git.ts diff --git a/packages/starbook/utils/localizedUrl.ts b/packages/starlight/utils/localizedUrl.ts index 4eec0a49..19f15704 100644 --- a/packages/starbook/utils/localizedUrl.ts +++ b/packages/starlight/utils/localizedUrl.ts @@ -1,4 +1,4 @@ -import config from 'virtual:starbook/user-config'; +import config from 'virtual:starlight/user-config'; /** * Get the equivalent of the passed URL for the passed locale. diff --git a/packages/starbook/utils/navigation.ts b/packages/starlight/utils/navigation.ts index 5c45bde6..1fa19cf9 100644 --- a/packages/starbook/utils/navigation.ts +++ b/packages/starlight/utils/navigation.ts @@ -1,6 +1,6 @@ import { basename, dirname } from 'node:path'; -import config from 'virtual:starbook/user-config'; -import { slugToPathname } from '../utils/slugs'; +import config from 'virtual:starlight/user-config'; +import { slugToPathname } from './slugs'; import { Route, getLocaleRoutes, routes } from './routing'; import type { AutoSidebarGroup, diff --git a/packages/starbook/utils/routing.ts b/packages/starlight/utils/routing.ts index 38154e66..138e7f68 100644 --- a/packages/starbook/utils/routing.ts +++ b/packages/starlight/utils/routing.ts @@ -1,6 +1,6 @@ import type { GetStaticPathsItem } from 'astro'; import { CollectionEntry, getCollection } from 'astro:content'; -import config from 'virtual:starbook/user-config'; +import config from 'virtual:starlight/user-config'; import { LocaleData, localizedSlug, diff --git a/packages/starbook/utils/slugs.ts b/packages/starlight/utils/slugs.ts index 34eef630..7ce5d506 100644 --- a/packages/starbook/utils/slugs.ts +++ b/packages/starlight/utils/slugs.ts @@ -1,5 +1,5 @@ import type { CollectionEntry } from 'astro:content'; -import config from 'virtual:starbook/user-config'; +import config from 'virtual:starlight/user-config'; export interface LocaleData { /** Writing direction. */ diff --git a/packages/starbook/utils/user-config.ts b/packages/starlight/utils/user-config.ts index 6b6064ec..444a3baa 100644 --- a/packages/starbook/utils/user-config.ts +++ b/packages/starlight/utils/user-config.ts @@ -84,7 +84,7 @@ const SidebarGroupSchema: z.ZodType< ManualSidebarGroup | z.infer<typeof AutoSidebarGroupSchema> > = z.union([ManualSidebarGroupSchema, AutoSidebarGroupSchema]); -const StarbookUserConfigSchema = z.object({ +const StarlightUserConfigSchema = z.object({ /** Title for your website. Will be used in metadata and as browser tab title. */ title: z .string() @@ -188,21 +188,21 @@ const StarbookUserConfigSchema = z.object({ sidebar: SidebarGroupSchema.array().optional(), /** - * Provide CSS files to customize the look and feel of StarBook. + * Provide CSS files to customize the look and feel of your Starlight site. * * Supports local CSS files relative to the root of your project, * e.g. `'/src/custom.css'`, and CSS you installed as an npm * module, e.g. `'@fontsource/roboto'`. * * @example - * starbook({ + * starlight({ * customCss: ['/src/custom-styles.css', '@fontsource/roboto'], * }) */ customCss: z.string().array().optional().default([]), }); -export const StarbookConfigSchema = StarbookUserConfigSchema.strict().transform( +export const StarlightConfigSchema = StarlightUserConfigSchema.strict().transform( ({ locales, defaultLocale, ...config }, ctx) => { if (locales !== undefined && Object.keys(locales).length > 1) { // This is a multilingual site (more than one locale configured). @@ -218,7 +218,7 @@ export const StarbookConfigSchema = StarbookUserConfigSchema.strict().transform( code: 'custom', message: 'Could not determine the default locale. ' + - 'Please make sure `defaultLocale` in your StarBook config is one of ' + + 'Please make sure `defaultLocale` in your Starlight config is one of ' + availableLocales, }); return z.NEVER; @@ -246,5 +246,5 @@ export const StarbookConfigSchema = StarbookUserConfigSchema.strict().transform( } ); -export type StarbookConfig = z.infer<typeof StarbookConfigSchema>; -export type StarBookUserConfig = z.input<typeof StarbookConfigSchema>; +export type StarlightConfig = z.infer<typeof StarlightConfigSchema>; +export type StarlightUserConfig = z.input<typeof StarlightConfigSchema>; diff --git a/packages/starlight/virtual.d.ts b/packages/starlight/virtual.d.ts new file mode 100644 index 00000000..bcf8563f --- /dev/null +++ b/packages/starlight/virtual.d.ts @@ -0,0 +1,9 @@ +declare module 'virtual:starlight/user-config' { + const Config: import('./types').StarlightConfig; + export default Config; +} +declare module 'virtual:starlight/project-context' { + export default { root: string }; +} + +declare module 'virtual:starlight/user-css' {} diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 78f5b546..8ee2a83b 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -13,11 +13,11 @@ importers: astro: specifier: ^2.1.7 version: 2.1.7(@types/node@18.15.11) - starbook: + starlight: specifier: workspace:* - version: link:../packages/starbook + version: link:../packages/starlight - packages/starbook: + packages/starlight: dependencies: '@astrojs/mdx': specifier: ^0.19.0 @@ -92,28 +92,6 @@ packages: vscode-languageserver-types: 3.17.3 vscode-uri: 3.0.7 - /@astrojs/markdown-remark@2.1.2(astro@2.1.7): - resolution: {integrity: sha512-rYkmFEv2w7oEk6ZPgxHkhWzwcxSUGc1vJU0cbCu5sHF8iFNnc1cmMsjXWa5DrU5sCEf8VVYE1iFlbbnFzvHQJw==} - peerDependencies: - astro: ^2.1.5 - dependencies: - '@astrojs/prism': 2.1.1 - astro: 2.1.7(@types/node@18.15.11) - github-slugger: 1.5.0 - import-meta-resolve: 2.2.2 - rehype-raw: 6.1.1 - rehype-stringify: 9.0.3 - remark-gfm: 3.0.1 - remark-parse: 10.0.1 - remark-rehype: 10.1.0 - remark-smartypants: 2.0.0 - shiki: 0.11.1 - unified: 10.1.2 - unist-util-visit: 4.1.2 - vfile: 5.3.7 - transitivePeerDependencies: - - supports-color - /@astrojs/markdown-remark@2.1.4(astro@2.1.7): resolution: {integrity: sha512-z5diCcFo2xkBAJ11KySAIKpZZkULZmzUvWsZ2VWIOrR6QrEgEfVl5jTpgPSedx4m+xUPuemlUviOotGB7ItNsQ==} peerDependencies: @@ -135,7 +113,6 @@ packages: vfile: 5.3.7 transitivePeerDependencies: - supports-color - dev: false /@astrojs/mdx@0.19.0(astro@2.1.7)(rollup@3.19.1): resolution: {integrity: sha512-McFpMV+npinIEKnY5t9hsdzLd76g78GgIRUPxem2OeXPNB8xr2pNS28GeU0+6Pn5STnB+sgcyyeqXLgzauOlMQ==} @@ -887,7 +864,7 @@ packages: dependencies: '@astrojs/compiler': 1.3.0 '@astrojs/language-server': 0.28.3 - '@astrojs/markdown-remark': 2.1.2(astro@2.1.7) + '@astrojs/markdown-remark': 2.1.4(astro@2.1.7) '@astrojs/telemetry': 2.1.0 '@astrojs/webapi': 2.1.0 '@babel/core': 7.21.3 |