#289 gdtest_hr_shortcode

"""Horizontal rule shortcode demo package."""

__version__ = "1.0.0"
__all__ = ["render", "transform"]


def render(template: str) -> str:
    """Render a template string.

    Parameters
    ----------
    template
        The template to render.

    Returns
    -------
    str
        Rendered output.
    """
    return template


def transform(data: list) -> list:
    """Transform a data list.

    Parameters
    ----------
    data
        Input data.

    Returns
    -------
    list
        Transformed data.
    """
    return data

---
title: Line Styles
---

The `{{< hr >}}` shortcode supports multiple line styles.
Each style changes how the rule is rendered.

## Default (Solid)

A plain horizontal rule with default settings:

{{< hr >}}

The default is a 2px solid line at full width.

## Dashed

A dashed rule using `style="dashed"`:

{{< hr style="dashed" >}}

Dashes work well for separating related content.

## Dotted

A dotted rule using `style="dotted"`:

{{< hr style="dotted" >}}

Dots create a softer, less prominent separation.

## Double

A double-line rule using `style="double"`:

{{< hr style="double" >}}

Double lines signal a more definitive break.

## Comparing All Styles

Here they are side by side for comparison:

**Solid:**

{{< hr >}}

**Dashed:**

{{< hr style="dashed" >}}

**Dotted:**

{{< hr style="dotted" >}}

**Double:**

{{< hr style="double" >}}

---
title: Colors
---

Horizontal rules can use named palette colors or custom hex values.

## Palette Colors

Great Docs ships with eight gradient palette presets.
Each can be used as a named color:

**Sky:**

{{< hr color="sky" >}}

**Peach:**

{{< hr color="peach" >}}

**Prism:**

{{< hr color="prism" >}}

**Lilac:**

{{< hr color="lilac" >}}

**Slate:**

{{< hr color="slate" >}}

**Honey:**

{{< hr color="honey" >}}

**Dusk:**

{{< hr color="dusk" >}}

**Mint:**

{{< hr color="mint" >}}

## Custom Colors

Any CSS color value works with the `color` parameter:

**Rose red:**

{{< hr color="#e11d48" >}}

**Forest green:**

{{< hr color="#16a34a" >}}

**Royal blue:**

{{< hr color="#2563eb" >}}

**Amber:**

{{< hr color="#d97706" >}}

## Accent Color

Use `color="accent"` to reference the site's theme accent:

{{< hr color="accent" >}}

## Colored Styles

Colors combine with line styles naturally:

{{< hr style="dashed" color="#e11d48" >}}

{{< hr style="dotted" color="#2563eb" >}}

{{< hr style="double" color="#16a34a" >}}

---
title: Sizing & Alignment
---

Control the thickness, width, alignment, and spacing of rules.

## Thickness

Named thickness values — `thin`, `medium` (default), and `thick`:

{{< hr thickness="thin" >}}

{{< hr >}}

{{< hr thickness="thick" >}}

Custom pixel values:

{{< hr thickness="1px" >}}

{{< hr thickness="3px" >}}

{{< hr thickness="6px" >}}

## Width

Rules can be narrower than the full container:

{{< hr width="100%" >}}

{{< hr width="75%" >}}

{{< hr width="50%" >}}

{{< hr width="25%" >}}

## Alignment

When the rule is narrower than 100%, alignment matters:

**Center (default):**

{{< hr width="50%" align="center" >}}

**Left:**

{{< hr width="50%" align="left" >}}

**Right:**

{{< hr width="50%" align="right" >}}

## Spacing

Control the vertical margin around the rule:

Content above.

{{< hr spacing="compact" >}}

Compact spacing (1rem).

{{< hr spacing="normal" >}}

Normal spacing (2rem, default).

{{< hr spacing="spacious" >}}

Spacious spacing (4rem).

## Combined Sizing

Mix thickness, width, and alignment:

{{< hr thickness="thick" width="60%" align="left" color="#6366f1" >}}

{{< hr thickness="thin" width="40%" align="right" style="dashed" >}}

{{< hr thickness="3px" width="80%" color="#e11d48" >}}

---
title: Embedded Text
---

Place text or symbols in the center of a horizontal rule.

## Simple Symbols

Single characters work great as decorative breaks:

{{< hr text="§" >}}

{{< hr text="✦" >}}

{{< hr text="◆" >}}

{{< hr text="❖" >}}

## Multiple Symbols

