### Build and Start Rules

Source: https://github.com/bburns/dnd-rules/blob/master/_autodocs/QUICK-START.md

Run these commands to build the rules and start the development server. Check the console for any errors.

```bash
yarn build-rules
yarn start
# Check console for errors
```

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

### Start Development Server Command

Source: https://github.com/bburns/dnd-rules/blob/master/_autodocs/README.md

Starts the development server, which includes watching for file changes.

```bash
yarn start          # Start dev server with watch
```

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

### Install Dependencies with Yarn

Source: https://github.com/bburns/dnd-rules/blob/master/README.md

After cloning the repository, navigate into the project directory and install the necessary dependencies using Yarn. This command should be run after 'cd dnd-rules'.

```bash
cd dnd-rules
yarn
```

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

### Clone and Install Project Dependencies

Source: https://github.com/bburns/dnd-rules/blob/master/_autodocs/QUICK-START.md

Clone the dnd-rules repository and install its dependencies using yarn.

```bash
git clone https://github.com/bburns/dnd-rules.git
cd dnd-rules
yarn install
```

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

### Start Development Server

Source: https://github.com/bburns/dnd-rules/blob/master/_autodocs/QUICK-START.md

Start the development server which includes watching for changes in rules and the application. Alternatively, watch rules only if the dev server is running separately.

```bash
yarn start          # Dev server + watch rules (http://localhost:3000)
```

```bash
yarn watch-rules    # Watch rules only (if running dev server separately)
```

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

### Example Neomem Entry with Properties

Source: https://github.com/bburns/dnd-rules/blob/master/_autodocs/rule-categories.md

An example of a complete Neomem entry including a rule definition and its associated properties.

```neomem
---------------------------------------------------------------------------
# Ability Modifier #
---------------------------------------------------------------------------

Ability Modifiers range from -5 to +10. They are used more often than 
the raw Ability Scores on which they are based.

Ability Modifier = floor((Ability Score - 10) / 2)

e.g. if Strength = 13 then "Strength Modifier" = +1

^type: rule
^ref: ph13,173
^srd: https://www.dndbeyond.com/sources/basic-rules/using-ability-scores#AbilityScoresandModifiers
^phase: character
^complexity: intermediate
```

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

### Run Test Runner

Source: https://github.com/bburns/dnd-rules/blob/master/_autodocs/README.md

Start the test runner using the 'test' command.

```bash
yarn test                  # Start test runner
```

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

### Neomem Complete Example Entry

Source: https://github.com/bburns/dnd-rules/blob/master/_autodocs/compilation-pipeline.md

Provides a comprehensive example of a Neomem rule entry, demonstrating the use of headings for naming, Markdown for descriptions with links, and caret-prefixed properties for metadata like type, reference, source, phase, and complexity.

```text
---------------------------------------------------------------------------
# Ability Check #
---------------------------------------------------------------------------

Make an Ability Check to test innate talent/training to overcome a challenge. 
Difficulty of task is the Difficulty Class (DC), 1-20. 

Very easy 5
Easy 10
Medium 15
Hard 20
Nearly Impossible 30

Can use for [[Attack Roll|Attack Rolls]], [[Saving Throw|Saving Throws]], 
and other situations requiring a test.

^type: rule
^ref: ph174
^srd: https://www.dndbeyond.com/sources/basic-rules/using-ability-scores#AbilityChecks
^phase: play
^complexity: intermediate
```

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

### App Component Example Usage

Source: https://github.com/bburns/dnd-rules/blob/master/_autodocs/api-reference/app-component.md

Demonstrates how to render the App component into the DOM using ReactDOM. Ensure the 'root' element exists in your HTML.

```javascript
import App from './components/app/index.jsx'
import React from 'react'
import ReactDOM from 'react-dom'

ReactDOM.render(<App />, document.getElementById('root'))
```

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

### Pathfinder Adaptation Example

Source: https://github.com/bburns/dnd-rules/blob/master/_autodocs/integration-guide.md

Example of modifying the .nm rule file for Pathfinder, including custom properties like SRD URLs, page numbers, and phases.

```neomem
# Instead of D&D rules
^srd: https://www.d20pfsrd.com/...
^ref: pf123  // Pathfinder page numbers
^phase: character | combat | downtime  // Different phases
^complexity: basic | expert | master  // Different levels
```

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

### Hash-Based Routing Examples

Source: https://github.com/bburns/dnd-rules/blob/master/_autodocs/architecture.md

Examples of URL hash anchors used for navigation within the application. These are standard browser features and do not require an external router.

```text
https://bburns.github.io/dnd-rules/#ability-score
https://bburns.github.io/dnd-rules/#intermediate
```

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

### Install Dependencies with Frozen Lockfile

Source: https://github.com/bburns/dnd-rules/blob/master/_autodocs/QUICK-START.md

Commands to resolve dependency issues by reinstalling node_modules. This ensures consistent installations across environments.

```bash
yarn install --frozen-lockfile
rm -rf node_modules
yarn install
```

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

