### Bun Mirror Configuration

Source: https://github.com/cworld1/astro-theme-pure/blob/main/src/content/docs/setup/getting-started.mdx

Configures a mirror site for Bun to potentially speed up installations. Create a 'bunfig.toml' file in the project root directory with the specified content.

```toml
[install]
registry = "<npm mirror site>"
```

--------------------------------

### Start Astro Dev Server

Source: https://github.com/cworld1/astro-theme-pure/blob/main/src/content/docs/setup/getting-started.mdx

Starts the Astro development server to preview your project locally. Navigate to your project directory first using 'cd'. Supports multiple package managers.

```shell
bun dev
```

```shell
pnpm dev
```

```shell
yarn run dev
```

```shell
npm run dev
```

--------------------------------

### Install Astro Theme Pure via Template

Source: https://github.com/cworld1/astro-theme-pure/blob/main/src/content/docs/setup/getting-started.mdx

Installs the Astro Theme Pure using a template repository. This method is lightweight and simple. It requires a package manager like Bun, pnpm, yarn, or npm.

```shell
bun create astro@latest --template cworld1/astro-theme-pure
```

```shell
pnpm create astro@latest --template cworld1/astro-theme-pure
```

```shell
yarn create astro --template cworld1/astro-theme-pure
```

```shell
npm create astro@latest -- --template cworld1/astro-theme-pure
```

--------------------------------

### Clone Astro Theme Pure Repository

Source: https://github.com/cworld1/astro-theme-pure/blob/main/src/content/docs/setup/getting-started.mdx

Installs the Astro Theme Pure by forking the repository and cloning it locally. This method is easy to update but requires Git skills. Replace '<your-username>' with your GitHub username.

```shell
git clone https://github.com/<your-username>/astro-theme-pure.git
```

--------------------------------

### Configure Site Metadata in site.config.ts

Source: https://github.com/cworld1/astro-theme-pure/blob/main/src/content/docs/setup/getting-started.mdx

Shows how to configure essential site metadata such as author, title, site URL, and description within the `src/site.config.ts` file.

```typescript
export const theme: ThemeUserConfig = {
   author: 'CWorld',
   title: 'Astro Theme Pure',
   site: 'https://astro-pure.js.org',
   description: 'Stay hungry, stay foolish',
   // ...
}

export const integ: IntegrationUserConfig = { /* ... */ }
// ...
```

--------------------------------

### Local Development Commands

Source: https://github.com/cworld1/astro-theme-pure/blob/main/README.md

Commands for cloning the repository, installing dependencies, starting the development server, building the project, previewing the build, and creating new posts using Bun.

```shell
git clone https://github.com/cworld1/astro-theme-pure.git
cd astro-theme-pure
```

```shell
bun install
```

```shell
bun dev
```

```shell
bun run build
```

```shell
bun preview
```

```shell
bun new-post
```

--------------------------------

### Install remark-math and rehype-katex

Source: https://github.com/cworld1/astro-theme-pure/blob/main/src/content/docs/integrations/others.mdx

Installs the necessary npm packages, `remark-math` for parsing LaTeX and `rehype-katex` for rendering it, using bun package manager.

```shell
bun install remark-math rehype-katex
```

--------------------------------

### Create Step-by-Step Guides with Astro-Pure JSX

Source: https://github.com/cworld1/astro-theme-pure/blob/main/src/content/docs/integrations/components.mdx

Shows how to use the Steps component from astro-pure/user to create ordered lists or guides. Supports nested content within steps.

```jsx
import { Steps } from 'astro-pure/user'

How to Yi Jian San Lian:

<Steps>
1. Dian Zan
2. Tou Bi
3. Shou Cang
  
  Or GuanZhu sometimes.
</Steps>
```

--------------------------------

### Simple Astro Markdown Article Example

Source: https://github.com/cworld1/astro-theme-pure/blob/main/src/content/docs/setup/content.mdx

