summaryrefslogtreecommitdiffstats
path: root/CONTENT_GUIDE.md
diff options
context:
space:
mode:
Diffstat (limited to 'CONTENT_GUIDE.md')
-rw-r--r--CONTENT_GUIDE.md151
1 files changed, 151 insertions, 0 deletions
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 `<div>` 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 `<ul>` wrapper
+- `inclass` (optional) — CSS class for the `<a>` button element
+
+**Example:**
+```hugo
+{{< actions url="https://github.com/danix2" desc="Visit my GitHub" outclass="centered" inclass="primary" >}}
+```
+
+#### Search Shortcode
+
+Embeds a search form with results display. Requires JavaScript integration.
+
+**Usage:**
+```hugo
+{{< search >}}
+```
+
+**Note:** This shortcode requires corresponding JavaScript and i18n (internationalization) configuration to function properly.
+
+#### Contact Shortcode
+
+Embeds a comprehensive contact form with fields for name, email, subject, and message.
+
+**Usage:**
+```hugo
+{{< contact >}}
+```
+
+**Note:** The form POSTs to `/php/contact.php` by default. You can update the form action in the shortcode if using a different backend endpoint.
+
+---
+
## Troubleshooting
### Article doesn't appear on site