🌟 Build beautiful, accessible, high-performance documentation websites with Astro
Home Page: https://starlight.astro.build
License: MIT License
Starlight is a documentation website framework for Astro.
Read the Starlight docs (they’re built with Starlight!)
Get help in the Astro Discord. Post questions in our #support forum with the “starlight” tag, or visit our dedicated #starlight channel to discuss current development and more!
You can also submit bug reports and feature requests as GitHub issues.
Join us as a Starlight contributor! These links will help you get started:
MIT
Copyright (c) 2023–present Starlight contributors
starlight are you using?0.1.2
astro are you using?2.6.1
npm
Mac
Chrome
Expected: sidebar links should not have a trailing slash when setting Astro's build.format config to file
Actual: they have a trailing slash, which causes the links to 404 in production builds
How to reproduce:
build-format-file branch of this repo/docs (sorry, it's a temporary workaround for GitHub pages)npm run dev to see the trailing / OR npm run build && npm run preview to get the 404s
https://github.com/mergentlabs/docs/tree/build-format-file
starlight are you using?0.0.7
astro are you using?2.4.3
pnpm
Mac
Chrome
Titles on the sidebar are not being updated properly when you switch between locales.
No response
starlight are you using?0.4.0
astro are you using?2.7.2
pnpm
Mac
Chrome
As discussed on Discord, PR #177 closing #176 did change display:table to display:block on the table generated in content.
This change has side effects, as without display:table, the table descendants don't behave as expected following the table layout algorithm.
In particular, even with a full witdh table, descendants keep a max-content width and don't use full width. See the stackblitz example with the same Starlight Comparisons table with display:block and display:table.
There may also be accessibility issues with older browsers as well as Safari, but I think @delucis did investigate about this already.
I suggest we explore solutions to solve overflows while keeping the original display:table on table elements.
https://stackblitz.com/edit/github-tshqvq?file=src%2Fcontent%2Fdocs%2Findex.mdx
It would be good to offer some basic tooling to ensure the integrity of internal links within sites built with Starlight. Many broken links can make a site frustrating to use.
Some prior art:
Astro’s Docs has a complex [link checking script(https://github.com/withastro/docs/blob/main/scripts/lint-linkcheck.ts), which runs against build output and makes sure links are not only not broken, but are in the right language (e.g. no /en/ links on a /fr/ page), ensures links end in a trailing slash (the canonical for that site), don’t use an inaccessible label like “read more”, use a relative path (for links within the site — guarantees functionality in staging contexts), etc.
@HiDeoo just published a dedicated Starlight integration for this: starlight-links-validator and left some comments: #246 (comment) (thanks @HiDeoo!)
VitePress has an ignoreDeadLinks config option, so presumably checks for them although there’s no documentation.
Docusaurus has onBrokenLinks and onBrokenMarkdownLinks config options to control what level of error/warning to show on bubild.
There’s some questions about what built-in tooling for Starlight could look like, what config would be needed etc., but would definitely be cool to explore!
starlight are you using?0.5.1
Since the built-in icons in Starlight are too limited, it would be great if the Card component could work with a different icon set like Font Awesome, Heroicons or Bootstrap.
Starlight's built in icon set is extremely limited (~38). The option to integrate with a different icon set would expand the available number of glyphs considerably.
No response
starlight are you using?0.1.1
astro are you using?2.5.0
npm
Mac
Chrome
The favicon markup includes a trailing slash:
<link rel="shortcut icon" href="/favicon.svg/" type="image/svg+xml">This works ok in my local environment, but in production (GitHub pages for me) it 404s.
Expected markup is:
<link rel="shortcut icon" href="/favicon.svg" type="image/svg+xml">No response
starlight are you using?0.0.7
astro are you using?2.4.3
pnpm
Windows 10
Chrome 113.0.5672.93
The click event of markdown's TOC is incorrect.
When I click on an item, the item above it is selected.
And some items are not clickable.
https://starlight.astro.build/de/reference/markdown-syntax/
starlight are you using?0.5.0
astro are you using?2.8.0
npm
Linux
Firefox
I'm using Starlight (wonderful framework, by the way!) to create a simple page to host various snippets and it's clear from both that site and the official Starlight documentation that the table of contents on the right-hand side leaves far too much negative space on the right (see images below). I'm not sure why the width of the content is sacrificed for this.
The removal of this somewhat alleviates the issue, but only marginally as then the main content area widens, but not the containing text etc.
starlight are you using?0.1.2
astro are you using?2.6.2
pnpm
Linux
Chrome
When whe try to compile an image in a .md file, the WEBP animation image does not work propely and crash the dev server with this error:
[UnhandledPromiseRejection: This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). The promise rejected with the reason "Cannot read properties of null (reading 'data')".] {
code: 'ERR_UNHANDLED_REJECTION'
}
https://codesandbox.io/p/sandbox/github/PabloBagliere/example-error-astro/tree/main
starlight are you using?0.4.1
astro are you using?2.7.4
npm
Linux (WSL)
Chrome/Edge/Firefox
If you have a very long set of navigation links, the scroll position resets on page transitions. The same is true for toggle state, which makes the page look jumpy on transitions even without a lot of pages. It's not the end of the world but it is annoying. It would be preferable to maintain these across page changes.
This can be done using some script and it's not too heavy weight. It would be nice if this were included. Alternatively if there was a way to add custom scripts to the default layout -- something like customCss that would let me insert an Astro component or even just some TS -- I could do it myself without forking starlight.
No response
starlight are you using?0.4.1
astro are you using?2.7.0
npm
Mac
Chrome
I cant get the production build to work correctly with search anymore.
Run on a clean build.
npm create astro@latest -- --template starlight
npm run build
npm run preview
No response
starlight are you using?0.2.0
astro are you using?2.6.5
pnpm
Mac
Chrome
One of our keyboard-only users reported a behavior he was not expecting with the tabs component. As expected, when focus moves into the tab list and the active tab element is focused, the left and right arrow can be used to move focus to the previous and next tab elements. However, when the tabbed content is fairly large, he expected to use the Down and Up arrow keys to use the normal scrolling behavior to read the entire content of the tab panel while keeping focus on the tab element so that he could easily move to the next tab element when he is done reading. At the moment, this is not possible as the down key automatically moves the focus to the tabpanel.
Looking at the ARIA Authoring Practices Guide for the Tabs pattern, a note mentions the following:
If the tab list is horizontal, it does not listen for
Down ArroworUp Arrowso those keys can provide their normal browser scrolling functions even when focus is inside the tab list.
Following this guidance would allow such behavior.
In the same guide, in the keyboard interaction section, 2 optional keyboard shortcuts are also mentioned:
Home(Optional): Moves focus to the first tab. Optionally, activates the newly focused tab (See note below).
End(Optional): Moves focus to the last tab. Optionally, activates the newly focused tab (See note below).
I think these 2 shortcuts could be a nice addition to the tabs component.
With these changes in mind, I propose the following changes to the tabs component keydown event handler:
// Work out which key the user is pressing and
// Calculate the new tab's index where appropriate
const dir =
e.key === 'ArrowLeft'
? index - 1
: e.key === 'ArrowRight'
? index + 1
- : e.key === 'ArrowDown'
- ? 'down'
+ : e.key === 'Home'
+ ? 0
+ : e.key === 'End'
+ ? this.tabs.length - 1
: null;
if (dir === null) return;
- // If the down key is pressed, move focus to the open panel,
- // otherwise switch to the adjacent tab
- if (dir === 'down') {
- e.preventDefault();
- this.panels[i]?.focus();
- } else if (this.tabs[dir]) {
+ if (this.tabs[dir]) {
e.preventDefault();
this.switchTab(this.tabs[dir], dir);
}If this is acceptable and I am not missing something for the current implementation, I would be happy to submit a PR.
https://stackblitz.com/edit/github-ybbceq?file=src%2Fcontent%2Fdocs%2Findex.mdx
starlight are you using?0.1.2
astro are you using?2.6.1
yarn
Mac
Chrome
yarn astro add deno && yarn build
04:15:59 PM [build] Building server entrypoints...
[commonjs--resolver] Cannot bundle Node.js built-in "node:path" imported from "node_modules/@astrojs/starlight/utils/navigation.ts". Consider disabling ssr.noExternal or remove the built-in dependency.
error Cannot bundle Node.js built-in "node:path" imported from "node_modules/@astrojs/starlight/utils/navigation.ts". Consider disabling ssr.noExternal or remove the built-in dependency.
RollupError: Cannot bundle Node.js built-in "node:path" imported from "node_modules/@astrojs/starlight/utils/navigation.ts". Consider disabling ssr.noExternal or remove the built-in dependency.
at error (file:///Users/jlarky/Public/github/JLarky/astro-starlight-tailwind-template/node_modules/rollup/dist/es/shared/node-entry.js:2130:30)
at Object.error (file:///Users/jlarky/Public/github/JLarky/astro-starlight-tailwind-template/node_modules/rollup/dist/es/shared/node-entry.js:24508:20)
at Object.resolveId (file:///Users/jlarky/Public/github/JLarky/astro-starlight-tailwind-template/node_modules/vite/dist/node/chunks/dep-e8f070e8.js:22887:34)
at Object.handler (file:///Users/jlarky/Public/github/JLarky/astro-starlight-tailwind-template/node_modules/vite/dist/node/chunks/dep-e8f070e8.js:46681:19)
at file:///Users/jlarky/Public/github/JLarky/astro-starlight-tailwind-template/node_modules/rollup/dist/es/shared/node-entry.js:24707:40
at async PluginDriver.hookFirstAndGetPlugin (file:///Users/jlarky/Public/github/JLarky/astro-starlight-tailwind-template/node_modules/rollup/dist/es/shared/node-entry.js:24607:28)
at async resolveId (file:///Users/jlarky/Public/github/JLarky/astro-starlight-tailwind-template/node_modules/rollup/dist/es/shared/node-entry.js:23451:26)
at async ModuleLoader.resolveId (file:///Users/jlarky/Public/github/JLarky/astro-starlight-tailwind-template/node_modules/rollup/dist/es/shared/node-entry.js:23715:15)
at async Object.resolveId (file:///Users/jlarky/Public/github/JLarky/astro-starlight-tailwind-template/node_modules/vite/dist/node/chunks/dep-e8f070e8.js:7990:10)
at async PluginDriver.hookFirstAndGetPlugin (file:///Users/jlarky/Public/github/JLarky/astro-starlight-tailwind-template/node_modules/rollup/dist/es/shared/node-entry.js:24607:28)
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
No response
starlight are you using?0.5.5
Built-in support for versioned docs
As projects mature they will usually need to support multiple versions of their docs at once. There are ways to do this using the options already available in Starlight (such as routing) but I think adding this as a fully supported use case would be amazing.
This can be tricky when building on top of i18n, but I'd recommend constructing a path similar to this https://starlight.astro.build/es/1/getting-started/ where the version comes after the locale in the slug.
This could also let Starlight build in first-party solutions such as a version dropdown similar to what is already done for locales.
This might be something that's outside of my depth to code, but I'd be more than happy to help figure out a system that works based on what I've worked with before.
Oh, and you all are awesome! <3
starlight are you using?0.5.3
It would be convenient if the current anchor point automatically scrolled to the center of the screen.
Thanks for reading!
In some lengthy page, it can be challenging when the current anchor point moves outside the visible area of the screen.
Example: the "Anchor following" feature offered by Materials for MkDocs.
https://squidfunk.github.io/mkdocs-material/setup/setting-up-navigation/#anchor-following
starlight are you using?0.5.1
astro are you using?2.8.3
npm
Mac
Brave, Safari
My site works fine on v0.4.2. When I update to 0.5.1, astro dev runs without errors, but when I load a page on my site, I receive the following error page:
Failed to parse source for import analysis because the content contains invalid JS syntax. If you are using JSX, make sure to name the file with the .jsx or .tsx extension.
virtual:starlight/user-images:1:188
Error: Failed to parse source for import analysis because the content contains invalid JS syntax. If you are using JSX, make sure to name the file with the .jsx or .tsx extension.
at formatError (file:///Users/seanwright/dev/myproject/node_modules/vite/dist/node/chunks/dep-8609dc5d.js:43902:46)
at TransformContext.error (file:///Users/seanwright/dev/myproject/node_modules/vite/dist/node/chunks/dep-8609dc5d.js:43898:19)
at TransformContext.transform (file:///Users/seanwright/dev/myproject/node_modules/vite/dist/node/chunks/dep-8609dc5d.js:41655:22)
at async Object.transform (file:///Users/seanwright/dev/myproject/node_modules/vite/dist/node/chunks/dep-8609dc5d.js:44192:30)
at async loadAndTransform (file:///Users/seanwright/dev/myproject/node_modules/vite/dist/node/chunks/dep-8609dc5d.js:54827:29)
at async instantiateModule (file:///Users/seanwright/dev/myproject/node_modules/vite/dist/node/chunks/dep-8609dc5d.js:55752:10)
In the terminal I see the following:
error Failed to parse source for import analysis because the content contains invalid JS syntax. If you are using JSX, make sure to name the file with the .jsx or .tsx extension.
File:
virtual:starlight/user-images:1:188
Code:
1 | import dark from /src/assets/logo/dark-logo.svg; import light from /src/assets/logo/light-logo.svg; export const logos = { dark, light };
|
My logo svg files work just fine for light/dark mode in v0.4.2.
No response
starlight are you using?^0.3.0
astro are you using?^2.5.0
npm
Mac
Chrome
I run npm install followed by npm run build
I get a prompt to upgrade to pro? Not sure if it’s sharp or pagefind or the fact that I’m not logged in that causes the issue
On the other hand, https://astro.new/basics?on=stackblitz builds just fine
https://astro.new/starlight-basics?on=stackblitz
starlight are you using?0.1.2
astro are you using?2.5.0
pnpm
Mac
Chrome
When searching for file names or codeblocks the text show in the excerpt is not very clear.
| File Tree | Codeblocks |
|---|---|
 |
 |
Maybe it would be a good idea to ignore it?
Side note: Inline code works perfectly 💜
No response
starlight are you using?0.5.5
astro are you using?2.8.5
pnpm
Mac
Safari
When setting the social object in the Starlight config I'd expect it to respect the order of key/values set. Instead it renders them in its own order.
For example I have this object in the Starlight config:
social: {
github: "https://github.com/tauri-apps/tauri",
discord: "https://github.com/tauri-apps/tauri",
mastodon: "https://github.com/tauri-apps/tauri",
twitter: "https://github.com/tauri-apps/tauri",
},
It orders like this in the UI:
Instead I'd expect it to be in the order of GitHub, Discord, Mastodon, then Twitter
https://stackblitz.com/edit/github-vwubka?file=astro.config.mjs
starlight are you using?1.0.0
astro are you using?2.7.0
npm
Mac
Chrome
Happy to write a PR for this but it looks like you guys only have support for places that Astro has profiles.
No response
starlight are you using?0.5.2
Starlight integration helps to easily build documentation with Astro. However, by default, it converts the entire Astro site into a documentation site. It will be a useful feature if Starlight docs can be served from a custom path.
Astro has a unique feature that allows for multiple integrations including UI frameworks and other functionality. Starlight is one of those exciting integrations.
Allowing Starlight docs to be served from a sub/custom path, will have the following benefits:
Example -
Route(s) for Astro site content:
Route(s) For Starlight docs within Astro site:
Interested in helping translate the Starlight docs?
You can see an overview of translation progress at https://i18n.starlight.astro.build/
starlight are you using?0.4.2
astro are you using?2.8.0
npm
Windows
Chrome
I get 500: INTERNAL_SERVER_ERROR when I deploy a startlight project to vercel and visit the website.
I'd like to know why this happens.
This is what happens when I try to deploy astro starlight project to Vercel.
The below is what I did.
I created my project along with Getting Started of Starlight documentation. It's named "test-stardoc".
Then I ran npx astro add vercel
Also, I created a remote private repository named "test-stardoc" on my Github.
I ran these commands as follows after git add and git commit.
git remote add origin <RemoteRepositoryURL>
git branch -M main
git push -u origin main
I proceeded from 1 to 4 as written here at Website UI Deployment on astro DOCS.
I imported my project "above privare repo" into Vercel and pressed "Deploy".
Deploy has been completed however I get 500 error as above when I visit the deployed web site.
Why does this happen? I checked build logs but I couldn't figure out.
If this rings a bell, it'd be nice if you could give me the solution and some advice.
I wonder if I am the only one to face this error..
No response
starlight are you using?2.8.5
At times it is useful to have an index page for directories other than the site root.
currently you end up with 2 entries in the menu with the same name, one that acts as a directory, one that acts as a file.
trying to create a
guides.mdx and a guides/ (the latter a directory) does the same thing, but occasionally results in odd link generation issues that I am having trouble creating a minimal reproducible repository for.
This might be to allow for the case where a user hand munges a url and you don't want to display a 404, or where you want to write about a category of things and then have specific instances of that category organized as leaf nodes under that root entry.
astro supports this without starlight by allowing the creation of index pages outside the content collection.
Hugo supports this by allowing users to create index and _index pages (the former is a traditional index page, the latter is a special category list page) at arbitrary levels of the site structure. see https://gohugo.io/content-management/organization/
starlight are you using? 0.3.0astro are you using? 2.6.4pnpm 8.6.3Maybe this is not a bug per se, however I do feel like it is a design flaw as it is.
Links provided within MDX generated pages do not take into account the selected locale, and I feel like this would be logical.
Another bug that is somewhat related is the fact that going to the / goes to a 404, instead of going to the default locale.
This one has now been fixed.
starlight are you using?0.1.2
astro are you using?2.5.0
pnpm
Windows
Chrome, Firefox
When you add a subgroup to the sidebar the arrow will not turn when clicked like the normal groups:
astro.config.js example:
// https://astro.build/config
export default defineConfig({
integrations: [
starlight({
title: 'My title',
sidebar: [
{
label: 'Fundamentals',
items: [
{ label: 'Getting started', link: 'v4/fundamentals/getting-started/' },
{
label: 'Querying',
items: [
{ label: 'Content', link: 'v4/fundamentals/querying/content/' },
]
},
]
},
],
}),
],
});Open "Fundamentals":
Closed "Fundamentals":
☝️ This is expected.
Closed "Querying"
☝️ This is not expected. (The arrow is still pointing down.)
Also, I'm not sure this is considered a bug but to me, it's quite difficult to differentiate when a group is a sub-group or its own group. See this example:
The red is its own group and the blue is a sub-group. There's no difference in the boldness of the title and the empty space for the next group. (Or at least so little that it's hard to notice.)
For reference here's a site using GitBook where I've done the same exercise (Source):
Let me know if that makes sense and if I should move this to its separate issue 😄
No response
starlight are you using?0.1.2
astro are you using?2.5.0
npm
Mac
Chrome
Wide tables create horizontal overflow where the entire body is widened, causing content like the search/nav buttons to be rendered out of the viewport.
For example, https://har.fyi/reference/tables/pages/ with mobile emulation:
The offending table is under the Schema heading.
FWIW I've also seen this affect the desktop layout for a really wide table (not used in prod anymore)
No response
starlight are you using?2.5.0
astro are you using?2.5.0
npm
Windows
Chrome
ript, failed in 9m 31.2s
.../node_modules/puppeteer install$ node install.js
└─ Failed in 9m 31.2s at C:\Users\USER\Desktop\personal project\starlight\node_modules.pnpm\[email protected]\node_modules\puppeteer
i was trying to run pnpm i
No response
starlight are you using?0.5.2
astro are you using?2.7.3
npm
win11
chrome edge
On the starlight document site, if the user chages to another theme in the mobilemenu and immediatly adjusts the window width to more than 50rem, the page will become unscrollable.
No response
starlight are you using?0.0.12
astro are you using?2.5.0
pnpm
macOS / Stackblitz
Firefox
When a user provides invalid configuration options to the Starlight integration these are caught by the Zod schema and an error is displayed.
For example the title option is required. If omitted, the following is logged:
[vite] Error when evaluating SSR module /home/projects/github-qyfkex/astro.config.mjs:
|- Error
at ZodError (file:///home/projects/github-qyfkex/node_modules/zod/lib/index.mjs:283:9)
at get error (file:///home/projects/github-qyfkex/node_modules/zod/lib/index.mjs:656:31)
at parse (file:///home/projects/github-qyfkex/node_modules/zod/lib/index.mjs:755:9)
[astro] Unable to load /home/projects/github-qyfkex/astro.config.mjs
error Required
This message does not mention that the title field is what is missing/required, nor that the error is in the Starlight config. It would be good to improve this!
@bholmesdev suggested we can improve this using a Zod “error map”. Here is the content collections one for reference: https://github.com/withastro/astro/blob/main/packages/astro/src/content/error-map.ts and there’s more detail about error handling in Zod’s docs. We parse user config in the main integration entrypoint:
starlight/packages/starlight/index.ts
Line 22 in fe1c489
https://stackblitz.com/edit/github-qyfkex?file=astro.config.mjs
starlight are you using?0.2.0
astro are you using?2.6.6
npm
Mac
Safari, Chrome
Expected: When using components in MDX CSS is sandboxed to the component. Alternatively, providing an opt-out class for the .content class, for example, .not-content could allow components to be exempt from the MDX margin processing.
Actual: Components and their contents have a "margin-top: 1.5em" rule added.
How to reproduce:
Add a component of any type to an MDX file, include at least one div. Upon rendering and processing, an unexpected margin-top rule is added. This can cause components to break visual styles.
———
Issue also referenced by @marcjulian in #88 (comment)
———
Edit: Font sizes are also affected (e.x. an <h2> element). There are likely other styles impacted by the markdown processing.
starlight are you using?0.0.11
astro are you using?2.5.5
npm
Mac
Chrome, Firefox
Adding @astrojs/tailwind and using Tailwind CSS utilities in the content should apply the generated CSS.
The integration was added using npx astro add tailwind and the following tag and utility classes are added to src/content/docs/index.md.
<p class="text-red-500 font-bold">Tailwind CSS should work</p>The base.css is not loaded and thus the styles are not applied, see the Stackblitz demo.
https://stackblitz.com/edit/github-ypma4c?file=src%2Fcontent%2Fdocs%2Findex.md
starlight are you using?0.0.6
astro are you using?2.4.3
pnpm
macOS
Firefox/Chrome/Safari
When jumping to a page section by clicking an anchor link in the table of contents, we don’t currently account for the fixed position of the nav bar, so the page body scrolls up, hiding the selected heading behind the nav bar — a pretty confusing UX we should avoid.
Here’s how we do this on the Astro Docs site currently: https://github.com/withastro/docs/blob/caf86749d8555256dc9ec621ecf5a6f7ec70177f/public/index.css#L591-L608
https://stackblitz.com/edit/github-yjgake-tveoqe?file=src/content/docs/index.md
starlight are you using?0.5.5
Introduce the possibility to dynamically add a new page/route to Starlight docs, without re-building the whole site.
The way Starlight works is that your author your content in Markdown (.md or .mdx) and it transforms them into static html pages when the site is built with astro build. This means every time you author a new page, a build step is necessary to generate page's html and update navigation.
It will be quite useful, if a user could add a page dynamically to an already built site. Currently the only way I found to do this, is to manually create a new folder and add index.html file to the dist folder. For example -
Already built page:
Manually added new page:
However, this is not ideal. Firstly, we need to manually create the html page rather than just authoring content in markdown. Secondary, it won't update the site's navigation unless done manually.
This feature will be especially useful, if a user wants to connect a Backend or CMS to the docs site. Perhaps, SSR support is needed for Starlight to implement this feature. Or maybe there could be some other approach.
Docsify (documentation builder) supports this feature, however it does this by dynamically parsing the markdown content and live reloading the site on change.
starlight are you using?0.0.7
astro are you using?2.4.3
pnpm
Windows
Chrome
Description
It's hard to read the text in dropdown menus when using dark theme. Also, the style of the dropdown menus should match with the rest of the site.
This behavior is same on Microsoft Edge and Mozilla Firefox.
Screenshots
Additional context
No response
starlight are you using?0.4.0
astro are you using?2.5.0
pnpm
Mac
Arc
Relative paths in astro.config.mjs work during development, with astro dev, but astro build fails with the following error:
08:19:25 PM [content] "i18n" is not a collection. Check your content config for typos.
08:19:25 PM [content] Types generated 217ms
08:19:25 PM [build] output target: static
08:19:25 PM [build] Collecting build info...
08:19:25 PM [build] Completed in 389ms.
08:19:25 PM [build] Building static entrypoints...
Could not resolve "./src/styles/custom.css" from "virtual:starlight/user-css"
file: virtual:starlight/user-css
error Could not resolve "./src/styles/custom.css" from "virtual:starlight/user-css"
File:
virtual:starlight/user-css
Stacktrace:
RollupError: Could not resolve "./src/styles/custom.css" from "virtual:starlight/user-css"
at error (file:///Users/hasparus/workspace/sen-o-pograniczu/website/node_modules/.pnpm/[email protected]/node_modules/rollup/dist/es/shared/node-entry.js:2245:30)
at ModuleLoader.handleInvalidResolvedId (file:///Users/hasparus/workspace/sen-o-pograniczu/website/node_modules/.pnpm/[email protected]/node_modules/rollup/dist/es/shared/node-entry.js:24632:24)
at file:///Users/hasparus/workspace/sen-o-pograniczu/website/node_modules/.pnpm/[email protected]/node_modules/rollup/dist/es/shared/node-entry.js:24594:26
Changing paths to start with / fixed the problem, but it would be nice if the relative paths in Astro config were resolved consistently in both dev and build.
No response
starlight are you using?0.3.1
astro are you using?2.7.2
yarn
Mac
Chrome
I'm not sure if this is a bug, but I was finding the default code syntax highlighting colors for the light theme to be a bit difficult to read, specifically distinguishing between the purple and black text. While looking into trying to update the theme and/or purple, I noticed the saturation value for --sl-color-purple-high is significantly lower than the other high color variables under the light theme. Was this intentional? No worries if it was, since I updated the color in my project, but I wanted to bring awareness to it just in case.
The variable under the light theme:
starlight/packages/starlight/style/props.css
Line 138 in 1d3e705
It looks like that purple might be only used in two places. One is "keyword" in the shiki theme:
The Configuration Reference page of the Starlight docs is a good example of the purple and black text being a bit difficult to distinguish when using the light theme:
https://starlight.astro.build/reference/configuration/#configure-the-starlight-integration
On a side note, thank you for making Starlight and Astro! It has been a joy to use both of them.
No response
starlight are you using?latest
astro are you using?latest
pnpm
Mac
Chrome
I am not sure if this really categorizes as a bug, but considering I got a report for it, I thought I'd report it here in case this should be changed.
For a website containing generated code documentation with TypeScript types linked to their definitions, e.g. SidebarItem[], the report mentioned wrong types and even invalid TypeScript syntax.
It took me a little bit to figure out the issue, but to take an example from from the official docs, heres a potential screenshot of the issue:
The reader thought the code was SidebarItem[.]. (notice the dots in the middle and after the array brackets).
There are multiple easy solutions to fix this from a user perspective (which is what I did), e.g. changing the font for inline code, removing underline for links in inline code, adding an underline offset, etc. altho considering this is also visible in the official docs with the default theme, I thought I should still mention it here.
https://starlight.astro.build/reference/configuration/#sidebar
starlight are you using?0.1.4
astro are you using?2.5.0
npm
windows
firefox
https://github.com/wanghaisheng/paldialogue/tree/astro/src/content/docs/ch
https://github.com/wanghaisheng/paldialogue/blob/astro/astro.config.mjs
vercel build log
No response
starlight are you using?0.0.18
astro are you using?2.5.0
pnpm
Windows
Brave
Hello,
I wanted to use Starlight for a project to write text in the Farsi language (right to left). However, I have noticed that the right-to-left feature is not functioning correctly. Specifically, when I set the language to Farsi, the right-to-left style is only applied when there is another language present in the project. If Farsi is the sole language used, the right-to-left style is not applied.
Is it possible to set the default dir="rtl" in the Starlight configuration?
Thank you.
No response
starlight are you using?Not relevant
astro are you using?Not relevant
Not relevant
Not relevant
Not relevant
The link in the read should lead to astro docs
No response
starlight are you using?0.4.1
astro are you using?2.7.0
pnpm
Windows
Chrome
I'm building a project with pnpm workspaces and turbo repo.
Starlight is one of the packages of this repo.
Dev env is working seamlessly.
Build is failing tho.
I've tried the same setup in both "standalone" and "monorepo" envs, and it seems issue is related to monorepo env as "standalone" works perfectly.
Here's the error message I'm getting:
astro:build: error Cannot find module 'C:\path_to_monorepo\docs\renderers.mjs' imported from C:\path_to_monorepo\docs\astro\dist\node_modules\.pnpm\@[email protected][email protected]\node_modules\@astrojs\starlight\404.astro.mjs
Starlight root is at C:\path_to_monorepo\docs\astro so one level above as the requested file. Seem path related.
Thx for your support.
No response
starlight are you using?0.5.4
Add favicon file path as a configuration setting
svg is not supported by all browsers. Visiting a starlight docs site in Safari for example does not load any favicon.
https://caniuse.com/link-icon-svg
No response
starlight are you using?0.5.2
Add support for disabling pagefind componet globally
when using third-party search services, pagefind still generates indexes during project deployment, which can be time-consuming.
No response
We haven’t added tests to any of Starlight’s functionality just yet, but this would be extremely helpful to help us assure we don’t accidentally break features as we work.
Let’s use this issue to discuss approaches!
Some quick thoughts:
Astro components themselves are a little tricky to test. There are older tools like https://github.com/Princesseuh/astro-component-tester, but it may be better to start by building for example the examples/basics project and asserting it looks like we expect.
We also had the suggestion at one point of using snapshot testing for things like this as a quick way to track general build output stability.
A lot of Starlight’s code depends on loading virtual modules like astro:content, astro:assets, and Starlight’s own virtual:* modules for user config etc. Can we make these available in a testing environment for unit testing code? Or do we need to refactor things like the navigation/routing logic to be able to pass the data that depends on virtual modules into those functions?
Testing navigation and routing logic feels high priority to me as there are quite a few variable inputs and it can be hard in manual testing to remember to test them in all their combinations.
starlight are you using?Haven't used yet
astro are you using?Haven't used yet
npm
macOS
Chrome
Starlight, as well as the Astro docs, have a large sticky navigation header that consumes a lot of vertical space. Occasionally, I prefer to zoom in when reading any documentation, and as a consequence I have a lot less room to read than I would otherwise if the navigation header wasn't fixed.
I'm interested in Starlight, though I would like to see this navigation treatment improved; either to keep it at the top of the page, or auto-hide as I scroll down. Check out how navigation is handled on the new Svelte website on desktop and mobile: https://svelte.dev/
Here's a reference with some more considerations: https://adamsilver.io/blog/the-problem-with-sticky-menus-that-appear-on-scroll-and-what-to-do-instead/
And a screenshot of my typical reading experience:
Thanks for reading!
No response
starlight are you using?0.0.11
astro are you using?2.5.4
pnpm
Ubuntu 22.04
Chrome
I followed the instructions provided in the starlight i18n docs to add French (fr) as a new language. However after making the necessary changes, I encountered an issue where the development server fails to start.
Here's the folder structure of the project, it's just the starter example + a new folder (fr):
├── astro.config.mjs
├── package.json
├── pnpm-lock.yaml
├── public
│ └── favicon.svg
├── README.md
├── src
│ ├── assets
│ │ └── example-image.jpg
│ ├── content
│ │ ├── config.ts
│ │ └── docs
│ │ ├── en
│ │ │ ├── guides
│ │ │ │ └── example.md
│ │ │ ├── index.md
│ │ │ └── reference
│ │ │ └── example.md
│ │ └── fr
│ │ ├── guides
│ │ │ └── example.md
│ │ ├── index.md
│ │ └── reference
│ │ └── example.md
│ └── env.d.ts
I checked out the rest of the docs page, but it looks like those steps aren't really necessary because they use the wording "you can," which makes them optional I guess.
Based on the stack trace, it seems like the error originates from the starlight integration. If it turns out to be a user mistake, we could probably improve the error message to provide more helpful information.
https://stackblitz.com/edit/github-b5ued1
starlight are you using?0.5.5
Add a new content collection for blog posts with support for front matter such as published date, author(s), and an adapted layout type.
A lot of competitors in the field have built-in (or easily add-able) blog functionality. You could build on top of the existing docs content collection for a blog functionality (and I've seen a few cases on Discord for this), but a blog is a completely different use case that could benefit from it's own collection.
Things that come to mind are:
starlight are you using?0.0.7
astro are you using?2.4.3
pnpm
macOS
Firefox/Chrome/Safari
The site title/logo link (in the SiteTitle.astro component) currently always links to the website base.
This means for pages not in the root locale (like German in the current Starlight docs), clicking the title link takes you to a different language.
We should pass the current locale to the site title component and use it in the link so that users stay in their own language's part of the site when clicking it.
https://starlight.astro.build/de/getting-started/
starlight are you using?0.5.0
astro are you using?2.7.0
npm
Windows
Chrome
Some problem with path recognition. while trying to customize Starlight by adding logo.
Trying to add logo by documentation:
src/assets/ directory.astro.config.mjs.
And then error occurs, saying :
Cannot find module 'C: epCUSTOMoctopus-docssrcassetslogo.svg' imported from 'virtual:starlight/user-images'
So my guess is that compiler parses path to logo incorrectly, because it has to be C:/rep/CUSTOM/octopus-docs/src/assets/logo.svg, but not C: epCUSTOMoctopus-docssrcassetslogo.svg' imported from 'virtual:starlight/user-images
No response
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
Django
The Web framework for perfectionists with deadlines.
Laravel
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft
Open source projects and samples from Microsoft.
Google
Google ❤️ Open Source for everyone.
Alibaba
Alibaba Open Source for everyone
D3
Data-Driven Documents codes.
Tencent
China tencent open source team.