gdtest-hr-shortcode

A synthetic test package that exercises the Quarto shortcode with every supported option: line styles, colors, thickness, width, alignment, embedded text, animated presets, and combined parameters.

Decorative horizontal rule shortcode showcase exercising the

shortcode in six user-guide pages: line styles (solid, dashed, dotted, double), palette and custom colors, sizing and alignment (thickness, width, align, spacing), embedded text with symbols and labels, all nine presets (gradient-shimmer, gradient-static, fade, fade-edges, dots, diamond, ornament, wave, double-line), and combined options with real-world examples.

Source files

📁 gdtest_hr_shortcode/

📄 __init__.py

"""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

📁 user_guide/

📄 01-line-styles.qmd

---
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" >}}

📄 02-colors.qmd

---
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" >}}

📄 03-sizing-alignment.qmd

---
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" >}}

📄 04-embedded-text.qmd

---
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" >}}

📄 05-presets.qmd

---
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" >}}

📄 06-combinations.qmd

---
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%" >}}

📄 README.md

# gdtest-hr-shortcode

A synthetic test package that exercises the `{{< hr >}}` Quarto
shortcode with every supported option: line styles, colors,
thickness, width, alignment, embedded text, animated presets,
and combined parameters.

📄 great-docs.yml generated

# Great Docs Configuration
# See https://posit-dev.github.io/great-docs/user-guide/configuration.html

# Module Name (optional)
# ----------------------
# Set this if your importable module name differs from the project name.
# Example: project 'py-yaml12' with module name 'yaml12'
# module: yaml12

# Docstring Parser
# ----------------
# The docstring format used in your package (numpy, google, or sphinx)
parser: numpy

# Dynamic Introspection
# ---------------------
# Use runtime introspection for more accurate documentation (default: true)
# Set to false if your package has cyclic alias issues (e.g., PyO3/Rust bindings)
dynamic: true

# API Discovery Settings
# ----------------------
# Exclude items from auto-documentation
# exclude:
#   - InternalClass
#   - helper_function

# Logo & Favicon
# ---------------
# Point to a single logo file (replaces the text title in the navbar):
# logo: assets/logo.svg
#
# For light/dark variants:
# logo:
#   light: assets/logo-light.svg
#   dark: assets/logo-dark.svg
#
# To show the text title alongside the logo, add: show_title: true

# Funding / Copyright Holder
# --------------------------
# Credit the organization that funds or holds copyright for this package.
# Displays in sidebar and footer. Homepage and ROR provide links.
# funding:
#   name: "Posit Software, PBC"
#   roles:
#     - Copyright holder
#     - funder
#   homepage: https://posit.co
#   ror: https://ror.org/03wc8by49

# API Reference Structure
# -----------------------
# Customize the sections below to organize your API documentation.
# - Reorder items within a section to change their display order
# - Move items between sections or create new sections
# - Use 'members: false' to exclude methods from documentation
# - Add 'desc:' to sections for descriptions

reference:
  - title: Functions
    desc: Utility functions
    contents:
      - render
      - transform

# Site URL
# --------
# Canonical address of the deployed documentation site.
# Required for subdirectory deployments, skills page install commands,
# .well-known/ discovery, and sitemaps.
# site_url: "https://your-org.github.io/your-package/"

# Site Settings
# -------------
# site:
#   theme: flatly              # Quarto theme (default: flatly)
#   toc: true                  # Show table of contents (default: true)
#   toc-depth: 2               # TOC heading depth (default: 2)
#   toc-title: On this page    # TOC title (default: "On this page")

# Jupyter Kernel
# --------------
# Jupyter kernel to use for executing code cells in .qmd files.
# This is set at the project level so it applies to all pages, including
# auto-generated API reference pages. Can be overridden in individual .qmd
# file frontmatter if needed for special cases.
jupyter: python3

# CLI Documentation
# -----------------
# cli:
#   enabled: true              # Enable CLI documentation
#   module: my_package.cli     # Module containing Click commands
#   name: cli                  # Name of the Click command object