### Running domstack Examples

Source: https://github.com/bcomnes/domstack/blob/next/README.md

Provides instructions on how to clone the domstack repository, install dependencies, navigate to an example directory, install its specific dependencies, and start the example.

```bash
git clone git@github.com:bcomnes/domstack.git
cd domstack
# install the top level deps
npm i
cd example:{example-name}
# install the example deps
npm i
# start the example
npm start
```

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

### Install and Build DOMStack Example

Source: https://github.com/bcomnes/domstack/blob/next/examples/string-layouts/README.md

Commands to install project dependencies using npm, build the site, and watch for changes during development. These are essential steps to get the example running and to facilitate development workflows.

```bash
# Install dependencies
npm install
```

```bash
# Build the site
npm run build
```

```bash
# Watch for changes during development
npm run watch
```

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

### Install and Build DOMStack Example

Source: https://github.com/bcomnes/domstack/blob/next/examples/default-layout/README.md

Commands to install project dependencies and build the DOMStack example site. This includes installing necessary packages and running build or watch commands for development.

```bash
npm install
```

```bash
npm run build
```

```bash
npm run watch
```

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

### Install and Run DOMStack Worker Example

Source: https://github.com/bcomnes/domstack/blob/next/examples/worker-example/README.md

Commands to navigate to the example directory, install Node.js dependencies, and build/serve the DOMStack web worker example using npm.

```bash
# Navigate to the example directory
cd examples/worker-example

# Install dependencies
npm install

# Build and serve
npm start
```

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

### Install DOMStack CLI

Source: https://github.com/bcomnes/domstack/blob/next/README.md

Installs the DOMStack static site generator package using npm. This is the primary command to get started with the tool.

```bash
npm install @domstack/static
```

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

### DOMStack Installation and Build Commands

Source: https://github.com/bcomnes/domstack/blob/next/examples/basic/README.md

Commands to install project dependencies, build the static site, and watch for changes during development. These are essential for setting up and running the DOMStack example.

```bash
# Install dependencies
npm install
```

```bash
# Build the site
npm run build
```

```bash
# Watch for changes during development
npm run watch
```

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

### Install Dependencies with npm

Source: https://github.com/bcomnes/domstack/blob/next/examples/uhtml-isomorphic/README.md

Installs all necessary project dependencies using the Node Package Manager (npm). This is a prerequisite for building and running the example.

```bash
npm install
```

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

### Build and Watch Commands

Source: https://github.com/bcomnes/domstack/blob/next/examples/basic/src/README.md

Provides commands for installing dependencies, building the project, and enabling development watch mode.

```bash
npm install
npm run build
```

```bash
npm run watch
```

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

### Custom Container Syntax Examples (Markdown)

Source: https://github.com/bcomnes/domstack/blob/next/examples/markdown-settings/README.md

These Markdown examples demonstrate custom container syntax for warnings, info boxes, and collapsible sections, as configured via the markdown-it.settings.js file.

```markdown
::: warning Security Notice
This is a custom warning container.
:::
```

```markdown
::: info Did you know?
This is a custom info container.
:::
```

```markdown
::: details Click to expand
This content is hidden by default.
:::
```

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

### Custom Code Block Example (Python)

Source: https://github.com/bcomnes/domstack/blob/next/examples/markdown-settings/src/README.md

An example of a Python code block rendered with custom styling applied via markdown-it settings. This demonstrates the consistent application of custom styling across different programming languages.

```python
# Python code also gets the custom treatment
def greet(name):
    return f"Hello, {name}!"
```

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

### Custom Code Block Example (JavaScript)

Source: https://github.com/bcomnes/domstack/blob/next/examples/markdown-settings/src/README.md

An example of a JavaScript code block rendered with custom styling applied via markdown-it settings. This highlights how code blocks can be enhanced for better presentation.

```javascript
// This code block has a custom class
const greeting = "Hello from custom markdown-it settings!";
console.log(greeting);
```

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

### Initialize and Use Web Workers in DOMStack Client Code

Source: https://github.com/bcomnes/domstack/blob/next/examples/worker-example/README.md

JavaScript code to fetch meta.json, get hashed worker paths, and initialize a web worker. Demonstrates sending a message and handling responses.

