From: Danilo M. Date: Wed, 15 Apr 2026 20:56:55 +0000 (+0200) Subject: Document video, quote, and actions shortcodes in SHORTCODES.md X-Git-Tag: release_22042026-1342~232 X-Git-Url: https://git.danix.xyz/?a=commitdiff_plain;h=abf79d7123469dd27b59e3fb154aba41523688e7;p=danix.xyz-2.git Document video, quote, and actions shortcodes in SHORTCODES.md - Add comprehensive Video shortcode documentation with parameters and examples - Document page bundle video resolution for automatic URL generation - Add browser compatibility notes for WebM, MP4, and Ogg formats - Document Quote shortcode with source attribution and optional links - Document Actions shortcode for download buttons and CTAs - Update Future Shortcodes section to reflect implemented features Co-Authored-By: Claude Haiku 4.5 --- diff --git a/SHORTCODES.md b/SHORTCODES.md index ea82cdb..fdfec6f 100644 --- a/SHORTCODES.md +++ b/SHORTCODES.md @@ -1,6 +1,6 @@ # Shortcodes Documentation - danix.xyz -The danix.xyz theme provides four essential shortcodes for extending and enhancing your content. All shortcodes support multilingual content through Hugo's i18n framework, ensuring seamless language switching across your site. +The danix.xyz theme provides essential shortcodes for extending and enhancing your content. All shortcodes support multilingual content through Hugo's i18n framework, ensuring seamless language switching across your site. ## Gravatar @@ -161,6 +161,68 @@ Three-column gallery: **Note:** Gallery content should be written in standard markdown image syntax `![alt](url)`. The shortcode automatically applies responsive grid styling, handles image sizing, and ensures accessibility. +## Video + +Embed responsive HTML5 video player with support for WebM, MP4, and other web video formats. Videos can be stored in page bundles or served from external URLs. + +### Syntax + +``` +{{< video src="video.webm" width="100%" height="600" controls >}} +``` + +### Parameters + +| Parameter | Required | Description | +|-----------|----------|-------------| +| src | Yes | Path or URL to the video file (supports .webm, .mp4, .ogv) | +| width | No | Video width (default: 100%, can be px or % values) | +| height | No | Video height (default: auto) | +| class | No | Custom CSS classes for styling | +| autoplay | No | Set to "true" to autoplay (default: false) | +| loop | No | Set to "true" for looping playback (default: false) | +| muted | No | Set to "true" to mute by default (default: false) | + +### Example + +Basic usage with page bundle video: +``` +{{< video src="demo.webm" >}} +``` + +With custom dimensions: +``` +{{< video src="tutorial.webm" width="800" height="600" >}} +``` + +Autoplay and loop: +``` +{{< video src="background.webm" width="100%" autoplay="true" loop="true" muted="true" >}} +``` + +External video URL: +``` +{{< video src="https://example.com/video.mp4" width="100%" >}} +``` + +### Page Bundle Videos + +Videos stored in the same directory as your article's `index.md` are automatically resolved: + +``` +content/en/articles/my-article/ +├── index.md +└── demo.webm ← Reference as src="demo.webm" +``` + +The template automatically generates the correct URL: `/articles/my-article/demo.webm` + +### Browser Compatibility + +- **WebM (.webm)**: Chrome, Firefox, Edge +- **MP4 (.mp4)**: All modern browsers (H.264 codec) +- **Ogg Theora (.ogv)**: Firefox, Chrome + ## Contact Form Embed a fully functional contact form with client-side validation, AJAX submission, and multilingual support. The form handles user submissions and displays loading states and error/success messages automatically. @@ -278,15 +340,81 @@ if (mail($to, $subject, $message)) { ?> ``` +## Quote + +Display blockquote with optional attribution. Perfect for testimonials, quotes, and highlighted text. + +### Syntax + +``` +{{< quote source="Author Name" src="https://example.com" >}} +Your quote text here +{{< /quote >}} +``` + +### Parameters + +| Parameter | Required | Description | +|-----------|----------|-------------| +| source | No | Author or source attribution | +| src | No | URL to link the source (requires source parameter) | + +### Example + +Basic quote: +``` +{{< quote source="Maya Angelou" >}} +There is no greater agony than bearing an untold story inside you. +{{< /quote >}} +``` + +With source link: +``` +{{< quote source="Steve Jobs" src="https://en.wikipedia.org/wiki/Steve_Jobs" >}} +The only way to do great work is to love what you do. +{{< /quote >}} +``` + +## Actions + +Display a styled action button, typically used for downloads or calls-to-action. + +### Syntax + +``` +{{< actions url="https://example.com/file.zip" desc="Download File" >}} +``` + +### Parameters + +| Parameter | Required | Description | +|-----------|----------|-------------| +| url | Yes | URL the button links to | +| desc | No | Button label text (default: "Download") | +| outclass | No | CSS classes for the wrapper div | +| inclass | No | CSS classes for the anchor link element | + +### Example + +Basic download button: +``` +{{< actions url="https://github.com/user/project/archive.zip" desc="Download ZIP" >}} +``` + +With custom styling: +``` +{{< actions url="https://example.com/guide.pdf" desc="Download PDF Guide" outclass="my-6" inclass="primary" >}} +``` + ## Future Shortcodes The following shortcodes are planned for future releases: -- **Video**: Privacy-friendly YouTube and Vimeo embeds with custom thumbnail support - **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 +- **YouTube/Vimeo**: Privacy-friendly embedded video players ## Accessibility Notes