### Run Development Server

Source: https://github.com/bburns/dnd-rules/blob/master/README.md

Start the application in development mode using Yarn. This command will typically open the application in your browser and enable hot-reloading for quick edits.

```bash
yarn start
```

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

### Neomem Rule Format Example

Source: https://github.com/bburns/dnd-rules/blob/master/_autodocs/README.md

Example of a rule definition in Neomem format. This is used for editing rules before they are compiled.

```text
---------------------------------------------------------------------------
# Rule Name #
---------------------------------------------------------------------------

Rule description in Markdown.

^type: rule
^complexity: basic
^phase: character
^ref: ph123
^srd: https://...
```

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

### Layout System: Masonry Example

Source: https://github.com/bburns/dnd-rules/blob/master/_autodocs/architecture.md

Visual representation of the responsive masonry layout powered by Colcade, showing how content is distributed across columns.

```plaintext
┌────────────────┬──────────────┬──────────────┐
│    Column 1    │   Column 2   │   Column 3   │
│                │              │              │
│  ┌─────────┐   │  ┌────────┐  │  ┌────────┐ │
│  │ Rule 1  │   │  │ Rule 4 │  │  │ Rule 7 │ │
│  └─────────┘   │  └────────┘  │  └────────┘ │
│  ┌─────────┐   │  ┌────────┐  │  ┌────────┐ │
│  │ Rule 2  │   │  │ Rule 5 │  │  │ Rule 8 │ │
│  └─────────┘   │  └────────┘  │  └────────┘ │
│  ┌─────────┐   │  ┌────────┐  │             │
│  │ Rule 3  │   │  │ Rule 6 │  │             │
│  └─────────┘   │  └────────┘  │             │
└────────────────┴──────────────┴──────────────┘
```

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

### Neomem Input Rule Format Example

Source: https://github.com/bburns/dnd-rules/blob/master/_autodocs/api-reference/rules-parser.md

Example structure for Neomem rule definitions. Includes rule name, description, internal links, and metadata properties prefixed with '^'.

```plaintext
---------------------------------------------------------------------------
# Rule Name #
---------------------------------------------------------------------------

Rule description in Markdown format.

Links to other rules like [[Ability Score]] are converted to internal anchors.

Multiple paragraphs supported.

^property: value
^type: rule
^complexity: basic
^phase: character
^ref: ph152
^srd: https://www.dndbeyond.com/sources/basic-rules/...
```

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

### Build and Watch Rules Scripts

Source: https://github.com/bburns/dnd-rules/blob/master/_autodocs/architecture.md

Provides commands for compiling Neomem rules to JSON, watching for changes during development, and starting the development server.

```bash
yarn build-rules          # One-time compile
yarn watch-rules          # Watch for changes
yarn start                # Watch + dev server
```

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

### Test Full Compilation Pipeline

Source: https://github.com/bburns/dnd-rules/blob/master/_autodocs/compilation-pipeline.md

Tests the full compilation pipeline by piping markdown content to the 'nm2json.js' script. This example demonstrates how to simulate a rule file with specific content and type.

```bash
echo '---\n# Test #\n---\nContent\n^type: rule' | node scripts/nm2json.js
```

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

### Neomem Rule Format Example

Source: https://github.com/bburns/dnd-rules/blob/master/_autodocs/QUICK-START.md

This is an example of a rule block in the Neomem format. It includes a rule name, description in Markdown, and metadata properties.

```neomem
---------------------------------------------------------------------------
# Rule Name #
---------------------------------------------------------------------------

Rule description in Markdown.

[[links]] to other rules work automatically.

Can include **bold**, *italic*, lists, etc.

^type: rule
^complexity: basic
^phase: character
^ref: ph173
^srd: https://www.dndbeyond.com/sources/basic-rules/...

```

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

### Phase Grouping Example

Source: https://github.com/bburns/dnd-rules/blob/master/_autodocs/types.md

An example of a 'phase' type object, used for grouping rules by the game phase they apply to, such as 'Combat'. It includes a name, type, and a unique ID.

```javascript
{
  "name": "Combat",
  "contents": "",
  "type": "phase",
  "id": "combat"
}
```

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

### Basic Rule Example

Source: https://github.com/bburns/dnd-rules/blob/master/_autodocs/types.md

An example of a 'rule' type object, representing a specific game rule like 'Ability Score'. It includes all relevant fields for identification, content, and categorization.

```javascript
{
  "name": "Ability Score",
  "contents": "Measures of different abilities: Strength, Dexterity, Constitution, Intelligence, Wisdom, Charisma\n\nMax 20 for characters, 30 for monsters/divines.",
  "type": "rule",
  "id": "ability-score",
  "parentId": "basic",
  "complexity": "basic",
  "phase": "character",
  "ref": "ph12,173",
  "srd": "https://www.dndbeyond.com/sources/basic-rules/using-ability-scores#AbilityScoresandModifiers"
}
```

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

### Build Integration Commands