```javascript
// First, fetch the meta.json to get worker paths
async function initializeWorkers() {
  const response = await fetch('./meta.json');
  const meta = await response.json();
  
  // Initialize workers with the correct hashed filenames
  const counterWorker = new Worker(
    new URL(`./${meta.workers.counter}`, import.meta.url),
    { type: 'module' }
  );
  
  // Use the workers
  counterWorker.postMessage({ action: 'increment' });
  
  counterWorker.onmessage = (e) => {
    counterElement.textContent = e.data.count;
  };
}
```

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

### DOMStack Build Command Example

Source: https://github.com/bcomnes/domstack/blob/next/examples/nested-dest/README.md

Demonstrates the DOMStack command-line interface for building documentation. It specifies the source directory as the current directory (`.`) and includes a custom ignore pattern for a specific directory (`ignore`), while also applying default ignore patterns for common directories like `node_modules`.

```bash
domstack --src . --ignore ignore
```

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

### Project Structure

Source: https://github.com/bcomnes/domstack/blob/next/examples/css-modules/src/README.md

Illustrates the directory layout for a DOMStack project utilizing CSS Modules, showing global styles, layouts, and component modules.

```text
src/
├── globals/         # Global styles and scripts
├── layouts/         # Layout templates
├── modules/         # Components with CSS modules
│   ├── app.module.css  # Module-scoped CSS
│   ├── client.js       # Client-side hydration
│   ├── page.js         # Server-side component
│   └── style.css       # Regular CSS
└── README.md        # This file (becomes index.html)
```

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

### Build and Watch Site with npm

Source: https://github.com/bcomnes/domstack/blob/next/examples/uhtml-isomorphic/README.md

Builds the project for deployment or watches for file changes during development. The 'build' command compiles the site, and 'watch' recompiles automatically on changes.

```bash
npm run build

# Watch for changes during development
npm run watch
```

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

### Install and Build DOMStack Project

Source: https://github.com/bcomnes/domstack/blob/next/examples/react/src/README.md

Commands to install project dependencies and build the application. Use 'npm run watch' for continuous development monitoring.

```bash
npm install
npm run build
```

```bash
npm run watch
```

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

### Initialize DOMStack Web Worker in client.js

Source: https://github.com/bcomnes/domstack/blob/next/examples/worker-example/src/README.md

Demonstrates how to initialize a web worker in a DOMStack project. It fetches the `workers.json` file to get the hashed worker filename, then creates a new Worker instance using `new URL` for dynamic module loading. It also shows basic message posting and receiving.

```javascript
async function initializeWorkers() {
  // Fetch the workers.json to get the hashed worker filenames
  const response = await fetch('./workers.json');
  const workersData = await response.json();
  
  // Initialize workers with the correct hashed filenames
  const counterWorker = new Worker(
    new URL(`./${workersData.counter}`, import.meta.url),
    { type: 'module' }
  );
  
  // Send messages to the worker
  counterWorker.postMessage({ action: 'increment' });
  
  // Receive messages from the worker
  counterWorker.onmessage = (e) => {
    console.log(e.data.count);
  };
  
  return counterWorker;
}

// Initialize workers when the page loads
const counterWorker = await initializeWorkers();
```

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

### DOMStack Worker Example Project Structure

Source: https://github.com/bcomnes/domstack/blob/next/examples/worker-example/README.md

Illustrates the directory layout for a DOMStack project featuring web workers, including worker files, client-side code, and page templates.

```plaintext
worker-example/
├── package.json        # Project dependencies and scripts
├── src/
│   ├── globals/        # Global styles and variables
│   ├── layouts/        # Page layouts
│   ├── README.md       # Home page content
│   └── worker-page/    # Web worker example page
│       ├── page.js           # Main page template
│       ├── client.js         # Client-side code for worker interaction
│       ├── counter.worker.js # Counter worker implementation
│       ├── fibonacci.worker.js # Fibonacci calculator worker
│       └── style.css         # Page-specific styles
```

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

### domstack Project Structure Example

Source: https://github.com/bcomnes/domstack/blob/next/README.md

Illustrates the typical directory structure for a domstack project, showing how pages, layouts, global assets, and workers are organized. The src directory structure directly maps to the website's routing.

