Skip to content

feat: add 7 utility shortcodes (admonition, button, carousel, gallery, figure, tabs, video)#47

Merged
adurrr merged 2 commits into
mainfrom
feat/issue-6-utility-shortcodes
Jun 8, 2026
Merged

feat: add 7 utility shortcodes (admonition, button, carousel, gallery, figure, tabs, video)#47
adurrr merged 2 commits into
mainfrom
feat/issue-6-utility-shortcodes

Conversation

@adurrr

@adurrr adurrr commented Jun 8, 2026

Copy link
Copy Markdown
Owner

Resolves #6

What's included

7 utility shortcodes + 1 CSS file + code-copy.js enhancement:

Shortcode Features
admonition 4 variants (note/tip/warning/danger), optional title, markdown content, Feather SVG icons
button 3 variants (primary/secondary/outline), icon slot, auto target=_blank for external
carousel CSS scroll-snap with minimal JS prev/next buttons
figure HTML5 <figure> with caption, lazy loading, local+remote resources
gallery CSS grid thumbnails, optional :target CSS-only lightbox
tabs / tab CSS-only radio-button tabs, keyboard-accessible (Tab + arrow keys)
video HTML5 <video> with poster, caption, responsive container

Design decisions

  • wvc- CSS prefix to avoid theme conflicts
  • Dark-mode aware via [data-theme] + CSS variables
  • Single assets/css/shortcodes.css for all styles (346 lines)
  • Feather-style open-source SVG icons (MIT licensed)
  • Theme-aware code block backgrounds (slate in both light/dark modes)
  • Copy-to-clipboard button on ALL code blocks (highlight + plain pre)

Code copy improvements

  • assets/js/code-copy.js now targets both .highlight and plain <pre> blocks
  • Copy button redesigned: semi-transparent dark pill, white icon, 32x32px
  • Works on all code blocks regardless of language specifier

Tests

  • 18 new Hugo integration tests added (34 total, all passing)
  • 91 JS unit tests still pass (no regression)
  • Example site builds with 80 pages including demo at /docs/shortcodes/

Files

assets/css/shortcodes.css                    (new - 346 lines)
assets/js/code-copy.js                       (added - was missing on main)
layouts/_shortcodes/{admonition,button,carousel,figure,gallery,tab,tabs,video}.html
exampleSite/layouts/_default/baseof.html     (CSS + code-copy load)
exampleSite/content/docs/shortcodes.md       (demo page)
tests/hugo/shortcode_utils_test.go           (18 tests)
tests/hugo/testdata/{18 fixtures}

adurrr added 2 commits June 8, 2026 15:19
…, figure, tabs, video)

Resolves #6

- admonition (note/tip/warning/danger) with Feather SVG icons, markdown content
- button (primary/secondary/outline) with icon slot, external URL detection
- carousel: CSS scroll-snap with minimal JS prev/next buttons
- figure: HTML5 <figure> with caption, lazy loading, local+remote resources
- gallery: CSS grid thumbnails with optional :target CSS-only lightbox
- tabs/tab: CSS-only radio-button tabs, keyboard-accessible (arrow keys)
- video: HTML5 <video> with poster, caption, responsive container

Design:
- wvc- CSS prefix to avoid theme conflicts
- Dark-mode aware via [data-theme] + CSS variables
- Single assets/css/shortcodes.css for all styles
- Feather-style open-source SVG icons (MIT)
- Theme-aware code block backgrounds (slate in light/dark mode)
- Copy-to-clipboard button on all code blocks (highlight + plain pre)

Tests: 18 Hugo integration tests added (34 total, all passing)
Demo page: exampleSite/content/docs/shortcodes.md
CRITICAL fixes:
- carousel: hide prev/next buttons when 0-1 slides (C1)
- tabs: errorf when >5 tabs to prevent silent content loss (C2)
- video: fix boolean param parsing (string 'false' was truthy) (C3)
- video: auto-enforce muted when autoplay (browser requirement)
- video: auto-detect MIME type from file extension
- button: remove role=button on <a> (ARIA contract violation) (C4)

WARNING fixes:
- figure: only use target=_blank for external href links (W1)
- button, figure: add noreferrer to rel for external links (W2)
- CSS: add focus-visible outlines to all button variants (W9)
- CSS: merge duplicate figure/video caption styles (W8)
- carousel: fix usage comment (no slide shortcode exists) (I4)

Tests updated to match new behavior.
@adurrr adurrr force-pushed the feat/issue-6-utility-shortcodes branch from 7190358 to 3a52dfd Compare June 8, 2026 13:36
@adurrr adurrr merged commit 05a417a into main Jun 8, 2026
4 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Add utility shortcodes (admonitions, buttons, carousel, gallery, figure, tabs, video)

1 participant