Repeat a symbol for a decorative pattern:

{{< hr text="· · ·" >}}

{{< hr text="★ ★ ★" >}}

{{< hr text="— ✦ —" >}}

## Text Labels

Full words or short phrases as section dividers:

{{< hr text="Continue Reading" >}}

{{< hr text="Part Two" >}}

{{< hr text="End of Section" >}}

## Text Sizing

Three text sizes are available — `sm`, `md` (default), and `lg`:

{{< hr text="Small" text-size="sm" >}}

{{< hr text="Medium" >}}

{{< hr text="Large" text-size="lg" >}}

## Colored Text Rules

Combine text with colors:

{{< hr text="Chapter One" color="#6366f1" >}}

{{< hr text="Warning" color="#e11d48" text-color="#e11d48" >}}

{{< hr text="Success" color="#16a34a" text-color="#16a34a" >}}

## Text with Width and Alignment

{{< hr text="Centered" width="70%" >}}

{{< hr text="Left" width="60%" align="left" >}}

{{< hr text="Right" width="60%" align="right" >}}

---
title: Presets
---

Presets provide ready-made decorative styles.
Each preset has a distinct visual character.

## Gradient Shimmer

An animated gradient that shifts across the rule — the signature
Great Docs look from the homepage:

{{< hr preset="gradient-shimmer" >}}

## Gradient Static

The same gradient palette without animation:

{{< hr preset="gradient-static" >}}

## Fade

Full opacity at center, transparent at both edges:

{{< hr preset="fade" >}}

## Fade Edges

Transparent edges that bloom into a colored center:

{{< hr preset="fade-edges" >}}

## Dots

Three centered dots — a classic section break:

{{< hr preset="dots" >}}

## Diamond

A diamond ornament flanked by fading lines:

{{< hr preset="diamond" >}}

## Ornament

An elegant fleuron between fading lines:

{{< hr preset="ornament" >}}

## Wave

A subtle repeating wave pattern:

{{< hr preset="wave" >}}

## Double Line

Two parallel thin lines with a gap:

{{< hr preset="double-line" >}}

## Preset Gallery

All presets in sequence for comparison:

{{< hr preset="gradient-shimmer" >}}
{{< hr preset="gradient-static" >}}
{{< hr preset="fade" >}}
{{< hr preset="fade-edges" >}}
{{< hr preset="dots" >}}
{{< hr preset="diamond" >}}
{{< hr preset="ornament" >}}
{{< hr preset="wave" >}}
{{< hr preset="double-line" >}}

---
title: Combinations
---

The real power of `{{< hr >}}` comes from combining options.
Presets can be customized with width, alignment, spacing, and color.

## Preset with Width

Narrow the shimmer preset to 60%:

{{< hr preset="gradient-shimmer" width="60%" >}}

A fade at 50%, centered:

{{< hr preset="fade" width="50%" >}}

## Preset with Spacing

Spacious shimmer for a dramatic section break:

{{< hr preset="gradient-shimmer" width="60%" spacing="spacious" >}}

Compact dots for a subtle pause:

{{< hr preset="dots" spacing="compact" >}}

## Colored Presets

Override the default accent color on presets:

{{< hr preset="dots" color="#e11d48" >}}

{{< hr preset="diamond" color="#2563eb" >}}

{{< hr preset="ornament" color="#d97706" >}}

## Style + Color + Sizing

A thick dashed peach line, aligned left at 75%:

{{< hr style="dashed" color="peach" width="75%" thickness="thick" >}}

A thin dotted blue line at 40%, right-aligned:

{{< hr style="dotted" color="#2563eb" width="40%" thickness="thin" align="right" >}}

## Text + Style + Color

A labeled rule with custom styling:

{{< hr text="Chapter Break" color="#6366f1" thickness="thick" >}}

{{< hr text="§" color="#e11d48" width="50%" >}}

## Real-World Examples

### Blog post section break

{{< hr preset="dots" spacing="spacious" >}}

### Chapter divider

{{< hr text="Chapter Two" color="#6366f1" thickness="thick" width="80%" >}}

### Elegant page separator

{{< hr preset="ornament" width="60%" spacing="spacious" >}}

### API section boundary

{{< hr preset="gradient-shimmer" >}}

### Light decorative break

{{< hr preset="fade" thickness="thin" width="50%" >}}

### Strong visual separator

{{< hr thickness="thick" color="#1e293b" width="90%" >}}