A concise example of a Markdown file for Astro content, showcasing the minimal required frontmatter fields: title, description, and publishDate. This serves as a basic template for new articles.

```markdown
---
title: Simple Article
description: Just another simple article.
publishDate: 2024-07-26
---

I like writing simple articles.

```

--------------------------------

### Install @astrojs/node with Bun

Source: https://github.com/cworld1/astro-theme-pure/blob/main/src/content/docs/setup/deployment.mdx

This command installs the Node.js adapter for Astro using the Bun package manager. This is a prerequisite for deploying your Astro site with a Node.js server.

```shell
bun add '@astrojs/node'
```

--------------------------------

### Astro Component Import Example

Source: https://github.com/cworld1/astro-theme-pure/blob/main/src/content/docs/advanced/customize.mdx

Demonstrates importing basic components from the 'astro-pure/components/basic' module in an Astro layout file.

```astro
---
import { Footer, Header, ThemeProvider } from 'astro-pure/components/basic'
import type { SiteMeta } from 'astro-pure/types'
// ...
---
```

--------------------------------

### Plain Text Example

Source: https://github.com/cworld1/astro-theme-pure/blob/main/src/content/blog/test.md

This snippet demonstrates a basic block of plain text content. It serves as a simple example of unformatted text within a documentation context.

```plaintext
test
test
```

--------------------------------

### Remove Docs Content Collection in content.config.ts

Source: https://github.com/cworld1/astro-theme-pure/blob/main/src/content/docs/setup/getting-started.mdx

Illustrates removing the 'docs' content collection definition from `src/content.config.ts`. This includes removing the `defineCollection` call and updating the `collections` export.

```typescript
const docs = defineCollection({ // [!code --]
loader: glob({ base: './src/content/docs', pattern: '**/*.{md,mdx}' }), // [!code --]
schema: ({ image }) => // [!code --]
   z.object({ // [!code --]
      ... // [!code --]
   }) // [!code --]
}) // [!code --]
export const collections = { blog, docs } // [!code --]
export const content = { blog } // [!code ++]
```

--------------------------------

### Astro Component Export Example

Source: https://github.com/cworld1/astro-theme-pure/blob/main/src/content/docs/advanced/customize.mdx

Shows how components are exported from a module index file within the theme's source code.

```ts
export { default as Footer } from './Footer.astro'
export { default as Header } from './Header.astro'
export { default as ThemeProvider } from './ThemeProvider.astro'
```

--------------------------------

### Markdown Lists

Source: https://github.com/cworld1/astro-theme-pure/blob/main/src/content/blog/markdown/index.md

Provides examples of creating both unordered (bulleted) and ordered (numbered) lists in Markdown. Supports nesting of list items.

```markdown
- 1
- 2
- 3
```

```markdown
1. GPT-4
2. Claude Opus
3. LLaMa
```

--------------------------------

### Remove Docs Menu Item in site.config.ts

Source: https://github.com/cworld1/astro-theme-pure/blob/main/src/content/docs/setup/getting-started.mdx

Demonstrates removing the 'Docs' link from the header menu configuration in `src/site.config.ts`. This involves updating the `header.menu` array to exclude the documentation entry.

```typescript
export const theme: ThemeUserConfig = {
   // ...
   /** Configure the header of your site. */
   header: {
      menu: [
         { title: 'Blog', link: '/blog' },
         { title: 'Docs', link: '/docs' }, // [!code --]
         // ...
      ],
   },
}
```

--------------------------------

### Replace Assets in src/assets

Source: https://github.com/cworld1/astro-theme-pure/blob/main/src/content/blog/customize/index.md

Replace client-rendered avatars, sponsorship QR codes, and other images stored in the src/assets directory with your own custom images.

```File Path
src/assets/
```

--------------------------------

### Astro Theme Pure CLI Commands