```bash
src/
├── md-page
│        ├── README.md
│        ├── client.ts
│        ├── style.css
│        ├── loose-md-page.md
│        └── nested-page
│               ├── README.md
│               ├── style.css
│               └── client.js
├── html-page
│        ├── client.tsx
│        ├── page.html
│        ├── page.vars.ts
│        └── style.css
├── js-page
│        └── page.js
├── ts-page
│        ├── client.ts
│        ├── page.vars.ts
│        └── page.ts
├── feeds
│        └── feeds.template.ts
├── page-with-workers
│        ├── client.ts
│        ├── page.ts
│        ├── counter.worker.ts
│        └── analytics.worker.js
├── layouts
│        ├── blog.layout.ts
│        ├── blog.layout.css
│        ├── blog.layout.client.ts
│        ├── article.layout.ts
│        ├── javascript.layout.js
│        └── root.layout.ts
├── globals
│        ├── global.client.ts
│        ├── global.css
│        ├── global.vars.ts
│        ├── markdown-it.settings.ts
│        └── esbuild.settings.ts
├── README.md
├── client.ts
├── style.css
└── favicon-16x16.png
```

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

### Local Release Commands

Source: https://github.com/bcomnes/domstack/blob/next/CONTRIBUTING.md

Steps to perform a local release if the automated system is not used. This involves updating the version number, generating a changelog, and publishing to npm.

```bash
npm version patch
npm publish
```

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

### JavaScript Configuration Function

Source: https://github.com/bcomnes/domstack/blob/next/examples/markdown-settings/src/README.md

Demonstrates the structure of the `markdown-it.settings.js` file. This file exports an asynchronous function that receives the default markdown-it instance and returns a modified version, allowing for plugin additions and customizations.

```javascript
export default async function markdownItSettingsOverride (md) {
  // Add plugins and customizations here
  return md
}
```

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

### Markdown Page Layout Reference

Source: https://github.com/bcomnes/domstack/blob/next/README.md

An example of a Markdown page frontmatter, demonstrating how to specify a custom layout for rendering the page.

```markdown
---
layout: 'article'
title: 'My Article Title'
---

Thanks for reading my article
```

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

### JavaScript Console Log Example

Source: https://github.com/bcomnes/domstack/blob/next/test-cases/general-features/src/md-page/markdown-settings-test.md

Demonstrates a basic JavaScript console log statement. This snippet is useful for verifying JavaScript execution environments and basic output.

```javascript
// Code blocks should work
console.log('Hello, world!');
```

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

### Web Worker Directory Structure Example

Source: https://github.com/bcomnes/domstack/blob/next/README.md

Illustrates the typical file organization for web workers within a DOMStack project, showing page files and their corresponding worker files.

```bash
page-directory/
  ├── page.js
  ├── client.js
  ├── counter.worker.js  # Worker with counter functionality
  └── data.worker.js     # Worker for data processing
```

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

### NPM Publish Command

Source: https://github.com/bcomnes/domstack/blob/next/CONTRIBUTING.md

Publishes the current version of the package to the npm registry. This command also pushes local git branches and tags to the default remote and creates a GitHub release.

```APIDOC
NPM Publish Command:
  npm publish

  Description:
    Publishes the package to the npm registry. It also pushes local git branches and tags to the default remote, and performs a GitHub release.

  Prerequisites:
    - A clean working git workspace.
    - The version number must be updated via `npm version`.

  Returns:
    - Publishes the package to npm.
    - Pushes git branches and tags.
    - Creates a GitHub release.
```

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

### PostVars Example: Generating Blog Post List

Source: https://github.com/bcomnes/domstack/blob/next/README.md

An example of a `postVars` function in TypeScript that introspects site pages to find blog posts, sorts them by publish date, and renders an HTML list of the latest five posts. This generated HTML is then returned to be merged into the page's variables.

```typescript
import { html } from 'htm/preact'
import { render } from 'preact-render-to-string'
import type { PostVarsFunction } from '@domstack/static'

export const postVars: PostVarsFunction = async ({
  pages
}) => {
  const blogPosts = pages
    .filter(page => page.vars.layout === 'article')
    .sort((a, b) => new Date(b.vars.publishDate) - new Date(a.vars.publishDate))
    .slice(0, 5)

  const blogpostsHtml = render(html`<ul className="blog-index-list">
      ${blogPosts.map(p => {
        const publishDate = p.vars.publishDate ? new Date(p.vars.publishDate) : null
        return html`
          <li className="blog-entry h-entry">
            <a className="blog-entry-link u-url u-uid p-name" href="/${p.pageInfo.path}/">${p.vars.title}</a>
            ${
              publishDate
                ? html`<time className="blog-entry-date dt-published" datetime="${publishDate.toISOString()}">
                    ${publishDate.toISOString().split('T')[0]}
                  </time>`
                : null
            }
          </li>`
        })}
    </ul>`)

  return {
    blogPostsHtml: blogpostsHtml
  }
}
```

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