Source: https://github.com/bburns/dnd-rules/blob/master/_autodocs/api-reference/rules-parser.md

Commands for integrating rule compilation into the build process. Includes one-time compilation, watching for changes, and starting the development server.

```bash
yarn build-rules    # One-time compilation
yarn watch-rules    # Watch for changes
yarn start          # Watch + start dev server
```

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

### Markdown Formatting Examples

Source: https://github.com/bburns/dnd-rules/blob/master/_autodocs/rule-categories.md

Demonstrates standard Markdown syntax supported for rule content, including headings, bold, italic, lists, and links.

```markdown
# Heading
## Subheading
**bold** and *italic*
- List item 1
- List item 2
1. Numbered item
[Link text](#anchor)
```

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

### Wiki Link Conversion Examples

Source: https://github.com/bburns/dnd-rules/blob/master/_autodocs/rule-categories.md

Shows how Neomem wiki links are converted into Markdown links, illustrating direct and aliased link formats.

```markdown
[[Ability Check]]  →  [Ability Check](#ability-check)
[[Save|Saving Throw]]  →  [Saving Throw](#save)
```

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

### Custom Game System Property Example

Source: https://github.com/bburns/dnd-rules/blob/master/_autodocs/integration-guide.md

Define your own property structure in .nm for a custom game system, including type, category, difficulty, playtime, and prerequisites.

```neomem
^type: rule
^category: magic | combat | roleplay
^difficulty: easy | moderate | hard
^playtime: 5-10 minutes
^prerequisite: Basic Magic
```

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

### Grouping Category Example

Source: https://github.com/bburns/dnd-rules/blob/master/_autodocs/types.md

An example of a 'complexity' type object, used for grouping rules by difficulty level, such as 'Basic'. It includes a name, content, type, and a unique ID.

```javascript
{
  "name": "Basic",
  "contents": "The core mechanic of the game is to roll a 20 sided die (\"d20\"), add relevant modifiers, and compare to a target number to determine success or failure.",
  "type": "complexity",
  "id": "basic"
}
```

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

### Output JSON Rule Object Example

Source: https://github.com/bburns/dnd-rules/blob/master/_autodocs/api-reference/rules-parser.md

Example structure of a rule object generated by the nm2json parser. Includes fields like name, contents, type, id, parentId, complexity, phase, ref, and srd.

```json
{
  "name": "Ability Check",
  "contents": "Make an Ability Check to test...",
  "type": "rule",
  "id": "ability-check",
  "parentId": "play",
  "complexity": "intermediate",
  "phase": "play",
  "ref": "ph174",
  "srd": "https://www.dndbeyond.com/sources/basic-rules/using-ability-scores#AbilityChecks"
}
```

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

### Rules Data Structure Example

Source: https://github.com/bburns/dnd-rules/blob/master/_autodocs/integration-guide.md

An example of the structure for individual rule objects within the compiled rules JSON, including properties like id, name, type, complexity, and phase.

```json
[
  {
    "id": "ability-score",
    "name": "Ability Score",
    "contents": "Markdown content...",
    "type": "rule",
    "complexity": "basic",
    "phase": "character",
    "ref": "ph12",
    "srd": "https://..."
  },
  // ... more rules
]
```

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

### Table of Contents Component Usage Example

Source: https://github.com/bburns/dnd-rules/blob/master/_autodocs/api-reference/table-of-contents-component.md

Demonstrates how to import and use the TableOfContents component with a sample 'groups' array. Ensure the 'groups' array is structured correctly with 'id', 'name', and optional 'children' properties.

```javascript
import TableOfContents from './components/toc'

const groups = [
  {
    id: 'introduction',
    name: 'Introduction',
    children: undefined
  },
  {
    id: 'basic',
    name: 'Basic Rules',
    children: [
      { id: 'ability-score', name: 'Ability Score' },
      { id: 'ability-modifier', name: 'Ability Modifier' },
      { id: 'armor-class-ac', name: 'Armor Class (AC)' }
    ]
  },
  {
    id: 'intermediate',
    name: 'Intermediate Rules',
    children: [
      { id: 'ability-check', name: 'Ability Check' },
      { id: 'advantage-/-disadvantage', name: 'Advantage / Disadvantage' }
    ]
  }
]

// Render component
<TableOfContents groups={groups} />
```

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

### Empty Content Rule Example

Source: https://github.com/bburns/dnd-rules/blob/master/_autodocs/rule-categories.md

Illustrates the structure of rules with empty 'contents', typically used for grouping headers in a tree structure.

```javascript
{
  "name": "Basic",
  "contents": "",
  "type": "complexity",
  "id": "basic"
}
```

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

### Package Scripts for Build and Watch

Source: https://github.com/bburns/dnd-rules/blob/master/_autodocs/compilation-pipeline.md

Defines npm/yarn scripts for building the rules JSON, watching for changes, and starting the development server with concurrent processes.

