### Initialize SvelteKit Project with Statue

Source: https://github.com/accretional/statue/blob/main/content/docs/templates.md

Demonstrates the full setup process for a new Statue site, starting with SvelteKit initialization, installing Statue, and then initializing with a specific template. It includes installing dependencies and starting the development server.

```bash
# Create SvelteKit project
npx sv create . --template minimal --types ts --no-add-ons --install npm

# Install Statue
npm install statue-ssg

# Initialize with chosen template
npx statue init --template blog

# Install dependencies and start
npm install
npm run dev
```

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

### Example Startup/SaaS Site Configuration

Source: https://github.com/accretional/statue/blob/main/content/docs/site-config.md

Provides a complete example of a `siteConfig` object for a startup or SaaS application, including site information, contact details, and social media links. This serves as a template for initial setup.

```javascript
export const siteConfig = {
  site: {
    name: "YourApp",
    description: "The best app for X",
    url: "https://yourapp.com",
    author: "YourApp Team"
  },
  contact: {
    email: "hello@yourapp.com",
    supportEmail: "support@yourapp.com"
  },
  social: {
    twitter: "https://twitter.com/yourapp",
    github: "https://github.com/yourorg"
  }
};

```

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

### Custom Route Example

Source: https://github.com/accretional/statue/blob/main/content/docs/routing.md

Shows standard SvelteKit routing for manually defined pages using '.svelte' files in the 'src/routes/' directory.

```svelte
src/routes/pricing/+page.svelte    →  /pricing
src/routes/contact/+page.svelte    →  /contact
```

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

### Content Route to URL Mapping Example

Source: https://github.com/accretional/statue/blob/main/content/docs/routing.md

Demonstrates how the file structure within the 'content/' directory maps directly to URL paths for automatically generated pages.

```markdown
content/blog/my-post.md    →  /blog/my-post
content/docs/guide.md      →  /docs/guide
content/about.md           →  /about
```

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

### Preview Local Site with npm

Source: https://github.com/accretional/statue/blob/main/AGENTS.md

This command starts a local development server to preview your static site. It's crucial for verifying that all pages load correctly, navigation functions as expected, images display properly, and there are no console errors before deployment.

```bash
npm run preview
```

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

### Initialize Statue Site with npm

Source: https://github.com/accretional/statue/blob/main/README.md

This command initializes a new Statue static site project using npm. It leverages `npx sv create` to scaffold the project with a minimal template, TypeScript types, and no additional add-ons. The command then navigates into the project directory, installs the `statue-ssg` package, initializes the Statue project, installs dependencies, and starts the development server.

```bash
yes | npx sv create statue-site --template minimal --types ts --no-add-ons --install npm && cd statue-site && npm install statue-ssg && npx statue init && npm install && npm run dev
```

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

### Configure Site and SEO Settings

Source: https://github.com/accretional/statue/blob/main/AGENTS.md

Example configuration for `site.config.js` showing essential site details like name, URL, author, and SEO parameters. These settings control site-wide information and metadata.

```javascript
site: {
  name: "Your Site Name",
  description: "Your site description",
  url: "https://yoursite.com",
  author: "Your Name"
},
seo: {
  defaultTitle: "Your Site Title",
  titleTemplate: "%s | Your Site",
  defaultDescription: "Your site description",
  keywords: ["keyword1", "keyword2"],
  ogImage: "/assets/your-image.jpg",
  twitterCard: "summary_large_image"
}
```

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

### Start Development Server

Source: https://github.com/accretional/statue/blob/main/content/docs/themes.md

After making changes to your theme files or CSS, you can test them by starting the development server. Run the `npm run dev` command in your project's terminal. Visit your site in the browser to see the applied theme changes.

```bash
npm run dev
```

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

### Statue: Initialize Project with Template

Source: https://github.com/accretional/statue/blob/main/content/docs/get-started.md

Initializes a new Statue project using a specified template. The default template is used if no argument is provided. This command sets up the initial project structure and necessary files.

```bash
npx statue init --template blog
npx statue init
```

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

### Initialize Default Statue Template

Source: https://github.com/accretional/statue/blob/main/content/docs/templates.md

Initializes a new Statue project with the default template, providing a full-featured starting point for general-purpose, marketing, or documentation sites. This command copies the necessary route files, example content, and site configuration into your project.

```bash
npx statue init
```

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

### Initialize Statue Site with pnpm

Source: https://github.com/accretional/statue/blob/main/README.md

