docpensieve 0.5.0-beta.2 → 0.5.0-beta.4

package/bin/docpensieve.js

@@ -63,6 +63,7 @@ program
   .command('dev')
   .description('Development server with reload')
   .option('-p, --port <number>', 'listening port', Number, 3000)
+  .option('--host <address>', 'address to listen on; 0.0.0.0 opens it to the network', '127.0.0.1')
   .action(async (options) => {
     await dev(options);
   });
@@ -71,6 +72,7 @@ program
   .command('serve')
   .description('Serves the output folder statically')
   .option('-p, --port <number>', 'listening port', Number, 4000)
+  .option('--host <address>', 'address to listen on; 0.0.0.0 opens it to the network', '127.0.0.1')
   .option('-d, --dir <dir>', 'folder to serve')
   .action(async (options) => {
     await serve(options);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "docpensieve",
-  "version": "0.5.0-beta.2",
+  "version": "0.5.0-beta.4",
   "description": "DocPensieve command-line interface (init, build, check, dev, serve)",
   "type": "module",
   "license": "MIT",
@@ -24,10 +24,10 @@
     "types"
   ],
   "dependencies": {
-    "@docpensieve/components": "0.5.0-beta.2",
-    "@docpensieve/core": "0.5.0-beta.2",
-    "@docpensieve/shared": "0.5.0-beta.2",
-    "@docpensieve/theme": "0.5.0-beta.2",
+    "@docpensieve/components": "0.5.0-beta.4",
+    "@docpensieve/core": "0.5.0-beta.4",
+    "@docpensieve/shared": "0.5.0-beta.4",
+    "@docpensieve/theme": "0.5.0-beta.4",
     "chalk": "^6.0.0",
     "chokidar": "^5.0.0",
     "commander": "^15.0.0"

package/src/commands/build.js

@@ -11,6 +11,7 @@ import {
   createRegistry,
   setSiteContext,
   setAdmonitionKinds,
+  setSnippetIcons,
 } from '@docpensieve/components';
 import { SiteGenerator, loadConfig, resolveVersion } from '@docpensieve/core';
 
@@ -28,6 +29,7 @@ export async function build(versionSlug, options = {}) {
 
   // The kinds a project declares, beside the ones shipped.
   setAdmonitionKinds(config.admonitions);
+  setSnippetIcons(config.snippetIcons);
 
   const generator = new SiteGenerator(config, {
     // `globalComponents: false` removes the shipped components: a project that

package/src/commands/dev.js

@@ -12,12 +12,20 @@ import {
   createRegistry,
   setSiteContext,
   setAdmonitionKinds,
+  setSnippetIcons,
 } from '@docpensieve/components';
 import { SiteGenerator, loadConfig } from '@docpensieve/core';
 import { CONFIG_FILENAME, DocPensieveError, THEME_FOLDER } from '@docpensieve/shared';
 import chokidar from 'chokidar';
 
-import { RELOAD_PATH, createStaticServer, listen } from '../server.js';
+import {
+  DEFAULT_HOST,
+  RELOAD_PATH,
+  createStaticServer,
+  exposedNotice,
+  isExposed,
+  listen,
+} from '../server.js';
 import { createTheme } from '../theme.js';
 
 /** Default port of `dev`, distinct from that of `serve`. */
@@ -40,7 +48,7 @@ const RELOAD_SCRIPT =
   `.addEventListener("message",()=>location.reload())</script>`;
 
 /**
- * @param {{ port?: number, cwd?: string }} [options]
+ * @param {{ port?: number, host?: string, cwd?: string }} [options]
  * @returns {Promise<{
  *   server: import('node:http').Server,
  *   watcher: import('chokidar').FSWatcher,
@@ -62,6 +70,7 @@ export async function dev(options = {}) {
     // Read again with the rest: a kind added to the configuration must show
     // without restarting the command.
     setAdmonitionKinds(current.admonitions);
+    setSnippetIcons(current.snippetIcons);
     const generator = new SiteGenerator(current, {
       // `globalComponents: false` removes the shipped components: a project
       // that defines its own thus avoids a name collision. The option was
@@ -87,8 +96,10 @@ export async function dev(options = {}) {
     },
   });
 
-  const port = await listen(server, options.port ?? DEFAULT_PORT);
+  const host = options.host ?? DEFAULT_HOST;
+  const port = await listen(server, options.port ?? DEFAULT_PORT, 10, host);
   const url = `http://localhost:${port}${config.baseUrl}`;
+  if (isExposed(host)) console.log(exposedNotice(host));
   console.log(`served at ${url}`);
 
   // The project's own stylesheets, re-read by every rebuild.

package/src/commands/init.js

@@ -368,6 +368,16 @@ function renderConfig({ name, theme, siteUrl, version, translation = '' }) {
     '  // Back-to-top button on every page.',
     '  scrollToTop: true,',
     '',
+    '  // A button copying each block of code. It is the one thing that makes a',
+    '  // content page load a script — a small file, shared by every page of the',
+    '  // version — so it stays off until you ask for it.',
+    '  copyCode: false,',
+    '',
+    '  // Icon collection a code block takes the mark of its language from, for',
+    "  // instance 'simple-icons' once @iconify-json/simple-icons is installed.",
+    '  // Left empty, the short name of the language is shown instead.',
+    "  snippetIcons: '',",
+    '',
     '  // The header stays at the top of the screen. false lets it scroll away',
     '  // with the page, and gives its height back to the text.',
     '  stickyHeader: true,',
@@ -389,6 +399,10 @@ function renderConfig({ name, theme, siteUrl, version, translation = '' }) {
     '  // A search field in the header, and a search page built with the site.',
     '  // Content pages load no script: the search page alone does.',
     '  search: true,',
+    '',
+    '  // llms.txt at the root of the site, and a Markdown copy beside each',
+    '  // page: what a program reads instead of the HTML. It needs no siteUrl.',
+    '  llms: false,',
     '};',
     '',
     '// Every field is described in the reference of the DocPensieve documentation:',

package/src/commands/serve.js

@@ -10,13 +10,13 @@ import path from 'node:path';
 import { loadConfig } from '@docpensieve/core';
 import { DocPensieveError } from '@docpensieve/shared';
 
-import { createStaticServer, listen } from '../server.js';
+import { DEFAULT_HOST, createStaticServer, exposedNotice, isExposed, listen } from '../server.js';
 
 /** Default port of `serve`, distinct from that of `dev`. */
 const DEFAULT_PORT = 4000;
 
 /**
- * @param {{ port?: number, dir?: string, cwd?: string }} [options]
+ * @param {{ port?: number, host?: string, dir?: string, cwd?: string }} [options]
  * @returns {Promise<{ server: import('node:http').Server, port: number, url: string }>}
  * @throws {DocPensieveError} When the folder to serve does not exist.
  */
@@ -34,11 +34,13 @@ export async function serve(options = {}) {
   // The site is mounted under the configuration's baseUrl: otherwise the links
   // of the generated pages would not resolve locally.
   const server = createStaticServer({ root, basePath: config.baseUrl });
-  const port = await listen(server, options.port ?? DEFAULT_PORT);
+  const host = options.host ?? DEFAULT_HOST;
+  const port = await listen(server, options.port ?? DEFAULT_PORT, 10, host);
   const url = `http://localhost:${port}${config.baseUrl}`;
 
   console.log(`${root}`);
   console.log(`served at ${url}`);
+  if (isExposed(host)) console.log(exposedNotice(host));
 
   return { server, port, url };
 }

package/src/server.js

@@ -4,8 +4,7 @@
  * @module docpensieve/server
  */
 
-import { createReadStream } from 'node:fs';
-import { stat } from 'node:fs/promises';
+import { readFile } from 'node:fs/promises';
 import { createServer } from 'node:http';
 import path from 'node:path';
 
@@ -134,9 +133,15 @@ export function createStaticServer({ root, basePath = '/', inject = null, onRelo
       return;
     }
 
-    let stats;
+    // Read whole, then answer. `dev` empties the version folder at every
+    // rebuild while a browser may still be asking for it: between a `stat`
+    // and a stream the file could vanish, the stream then threw with nobody
+    // listening, and the server went down in the middle of a save. Read at
+    // once, a file is either there or answered 404 — and its length is the
+    // one actually sent, not the one a rebuild was busy changing.
+    let body;
     try {
-      stats = await stat(filepath);
+      body = await readFile(filepath);
     } catch {
       response.writeHead(404, { 'content-type': 'text/plain; charset=utf-8' });
       response.end(`404 — ${url.pathname}`);
@@ -147,31 +152,49 @@ export function createStaticServer({ root, basePath = '/', inject = null, onRelo
     const headers = { 'content-type': type, 'cache-control': 'no-cache' };
 
     if (inject && type.startsWith('text/html')) {
-      const { readFile } = await import('node:fs/promises');
-      const html = await readFile(filepath, 'utf8');
-      const body = html.includes('</body>')
+      const html = body.toString('utf8');
+      const page = html.includes('</body>')
         ? html.replace('</body>', `${inject}</body>`)
         : html + inject;
-      response.writeHead(200, { ...headers, 'content-length': Buffer.byteLength(body) });
-      response.end(body);
+      response.writeHead(200, { ...headers, 'content-length': Buffer.byteLength(page) });
+      response.end(page);
       return;
     }
 
-    response.writeHead(200, { ...headers, 'content-length': stats.size });
-    createReadStream(filepath).pipe(response);
+    response.writeHead(200, { ...headers, 'content-length': body.length });
+    response.end(body);
   });
 }
 
+/** The loopback address: the site is served to this machine and to no other. */
+export const DEFAULT_HOST = '127.0.0.1';
+
+/**
+ * Whether an address reaches beyond this machine.
+ *
+ * @param {string} host
+ * @returns {boolean}
+ */
+export function isExposed(host) {
+  return !['127.0.0.1', 'localhost', '::1'].includes(host);
+}
+
 /**
  * Starts listening, looking for a free port if needed.
  *
+ * On this machine only, unless asked otherwise. Called without a host, Node
+ * listens on every interface: anyone on the same network — a café, a
+ * coworking space — could read the site being written, drafts included.
+ *
  * @param {import('node:http').Server} server
  * @param {number} port Desired port.
  * @param {number} [attempts] Number of ports tried from `port` on.
+ * @param {string} [host] Address to listen on. `0.0.0.0` opens it to the
+ *   network, which a phone on the same wifi needs.
  * @returns {Promise<number>} The port actually used.
  * @throws {DocPensieveError} When no port is free in the range.
  */
-export function listen(server, port, attempts = 10) {
+export function listen(server, port, attempts = 10, host = DEFAULT_HOST) {
   return new Promise((resolve, reject) => {
     let current = port;
 
@@ -181,7 +204,7 @@ export function listen(server, port, attempts = 10) {
       // the next one beats forcing --port.
       if (error.code === 'EADDRINUSE' && current < port + attempts - 1) {
         current += 1;
-        server.listen(current);
+        server.listen(current, host);
         return;
       }
       server.off('error', onError);
@@ -202,6 +225,17 @@ export function listen(server, port, attempts = 10) {
       const address = server.address();
       resolve(typeof address === 'object' && address !== null ? address.port : current);
     });
-    server.listen(current);
+    server.listen(current, host);
   });
 }
+
+/**
+ * Said when the site is opened to the network, so that it is never done
+ * without the person knowing.
+ *
+ * @param {string} host
+ * @returns {string}
+ */
+export function exposedNotice(host) {
+  return `listening on ${host}: anyone on this network can read the site.`;
+}

package/starter/01-guide/02-first-site.md

@@ -98,6 +98,10 @@ online.
     → ignores the deployment prefix "/my-project/"
 ```
 
+Two commands, and the second reads what the first wrote — so they belong
+together. [Deployment](./deployment/) shows how to say that once, in a
+`package.json`, and have a workflow run the same thing you run.
+
 It is the check to run after any change of `baseUrl`, of folder structure or of
 URL. When something does not add up, [When it breaks](./when-it-breaks/) lists
 the failures this tool produces, by the symptom you see.

package/starter/01-guide/06-deployment.md

@@ -88,6 +88,32 @@ the tool through `npx`, which takes the latest published version. To pin it
 from one build to the next, declare `docpensieve` in a `package.json` and add
 `npm ci` before the build.
 
+## One command, for you and for the machine
+
+Two commands are one too many to remember, and a workflow should run exactly
+what you run. A `package.json` is the place to say it once:
+
+```json
+{
+  "scripts": {
+    "docs": "docpensieve dev",
+    "check": "docpensieve build && docpensieve check"
+  }
+}
+```
+
+`npm run check` then generates the site and reads it back. A dead link, a
+nesting the markup cannot carry, a page that stops the build: each one fails
+the command, on your machine and in your workflow, in the same way and with
+the same message.
+
+The `&&` is the point of it. `check` reads what `build` wrote, so a check run
+on its own tells you about the site as it was the last time it was generated —
+which, the day you forget, is the day it matters.
+
+With that in place the recipe above becomes `npm ci` and `npm run check`, and
+the version of the tool stops depending on the day the workflow ran.
+
 ## Reading back before publishing
 
 A generated site can compile without error and contain dead links.
@@ -134,6 +160,10 @@ For pages that are news rather than reference — release notes, a changelog —
 give them a `date` and set `feed: true`: `feed.xml` then lists them, newest
 first. The fields are in the [configuration reference](../reference/configuration/).
 
+For programs that read documentation on someone's behalf, `llms: true` writes
+`llms.txt` at the root and a Markdown copy beside each page — the text
+without the markup. It needs no `siteUrl`.
+
 ## What the reader downloads
 
 The build keeps it light on its own. The stylesheet is minified — a third to

package/starter/01-guide/07-migrate-to-beta.md

@@ -31,8 +31,24 @@ npx docpensieve check
 
 ## What changes on its own
 
-Nothing yet: the 0.5 has just opened. Each change is listed here as it lands,
-beside what it asks of a project already built on the 0.4.
+- **`dev` and `serve` listen on this machine only.** They used to listen on
+  every interface, so anyone on the same network could read the site being
+  written. To look at it from a phone on the same wifi, say so:
+  `npx docpensieve dev --host 0.0.0.0`.
+- **Code blocks carry a background of their own.** A block in a language the
+  highlighter does not know used to sit on the bare page; it now looks like
+  every other block.
+- **An error keeps its hint.** An error the tool raises while a page compiles
+  no longer comes out as a generic syntax complaint.
+
+## What is worth turning on
+
+- [Snippet](../components/snippet/), to show a real file rather than a copy.
+- [Hero](../components/hero/) and [Calendar](../components/calendar/).
+- `copyCode`, a copy button on every code block — off by default, since it is
+  what makes a page load a script. See [the reference](../reference/configuration/).
+- `snippetIcons`, if your project installs an icon collection.
+- `llms`, for `llms.txt` and a Markdown copy of each page.
 
 ## What to check afterwards
 

package/starter/02-components/01-card.mdx

@@ -341,3 +341,28 @@ in none: a class of yours always wins, even to undo the default style.
 </Card>
 
 </ForTheme>
+
+The commonest row is a row of cards; [Columns](./columns/) shows how to keep
+them the same height, which a grid alone does not.
+
+## Properties
+
+`Card`:
+
+| Property    | Type      | Effect                                                           |
+| ----------- | --------- | ---------------------------------------------------------------- |
+| `elevated`  | `boolean` | Adds a shadow.                                                   |
+| `href`      | `string`  | Makes the whole card a link, resolved like any link of the page. |
+| `className` | `string`  | Classes added to the card.                                       |
+| `style`     | `object`  | Inline styles on the card.                                       |
+
+`CardImage`:
+
+| Property                   | Type     | Effect                                                           |
+| -------------------------- | -------- | ---------------------------------------------------------------- |
+| `src`                      | `string` | The image, resolved like any link of the page.                   |
+| `alt`                      | `string` | What the image shows. Empty by default: the image is decorative. |
+| `loading`                  | `string` | `lazy`, the default, or `eager`.                                 |
+| `title`, `srcSet`, `sizes` | `string` | Passed to the image as they are.                                 |
+
+`CardHeader`, `CardBody` and `CardFooter` take `className` and `style`.

package/starter/02-components/02-columns.mdx

@@ -287,3 +287,15 @@ window to check.
 
 The most frequent row is a row of cards; [Card](./card/) shows how to keep
 them to the same height, which a grid alone does not do.
+
+## Properties
+
+`Column`:
+
+| Property    | Type     | Effect                                                                                                            |
+| ----------- | -------- | ----------------------------------------------------------------------------------------------------------------- |
+| `span`      | `number` | Tracks taken out of twelve — `6` for a half, `8` for two thirds. Without it, the columns share the space equally. |
+| `className` | `string` | Classes added to the column.                                                                                      |
+| `style`     | `object` | Inline styles on the column.                                                                                      |
+
+`Columns` takes `className` and `style`. A `Column` outside a `Columns` stops the build.

package/starter/02-components/03-time-timer.mdx

@@ -122,3 +122,22 @@ names the faulty value and recalls the expected format.
 Announcing a release is what this is usually for, and [Versions](../guide/versions/)
 covers the rest of that cycle — the banner a prerelease carries on its own,
 and the day the two tracks swap.
+
+## Properties
+
+`TimeTimer`:
+
+| Property   | Type      | Effect                                                                                |
+| ---------- | --------- | ------------------------------------------------------------------------------------- |
+| `date`     | `string`  | A single day, `DD/MM/YYYY`, optionally followed by `HH:mm`. The year may be left out. |
+| `start`    | `string`  | Start of a period, in the same format, with `duration`.                               |
+| `duration` | `string`  | Length of the period from `start`: `30d`, `2h`, `45m`.                                |
+| `strict`   | `boolean` | Reads the dates in UTC rather than in local time.                                     |
+| `now`      | `Date`    | For tests only: without it, the moment of the build stands.                           |
+
+The fallbacks each take one bound:
+
+| Property                    | Type     | Effect                                                                  |
+| --------------------------- | -------- | ----------------------------------------------------------------------- |
+| `start` on `FallbackBefore` | `string` | From when the content before the period shows. Without it, from always. |
+| `end` on `FallbackAfter`    | `string` | Until when the content after the period shows. Without it, for good.    |

package/starter/02-components/04-tooltip.mdx

@@ -138,3 +138,12 @@ unnoticed for a long time. So does an unknown side.
 
 A tooltip explains a term without leaving the sentence. A remark that needs
 its own space is an [Admonition](./admonition/) instead.
+
+## Properties
+
+| Property    | Type     | Effect                                                             |
+| ----------- | -------- | ------------------------------------------------------------------ |
+| `text`      | `string` | Content of the bubble. Required: an empty bubble would never show. |
+| `placement` | `string` | `top`, the default, `bottom`, `left` or `right`.                   |
+| `className` | `string` | Classes added to the term.                                         |
+| `style`     | `object` | Inline styles on the term.                                         |

package/starter/02-components/05-tree.mdx

@@ -195,3 +195,16 @@ label is refused too.
 A tree is how this documentation shows the shape of a project. What those
 folders become once built — the order, the addresses — is in
 [Writing pages](../guide/writing-pages/).
+
+## Properties
+
+`TreeItem`:
+
+| Property    | Type            | Effect                                      |
+| ----------- | --------------- | ------------------------------------------- |
+| `label`     | text or element | What the line shows.                        |
+| `open`      | `boolean`       | Opens the branch as soon as the page opens. |
+| `className` | `string`        | Classes added to the line.                  |
+| `style`     | `object`        | Inline styles on the line.                  |
+
+`Tree` takes `className` and `style`.

package/starter/02-components/06-scroll-to-top.mdx

@@ -144,3 +144,13 @@ build is enough to keep it right.
 
 Setting one up takes a few lines in the pipeline that already builds the
 site: [Deployment](../guide/deployment/) has the recipe.
+
+## Properties
+
+| Property    | Type     | Effect                                                                                                        |
+| ----------- | -------- | ------------------------------------------------------------------------------------------------------------- |
+| `label`     | `string` | Name read by a screen reader. By default, the words of the page's language — "Back to top", "Retour en haut". |
+| `className` | `string` | Classes added to the button.                                                                                  |
+| `style`     | `object` | Inline styles on the button.                                                                                  |
+
+Its children, when it has any, replace the arrow.

package/starter/02-components/07-skill.mdx

@@ -274,3 +274,19 @@ is full from the start — the value stays readable, which is what matters.
 A level outside 0–100 stops the build, as does a gauge without a name, a level
 that is not a number, or an unknown `shape`. A silent or overflowing bar goes
 unnoticed on review.
+
+## Properties
+
+| Property    | Type            | Effect                                                                         |
+| ----------- | --------------- | ------------------------------------------------------------------------------ |
+| `name`      | text or element | What is measured.                                                              |
+| `level`     | `number`        | The level, as a percentage.                                                    |
+| `showValue` | `boolean`       | Shows the percentage. On by default; off, the gauge still announces its value. |
+| `shape`     | `string`        | `bar`, the default, or `circle`.                                               |
+| `icon`      | element         | Shown before the name — a `LogoIcon` fits there.                               |
+| `color`     | `string`        | Colour of the fill: any CSS colour, the accent by default.                     |
+| `label`     | `string`        | Name for screen readers, when `name` is not text.                              |
+| `className` | `string`        | Classes added to the gauge.                                                    |
+| `style`     | `object`        | Inline styles on the gauge.                                                    |
+
+Its children stand as a comment under the gauge.

package/starter/02-components/08-logo-icon.mdx

@@ -171,3 +171,13 @@ A component loads no JavaScript, and this one is not going to introduce any.
 
 A kind of admonition takes its mark through this same component — see
 [Admonition](./admonition/).
+
+## Properties
+
+| Property    | Type     | Effect                                                                                  |
+| ----------- | -------- | --------------------------------------------------------------------------------------- |
+| `src`       | `string` | An SVG of the project, or `prefix:name` from an installed icon collection.              |
+| `label`     | `string` | What the icon means. Without it, the icon is decorative and hidden from screen readers. |
+| `size`      | `string` | Any CSS length.                                                                         |
+| `className` | `string` | Classes added to the icon.                                                              |
+| `style`     | `object` | Inline styles on the icon.                                                              |

package/starter/02-components/09-for-theme.mdx

@@ -46,3 +46,9 @@ without a word.
 
 Which theme a project runs is one field of its configuration, and the whole
 of what it changes is in [Themes](../guide/themes/).
+
+## Properties
+
+| Property    | Type     | Effect                                                           |
+| ----------- | -------- | ---------------------------------------------------------------- |
+| `framework` | `string` | `tailwind` or `custom`: the content shows only under that theme. |

package/starter/02-components/10-cards.mdx

@@ -74,3 +74,12 @@ themes, so this needs no variant:
 Like every component here, the grid is built at the build. What reaches the
 reader is a list of links: it works with JavaScript turned off, and a card
 never waits for anything to become clickable.
+
+## Properties
+
+| Property    | Type     | Effect                                                                                                |
+| ----------- | -------- | ----------------------------------------------------------------------------------------------------- |
+| `of`        | `string` | `all`, the default; `series` for the sub-folders alone; `pages` for the pages beside the index alone. |
+| `from`      | `string` | Slug of another folder to list, instead of the one holding the page.                                  |
+| `className` | `string` | Classes added to the grid.                                                                            |
+| `style`     | `object` | Inline styles on the grid.                                                                            |

package/starter/02-components/11-menu.mdx

@@ -127,3 +127,25 @@ A `MenuLink` or a `MenuGroup` written outside a `Menu` stops the build, and so
 does an entry without a target or a group without a title. Each of these would
 otherwise render something that looks like a menu and leads nowhere — the kind
 of fault a review does not catch.
+
+## Properties
+
+`Menu`:
+
+| Property | Type     | Effect                                                                                                      |
+| -------- | -------- | ----------------------------------------------------------------------------------------------------------- |
+| `label`  | `string` | Name for screen readers, and label of the button it folds into. By default, the page's own word for a menu. |
+
+`MenuLink`:
+
+| Property | Type     | Effect                                            |
+| -------- | -------- | ------------------------------------------------- |
+| `href`   | `string` | Where it leads, resolved like any link. Required. |
+
+`MenuGroup`:
+
+| Property | Type     | Effect                          |
+| -------- | -------- | ------------------------------- |
+| `title`  | `string` | Heading of the group. Required. |
+
+All three take `className` and `style`.

package/starter/02-components/12-admonition.mdx

@@ -152,3 +152,12 @@ Its orphan branch keeps what was built, and the history keeps the sources.
 Like every component here, it is rendered at the build. It is an `aside`
 announced as a note, with its icon hidden from screen readers — the title
 beside it already says the kind, and saying it twice helps nobody.
+
+## Properties
+
+| Property    | Type     | Effect                                                                                                     |
+| ----------- | -------- | ---------------------------------------------------------------------------------------------------------- |
+| `type`      | `string` | The kind: `note`, the default, `info`, `tip`, `attention`, `alert`, `danger`, or one the project declares. |
+| `title`     | `string` | Replaces the label of the kind, for this block alone.                                                      |
+| `className` | `string` | Classes added to the block.                                                                                |
+| `style`     | `object` | Inline styles on the block.                                                                                |