```json
{
  "build-rules": "node scripts/nm2json.js < rules/rules.nm > src/assets/rules.json",
  "watch-rules": "chokidar rules/rules.nm scripts/nm2json.js -c \"yarn run build-rules\"",
  "start": "yarn build-rules && concurrently \"yarn watch-rules\" \"react-scripts start\""
}
```

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

### Property Extension in Rules

Source: https://github.com/bburns/dnd-rules/blob/master/_autodocs/rule-categories.md

Example of adding custom properties like difficulty and playtime directly in the rules file using the '^property: value' syntax.

```neomem
^complexity: basic
^difficulty: easy
^playtime: 5-10 minutes
```

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

### Example of groupBy Function Usage

Source: https://github.com/bburns/dnd-rules/blob/master/_autodocs/types.md

Demonstrates how to use the groupBy utility function to group an array of rules by a specified key, such as 'parentId'. The output includes the grouping key, the associated values, and properties from the matched item.

```javascript
const rules = [
  { id: 'play', type: 'phase', name: 'Play' },
  { id: 'ability-check', parentId: 'play', type: 'rule', name: 'Ability Check' },
  { id: 'action', parentId: 'play', type: 'rule', name: 'Action' }
]

const grouped = groupBy(rules, 'parentId')

// Result includes:
// [
//   {
//     parentId: 'play',  // The key
//     values: [ability-check, action],
//     id: 'play',
//     type: 'phase',
//     name: 'Play'  // Properties from the matched item
//   }
// ]
```

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

### Links Component

Source: https://github.com/bburns/dnd-rules/blob/master/_autodocs/api-reference/app-component.md

Displays Amazon affiliate links to recommended D&D books, including the Player's Handbook, Dungeon Master's Guide, and Essentials Kit.

```APIDOC
## Links Component

### Description

Displays Amazon affiliate links to recommended D&D books (Player's Handbook, Dungeon Master's Guide, Essentials Kit).

### Parameters

#### Path Parameters

None

#### Query Parameters

None

#### Request Body

None

### Method

None (React Component)

### Endpoint

None (React Component)

### Return Type

Returns a JSX div with product links.

### Source Location

`src/components/app/index.jsx`, lines 183-219
```

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

### Build and Deploy Project

Source: https://github.com/bburns/dnd-rules/blob/master/_autodocs/QUICK-START.md

Build the rules from .nm to .json, perform a production build, and deploy to GitHub Pages.

```bash
yarn build-rules    # Compile rules.nm → rules.json
```

```bash
yarn build          # Production build
```

```bash
yarn deploy         # Deploy to GitHub Pages
```

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

### Introduction Component

Source: https://github.com/bburns/dnd-rules/blob/master/_autodocs/api-reference/app-component.md

Displays introductory text about the site. This component has fixed content and does not accept any props.

```javascript
function Introduction()
```

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

### Introduction Component

Source: https://github.com/bburns/dnd-rules/blob/master/_autodocs/api-reference/app-component.md

Displays introductory text explaining the site's purpose, usage, and printing instructions. This component has fixed content and no props.

```APIDOC
## Introduction Component

### Description

Displays the introductory text explaining what the site is, how to use it, and how to print it. Fixed content; no props.

### Parameters

#### Path Parameters

None

#### Query Parameters

None

#### Request Body

None

### Method

None (React Component)

### Endpoint

None (React Component)

### Return Type

Returns a JSX div with introduction content.

### Source Location

`src/components/app/index.jsx`, lines 106-118
```

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

### Clone Repository with Git

Source: https://github.com/bburns/dnd-rules/blob/master/README.md

Clone the project repository to your local machine using Git. This is the first step in setting up the development environment.

```bash
git clone https://github.com/bburns/dnd-rules.git
```

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

### Production Build Command

Source: https://github.com/bburns/dnd-rules/blob/master/_autodocs/README.md

Executes the production build process for the project.

```bash
yarn build          # Production build
```

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

### Deploy to GitHub Pages

Source: https://github.com/bburns/dnd-rules/blob/master/README.md

Deploy the built site to GitHub Pages using the provided Yarn script. This command also implicitly runs the build step.

```bash
yarn deploy
```

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

### ESLint Configuration

Source: https://github.com/bburns/dnd-rules/blob/master/_autodocs/configuration.md

Uses Create React App's default ESLint configuration.

```json
{
  "eslintConfig": {
    "extends": "react-app"
  }
}
```

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

### SRD Anchor Examples

Source: https://github.com/bburns/dnd-rules/blob/master/_autodocs/rule-categories.md

Common anchors used for linking to specific sections within SRD documents.

```plaintext
AbilityScoresandModifiers
```

```plaintext
AbilityChecks
```

```plaintext
SavingThrows
```

```plaintext
AttackRolls
```

```plaintext
DamageRolls
```

```plaintext
ActionsinCombat
```

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

### Project Source Structure

Source: https://github.com/bburns/dnd-rules/blob/master/_autodocs/configuration.md

An overview of the dnd-rules project's directory structure, highlighting key files and their purposes.