This command initializes a new Statue static site project using pnpm. It employs `npx sv create` to generate the project with a minimal template, TypeScript, and no add-ons, setting pnpm as the package manager. Subsequently, it navigates into the project directory, adds `statue-ssg` via pnpm, initializes the Statue project, installs all dependencies using pnpm, and starts the development server with pnpm.

```bash
yes | npx sv create statue-site --template minimal --types ts --no-add-ons --install pnpm && cd statue-site && pnpm add statue-ssg && npx statue init && pnpm install && pnpm run dev
```

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

### Example Markdown Content

Source: https://github.com/accretional/statue/blob/main/ADDING_TEMPLATES.md

This markdown file demonstrates how to structure example content for a blog post within a template. It includes frontmatter for metadata such as title, description, and date, followed by markdown content. This serves as a practical example for users of the template.

```markdown
---
title: Example Blog Post
description: This is an example post for your template
date: 2024-01-01
---

# Welcome to Your Template

This is example content that shows users how the template works.

Add more example content to demonstrate features.

```

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

### Initialize Statue Site with Yarn

Source: https://github.com/accretional/statue/blob/main/README.md

This command initializes a new Statue static site project using Yarn. It utilizes `npx sv create` to scaffold the project with a minimal template, TypeScript, and no add-ons, specifying Yarn as the package manager. The process then changes the directory, adds `statue-ssg` using Yarn, initializes the Statue project, installs all necessary dependencies with Yarn, and starts the development server using Yarn.

```bash
yes | npx sv create statue-site --template minimal --types ts --no-add-ons --install yarn && cd statue-site && yarn add statue-ssg && npx statue init && yarn install && yarn run dev
```

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

### Example Content Structure (File Tree)

Source: https://github.com/accretional/statue/blob/main/content/docs/new-site-checklist.md

Illustrates a typical directory structure for organizing content within a Statue project. It shows examples of markdown files for blog posts, documentation, and projects, located under the `content/` directory.

```filetree
content/
├── blog/my-first-post.md
├── docs/guide.md
└── projects/project-one.md
```

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

### Initialize Statue Project

Source: https://context7.com/accretional/statue/llms.txt

Initializes a new Statue project using the command-line interface. It can set up a project with default or specific templates and can be combined with other commands for a complete setup.

```bash
npx statue init

npx statue init --template blog

# Complete one-line setup (npm)
yes | npx sv create my-site --template minimal --types ts --no-add-ons --install npm \
  && cd my-site \
  && npm install statue-ssg \
  && npx statue init \
  && npm install \
  && npm run dev
```

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

### Statue: Site Configuration Example

Source: https://github.com/accretional/statue/blob/main/content/docs/get-started.md

Defines site-wide settings for a Statue project. This JavaScript object includes information such as the site's name, URL, contact email, and social media handles.

```javascript
export const siteConfig = {
  site: { name: "Your Site", url: "https://yoursite.com" },
  contact: { email: "hello@yoursite.com" },
  social: { twitter: "https://twitter.com/yourhandle" }
};
```

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

### Provide Meaningful Example Content for Statue Templates

Source: https://github.com/accretional/statue/blob/main/ADDING_TEMPLATES.md

Contrasts good and bad examples of content for Statue templates, emphasizing the importance of providing realistic and informative example content. Good content helps users understand how to use the template effectively.

```markdown
<!-- ✅ Good -->
# Getting Started with Web Development
Learn the fundamentals of building modern websites...

<!-- ❌ Bad -->
# Test Post
Lorem ipsum dolor sit amet...
```

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

### Testing Package Build Script

Source: https://github.com/accretional/statue/blob/main/CONTRIBUTING.md

The command to execute the release testing script, which automates the process of packing the library, creating a new SvelteKit project, installing the package, and verifying the build.

```bash
# Build and test the package
./scripts/test-release.sh
```

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

### Implement Responsive Design with CSS Grid in Statue Templates

Source: https://github.com/accretional/statue/blob/main/ADDING_TEMPLATES.md

Shows an example of creating a responsive layout using CSS Grid classes in a Svelte component for Statue templates. The example demonstrates how to adjust the number of columns based on screen size (mobile, tablet, desktop).

```svelte
<!-- ✅ Good -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">

<!-- ❌ Bad -->
<div style="width: 1200px;">
```

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

### Common npm Development Scripts

Source: https://github.com/accretional/statue/blob/main/CONTRIBUTING.md

A collection of frequently used npm scripts for development, including starting the dev server, building for production, previewing the build, and packaging the project.

