docpensieve 0.1.0 → 0.1.2

package/starter/03-reference/01-cli.md

@@ -0,0 +1,134 @@
+---
+title: Commands
+description: init, build, check, dev and serve, with their arguments and options.
+tags: [reference, cli]
+
+jsonld:
+  type: TechArticle
+  breadcrumbs: true
+---
+
+# Commands
+
+```bash
+npx docpensieve <command> [arguments] [options]
+```
+
+## `init`
+
+Sets up a documentation project.
+
+```bash
+npx docpensieve init [dir]
+```
+
+| Option                     | Effect                                  |
+| -------------------------- | --------------------------------------- |
+| `[dir]`                    | Target folder. Default: `.`             |
+| `-n, --name <name>`        | Project name                            |
+| `-t, --theme <framework>`  | `tailwind` or `custom`                  |
+| `-u, --site-url <url>`     | Public URL of the site                  |
+| `--version-name <version>` | First version, `1.0` for instance       |
+| `-y, --yes`                | Accepts the defaults without a dialogue |
+| `-f, --force`              | Overwrites an existing configuration    |
+| `--minimal`                | Leaves DocPensieve's documentation out  |
+
+Without `--force`, the command refuses to overwrite an existing configuration.
+
+Unless `--minimal` is given, the command installs DocPensieve's documentation
+in the new site, in `docs/<version>/99-docpensieve/`: a **DocPensieve** section
+at the end of the menu, matching the installed version. Delete that folder when
+you no longer need it.
+
+## `build`
+
+Generates the site.
+
+```bash
+npx docpensieve build [version]
+```
+
+| Option            | Effect                                               |
+| ----------------- | ---------------------------------------------------- |
+| `[version]`       | Version slug. When omitted, every version is built   |
+| `-o, --out <dir>` | Output folder. Default: the one in the configuration |
+
+With a slug, only that version is written, in `versions/<slug>/`. That form
+writes **neither the manifest nor the root redirect**: after adding or
+removing a version, run a full build.
+
+## `check`
+
+Reads the produced site back: internal links and markup.
+
+```bash
+npx docpensieve check
+```
+
+| Option            | Effect                                                 |
+| ----------------- | ------------------------------------------------------ |
+| `-d, --dir <dir>` | Folder to check. Default: the one in the configuration |
+
+### Links
+
+- a target that **ignores the deployment prefix** — the file exists, but the
+  link will lead nowhere once online. It is the symptom of a URL that escaped
+  resolution;
+- a target that **matches no produced file**.
+
+External targets, anchors and `mailto:` are left alone. A target that comes
+back several times in a page is reported only once.
+
+### Markup
+
+- a **paragraph nested** in another one;
+- a **paragraph inside an element that only accepts text**, a `span` for
+  instance;
+- a **block element inside a paragraph**, a heading for instance.
+
+They usually come from the same source, described in
+[Writing pages](../guide/writing-pages/): the content of a JSX tag left alone on
+its line becomes a paragraph. The browser then silently undoes the nesting, the
+wrapper disappears, and the intended layout with it.
+
+If anything is left to fix, the command exits with code 1: it therefore fails a
+continuous integration run without any particular setting.
+
+## `dev`
+
+Development server, which rebuilds on every save.
+
+```bash
+npx docpensieve dev
+```
+
+| Option                | Effect                          |
+| --------------------- | ------------------------------- |
+| `-p, --port <number>` | Listening port. Default: `3000` |
+
+## `serve`
+
+Serves the output folder statically, without rebuilding anything.
+
+```bash
+npx docpensieve serve
+```
+
+| Option                | Effect                          |
+| --------------------- | ------------------------------- |
+| `-p, --port <number>` | Listening port. Default: `4000` |
+| `-d, --dir <dir>`     | Folder to serve                 |
+
+It is the command that faithfully reproduces what a host will do: to check what
+will be published, chain `build` then `serve`.
+
+## Exit codes
+
+| Code | Meaning                                                        |
+| ---- | -------------------------------------------------------------- |
+| `0`  | Everything went well                                           |
+| `1`  | Expected error — message and hint shown, without a stack trace |
+| `2`  | Feature not written yet                                        |
+
+An unexpected error comes out with its full stack trace: it is a defect of the
+generator, not of the documentation it is given.