```bash
dnd-rules/
├── rules/
│   └── rules.nm              # Source rule definitions in Neomem format
├── src/
│   ├── assets/
│   │   ├── rules.json        # Compiled rules (generated)
│   │   └── images/           # Static images
│   ├── components/
│   │   ├── app/
│   │   │   ├── index.jsx
│   │   │   ├── styles.css
│   │   │   └── print.css
│   │   └── toc/
│   │       ├── index.jsx
│   │       └── styles.css
│   ├── services/
│   │   └── serviceWorker.js  # PWA service worker registration
│   ├── lib/
│   │   └── index.js          # Utility functions
│   └── index.js              # React entry point
├── scripts/
│   ├── nm2json.js            # Rule compilation script
│   └── test/
│       └── test.js
├── public/
│   ├── manifest.json         # PWA manifest
│   ├── pdfs/                 # Print-friendly PDFs
│   └── images/               # Public assets
├── package.json              # Project configuration
└── firebase.json             # Firebase config (optional)
```

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

### Deploy Command

Source: https://github.com/bburns/dnd-rules/blob/master/_autodocs/README.md

Deploys the project to GitHub Pages.

```bash
yarn deploy         # Deploy to GitHub Pages
```

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

### Build Rules Command

Source: https://github.com/bburns/dnd-rules/blob/master/_autodocs/README.md

Use this command to compile the rules from the `rules/rules.nm` format into `src/assets/rules.json`.

```bash
yarn build-rules    # Compile rules/rules.nm → src/assets/rules.json
```

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

### Filter Rules by Custom Properties in React

Source: https://github.com/bburns/dnd-rules/blob/master/_autodocs/integration-guide.md

Example of filtering rules in a React application based on custom properties like category and difficulty.

```javascript
const advancedMagic = rules.filter(r => 
  r.category === 'magic' && r.difficulty === 'hard'
)
```

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

### Development Build Output Structure

Source: https://github.com/bburns/dnd-rules/blob/master/_autodocs/architecture.md

This shows the directory structure for the live development server with hot reloading enabled.

```bash
build/
└─ (live dev server with hot reload)
```

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

### Production Build Output Structure

Source: https://github.com/bburns/dnd-rules/blob/master/_autodocs/architecture.md

This details the directory structure for the production build, including bundled assets and output files.

```bash
build/
├── index.html              (main entry point)
├── manifest.json           (PWA manifest)
├── favicon.ico
├── static/
│   ├── js/                 (bundled JavaScript)
│   ├── css/                (bundled CSS)
│   └── media/              (optimized images)
└── pdfs/                   (print-friendly PDFs)
```

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

### Build Production Bundle

Source: https://github.com/bburns/dnd-rules/blob/master/_autodocs/configuration.md

Generates an optimized production bundle for the React application, including inlined CSS and bundled JavaScript.

```bash
yarn build
```

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

### Render the Full App Component

Source: https://github.com/bburns/dnd-rules/blob/master/_autodocs/QUICK-START.md

Import and render the main App component. It uses the compiled rules.json internally and does not accept any props.

```javascript
import App from './src/components/app'
<App />  // Full app
```

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

### Test Command

Source: https://github.com/bburns/dnd-rules/blob/master/_autodocs/README.md

Runs the project's test suite.

```bash
yarn test           # Run tests
```

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

### register

Source: https://github.com/bburns/dnd-rules/blob/master/_autodocs/api-reference/service-worker.md

Registers a service worker for offline support and improved caching in production environments. It handles different logic for localhost and deployed sites, and provides callbacks for successful installations and updates.

```APIDOC
## register

### Description
Registers a service worker for offline support and improved caching in production. It handles different logic for localhost and deployed sites, and provides callbacks for successful installations and updates.

### Method Signature
```javascript
export function register(config)
```

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
* **config** (Object) - Optional - Configuration object with callbacks.
  * **config.onSuccess** (function) - Optional - Callback invoked when content is cached (only on first install).
  * **config.onUpdate** (function) - Optional - Callback invoked when updated content is available.

### Request Example
```javascript
import * as serviceWorker from './services/serviceWorker.js'

// On app startup
serviceWorker.register({
  onSuccess: (registration) => {
    console.log('Service worker activated, app works offline')
  },
  onUpdate: (registration) => {
    console.log('New version available - refresh to update')
  }
})
```

### Response
#### Success Response
Returns `undefined`. Side effects include registering the service worker or logging errors.

#### Response Example
```json
undefined
```

### Error Handling
Failures are caught and logged to the console without throwing exceptions. Network errors during service worker registration display the message: "Error during service worker registration"
```

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

### Import React Application

Source: https://github.com/bburns/dnd-rules/blob/master/_autodocs/export-summary.md

Import the main React application component to render the full rules application.

```javascript
import App from './src/components/app/index.jsx'
<App />  // Full rules application
```

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

### Import Utility Functions

Source: https://github.com/bburns/dnd-rules/blob/master/_autodocs/export-summary.md

