### Run Development Server for a Package Source: https://github.com/withastro/astro/blob/main/AGENTS.md Start the development server for a specific example package. Replace `` with the example package path. ```bash pnpm -C examples/blog dev ``` -------------------------------- ### Setup Local Astro Repository Source: https://github.com/withastro/astro/blob/main/CONTRIBUTING.md Clone the repository, install dependencies using pnpm, and build the project. Always run 'pnpm install' from the top-level directory. ```shell git clone && cd ... pnpm install pnpm run build ``` -------------------------------- ### Agent Browser: Install and Setup Source: https://github.com/withastro/astro/blob/main/AGENTS.md Installs the agent-browser globally and its necessary components. This is required before using agent-browser commands. ```bash npm install -g agent-browser && agent-browser install ``` -------------------------------- ### Install Dependencies and Build Source: https://github.com/withastro/astro/blob/main/packages/language-tools/CONTRIBUTING.md Install project dependencies and perform an initial build using pnpm. ```shell pnpm install pnpm build ``` -------------------------------- ### Install Astro (Manual) Source: https://github.com/withastro/astro/blob/main/README.md Use this command for a manual installation of Astro. ```bash npm install astro ``` -------------------------------- ### Start Development Server Source: https://github.com/withastro/astro/blob/main/CONTRIBUTING.md Run the development script to start a file-watching, live-reloading server for active development. ```shell # starts a file-watching, live-reloading dev script for active development pnpm run dev ``` -------------------------------- ### Install Astro (Recommended) Source: https://github.com/withastro/astro/blob/main/README.md Use this command to install the latest version of Astro. ```bash npm create astro@latest ``` -------------------------------- ### Run Local Astro Examples Source: https://github.com/withastro/astro/blob/main/CONTRIBUTING.md Test your changes by running examples from the /examples folder, which are linked to use local Astro source code. ```shell pnpm --filter @example/minimal run dev ``` -------------------------------- ### Create Astro Project with Svelte Template Source: https://github.com/withastro/astro/blob/main/examples/framework-svelte/README.md Use this command to scaffold a new Astro project pre-configured with Svelte support. This is the starting point for the example. ```sh npm create astro@latest -- --template framework-svelte ``` -------------------------------- ### Install Project Dependencies Source: https://github.com/withastro/astro/blob/main/examples/basics/README.md Run this command in your project's root directory to install all the necessary dependencies listed in your package.json file. This is typically done after cloning a project or creating a new one. ```sh npm install ``` -------------------------------- ### Diff Example Source: https://github.com/withastro/astro/blob/main/packages/astro/test/fixtures/astro-markdown-shiki/langs/src/pages/normal.md A simple example demonstrating the diff format, showing added and removed lines. ```diff + Add - Remove ``` -------------------------------- ### Install Astro Source: https://github.com/withastro/astro/blob/main/packages/astro/README.md Use npm to create a new Astro project or install Astro manually. ```bash # Recommended! npm create astro@latest # Manual: npm install astro ``` -------------------------------- ### Initial create-key.ts and main.ts Source: https://github.com/withastro/astro/blob/main/CONTRIBUTING.md An initial example of create-key.ts and main.ts that are difficult to test due to direct dependencies on global objects and external utilities. ```typescript // create-key.ts import { logger, generateKey } from '../utils.js'; import { encodeBase64 } from '@oslojs/encoding'; export async function createKey() { const encoded = encodeBase64( new Uint8Array(await crypto.subtle.exportKey('raw', await generateKey())) ); logger.info(`Key created: ${key}`); } // main.ts import { createKey } from './create-key.js'; async function main() { await createKey(); } ``` -------------------------------- ### Start Local Development Server Source: https://github.com/withastro/astro/blob/main/examples/basics/README.md This command starts a local development server, usually accessible at localhost:4321. It enables live reloading and provides a convenient environment for developing your Astro site. ```sh npm run dev ``` -------------------------------- ### Start Astro Development Server Source: https://github.com/withastro/astro/blob/main/AGENTS.md Use `astro dev` to start the local development server with Hot Module Replacement (HMR). Avoid using other web servers. ```bash astro dev ``` -------------------------------- ### Create Astro Project with PNPM Source: https://github.com/withastro/astro/blob/main/packages/create-astro/README.md Run this command to start a new Astro project using PNPM in interactive mode. ```bash pnpm create astro ``` -------------------------------- ### MDX Plugin Integration Example Source: https://github.com/withastro/astro/blob/main/packages/integrations/mdx/test/fixtures/mdx-plugins/src/pages/with-plugins.mdx This snippet shows a basic setup for an MDX plugin in Astro. It uses a variable to control a custom HTML attribute, demonstrating plugin functionality. ```mdx export let recmaPluginWorking = false
``` -------------------------------- ### Astro Development Commands Source: https://github.com/withastro/astro/blob/main/examples/blog/README.md A list of essential commands for managing an Astro project. These include installing dependencies, starting the development server, building for production, and previewing the build. ```text npm install npm run dev npm run build npm run preview npm run astro ... npm run astro -- --help ``` -------------------------------- ### Create Astro Minimal Project Source: https://github.com/withastro/astro/blob/main/examples/minimal/README.md Use this command to create a new Astro project with the minimal template. Ensure you have Node.js installed. ```sh npm create astro@latest -- --template minimal ``` -------------------------------- ### Create Astro Project with Yarn Source: https://github.com/withastro/astro/blob/main/packages/create-astro/README.md Run this command to start a new Astro project using Yarn in interactive mode. ```bash yarn create astro ``` -------------------------------- ### Install @astrojs/ts-plugin Source: https://github.com/withastro/astro/blob/main/packages/language-tools/ts-plugin/README.md Install the @astrojs/ts-plugin as a development dependency using npm. ```bash npm install --save-dev @astrojs/ts-plugin ``` -------------------------------- ### Rinfo Program Example Source: https://github.com/withastro/astro/blob/main/packages/astro/test/fixtures/astro-markdown-shiki/langs/src/pages/index.md An example of a program written in Rinfo, demonstrating its syntax for defining areas, robots, and basic commands. ```rinfo programa Rinfo areas ciuadad: AreaC(1,1,100,100) robots robot robot1 comenzar Informar(PosAv, PosCa) fin variables Rinfo: robot1 comenzar AsignarArea(Rinfo, ciudad) Iniciar(Rinfo, 1, 1) fin ``` -------------------------------- ### Start Background Astro Dev Server Source: https://github.com/withastro/astro/blob/main/AGENTS.md Starts the Astro development server in the background. Useful for long-running development sessions. ```bash pnpm -C examples/minimal dev --background ``` -------------------------------- ### Force Start/Replace Background Dev Server Source: https://github.com/withastro/astro/blob/main/AGENTS.md Forcefully starts a background Astro dev server, replacing any stale instance that might be blocking startup. ```bash pnpm -C examples/minimal dev --background --force ``` -------------------------------- ### TypeScript Example with Tooltips Source: https://github.com/withastro/astro/blob/main/packages/integrations/mdx/test/fixtures/mdx-syntax-highlighting/src/pages/index.mdx A simple TypeScript code snippet using `console.log` to illustrate tooltips and documentation hints provided by twoslash. ```ts console.log("Hover over the function to see its documentation") ``` -------------------------------- ### Prerequisites for Astro Development Source: https://github.com/withastro/astro/blob/main/CONTRIBUTING.md Ensure you have the correct Node.js and pnpm versions installed. Using Corepack is recommended for managing pnpm. ```shell node: "^>=22.12.0" pnpm: "^10.28.0" # otherwise, your build will fail ``` -------------------------------- ### Run Development Server for VS Code Extension Source: https://github.com/withastro/astro/blob/main/packages/language-tools/CONTRIBUTING.md Start the build in watch mode for developing the VS Code extension. ```shell pnpm dev ``` -------------------------------- ### Unit Test for createKey with Mocks Source: https://github.com/withastro/astro/blob/main/CONTRIBUTING.md A unit test example demonstrating how to test the createKey function by mocking its dependencies (logger and keyGenerator) using Jest-like syntax. ```javascript // @ts-check import assert from 'node:assert/strict'; import { describe, it } from 'node:test'; import { createKey } from '../../../dist/cli/create-key/core/create-key.js'; import { SpyLogger } from '../test-utils.js'; import { FakeKeyGenerator } from './utils.js'; describe('CLI create-key', () => { describe('core', () => { describe('createKey()', () => { it('logs the generated key', async () => { const logger = new SpyLogger(); const keyGenerator = new FakeKeyGenerator('FOO'); await createKey({ logger, keyGenerator }); assert.equal(logger.logs[0].type, 'info'); assert.equal(logger.logs[0].label, 'crypto'); assert.match(logger.logs[0].message, /ASTRO_KEY=FOO/); }); }); }); }); ``` -------------------------------- ### Example tsconfig.json/jsconfig.json Path Aliasing Source: https://github.com/withastro/astro/blob/main/packages/astro/src/vite-plugin-config-alias/README.md Demonstrates how to configure path aliases in tsconfig.json or jsconfig.json to map import paths. This allows for shorter and more organized imports. ```json { "compilerOptions": { "paths": { "components:*": ["src/components/*.astro"] } } } ``` -------------------------------- ### Toolbar App Commands Source: https://github.com/withastro/astro/blob/main/examples/toolbar-app/README.md Essential commands for managing the toolbar app project. Includes installing dependencies, running the development server, and building the application. ```text npm install npm run dev npm run build ``` -------------------------------- ### Kubernetes Pod Definition Source: https://github.com/withastro/astro/blob/main/packages/astro/test/fixtures/astro-markdown-shiki/themes-custom/src/pages/index.md Example of a Kubernetes Pod definition in YAML format. ```yaml apiVersion: v3 kind: Pod metadata: name: rss-site labels: app: web spec: containers: - name: front-end image: nginx ports: - containerPort: 80 - name: rss-reader image: nickchase/rss-php-nginx:v1 ports: - containerPort: 88 ``` -------------------------------- ### Add Astro Integration Source: https://github.com/withastro/astro/blob/main/AGENTS.md Use `astro add` to install and configure official integrations for your Astro project. ```bash astro add ``` -------------------------------- ### Syntax Highlighting in MDX Source: https://github.com/withastro/astro/blob/main/examples/with-mdx/src/pages/index.mdx This example demonstrates Astro's built-in syntax highlighting for code blocks within MDX files, using the Shiki library. ```astro --- const weSupportAstro = true; ---

