### Create New Astro Project with Yarn Source: https://docs.astro.build/en/install-and-setup This command initiates the Astro project creation wizard using Yarn. It guides the user through setup and allows template selection. Ensure Node.js and Yarn are installed. ```bash yarn create astro ``` -------------------------------- ### Create New Astro Project with npm Source: https://docs.astro.build/en/install-and-setup This command initiates the Astro project creation wizard using npm. It guides the user through setup and allows template selection. Ensure Node.js and npm are installed. ```bash npm create astro@latest ``` -------------------------------- ### Create New Astro Project with pnpm Source: https://docs.astro.build/en/install-and-setup This command initiates the Astro project creation wizard using pnpm. It guides the user through setup and allows template selection. Ensure Node.js and pnpm are installed. ```bash pnpm create astro@latest ``` -------------------------------- ### Create Astro Project from Official Example (pnpm) Source: https://docs.astro.build/en/install-and-setup Creates a new Astro project from an official example template using pnpm. Replace `` with the desired template's identifier. ```bash pnpm create astro@latest --template ``` -------------------------------- ### Create Astro Project from Official Example (Yarn) Source: https://docs.astro.build/en/install-and-setup Creates a new Astro project from an official example template using Yarn. Replace `` with the desired template's identifier. ```bash yarn create astro --template ``` -------------------------------- ### Create Astro Project from Official Example (npm) Source: https://docs.astro.build/en/install-and-setup Creates a new Astro project from an official example template using npm. Replace `` with the desired template's identifier. ```bash npm create astro@latest -- --template ``` -------------------------------- ### Example Post Content Structure Source: https://docs.astro.build/en/guides/cms/keystatic This is an example of how content created in Keystatic is stored in an Astro project. It shows the frontmatter and Markdown content. ```markdown --- title: My First Post --- This is my very first post. I am **super** excited! ``` -------------------------------- ### Create Astro Project from Template with Bun Source: https://docs.astro.build/en/recipes/bun Initialize a new Astro project using a specified template, either an official example or a GitHub repository. This allows for quick setup with pre-configured themes or starter kits. ```bash # create a new project with an official example bun create astro@latest --template # create a new project based on a GitHub repository’s main branch bun create astro@latest --template / ``` -------------------------------- ### Create First Astro Page (index.astro) Source: https://docs.astro.build/en/install-and-setup Example code for an Astro page located at src/pages/index.astro. It includes component frontmatter (runs in terminal) and an HTML template with basic styling. ```astro --- // Welcome to Astro! Everything between these triple-dash code fences // is your "component frontmatter". It never runs in the browser. console.log('This runs in your terminal, not the browser!'); ---

Hello, World!

``` -------------------------------- ### Install Astro Integrations and Frameworks (npm) Source: https://docs.astro.build/en/guides/upgrade-to/v1 Commands to install new Astro integrations and their corresponding frameworks using npm. This replaces the previous 'renderers' system. The guide linked provides further details on the migration process. ```bash # Install your new integrations and frameworks: # (Read the full walkthrough: https://docs.astro.build/en/guides/integrations-guide) npm install @astrojs/lit lit npm install @astrojs/react react react-dom ``` -------------------------------- ### Migrating Markdown to MDX in Astro Source: https://docs.astro.build/en/guides/upgrade-to/v1 Shows an example of frontmatter and import statements for migrating an existing Astro Markdown file to MDX format. ```astro --- layout: '../../layouts/BaseLayout.astro' setup: | import ReactCounter from '../../components/ReactCounter.jsx' title: 'Migrating to MDX' date: 2022-07-26 tags: ["markdown", "mdx", "astro"] --- import ReactCounter from '../../components/ReactCounter.jsx' ``` -------------------------------- ### Create New Astro + Keystatic Project Source: https://docs.astro.build/en/guides/cms/keystatic Use the Keystatic CLI to quickly scaffold a new Astro project with Keystatic pre-configured. This command initiates the project setup process. ```bash npm create @keystatic@latest ``` ```bash pnpm create @keystatic@latest ``` ```bash yarn create @keystatic ``` -------------------------------- ### SCSS Pre-processor Setup in Astro Source: https://docs.astro.build/en/guides/migrate-to-astro/from-nuxtjs Shows how to enable SCSS support in Astro by installing `sass` as a dev dependency and then using `.scss` or `.sass` files directly within ` ``` -------------------------------- ### Fetch and Display Umbraco Content in Astro (Initial Example) Source: https://docs.astro.build/en/guides/cms/umbraco An initial Astro example demonstrating fetching content from Umbraco's Content Delivery API and rendering it. This snippet shows how to use `fetch` and `res.json()` to get article data and display properties like name, date, and content. ```astro --- const res = await fetch('http://localhost/umbraco/delivery/api/v2/content?filter=contentType:article'); const articles = await res.json(); ---

