---
+### 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
--- /dev/null
+{{ $link := .Get "url" }}
+{{ $desc := .Get "desc" }}
+{{ $outclass := .Get "outclass" }}
+{{ $inclass := .Get "inclass" }}
+<ul class="actions{{ with $outclass }} {{ . }}{{ end }}">
+ <li><a href="{{ $link }}" class="button{{ with $inclass }} {{ . }}{{ end }}">{{ $desc }}</a></li>
+</ul>
--- /dev/null
+{{- $sig := resources.Get "/uploads/2018/05/new-signature.png" -}}
+<section id="contact">
+ <div class="inner">
+ <section>
+
+ <p class="error message js-hidden">Javascript is required for this form to work</p>
+ <p class="contact-submitted status message hidden">Your message has been sent correctly. I'll get back at you as soon as possible</p>
+ <p class="contact-error error message hidden">There's been a problem with your message, I'll dispatch the wizard to investigate the issue.</p>
+
+ <form class="contact-form hidden" data-protect="/php/contact.php" action="#" method="post" accept-charset="UTF-8">
+ <div class="fields">
+ <div class="field half">
+ <label for="edit-name">Name:</label>
+ <input type="text" id="edit-name" name="name" placeholder="Insert your name" required autofocus>
+ </div>
+ <div class="field half">
+ <label for="edit-mail">Email:</label>
+ <input type="email" id="edit-mail" name="email" placeholder="your email address" required>
+ </div>
+ <div class="field">
+ <label for="edit-subject">What are we talking about?</label>
+ <input type="text" id="edit-subject" name="subject" placeholder="add a subject" required>
+ </div>
+ <div class="field">
+ <label for="edit-message">Tell me everything :)</label>
+ <textarea id="edit-message" name="message" rows="5" placeholder="Insert your message here" required></textarea>
+ </div>
+ </div>
+ <input type="text" id="edit-url" class="hidden" name="url" placeholder="your website">
+ <ul class="actions">
+ <li><input type="submit" name="submit" class="form-submit primary" disabled value="Send Message" /></li>
+ <li><input type="reset" name="reset" class="form-reset" disabled value="clear" /></li>
+ </ul>
+
+ </form>
+ </section>
+
+ <section class="split">
+ <section>
+ <div class="contact-method">
+ <span class="icon solid alt fa-envelope"></span>
+ <h3>Reach out to me</h3>
+ <p>I'm here to help, if you need to talk to me feel free to reach out and tell me whatever you need help with, I'll be happy to find some time to discuss the matter with you!</p>
+ <img class="signature image right" src="{{ $sig.RelPermalink }}" alt="signed by danix">
+ </div>
+ </section>
+ </section>
+ </div>
+</section>
--- /dev/null
+{{ if .Get "class" }}
+<div class="{{ with .Get "class" }}{{ . }}{{ end }}">
+{{ end }}
+
--- /dev/null
+{{/*
+ * The dropcap shortcode:
+ *
+ * Usage:
+ *
+ * {{< dropcap class="some class" >}}
+ * your paragraph that will have a drop cap here
+ * {{< /dropcap >}}
+ *
+ */}}
+
+<p class="has-dropcap {{ with .Get "class"}}{{.}}{{ end }}">
+ {{ .InnerDeindent }}
+</p>
--- /dev/null
+<mark>{{ .Inner | markdownify }}</mark>
--- /dev/null
+{{- $src := .Get "src" -}}
+{{- $source := resources.Get $src -}}
+{{- $alt := .Get "alt" -}}
+{{- $icon := $source.Resize "400x webp" -}}
+<a class="gallery-item" href="{{ $source.RelPermalink }}" target="_blank">
+ <img src="{{ $icon.RelPermalink }}" alt="{{ $alt }}">
+</a>
--- /dev/null
+<div class="gallery">
+ <div class="gallery-inner">
+ {{ .Inner }}
+ </div>
+</div>
--- /dev/null
+<p class="error message js-hidden">{{ i18n "js_required" }}</p>
+<p class="search-loading status message hidden">{{ i18n "search_loading" }}</p>
+
+<div class="search-input hidden">
+ <form id="search-form" class="search-form" action="#" method="post" accept-charset="UTF-8" role="search">
+ <label for="query" class="visually-hidden">{{ i18n "search_title" }}</label>
+ <input type="search" id="query" name="query" class="search-text" placeholder="{{ i18n "search_placeholder" }}" maxlength="128">
+ <button type="submit" name="submit" class="form-submit" >{{ i18n "search_title" }}</button>
+ </form>
+</div>
+
+<div class="search-results"></div>
+
+<template>
+ <article class="search-result list-view">
+ <header>
+ <h2 class="title title-submitted"><a href="#">Title here</a></h2>
+ <div class="submitted"><time class="created-date">Date here</time></div>
+ </header>
+ <div class="content">Summary here</div>
+ </article>
+</template>
--- /dev/null
+<strike>{{ .Inner | markdownify }}</strike>
--- /dev/null
+<span class="inline-svg{{ with .Get "class" }} {{ . }}{{ end }}">
+{{- $fname := print "SVGs/" ( .Get "name" ) ".svg" -}}
+{{ $icon := resources.Get $fname }}
+{{ $icon.Content | safeHTML }}
+</span>