### HTML Page Example

Source: https://github.com/bcomnes/domstack/blob/next/README.md

HTML pages (.html) are simple HTML fragments. Variables can be injected via a `page.vars.js` file, and Handlebars templating is supported. These pages offer more flexibility for raw HTML content.

```html
<h2>Favorite frameworks</h2>
<ul>
  <li>React</li>
  <li>Vue</li>
  <li>Svelte</li>
  <!-- favoriteFramework defined in page.vars.js -->
  <li>{{ vars.favoriteFramework }}</li>
</ul>
```

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

### Automated Release Process

Source: https://github.com/bcomnes/domstack/blob/next/examples/nested-dest/CONTRIBUTING.md

The project uses npm scripts and GitHub Actions for automated changelog generation, GitHub releases, and npm publishing. To initiate a release, navigate to the Actions tab, select the 'npm bump' action, and trigger it with the required semantic version bump (patch, minor, or major).

```APIDOC
Action: npm bump
Trigger: Manual
Parameters:
  - semantic_version_bump: The type of version bump required (e.g., patch, minor, major).
Returns:
  - Automatic changelog generation.
  - Automatic GitHub release creation.
  - Automatic npm package publication.
```

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

### DOMStack Build Output for Worker Pages

Source: https://github.com/bcomnes/domstack/blob/next/examples/worker-example/README.md

Shows the typical output structure after a DOMStack build, including hashed filenames for bundled assets like workers and a meta.json file mapping original names to hashed paths.

```plaintext
public/worker-page/
├── index.html
├── client-XXXX.js
├── counter.worker-XXXX.js    # Hashed worker filename
├── fibonacci.worker-XXXX.js  # Hashed worker filename
├── meta.json                 # Contains worker path mappings
└── style-XXXX.css
```

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

### Markdown Page Example

Source: https://github.com/bcomnes/domstack/blob/next/README.md

Markdown pages (.md) support CommonMark syntax, optional YAML front-matter for variables, and Handlebars templating. They can include HTML and leverage GitHub Flavored Markdown features.

```yaml
---
title: A title for a markdown page
favoriteColor: 'Blue'
---

Just writing about web development.

## Favorite colors

My favorite color is {{ vars.favoriteColor }}.
```

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

### Eject DOMStack Default Layout Command

Source: https://github.com/bcomnes/domstack/blob/next/examples/default-layout/src/README.md

The command to eject the default DOMStack layout into your project. This creates a `root.layout.js` file, allowing you to customize the default structure.

```bash
npx domstack --eject
```

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

### NPM Version Command

Source: https://github.com/bcomnes/domstack/blob/next/CONTRIBUTING.md

Updates the project's version number in package.json and generates a changelog. Accepts 'patch', 'minor', or 'major' as arguments for semantic versioning.

```APIDOC
NPM Version Command:
  npm version <patch|minor|major>

  Description:
    Updates the version number in package.json according to semantic versioning rules (patch, minor, or major). Automatically generates a changelog based on commit history and commits the version bump.

  Parameters:
    - <patch|minor|major>: Specifies the type of version bump.

  Returns:
    - Updates package.json and creates a new git commit with the version bump.

  Usage Example:
    npm version patch
```

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

### Manual Release Process

Source: https://github.com/bcomnes/domstack/blob/next/examples/nested-dest/CONTRIBUTING.md

If an automated release is not feasible, a manual release can be performed locally. This involves ensuring a clean git workspace, updating the version number and changelog using npm, and then publishing the package.

```shell
Ensure a clean working git workspace.
Run `npm version {patch,minor,major}`.
  - This updates the version number and generates the changelog.
Run `npm publish`.
  - This pushes local git branches and tags to the default remote, performs a gh-release, and creates an npm publication.
```

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

### DOMStack Default Layout HTML Structure

Source: https://github.com/bcomnes/domstack/blob/next/examples/default-layout/src/README.md

Shows the standard HTML5 structure automatically generated by DOMStack when the default layout is used. This includes doctype, head with metadata, and a main element for content.