Astro + Umbraco 🚀

{ articles.items.map((article) => (

{article.name}

{article.properties.articleDate}

)) } ``` -------------------------------- ### Install Dependencies with pnpm Source: https://docs.astro.build/en/install-and-setup Installs project dependencies using pnpm after the Astro project has been created. This step is crucial if dependencies were not installed during the initial setup wizard. ```bash pnpm install ``` -------------------------------- ### Install Dependencies with Yarn Source: https://docs.astro.build/en/install-and-setup Installs project dependencies using Yarn after the Astro project has been created. This step is crucial if dependencies were not installed during the initial setup wizard. ```bash yarn install ``` -------------------------------- ### Install @astrojs/node Adapter (pnpm) Source: https://docs.astro.build/en/guides/integrations-guide/node Automates the setup of the Node adapter for Astro using the pnpm package manager. This command installs the necessary package and configures your astro.config file. ```bash pnpm astro add node ``` -------------------------------- ### Install Dependencies with npm Source: https://docs.astro.build/en/install-and-setup Installs project dependencies using npm after the Astro project has been created. This step is crucial if dependencies were not installed during the initial setup wizard. ```bash npm install ``` -------------------------------- ### Install @astrojs/node Adapter (Yarn) Source: https://docs.astro.build/en/guides/integrations-guide/node Automates the setup of the Node adapter for Astro using the Yarn package manager. This command installs the necessary package and configures your astro.config file. ```bash yarn astro add node ``` -------------------------------- ### astro:build:setup Hook Source: https://docs.astro.build/en/reference/integrations-reference The `astro:build:setup` hook runs immediately before the build starts, after `astro:build:start`. It provides the final opportunity to modify the Vite configuration, making it ideal for tasks like adding Vite plugins or adjusting build settings. ```APIDOC ## astro:build:setup Hook ### Description This hook offers the last chance to modify the Vite configuration before the build process begins. It's suitable for advanced configuration adjustments and plugin additions. ### Method Asynchronous function or Promise ### Endpoint `astro:build:setup` ### Parameters #### Path Parameters None #### Query Parameters None #### Request Body - **vite** (`vite.InlineConfig`) - Required - Access to the Vite configuration object. - **pages** (`Map`) - Required - A map of pages and their build data. - **target** (`'client' | 'server'`) - Required - Indicates the current build phase (client or server). - **updateConfig** (`(newConfig: vite.InlineConfig) => void`) - Required - A function to update the Vite configuration. - **logger** (`AstroIntegrationLogger`) - Required - The logger instance. ### Request Example ```javascript { 'astro:build:setup'?: (options: { vite: vite.InlineConfig; pages: Map; target: 'client' | 'server'; updateConfig: (newConfig: vite.InlineConfig) => void; logger: AstroIntegrationLogger; }) => void | Promise; } ``` ### Response #### Success Response (200) None #### Response Example None ### `vite` option #### Description An object that allows you to access the Vite configuration used in the build. #### Example ```javascript export default { name: 'my-integration', hooks: { 'astro:build:setup': ({ vite }) => { const { publicDir, root } = vite; }, } } ``` ### `pages` option #### Description A `Map` with a list of pages as key and their build data as value. #### Example ```javascript export default { name: 'my-integration', hooks: { 'astro:build:setup': ({ pages }) => { pages.forEach((data) => { if (data.route.pattern.test("/blog")) { console.log(data.route.type); } }); }, } } ``` ##### The `PageBuildData` object - `PageBuildData.key` (`string`): Specifies a unique identifier for the page. - `PageBuildData.component` (`string`): Specifies the source component URL. - `PageBuildData.route` (`RouteData`): Describes the information about the page route. - `PageBuildData.moduleSpecifier` (`string`): Defines a string that can be resolved into a file path for the module. - `PageBuildData.styles` (`Array<{ depth: number; order: number; sheet: { type: 'inline'; content: string } | { type: 'external'; src: string } }> `): A list of styles to render on the page. ### `target` option #### Description Builds are separated in two distinct phases: `client` and `server`. This option allows you to determine the current build phase. #### Example ```javascript export default { name: 'my-integration', hooks: { 'astro:build:setup': ({ target }) => { if (target === "server") { // do something in server build phase } }, } } ``` ### `updateConfig()` option #### Description A callback function to update the Vite options used in the build. Any config you provide **will be merged with the user config + other integration config updates** , so you are free to omit keys! #### Example ```javascript import awesomeCssPlugin from 'awesome-css-vite-plugin'; export default { name: 'my-integration', hooks: { 'astro:build:setup': ({ updateConfig }) => { updateConfig({ plugins: [awesomeCssPlugin()], }) } } } ``` ``` -------------------------------- ### Start Astro Development Server with npm, pnpm, or Yarn Source: https://docs.astro.build/en/tutorial/1-setup/2 Commands to start the Astro development server, enabling live preview of your website. This command should be run from your project's root directory. ```bash npm run dev ``` ```bash pnpm run dev ``` ```bash yarn run dev ``` -------------------------------- ### Install Prisma Dependencies and Initialize Source: https://docs.astro.build/en/guides/backend/prisma-postgres Installs necessary Prisma dependencies and initializes Prisma in your project. This sets up the Prisma directory and environment variables. ```bash npm install prisma tsx --save-dev npm install @prisma/adapter-pg @prisma/client npx prisma init --db --output "./generated" ``` -------------------------------- ### Define Start Script in package.json Source: https://docs.astro.build/en/guides/deploy/sevalla Updates the package.json file to include a start script that executes the built server entry point. ```json "scripts": { "start": "node ./dist/server/entry.mjs" } ``` -------------------------------- ### Install LibSQL Client for Astro Source: https://docs.astro.build/en/guides/backend/turso Install the `@libsql/client` package to enable communication between your Astro application and the Turso database. This can be done using npm, pnpm, or Yarn. ```npm npm install @libsql/client ``` ```pnpm pnpm add @libsql/client ``` ```yarn yarn add @libsql/client ``` -------------------------------- ### Implement `start()` for Custom Server Startup Source: https://docs.astro.build/en/reference/adapter-reference An exported function that takes an SSR manifest and adapter arguments, responsible for starting the server, typically by listening to a port. This is used for hosts that require manual server initiation. ```javascript import { App } from 'astro/app'; export function start(manifest) { const app = new App(manifest); addEventListener('fetch', event => { // ... }); } ``` -------------------------------- ### Create New Astro Project with npm, pnpm, or Yarn Source: https://docs.astro.build/en/tutorial/1-setup/2 Commands to initiate a new Astro project using different package managers. This wizard guides you through template selection and dependency installation. ```bash # create a new project with npm npm create astro@latest ``` ```bash # create a new project with pnpm pnpm create astro@latest ``` ```bash # create a new project with yarn yarn create astro ``` -------------------------------- ### Install Astro Integrations and Keystatic Packages Source: https://docs.astro.build/en/guides/cms/keystatic Install the necessary Astro integrations (React, Markdoc) and Keystatic packages. These are required for Keystatic's admin UI and content handling within Astro. ```bash npx astro add react markdoc ``` ```bash pnpm astro add react markdoc ``` ```bash yarn astro add react markdoc ``` ```bash npm install @keystatic/core @keystatic/astro ``` ```bash pnpm add @keystatic/core @keystatic/astro ``` ```bash yarn add @keystatic/core @keystatic/astro ``` -------------------------------- ### Install @astrojs/sitemap using npm, pnpm, or yarn Source: https://docs.astro.build/en/guides/integrations-guide/sitemap Automates the setup of the @astrojs/sitemap integration by running the 'astro add sitemap' command. This is the recommended method for adding the integration to your Astro project. ```bash npx astro add sitemap ``` ```bash pnpm astro add sitemap ``` ```bash yarn astro add sitemap ``` -------------------------------- ### Install Contentful SDK and Rich Text Renderer (npm, pnpm, yarn) Source: https://docs.astro.build/en/guides/cms/contentful Install the necessary packages for interacting with Contentful and rendering rich text content. Choose the command corresponding to your preferred package manager. ```bash npm install contentful @contentful/rich-text-html-renderer ``` ```bash pnpm add contentful @contentful/rich-text-html-renderer ``` ```bash yarn add contentful @contentful/rich-text-html-renderer ``` -------------------------------- ### Start Astro Development Server (npm) Source: https://docs.astro.build/en/develop-and-build Starts the Astro local development server using npm. This command allows you to see your website in action during development and enables live file changes. ```bash npm run dev ``` -------------------------------- ### Fetch and Display Data from Turso in Astro Source: https://docs.astro.build/en/guides/backend/turso Import the initialized Turso client into your Astro component to execute SQL queries. This example fetches all posts and displays their titles in an unordered list. ```astro --- import { turso } from '../turso' const { rows } = await turso.execute('SELECT * FROM posts') ---
    {rows.map((post) => (
  • {post.title}
    • ))}