Import utility functions like groupBy and linkifyText for general use.

```javascript
import { groupBy } from './src/lib/index.js'
import { linkifyText } from './scripts/nm2json.js'
```

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

### Regular Expression for 'propvalue' Line Type

Source: https://github.com/bburns/dnd-rules/blob/master/_autodocs/compilation-pipeline.md

JavaScript regex to parse property-value pairs from lines starting with '^'. Group 1 captures the property name, and Group 2 captures the value.

```regex
^\^([^:]+):[ ]*(.+)$
```

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

### Generate IDs from Names

Source: https://github.com/bburns/dnd-rules/blob/master/_autodocs/compilation-pipeline.md

Shows the current implementation for generating unique IDs from names, which involves converting to lowercase, replacing spaces with hyphens, and URL-encoding. An example for preserving case is also provided.

```javascript
function getIdFromName(s) {
  // Current: lowercase, spaces to hyphens, URL-encoded
  return encodeURI(s.replace(/ /g, '-').toLowerCase())
  
  // Example: preserve case
  // return encodeURI(s.replace(/ /g, '-'))
}
```

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

### Import React Components

Source: https://github.com/bburns/dnd-rules/blob/master/_autodocs/export-summary.md

Import the App and TableOfContents components for use as a library.

```javascript
import { default as App } from './src/components/app/index.jsx'
import { default as TableOfContents } from './src/components/toc/index.jsx'
```

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

### Register Valid Service Worker (Internal)

Source: https://github.com/bburns/dnd-rules/blob/master/_autodocs/api-reference/service-worker.md

Internal function that registers a service worker after validation. It handles the service worker lifecycle, including installation, updates, and error handling. This function is not exported and is called by the register() function.

```javascript
function registerValidSW(swUrl, config)
```

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

### Custom Build Script for Rule Compilation

Source: https://github.com/bburns/dnd-rules/blob/master/_autodocs/integration-guide.md

Create a wrapper script to automate the standard compilation and apply custom transformations to the generated JSON rules.

```javascript
// scripts/build-rules.js
import fs from 'fs'
import { exec } from 'child_process'

// 1. Run standard compilation
exec('node scripts/nm2json.js < rules/rules.nm > src/assets/rules.json', () => {
  // 2. Post-process JSON
  const rules = JSON.parse(fs.readFileSync('src/assets/rules.json', 'utf-8'))
  
  // 3. Apply custom transformations
  const enhanced = rules.map(rule => ({
    ...rule,
    searchText: `${rule.name} ${rule.contents}`.toLowerCase()
  }))
  
  // 4. Write modified output
  fs.writeFileSync('src/assets/rules-enhanced.json', 
    JSON.stringify(enhanced, null, 2))
})
```

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

### Styling Integration Import

Source: https://github.com/bburns/dnd-rules/blob/master/_autodocs/api-reference/table-of-contents-component.md

Demonstrates the import statement required to apply the component's layout and styling, which is defined in './styles.css'.

```javascript
import './styles.css'
```

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

### Resulting JSON from Property Extension

Source: https://github.com/bburns/dnd-rules/blob/master/_autodocs/rule-categories.md

Demonstrates the JSON output structure after extending rules with custom properties, showing how they are mapped.

```javascript
{
  "complexity": "basic",
  "difficulty": "easy",
  "playtime": "5-10 minutes"
}
```

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

### About Component

Source: https://github.com/bburns/dnd-rules/blob/master/_autodocs/api-reference/app-component.md

Displays contribution guidelines, GitHub repository links, and credits. It also includes the Links component for related book recommendations.

```APIDOC
## About Component

### Description

Displays contribution guidelines, links to the GitHub repository, and credits. Includes the Links component which displays related book recommendations.

### Parameters

#### Path Parameters

None

#### Query Parameters

None

#### Request Body

None

### Method

None (React Component)

### Endpoint

None (React Component)

### Return Type

Returns a JSX div with about/contributing information.

### Source Location

`src/components/app/index.jsx`, lines 170-180
```

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

### Module Organization: Entry Points

Source: https://github.com/bburns/dnd-rules/blob/master/_autodocs/architecture.md

Defines the primary entry points for different aspects of the project: the web application, the library utilities, and the script for JSON generation.

```plaintext
- Web App: src/index.js → React DOM
- Library: src/lib/index.js → Utility functions (groupBy)
- Compilation: scripts/nm2json.js → JSON generation (linkifyText)
```

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

### Deploy dnd-rules to Firebase Hosting

Source: https://github.com/bburns/dnd-rules/blob/master/_autodocs/integration-guide.md

Deploys the dnd-rules application to Firebase Hosting, assuming Firebase is configured.

```bash
firebase deploy
```

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

### Components (as library)

Source: https://github.com/bburns/dnd-rules/blob/master/_autodocs/export-summary.md

Exposes the App and TableOfContents React components for use as a library.

