From: Danilo M. Date: Sun, 5 Apr 2026 07:42:46 +0000 (+0200) Subject: feat: import all remaining shortcodes from previous theme X-Git-Url: https://git.danix.xyz/?a=commitdiff_plain;h=86315cada2d2d37c93bd41869aedc92db0f36363;p=danix2-hugo-theme.git feat: import all remaining shortcodes from previous theme Added 11 additional shortcodes with complete documentation: Text formatting: - strike: strikethrough text - em: highlighted/marked text - dropcap: paragraph with decorative drop cap Container wrappers: - div / div-close: semantic div containers with classes Gallery: - gallery: gallery container - gal-img: gallery images (400px WebP thumbnail with link) Utility: - svg: inline SVG icons from assets/SVGs/ - actions: button-style action links - search: search form with results display - contact: comprehensive contact form All shortcodes now fully documented in CONTENT_GUIDE with usage examples and parameters. Co-Authored-By: Claude Haiku 4.5 --- diff --git a/CONTENT_GUIDE.md b/CONTENT_GUIDE.md index b071166..3f16340 100644 --- a/CONTENT_GUIDE.md +++ b/CONTENT_GUIDE.md @@ -663,6 +663,157 @@ Styled video with custom class: --- +### Text Formatting Shortcodes + +#### Strike Shortcode + +Creates strikethrough text. + +**Usage:** +```hugo +{{< strike >}}This text is crossed out{{< /strike >}} +``` + +#### Highlight (em) Shortcode + +Creates highlighted/marked text (yellow background). + +**Usage:** +```hugo +{{< em >}}This text is highlighted{{< /em >}} +``` + +#### Dropcap Shortcode + +Creates a paragraph with a decorative drop cap (large first letter). + +**Usage:** +```hugo +{{< dropcap >}} +Once upon a time, there was a beautiful story that began with this first letter... +{{< /dropcap >}} +``` + +**Parameters:** +- `class` (optional) — CSS class for styling + +--- + +### Container Shortcodes + +#### Div Shortcode + +Opens a `
` wrapper with optional CSS class. Pair with `div-close` shortcode. + +**Usage:** +```hugo +{{< div class="container featured" >}} +Content inside the div +{{< div-close >}} +``` + +**Parameters:** +- `class` — CSS class(es) for the div element + +#### Div-Close Shortcode + +Closes a div opened with the `div` shortcode. + +--- + +### Gallery Shortcodes + +#### Gallery Shortcode + +Creates a gallery container for displaying multiple images. + +**Usage:** +```hugo +{{< gallery >}} +{{< gal-img src="photo1.jpg" alt="Photo 1" >}} +{{< gal-img src="photo2.jpg" alt="Photo 2" >}} +{{< /gallery >}} +``` + +#### Gallery Image (gal-img) Shortcode + +Embeds an image in a gallery. Must be used inside a `gallery` shortcode. + +**Usage:** +```hugo +{{< gal-img src="image.jpg" alt="Image description" >}} +``` + +**Parameters:** +- `src` (required) — Path to image file +- `alt` (required) — Alt text for accessibility + +--- + +### Utility Shortcodes + +#### SVG Shortcode + +Embeds inline SVG icons from your `assets/SVGs/` folder. + +**Usage:** +```hugo +{{< svg name="icon-name" class="optional-class" >}} +``` + +**Parameters:** +- `name` (required) — Name of SVG file (without .svg extension). File must be in `assets/SVGs/` folder. +- `class` (optional) — CSS class for styling the icon + +**Example:** +```hugo +{{< svg name="github" class="social-icon" >}} +``` + +#### Actions Shortcode + +Creates a button-style action link (useful for CTAs). + +**Usage:** +```hugo +{{< actions url="https://example.com" desc="Click Me" outclass="optional-wrapper-class" inclass="optional-button-class" >}} +``` + +**Parameters:** +- `url` (required) — Link URL +- `desc` (required) — Button text +- `outclass` (optional) — CSS class for the `
+ diff --git a/layouts/shortcodes/div.html b/layouts/shortcodes/div.html new file mode 100644 index 0000000..0c0b755 --- /dev/null +++ b/layouts/shortcodes/div.html @@ -0,0 +1,4 @@ +{{ if .Get "class" }} +
+{{ end }} + diff --git a/layouts/shortcodes/dropcap.html b/layouts/shortcodes/dropcap.html new file mode 100644 index 0000000..80cbefe --- /dev/null +++ b/layouts/shortcodes/dropcap.html @@ -0,0 +1,14 @@ +{{/* + * The dropcap shortcode: + * + * Usage: + * + * {{< dropcap class="some class" >}} + * your paragraph that will have a drop cap here + * {{< /dropcap >}} + * + */}} + +

+ {{ .InnerDeindent }} +

diff --git a/layouts/shortcodes/em.html b/layouts/shortcodes/em.html new file mode 100644 index 0000000..11f399a --- /dev/null +++ b/layouts/shortcodes/em.html @@ -0,0 +1 @@ +{{ .Inner | markdownify }} diff --git a/layouts/shortcodes/gal-img.html b/layouts/shortcodes/gal-img.html new file mode 100644 index 0000000..0693319 --- /dev/null +++ b/layouts/shortcodes/gal-img.html @@ -0,0 +1,7 @@ +{{- $src := .Get "src" -}} +{{- $source := resources.Get $src -}} +{{- $alt := .Get "alt" -}} +{{- $icon := $source.Resize "400x webp" -}} + + {{ $alt }} + diff --git a/layouts/shortcodes/gallery.html b/layouts/shortcodes/gallery.html new file mode 100644 index 0000000..8a30fc5 --- /dev/null +++ b/layouts/shortcodes/gallery.html @@ -0,0 +1,5 @@ +
+
+ {{ .Inner }} +
+
diff --git a/layouts/shortcodes/search.html b/layouts/shortcodes/search.html new file mode 100644 index 0000000..784c598 --- /dev/null +++ b/layouts/shortcodes/search.html @@ -0,0 +1,22 @@ +

{{ i18n "js_required" }}

+ + + + +
+ + diff --git a/layouts/shortcodes/strike.html b/layouts/shortcodes/strike.html new file mode 100644 index 0000000..415036a --- /dev/null +++ b/layouts/shortcodes/strike.html @@ -0,0 +1 @@ +{{ .Inner | markdownify }} diff --git a/layouts/shortcodes/svg.html b/layouts/shortcodes/svg.html new file mode 100644 index 0000000..d042bb0 --- /dev/null +++ b/layouts/shortcodes/svg.html @@ -0,0 +1,5 @@ + +{{- $fname := print "SVGs/" ( .Get "name" ) ".svg" -}} +{{ $icon := resources.Get $fname }} +{{ $icon.Content | safeHTML }} +