```html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Your Page Title | Your Site Name</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Automatically injected stylesheets -->
    <!-- Automatically injected scripts -->
  </head>
  <body>
    <main>
      <!-- Your page content appears here -->
    </main>
  </body>
</html>
```

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

### DOMStack Build Warning for Missing Layout

Source: https://github.com/bcomnes/domstack/blob/next/examples/default-layout/src/README.md

Displays the warning message shown during the build process when DOMStack detects the absence of a custom `root.layout.js` file. This indicates that the default layout will be used.

```bash
Missing a root.layout.js file. Using default layout file.
```

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

### JavaScript Template Literal Layout

Source: https://github.com/bcomnes/domstack/blob/next/examples/string-layouts/src/README.md

Demonstrates creating an HTML page structure using JavaScript template literals within DOMStack. This approach leverages dynamic content insertion and conditional rendering via template expressions, offering a lightweight alternative to component-based layouts.

```javascript
return /* html */`
  <!DOCTYPE html>
  <html>
    <head>
      <meta charset="utf-8">
      <title>${siteName}${title ? ` | ${title}` : ''}</title>
      <!-- Other head elements -->
    </head>
    <body>
      <div class="container">
        ${children}
      </div>
    </body>
  </html>``
        }
      ]
    }
  ]
}
```
```

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

### Nested Layout Example with TypeScript

Source: https://github.com/bcomnes/domstack/blob/next/README.md

Demonstrates creating a nested layout (`blog.layout.ts`) that reuses a root layout (`root.layout.js`). It uses Preact and htm for rendering HTML and defines specific variables for blog post details, extending a base layout's variables.

```typescript
import defaultRootLayout from './root.layout.js'
import { html } from 'htm/preact'
import { render } from 'preact-render-to-string'
import type { LayoutFunction } from '@domstack/static'

// Import the type from root layout
import type { RootLayoutVars } from './root.layout'

// Extend the RootLayoutVars with blog-specific properties
interface BlogLayoutVars extends RootLayoutVars {
  authorImgUrl?: string;
  authorImgAlt?: string;
  authorName?: string;
  authorUrl?: string;
  publishDate?: string;
  updatedDate?: string;
}

const blogLayout: LayoutFunction<BlogLayoutVars> = (layoutVars) => {
  const { children: innerChildren, ...rest } = layoutVars
  const vars = layoutVars.vars

  const children = render(html`
    <article className="article-layout h-entry" itemscope itemtype="http://schema.org/NewsArticle">
      <header className="article-header">
        <h1 className="p-name article-title" itemprop="headline">${vars.title}</h1>
        <div className="metadata">
          <address className="author-info" itemprop="author" itemscope itemtype="http://schema.org/Person">
            ${vars.authorImgUrl
              ? html`<img height="40" width="40" src="${vars.authorImgUrl}" alt="${vars.authorImgAlt}" className="u-photo" itemprop="image" />`
              : null
            }
            ${vars.authorName && vars.authorUrl
              ? html`
                  <a href="${vars.authorUrl}" className="p-author h-card" itemprop="url">
                    <span itemprop="name">${vars.authorName}</span>
                  </a>`
              : null
            }
          </address>
          ${vars.publishDate
            ? html`
              <time className="dt-published" itemprop="datePublished" datetime="${vars.publishDate}">
                <a href="#" className="u-url">
                  ${(new Date(vars.publishDate)).toLocaleString()}
                </a>
              </time>`
            : null
          }
          ${vars.updatedDate
            ? html`<time className="dt-updated" itemprop="dateModified" datetime="${vars.updatedDate}">Updated ${(new Date(vars.updatedDate)).toLocaleString()}</time>`
            : null
          }
        </div>
      </header>

      <section className="e-content" itemprop="articleBody">
        ${typeof innerChildren === 'string'
          ? html`<div dangerouslySetInnerHTML=${{ __html: innerChildren }}></div>`
          : innerChildren
        }
      </section>
    </article>
  `)

  const rootArgs = { ...rest, children }
  return defaultRootLayout(rootArgs)
}

export default blogLayout

```

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

### Isomorphic Component Rendering with uhtml-isomorphic

Source: https://github.com/bcomnes/domstack/blob/next/examples/uhtml-isomorphic/README.md