```bash
# Start development server
npm run dev

# Build for production
npm run build

# Preview production build
npm run preview

# Package for npm (creates .tgz file)
npm pack

# Run release tests
./scripts/test-release.sh
```

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

### Run Release Test Script (Bash)

Source: https://github.com/accretional/statue/blob/main/DEVELOPMENT.md

Executes a shell script to perform release testing. This script packs the library, sets up a temporary environment, creates SvelteKit apps, and installs Statue to verify build integrity.

```bash
./scripts/test-release.sh
```

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

### JavaScript Code Style Examples

Source: https://github.com/accretional/statue/blob/main/CONTRIBUTING.md

Illustrates recommended JavaScript coding practices, including descriptive variable names, preference for 'const', use of arrow functions for callbacks, and JSDoc comments for functions.

```javascript
// Use descriptive variable names
const contentEntries = scanContentDirectory();

// Prefer const over let
const directories = getContentDirectories();

// Use arrow functions for callbacks
items.map(item => item.title);

// Add JSDoc comments for exported functions
/**
 * Processes template variables in markdown content
 * @param {string} content - The markdown content
 * @returns {string} - Processed content with variables replaced
 */
export function processTemplateVariables(content) {
  // ...
}
```

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

### Statue Blog Post Structure Example (JavaScript)

Source: https://github.com/accretional/statue/blob/main/content/blog/drag-drop-publish.md

Illustrates a JavaScript code snippet for logging a message to the console, as would be written within a Statue blog post's Markdown content. This example highlights the use of backticks for inline code and triple backticks for code blocks.

```javascript
console.log("Hello, blog readers!");
```

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

### List Available Templates (Bash)

Source: https://github.com/accretional/statue/blob/main/DEVELOPMENT.md

Lists all available templates for the Statue SSG. This command helps users identify which templates can be loaded for development.

```bash
npm run template:list
```

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

### Setting Environment Variables for Development

Source: https://github.com/accretional/statue/blob/main/content/docs/site-config.md

Provides an example of how to set the `VITE_SITEURL` environment variable when running a development server using npm. This allows for environment-specific configuration during the development phase.

```bash
VITE_SITEURL=https://staging.yoursite.com npm run dev

```

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

### SubDirectories Component Example (Svelte)

Source: https://github.com/accretional/statue/blob/main/content/docs/components.md

Shows the usage of the SubDirectories component, which displays a grid of subdirectory cards. It accepts an array of subdirectory objects, each with a title and URL.

```svelte
<script>
  import { SubDirectories } from 'statue-ssg';

  const subdirs = [
    { title: 'Tutorials', url: '/docs/tutorials' }
  ];
</script>

<SubDirectories subDirectories={subdirs} />
```

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

### DirectoryHeader Component Example (Svelte)

Source: https://github.com/accretional/statue/blob/main/content/docs/components.md

Demonstrates the DirectoryHeader component, used for the header of directory listing pages. It requires a 'title' prop to display the name of the directory.

```svelte
<script>
  import { DirectoryHeader } from 'statue-ssg';
</script>

<DirectoryHeader title="Blog Posts" />
```

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

### Footer Component Example (Svelte)

Source: https://github.com/accretional/statue/blob/main/content/docs/components.md

Illustrates the implementation of the Footer component, which includes a sitemap and social links. It is configurable with directory data, current path, copyright text, legal links, and social links.

```svelte
<script>
  import { Footer } from 'statue-ssg';

  const directories = [
    { name: 'docs', title: 'Docs', url: '/docs' }
  ];
</script>

<Footer
  {directories}
  currentPath="/docs"
  copyrightText="© 2025 Your Site"
/>
```

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

### Build Project Locally

Source: https://github.com/accretional/statue/blob/main/VALIDATION_GUIDE.md

Command to compile and build the project for deployment. This step is essential for testing the final output and ensuring all components function correctly.

```bash
# Run build
npm run build
```

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

### URL Structure from Content Folder

Source: https://github.com/accretional/statue/blob/main/content/docs/routing.md

Illustrates how the nested folder structure within the 'content/' directory directly translates into the URL paths for content pages.

```markdown
content/blog/hello.md               →  /blog/hello
content/docs/guides/intro.md        →  /docs/guides/intro
content/projects/2024/project.md    →  /projects/2024/project
```

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

### NavigationBar Component Example (Svelte)

Source: https://github.com/accretional/statue/blob/main/content/docs/components.md

