Dile Docs Pages

Dile Components documentation pages

The documentation site is an Eleventy project rooted at docs/ (config in eleventy.config.cjs). Each section is a folder of Markdown pages whose shared data lives in a <folder>.json file (layout, collection tag, hasMarkdown, markdownFolder), so pages never declare layout unless the folder lacks that JSON.

Before writing, read the component source (packages/<pkg>/components/<name>/) and its demo (demos/<pkg>/) so the docs match the real API: reactive properties, dispatched events, public methods, slots and CSS custom properties. Then open 1–2 sibling pages of the same family (e.g. another input, another spinner) and mirror them.

Where the page goes

The page URL is /<folder>/<file-name>/ (e.g. /components/dile-button/); use that form for internal links.

Front matter

---
title: QR Code
package: '@dile/utils'
element: '<dile-qr-code>'
status: stable
summary: Lightweight component to generate and render customizable QR codes on a canvas.
tags: utils
---

• title: human name in Title Case, without the dile- prefix ("Input Money", "Select Ajax Overlay"). Used as the HTML <title>, card title and nav label.
• package: quoted npm package ('@dile/ui', '@dile/utils', '@dile/crud', '@dile/editor', '@dile/lib').
• element:
  • docs/components/: tag with escaped brackets, quoted: '<dile-name>' (it is printed inside HTML cards).
  • docs/crud/: bare tag name: dile-crud-list.
  • Mixins / lib: the class or mixin name: DileForm, DileAppRouter.
• status: stable (default for finished components), experimental (new/unsettled API) or deprecated. Deprecated pages are excluded from catalog and nav collections.
• summary: one sentence (~15–25 words) saying what it does and its key features. It is shown on the catalog card and in llms.txt, so make it self-explanatory.
• tags: decides the catalog group and side-nav menu. Must match the lists in eleventy.config.cjs:
  • components: forms, feedback, icons, utils, menu, spinner, layout, or input (input family, shown through _includes/input-family-grid.html). Any other tag lands in "Other components".
  • crud: introduction, configuration, ajax, operations, main, 'Crud extras' (quote tags with spaces).
  • mixins: formData, effects, scroll.
  • lib: 'state management', routing, 'app components'.
  • icons: lucide, fontawesome, material, phosphor, tabler, remixicon, 'universal icons'.
• Optional: order: <n> (crud/lib pages sorted manually), hideLink: true (keep the page out of nav listings).

If you introduce a brand new tag group, it must also be added to the corresponding list in eleventy.config.cjs (and an icon imported in docs/assets/js/index.js for component tags) — prefer reusing an existing tag.

Page structure (component pages)

Keep this order; omit sections that don't apply. Headings are in English, like all docs.

# dile-name

One or two sentences describing the Web Component and its purpose.

## Installation

```bash
npm i @dile/ui
```

## Usage

Import the component.

```javascript
import '@dile/ui/components/name/name.js';
```

Use the component.

```html
<dile-name attribute="value"></dile-name>
```

## Properties
## Methods
## Events
## Slots
## CSS Custom Properties
## Accessibility        (optional: keyboard support, ARIA, labels)

## dile-name demos

### Basic usage
```html:preview
...
```

### Styled
...

Notes:

• The H1 is the tag name (# dile-name), or the class name for mixins (# DileForm).
• The import path is the public entry point under the package: @dile/<pkg>/components/<folder>/<file>.js.
• Feature-specific explanations (e.g. "Adding an icon", "Form Integration", "File downloads") go as extra ##/### sections after Usage/Properties and before the demos.
• Use blockquotes (> **Note:** ...) for caveats and recommendations.
• Link related components with absolute site paths: [dile-iconlib](/icons/dile-iconlib/).

Properties

Prefer the 4-column table for new pages. Tables whose header has 4 columns including "Property" plus Type/Default/Description get the properties-table class and a responsive mobile layout (docs/_utilities/properties-table-transform.cjs), so keep exactly these columns:

| Property | Type | Default | Description |
| :--- | :--- | :--- | :--- |
| `value` | `String` | `""` | The text encoded in the QR code. |
| `errorCorrection` | `String` | `"M"` | Error correction level. Exposed via `error-correction`. |

• Use the JS property name; when the attribute differs (camelCase → kebab-case), say "Exposed via kebab-name" or "(attribute kebab-name)".
• Older pages use a bullet list (- **disabled**: Boolean, mark button as disabled.). Keep that format when making small edits to such pages; don't mix both formats in one page.

Methods, Events, Slots

Bullet lists with the name in bold:

## Methods

- **open()**: Opens the modal box.
- **close()**: Closes the modal box.

## Events

- **dile-modal-closed**: Dispatched when the modal box is closed for any reason. `detail` contains ...

## Slots

- **main slot** (unnamed slot): the card main content.
- **footer slot**: card footer.

Always document the event detail shape. A short addEventListener snippet in a javascript block is welcome for non-trivial events.

CSS Custom Properties

Pipe table with exactly these three columns (no leading pipes, as in existing pages):

Custom property | Description | Default
----------------|-------------|---------
--dile-name-color | Text color | #303030
--dile-name-size | Component size | 32px

When a value falls back to generic theme variables, write the chain in Default (--dile-primary-color or #7BB93D). If the component reuses another component's properties, say so and link it. If it only has plain Shadow DOM styles, a "CSS Encapsulation"/"Styling" section with the :host CSS block is fine.