### Local Development Setup Commands

Source: https://github.com/w3c/matf/blob/main/README.md

These commands are used for setting up the local development environment for the MATF project. They involve installing dependencies and running a script to generate the main HTML file.

```bash
npm install
node matf.js
```

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

### Example Markdown Plugin for Rendering Examples

Source: https://github.com/w3c/matf/blob/main/README.md

This JavaScript plugin adds a custom Markdown tag `[example:<markdown>]` to render content within an 'Example' component. It's useful for showcasing specific accessibility examples within the documentation.

```javascript
/* ExamplePlugin: adds the `[example:<markdown>]` tag to render an `Example` containing the given `<markdown>`. */
```

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

### Install and Run Documentation Generator (Bash)

Source: https://context7.com/w3c/matf/llms.txt

This command-line usage demonstrates how to install the project's dependencies using npm and then execute the main build script (`matf.js`) to generate the `index.html` documentation file and automatically open it in the default web browser.

```bash
# Install dependencies
npm install

# Generate index.html and open in browser
node matf.js

# Output:
# Initializing markdownit and custom plugins...
# Fetching rendered HTML for: https://www.w3.org/TR/WCAG22/
# Fetching rendered HTML for: https://www.w3.org/TR/wcag2ict-22/
# Rendering markdown files in 'comments'...
# Rendering HTML for 62 files...
# Rendering markdown files in 'sections'...
# Rendering HTML for 15 files...
# Writing 245892 characters to /path/to/matf/index.html
# Script completed successfully!

```

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

### Render Numbered Example Blocks (JavaScript)

Source: https://context7.com/w3c/matf/llms.txt

The ExamplePlugin extends AdmonitionPlugin to render numbered example blocks. It takes HTML content and a number, creating a div with 'example wcag2mobile' classes. A marker displays 'Example X' or 'Example' if no number is provided. This plugin illustrates practical application of accessibility guidance.

```javascript
import { AdmonitionPlugin } from './admonition.js';

export class ExamplePlugin extends AdmonitionPlugin {
  constructor() {
    super('example');
  }

  static async init() {
    return new ExamplePlugin().plugin();
  }

  // Render numbered example block
  content(html, number) {
    const title = number !== null ? `Example ${number}` : 'Example';
    return `
      <div class="example wcag2mobile">
        <div class="marker">${title}</div>
        ${html}
      </div>
    `;
  }
}
```

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

### Initialize and Execute Documentation Build Pipeline (Node.js)

Source: https://context7.com/w3c/matf/llms.txt

The main `matf.js` script initializes markdown-it with custom plugins, renders markdown content from specified folders, generates an HTML document using EJS templates, and opens the generated `index.html` in a browser. It relies on several Node.js modules and custom plugins for functionality.

```javascript
// matf.js - Main entry point for documentation generation
import fs from 'fs/promises';
import path from 'path';
import semver from 'semver';
import markdownit from 'markdown-it';
import ejs from 'ejs';
import open from 'open';

import { ExamplePlugin } from './plugins/example.js';
import { GitHubPlugin } from './plugins/github.js';
import { NotePlugin } from './plugins/note.js';
import { WcagPlugin } from './plugins/wcag.js';

const root = process.cwd();

// Initialize markdownit with custom plugins
const initMarkdown = async () => {
  console.log(`Initializing markdownit and custom plugins...`);

  return markdownit({ html: true })
    .use(await ExamplePlugin.init())
    .use(await GitHubPlugin.init('https://github.com/w3c/matf'))
    .use(await NotePlugin.init())
    .use(await WcagPlugin.init('wcag', 'https://www.w3.org/TR/WCAG22/'))
    .use(await WcagPlugin.init('wcag2ict', 'https://www.w3.org/TR/wcag2ict-22/'));
};

// Execute the build pipeline
const execute = async () => {
  try {
    const md = await initMarkdown();
    const { comments, sections } = await renderFolders(md);
    const html = await renderTemplate(comments, sections);
    const indexFile = await writeFile('index.html', html);
    await open(indexFile, { wait: false });
    console.log('Script completed successfully!');
  } catch (error) {
    console.error(`Script encountered error: ${error}`);
    throw error;
  }
};
execute();

```

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

### Project Dependencies (JSON)

Source: https://context7.com/w3c/matf/llms.txt

This JSON object lists the npm packages used by the 'matf' project. Key dependencies include 'cheerio' for HTML parsing, 'ejs' for templating, 'markdown-it' for Markdown rendering, 'open' for opening URLs, 'puppeteer' for browser automation, and 'semver' for semantic version parsing and comparison.

```json
{
  "name": "matf",
  "version": "0.1.0",
  "type": "module",
  "dependencies": {
    "cheerio": "^1.0.0",
    "ejs": "^3.1.10",
    "markdown-it": "^14.1.0",
    "open": "^10.1.0",
    "puppeteer": "^23.9.0",
    "semver": "^7.6.3"
  }
}

```

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

### Note Markdown Plugin for Rendering Notes

Source: https://github.com/w3c/matf/blob/main/README.md

This JavaScript plugin introduces the `[note:<markdown>]` tag for rendering content within a 'Note' component. It's designed to highlight important information or remarks in the documentation.

```javascript
/* NotePlugin: adds the `[note:<markdown>]` tag to render a `Note` containing the given `<markdown>`. */
```

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

### GitHub Issue Markdown Plugin for Linking

Source: https://github.com/w3c/matf/blob/main/README.md

This JavaScript plugin enables the `[issue:<issue>]` Markdown tag, which renders a 'Note' component linking to a specified GitHub issue. This facilitates easy referencing of discussions and tasks.

```javascript
/* GitHubPlugin: adds the `[issue:<issue>]` tag to render a `Note` linking to the given GitHub `<issue>`. */
```

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

### Render Inline Notes with Admonition Styling (JavaScript)

Source: https://context7.com/w3c/matf/llms.txt

The NotePlugin extends AdmonitionPlugin to render inline notes styled as W3C admonitions. It takes HTML content and an optional number, wrapping it in a div with 'note wcag2mobile' classes for specific styling. This plugin is used to highlight supplementary information.

```javascript
import { AdmonitionPlugin } from './admonition.js';

export class NotePlugin extends AdmonitionPlugin {
  constructor() {
    super('note');
  }

  static async init() {
    return new NotePlugin().plugin();
  }

  // Render note admonition HTML
  content(html, number) {
    return `
      <div class="note wcag2mobile">
        ${html}
      </div>
    `;
  }
}
```