Shows the implementation of the NavigationBar component, which displays top navigation with a logo, links, and a mobile menu. It accepts an array of navigation items and the current active path for highlighting.

```svelte
<script>
  import { NavigationBar } from 'statue-ssg';

  const navbarItems = [
    { name: 'blog', title: 'Blog', url: '/blog' },
    { name: 'docs', title: 'Docs', url: '/docs' }
  ];
</script>

<NavigationBar navbarItems={navbarItems} activePath="/blog" />
```

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

### Add Component to User Documentation

Source: https://github.com/accretional/statue/blob/main/ADDING_COMPONENTS.md

Illustrates how to add a new component's documentation to the user-facing documentation file (`content/docs/components.md`). It includes a brief description and a simple Svelte code example for usage.

```markdown
### YourComponent

Description.

```svelte
<script>
  import { YourComponent } from 'statue-ssg';
</script>

<YourComponent title="Hello" />
```

**Props:**
- `title` (string, required) - The title
```

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

### Importing Custom Svelte Components

Source: https://github.com/accretional/statue/blob/main/AGENTS.md

Shows how to import custom Svelte components from the `src/lib/components/` directory into your Svelte pages or layouts using the `$lib` alias.

```svelte
import ComponentName from '$lib/components/ComponentName.svelte';
```

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

### LatestContent Component Example (Svelte)

Source: https://github.com/accretional/statue/blob/main/content/docs/components.md

Shows the usage of the LatestContent component for displaying recent content items as cards. It accepts an array of content objects, each with a URL and metadata including title, description, and date.

```svelte
<script>
  import { LatestContent } from 'statue-ssg';

  const content = [
    {
      url: '/blog/my-post',
      metadata: {
        title: 'My Post',
        description: 'Post description',
        date: '2025-01-15'
      }
    }
  ];
</script>

<LatestContent rootContent={content} />
```

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

### Hero Component Example (Svelte)

Source: https://github.com/accretional/statue/blob/main/content/docs/components.md

Illustrates the basic usage of the Hero component, which is intended for landing page hero sections. This component has no configurable props and its content is built-in, requiring a fork for customization.

```svelte
<script>
  import { Hero } from 'statue-ssg';
</script>

<Hero />
```

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

### Statue: Markdown Content Example

Source: https://github.com/accretional/statue/blob/main/content/docs/get-started.md

Illustrates the structure of a Markdown content file used by Statue. It includes frontmatter for metadata (like title) and standard Markdown for the page body.

```markdown
---
    title: My Blog Post
---

# Hello World
This is my first post!
```

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

### Build and Preview Static Site

Source: https://context7.com/accretional/statue/llms.txt

Provides command-line instructions for building the static site using `npm run build`, previewing the production build locally with `npm run preview`, and notes that build artifacts are placed in the `build/` directory. It also mentions automatic generation of sitemap and search index.

```bash
# Build the site
npm run build

# Build artifacts are in the build/ directory
# The postbuild script automatically:
# 1. Generates sitemap.xml and robots.txt
# 2. Runs Pagefind to create search index

# Preview production build locally
npm run preview

# Deploy to various platforms:
# - Netlify: Deploy build/ directory
# - Vercel: Deploy build/ directory
# - Cloudflare Pages: Deploy build/ directory
# - GitHub Pages: Deploy build/ directory
```

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

### Initialize Blog Template for Statue

Source: https://github.com/accretional/statue/blob/main/content/docs/templates.md

Initializes a new Statue project specifically with the blog template, offering a streamlined structure focused on content creation. This is ideal for personal blogs or content-heavy websites. The command applies a minimal homepage and a dedicated blog directory with example posts.

```bash
npx statue init --template blog
```

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

### Restore Default Template (Git)

Source: https://github.com/accretional/statue/blob/main/DEVELOPMENT.md

Restores the default template by checking out the relevant files from Git. This is necessary after working on a custom template to revert to the default setup.

```git
git checkout src/routes content site.config.js
```

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

### Statue: Theme Styling Import

Source: https://github.com/accretional/statue/blob/main/content/docs/get-started.md

Imports a CSS theme file for styling the Statue website. This line in `src/lib/index.css` determines the overall look and feel of the site. Multiple themes are available.

```css
@import "statue-ssg/themes/blue.css";
```

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

### Initialize Statue Site with Bun

Source: https://github.com/accretional/statue/blob/main/README.md

