From b25628ab7b04eff4fbd9065c8dfacbc8ee27cb10 Mon Sep 17 00:00:00 2001 From: "Danilo M." Date: Wed, 29 Apr 2026 15:58:12 +0200 Subject: feat: callout shortcode — i18n keys, docs, bump theme submodule MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-Authored-By: Claude Sonnet 4.6 --- SHORTCODES.md | 127 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++-- 1 file changed, 124 insertions(+), 3 deletions(-) (limited to 'SHORTCODES.md') diff --git a/SHORTCODES.md b/SHORTCODES.md index 7164fe6..691e45a 100644 --- a/SHORTCODES.md +++ b/SHORTCODES.md @@ -425,16 +425,137 @@ Basic download button: {{< actions url="https://github.com/user/project/archive.zip" desc="Download ZIP" >}} ``` -With custom styling: +Centered button: +``` +{{< actions url="https://example.com/file.zip" desc="Download" outclass="flex justify-center" >}} +``` + +Right-aligned button: +``` +{{< actions url="https://example.com/file.zip" desc="Download" outclass="flex justify-end" >}} +``` + +Extra vertical spacing: +``` +{{< actions url="https://example.com/file.zip" desc="Download" outclass="my-10" >}} +``` + +Centered with extra spacing: +``` +{{< actions url="https://example.com/file.zip" desc="Download" outclass="flex justify-center my-10" >}} +``` + +### Common `outclass` Values (wrapper `
`) + +| Class | Effect | +|-------|--------| +| `flex justify-center` | Center button horizontally | +| `flex justify-end` | Align button to the right | +| `flex justify-start` | Align button to the left (default flow) | +| `my-4` / `my-6` / `my-10` | Vertical margin (small / default / large) | +| `flex justify-center my-10` | Centered with large vertical spacing | + +### Common `inclass` Values (anchor ``) + +| Class | Effect | +|-------|--------| +| `text-sm` | Smaller button text | +| `text-lg` | Larger button text | +| `px-6 py-3` | Larger padding | +| `w-full justify-center` | Full-width button | +| `font-bold` | Bold label text | + +## Callout + +Display a semantic callout box for notes, tips, warnings, and other inline asides. All 6 types are styled via CSS — no extra configuration required. + +### Syntax + +``` +{{< callout type="note" >}} +Your content here. Supports **markdown**. +{{< /callout >}} +``` + +### Parameters + +| Parameter | Required | Default | Description | +|-----------|----------|---------|-------------| +| `type` | Yes | — | One of: `note`, `tip`, `info`, `warning`, `danger`, `success` | +| `title` | No | Translated label for type | Overrides the default title | + +### Examples + +Note: +``` +{{< callout type="note" >}} +This behavior changed in v2.0. Check the migration guide before upgrading. +{{< /callout >}} +``` + +Tip: +``` +{{< callout type="tip" >}} +Pass `--fast` to skip the slow validation step in dev. +{{< /callout >}} +``` + +Info: +``` +{{< callout type="info" >}} +This feature is available on all plans including the free tier. +{{< /callout >}} +``` + +Warning: ``` -{{< actions url="https://example.com/guide.pdf" desc="Download PDF Guide" outclass="my-6" inclass="primary" >}} +{{< callout type="warning" >}} +Watch out for this edge case when deploying to production. +{{< /callout >}} ``` +Danger: +``` +{{< callout type="danger" >}} +This action is irreversible. All data will be permanently deleted. +{{< /callout >}} +``` + +Success: +``` +{{< callout type="success" >}} +Build completed. 234 pages generated in 392ms. +{{< /callout >}} +``` + +Custom title: +``` +{{< callout type="warning" title="Heads up" >}} +Custom title overrides the default i18n label. +{{< /callout >}} +``` + +### Accessibility Notes + +- `role="alert"` on `danger` type — screen readers announce immediately +- `role="note"` on all other types — non-intrusive +- Feather icons are decorative (`aria-hidden="true"`) — title text always conveys the type + +### Common `type` Values + +| Type | Color | Feather Icon | Use for | +|------|-------|-------------|---------| +| `note` | Purple (`--accent`) | `edit-2` | Extra context, side remarks | +| `tip` | Green (`--accent2`) | `zap` | Best practices, shortcuts | +| `info` | Cyan (`--type-link`) | `info` | Neutral information | +| `warning` | Amber (`--type-life`) | `alert-triangle` | Potential pitfalls | +| `danger` | Red (`#ef4444`) | `x-circle` | Destructive actions, breaking changes | +| `success` | Green (`--accent2`) | `check-circle` | Confirmed results, completed steps | + ## Future Shortcodes The following shortcodes are planned for future releases: -- **Callout**: Highlighted information boxes for notes, warnings, and tips - **Tabs**: Tabbed content sections for organizing related information - **Code**: Enhanced code blocks with syntax highlighting and line numbers - **Audio**: Audio player for podcast episodes and sound files -- cgit v1.2.3