{% if attrs.href %}{{ attrs.title }}{% else %}{{ attrs.title }}{% endif %}
{% endif %} +{{ body }} +` pair. Every conforming theme
+# implements `accordion` with the `summary` and `open` attributes.
+name: accordion
+description: A collapsible section behind a summary line.
+params:
+ - name: summary
+ type: string
+ required: false
+ description: The always-visible line that opens and closes the section. Defaults to "Details".
+ - name: open
+ type: boolean
+ required: false
+ description: Start expanded.
+body: markdown
+# `[accordion "Show me"]` wrote the summary as a bare word. `[details]` was this
+# theme's accordion before the canonical names, and still migrates here.
+migrate:
+ positional: [summary]
+ from:
+ - name: details
diff --git a/site/themes/driller/shortcodes/alert.html.jinja b/site/themes/driller/shortcodes/alert.html.jinja
deleted file mode 100644
index d9238ee..0000000
--- a/site/themes/driller/shortcodes/alert.html.jinja
+++ /dev/null
@@ -1,4 +0,0 @@
-{# Theme-specific alert shortcode that overrides the built-in (Feature f074). #}
-{# Usage: [alert warning]Watch out![/alert] #}
-{% set variant = args.positional[0] | default("info") %}
-{{ body }}
diff --git a/site/themes/driller/shortcodes/breadcrumb.html.jinja b/site/themes/driller/shortcodes/breadcrumb.html.jinja
new file mode 100644
index 0000000..b270bce
--- /dev/null
+++ b/site/themes/driller/shortcodes/breadcrumb.html.jinja
@@ -0,0 +1,8 @@
+{#- The breadcrumb. The body is the trail as the author wrote it, in Markdown.
+ The manifest declares `body: markdown`, so the body arrives between blank
+ lines: the `nav` raw-HTML block closes before it and the links render. The
+ class is the layout trail's, so both look alike. `data-canonical` is the
+ markup contract every conforming theme's breadcrumb carries. -#}
+
diff --git a/site/themes/driller/shortcodes/breadcrumb.yaml b/site/themes/driller/shortcodes/breadcrumb.yaml
new file mode 100644
index 0000000..105df73
--- /dev/null
+++ b/site/themes/driller/shortcodes/breadcrumb.yaml
@@ -0,0 +1,10 @@
+# Component manifest for the breadcrumb, one of the canonical components.
+#
+# A trail of links an author writes, for a page whose position the site's own
+# hierarchy does not describe. The layout's trail comes from
+# `breadcrumbs.html.jinja`; this renders the same markup from content. Every
+# conforming theme implements `breadcrumb`, which takes no attributes.
+name: breadcrumb
+description: A trail of links leading to the current page, written in Markdown.
+params: []
+body: markdown
diff --git a/site/themes/driller/shortcodes/button.html.jinja b/site/themes/driller/shortcodes/button.html.jinja
new file mode 100644
index 0000000..d8dd455
--- /dev/null
+++ b/site/themes/driller/shortcodes/button.html.jinja
@@ -0,0 +1,12 @@
+{#- A call to action, styled as a button rather than a link.
+
+ `href` goes through `url()` so the link carries the deployment prefix on a
+ sub-path install, and so the slash stays literal: an autoescaped
+ `{{ attrs.href }}` emits `/`, which is a valid link but a second
+ spelling for the base-path rewriter to know about.
+
+ `data-canonical` is the markup contract every conforming theme's button
+ carries.
+-#}
+{%- set variant = attrs.variant | default("default") -%}
+{{ body }}
diff --git a/site/themes/driller/shortcodes/button.yaml b/site/themes/driller/shortcodes/button.yaml
new file mode 100644
index 0000000..07afa78
--- /dev/null
+++ b/site/themes/driller/shortcodes/button.yaml
@@ -0,0 +1,26 @@
+# Component manifest for the button component.
+name: button
+description: A call-to-action link styled as a button.
+params:
+ - name: variant
+ type: enum
+ values: [default, primary, secondary]
+ required: false
+ description: Which button style to use. Defaults to default.
+ - name: href
+ type: reference
+ required: true
+ description: Where the button links to.
+# The body is the button's label. Spliced flush, it shares the line with the
+# `` that opens it, so no raw HTML block starts and inline markdown in the
+# label renders; blank lines around it would turn the label into a paragraph
+# inside the link.
+body: inline
+# A button is written in a sentence as often as on a line of its own, and
+# `{% button %}Label{% /button %}` on one line is an inline placement. An
+# inline component is legitimate in both positions; a block one is reported
+# as misplaced when written in a line.
+inline: true
+# `[button primary href="/signup"]` wrote the variant as a bare word.
+migrate:
+ positional: [variant]
diff --git a/site/themes/driller/shortcodes/callout.html.jinja b/site/themes/driller/shortcodes/callout.html.jinja
new file mode 100644
index 0000000..647698c
--- /dev/null
+++ b/site/themes/driller/shortcodes/callout.html.jinja
@@ -0,0 +1,27 @@
+{#- The callout, one of the canonical components.
+
+ `role="complementary"` and `aria-label` are the accessibility contract: the
+ box is an aside about the surrounding prose, and a screen reader announces
+ it by its title. The title is repeated as visible text because the label is
+ not rendered.
+
+ `data-canonical` and `data-part` are the markup contract: the landmarks
+ every conforming theme's callout carries, whatever its classes.
+
+ The manifest declares `body: markdown`, so the body arrives between blank
+ lines: the raw-HTML block the opening element starts closes before the
+ body, and the body reaches the markdown parser whole. Keep the closing tag
+ in column 0 -- after a blank line, an indented `` is an indented
+ code block.
+-#}
+{%- set type = attrs.type | default("info") -%}
+{%- set title = attrs.title | default(type | capitalize) -%}
+{%- if attrs.collapsible -%}
+{{ title }}
+{{ body }}
+
+{%- else -%}
+{{ title }}
+{{ body }}
+
+{%- endif -%}
diff --git a/site/themes/driller/shortcodes/callout.yaml b/site/themes/driller/shortcodes/callout.yaml
new file mode 100644
index 0000000..257639d
--- /dev/null
+++ b/site/themes/driller/shortcodes/callout.yaml
@@ -0,0 +1,40 @@
+# Component manifest for the callout, one of the canonical components.
+#
+# A callout sets a passage apart as a note, a warning, or another kind of
+# notice. Every conforming theme implements `callout` with the `type`, `title`
+# and `collapsible` attributes, so content written with it renders under any of
+# them. The type name reaches the class attribute, so a theme styles
+# `callout-prereq` without this file learning what "prereq" means.
+name: callout
+description: A titled box that sets a passage apart as a note, a warning, or another kind of notice.
+params:
+ - name: type
+ type: string
+ required: false
+ description: >-
+ The kind of notice. Every conforming theme styles `info`, `success`,
+ `warning` and `danger`. Reaches the `callout-` class and, when no
+ title is given, supplies the title in capitalised form. Defaults to
+ `info`.
+ - name: title
+ type: string
+ required: false
+ description: >-
+ The heading and the accessible label. Defaults to the capitalised type.
+ - name: collapsible
+ type: boolean
+ required: false
+ description: >-
+ Render as a ``/`` disclosure instead of a ``, so
+ the box starts closed.
+body: markdown
+# `[callout warning]` wrote the type as a bare word. `[alert]` and `[infobox]`
+# were this theme's callouts before the canonical names; content still written
+# with them migrates here, and alert's `variant` becomes `type`.
+migrate:
+ positional: [type]
+ from:
+ - name: alert
+ rename:
+ variant: type
+ - name: infobox
diff --git a/site/themes/driller/shortcodes/card.html.jinja b/site/themes/driller/shortcodes/card.html.jinja
new file mode 100644
index 0000000..38d77d6
--- /dev/null
+++ b/site/themes/driller/shortcodes/card.html.jinja
@@ -0,0 +1,13 @@
+{#- The card.
+
+ The title link and the image go through `url()` for the reason the button's
+ link does: a sub-path install needs the deployment prefix. The manifest
+ declares `body: markdown`, so the body arrives between blank lines and
+ renders as markdown inside the ``.
+
+ `data-canonical` and `data-part` are the markup contract every conforming
+ theme's card carries.
+-#}
+{% if attrs.image %} }})
{% endif %}{% if attrs.title %}
diff --git a/site/themes/driller/shortcodes/card.yaml b/site/themes/driller/shortcodes/card.yaml
new file mode 100644
index 0000000..30716a1
--- /dev/null
+++ b/site/themes/driller/shortcodes/card.yaml
@@ -0,0 +1,23 @@
+# Component manifest for the card, one of the canonical components.
+#
+# A self-contained block of content: an optional image, a title that can link
+# somewhere, and a body. Every conforming theme implements `card` with the
+# `title`, `href` and `image` attributes.
+name: card
+description: A block of content with an optional image, a title, and a link.
+params:
+ - name: title
+ type: string
+ required: false
+ description: The card's heading.
+ - name: href
+ type: reference
+ required: false
+ description: Where the title links to.
+ - name: image
+ type: media
+ required: false
+ description: >-
+ An image shown above the title. It is decorative and carries no alt
+ text, so describe anything the reader needs in the body.
+body: markdown
diff --git a/site/themes/driller/shortcodes/image.html.jinja b/site/themes/driller/shortcodes/image.html.jinja
new file mode 100644
index 0000000..1b6e135
--- /dev/null
+++ b/site/themes/driller/shortcodes/image.html.jinja
@@ -0,0 +1,5 @@
+{#- The image, as a figure so a caption stays attached to it. `src` goes
+ through `url()` so a sub-path install serves it with the prefix.
+ `data-canonical` and `data-part` are the markup contract every conforming
+ theme's image carries. -#}
+ }})
{% if attrs.caption %}{{ attrs.caption }} {% endif %} ` and the next `` while the panels themselves stay one HTML block.
+
+ `tabs.js` handles switching, group synchronisation, keyboard navigation and
+ persistence. The first tab is marked active here so the page is correct
+ before any script runs.
+
+ `data-canonical` and `data-part` are the markup contract every conforming
+ theme's tabs carry: the tab list, each tab and each panel.
+-#}
+{%- set group = attrs.group | default("default") -%}
+
+{%- for c in children if c.name == "tab" %}{% set id = c.attrs.id | default(c.attrs.label | slugify) %}{% endfor -%}
+
+{%- for c in children if c.name == "tab" %}{% set id = c.attrs.id | default(c.attrs.label | slugify) %}
+{{ c.body }}
+{% endfor -%}
+
diff --git a/site/themes/driller/shortcodes/tabs.yaml b/site/themes/driller/shortcodes/tabs.yaml
new file mode 100644
index 0000000..a274463
--- /dev/null
+++ b/site/themes/driller/shortcodes/tabs.yaml
@@ -0,0 +1,16 @@
+# Component manifest for the tab container.
+#
+# The one shipped component that composes its children rather than wrapping its
+# body: the tab strip is a button per `{% tab %}` child, carrying that child's
+# label, and it has to be emitted before any panel. The template reads
+# `children` for exactly that.
+name: tabs
+description: A tabbed switcher whose panels are its `tab` children.
+params:
+ - name: group
+ type: string
+ required: false
+ description: >-
+ Tab groups with the same name switch together, and the selection is
+ remembered per group. Defaults to `default`.
+body: markdown
diff --git a/site/themes/driller/shortcodes/tag.html.jinja b/site/themes/driller/shortcodes/tag.html.jinja
new file mode 100644
index 0000000..45141b9
--- /dev/null
+++ b/site/themes/driller/shortcodes/tag.html.jinja
@@ -0,0 +1,5 @@
+{#- The tag. Inline, so its body is a label spliced flush into the line. The
+ class is the one page tags already use, so both look alike.
+ `data-canonical` is the markup contract every conforming theme's tag
+ carries. -#}
+{% if attrs.href %}{{ body }}{% else %}{{ body }}{% endif %}
diff --git a/site/themes/driller/shortcodes/tag.yaml b/site/themes/driller/shortcodes/tag.yaml
new file mode 100644
index 0000000..7cf08e5
--- /dev/null
+++ b/site/themes/driller/shortcodes/tag.yaml
@@ -0,0 +1,15 @@
+# Component manifest for the tag, one of the canonical components.
+#
+# A small label written inside a sentence, optionally a link. It is declared
+# `inline: true`, so it stays inside the paragraph, heading or list item it is
+# written in. Every conforming theme implements `tag` with the `href`
+# attribute.
+name: tag
+description: A small inline label, optionally a link.
+inline: true
+params:
+ - name: href
+ type: reference
+ required: false
+ description: Where the label links to.
+body: inline
diff --git a/site/themes/driller/templates/base.html.jinja b/site/themes/driller/templates/base.html.jinja
index 8f9a675..1a94721 100644
--- a/site/themes/driller/templates/base.html.jinja
+++ b/site/themes/driller/templates/base.html.jinja
@@ -19,6 +19,7 @@
+
@@ -61,13 +62,13 @@
Issues
- Built with Accent CMS
+ Built with Accent CMS
{% for js in theme.assets.js %}
-
+
{% endfor %}
-
{{ title }}
+{{ body }} +{{ title }}
+{{ body }} +`/`` disclosure instead of a `
` disclosure instead of a ``, so
+ the box starts closed.
+body: markdown
+# `[callout warning]` wrote the type as a bare word. `[alert]` and `[infobox]`
+# were this theme's callouts before the canonical names; content still written
+# with them migrates here, and alert's `variant` becomes `type`.
+migrate:
+ positional: [type]
+ from:
+ - name: alert
+ rename:
+ variant: type
+ - name: infobox
diff --git a/site/themes/driller/shortcodes/card.html.jinja b/site/themes/driller/shortcodes/card.html.jinja
new file mode 100644
index 0000000..38d77d6
--- /dev/null
+++ b/site/themes/driller/shortcodes/card.html.jinja
@@ -0,0 +1,13 @@
+{#- The card.
+
+ The title link and the image go through `url()` for the reason the button's
+ link does: a sub-path install needs the deployment prefix. The manifest
+ declares `body: markdown`, so the body arrives between blank lines and
+ renders as markdown inside the ``.
+
+ `data-canonical` and `data-part` are the markup contract every conforming
+ theme's card carries.
+-#}
+{% if attrs.image %}{% endif %}{% if attrs.title %}
diff --git a/site/themes/driller/shortcodes/card.yaml b/site/themes/driller/shortcodes/card.yaml
new file mode 100644
index 0000000..30716a1
--- /dev/null
+++ b/site/themes/driller/shortcodes/card.yaml
@@ -0,0 +1,23 @@
+# Component manifest for the card, one of the canonical components.
+#
+# A self-contained block of content: an optional image, a title that can link
+# somewhere, and a body. Every conforming theme implements `card` with the
+# `title`, `href` and `image` attributes.
+name: card
+description: A block of content with an optional image, a title, and a link.
+params:
+ - name: title
+ type: string
+ required: false
+ description: The card's heading.
+ - name: href
+ type: reference
+ required: false
+ description: Where the title links to.
+ - name: image
+ type: media
+ required: false
+ description: >-
+ An image shown above the title. It is decorative and carries no alt
+ text, so describe anything the reader needs in the body.
+body: markdown
diff --git a/site/themes/driller/shortcodes/image.html.jinja b/site/themes/driller/shortcodes/image.html.jinja
new file mode 100644
index 0000000..1b6e135
--- /dev/null
+++ b/site/themes/driller/shortcodes/image.html.jinja
@@ -0,0 +1,5 @@
+{#- The image, as a figure so a caption stays attached to it. `src` goes
+ through `url()` so a sub-path install serves it with the prefix.
+ `data-canonical` and `data-part` are the markup contract every conforming
+ theme's image carries. -#}
+{% if attrs.caption %}{{ attrs.caption }} {% endif %}
diff --git a/site/themes/driller/shortcodes/image.yaml b/site/themes/driller/shortcodes/image.yaml
new file mode 100644
index 0000000..870ccd1
--- /dev/null
+++ b/site/themes/driller/shortcodes/image.yaml
@@ -0,0 +1,23 @@
+# Component manifest for the image, one of the canonical components.
+#
+# An image with alt text and an optional caption, written self-closing:
+# `{% image src="/media/diagram.png" alt="The request flow" /%}`. Every
+# conforming theme implements `image` with the `src`, `alt` and `caption`
+# attributes.
+name: image
+description: An image with alt text and an optional caption.
+params:
+ - name: src
+ type: media
+ required: true
+ description: The image file.
+ - name: alt
+ type: string
+ required: true
+ description: >-
+ What the image shows, for readers who cannot see it. Use an empty string
+ only for a purely decorative image.
+ - name: caption
+ type: string
+ required: false
+ description: Visible text shown under the image.
diff --git a/site/themes/driller/shortcodes/tab.html.jinja b/site/themes/driller/shortcodes/tab.html.jinja
new file mode 100644
index 0000000..ba6f437
--- /dev/null
+++ b/site/themes/driller/shortcodes/tab.html.jinja
@@ -0,0 +1 @@
+{{ body }}
\ No newline at end of file
diff --git a/site/themes/driller/shortcodes/tab.yaml b/site/themes/driller/shortcodes/tab.yaml
new file mode 100644
index 0000000..6bbda13
--- /dev/null
+++ b/site/themes/driller/shortcodes/tab.yaml
@@ -0,0 +1,23 @@
+# Component manifest for one tab panel.
+#
+# A `tab` is normally read by its `tabs` parent rather than rendered on its own:
+# the parent builds the strip and the panels from `children`. This template is
+# what a `tab` written outside a `tabs` renders as, and it emits the body
+# unchanged -- the same thing a stray `[tab]` did.
+name: tab
+description: One panel of a tabbed switcher. Belongs inside `tabs`.
+params:
+ - name: label
+ type: string
+ required: false
+ description: The text on the tab button.
+ - name: id
+ type: string
+ required: false
+ description: >-
+ The panel's identifier, used for the anchor and for remembering the
+ selection. Defaults to the slugified label.
+body: markdown
+# `[tab "macOS"]` wrote the label as a bare word.
+migrate:
+ positional: [label]
diff --git a/site/themes/driller/shortcodes/tabs.html.jinja b/site/themes/driller/shortcodes/tabs.html.jinja
new file mode 100644
index 0000000..a23da56
--- /dev/null
+++ b/site/themes/driller/shortcodes/tabs.html.jinja
@@ -0,0 +1,29 @@
+{#- The tab container.
+
+ Both loops read `children`, not `body`: by the time this template runs, the
+ body is one string of rendered markup and a label cannot be recovered from
+ it. `children` carries each `{% tab %}` with its attributes still resolved
+ and its own body separate, which is what makes the strip constructible.
+
+ The panels are emitted flush against each other -- no blank line between a
+ ` ` and the next `` while the panels themselves stay one HTML block.
+
+ `tabs.js` handles switching, group synchronisation, keyboard navigation and
+ persistence. The first tab is marked active here so the page is correct
+ before any script runs.
+
+ `data-canonical` and `data-part` are the markup contract every conforming
+ theme's tabs carry: the tab list, each tab and each panel.
+-#}
+{%- set group = attrs.group | default("default") -%}
+
+{%- for c in children if c.name == "tab" %}{% set id = c.attrs.id | default(c.attrs.label | slugify) %}{% endfor -%}
+
+{%- for c in children if c.name == "tab" %}{% set id = c.attrs.id | default(c.attrs.label | slugify) %}
+{{ c.body }}
+{% endfor -%}
+
diff --git a/site/themes/driller/shortcodes/tabs.yaml b/site/themes/driller/shortcodes/tabs.yaml
new file mode 100644
index 0000000..a274463
--- /dev/null
+++ b/site/themes/driller/shortcodes/tabs.yaml
@@ -0,0 +1,16 @@
+# Component manifest for the tab container.
+#
+# The one shipped component that composes its children rather than wrapping its
+# body: the tab strip is a button per `{% tab %}` child, carrying that child's
+# label, and it has to be emitted before any panel. The template reads
+# `children` for exactly that.
+name: tabs
+description: A tabbed switcher whose panels are its `tab` children.
+params:
+ - name: group
+ type: string
+ required: false
+ description: >-
+ Tab groups with the same name switch together, and the selection is
+ remembered per group. Defaults to `default`.
+body: markdown
diff --git a/site/themes/driller/shortcodes/tag.html.jinja b/site/themes/driller/shortcodes/tag.html.jinja
new file mode 100644
index 0000000..45141b9
--- /dev/null
+++ b/site/themes/driller/shortcodes/tag.html.jinja
@@ -0,0 +1,5 @@
+{#- The tag. Inline, so its body is a label spliced flush into the line. The
+ class is the one page tags already use, so both look alike.
+ `data-canonical` is the markup contract every conforming theme's tag
+ carries. -#}
+{% if attrs.href %}{{ body }}{% else %}{{ body }}{% endif %}
diff --git a/site/themes/driller/shortcodes/tag.yaml b/site/themes/driller/shortcodes/tag.yaml
new file mode 100644
index 0000000..7cf08e5
--- /dev/null
+++ b/site/themes/driller/shortcodes/tag.yaml
@@ -0,0 +1,15 @@
+# Component manifest for the tag, one of the canonical components.
+#
+# A small label written inside a sentence, optionally a link. It is declared
+# `inline: true`, so it stays inside the paragraph, heading or list item it is
+# written in. Every conforming theme implements `tag` with the `href`
+# attribute.
+name: tag
+description: A small inline label, optionally a link.
+inline: true
+params:
+ - name: href
+ type: reference
+ required: false
+ description: Where the label links to.
+body: inline
diff --git a/site/themes/driller/templates/base.html.jinja b/site/themes/driller/templates/base.html.jinja
index 8f9a675..1a94721 100644
--- a/site/themes/driller/templates/base.html.jinja
+++ b/site/themes/driller/templates/base.html.jinja
@@ -19,6 +19,7 @@
+
@@ -61,13 +62,13 @@
Issues
- Built with Accent CMS
+ Built with Accent CMS
{% for js in theme.assets.js %}
-
+
{% endfor %}
-
+{%- for c in children if c.name == "tab" %}{% set id = c.attrs.id | default(c.attrs.label | slugify) %}{% endfor -%}
+
+{%- for c in children if c.name == "tab" %}{% set id = c.attrs.id | default(c.attrs.label | slugify) %}
+{{ c.body }}
+
{% endfor -%}
+