Source: https://github.com/cworld1/astro-theme-pure/blob/main/packages/pure/README.md

Provides command-line interface tools for managing the Astro Theme Pure blog. These commands allow users to view help, get information about the theme, and create new blog posts.

```shell
# See all commands
astro-pure help

# Get the info of astro-pure
astro-pure info

# Create a new post in the blog
astro-pure new [options]
```

--------------------------------

### Markdown Code Blocks

Source: https://github.com/cworld1/astro-theme-pure/blob/main/src/content/blog/markdown/index.md

Demonstrates how to embed larger blocks of code, often with syntax highlighting. The example uses JavaScript syntax highlighting.

```markdown
```js
// calculate fibonacci
function fibonacci(n) {
  if (n <= 1) return 1
  const result = fibonacci(n - 1) + fibonacci(n - 2) // [!code --]
  return fibonacci(n - 1) + fibonacci(n - 2) // [!code ++]
}
```
```

--------------------------------

### Astro Markdown Content Structure Example

Source: https://github.com/cworld1/astro-theme-pure/blob/main/src/content/docs/setup/content.mdx

Demonstrates the structure of a Markdown file used for content in Astro, including essential frontmatter fields like title, description, publishDate, heroImage, draft status, language, and comment settings. It also touches upon asset placement and handling.

```markdown
---
title: 'First Article' # (Required, max 60)
description: 'I like writing articles.' # (Required, 10 to 160)
publishDate: '2024-11-30 00:08:00' # (Required, Date)
tags:
  - Markdown # (Also can write format like next line)
heroImage: { src: './thumbnail.jpg', alt: 'an image targetting my article', color: '#B4C6DA' }
# thumbnail.jpg should be in the same folder as the article
draft: false # (set true will only show in development)
language: 'English' # (String as you like)
comment: true # (set false will disable comment, even if you've enabled it in site-config)
---

## This is a title

This is a paragraph.

```

--------------------------------

### Basic Astro Page Component

Source: https://github.com/cworld1/astro-theme-pure/blob/main/src/content/docs/setup/content.mdx

A fundamental example of an Astro page component using the .astro file extension. This snippet demonstrates a minimal structure that renders a complete HTML document, including head and body elements.

```astro
---
---
<html lang="en">
  <head>
    <title>My Homepage</title>
  </head>
  <body>
    <h1>Welcome to my website!</h1>
  </body>
</html>
```

--------------------------------

### Add New Tools Icons

Source: https://github.com/cworld1/astro-theme-pure/blob/main/src/content/blog/customize/index.md

To add new icons for tools, place the new icon files within the src/icons directory. It is recommended to source icons from platforms like Iconify or Icones for consistency.

```File Path
src/icons/
```

--------------------------------

### Configure Node Server Adapter in Astro

Source: https://github.com/cworld1/astro-theme-pure/blob/main/src/content/docs/setup/deployment.mdx

This snippet demonstrates how to install and configure the `@astrojs/node` adapter for deploying your Astro site with a Node.js server. It includes switching from a serverless adapter and setting the mode to 'standalone'.

```ts
import vercelServerless from '@astrojs/vercel/serverless' // [!code --]
import node from '@astrojs/node' // [!code ++]

export default defineConfig({
  //   ...
  adapter: vercelServerless(), // [!code --]
  adapter: node({ mode: 'standalone' }), // [!code ++]

  integrations: [
    outputCopier({ // [!code --]
      integ: ['sitemap', 'pagefind'] // [!code --]
    }) // [!code --]
  ]
})
```

--------------------------------

### Waline Configuration

Source: https://github.com/cworld1/astro-theme-pure/blob/main/src/content/docs/integrations/comment.mdx

Configure the Waline comment system by setting the `enable` flag and providing the `server` link. Additional configurations for features like emoji and pageview can be passed via `additionalConfigs`. This setup is done in `src/site.config.ts`.