package/starter/03-reference/02-configuration.md

@@ -0,0 +1,132 @@
+---
+title: Configuration
+description: Every field of docpensieve.config.mjs, its default value and its effect.
+tags: [reference, configuration]
+
+jsonld:
+  type: TechArticle
+  breadcrumbs: true
+---
+
+# Configuration
+
+The `docpensieve.config.mjs` file, at the root of the project.
+
+It is an ES module — hence `.mjs`, which Node reads as one whatever the
+project's `package.json` says. `docpensieve.config.js` works too, in a project
+whose `package.json` declares `"type": "module"`; with both files present, the
+build stops rather than pick one.
+
+```js
+/** @type {import('@docpensieve/core').DocPensieveConfig} */
+export default {
+  projectName: 'My documentation',
+  siteUrl: 'https://example.com/my-project',
+
+  versions: [{ slug: 'v1.0', name: '1.0', folder: 'docs/v1.0', current: true }],
+
+  outDir: 'dist',
+
+  theme: {
+    framework: 'tailwind',
+    darkMode: 'class',
+  },
+
+  sidebar: 'auto',
+  globalComponents: true,
+  jsonld: { enabled: true },
+};
+```
+
+The `@type` comment gives autocompletion and type checking in the editor
+without importing anything: the file stays readable even where DocPensieve
+only runs through `npx`. In a project that installs it as a dependency,
+`defineConfig` from `@docpensieve/core` does the same.
+
+`docpensieve init` writes this file with **every field** in it — set to its
+default, or commented out with an example — so that it also tells you what you
+can change.
+
+## The fields
+
+| Field              | Default             | Effect                                                                      |
+| ------------------ | ------------------- | --------------------------------------------------------------------------- |
+| `projectName`      | `'Documentation'`   | Name shown in the header and in the JSON-LD                                 |
+| `siteUrl`          | `''`                | Public URL. Used for the `canonical` and the JSON-LD                        |
+| `baseUrl`          | `'/'`               | Deployment prefix. Derived from `siteUrl` when omitted                      |
+| `outDir`           | `'dist'`            | Output folder, relative to the root                                         |
+| `versions`         | `[]`                | At least one entry                                                          |
+| `theme`            | see below           | Styling                                                                     |
+| `sidebar`          | `'auto'`            | `'auto'`: the sidebar follows the file tree. The only value written so far  |
+| `globalComponents` | `true`              | Shipped components available without an import                              |
+| `scrollToTop`      | `true`              | Back-to-top button on every page                                            |
+| `jsonld`           | `{ enabled: true }` | Structured data                                                             |
+| `lang`             | `'en'`              | Language of the document, in `<html lang>`. The shell's labels stay English |
+
+## `versions`
+
+```js
+versions: [
+  { slug: 'v2.0', name: '2.0', folder: 'docs/v2.0', current: true },
+  { slug: 'v1.0', name: '1.0', folder: 'docs/v1.0', archived: true },
+],
+```
+
+| Field        | Role                                                             |
+| ------------ | ---------------------------------------------------------------- |
+| `slug`       | URL and branch identifier                                        |
+| `name`       | Label shown in the switcher                                      |
+| `folder`     | Source folder, relative to the root                              |
+| `current`    | Version served by default. At most one                           |
+| `archived`   | Version kept but no longer maintained. Banner, but stays indexed |
+| `prerelease` | Version in preparation. Banner **and** `noindex`                 |
+
+## `theme`
+
+```js
+theme: {
+  framework: 'tailwind',
+  darkMode: 'class',
+  tokens: { '--dp-accent': 'oklch(55% 0.2 250)' },
+  css: '.dp-article h2 { letter-spacing: -0.01em; }',
+  source: '@import "tailwindcss";',
+},
+```
+
+| Field       | Effect                                    |
+| ----------- | ----------------------------------------- |
+| `framework` | `'tailwind'` or `'custom'`                |
+| `darkMode`  | Dark theme strategy                       |
+| `tokens`    | Redefined `--dp-*` tokens                 |
+| `css`       | CSS appended to the produced stylesheet   |
+| `source`    | Stylesheet handed to the utility compiler |
+
+The available tokens are listed in [Themes](../guide/themes/).
+
+## `baseUrl`, and why you rarely write it
+
+A `siteUrl` with a sub-path already gives it: `https://example.com/my-project`
+produces `baseUrl: '/my-project/'`. Writing it is only useful to depart from
+it.
+
+The prefix is normalised with both its slashes. It is what prefixes every
+internal link: if it is wrong, every link is.
+
+## What is refused
+
+| Case                               | Message                           |
+| ---------------------------------- | --------------------------------- |
+| The configuration is not an object | An example of the expected export |
+| No version declared                | An example of a complete entry    |
+| Two versions with the same slug    | The offending slug                |
+| Several `current` versions         | The list of those found           |
+| Unknown `framework`                | The accepted values               |
+| Requested slug not found           | The available slugs               |
+
+Each one stops the build with a message and a hint, without a stack trace.
+
+## What is filled in automatically
+
+If **no** version carries `current`, the first in the list becomes current. A
+single-version configuration therefore has nothing to specify — this field only
+starts to matter from the second version on.