``` -------------------------------- ### Manually Install @astrojs/netlify Adapter Source: https://docs.astro.build/en/guides/integrations-guide/netlify Installs the Netlify adapter as a project dependency using a package manager and configures it in `astro.config.mjs`. ```bash npm install @astrojs/netlify ``` ```bash pnpm add @astrojs/netlify ``` ```bash yarn add @astrojs/netlify ``` ```javascript import { defineConfig } from 'astro/config'; import netlify from '@astrojs/netlify'; export default defineConfig({ // ... adapter: netlify(), }); ``` -------------------------------- ### Create Astro Blog Project with npm Source: https://docs.astro.build/en/guides/migrate-to-astro/from-eleventy This command initializes a new Astro project using the official blog starter template via npm. It's a quick way to begin a new site with pre-configured blog functionality. ```bash npm create astro@latest -- --template blog ``` -------------------------------- ### Install @astrojs/solid-js using npm, pnpm, or Yarn Source: https://docs.astro.build/en/guides/integrations-guide/solid-js Automates the setup of the @astrojs/solid-js integration using the Astro CLI. This is the recommended method for adding integrations to your Astro project. ```bash npx astro add solid ``` ```bash pnpm astro add solid ``` ```bash yarn astro add solid ``` -------------------------------- ### Install Cosmic JS SDK with npm, pnpm, or Yarn Source: https://docs.astro.build/en/guides/cms/cosmic Installs the Cosmic JavaScript SDK, which is necessary for fetching data from your Cosmic Bucket. This command can be executed using npm, pnpm, or Yarn. ```bash npm install @cosmicjs/sdk ``` ```bash pnpm add @cosmicjs/sdk ``` ```bash yarn add @cosmicjs/sdk ``` -------------------------------- ### Install Zerops CLI Source: https://docs.astro.build/en/guides/deploy/zerops Installs the Zerops CLI globally using npm. This is the first step to interact with the Zerops deployment service. ```bash npm i -g @zerops/zcli ``` -------------------------------- ### Manually install @astrojs/react package Source: https://docs.astro.build/en/guides/integrations-guide/react Manual installation commands for the core integration package. ```npm npm install @astrojs/react ``` ```pnpm pnpm add @astrojs/react ``` ```yarn yarn add @astrojs/react ``` -------------------------------- ### Define Keystatic Content Schema Source: https://docs.astro.build/en/guides/cms/keystatic Create a `keystatic.config.ts` file to define your content structure, storage type (e.g., 'local'), and collections. This example sets up a 'posts' collection. ```typescript import { config, fields, collection } from '@keystatic/core'; export default config({ storage: { kind: 'local', }, collections: { posts: collection({ label: 'Posts', slugField: 'title', path: 'src/content/posts/*', format: { contentField: 'content' }, schema: { title: fields.slug({ name: { label: 'Title' } }), content: fields.markdoc({ label: 'Content', }), }, }), }, }); ``` -------------------------------- ### Create Astro Blog Project with pnpm Source: https://docs.astro.build/en/guides/migrate-to-astro/from-eleventy This command initializes a new Astro project using the official blog starter template via pnpm. It's an alternative to npm for managing dependencies and creating new projects. ```bash pnpm create astro@latest --template blog ``` -------------------------------- ### Install Astro Adapter using astro add command Source: https://docs.astro.build/en/guides/deploy Use the `astro add` command to automatically install and configure an Astro adapter. This command handles both dependency installation and configuration updates in `astro.config.mjs`. ```bash npx astro add adapter-name ``` -------------------------------- ### Manually install @astrojs/vue and Vue Source: https://docs.astro.build/en/guides/integrations-guide/vue Manual installation steps for the integration package and its peer dependency, Vue. ```bash npm install @astrojs/vue vue ``` ```bash pnpm add @astrojs/vue vue ``` ```bash yarn add @astrojs/vue vue ``` -------------------------------- ### Middleware Chaining Console Output Example Source: https://docs.astro.build/en/guides/middleware Provides an example of the expected console output when using the `sequence` function to chain multiple middleware functions. This demonstrates the order of execution for requests and responses. ```text validation request auth request greeting request greeting response auth response validation response ``` -------------------------------- ### Install Astro Prism Package Source: https://docs.astro.build/en/guides/syntax-highlighting Provides instructions for installing the `@astrojs/prism` package, which is required to use the `` component for syntax highlighting. Installation commands are given for npm, pnpm, and Yarn. ```bash npm install @astrojs/prism ``` ```bash pnpm add @astrojs/prism ``` ```bash yarn add @astrojs/prism ``` -------------------------------- ### Display List of Posts in Astro Source: https://docs.astro.build/en/guides/cms/keystatic Use Astro's Content Collections API to fetch and display a list of posts. This example iterates through the 'posts' collection and creates links to individual post pages. ```astro --- import { getCollection } from 'astro:content' const posts = await getCollection('posts') --- ``` -------------------------------- ### Install Deno Adapter for Astro Source: https://docs.astro.build/en/guides/deploy/deno Installs the `@deno/astro-adapter` package, which is required for enabling on-demand rendering with Deno and deploying to Deno Deploy. This can be done using npm, pnpm, or Yarn. ```bash npm install @deno/astro-adapter ``` ```bash pnpm install @deno/astro-adapter ``` ```bash yarn add @deno/astro-adapter ``` -------------------------------- ### Install NightwatchJS in Astro Project Source: https://docs.astro.build/en/guides/testing Install NightwatchJS in your Astro project using your preferred package manager. This command initiates the NightwatchJS setup process within your project. ```bash npm init nightwatch@latest ``` ```bash pnpm create nightwatch ``` ```bash yarn create nightwatch ``` -------------------------------- ### Manually Install @astrojs/cloudflare Source: https://docs.astro.build/en/guides/integrations-guide/cloudflare Manual installation commands for the adapter dependency. ```bash npm install @astrojs/cloudflare ``` ```bash pnpm add @astrojs/cloudflare ``` ```bash yarn add @astrojs/cloudflare ``` -------------------------------- ### Install Juno CLI Source: https://docs.astro.build/en/guides/deploy/juno Commands to install the Juno CLI globally using various package managers. ```bash npm i -g @junobuild/cli ``` ```bash pnpm add -g @junobuild/cli ``` ```bash yarn global add @junobuild/cli ``` -------------------------------- ### Query Turso with SQL Placeholders in Astro Source: https://docs.astro.build/en/guides/backend/turso Use the `execute` method with an object containing `sql` and `args` to pass variables safely into your SQL statements. This example fetches a single post based on its slug. ```astro --- import { turso } from '../turso' const { slug } = Astro.params const { rows } = await turso.execute({ sql: 'SELECT * FROM posts WHERE slug = ?', args: [slug!] }) ---

{rows[0].title}

``` -------------------------------- ### Building a Server Entrypoint Source: https://docs.astro.build/en/reference/adapter-reference Guidance on creating server entrypoints for Astro adapters to enable on-demand rendering and host integration. ```APIDOC ## Building a Server Entrypoint You will need to create a file that executes during server-side requests to enable on-demand rendering with your particular host. Astro’s adapter API attempts to work with any type of host and gives a flexible way to conform to the host APIs. ### `createExports()` **Type:** `(manifest: SSRManifest, options: any) => Record` An exported function that takes an SSR manifest as its first argument and an object containing your adapter `args` as its second argument. This should provide the exports required by your host. **Example (basic handler export):** ```javascript import { App } from 'astro/app'; export function createExports(manifest) { const app = new App(manifest); const handler = (event, context) => { // ... }; return { handler }; } ``` **Example (using adapter args):** ```javascript import { App } from 'astro/app'; export function createExports(manifest, args) { const assetsPath = args.assets; const handler = (event, context) => { // ... }; return { handler }; } ``` ### `start()` **Type:** `(manifest: SSRManifest, options: any) => Record` An exported function that takes an SSR manifest as its first argument and an object containing your adapter `args` as its second argument. **Example:** ```javascript import { App } from 'astro/app'; export function start(manifest) { const app = new App(manifest); addEventListener('fetch', event => { // ... }); } ``` ``` -------------------------------- ### Install Prettier and Astro Plugin (npm) Source: https://docs.astro.build/en/editor-setup Installs the 'prettier' package and the 'prettier-plugin-astro' for formatting Astro files using npm. This is a development dependency. ```bash npm install --save-dev --save-exact prettier prettier-plugin-astro ``` -------------------------------- ### Start and Manage Astro Preview Server Source: https://docs.astro.build/en/reference/programmatic-reference Starts a local server to serve your build output using the `preview` function from the 'astro' package. It returns a `PreviewServer` object with methods to stop and check the server's status. Adapters may influence preview server availability. ```javascript import { preview } from "astro"; const previewServer = await preview({ root: "./my-project", }); // Stop the server if needed await previewServer.stop(); ``` -------------------------------- ### Install Astro Adapter using npm Source: https://docs.astro.build/en/guides/deploy Manually install an Astro adapter by adding it to your project dependencies using npm. This method requires manual configuration of the adapter in your `astro.config.mjs` file. ```bash npm install @astrojs/adapter-name ``` -------------------------------- ### Accessing Frontmatter and Generating URLs with getCollection() Source: https://docs.astro.build/en/tutorial/6-islands/4 This example shows how to access frontmatter data using the `data` property (instead of `frontmatter`) and how to construct post URLs using the `id` or `slug` property when using Astro content collections. ```astro --- import { getCollection } from "astro:content"; import BaseLayout from "../layouts/BaseLayout.astro"; import BlogPost from "../components/BlogPost.astro"; const pageTitle = "My Astro Learning Blog"; const allPosts = await getCollection("blog"); ---

This is where I will post about my journey learning Astro.

    { allPosts.map((post) => ( )} )) }
