Skip to content

Commit e641490

Browse files
author
Splitter
committed
feat: add embed shortcode
1 parent 6e678db commit e641490

File tree

2 files changed

+203
-0
lines changed

2 files changed

+203
-0
lines changed

‎content/docs/guide/shortcodes/_index.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ title: Shortcodes
55
Build the best docs with re-usable components, referred to as Hugo shortcodes:
66

77
{{< cards >}}
8+
{{< card url="button" title="Button" icon="cursor-arrow-rays" >}}
89
{{< card url="callout" title="Callout" icon="warning" >}}
910
{{< card url="cards" title="Cards" icon="card" >}}
1011
{{< card url="toggle" title="Spoiler" icon="chevron-right" >}}

‎content/docs/guide/shortcodes/button.md‎

Lines changed: 202 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,202 @@
1+
---
2+
title: Button Shortcode
3+
linkTitle: Button
4+
---
5+
6+
A modern, customizable button shortcode with gradient styling, icons, and smart link handling.
7+
8+
<!--more-->
9+
10+
## Basic Usage
11+
12+
{{< button url="/contact" >}}Contact Us{{< /button >}}
13+
14+
{{< button url="https://example.com" new_tab="true" style="secondary" >}}Visit External Site{{< /button >}}
15+
16+
The above buttons are created with:
17+
18+
```go-html-template
19+
{{</* button url="/contact" */>}}Contact Us{{</* /button */>}}
20+
21+
{{</* button url="https://example.com" new_tab="true" style="secondary" */>}}Visit External Site{{</* /button */>}}
22+
```
23+
24+
## Style Variants
25+
26+
### Primary (Default)
27+
28+
{{< button url="#" style="primary" >}}Primary Button{{< /button >}}
29+
30+
```go-html-template
31+
{{</* button url="#" style="primary" */>}}Primary Button{{</* /button */>}}
32+
```
33+
34+
### Secondary
35+
36+
{{< button url="#" style="secondary" >}}Secondary Button{{< /button >}}
37+
38+
```go-html-template
39+
{{</* button url="#" style="secondary" */>}}Secondary Button{{</* /button */>}}
40+
```
41+
42+
### Outline
43+
44+
{{< button url="#" style="outline" >}}Outline Button{{< /button >}}
45+
46+
```go-html-template
47+
{{</* button url="#" style="outline" */>}}Outline Button{{</* /button */>}}
48+
```
49+
50+
### Ghost
51+
52+
{{< button url="#" style="ghost" >}}Ghost Button{{< /button >}}
53+
54+
```go-html-template
55+
{{</* button url="#" style="ghost" */>}}Ghost Button{{</* /button */>}}
56+
```
57+
58+
## Sizes
59+
60+
### Small
61+
62+
{{< button url="#" size="sm" >}}Small Button{{< /button >}}
63+
64+
### Medium (Default)
65+
66+
{{< button url="#" size="md" >}}Medium Button{{< /button >}}
67+
68+
### Large
69+
70+
{{< button url="#" size="lg" >}}Large Button{{< /button >}}
71+
72+
### Extra Large
73+
74+
{{< button url="#" size="xl" >}}Extra Large{{< /button >}}
75+
76+
```go-html-template
77+
{{</* button url="#" size="sm" */>}}Small Button{{</* /button */>}}
78+
{{</* button url="#" size="md" */>}}Medium Button{{</* /button */>}}
79+
{{</* button url="#" size="lg" */>}}Large Button{{</* /button */>}}
80+
{{</* button url="#" size="xl" */>}}Extra Large{{</* /button */>}}
81+
```
82+
83+
## Alignment
84+
85+
### Left (Default)
86+
87+
{{< button url="#" align="left" >}}Left Aligned{{< /button >}}
88+
89+
### Center
90+
91+
{{< button url="#" align="center" >}}Center Aligned{{< /button >}}
92+
93+
### Right
94+
95+
{{< button url="#" align="right" >}}Right Aligned{{< /button >}}
96+
97+
```go-html-template
98+
{{</* button url="#" align="left" */>}}Left Aligned{{</* /button */>}}
99+
{{</* button url="#" align="center" */>}}Center Aligned{{</* /button */>}}
100+
{{</* button url="#" align="right" */>}}Right Aligned{{</* /button */>}}
101+
```
102+
103+
## With Icons
104+
105+
### Icon Before Text
106+
107+
{{< button url="#" icon="download" >}}Download{{< /button >}}
108+
109+
### Icon After Text
110+
111+
{{< button url="#" icon="arrow-right" icon_position="right" >}}Continue{{< /button >}}
112+
113+
```go-html-template
114+
{{</* button url="#" icon="download" */>}}Download{{</* /button */>}}
115+
{{</* button url="#" icon="arrow-right" icon_position="right" */>}}Continue{{</* /button */>}}
116+
```
117+
118+
## Rounded Corners
119+
120+
### Small Radius
121+
122+
{{< button url="#" rounded="sm" >}}Small Radius{{< /button >}}
123+
124+
### Medium Radius (Default)
125+
126+
{{< button url="#" rounded="md" >}}Medium Radius{{< /button >}}
127+
128+
### Large Radius
129+
130+
{{< button url="#" rounded="lg" >}}Large Radius{{< /button >}}
131+
132+
### Pill Shape
133+
134+
{{< button url="#" rounded="full" >}}Pill Button{{< /button >}}
135+
136+
```go-html-template
137+
{{</* button url="#" rounded="sm" */>}}Small Radius{{</* /button */>}}
138+
{{</* button url="#" rounded="md" */>}}Medium Radius{{</* /button */>}}
139+
{{</* button url="#" rounded="lg" */>}}Large Radius{{</* /button */>}}
140+
{{</* button url="#" rounded="full" */>}}Pill Button{{</* /button */>}}
141+
```
142+
143+
## Advanced Examples
144+
145+
### Call-to-Action Button
146+
147+
{{< button url="/signup" style="primary" size="lg" align="center" icon="rocket-launch" >}}Get Started Today{{< /button >}}
148+
149+
```go-html-template
150+
{{</* button url="/signup" style="primary" size="lg" align="center" icon="rocket-launch" */>}}Get Started Today{{</* /button */>}}
151+
```
152+
153+
### External Link with New Tab
154+
155+
{{< button url="https://github.com/hugo-blox/hugo-blox-builder" new_tab="true" style="outline" icon="arrow-top-right-on-square" icon_position="right" >}}View on GitHub{{< /button >}}
156+
157+
```go-html-template
158+
{{</* button url="https://github.com/hugo-blox/hugo-blox-builder" new_tab="true" style="outline" icon="arrow-top-right-on-square" icon_position="right" */>}}View on GitHub{{</* /button */>}}
159+
```
160+
161+
### Download Button
162+
163+
{{< button url="/files/document.pdf" style="secondary" icon="document-arrow-down" rounded="full" >}}Download PDF{{< /button >}}
164+
165+
```go-html-template
166+
{{</* button url="/files/document.pdf" style="secondary" icon="document-arrow-down" rounded="full" */>}}Download PDF{{</* /button */>}}
167+
```
168+
169+
## Parameters
170+
171+
| Parameter | Type | Default | Description |
172+
| --------------- | ------- | ------------- | ----------------------------------------------------------- |
173+
| `url` | string | `#` | **Required.** Button destination URL (internal or external) |
174+
| `text` | string | Inner content | Button text (overrides shortcode content) |
175+
| `new_tab` | boolean | `false` | Whether to open link in new tab |
176+
| `style` | string | `primary` | Button style: `primary`, `secondary`, `outline`, `ghost` |
177+
| `size` | string | `md` | Button size: `sm`, `md`, `lg`, `xl` |
178+
| `align` | string | `left` | Button alignment: `left`, `center`, `right` |
179+
| `icon` | string | - | Icon name from [Hero Icons](https://heroicons.com/) |
180+
| `icon_position` | string | `left` | Icon position: `left`, `right` |
181+
| `rounded` | string | `md` | Border radius: `sm`, `md`, `lg`, `xl`, `full` |
182+
| `disabled` | boolean | `false` | Whether button should be disabled |
183+
184+
## Security Features
185+
186+
The button shortcode automatically handles security for external links:
187+
188+
- **External links** get `rel="noreferrer"` attribute
189+
- **External links opening in new tab** get `rel="noopener noreferrer"`
190+
- **Internal links opening in new tab** get `rel="noopener"`
191+
192+
This ensures safe navigation while maintaining functionality.
193+
194+
## Accessibility
195+
196+
The button shortcode includes built-in accessibility features:
197+
198+
- Proper `role="button"` attribute
199+
- `aria-label` support
200+
- Keyboard focus indicators
201+
- High contrast focus rings
202+
- Disabled state handling

0 commit comments

Comments
 (0)