```APIDOC
## Components (as library)

### Description

Provides access to the `App` and `TableOfContents` React components when used as a library.

### Usage

```javascript
import { default as App } from './src/components/app/index.jsx'
import { default as TableOfContents } from './src/components/toc/index.jsx'
```
```

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

### Project Structure

Source: https://github.com/bburns/dnd-rules/blob/master/_autodocs/README.md

The project follows a standard React application structure with dedicated directories for rules, scripts, source code, assets, and public files.

```tree
dnd-rules/
├── rules/
│   └── rules.nm                       # Source rule definitions (Neomem format)
├── scripts/
│   ├── nm2json.js                     # Compilation: Neomem → JSON
│   └── test/
│       └── test.js                    # Tests
├── src/
│   ├── assets/
│   │   ├── rules.json                 # Compiled rules (generated)
│   │   └── images/
│   ├── components/
│   │   ├── app/
│   │   │   ├── index.jsx              # Main app component
│   │   │   ├── styles.css
│   │   │   └── print.css
│   │   └── toc/
│   │       ├── index.jsx              # Table of contents component
│   │       └── styles.css
│   ├── lib/
│   │   └── index.js                   # Utilities (groupBy)
│   ├── services/
│   │   └── serviceWorker.js           # PWA service worker
│   └── index.js                       # React entry point
├── public/
│   ├── manifest.json                  # PWA manifest
│   ├── pdfs/                          # Print PDFs
│   └── images/
├── package.json                       # Dependencies & scripts
└── firebase.json                      # Firebase config (optional)
```

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

### Extending Rule Groups with Static Entries

Source: https://github.com/bburns/dnd-rules/blob/master/_autodocs/rule-categories.md

Shows how static page entries like 'introduction', 'about', and 'license' are appended to the compiled rule groups for sidebar navigation.

```javascript
const groupsExtended = [
  {id:'introduction', name:"Introduction"},
  ...groups,
  {id:'about', name:"About"},
  {id:'license', name:"License"}
]
```

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

### Firebase Deployment Script (Commented Out)

Source: https://github.com/bburns/dnd-rules/blob/master/_autodocs/configuration.md

A commented-out Firebase deployment script. To enable, remove the '--' prefix and configure firebase.json.

```json
{
  "--deploy": "firebase deploy"
}
```

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

### GitHub Pages Configuration in package.json

Source: https://github.com/bburns/dnd-rules/blob/master/_autodocs/configuration.md

Configures the 'homepage' for GitHub Pages deployment and defines the 'deploy' script using gh-pages.

```json
{
  "homepage": "https://bburns.github.io/dnd-rules",
  "scripts": {
    "deploy": "gh-pages -d build"
  }
}
```

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

### Run Tests

Source: https://github.com/bburns/dnd-rules/blob/master/_autodocs/architecture.md

Execute the test suite using Yarn. This command runs the configured tests, including those for the linkifyText function.

```bash
yarn test
```

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

### Importing Compiled Rules Asset

Source: https://github.com/bburns/dnd-rules/blob/master/_autodocs/export-summary.md

Demonstrates how to import the compiled rules JSON file directly into a component.

```javascript
import items from '../../assets/rules.json'
```

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

### Header Component

Source: https://github.com/bburns/dnd-rules/blob/master/_autodocs/api-reference/app-component.md

Renders the application header with logo and title. Displays the top-level branding including a dragon icon and site title. Clicking the header scrolls to the introduction section via hash navigation.

```javascript
function Header()
```

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

### Header Component

Source: https://github.com/bburns/dnd-rules/blob/master/_autodocs/api-reference/app-component.md

Renders the application header with logo and title. Displays the top-level branding including a dragon icon and site title. Clicking the header scrolls to the introduction section via hash navigation.

```APIDOC
## Header Component

### Description
Renders the application header with logo and title. Displays the top-level branding including a dragon icon and site title. Clicking the header scrolls to the introduction section via hash navigation.

### Return Type
Returns a JSX header element.
```

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

### Development Browser Support

Source: https://github.com/bburns/dnd-rules/blob/master/_autodocs/configuration.md

During development, uses latest versions of major browsers for faster iteration.

```json
{
  "development": [
    "last 1 chrome version",
    "last 1 firefox version",
    "last 1 safari version"
  ]
}
```

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

### About Component

Source: https://github.com/bburns/dnd-rules/blob/master/_autodocs/api-reference/app-component.md

Displays information about contributing to the project, GitHub repository links, and credits. It includes the Links component.

```javascript
function About()
```

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

### Utilities

Source: https://github.com/bburns/dnd-rules/blob/master/_autodocs/export-summary.md

Provides utility functions `groupBy` and `linkifyText`.

```APIDOC
## Utilities

### Description

Offers utility functions for data manipulation and text processing.

### Functions

- **groupBy**: Groups elements based on a provided key.
- **linkifyText**: Converts plain text into a format with links.

### Usage

```javascript
import { groupBy } from './src/lib/index.js'
import { linkifyText } from './scripts/nm2json.js'
```
```

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

### Markdown Processing Pipeline

