feat: add new boxes shortcode (#274)

5 files changed, 124 insertions, 0 deletions

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
+
+<!-- prettier-ignore -->
+```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
+
+<!-- prettier-ignore-start -->
+<!-- spellchecker-disable -->
+{{< 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 >}}
+<!-- spellchecker-enable -->
+<!-- prettier-ignore-end -->
+
 ## 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 }}
+
+
+<div class="flex flex-gap flex-fill">
+  {{- range $index, $box := .Scratch.Get $group }}
+    <div
+      class="gblog-box gblog-box--{{ $box.Size }}
+        {{ with $box.Class }}{{ printf " %s" . }}{{ end }}"
+    >
+      {{ if or $box.Title $box.Icon }}
+        <div class="flex align-center justify-center gblog-box__title">
+          {{- with $box.Icon }}
+            <svg class="gblog-icon {{ . }}"><use xlink:href="#{{ . }}"></use></svg>
+          {{- end }}
+          {{ with $box.Title }}<span>{{ . }}</span>{{ end }}
+        </div>
+      {{ end }}
+      <div class="flex align-center justify-center gblog-box__text">
+        {{ .Content | $.Page.RenderString }}
+      </div>
+    </div>
+  {{- end }}
+</div>
diff --git a/src/sass/_shortcodes.scss b/src/sass/_shortcodes.scss
index 4dc4e83..45c2bd6 100644
--- a/src/sass/_shortcodes.scss
+++ b/src/sass/_shortcodes.scss
@@ -132,6 +132,44 @@
   }
 }
 
+// {{< box >}}
+.gblog-box {
+  background: var(--accent-color-lite);
+  border: $border-1 solid var(--accent-color);
+  border-radius: $border-radius;
+  text-align: center;
+  flex: 1 1 0;
+
+  &--regular {
+    font-size: $font-size-base;
+    padding: $padding-4 $padding-8;
+    min-width: 8rem;
+  }
+
+  &--large {
+    font-size: $font-size-20;
+    padding: $padding-8 $padding-16;
+    min-width: 12rem;
+  }
+
+  &__title {
+    word-wrap: break-word;
+    overflow-wrap: anywhere;
+    gap: $padding-8;
+
+    svg.gblog-icon {
+      width: 1.3rem;
+      height: 1.3rem;
+      min-width: 1.3rem;
+    }
+  }
+
+  &__text {
+    margin: $padding-8 0;
+    font-size: $font-size-16;
+  }
+}
+
 // {{< hint >}}
 .gblog-hint {
   @each $name, $color in $hint-colors {
diff --git a/src/sass/_utils.scss b/src/sass/_utils.scss
index 4949516..bdd50b4 100644
--- a/src/sass/_utils.scss
+++ b/src/sass/_utils.scss
@@ -29,6 +29,11 @@
   background: var(--accent-color-lite);
 }
 
+.flex-gap {
+  flex-wrap: wrap;
+  gap: $padding-16;
+}
+
 .justify-start {
   justify-content: flex-start;
 }