Updated component
\nUpdated component
\nUpdated component
\n+ Prop value: {Astro.props.value} +
+{slug}
+{slug}
+{value}
+three
+{other}
+three
+This is a simple page with automatically generated surrounding elements
diff --git a/packages/cache/tests/fixture/starlight/astro.config.ts b/packages/cache/tests/fixture/starlight/astro.config.ts new file mode 100644 index 0000000..0c634ca --- /dev/null +++ b/packages/cache/tests/fixture/starlight/astro.config.ts @@ -0,0 +1,12 @@ +import { defineConfig } from 'astro/config'; +import starlight from '@astrojs/starlight'; + +export default defineConfig({ + compressHTML: false, + integrations: [ + starlight({ + title: 'Example docs', + pagefind: false, + }), + ], +}); diff --git a/packages/cache/tests/fixture/starlight/package.json b/packages/cache/tests/fixture/starlight/package.json new file mode 100644 index 0000000..de07c82 --- /dev/null +++ b/packages/cache/tests/fixture/starlight/package.json @@ -0,0 +1,12 @@ +{ + "name": "@domain-expansion-test/basic", + "version": "0.0.0", + "private": true, + "type": "module", + "dependencies": { + "@astrojs/starlight": "^0.30.0", + "@domain-expansion/astro": "workspace:", + "astro": "catalog:", + "sharp": "^0.32.5" + } +} diff --git a/packages/cache/tests/fixture/starlight/src/assets/hero-star.webp b/packages/cache/tests/fixture/starlight/src/assets/hero-star.webp new file mode 100644 index 0000000..0d9ef67 Binary files /dev/null and b/packages/cache/tests/fixture/starlight/src/assets/hero-star.webp differ diff --git a/packages/cache/tests/fixture/starlight/src/content.config.ts b/packages/cache/tests/fixture/starlight/src/content.config.ts new file mode 100644 index 0000000..d9ee8c9 --- /dev/null +++ b/packages/cache/tests/fixture/starlight/src/content.config.ts @@ -0,0 +1,7 @@ +import { defineCollection } from 'astro:content'; +import { docsLoader } from '@astrojs/starlight/loaders'; +import { docsSchema } from '@astrojs/starlight/schema'; + +export const collections = { + docs: defineCollection({ loader: docsLoader(), schema: docsSchema() }), +}; diff --git a/packages/cache/tests/fixture/starlight/src/content/docs/404.md b/packages/cache/tests/fixture/starlight/src/content/docs/404.md new file mode 100644 index 0000000..d8d102b --- /dev/null +++ b/packages/cache/tests/fixture/starlight/src/content/docs/404.md @@ -0,0 +1,6 @@ +--- +title: Not found +template: splash +--- + +# Page not found diff --git a/packages/cache/tests/fixture/starlight/src/content/docs/index.md b/packages/cache/tests/fixture/starlight/src/content/docs/index.md new file mode 100644 index 0000000..1fe5580 --- /dev/null +++ b/packages/cache/tests/fixture/starlight/src/content/docs/index.md @@ -0,0 +1,29 @@ +--- +title: Sample page +head: + - tag: title + content: Starlight 🌟 Build documentation sites with Astro +description: Starlight helps you build beautiful, high-performance documentation websites with Astro. +template: splash +editUrl: false +lastUpdated: false +banner: + content: | + Updating to Astro 5? + + Learn how to upgrade + +hero: + title: Make your docs shine with Starlight + tagline: Everything you need to build a stellar documentation website. Fast, accessible, and easy-to-use. + image: + file: ../../assets/hero-star.webp + actions: + - text: Get started + icon: right-arrow + link: /getting-started/ + - text: View on GitHub + icon: external + variant: minimal + link: https://github.com/withastro/starlight +--- diff --git a/packages/cache/tests/fixture/starlight/src/content/docs/long.mdx b/packages/cache/tests/fixture/starlight/src/content/docs/long.mdx new file mode 100644 index 0000000..5f14156 --- /dev/null +++ b/packages/cache/tests/fixture/starlight/src/content/docs/long.mdx @@ -0,0 +1,513 @@ +--- +title: Authoring Content in Markdown +template: splash +description: An overview of the Markdown syntax Starlight supports. +--- + +Starlight supports the full range of [Markdown](https://daringfireball.net/projects/markdown/) syntax in `.md` files as well as frontmatter [YAML](https://dev.to/paulasantamaria/introduction-to-yaml-125f) to define metadata such as a title and description. + +Please be sure to check the [MDX docs](https://mdxjs.com/docs/what-is-mdx/#markdown) or [Markdoc docs](https://markdoc.dev/docs/syntax) if using those file formats, as Markdown support and usage can differ. + +## Frontmatter + +You can customize individual pages in Starlight by setting values in their frontmatter. +Frontmatter is set at the top of your files between `---` separators: + +```md title="src/content/docs/example.md" +--- +title: My page title +--- + +Page content follows the second `---`. +``` + +Every page must include at least a `title`. +See the [frontmatter reference](/reference/frontmatter/) for all available fields and how to add custom fields. + +## Inline styles + +Text can be **bold**, _italic_, or ~~strikethrough~~. + +```md +Text can be **bold**, _italic_, or ~~strikethrough~~. +``` + +You can [link to another page](/getting-started/). + +```md +You can [link to another page](/getting-started/). +``` + +You can highlight `inline code` with backticks. + +```md +You can highlight `inline code` with backticks. +``` + +## Images + +Images in Starlight use [Astro’s built-in optimized asset support](https://docs.astro.build/en/guides/images/). + +Markdown and MDX support the Markdown syntax for displaying images that includes alt-text for screen readers and assistive technology. + + + +```md + +``` + + + +Relative image paths are also supported for images stored locally in your project. + +```md +// src/content/docs/page-1.md + + +``` + +## Headings + +You can structure content using a heading. Headings in Markdown are indicated by a number of `#` at the start of the line. + +### How to structure page content in Starlight + +Starlight is configured to automatically use your page title as a top-level heading and will include an "Overview" heading at top of each page's table of contents. We recommend starting each page with regular paragraph text content and using on-page headings from ```` at the start and end. You can indicate the programming language being used after the opening backticks.
+
+```js
+// Javascript code with syntax highlighting.
+var fun = function lang(l) {
+ dateformat.i18n = require('./lang/' + l);
+ return true;
+};
+```
+
+````md
+```js
+// Javascript code with syntax highlighting.
+var fun = function lang(l) {
+ dateformat.i18n = require('./lang/' + l);
+ return true;
+};
+```
+````
+
+### Expressive Code features
+
+Starlight uses [Expressive Code](https://github.com/expressive-code/expressive-code/tree/main/packages/astro-expressive-code) to extend formatting possibilities for code blocks.
+Expressive Code’s text markers and window frames plugins are enabled by default.
+Code block rendering can be configured using Starlight’s [`expressiveCode` configuration option](/reference/configuration/#expressivecode).
+
+#### Text markers
+
+You can highlight specific lines or parts of your code blocks using [Expressive Code text markers](https://github.com/expressive-code/expressive-code/blob/main/packages/%40expressive-code/plugin-text-markers/README.md#usage-in-markdown--mdx-documents) on the opening line of your code block.
+Use curly braces (`{ }`) to highlight entire lines, and quotation marks to highlight strings of text.
+
+There are three highlighting styles: neutral for calling attention to code, green for indicating inserted code, and red for indicating deleted code.
+Both text and entire lines can be marked using the default marker, or in combination with `ins=` and `del=` to produce the desired highlighting.
+
+Expressive Code provides several options for customizing the visual appearance of your code samples.
+Many of these can be combined, for highly illustrative code samples.
+Please explore the [Expressive Code documentation](https://github.com/expressive-code/expressive-code/blob/main/packages/%40expressive-code/plugin-text-markers/README.md) for the extensive options available.
+Some of the most common examples are shown below:
+
+- [Mark entire lines & line ranges using the `{ }` marker](https://github.com/expressive-code/expressive-code/blob/main/packages/%40expressive-code/plugin-text-markers/README.md#marking-entire-lines--line-ranges):
+
+ ```js {2-3}
+ function demo() {
+ // This line (#2) and the next one are highlighted
+ return 'This is line #3 of this snippet';
+ }
+ ```
+
+ ````md
+ ```js {2-3}
+ function demo() {
+ // This line (#2) and the next one are highlighted
+ return 'This is line #3 of this snippet';
+ }
+ ```
+ ````
+
+- [Mark selections of text using the `" "` marker or regular expressions](https://github.com/expressive-code/expressive-code/blob/main/packages/%40expressive-code/plugin-text-markers/README.md#marking-individual-text-inside-lines):
+
+ ```js "Individual terms" /Even.*supported/
+ // Individual terms can be highlighted, too
+ function demo() {
+ return 'Even regular expressions are supported';
+ }
+ ```
+
+ ````md
+ ```js "Individual terms" /Even.*supported/
+ // Individual terms can be highlighted, too
+ function demo() {
+ return 'Even regular expressions are supported';
+ }
+ ```
+ ````
+
+- [Mark text or lines as inserted or deleted with `ins` or `del`](https://github.com/expressive-code/expressive-code/blob/main/packages/%40expressive-code/plugin-text-markers/README.md#selecting-marker-types-mark-ins-del):
+
+ ```js "return true;" ins="inserted" del="deleted"
+ function demo() {
+ console.log('These are inserted and deleted marker types');
+ // The return statement uses the default marker type
+ return true;
+ }
+ ```
+
+ ````md
+ ```js "return true;" ins="inserted" del="deleted"
+ function demo() {
+ console.log('These are inserted and deleted marker types');
+ // The return statement uses the default marker type
+ return true;
+ }
+ ```
+ ````
+
+- [Combine syntax highlighting with `diff`-like syntax](https://github.com/expressive-code/expressive-code/blob/main/packages/%40expressive-code/plugin-text-markers/README.md#combining-syntax-highlighting-with-diff-like-syntax):
+
+ ```diff lang="js"
+ function thisIsJavaScript() {
+ // This entire block gets highlighted as JavaScript,
+ // and we can still add diff markers to it!
+ - console.log('Old code to be removed')
+ + console.log('New and shiny code!')
+ }
+ ```
+
+ ````md
+ ```diff lang="js"
+ function thisIsJavaScript() {
+ // This entire block gets highlighted as JavaScript,
+ // and we can still add diff markers to it!
+ - console.log('Old code to be removed')
+ + console.log('New and shiny code!')
+ }
+ ```
+ ````
+
+#### Frames and titles
+
+Code blocks can be rendered inside a window-like frame.
+A frame that looks like a terminal window will be used for shell scripting languages (e.g. `bash` or `sh`).
+Other languages display inside a code editor-style frame if they include a title.
+
+A code block’s optional title can be set either with a `title="..."` attribute following the code block's opening backticks and language identifier, or with a file name comment in the first lines of the code.
+
+- [Add a file name tab with a comment](https://github.com/expressive-code/expressive-code/blob/main/packages/%40expressive-code/plugin-frames/README.md#adding-titles-open-file-tab-or-terminal-window-title)
+
+ ```js
+ // my-test-file.js
+ console.log('Hello World!');
+ ```
+
+ ````md
+ ```js
+ // my-test-file.js
+ console.log('Hello World!');
+ ```
+ ````
+
+- [Add a title to a Terminal window](https://github.com/expressive-code/expressive-code/blob/main/packages/%40expressive-code/plugin-frames/README.md#adding-titles-open-file-tab-or-terminal-window-title)
+
+ ```bash title="Installing dependencies…"
+ npm install
+ ```
+
+ ````md
+ ```bash title="Installing dependencies…"
+ npm install
+ ```
+ ````
+
+- [Disable window frames with `frame="none"`](https://github.com/expressive-code/expressive-code/blob/main/packages/%40expressive-code/plugin-frames/README.md#overriding-frame-types)
+
+ ```bash frame="none"
+ echo "This is not rendered as a terminal despite using the bash language"
+ ```
+
+ ````md
+ ```bash frame="none"
+ echo "This is not rendered as a terminal despite using the bash language"
+ ```
+ ````
+
+## Details
+
+Details (also known as “disclosures” or “accordions”) are useful to hide content that is not immediately relevant.
+Users can click a short summary to expand and view the full content.
+
+Use the standard HTML [`