```ts
export const integ: IntegrationUserConfig = {
  // ...
  waline: {
    enable: true,
    // Server service link
    server: 'https://astro-theme-pure-waline.arthals.ink/', // [!code highlight]
    // Refer https://waline.js.org/en/guide/features/emoji.html
    emoji: ['bmoji', 'weibo'],
    // Refer https://waline.js.org/en/reference/client/props.html
    additionalConfigs: {
      pageview: true,
      comment: true
      // ...
    }
  }
}
```

--------------------------------

### Astro Aside Component Usage (Astro)

Source: https://github.com/cworld1/astro-theme-pure/blob/main/src/content/blog/improve-concentration/index.mdx

This example shows the usage of a custom 'Aside' component within an Astro template. The component is configured with a 'type' and 'title' attribute, and it wraps content intended to be displayed in a distinct sidebar or tip section. This pattern is common for enhancing content presentation in static site generators.

```html
<Aside type='tip' title='Try this focus exercise'>
  Want a way to boost your attention and focus? Neuropsychologist Kim Willment of Harvard-affiliated
  Brigham and Women's Hospital suggests a single-task exercise like reading. "Read something for 30
  minutes, setting a timer to go off every five minutes. When it goes off, ask yourself if your mind
  has wandered. If so, just refocus on what you're reading," she says. "By training your brain to
  monitor if your mind is wandering, you strengthen the monitoring process and the ability to
  maintain focus on a single task."
</Aside>
```

--------------------------------

### Configure Tailwind CSS for Astro Theme Pure

Source: https://github.com/cworld1/astro-theme-pure/blob/main/packages/pure/README.md

Integrates astro-pure components into Tailwind CSS's content configuration to ensure proper styling. This setup requires Tailwind CSS to be installed and configured in your Astro project.

```js
// tailwind.config.mjs

/** @type {import('tailwindcss').Config} */
const config = {
  content: [
    // Add astro-pure components in the tailwindcss render config
    './node_modules/astro-pure/components/**/*.astro'
  ]
}

export default config
```

--------------------------------

### Support Web Images for heroImage

Source: https://github.com/cworld1/astro-theme-pure/blob/main/src/content/docs/advanced/faq.md

Demonstrates how to configure web images for the `heroImage` property. It requires setting `inferSize: true` to automatically fetch the image dimensions.

```yaml
heroImage:
  { src: 'https://img.tukuppt.com/ad_preview/00/15/09/5e715a320b68e.jpg!/fw/980', inferSize: true }
```

--------------------------------

### Icon Component Usage and Preview

Source: https://github.com/cworld1/astro-theme-pure/blob/main/src/content/docs/integrations/components.mdx

Demonstrates how to use the `Icon` component for single instances and provides a comprehensive preview of all available icons. Each icon can be copied to the clipboard via a click event.

```jsx
import { Icon } from 'astro-pure/user'
import { Icons as allIcons } from 'astro-pure/libs'
import { Button } from 'astro-pure/user'

Single use: <Icon name='rss' class='inline' />

Preview all icons available (click button to copy):

<div class='flex flex-wrap gap-2'>
{
  Object.keys(allIcons).map(icon => {
    const script = `navigator.clipboard.writeText('${icon}');document.dispatchEvent(new CustomEvent('toast',{detail:{message:'Copied "${icon}" to clipboard!'}}))`
    return (
      <Button as='button' type='button' class='cursor-pointer' onclick={script}>
        <Icon slot='before' name={icon} />
        <span>{icon}</span>
      </Button>
    )
  })
}
</div>
```

--------------------------------

### Use Button Component

Source: https://github.com/cworld1/astro-theme-pure/blob/main/src/content/docs/advanced/thanks.mdx

Illustrates the usage of the `Button` component from the `astro-pure/user` library to create interactive links. It shows how to specify the `href`, `target`, `title`, and `style` attributes for customization.