package/starter/03-reference/03-frontmatter.md

@@ -0,0 +1,110 @@
+---
+title: Frontmatter
+description: The fields recognised at the top of a page, and what they produce.
+tags: [reference, frontmatter]
+
+jsonld:
+  type: TechArticle
+  breadcrumbs: true
+  faq:
+    - question: Is the frontmatter mandatory?
+      answer: No. Without a title, the project name stands in; without a date, no date is published.
+    - question: How do I keep a page offline?
+      answer: 'Set draft: true in its frontmatter. It stays in the repository, absent from the output.'
+---
+
+# Frontmatter
+
+A YAML block at the top of the file, between two lines of three dashes.
+Everything in it is optional.
+
+```yaml
+---
+title: Installation
+description: What you need, and how to set up a project.
+date: 2026-09-09
+modified: 2026-09-14
+authors: [Valentin Chevoleau]
+tags: [guide, installation]
+preview: ./screenshot.png
+draft: false
+layout: doc
+
+jsonld:
+  type: TechArticle
+  breadcrumbs: true
+---
+```
+
+## The fields
+
+| Field         | Effect                                                    |
+| ------------- | --------------------------------------------------------- |
+| `title`       | `<title>` tag, menu entry, breadcrumb, JSON-LD `headline` |
+| `description` | `description` metadata and JSON-LD `description`          |
+| `date`        | Publication date                                          |
+| `modified`    | Last modification date. Default: the publication date     |
+| `authors`     | List of authors                                           |
+| `tags`        | Keywords, carried over as `keywords`                      |
+| `preview`     | Image of the page. The path is resolved like a link       |
+| `draft`       | `true` keeps the page out of the output                   |
+| `layout`      | `doc` (default) or `home`                                 |
+| `jsonld`      | Structured data settings                                  |
+
+## `layout`
+
+`doc` is the documentation layout: menu on the left, table of contents on the
+right, content held to reading width.
+
+`home` removes all three. It is what a home page expects, where columns and
+cards take the whole surface.
+
+```yaml
+layout: home
+```
+
+An unknown value stops the build. A typo would otherwise render the page in a
+layout other than the intended one, without a word.
+
+## `jsonld`
+
+```yaml
+jsonld:
+  type: TechArticle
+  breadcrumbs: true
+  faq:
+    - question: Do I need a frontmatter?
+      answer: No, everything in it is optional.
+```
+
+| Field         | Effect                                        |
+| ------------- | --------------------------------------------- |
+| `type`        | `Article`, `TechArticle` or `BlogPosting`     |
+| `breadcrumbs` | `false` removes the breadcrumb                |
+| `faq`         | Questions and answers, published as `FAQPage` |
+
+Every `faq` entry must carry `question` **and** `answer`: if one of them is
+missing, the build stops and says so.
+
+The questions must **also appear in the text of the page**. Search engines
+reject markup that describes invisible content: a FAQ present only in the
+frontmatter exposes the page to losing its structured data.
+
+A `type` outside the list is refused the same way. This very page carries a
+`faq`: its JSON-LD contains the block.
+
+## What does not need to be written
+
+The URL, the place in the menu, the breadcrumb and the `canonical` link are
+derived from the file path and the configuration. Nothing to repeat in the
+frontmatter, and nothing to keep up to date when a file is moved.
+
+## Frequently asked questions
+
+### Is the frontmatter mandatory?
+
+No. Without a title, the project name stands in; without a date, no date is published.
+
+### How do I keep a page offline?
+
+Set `draft: true` in its frontmatter. It stays in the repository, absent from the output.