Demonstrates the core usage of uhtml-isomorphic for creating components that render identically on both server and client. It shows how to define a component using tagged template literals and render it to a string (server-side) or a DOM element (client-side).

```javascript
import { html, render } from 'uhtml-isomorphic'

// Create a component
const myComponent = (name) => html`
  <div class="greeting">
    <h1>Hello, ${name}!</h1>
    <p>Welcome to uhtml-isomorphic</p>
  </div>
`

// Server-side rendering
const output = render(String, myComponent('World'))

// Client-side rendering
const container = document.querySelector('.app')
render(container, myComponent('World'))
```

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

### Handlebars Expressions

Source: https://github.com/bcomnes/domstack/blob/next/test-cases/general-features/src/handlebars-md/README.md

Illustrates how Handlebars expressions are rendered and escaped. The first example shows a standard expression that will be evaluated by the Handlebars engine. The second example shows an expression that is escaped using a backslash, preventing its evaluation and displaying it literally.

```handlebars
{{ vars.someVar }}
```

```handlebars
\{{ vars.someVar }}
```

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

### DOMStack CLI Usage and Options

Source: https://github.com/bcomnes/domstack/blob/next/README.md

Provides a comprehensive overview of the DOMStack command-line interface, detailing available commands, options, and their default values. This documentation helps users understand how to configure and run DOMStack builds.

```APIDOC
DOMStack CLI Commands:

Usage: domstack [options]

  Example: domstack --src website --dest public

  Options:
    --src, -s             path to source directory (default: "src")
    --dest, -d            path to build destination directory (default: "public")
    --ignore, -i          comma separated gitignore style ignore string
    --drafts              Build draft pages with the `.draft.{md,js,ts,html}` page suffix.
    --eject, -e           eject the DOMStack default layout, style and client into the src flag directory
    --watch, -w           build, watch and serve the site build
    --watch-only          watch and build the src folder without serving
    --copy                path to directories to copy into dist; can be used multiple times
    --help, -h            show help
    --version, -v         show version information

domstack (v11.0.0)
```

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

### Rendered Handlebars Variable

Source: https://github.com/bcomnes/domstack/blob/next/test-cases/general-features/src/handlebars-html/page.html

Shows a basic Handlebars expression for rendering a variable. The templating engine will replace {{ vars.someVar }} with the actual value during processing.

```handlebars
{{ vars.someVar }}
```

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

### TypeScript/JavaScript Page Example

Source: https://github.com/bcomnes/domstack/blob/next/README.md

TypeScript/JavaScript pages (.ts/.js) export a default function that resolves to an inner-HTML fragment. Variables are passed as arguments to this function, providing dynamic content generation.

```typescript
// Example page.ts

interface PageVars {
  userName: string;
}

export default function(vars: PageVars) {
  return `<h1>Hello, ${vars.userName}!</h1>`;
}
```

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

### DOMStack buildPages() Process Flow

Source: https://github.com/bcomnes/domstack/blob/next/README.md

Illustrates the parallel execution of the buildPages() function, showing the processing pipeline for Markdown, HTML, and JavaScript pages. It details the steps from initial resolution of global and layout variables to parallel page task execution, including variable extraction, rendering, and final HTML output.