This command initializes a new Statue static site project using Bun. It uses `npx sv create` for project scaffolding with a minimal template, TypeScript, and no add-ons, specifying Bun as the package manager. After creation, it changes the directory, adds `statue-ssg` using Bun, initializes the Statue project, installs dependencies with Bun, and runs the development server with Bun.

```bash
yes | npx sv create statue-site --template minimal --types ts --no-add-ons --install bun && cd statue-site && bun add statue-ssg && npx statue init && bun install && bun run dev
```

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

### Build and Preview Locally (Bash)

Source: https://github.com/accretional/statue/blob/main/content/docs/new-site-checklist.md

Commands to build the Statue project for production and then preview the built site locally. This is crucial for testing the website's appearance, functionality, and links before deployment.

```bash
npm run build
npm run preview
```

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

### Statue: Svelte Component Usage

Source: https://github.com/accretional/statue/blob/main/content/docs/get-started.md

Demonstrates how to incorporate pre-built or custom Svelte components within a Statue page. Components like Hero, Stats, and Categories help construct dynamic page layouts.

```svelte
<Hero />
<Stats />
<Categories {directories} />
```

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

### Export Component in src/lib/index.ts (TypeScript)

Source: https://github.com/accretional/statue/blob/main/VALIDATION_GUIDE.md

This code shows how to correctly export a Svelte component from the `src/lib/index.ts` file. It includes an example of adding a new component export while maintaining alphabetical order with existing exports.

```typescript
export { default as YourComponent } from './components/YourComponent.svelte';

```

```typescript
// Export all components
export { default as Hero } from './components/Hero.svelte';
export { default as Stats } from './components/Stats.svelte';
export { default as YourComponent } from './components/YourComponent.svelte'; // Add yours here

```

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

### Example Custom Svelte Component Structure

Source: https://github.com/accretional/statue/blob/main/AGENTS.md

Demonstrates a flexible Svelte component structure with exportable props for customization, CSS custom properties for theming, slot usage, and inline SVG for graphics. Follows Svelte 4 syntax.

```svelte
<script>
  // Export all configurable props with defaults
  export let backgroundColor = 'var(--theme-bg)';
  export let textColor = 'var(--theme-text)';
  export let padding = '2rem';
  export let showIcon = true;
  // ... more props
</script>

<div style="background-color: {backgroundColor}; color: {textColor}; padding: {padding};">
  {#if showIcon}
    <svg><!-- inline SVG --></svg>
  {/if}
  <slot />
</div>

<style>
  /* Component-scoped styles using theme variables */
</style>
```

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

### Deploy to Cloudflare Pages (Bash)

Source: https://github.com/accretional/statue/blob/main/content/docs/new-site-checklist.md

Command to build the Statue project and deploy the generated static files to Cloudflare Pages. Requires the Wrangler CLI and specifies the project name for deployment.

```bash
npm run build
npx wrangler pages deploy build --project-name=your-project
```

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

### Document Component in COMPONENTS_README.md (Markdown)

Source: https://github.com/accretional/statue/blob/main/VALIDATION_GUIDE.md

This markdown snippet provides a template for documenting a Svelte component in the `COMPONENTS_README.md` file. It includes sections for a brief description, an import and usage example, and a detailed list of props with their types and required status.

```markdown
### YourComponent

Brief description of what this component does.

```svelte
<script>
  import { YourComponent } from 'statue-ssg';
</script>

<YourComponent
  title="Example"
  description="Example description"
/>
```

**Props:**
- `title` (string, required) - The title text
- `description` (string, optional) - Optional description text

```

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

### Create Fully Custom Homepage (Svelte)

Source: https://github.com/accretional/statue/blob/main/AGENTS.md

Provides an example of a fully custom homepage (`src/routes/+page.svelte`) without using any default `statue-ssg` components. This approach is suitable for unique designs like portfolios or landing pages and includes custom navigation and styling within the component.

```svelte
<script>
  import siteConfig from '../../site.config.js';
  export let data;
</script>

<svelte:head>
  <title>{siteConfig.seo.defaultTitle}</title>
  <meta name="description" content={siteConfig.seo.defaultDescription} />
</svelte:head>

<div class="page-container">
  <!-- Add custom navigation if not in layout -->
  <nav class="nav-bar">
    <div class="nav-content">
      <a href="/" class="nav-logo">{siteConfig.site.name}</a>
      <div class="nav-links">
        <a href="/" class="nav-link active">Home</a>
        <a href="/about" class="nav-link">About</a>
      </div>
    </div>
  </nav>

  <section class="hero">
    <!-- Your hero content -->
  </section>

  <section class="main-content">
    <!-- Your content sections -->
  </section>
</div>

<style>
  /* Your custom styles */
</style>
```

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