```astro
<Button
  href='https://cworld0.com/projects#sponsorship'
  target='_blank'
  title='Become a Sponsor'
  style='ahead'
/>
```

--------------------------------

### Update Component Dependency Import

Source: https://github.com/cworld1/astro-theme-pure/blob/main/src/content/docs/advanced/customize.mdx

Provides an example of modifying an Astro component file to correct an import path for a sub-dependency after swizzling.

```astro
---
import config from 'virtual:config'

import { Icon } from '../user' // [!code --]
import { Icon } from 'astro-pure/user' // [!code ++]
// ...
---
```

--------------------------------

### Signature Component API Documentation

Source: https://github.com/cworld1/astro-theme-pure/blob/main/preset/components/signature/index.mdx

Provides a comprehensive reference for the props available to customize the Signature component's animation behavior, including modes, delays, and view thresholds.

```APIDOC
Signature Component:
  mode: 'loop' | 'once-on-view' - Animation mode. 'loop': continuously draws and rolls back; 'once-on-view': plays the animation once it enters the viewport. (Default: 'loop')
  drawDelay: number - (Loop mode) The delay in milliseconds before drawing the next path. (Default: 200)
  rollbackDelay: number - (Loop mode) The delay in milliseconds before rolling back the previous path. (Default: 80)
  loopPause: number - (Loop mode) The pause duration in milliseconds at the end of each full cycle. (Default: 2000)
  threshold: number - (On-view mode) The visibility threshold (from 0.0 to 1.0) to trigger the animation. (Default: 1.0)
  defaultDuration: number - The default animation duration in milliseconds for each stroke. (Default: 600)
  class: string - Additional CSS classes to be added to the component's root element. (Default: undefined)
```

--------------------------------

### Replace Social Card Image

Source: https://github.com/cworld1/astro-theme-pure/blob/main/src/content/blog/customize/index.md

Replace the default social card image used for sharing links. The image is located at public/images/social-card.png.

```File Path
public/images/social-card.png
```

--------------------------------

### Markdown To-Do Lists

Source: https://github.com/cworld1/astro-theme-pure/blob/main/src/content/blog/markdown/index.md

Demonstrates how to create task lists with checkboxes in Markdown, indicating incomplete or completed items.

```markdown
- [ ] Incomplete task
- [x] Completed task
```

--------------------------------

### Markdown Line Breaks and Paragraphs

Source: https://github.com/cworld1/astro-theme-pure/blob/main/src/content/blog/markdown/index.md

Explains how Markdown handles line breaks and paragraph separation. A blank line is required to start a new paragraph.

```markdown
If you don't leave a blank line
it will be in one paragraph

First paragraph

Second paragraph
```

--------------------------------

### Copy Component Source Code

Source: https://github.com/cworld1/astro-theme-pure/blob/main/src/content/docs/advanced/customize.mdx

Illustrates the command-line operation to copy a component file from the theme's node_modules directory to a custom location in the project.

```bash
cp node_modules/astro-theme-pure/components/basic/Footer.astro src/components/custom/Footer.astro
```

--------------------------------

### Replace Favicon

Source: https://github.com/cworld1/astro-theme-pure/blob/main/src/content/blog/customize/index.md

Update the site's favicon by replacing the files in the public/favicon directory. It is recommended to use a favicon converter tool for generating the necessary formats.

```File Path
public/favicon/
```

--------------------------------

### Markdown Page with Astro Layout

Source: https://github.com/cworld1/astro-theme-pure/blob/main/src/content/docs/setup/content.mdx

Demonstrates how Markdown files (.md) placed in the src/pages/ directory can be treated as pages. It highlights the use of frontmatter properties like 'layout', 'title', and 'description' to apply an Astro layout and define page metadata.

```markdown
---
layout: '@/layouts/IndividualPage.astro'

title: 'Privacy Policy'
description: 'Effective date: 2024-11-26'
language: 'En' # optional
back: '/terms/list' # optional, default to '/'
heroImage: { src: './thumbnail.jpg' } # will used to social-image
---

## Privacy Policy 1

This is the first section of the privacy policy.
```

