### Install and Run Starlight Project Source: https://context7.com/netlify/astro-documentation-starter/llms.txt Commands to create a new Starlight project, install dependencies, start the development server, build the production site, preview the build, and run Astro CLI commands. These are essential for setting up and managing the documentation site. ```bash # Create a new Starlight project npm create astro@latest -- --template starlight # Install dependencies npm install # Start local development server at localhost:4321 npm run dev # Build production site to ./dist/ npm run build # Preview production build locally npm run preview # Run Astro CLI commands npm run astro add npm run astro check npm run astro -- --help ``` -------------------------------- ### Markdown Documentation Page Example Source: https://context7.com/netlify/astro-documentation-starter/llms.txt An example of a Markdown file used to create a documentation page. It includes frontmatter metadata such as title and description, followed by Markdown content structured with headings and links for further reading. ```markdown --- title: Example Guide description: A guide in my new Starlight docs site. --- Guides lead a user through a specific task they want to accomplish, often with a sequence of steps. Writing a good guide requires thinking about what your users are trying to do. ## Further reading - Read [about how-to guides](https://diataxis.fr/how-to-guides/) in the Diátaxis framework ``` -------------------------------- ### Create Astro Project with Starlight Template Source: https://github.com/netlify/astro-documentation-starter/blob/main/README.md This command uses npm to create a new Astro project, specifically initializing it with the Starlight template. This is the first step to setting up a documentation site with Starlight. Ensure you have Node.js and npm installed. ```bash npm create astro@latest -- --template starlight ``` -------------------------------- ### Astro Project Commands Source: https://github.com/netlify/astro-documentation-starter/blob/main/README.md Lists essential npm commands for managing an Astro project. These commands cover installing dependencies, running a local development server, building the production site, previewing the build, and interacting with the Astro CLI. These commands are executed from the project's root directory. ```bash npm install npm run dev npm run build npm run preview npm run astro ... npm run astro -- --help ``` -------------------------------- ### MDX Landing Page with Hero Section Source: https://context7.com/netlify/astro-documentation-starter/llms.txt An example of an MDX file used to create a landing page with a hero section and action cards. It utilizes Starlight components like `Card` and `CardGrid`, and defines hero properties such as tagline, image, and action buttons. ```mdx --- title: Welcome to Starlight description: Get started building your docs site with Starlight. template: splash hero: tagline: Congrats on setting up a new Starlight project! image: file: ../../assets/houston.webp actions: - text: Example Guide link: /guides/example/ icon: right-arrow variant: primary - text: Read the Starlight docs link: https://starlight.astro.build icon: external --- import { Card, CardGrid } from '@astrojs/starlight/components'; ## Next steps Edit `src/content/docs/index.mdx` to see this page change. Add Markdown or MDX files to `src/content/docs` to create new pages. Edit your `sidebar` and other config in `astro.config.mjs`. Learn more in [the Starlight Docs](https://starlight.astro.build/). ``` -------------------------------- ### Import Starlight Components (Astro) Source: https://github.com/netlify/astro-documentation-starter/blob/main/src/content/docs/index.mdx Imports necessary Card and CardGrid components from the Starlight library for creating interactive UI elements in Astro projects. Ensure '@astrojs/starlight/components' is installed. ```astro import { Card, CardGrid } from '@astrojs/starlight/components'; ``` -------------------------------- ### Astro Project Structure Overview Source: https://github.com/netlify/astro-documentation-starter/blob/main/README.md Illustrates the typical directory and file structure of an Astro project initialized with the Starlight template. Key directories include `public/` for static assets, `src/content/docs/` for documentation files (Markdown/MDX), and configuration files like `astro.config.mjs`. ```treeview . ├── public/ ├── src/ │ ├── assets/ │ ├── content/ │ │ ├── docs/ │ │ └── config.ts │ └── env.d.ts ├── astro.config.mjs ├── package.json └── tsconfig.json ``` -------------------------------- ### Project Package Configuration (JSON) Source: https://context7.com/netlify/astro-documentation-starter/llms.txt This JSON object defines the core metadata, development scripts, and production dependencies for the Astro Documentation Starter project. It outlines how to run the development server, build the project, and lists necessary npm packages. ```json { "name": "astro-documentation-starter", "type": "module", "version": "0.0.1", "scripts": { "dev": "astro dev", "start": "astro dev", "build": "astro check && astro build", "preview": "astro preview", "astro": "astro" }, "dependencies": { "@astrojs/check": "^0.4.1", "@astrojs/starlight": "^0.16.0", "astro": "^4.2.1", "sharp": "^0.32.5", "typescript": "^5.3.3" } } ``` -------------------------------- ### Configure Starlight Site (Astro) Source: https://github.com/netlify/astro-documentation-starter/blob/main/src/content/docs/index.mdx Demonstrates how to configure Starlight project settings, including the sidebar navigation and other site-wide configurations, within the astro.config.mjs file. This configuration is essential for defining the structure and behavior of the documentation site. ```astro Edit your `sidebar` and other config in `astro.config.mjs`. ``` -------------------------------- ### Starlight Configuration in Astro Source: https://context7.com/netlify/astro-documentation-starter/llms.txt Configuration of Starlight within the Astro project's `astro.config.mjs` file. This includes setting the site title, social media links, and defining the sidebar structure with nested items and automatic generation for reference sections. ```javascript // astro.config.mjs import { defineConfig } from 'astro/config'; import starlight from '@astrojs/starlight'; export default defineConfig({ integrations: [ starlight({ title: 'My Docs', social: { github: 'https://github.com/withastro/starlight', }, sidebar: [ { label: 'Guides', items: [ { label: 'Example Guide', link: '/guides/example/' }, ], }, { label: 'Reference', autogenerate: { directory: 'reference' }, }, ], }), ], }); ``` -------------------------------- ### TypeScript Environment Configuration for Astro Source: https://context7.com/netlify/astro-documentation-starter/llms.txt TypeScript environment configuration file (`src/env.d.ts`) for an Astro project using Starlight. It includes references to Astro's generated types and client-side specific types, ensuring proper TypeScript support for the project. ```typescript /// /// ``` -------------------------------- ### Content Collections Schema for Starlight Source: https://context7.com/netlify/astro-documentation-starter/llms.txt Defines the content collection schemas for documentation and internationalization data in `src/content/config.ts`. It uses Starlight's `docsSchema` and `i18nSchema` to ensure type-safe content management for documentation pages and translations. ```typescript // src/content/config.ts import { defineCollection } from 'astro:content'; import { docsSchema, i18nSchema } from '@astrojs/starlight/schema'; export const collections = { docs: defineCollection({ schema: docsSchema() }), i18n: defineCollection({ type: 'data', schema: i18nSchema() }), }; ``` === COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.