### Example CSS Variables for Theme Customization

Source: https://github.com/accretional/statue/blob/main/src/lib/themes/README.md

This CSS code block provides a template for defining theme colors using CSS variables. It covers base palette, brand colors, text contrast colors, and gradient colors, serving as a guide for creating new themes or modifying existing ones.

```css
/* Yellow Theme */
@theme {
  --color-background: #1a1600;
  --color-card: #2a2400;
  --color-border: #4a4200;
  --color-foreground: #fffef0;
  --color-muted: #fde047;

  --color-primary: #facc15;
  --color-secondary: #fde047;
  --color-accent: #eab308;

  --color-on-primary: #000000;
  --color-on-background: #2a2400;

  --color-hero-from: #1a1600;
  --color-hero-via: #2a2400;
  --color-hero-to: #1a1600;
}
```

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

### Add TypeScript Support to Svelte Component (Svelte)

Source: https://github.com/accretional/statue/blob/main/VALIDATION_GUIDE.md

This example demonstrates how to enable TypeScript support within a Svelte component's script tag by adding `lang="ts"`. It also shows how to properly type component props, distinguishing between required and optional props with default values.

```svelte
<!-- Before -->
<script>
  export let title;
  export let description = '';
</script>

<!-- After -->
<script lang="ts">
  export let title: string;
  export let description: string = '';
</script>

```

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

### Typical Data Loading Pattern in +page.server.js

Source: https://github.com/accretional/statue/blob/main/content/docs/routing.md

This pattern demonstrates how to load data for custom pages in Statue.dev using SvelteKit's `load` function. The `load` function executes at build time, making data available to the page component. Ensure `prerender` is also enabled.

```javascript
// src/routes/pricing/+page.server.js
export const prerender = true;

export function load() {
  // Load your data here
  const plans = [
    { name: 'Free', price: 0 },
    { name: 'Pro', price: 29 }
  ];

  return { plans };
}

```

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

### JavaScript Function Example

Source: https://github.com/accretional/statue/blob/main/content/example.md

A simple JavaScript function that logs a greeting to the console. This is a basic example of executable code that can be embedded within Markdown content.

```javascript
function hello() {
  console.log("Hello Statue SSG!");
}
```

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

### Markdown Content Formatting Example

Source: https://github.com/accretional/statue/blob/main/content/blog/drag-drop-publish.md

Demonstrates basic Markdown syntax for creating headings, paragraphs with emphasis, lists, code blocks, links, and images within a Statue blog post.

```markdown
## This is a heading

This is a paragraph. It has **bold text** and *italic text*.

Here's a list:
- First item
- Second item
- Third item

And here's some code:

```javascript
console.log("Hello, blog readers!");
```

Links work how you'd expect: [click here](https://example.com) becomes a clickable link. Images too: ![alt text](/path/to/image.jpg) embeds right in your content.
```

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

### Using Configuration in Markdown (Markdown)

Source: https://github.com/accretional/statue/blob/main/content/docs/site-config.md

Demonstrates how to embed configuration values directly into markdown content using the `{{variable}}` syntax. This allows dynamic display of site name, contact info, social links, and dates within markdown files.

```markdown
---
title: Contact Us
description: Get in touch with {{site.name}}
---

# Contact Us

Email: [{{contact.email}}](mailto:{{contact.email}})
Phone: {{contact.phone}}

Our office: {{contact.address.full}}

Follow us on [Twitter]({{social.twitter}})

© {{date.year}} {{site.name}}
```

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

### PR Title Example

Source: https://github.com/accretional/statue/blob/main/ADDING_THEMES.md

Example of a conventional commit message for a Pull Request introducing a new theme. It follows the 'feat:' prefix for new features.

```markdown
feat: add [theme-name] theme
```

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

### Handling Environment-Specific URLs in JavaScript

Source: https://github.com/accretional/statue/blob/main/content/docs/site-config.md

Demonstrates how to dynamically set the site URL based on environment variables (e.g., Vite or Node.js process.env), with a fallback to a default URL. This is crucial for managing different deployment environments.

```javascript
let siteUrl;

if (typeof import.meta !== 'undefined' && import.meta.env) {
  siteUrl = import.meta.env.VITE_SITEURL;
} else {
  siteUrl = process.env.VITE_SITEURL;
}

siteUrl = siteUrl ?? 'https://yoursite.com'; // Fallback

export const siteConfig = {
  site: {
    url: siteUrl,
    // ... other config
  }
};

```

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

