feat: add new boxes shortcode (#274)

This commit is contained in:
Robert Kaussow 2022-07-11 14:37:17 +02:00 committed by GitHub
parent 42f408b2d4
commit c1f15c2162
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 124 additions and 0 deletions

View File

@ -303,6 +303,43 @@ prompts feud gait, quid exercise emeritus bis e. In pro quints consequent.
{{< /tab >}} {{< /tab >}}
{{< /tabs >}} {{< /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
[Mermaid](https://mermaidjs.github.io/) is library for generating SVG charts and diagrams from text. [Mermaid](https://mermaidjs.github.io/) is library for generating SVG charts and diagrams from text.

View File

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

View File

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

View File

@ -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 >}} // {{< hint >}}
.gblog-hint { .gblog-hint {
@each $name, $color in $hint-colors { @each $name, $color in $hint-colors {

View File

@ -29,6 +29,11 @@
background: var(--accent-color-lite); background: var(--accent-color-lite);
} }
.flex-gap {
flex-wrap: wrap;
gap: $padding-16;
}
.justify-start { .justify-start {
justify-content: flex-start; justify-content: flex-start;
} }