feat: add properylist shortcode (#455)

exampleSite/data/properties/demo.yaml

@@ -0,0 +1,32 @@
+---
+properties:
+  - name: prop1
+    type: string
+    description: Dummy description of the prop1 string property.
+    required: true
+
+  - name: prop2
+    type: int
+    defaultValue: 10
+    description: Another description for the integer property called prop2.
+    required: false
+    tags:
+      - tag1
+      - tag2
+
+  - name: prop3
+    type: bool
+    defaultValue: false
+    description: |
+      A `bool` property with a complex multiline description and embedded Markdown:
+
+      - List item 1
+      - List item 2
+
+      More description how to use this property.
+    required: false
+
+  - name: a-prop
+    type: string
+    description: Property to demonstrate sorting.
+    required: true

exampleSite/data/properties/shortcode-propertylist.yaml

@@ -0,0 +1,15 @@
+---
+properties:
+  - name: name
+    type: string
+    description: Name of the file from the `data/properties/` directory.
+    required: true
+  - name: sort
+    type: string
+    description: Field name to use for sorting.
+    required: false
+  - name: order
+    type: string
+    description: Sort order, only applied if `sort` is set. Supported values are `asc|desc`.
+    required: false
+    defaultValue: asc

layouts/shortcodes/propertylist.html

@@ -0,0 +1,52 @@
+{{- $name := .Get "name" -}}
+{{- $sort := .Get "sort" -}}
+{{- $order := default "asc" (.Get "order") -}}
+{{- $showAnchor := (and (default true .Page.Params.geekblogAnchor) (default true .Page.Site.Params.geekblogAnchor)) -}}
+
+{{- if .Site.Data.properties }}
+  <dl class="gblog-props">
+    {{- with (index .Site.Data.properties (split $name ".")) }}
+      {{- $properties := .properties }}
+      {{- with $sort }}
+        {{- $properties = (sort $properties . $order) }}
+      {{- end }}
+      {{- range $properties }}
+        <dt class="flex flex-wrap align-center gblog-props__meta"{{ if $showAnchor }} id="{{ anchorize .name }}"{{ end }}>
+          <span class="gblog-props__title">{{ .name }}</span>
+          {{- if .required }}
+            <span class="gblog-props__tag warning">required</span>
+          {{- else }}
+            <span class="gblog-props__tag tip">optional</span>
+          {{- end }}
+          {{- with .type }}
+            <span class="gblog-props__tag note">{{ . }}</span>
+          {{- end }}
+
+          {{- with .tags }}
+            {{- range . }}
+              <span class="gblog-props__tag">{{ . }}</span>
+            {{- end }}
+          {{- end }}
+          {{- if $showAnchor }}
+          <a data-clipboard-text="{{ .Page.Permalink }}#{{ anchorize .name | safeHTML }}" class="gblog-post__anchor clip flex align-center" title="{{ i18n "title_anchor_prefix" }} {{ .name | safeHTML }}" aria-label="{{ i18n "title_anchor_prefix" }} {{ .name | safeHTML }}" href="#{{ anchorize .name | safeHTML }}">
+            <svg class="gblog-icon gblog_link"><use xlink:href="#gblog_link"></use></svg>
+          </a>
+          {{- end }}
+        </dt>
+        <dd>
+          <div class="gblog-props__description">
+            {{- with .description }}
+              {{ . | $.Page.RenderString }}
+            {{- end }}
+          </div>
+          <div class="gblog-props__default">
+            {{- with default "none" (.defaultValue | string) }}
+              <span>Default:</span>
+              <span>{{ . }}</span>
+            {{- end }}
+          </div>
+        </dd>
+      {{- end }}
+    {{- end }}
+  </dl>
+{{- end }}

src/sass/_shortcodes.scss

@@ -230,7 +230,7 @@
     padding: $padding-4 $padding-16;
   }
 
-  .gblog-page__anchor {
+  .gblog-post__anchor {
     display: none;
   }
 }
@@ -246,6 +246,47 @@
   }
 }
 
+// {{< propertylist >}}
+.gblog-props {
+  &__title,
+  &__default {
+    padding: 0;
+    margin: 0;
+    font-family: "Liberation Mono", monospace;
+  }
+
+  &__meta {
+    gap: 0.5em;
+    line-height: normal;
+    margin-bottom: $padding-4;
+
+    &:hover .gblog-post__anchor svg.gblog-icon {
+      color: var(--control-icons);
+    }
+  }
+
+  @each $name, $color in $hint-colors {
+    &__tag.#{$name} {
+      border-color: scale-color($color, $lightness: 90%, $saturation: -30%);
+      background-color: scale-color($color, $lightness: 95%, $saturation: -30%);
+    }
+  }
+
+  &__tag {
+    font-size: $font-size-14;
+    font-weight: normal;
+    background-color: $gray-100;
+    border: $border-1 solid $gray-200;
+    border-radius: $border-radius;
+    padding: $padding-2 $padding-4;
+    color: $body-font-color;
+  }
+
+  &__default {
+    font-size: $font-size-14;
+  }
+}
+
 // {{% progress %}}
 .gblog-progress {
   margin-bottom: $padding-16;