### Statue Blog Post Frontmatter Example (Markdown)

Source: https://github.com/accretional/statue/blob/main/content/blog/drag-drop-publish.md

Defines the metadata for a Statue blog post, including title, description, date, author, and optional fields like authorAvatar and thumbnail. This frontmatter is placed at the top of the Markdown file, enclosed by triple dashes.

```markdown
---
title: My First Post
description: A short summary that appears in previews
date: 2025-12-11
author: Your Name
---

Your actual content starts here. Write whatever you want.
```

```markdown
---
title: My First Post
description: A short summary that appears in previews
date: 2025-12-11
author: Your Name
authorAvatar: /images/me.jpg
thumbnail: /thumbnails/cool-header.jpg
---

```

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

### CSS: Consistent Color Temperature Example

Source: https://github.com/accretional/statue/blob/main/ADDING_THEMES.md

Illustrates the importance of maintaining a consistent color temperature within a theme for visual harmony. This example shows a 'good' case with cool tones and a 'bad' case with mixed temperatures.

```css
/* ✅ Good - all cool tones */
--color-background: #0b1220;  /* Cool blue-navy */
--color-primary: #3b82f6;     /* Cool blue */

/* ❌ Bad - mixed temperatures */
--color-background: #0b1220;  /* Cool blue-navy */
--color-primary: #f97316;     /* Warm orange */
```

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

### SvelteKit Build Configuration for Prerendering

Source: https://github.com/accretional/statue/blob/main/AGENTS.md

Configuration for SvelteKit's prerendering options. It enables crawling, specifies static entries, sets error handling for HTTP requests, and critically, ignores unseen routes to prevent build failures with dynamic routes.

```javascript
prerender: {
  crawl: true,
  entries: [
    '/',
    '/about',
    '/history',  // Add all your custom pages here
    // Add more routes as needed
  ],
  handleHttpError: 'warn',
  handleUnseenRoutes: 'ignore'  // CRITICAL: Prevents errors for dynamic routes
}
```

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

### Create Static Assets Directory

Source: https://github.com/accretional/statue/blob/main/AGENTS.md

This command creates the directory for static assets if it doesn't exist, preparing it for images and media files. Files placed here are served at the root and included in the build output.

```bash
mkdir -p static/assets
# Download or copy images to static/assets/
```

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

### Update package.json Version

Source: https://github.com/accretional/statue/blob/main/CONTRIBUTING.md

An example JSON snippet showing how to update the version number in the `package.json` file as part of the release process.

```json
{
  "version": "1.2.3"
}
```

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

### Document New Component

Source: https://github.com/accretional/statue/blob/main/ADDING_COMPONENTS.md

Provides a markdown template for documenting a new component, including a brief description, an Svelte usage example, and a detailed list of its props with types and descriptions. This is intended for the `COMPONENTS_README.md` file.

```markdown
### YourComponent

Brief description of what it does.

```svelte
<script>
  import { YourComponent } from 'statue-ssg';

  const items = [
    { name: 'Item 1', value: 'Value 1' }
  ];
</script>

<YourComponent
  title="My Title"
  description="Optional description"
  {items}
/>
```

**Props:**
- `title` (string, required) - The title
- `description` (string, optional) - Optional description
- `items` (array, optional) - Array of items to display
  - `name` (string) - Item name
  - `value` (string) - Item value
```

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

### CSS Styling with Theme Variables

Source: https://github.com/accretional/statue/blob/main/CONTRIBUTING.md

Shows the correct approach to CSS styling by utilizing CSS variables for theme consistency, contrasted with an example of hardcoded colors which should be avoided.

```css
/* Good - uses theme variables */
.card {
  background: var(--color-card);
  border: 1px solid var(--color-border);
  color: var(--color-foreground);
}

/* Avoid - hardcoded colors */
.card {
  background: #1a1a1a;
  border: 1px solid #333;
  color: #fff;
}
```

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

### Directory Page Template

Source: https://github.com/accretional/statue/blob/main/content/docs/routing.md

Svelte component template for rendering directory listings. It uses 'data.directoryContent' to display a list of posts and allows for filtering.