``` -------------------------------- ### Create Astro Project with Starlight Template (npm) Source: https://docs.astro.build/en/guides/migrate-to-astro/from-gitbook This command initializes a new Astro project using the official Starlight documentation theme starter template via npm. It's the first step in setting up an Astro site for migrating GitBook content. ```bash npm create astro@latest -- --template starlight ``` -------------------------------- ### Installing Sass Dependency in Astro Source: https://docs.astro.build/en/guides/upgrade-to/v1 Provides the command to install Sass as a development dependency. This is necessary if your Astro project utilizes Sass for styling, as it's now an optional dependency. ```bash npm install sass --save-dev ``` -------------------------------- ### Start Astro Development Server (pnpm) Source: https://docs.astro.build/en/develop-and-build Starts the Astro local development server using pnpm. This command enables live previews as you edit your code, facilitating a smooth development workflow. ```bash pnpm run dev ``` -------------------------------- ### Install Astro Project Dependencies with Bun Source: https://docs.astro.build/en/recipes/bun Install project dependencies using Bun's package manager. This command fetches and installs all the necessary packages listed in your project's `package.json` file. ```bash bun install ``` -------------------------------- ### Install Flotiq TypeScript SDK for Astro Source: https://docs.astro.build/en/guides/cms/flotiq Installs the Flotiq TypeScript SDK using npm, pnpm, or Yarn. This SDK facilitates interaction with the Flotiq API from your Astro project. ```bash npm install flotiq-api-ts ``` ```bash pnpm add flotiq-api-ts ``` ```bash yarn add flotiq-api-ts ``` -------------------------------- ### Install Supabase Client Library (Yarn) Source: https://docs.astro.build/en/guides/backend/supabase This command installs the official Supabase JavaScript client library using Yarn. This library is essential for interacting with your Supabase project from your Astro application. ```bash yarn add @supabase/supabase-js ``` -------------------------------- ### Run Astro Preview with Deno Source: https://docs.astro.build/en/guides/deploy/deno Executes the updated `preview` script to start the Astro production site locally using Deno. This command is available via npm, pnpm, or Yarn. ```bash npm run preview ``` ```bash pnpm run preview ``` ```bash yarn run preview ``` -------------------------------- ### Install Prettier and Astro Plugin (pnpm) Source: https://docs.astro.build/en/editor-setup Installs the 'prettier' package and the 'prettier-plugin-astro' for formatting Astro files using pnpm. This is a development dependency. ```bash pnpm add --save-dev --save-exact prettier prettier-plugin-astro ``` -------------------------------- ### Install Supabase Client Library (pnpm) Source: https://docs.astro.build/en/guides/backend/supabase This command installs the official Supabase JavaScript client library using pnpm. This library is essential for interacting with your Supabase project from your Astro application. ```bash pnpm add @supabase/supabase-js ``` -------------------------------- ### Initialize Azion Application Source: https://docs.astro.build/en/guides/deploy/azion Initializes and configures your project for deployment using the Azion CLI. This command sets up the necessary configurations for your application on the Azion platform. ```bash azion init ``` -------------------------------- ### Install Supabase Client Library (npm) Source: https://docs.astro.build/en/guides/backend/supabase This command installs the official Supabase JavaScript client library using npm. This library is essential for interacting with your Supabase project from your Astro application. ```bash npm install @supabase/supabase-js ``` -------------------------------- ### Manually Install @astrojs/preact Source: https://docs.astro.build/en/guides/integrations-guide/preact Steps for manually installing the integration package and its required peer dependencies. ```npm npm install @astrojs/preact npm install preact ``` ```pnpm pnpm add @astrojs/preact pnpm add preact ``` ```yarn yarn add @astrojs/preact yarn add preact ``` -------------------------------- ### Start Astro Development Server (npm, pnpm, Yarn) Source: https://docs.astro.build/en/reference/cli-reference Starts the Astro development server, providing a live preview of your site. This command is essential for the development workflow. It can be executed using npm, pnpm, or Yarn. ```bash # start the development server npx astro dev ``` ```bash # start the development server pnpm astro dev ``` ```bash # start the development server yarn astro dev ``` -------------------------------- ### Manual Install @astrojs/node Adapter (npm) Source: https://docs.astro.build/en/guides/integrations-guide/node Manually installs the @astrojs/node package using npm. This is the first step in manually adding the adapter to your Astro project. ```bash npm install @astrojs/node ``` -------------------------------- ### Install Netlify CLI using npm, pnpm, or Yarn Source: https://docs.astro.build/en/guides/deploy These commands show how to install the Netlify command-line interface (CLI) globally on your machine using different package managers. The Netlify CLI is used for deploying and managing Netlify sites from your local environment. ```npm npm install --global netlify-cli ``` ```pnpm pnpm add --global netlify-cli ``` ```yarn yarn global add netlify-cli ``` -------------------------------- ### Astro Content Collection Schema Example Source: https://docs.astro.build/en/guides/cms/cloudcannon An example of a basic Markdown frontmatter structure for a blog post, serving as a template for a CloudCannon schema. It includes placeholders for title, author, and date, which are essential for content organization and retrieval. ```markdown --- title: author: date: --- ``` -------------------------------- ### Render Blog Posts with a Layout using Astro Collections Source: https://docs.astro.build/en/tutorial/6-islands/4 This code extends the previous example by showing how to wrap the rendered blog post content within a specific layout component (`MarkdownPostLayout`). This allows for a consistent design across all blog posts generated from the collection. ```astro --- import { getCollection, render } from 'astro:content'; import MarkdownPostLayout from '../../layouts/MarkdownPostLayout.astro'; export async function getStaticPaths() { const posts = await getCollection('blog'); return posts.map(post => ({ params: { slug: post.id }, props: { post }, })); } const { post } = Astro.props; const { Content } = await render(post); --- ``` -------------------------------- ### Create Project Directory and Initialize package.json Source: https://docs.astro.build/en/install-and-setup Commands to create a new project directory and initialize a package.json file using npm, pnpm, or Yarn. This file manages project dependencies. ```bash mkdir my-astro-project cd my-astro-project ``` ```bash npm init --yes ``` ```bash pnpm init ``` ```bash yarn init --yes ``` -------------------------------- ### Install Stylus for Astro Source: https://docs.astro.build/en/guides/styling Installs the Stylus preprocessor as a project dependency using npm. This enables the use of Stylus syntax within `