package/starter/03-reference/04-theme.md

@@ -0,0 +1,149 @@
+---
+title: Theme
+description: Slots, tokens and styling options, one by one.
+tags: [reference, theme]
+
+jsonld:
+  type: TechArticle
+  breadcrumbs: true
+---
+
+# Theme
+
+To learn how to use it, see [Themes](../guide/themes/). This page lists what
+exists.
+
+## The options
+
+```js
+theme: {
+  framework: 'tailwind',
+  darkMode: 'class',
+  tokens: { '--dp-accent': 'oklch(55% 0.2 250)' },
+  css: '.dp-article h2 { letter-spacing: -0.01em; }',
+  source: '@import "tailwindcss";',
+},
+```
+
+| Field       | Default                  | Effect                                                |
+| ----------- | ------------------------ | ----------------------------------------------------- |
+| `framework` | `'tailwind'`             | `'tailwind'` or `'custom'`                            |
+| `darkMode`  | `'class'`                | Dark theme strategy                                   |
+| `tokens`    | —                        | Redefined `--dp-*` tokens, merged with the provider's |
+| `css`       | `''`                     | CSS appended to the produced stylesheet               |
+| `source`    | `@import "tailwindcss";` | Stylesheet handed to the utility compiler             |
+
+`source` only concerns the `tailwind` provider: it is the entry stylesheet it
+compiles. Replacing it lets you add directives — a `@theme` block, for
+instance — without leaving the mechanism. `@plugin` directives are not
+supported yet and stop the build.
+
+## The tokens
+
+Fifteen tokens, which both providers define and the components read. A
+redefined token propagates everywhere, without any component having to know.
+
+| Token                | Role                                                |
+| -------------------- | --------------------------------------------------- |
+| `--dp-bg`            | Page background                                     |
+| `--dp-bg-soft`       | Background of recessed areas — gauge tracks, hovers |
+| `--dp-text`          | Body text                                           |
+| `--dp-text-soft`     | Secondary text — captions, card footers             |
+| `--dp-border`        | Visible borders                                     |
+| `--dp-rule`          | Discreet rules — tree separators                    |
+| `--dp-accent`        | Accent colour — links, fills                        |
+| `--dp-accent-soft`   | Accent background — banners                         |
+| `--dp-shadow`        | Colour of drop shadows                              |
+| `--dp-radius`        | Corner rounding                                     |
+| `--dp-font`          | Font family of the text                             |
+| `--dp-font-mono`     | Monospaced family — code, trees                     |
+| `--dp-content-width` | Reading width. `none` by default                    |
+| `--dp-sidebar-width` | Menu column                                         |
+| `--dp-toc-width`     | Table of contents column                            |
+
+Some components add their own, documented on their page: `--dp-skill-size` for
+a circle gauge, `--dp-skill-color` for the tint of a gauge,
+`--dp-logo-icon-size` for an icon.
+
+## The slots
+
+The templates write no class. They ask for the class of each slot, and the
+theme answers. A provider only redefines what it changes; everything else keeps
+the `dp-*` class below.
+
+| Slot            | Default class             | Where                                           |
+| --------------- | ------------------------- | ----------------------------------------------- |
+| `skip`          | `dp-skip`                 | Skip link to the content                        |
+| `header`        | `dp-header`               | Site header                                     |
+| `brand`         | `dp-brand`                | Project name, in the header                     |
+| `versions`      | `dp-versions`             | Version switcher                                |
+| `versionsList`  | `dp-versions-list`        | Open list of the switcher                       |
+| `shell`         | `dp-shell`                | Menu / content / table of contents grid         |
+| `shellWide`     | `dp-shell dp-shell--wide` | The same, without menu or table of contents     |
+| `sidebar`       | `dp-sidebar`              | Menu column                                     |
+| `nav`           | `dp-nav`                  | Navigation list                                 |
+| `navItem`       | `dp-nav-item`             | Navigation entry                                |
+| `navItemParent` | `dp-nav-item--parent`     | Entry that holds a section                      |
+| `navLink`       | `dp-nav-link`             | Navigation link                                 |
+| `navLabel`      | `dp-nav-label`            | Section label, not clickable                    |
+| `notice`        | `dp-notice`               | Banner of the versions that are not the current |
+| `skillIcon`     | `dp-skill-icon`           | Icon before the name of a gauge                 |
+| `main`          | `dp-main`                 | Main area                                       |
+| `article`       | `dp-article`              | Page content                                    |
+| `toc`           | `dp-toc`                  | Table of contents column                        |
+| `tocTitle`      | `dp-toc-title`            | Title of the table of contents                  |
+| `tocList`       | `dp-toc-list`             | List of the table of contents                   |
+| `tocItem`       | `dp-toc-item`             | Entry of the table of contents                  |
+| `footer`        | `dp-footer`               | Page footer                                     |
+| `scrollTop`     | `dp-scroll-top`           | Back-to-top button                              |
+| `scrollTopIcon` | `dp-scroll-top-icon`      | Arrow of that button                            |
+
+A slot can carry **variants**, suffixed `--variant`: `column` gives
+`dp-column--span-8`, `skill` gives `dp-skill--circle`.
+
+## How a slot is rendered
+
+Always in **triple braces**, in the templates:
+
+```hbs
+<nav class="{{{cls.sidebar}}}">
+```
+
+Double braces would escape the content, and a utility class such as
+`aria-[current=page]` would become `aria-[current&#x3D;page]` — a silent
+selector, without the slightest error.
+
+## The stylesheets
+
+The delivered stylesheet is assembled from four pieces, in this order:
+
+| Stylesheet          | Content                                            |
+| ------------------- | -------------------------------------------------- |
+| `structure.css`     | Grid, sticky columns, accessibility. Shared by all |
+| `prose.css`         | Typography of the content                          |
+| a skin or a bridge  | `custom.css`, or `tailwind-bridge.css`             |
+| the components' one | The `dp-*` rules of the shipped components         |
+
+Then comes what the project adds through `theme.css`.
+
+The layout is **never** duplicated in a provider: it lives in `structure.css`,
+which both share. A provider only takes care of the styling.
+
+## Layer order
+
+Under the `tailwind` theme, the stylesheet declares its layers in this order:
+
+```css
+@layer theme, base, components, utilities;
+```
+
+Component rules live in `components`, **below** the utilities. A `className`
+set at use therefore always wins, whatever the place of the rule in the file.
+
+The `custom` theme has no utility layer: its stylesheets are in no layer, and
+therefore come before the component rules, which stay in the `components`
+layer.
+
+What `theme.css` adds is in no layer: without a layer, a rule wins over all
+those that have one. That is what lets you write a fix there without worrying
+about specificity.