```svelte
<script>
  import { DirectoryHeader, DirectoryContent } from 'statue-ssg';
  export let data;

  // Add search/filter functionality
  let searchTerm = '';
  $: filtered = data.directoryContent.filter(post =>
    post.metadata.title.toLowerCase().includes(searchTerm.toLowerCase())
  );
</script>

<DirectoryHeader title={data.currentDirectory.title} />

<!-- Add your customizations -->
<input bind:value={searchTerm} placeholder="Search..." />

<DirectoryContent content={filtered} />

```

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

### Configure Pagefind for Search Indexing

Source: https://github.com/accretional/statue/blob/main/content/docs/search.md

Create a `pagefind.config.js` file in your project root to customize Pagefind's behavior. This configuration allows you to specify the build output directory, the Pagefind output path, file globs for indexing, selectors to exclude from indexing, and language settings.

```javascript
export default {
  site: 'build',
  output_path: 'pagefind',
  bundle_dir: '_pagefind',
  glob: '**/*.{html}',
  exclude_selectors: [
    'header',
    'footer',
    'nav',
    '.no-search'
  ],
  force_language: 'en',
  verbose: false
};
```

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

### Configure Built-in Search with Pagefind

Source: https://context7.com/accretional/statue/llms.txt

Shows how to enable and configure the Pagefind search functionality through the `site.config.js` file. Options include enabling search, setting placeholder text, defining no results text, debounce time, minimum query length, max results, and visibility of categories, dates, and excerpts.

```javascript
// site.config.js
export const siteConfig = {
  search: {
    enabled: true,
    placeholder: 'Search...',
    noResultsText: 'No results found',
    debounceMs: 300,
    minQueryLength: 2,
    maxResults: 10,
    showCategories: true,
    showDates: true,
    showExcerpts: true,
    excerptLength: 30
  }
};
```

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

### Create a Custom Statue Template

Source: https://github.com/accretional/statue/blob/main/content/docs/templates.md

Outlines the steps for creating a new custom template for Statue. This involves creating a dedicated directory within the `templates/` folder, adding essential subdirectories like `src/routes/` and `content/`, and including a `site.config.js` file. The command `npm run template:load my-template` is used for testing.

```bash
# 1. Create a directory: templates/my-template/
# 2. Add these subdirectories:
#    - src/routes/ - Route files
#    - content/ - Example content
# 3. Add site.config.js with appropriate defaults
# 4. Test with npm run template:load my-template
```

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

### PageHero Component Example (Svelte)

Source: https://github.com/accretional/statue/blob/main/content/docs/components.md

Demonstrates the PageHero component, designed for page titles on internal pages. It requires a title and optionally accepts a description for a subtitle.

```svelte
<script>
  import { PageHero } from 'statue-ssg';
</script>

<PageHero
  title="Documentation"
  description="Everything you need to know"
/>
```

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

### Basic Contact Information Configuration (JavaScript)

Source: https://github.com/accretional/statue/blob/main/content/docs/site-config.md

Set up basic contact details including email addresses and a phone number. These are useful for general inquiries, support, and legal pages. Access them in markdown with `{{contact.email}}` or `{{contact.phone}}`.

```javascript
contact: {
  email: "hello@yoursite.com",
  privacyEmail: "privacy@yoursite.com",
  supportEmail: "support@yoursite.com",
  phone: "+1 (555) 123-4567"
}
```

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

### Publish Package (NPM)

Source: https://github.com/accretional/statue/blob/main/DEVELOPMENT.md

Publishes the Statue SSG package to npm. The `prepublishOnly` script automatically runs `npm run build` before publishing.

```bash
npm publish
```

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

### SvelteKit Template Management Scripts

Source: https://github.com/accretional/statue/blob/main/CONTRIBUTING.md

Scripts for managing different project templates within a SvelteKit environment. Includes commands to list, load, and save templates, with a warning about overwriting local files.

```bash
# List available templates
npm run template:list

# Load a template into the main workspace
npm run template:load blog

# Save changes back to the template folder
npm run template:save blog
```

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

### SvelteKit Content Page Server Route +page.server.js

Source: https://github.com/accretional/statue/blob/main/ADDING_TEMPLATES.md

This server-side JavaScript file handles data loading for content pages. It imports `getContentBySlug` to fetch content based on the URL parameter and exports a `load` function that returns the fetched content. The `prerender = true` directive ensures these pages are statically generated at build time.

```javascript
import { getContentBySlug } from '$lib/cms/content-processor';

export const prerender = true;

export async function load({ params }) {
  const slug = params.slug || 'index';
  const content = await getContentBySlug(slug);
  return { content };
}

```