Hey, what theme is that? Looks nice!

``` -------------------------------- ### Ordered List Syntax Source: https://github.com/withastro/astro/blob/main/examples/blog/src/content/blog/markdown-style-guide.md Create ordered lists by starting each line with a number followed by a period and a space. This is useful for sequential steps or items. ```markdown 1. First item 2. Second item 3. Third item ``` -------------------------------- ### Basic Unit Test Structure Source: https://github.com/withastro/astro/blob/main/reference/unit-testing.md An example of a unit test for `someFunction` using Node.js's `describe` and `it` syntax. It demonstrates setting up basic settings and asserting the function's output. ```typescript import assert from 'node:assert/strict'; import { describe, it } from 'node:test'; import { someFunction } from '../../../dist/core/some-module.js'; import { createBasicSettings } from '../test-utils.ts'; describe('someFunction', () => { it('handles edge case from issue #1234', async () => { const settings = await createBasicSettings({ root: '/tmp/test' }); const result = someFunction(settings, edgeCaseInput); assert.equal(result, expectedOutput); }); }); ``` -------------------------------- ### Using Astro Counter Component with Server-Side Rendering Source: https://github.com/withastro/astro/blob/main/packages/astro/e2e/fixtures/solid-component/src/pages/mdx.mdx Example of rendering an Astro component on the server. The component is imported and used directly with props. ```astro import Counter from '../components/Counter.astro'; export const someProps = { count: 0, }; # Hello, server! ``` -------------------------------- ### Example elementStack Value During Walking Phase Source: https://github.com/withastro/astro/blob/main/packages/integrations/mdx/src/README.md Illustrates the state of the elementStack during a tree traversal, showing how elements are added and removed. This helps understand the flow of static and non-static node detection. ```text Enter: A Enter: A, B Enter: A, B, C (Non-static node found): Enter: D Enter: D, E Leave: D Leave: Leave: Leave: Leave: ``` -------------------------------- ### Get Help with Astro CLI Source: https://github.com/withastro/astro/blob/main/examples/basics/README.md Use this command to display help information and available options for the Astro CLI. It's useful for understanding the full range of commands and their usage. ```sh npm run astro -- --help ``` -------------------------------- ### Create Astro Project from Nested GitHub Repository Path Source: https://github.com/withastro/astro/blob/main/examples/README.md Create an Astro project from a template located within a specific path in a GitHub repository. Use this when the example is not at the root of the repository. ```sh npm create astro@latest -- --template [GITHUB_USER]/[REPO_NAME]/path/to/example ``` -------------------------------- ### Create Astro Project with Basics Template Source: https://github.com/withastro/astro/blob/main/examples/basics/README.md Use this command to create a new Astro project initialized with the 'basics' template. This sets up a foundational project structure for you to build upon. ```sh npm create astro@latest -- --template basics ``` -------------------------------- ### Project Structure Overview Source: https://github.com/withastro/astro/blob/main/examples/hackernews/README.md Illustrates the directory and file layout of the Astro Hackernews starter kit. Key directories include public, src (with components, layouts, and pages), and package.json. ```text / ├── public/ │ └── favicon.svg ├── src/ │ ├── components/ │ ├── layouts/ │ │ └── Layout.astro │ └── pages/ └── stories/ └── [id].astro └── users/ └── [id].astro │ └── [...stories].astro └── package.json ``` -------------------------------- ### Create Astro Blog Project Source: https://github.com/withastro/astro/blob/main/examples/blog/README.md Use this command to create a new Astro project with the blog starter template. This sets up the basic structure and configuration for a blog. ```sh npm create astro@latest -- --template blog ``` -------------------------------- ### Create Astro Project with Nanostores Template Source: https://github.com/withastro/astro/blob/main/examples/with-nanostores/README.md Use this command to quickly scaffold a new Astro project pre-configured with nanostores integration. ```sh npm create astro@latest -- --template with-nanostores ``` -------------------------------- ### Run All Benchmarks Source: https://github.com/withastro/astro/blob/main/CONTRIBUTING.md Execute this command from the project root to run all available benchmarks sequentially. Benchmarks are located in the `benchmarks` directory. ```shell pnpm run benchmark ``` -------------------------------- ### Create Astro Project from Template Source: https://github.com/withastro/astro/blob/main/examples/README.md Use this command to create a new Astro project from a specified template. Replace `[EXAMPLE_NAME]` with the desired template name. ```sh npm create astro@latest -- --template [EXAMPLE_NAME] ``` -------------------------------- ### Using import.meta.env.SITE for URL construction Source: https://github.com/withastro/astro/blob/main/packages/integrations/mdx/test/fixtures/mdx-vite-env-vars/src/pages/vite-env-vars.mdx Demonstrates computing a URL using the SITE environment variable within an Astro template. ```js {new URL('/blog/cool-post', import.meta.env.SITE)} ``` -------------------------------- ### Astro Project Structure Overview Source: https://github.com/withastro/astro/blob/main/examples/blog/README.md This outlines the typical directory structure of an Astro project created with the blog starter kit. It highlights key directories like `src/pages`, `src/components`, and `public/`. ```text ├── public/ ├── src/ │   ├── assets/ │   ├── components/ │   ├── content/ │   ├── layouts/ │   └── pages/ ├── astro.config.mjs ├── README.md ├── package.json └── tsconfig.json ``` -------------------------------- ### Preview Astro Production Build Source: https://github.com/withastro/astro/blob/main/AGENTS.md Use `astro preview` to serve the production build locally. Do not use other web servers for this purpose. ```bash astro preview ``` -------------------------------- ### JSON Object Example Source: https://github.com/withastro/astro/blob/main/packages/astro/test/fixtures/markdown/src/pages/post.md A simple JSON object with a key-value pair. ```json { "key": "value" } ``` -------------------------------- ### Package Main tsconfig Source: https://github.com/withastro/astro/blob/main/CONTRIBUTING.md Acts as a pure solution file, including no sources of its own. It serves as the entry point that points to build and test configurations. ```jsonc // packages//tsconfig.json // Pure solution file. `"files": []` means it includes no sources of its own. // It only acts as the entry point that points at build + test. { "extends": "../../configs/tsconfig.base.json", "files": [], "references": [{ "path": "./tsconfig.build.json" }, { "path": "./tsconfig.test.json" }] } ``` -------------------------------- ### Preview Production Build Locally Source: https://github.com/withastro/astro/blob/main/examples/basics/README.md Allows you to preview your production build locally before deploying. This command serves the contents of the './dist/' folder, simulating the live environment. ```sh npm run preview ``` -------------------------------- ### HTML Escaping Examples Source: https://github.com/withastro/astro/blob/main/packages/astro/test/fixtures/html-escape/src/pages/complex.html Illustrates how Astro escapes interpolated variables in template literals. Observe the effect of backticks and backslashes on the output. ```javascript const normal = `There are ${count} things!`; const content = `There are \`${count}\` things!`; const a = "\ `${a}\ `; const b = "\\\ `${b}\\ `; const c = "\\\\ `${c}\\\ `; const d = "\\\\\ `${d}\\\\ `; const e = "\\\\\\ `${e}\\\\\ `; const f = "\\\\\\\ `${f}\\\\\\ `; ``` -------------------------------- ### Create Astro Project with Multiple Frameworks Template Source: https://github.com/withastro/astro/blob/main/examples/framework-multiple/README.md Use this command to scaffold a new Astro project pre-configured for multiple UI frameworks. ```sh npm create astro@latest -- --template framework-multiple ``` -------------------------------- ### Configure pnpm Merge Driver for Lock Files Source: https://github.com/withastro/astro/blob/main/CONTRIBUTING.md Automatically handle merge conflicts in pnpm-lock.yaml by installing and configuring the pnpm merge driver. ```shell pnpm add -g @pnpm/merge-driver pnpm dlx npm-merge-driver install --driver-name pnpm-merge-driver --driver "pnpm-merge-driver %A %O %B %P" --files pnpm-lock.yaml ``` -------------------------------- ### Example RSS Feed Item Source: https://github.com/withastro/astro/blob/main/packages/astro-rss/README.md Defines the structure for a single item in an RSS feed, including title, link, publication date, and description. ```javascript const item = { title: 'Alpha Centauri: so close you can touch it', link: '/blog/alpha-centauri', pubDate: new Date('2023-06-04'), description: 'Alpha Centauri is a triple star system, containing Proxima Centauri, the closest star to our sun at only 4.24 light-years away.', categories: ['stars', 'space'], }; ``` -------------------------------- ### Create Astro Project with Markdoc Template Source: https://github.com/withastro/astro/blob/main/examples/with-markdoc/README.md Use this command to create a new Astro project pre-configured with the experimental Markdoc integration. ```sh npm create astro@latest -- --template with-markdoc ``` -------------------------------- ### Create Astro Project from Community GitHub Repository Source: https://github.com/withastro/astro/blob/main/examples/README.md Initialize an Astro project using a template from a community GitHub repository. Replace `[GITHUB_USER]` and `[REPO_NAME]` with the repository owner and name. ```sh npm create astro@latest -- --template [GITHUB_USER]/[REPO_NAME] ``` -------------------------------- ### Create Astro Project with Vue Template Source: https://github.com/withastro/astro/blob/main/examples/framework-vue/README.md Use this command to scaffold a new Astro project pre-configured with Vue support. ```bash npm create astro@latest -- --template framework-vue ``` -------------------------------- ### Create Astro Project with Solid.js Template Source: https://github.com/withastro/astro/blob/main/examples/framework-solid/README.md Use this command to scaffold a new Astro project pre-configured with Solid.js support. This sets up the necessary dependencies and configurations. ```sh npm create astro@latest -- --template framework-solid ``` -------------------------------- ### Build Astro Project Source: https://github.com/withastro/astro/blob/main/CONTRIBUTING.md Execute a one-time build of the entire project. ```shell # build the entire project, one time. pnpm run build ``` -------------------------------- ### Simple JavaScript Variable Source: https://github.com/withastro/astro/blob/main/packages/integrations/mdx/test/fixtures/mdx-optimize/src/pages/index.mdx A basic JavaScript code snippet defining a string variable. This is an example of inline code that can be displayed within MDX content. ```js const pancakes = 'yummy' ``` -------------------------------- ### Create a Changeset for PRs Source: https://github.com/withastro/astro/blob/main/CONTRIBUTING.md Use this command to add a changeset when making changes to Astro packages. Non-package files like examples do not require changesets. ```shell pnpm exec changeset ``` -------------------------------- ### Create Astro Component Package Source: https://github.com/withastro/astro/blob/main/examples/component/README.md Use this command to initialize a new Astro component package project using the official template. ```sh npm create astro@latest -- --template component ``` -------------------------------- ### Create Astro Project with React Template Source: https://github.com/withastro/astro/blob/main/examples/framework-react/README.md Use this command to scaffold a new Astro project pre-configured with React support. ```sh npm create astro@latest -- --template framework-react ``` -------------------------------- ### Create Astro Project from GitHub Repo Template (NPM) Source: https://github.com/withastro/astro/blob/main/packages/create-astro/README.md This command allows you to use any GitHub repository as a template for your new Astro project, specifying the repository directly. ```bash npm create astro@latest my-astro-project -- --template cassidoo/shopify-react-astro ``` -------------------------------- ### Create Astro Integration Project Source: https://github.com/withastro/astro/blob/main/examples/integration/README.md Use this command to scaffold a new Astro integration project using the official template. ```sh npm create astro@latest -- --template integration ``` -------------------------------- ### Passing Props to Svelte Components Source: https://github.com/withastro/astro/blob/main/packages/astro/e2e/fixtures/svelte-component/src/pages/mdx.mdx Define and pass props to Svelte components rendered in Astro. This example shows how to set initial properties for a Counter component. ```astro export const someProps = { count: 0, }; ``` -------------------------------- ### Create Hackernews Astro Project Source: https://github.com/withastro/astro/blob/main/examples/hackernews/README.md Initialize a new Astro project using the hackernews template. This command sets up the basic structure for the project. ```sh npm create astro@latest -- --template hackernews ``` -------------------------------- ### Example JSDoc for an Astro Error Source: https://github.com/withastro/astro/blob/main/packages/astro/src/core/errors/README.md Demonstrates a practical application of JSDoc tags for documenting a specific Astro error, including a custom message and a link to relevant documentation. ```js /** * @docs * @message Route returned a `returnedValue`. Only a Response can be returned from Astro files. * @see * - [Response](https://docs.astro.build/en/guides/server-side-rendering/#response) * @description * Only instances of [Response](https://developer.mozilla.org/en-US/docs/Web/API/Response) can be returned inside Astro files. */ ``` -------------------------------- ### Generate RSS Feed with Vite Env Vars Source: https://github.com/withastro/astro/blob/main/packages/astro/test/fixtures/astro-markdown/src/pages/vite-env-vars.md Use Vite environment variables like `import.meta.env.SITE` and `import.meta.env.TITLE` when generating an RSS feed. Ensure the necessary packages are installed. ```js // src/pages/rss.xml.js import rss from '@astrojs/rss'; export const GET = () => rss({ // Use Vite env vars with import.meta.env site: import.meta.env.SITE, title: import.meta.env.TITLE, items: import.meta.glob('./**/*.md'), }); ``` -------------------------------- ### Create Astro Project with MDX Template Source: https://github.com/withastro/astro/blob/main/examples/with-mdx/README.md Use this command to create a new Astro project pre-configured with the MDX template. This sets up the necessary dependencies and configurations for using MDX. ```sh npm create astro@latest -- --template with-mdx ``` -------------------------------- ### Getting RSS Feed String Directly Source: https://github.com/withastro/astro/blob/main/packages/astro-rss/README.md Use `getRssString` to obtain the RSS feed content as a string, allowing you to construct your own `Response`. This is useful when you need more control over the response headers. ```ts // src/pages/rss.xml.js import { getRssString } from '@astrojs/rss'; export async function GET(context) { const rssString = await getRssString({ title: 'Buzz’s Blog', ... }); return new Response(rssString, { headers: { 'Content-Type': 'application/xml', }, }); } ``` -------------------------------- ### Create Astro Project with Vitest Template Source: https://github.com/withastro/astro/blob/main/examples/with-vitest/README.md Use this command to create a new Astro project pre-configured with Vitest. This sets up the necessary dependencies and configurations for testing. ```sh npm create astro@latest -- --template with-vitest ``` -------------------------------- ### Create Astro Project with Preact Template Source: https://github.com/withastro/astro/blob/main/examples/framework-preact/README.md Use this command to scaffold a new Astro project pre-configured with Preact support. ```sh npm create astro@latest -- --template framework-preact ``` -------------------------------- ### Import and Render SVG Component with Props Source: https://github.com/withastro/astro/blob/main/packages/astro/test/fixtures/core-image-svg/src/content/blog/props.mdx Demonstrates importing an SVG component and rendering it with various HTML attributes and inline styles. Ensure the SVG file is correctly placed in the assets directory. ```mdx import Github from '~/assets/github.svg'; ``` -------------------------------- ### Agent Browser: Get Interactive Elements Source: https://github.com/withastro/astro/blob/main/AGENTS.md Takes a snapshot of the current page and returns interactive elements with references (e.g., @e1, @e2). Use the `-i` flag for interactive selection. ```bash agent-browser snapshot -i ``` -------------------------------- ### Configure optimizeDeps.entries for node_modules Source: https://github.com/withastro/astro/blob/main/reference/optimize-deps.md If a problematic dependency is only reachable through a `.astro` file within `node_modules`, configure `optimizeDeps.entries` to include these files. This enables the full scan to discover CommonJS dependencies in installed packages. ```ts entries: [ `${srcDirPattern}**/*.{jsx,tsx,vue,svelte,html,astro}`, '**/node_modules/**/*.astro', // scans .astro files in installed packages ]; ``` -------------------------------- ### Import Core CLI Commands Source: https://github.com/withastro/astro/blob/main/packages/astro/src/core/README.md Imports the main CLI commands from the Astro core module. These functions are used to start the development server, build the project, preview the production build, and sync project files. ```typescript import { dev, build, preview, sync } from 'astro'; ``` -------------------------------- ### Adding XML Namespaces and Custom Data Source: https://github.com/withastro/astro/blob/main/packages/astro-rss/README.md Configure `xmlns` to add XML namespaces and `customData` to insert custom tags for specific platforms like podcast services. This example adds the 'itunes' namespace and custom author and episode details. ```js rss({ // ... xmlns: { itunes: 'http://www.itunes.com/dtds/podcast-1.0.dtd', }, customData: 'MF Doom', items: episodes.map((episode) => ({ // ... customData: `${episode.frontmatter.type}` + `${episode.frontmatter.duration}` + `${episode.frontmatter.explicit || false}`, })), }); ``` -------------------------------- ### Agent Browser: Open URL Source: https://github.com/withastro/astro/blob/main/AGENTS.md Navigates the browser to the specified URL. This is the first step in most web automation workflows. ```bash agent-browser open ``` -------------------------------- ### Using environment variables as HTML attributes Source: https://github.com/withastro/astro/blob/main/packages/integrations/mdx/test/fixtures/mdx-vite-env-vars/src/pages/vite-env-vars.mdx Demonstrates setting HTML data attributes using various environment variables like PROD, DEV, BASE_URL, and MODE. ```html
``` -------------------------------- ### Run Single Package Test Suite Source: https://github.com/withastro/astro/blob/main/AGENTS.md Execute the test suite for a single package. Replace `` with the path to the package. ```bash pnpm -C exec astro-scripts test ``` -------------------------------- ### Format and Lint Repository Source: https://github.com/withastro/astro/blob/main/AGENTS.md Use these commands to format and lint the entire Astro repository according to Biome's configuration. ```bash pnpm format ``` ```bash pnpm lint ``` -------------------------------- ### Run @astrojs/upgrade with NPM Source: https://github.com/withastro/astro/blob/main/packages/upgrade/README.md Use this command to upgrade Astro integrations and dependencies using NPM. ```bash npx @astrojs/upgrade ``` -------------------------------- ### Import Path Resolution with Aliases Source: https://github.com/withastro/astro/blob/main/packages/astro/src/vite-plugin-config-alias/README.md Shows how different import syntaxes resolve to the same component when path aliases are configured. This highlights the flexibility and convenience of using aliases. ```javascript import Test from '../components/Test.astro'; import Test from 'components/Test.astro'; import Test from 'components:Test'; ``` -------------------------------- ### Create Astro Project with Specific Template (NPM) Source: https://github.com/withastro/astro/blob/main/packages/create-astro/README.md Use this command to create a new Astro project with a specific template using NPM, bypassing interactive prompts for the template selection. ```bash npm create astro@latest my-astro-project -- --template minimal ``` -------------------------------- ### Build Astro Project for Production Source: https://github.com/withastro/astro/blob/main/AGENTS.md Use `astro build` to create a production-ready build of your Astro project, typically outputting to the `dist/` directory. ```bash astro build ``` -------------------------------- ### Run Full Test Suite Source: https://github.com/withastro/astro/blob/main/AGENTS.md Execute all tests in the workspace root or a specific package directory. This can be a slow operation. ```bash pnpm test ``` -------------------------------- ### Import and Render Astro Component Source: https://github.com/withastro/astro/blob/main/packages/integrations/mdx/test/fixtures/css-head-mdx/src/pages/testTwo.mdx Demonstrates importing and rendering an Astro component within an MDX file. Ensure the component path is correct. ```astro import HelloWorld from '../components/HelloWorld.astro'; # Test 123 456 ``` -------------------------------- ### Create Astro Portfolio Project Source: https://github.com/withastro/astro/blob/main/examples/portfolio/README.md Use this command to create a new Astro project with the portfolio template. This sets up the basic structure for your portfolio website. ```sh npm create astro@latest -- --template portfolio ```