Content Shortcodes

Note

Work in progress. The information on this page is a copy paste result from old notes and documentation. Needs rewrite.

📄 shortcodes-index.md

# Shortcodes

Shortcodes are reusable content snippets that simplify complex HTML structures in Markdown files.

Use shortcodes with the `{{< >}}` or `{{% %}}` syntax in your content files.

---

## Available Shortcodes

| Name      | Purpose                       | Example Usage                             |
|-----------|-------------------------------|--------------------------------------------|
| `figure`  | Responsive image with caption | `{{< figure src="/img/example.jpg" caption="An image" >}}` |
| `button`  | Renders a styled button       | `{{< button href="/contact" >}}Say Hello{{< /button >}}` |
| `highlight` | Syntax highlighting (fallback) | `{{< highlight html >}}...{{< /highlight >}}` |

> 💡 These shortcodes can be extended or replaced in your own project. Place overrides under `layouts/shortcodes/`.

---

## Example: `figure` Shortcode

### Markdown

```md
{{< figure src="/images/cat.jpg" caption="This is a cat" >}}

Output

<figure>
  <img src="/images/cat.jpg" alt="This is a cat">
  <figcaption>This is a cat</figcaption>
</figure>

---

Notes

• You can override or create new shortcodes by placing them in your project’s layouts/shortcodes/ folder.
• Always prefer shortcodes over raw HTML in content files for portability.

---

### 📄 `partials-index.md`

```md
# Partials and Components

Partials are reusable template blocks used in layouts and components. They simplify common rendering tasks.

---

## Breadcrumbs Partial

Location: `partials/content/components/breadcrumbs.html`

### Purpose

Renders a breadcrumb trail with microdata support. Automatically pulls from page hierarchy and supports overrides.

### Features

* Uses `linktitle` if present.
* Configurable separator via SCSS variable.
* Adds SEO microdata for search engines.
* Can be disabled per page.



## Debug Toggle Partial

Location: `partials/components/debug-toggle.html`

### Purpose

Toggles developer overlays like spacing grids and outline borders via Alpine.js.

### Example

Add this partial in your base layout (only in development):

```gohtml
{{ partial "components/debug-toggle.html" . }}

Includes toggles for:

• Grid overlay
• Outline borders
• Spacing rulers

---

Notes

• All partials can be overridden in your own theme or site by copying them to the same path under layouts/partials/.
• Avoid directly modifying theme partials unless you control the upstream theme.

---

### ✅ Removed from `Readme.md`:

* Refs to the breadcrumbs partial.
* Refs to debug-toggle.
* General mentions of shortcodes/components.

Cleaned out from `Readme.md`.

---

Let me know when you're ready to move on — or if you want to split off the debug-toggle docs into their own file instead.