Source: https://github.com/bburns/dnd-rules/blob/master/_autodocs/architecture.md

Illustrates the sequence of transformations from Markdown strings to React components using the unified.js pipeline.

```text
Markdown String
    ↓
remark-parse (parse to AST)
    ↓
[remark-rehype (AST transformation)]
    ↓
remark-react (convert to React components)
    ↓
JSX Elements
```

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

### Links Component

Source: https://github.com/bburns/dnd-rules/blob/master/_autodocs/api-reference/app-component.md

Displays affiliate links to recommended D&D books. This component returns a JSX div containing product links.

```javascript
function Links()
```

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

### App Component Usage with Extended Groups

Source: https://github.com/bburns/dnd-rules/blob/master/_autodocs/api-reference/table-of-contents-component.md

Shows how to call the TableOfContents component from the main App component, using an extended 'groups' array that includes static pages like 'Introduction', 'About', and 'License'.

```javascript
const groupsExtended = [
  {id:'introduction', name:"Introduction"},
  ...groups,
  {id:'about', name:"About"},
  {id:'license', name:"License"}
]

<TableOfContents groups={groupsExtended} />
```

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

### Production Browser Support

Source: https://github.com/bburns/dnd-rules/blob/master/_autodocs/configuration.md

Targets browsers with >0.2% market share, excluding dead browsers and Opera Mini.

```json
{
  "production": [
    ">0.2%",
    "not dead",
    "not op_mini all"
  ]
}
```

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

### Object Creation Function

Source: https://github.com/bburns/dnd-rules/blob/master/_autodocs/compilation-pipeline.md

A utility function to initialize a new object with default properties for 'name' and 'contents'.

```javascript
function createObj() {
  return {
    name: '',
    contents: ''
  }
}
```

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

### Import and Transform Rules Data

Source: https://github.com/bburns/dnd-rules/blob/master/_autodocs/types.md

Shows how to import compiled rule data and transform it into a hierarchical tree structure using the 'arrayToTree' library. Filters are applied to select specific rule types.

```javascript
import items from '../../assets/rules.json'

const items2 = items.filter(item => item.type === 'complexity' || item.type === 'rule')
const groups = arrayToTree(items2, { parentId: 'complexity', dataField: null })
```

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

### Module Organization: Component Modules

Source: https://github.com/bburns/dnd-rules/blob/master/_autodocs/architecture.md

Lists the main component modules and their respective purposes within the application's structure.

```plaintext
| Module | Purpose |
|--------|---------|
| src/components/app/ | Main app layout and rule rendering |
| src/components/toc/ | Table of contents sidebar |
| src/services/serviceWorker.js | PWA offline support (disabled by default) |
```

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

### Package Manager Version

Source: https://github.com/bburns/dnd-rules/blob/master/_autodocs/configuration.md

Ensures reproducible builds across different environments by pinning the Yarn version.

```yaml
packageManager: yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e
```

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

### Compilation Pipeline Flow

Source: https://github.com/bburns/dnd-rules/blob/master/_autodocs/compilation-pipeline.md

Illustrates the flow of the nm2json compilation process from source Neomem rules to the final JSON output consumed by a React App.

```text
rules/rules.nm (source)
    ↓
scripts/nm2json.js (processor)
    ↓
src/assets/rules.json (output)
    ↓
React App (consumer)
    ↓
Interactive Rules Interface
```

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

### Custom D&D Rule Properties

Source: https://github.com/bburns/dnd-rules/blob/master/_autodocs/rule-categories.md

Demonstrates how to define and use custom properties for D&D rules.

```plaintext
^difficulty: high
^season: winter
^npc-related: false
```

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

### markdownToReact

Source: https://github.com/bburns/dnd-rules/blob/master/_autodocs/api-reference/app-component.md

Converts Markdown strings to React elements using the Unified pipeline with Remark and Remark-React. Supports standard Markdown syntax.

```APIDOC
## markdownToReact

### Description

Converts Markdown strings to React elements using the Unified pipeline with Remark and Remark-React. Uses the following plugins:
- `remark-parse`: Parses Markdown to AST
- `remark-react`: Converts AST to React components

Supports standard Markdown syntax including headings, lists, emphasis, and links.

### Parameters

- **md** (string) - Required - Markdown text to convert

### Return Type

Returns a JSX element with rendered Markdown.

### Example

```javascript
const md = '# Heading\n\nParagraph with [link](#anchor).'
const reactElement = markdownToReact(md)
```
```

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

### Watch Rules for Changes

Source: https://github.com/bburns/dnd-rules/blob/master/_autodocs/configuration.md

Run this script during development to automatically recompile rules when changes are detected in specified files.

```bash
yarn watch-rules
```

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

### SRD Property Format

Source: https://github.com/bburns/dnd-rules/blob/master/_autodocs/rule-categories.md

Construct SRD URLs using the base path and specific content paths and anchors.

```plaintext
https://www.dndbeyond.com/sources/basic-rules/combat#ActionsinCombat
```