package/starter/03-reference/index.md

@@ -0,0 +1,32 @@
+---
+title: Reference
+description: Commands, configuration and frontmatter, field by field.
+tags: [reference]
+
+jsonld:
+  type: TechArticle
+  breadcrumbs: true
+---
+
+# Reference
+
+- **[Commands](./cli/)** — `init`, `build`, `check`, `dev`, `serve`
+  and their options.
+- **[Configuration](./configuration/)** — every field of
+  `docpensieve.config.mjs`, its default value and its effect.
+- **[Frontmatter](./frontmatter/)** — the fields recognised at the top
+  of a page.
+- **[Theme](./theme/)** — slots, tokens and styling options.
+
+To learn how to use them rather than look them up, the [guide](../guide/) is the
+right starting point.
+
+## Errors
+
+Every expected error carries a message and an **actionable hint**. An invalid
+configuration, an unknown version slug, a value out of range: each one says
+what is wrong and what is expected instead.
+
+Nothing fails silently. A component that cannot render what it is asked for
+stops the build rather than produce an inert element — a tag that does nothing
+goes unnoticed on review, an error does not.

package/starter/04-architecture.md

@@ -0,0 +1,106 @@
+---
+title: Architecture
+description: How a page becomes HTML, and why it works that way.
+tags: [architecture]
+
+jsonld:
+  type: TechArticle
+  breadcrumbs: true
+---
+
+# Architecture
+
+## The journey of a page
+
+```
+.md / .mdx file
+      │
+      ▼
+  loading             frontmatter detached, slug derived from the path
+      │
+      ▼
+  compilation         MDX → React component
+      │
+      ▼
+  rendering           React → HTML string, once and for all
+      │
+      ▼
+  shell               header, menu, table of contents, footer
+      │
+      ▼
+  page written        a folder, an index.html
+```
+
+Once every page is written, and **only then**, the stylesheet is compiled: a
+utility theme needs to know which classes were actually used.
+
+## React does not leave the build
+
+Components are rendered to HTML during the build. The delivered site loads no
+runtime: what reaches the reader is markup and a stylesheet.
+
+That explains the shape of the shipped components. None of them has state or
+an event listener, because there would be nothing to bring them to life.
+Whatever needs interaction goes through a native element — `details` for
+expanding, a link for moving — or through CSS.
+
+This constraint is also what guarantees that a page stays readable in ten
+years: there is nothing that can stop working.
+
+## Templates do not render content
+
+A template engine builds the shell: header, menu, table of contents, version
+switcher, footer. The content comes from the MDX compilation.
+
+The two do not mix, and that is deliberate. The content is written by the
+author and can contain anything; the shell is written once and must never
+depend on what a page contains.
+
+## The packages
+
+```
+shared        constants, errors, slugs — depends on nothing
+core          configuration, loading, compilation, JSON-LD, generation
+theme         stylings, each answering the same contract
+components    components available in pages
+cli           the commands
+```
+
+**The graph never goes up.** The engine imports neither the stylings nor the
+components: the commands hand them over. That is what lets it be tested
+without React or CSS, and what keeps a circular dependency from settling in
+unnoticed.
+
+## Theme slots
+
+The templates contain no class. They ask the theme for the class of each slot,
+and the theme answers — a simple class, or a handful of utilities.
+
+Two practical consequences:
+
+- changing styling requires touching no template;
+- a styling only needs to redefine what it changes.
+
+Components follow the same rule, with a fallback: when there is no answer, they
+take a `dp-*` class that their own stylesheet styles from the theme tokens.
+They therefore follow the active palette without knowing anything about it.
+
+## URLs
+
+A relative target resolves against the folder of the page's file. An absolute
+target starts from the **version root**, not from the domain: a documentation
+does not know it may be served under a sub-path.
+
+That rewrite happens on the tree built from the Markdown — hence **before** the
+components are rendered. A component that produces a URL must therefore resolve
+it itself, following the same rules. That is why every rendered page is
+announced to the components, just as the class table is announced to them.
+
+## Nothing fails silently
+
+It is the rule that runs through everything else. An unknown value, a missing
+parent, a file not found: each one stops the build with a message and a hint.
+
+The alternative — rendering an empty element, ignoring a prop, falling back on
+a default value — produces pages that look right and are not. Those faults are
+only discovered in production, long afterwards.

package/starter/icons/blocks.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
+  <rect x="3" y="3" width="7.5" height="7.5" rx="1.5" />
+  <rect x="13.5" y="3" width="7.5" height="7.5" rx="1.5" />
+  <rect x="3" y="13.5" width="7.5" height="7.5" rx="1.5" />
+  <rect x="13.5" y="13.5" width="7.5" height="7.5" rx="1.5" />
+</svg>

package/starter/icons/book.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20" />
+  <path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z" />
+</svg>

package/starter/icons/branch.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
+  <circle cx="6" cy="5" r="2.5" />
+  <circle cx="6" cy="19" r="2.5" />
+  <circle cx="18" cy="12" r="2.5" />
+  <path d="M6 7.5v9M8.5 5h5a4 4 0 0 1 4 4v.5" />
+</svg>