summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorChris Swithinbank2023-05-08 20:55:19 +0200
committerGitHub2023-05-08 20:55:19 +0200
commit707fca678f9324ffbbd8ce30d9a9552cfc6c81c9 (patch)
treed78325b01e3b7aa2ccbba456a49dc434451d8ff0
parent1016dc94ca463a55240bc41eeff9e3053712af45 (diff)
downloadIT.starlight-707fca678f9324ffbbd8ce30d9a9552cfc6c81c9.tar.gz
IT.starlight-707fca678f9324ffbbd8ce30d9a9552cfc6c81c9.tar.bz2
IT.starlight-707fca678f9324ffbbd8ce30d9a9552cfc6c81c9.zip
Rename to “Starlight” (#29)
-rw-r--r--LICENSE2
-rw-r--r--docs/README.md8
-rw-r--r--docs/astro.config.mjs8
-rw-r--r--docs/package.json4
-rw-r--r--docs/src/content/config.ts2
-rw-r--r--docs/src/content/docs/getting-started.md22
-rw-r--r--docs/src/content/docs/guides/i18n.md8
-rw-r--r--docs/src/content/docs/index.mdx2
-rw-r--r--docs/src/content/docs/reference/configuration.md26
-rw-r--r--docs/src/content/docs/reference/markdown-syntax.md20
-rw-r--r--package.json2
-rw-r--r--packages/starbook/README.md24
-rw-r--r--packages/starbook/components/SkipLink.astro18
-rw-r--r--packages/starbook/style/asides.css49
-rw-r--r--packages/starbook/style/props.css197
-rw-r--r--packages/starbook/style/shiki.css13
-rw-r--r--packages/starbook/types.ts1
-rw-r--r--packages/starbook/virtual.d.ts9
-rw-r--r--packages/starlight/404.astro (renamed from packages/starbook/404.astro)8
-rw-r--r--packages/starlight/README.md24
-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.astro18
-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.css49
-rw-r--r--packages/starlight/style/props.css197
-rw-r--r--packages/starlight/style/reset.css (renamed from packages/starbook/style/reset.css)8
-rw-r--r--packages/starlight/style/shiki.css13
-rw-r--r--packages/starlight/style/util.css (renamed from packages/starbook/style/util.css)0
-rw-r--r--packages/starlight/types.ts1
-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.ts9
-rw-r--r--pnpm-lock.yaml31
64 files changed, 620 insertions, 643 deletions
diff --git a/LICENSE b/LICENSE
index 5e3df793..385b09db 100644
--- a/LICENSE
+++ b/LICENSE
@@ -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!)
-[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/withastro/starbook/tree/main/docs)
-[![Open with CodeSandbox](https://assets.codesandbox.io/github/button-edit-lime.svg)](https://codesandbox.io/p/sandbox/github/withastro/starbook/tree/main/docs)
+[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/withastro/starlight/tree/main/docs)
+[![Open with CodeSandbox](https://assets.codesandbox.io/github/button-edit-lime.svg)](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