```ascii-art
                    ┌──────────────────┐
                    │  buildPages()    │
                    └────────┬─────────┘
                             │
                    ┌────────▼─────────┐
                    │ Resolve Once:    │
                    │ • Global vars    │
                    │ • All layouts    │
                    └────────┬─────────┘
                             │
                ┌────────────▼───────────────┐
                │  Parallel Page Queue       │
                │(Concurrency: min(CPUs, 24))│
                └────────────┬───────────────┘
                             │
        ┌────────────────────┼────────────────────┐
        │                    │                    │
        ▼                    ▼                    ▼
┌─────────────────┐    ┌─────────────────┐    ┌─────────────────┐
│  MD Page Task   │    │ HTML Page Task  │    │  JS Page Task   │
├─────────────────┤    ├─────────────────┤    ├─────────────────┤
│ ┌─────────────┐ │    │ ┌─────────────┐ │    │ ┌─────────────┐ │
│ │1. Read .md  │ │    │ │1. Read .html│ │    │ │1. Import .js│ │
│ │   file      │ │    │ │   file      │ │    │ │   module    │ │
│ └──────┬──────┘ │    │ └──────┬──────┘ │    │ └──────┬──────┘ │
│        ▼        │    │        ▼        │    │        ▼        │
│ ┌─────────────┐ │    │ ┌─────────────┐ │    │ ┌─────────────┐ │
│ │2. Extract   │ │    │ │2. Variable  │ │    │ │2. Variable  │ │
│ │ frontmatter │ │    │ │  Resolution │ │    │ │  Resolution │ │
│ └──────┬──────┘ │    │ └──────┬──────┘ │    │ └──────┬──────┘ │
│        ▼        │    │        ▼        │    │        ▼        │
│ ┌─────────────┐ │    │ ┌─────────────┐ │    │ ┌─────────────┐ │
│ │ Frontmatter │ │    │ │page.vars.js │ │    │ │  Exported   │ │
│ │    vars     │ │    │ │             │ │    │ │    vars     │ │
│ └──────┬──────┘ │    │ └──────┬──────┘ │    │ └──────┬──────┘ │
│        ▼        │    │        ▼        │    │        ▼        │
│ ┌─────────────┐ │    │ ┌─────────────┐ │    │ ┌─────────────┐ │
│ │page.vars.js │ │    │ │  postVars   │ │    │ │page.vars.js │ │
│ │             │ │    │ │             │ │    │ │             │ │
│ └──────┬──────┘ │    │ └──────┬──────┘ │    │ └──────┬──────┘ │
│        ▼        │    │        ▼        │    │        ▼        │
│ ┌─────────────┐ │    │ ┌─────────────┐ │    │ ┌─────────────┐ │
│ │  postVars   │ │    │ │3. Handlebars│ │    │ │  postVars   │ │
│ │             │ │    │ │ (if enabled)│ │    │ │             │ │
│ └──────┬──────┘ │    │ └──────┬──────┘ │    │ └──────┬──────┘ │
│        ▼        │    │        ▼        │    │        ▼        │
│ ┌─────────────┐ │    │ ┌─────────────┐ │    │ ┌─────────────┐ │
│ │3. Render MD │ │    │ │4. Render    │ │    │ │3. Execute   │ │
│ │   to HTML   │ │    │ │  with layout│ │    │ │  page func  │ │
│ └──────┬──────┘ │    │ └──────┬──────┘ │    │ └──────┬──────┘ │
│        ▼        │    │        ▼        │    │        ▼        │
│ ┌─────────────┐ │    │ ┌─────────────┐ │    │ ┌─────────────┐ │
│ │4. Extract   │ │    │ │5. Write HTML│ │    │ │4. Render    │ │
│ │  title (h1) │ │    │ │             │ │    │ │  with layout│ │
│ └──────┬──────┘ │    │ └─────────────┘ │    │ └──────┬──────┘ │
│        ▼        │    │                 │    │        ▼        │
│ ┌─────────────┐ │    │                 │    │ ┌─────────────┐ │
│ │5. Render    │ │    │                 │    │ │5. Write HTML│ │
│ │  with layout│ │    │                 │    │ │             │ │
│ └──────┬──────┘ │    │                 │    │ └─────────────┘ │
│        ▼        │    │                 │    │                 │
│ ┌─────────────┐ │    │                 │    │                 │
│ │6. Write HTML│ │    │                 │    │                 │
│ └─────────────┘ │    │                 │    │                 │
└─────────────────┘    └─────────────────┘    └─────────────────┘
         │                      │                      │
         └──────────────────────┼──────────────────────┘
                                │
                                ▼
                       ┌──────────────────┐
                       │  Complete when   │
                       │  all pages done  │
                       └──────────────────┘

```

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

### Escaped Handlebars Expression

Source: https://github.com/bcomnes/domstack/blob/next/test-cases/general-features/src/handlebars-html/page.html

Demonstrates how to escape Handlebars expressions using a double backslash (\\). This prevents the templating engine from interpreting and rendering the expression, displaying it literally instead.

```handlebars
\{{ vars.someVar }}
```

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

### Using PostVars Output in Markdown

Source: https://github.com/bcomnes/domstack/blob/next/README.md

Demonstrates how to embed the output from a `postVars` function, specifically the `blogPostsHtml` variable generated in the previous example, into a Markdown file using a Handlebars-like placeholder syntax.

```markdown
<!-- README.md -->
## [Blog](./blog/)

{{{ vars.blogPostsHtml }}}
```