--------------------------------

### Include KaTeX CSS in Astro Layout

Source: https://github.com/cworld1/astro-theme-pure/blob/main/src/content/docs/integrations/others.mdx

Includes the KaTeX CSS file directly from the installed npm package into an Astro layout file (`BlogPost.astro`) to ensure proper styling of LaTeX formulas.

```astro
---
import 'katex/dist/katex.min.css'
---
```

--------------------------------

### Use medium-zoom in MDX files

Source: https://github.com/cworld1/astro-theme-pure/blob/main/src/content/docs/integrations/others.mdx

Illustrates how to integrate the MediumZoom component within MDX files. The example shows how images with the '.zoomable' class (automatically added by a remark plugin) can be made zoomable.

```tsx
import { MediumZoom } from 'astro-pure/advanced'

// .zoomable class will automatically added using remark plugin
![](path/to/image.jpg)

<MediumZoom />

// Or with configs
<MediumZoom
  selector=".prose .zoomable"
  background="rgba(0, 0, 0, 0.7)"
 />
```

--------------------------------

### Vite Blocked Host Request

Source: https://github.com/cworld1/astro-theme-pure/blob/main/src/content/docs/advanced/faq.md

Provides guidance on resolving blocked host requests in Vite. It explains that the host needs to be added to the `preview.allowedHosts` array within the `vite.config.js` file.

```log
Blocked request. This host ("xxx")is not allowed.
To allow this host, add "xxx" to `preview.allowedHosts` in vite.config.js.
```

--------------------------------

### Use GithubCard Component

Source: https://github.com/cworld1/astro-theme-pure/blob/main/src/content/docs/advanced/thanks.mdx

Demonstrates how to embed a GitHub repository card using the `GithubCard` component from the `astro-pure/advanced` library. This component typically fetches and displays repository information.

```astro
<GithubCard repo='cworld1/astro-theme-pure' />
```

--------------------------------

### Recommended CSS for KaTeX Display

Source: https://github.com/cworld1/astro-theme-pure/blob/main/src/content/docs/integrations/others.mdx

Provides recommended CSS rules to improve the display and handling of LaTeX formulas, particularly for block-level math, in the `public/styles/global.css` file.

```css
span.katex-display {
  overflow-y: scroll;
  padding: 0.5rem;
}
.katex-html {
  overflow: auto hidden;
  padding: 3px;
}
.katex-html .base {
  margin-block: 0;
  margin-inline: auto;
}
.katex-html .tag {
  position: relative !important;
  display: inline-block;
  padding-inline-start: 0.5rem;
}
```

--------------------------------

### Astro Page Using Layout Component

Source: https://github.com/cworld1/astro-theme-pure/blob/main/src/content/docs/setup/content.mdx

Shows how to import and utilize a layout component, such as BaseLayout.astro, within a page component (mypage.astro). This allows for shared structure and styling across multiple pages, enhancing maintainability.

```astro
---
import PageLayout from '@/layouts/BaseLayout.astro' // [!code highlight]

const meta = {
  title: 'My Page',
  description: 'My fav page',
}
const highlightColor = '#44AEF6' // Optional
---
<PageLayout {meta} {highlightColor}> <!-- [!code highlight] -->
  <p>My page content, wrapped in a layout!</p>
</MySiteLayout> <!-- [!code highlight] -->
```

--------------------------------

### Using Tabs Component in Astro/MDX

Source: https://github.com/cworld1/astro-theme-pure/blob/main/src/content/docs/integrations/components.mdx

The Tabs component allows for organizing content into switchable tabs, each defined by a TabItem. This is useful for presenting related information or code examples in a clean, organized manner. Both components are imported from 'astro-pure/user'.

