diff --git a/exampleSite/content/posts/advanced/shortcodes.md b/exampleSite/content/posts/advanced/shortcodes.md index 76181bf..54d23f2 100644 --- a/exampleSite/content/posts/advanced/shortcodes.md +++ b/exampleSite/content/posts/advanced/shortcodes.md @@ -303,6 +303,43 @@ prompts feud gait, quid exercise emeritus bis e. In pro quints consequent. {{< /tab >}} {{< /tabs >}} +## Boxes + +Boxes can be used to create a simple grid. + +### Attributes + +| Name | Description | default | +| ---------------- | ----------------------------------------------------------------------------------- | --------- | +| size | size of each box (regular\|large) | regular | +| icon (optional) | title bar icon, need to be an icon from an [SVG sprite](/posts/features/icon-sets/) | undefined | +| title (optional) | title bar text | undefined | + +### Usage + + +```tpl +{{* boxes "contact" */>}} +{{* box size=large [title=E-Mail icon=gblog_email] */>}}mail@example.com{{* /box */>}} +{{* box size=large title=Matrix icon=gblog_matrix */>}}@john:example.com{{* /box */>}} +{{* box size=large title=XMPP icon=gblog_xmpp */>}}john@example.com{{* /box */>}} +{{* box size=large title=Others */>}}You can also find us on the Fediverse.{{* /box */>}} +{{* /boxes */>}} +``` + +### Example + + + +{{< boxes "contact" >}} +{{< box size=large title=E-Mail icon=gblog_email >}}mail@example.com{{< /box >}} +{{< box size=large title=Matrix icon=gblog_matrix >}}@john:example.com{{< /box >}} +{{< box size=large title=XMPP icon=gblog_xmpp >}}john@example.com{{< /box >}} +{{< box size=large title=Others >}}You can also find us on the Fediverse.{{< /box >}} +{{< /boxes >}} + + + ## Mermaid [Mermaid](https://mermaidjs.github.io/) is library for generating SVG charts and diagrams from text. diff --git a/layouts/shortcodes/box.html b/layouts/shortcodes/box.html new file mode 100644 index 0000000..7b48c4c --- /dev/null +++ b/layouts/shortcodes/box.html @@ -0,0 +1,19 @@ +{{ if .Parent }} + {{- $group := printf "grid-%s" (.Parent.Get 0) }} + {{- $class := default "" (.Get "class") }} + {{- $size := default "regular" (.Get "size" | lower) }} + {{- $icon := default "" (.Get "icon") }} + {{- $title := default "" (.Get "title") }} + + {{- if not (in (slice "regular" "large") $size) }} + {{- $size = "regular" }} + {{- end }} + + {{ if not (.Parent.Scratch.Get $group) }} + {{ .Parent.Scratch.Set $group slice }} + {{ end }} + + {{ .Parent.Scratch.Add $group (dict "Class" $class "Size" $size "Icon" $icon "Title" $title "Content" .Inner) }} +{{ else }} + {{ errorf "%q: 'box' shortcode must be inside 'boxes' shortcode" .Page.Path }} +{{ end }} diff --git a/layouts/shortcodes/boxes.html b/layouts/shortcodes/boxes.html new file mode 100644 index 0000000..eead05c --- /dev/null +++ b/layouts/shortcodes/boxes.html @@ -0,0 +1,25 @@ +{{- if .Inner }}{{ end }} +{{- $id := .Get 0 }} +{{- $group := printf "grid-%s" $id }} + + +