---------------------------------------------------------------------- This is the API documentation for the gdtest_hr_shortcode library. ---------------------------------------------------------------------- ## Functions Utility functions render(template: str) -> str Render a template string. Parameters ---------- template The template to render. Returns ------- str Rendered output. transform(data: list) -> list Transform a data list. Parameters ---------- data Input data. Returns ------- list Transformed data. ---------------------------------------------------------------------- This is the User Guide documentation for the package. ---------------------------------------------------------------------- ### 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" >}} ### 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" >}} ### 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" >}} ### 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" >}} ### 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" >}} ### 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%" >}}