```jsx
import { Tabs, TabItem } from 'astro-pure/user';

<Tabs>
  <TabItem label="Stars">Sirius, Vega, Betelgeuse</TabItem>
  <TabItem label="Moons">Io, Europa, Ganymede</TabItem>
</Tabs>
```

--------------------------------

### Configure Vercel Static Adapter in Astro

Source: https://github.com/cworld1/astro-theme-pure/blob/main/src/content/docs/setup/deployment.mdx

This snippet shows how to switch from the Vercel serverless adapter to the Vercel static adapter in your Astro configuration file. It's used for deploying static sites to Vercel.

```ts
import vercelServerless from '@astrojs/vercel/serverless' // [!code --]
import vercelStatic from '@astrojs/vercel/static'; // [!code ++]

export default defineConfig({
  //   ...
  adapter: vercelServerless() // [!code --]
  adapter: vercelStatic(), // [!code ++]
})
```

--------------------------------

### Add Social Media Icon in TypeScript

Source: https://github.com/cworld1/astro-theme-pure/blob/main/src/content/blog/customize/index.md

Modify src/types.ts to add a new social media link. This involves updating the SocialLink enum and the SocialMediaIconId mapping to include the new social media type and its corresponding icon.

```TypeScript
enum SocialLink {
  // Existing links...
  newSocialMedia = 'new-social-media-key'
}

type SocialMediaIconId = {
  // Existing mappings...
  [SocialLink.newSocialMedia]: 'icon-id-for-new-social-media'
}
```

--------------------------------

### Hello Log File

Source: https://github.com/cworld1/astro-theme-pure/blob/main/src/content/blog/test.md

This snippet represents content from a log file, indicated by the 'log' language specifier. It includes sample log entries and is associated with a filename 'hello.log'.

```log
test
test
```

--------------------------------

### Add Social Media Icon in SVG

Source: https://github.com/cworld1/astro-theme-pure/blob/main/src/content/blog/customize/index.md

Add a new social media icon to the public/icons/social.svg file. Follow the existing format, defining the new icon as a symbol with a unique ID that matches the key used in src/types.ts.

```SVG
<svg>
  <defs>
    <!-- Existing icons -->
    <symbol id="icon-id-for-new-social-media" viewBox="0 0 24 24">
      <!-- SVG path data for the new icon -->
      <path d="..." />
    </symbol>
  </defs>
</svg>
```

--------------------------------

### Basic Code Display in Astro

Source: https://github.com/cworld1/astro-theme-pure/blob/main/src/content/docs/integrations/code.mdx

Shows how to render code blocks using the `Code` component in Astro. This includes examples for embedding code directly within `.astro` files and for displaying code within markdown files (`.mdx`, `.md`).

```astro
---
import { Code } from 'astro:components'
---

<Code lang='shell' code={`git log --oneline`} />
```

```markdown
```shell
git log --oneline
```
```

--------------------------------

### Configure CDN Links

Source: https://github.com/cworld1/astro-theme-pure/blob/main/src/content/docs/advanced/optimize.mdx

Configure CDN links in your site configuration file to improve site performance by serving libraries from a Content Delivery Network.

```ts
export const theme: ThemeUserConfig = {
  // ...
  npmCDN: 'https://cdn.jsdelivr.net/npm',
  // Recommend:
  // - https://cdn.jsdelivr.net/npm
  // - https://cdn.smartcis.cn/npm
  // - https://unkpg.com
  // - https://cdn.cbd.int
}
```

--------------------------------

### Configure Astro for LaTeX Support

Source: https://github.com/cworld1/astro-theme-pure/blob/main/src/content/docs/integrations/others.mdx

Configures the Astro build process to use `remark-math` and `rehype-katex` plugins within the markdown configuration section of `astro.config.mjs`.

```js
import { defineConfig } from 'astro/config';
import remarkMath from 'remark-math';
import rehypeKatex from 'rehype-katex';

export default defineConfig({
   // ...
   markdown: {
      remarkPlugins: [remarkMath],
      rehypePlugins: [rehypeKatex],
   },
});
```

--------------------------------

### Signature Component Usage

Source: https://github.com/cworld1/astro-theme-pure/blob/main/preset/components/signature/index.mdx

Demonstrates how to import and use the Signature component within an Astro/JSX environment. It shows the basic structure for rendering the component.

```jsx
import Signature from '<place_file_path>'

<Signature />
```

--------------------------------

### Markdown Blockquotes

Source: https://github.com/cworld1/astro-theme-pure/blob/main/src/content/blog/markdown/index.md

Demonstrates how to format blockquotes, typically used for quoting external text or highlighting specific passages. Supports nesting.

```markdown
> Gunshot, thunder, sword rise. A scene of flowers and blood.
```

--------------------------------

### Markdown Headers

Source: https://github.com/cworld1/astro-theme-pure/blob/main/src/content/blog/markdown/index.md

Demonstrates the use of different header levels in Markdown for structuring content. Headers are essential for organizing extensive articles.

```markdown
# Header 1

## Header 2

## Large Header

### Small Header
```

--------------------------------

### Import Statements

Source: https://github.com/cworld1/astro-theme-pure/blob/main/src/content/docs/advanced/thanks.mdx

Shows the import statements for custom components used within the Astro theme. It specifies the source modules for `GithubCard` and `Button`.

```javascript
import { GithubCard } from 'astro-pure/advanced'
import { Button } from 'astro-pure/user'
```

--------------------------------

### Configure Friend-Circle-Lite in config.yaml (YAML)

Source: https://github.com/cworld1/astro-theme-pure/blob/main/src/content/docs/integrations/links.mdx

This YAML snippet demonstrates how to configure the Friend-Circle-Lite project. Key settings include enabling the spider, specifying the JSON URL for friend data, and setting the article count for display.

```yaml
spider_settings:
   enable: true
   json_url: "<your-site>/links.json" # [!code highlight]
   article_count: 4
```

--------------------------------

### Markdown Tables

Source: https://github.com/cworld1/astro-theme-pure/blob/main/src/content/blog/markdown/index.md

Shows the syntax for creating tables in Markdown, including headers and rows with aligned content.

```markdown
| Header1  | Header2  |
| -------- | -------- |
| Content1 | Content2 |
```

--------------------------------

### Astro Static Route Mapping

Source: https://github.com/cworld1/astro-theme-pure/blob/main/src/content/docs/setup/content.mdx

Illustrates how files and directories within the src/pages/ directory in an Astro project automatically map to specific website routes. This file-based routing eliminates the need for separate routing configuration.

```text
# Example: Static routes
src/pages/index.astro        -> mysite.com/
src/pages/about.astro        -> mysite.com/about
src/pages/about/index.astro  -> mysite.com/about
src/pages/about/me.astro     -> mysite.com/about/me
src/pages/posts/1.md         -> mysite.com/posts/1
```

--------------------------------

### Markdown Bold and Italics

Source: https://github.com/cworld1/astro-theme-pure/blob/main/src/content/blog/markdown/index.md

Shows how to apply emphasis to text using Markdown. Supports italic, bold, and combined bold-italic formatting.

```markdown
_Italic text_ and **Bold text**, together will be **_Bold Italic text_**
```

--------------------------------

### Configure Static Output in Astro

Source: https://github.com/cworld1/astro-theme-pure/blob/main/src/content/docs/setup/deployment.mdx

This snippet shows how to configure your Astro project for static site generation by removing any server adapter configuration and setting the output mode. This is for deploying a purely static site.

```ts
import vercelServerless from '@astrojs/vercel/serverless' // [!code --]

export default defineConfig({
  //   ...
  adapter: vercelServerless(), // [!code --]
  output: 'server', // [!code --]
})
```