feat: add propertylist shortcode (#414)

.dictionary

@@ -31,3 +31,4 @@ Favicon[s]?
 UI
 webpack
 pre-processor[s]?
+propertylist

exampleSite/content/en/features/code-blocks.md

@@ -2,7 +2,7 @@
 title: Code Blocks
 ---
 
-There are several ways to add code blocks. Most of them work out of the box, only the Hugo short code `<highlight>` needs to be configured to work properly. The theme also provides some additional features like a copy button and an option to set the maximum length of code blocks. Both of these functions and the dependent formatting rely on the `.highlight` CSS class. You must ensure that you always assign a language to your code blocks if you want to use these functions. If you do not want to apply syntax highlighting, you can also specify `plain` or `text` as the language.
+There are several ways to add code blocks. Most of them work out of the box, only the Hugo shortcode `<highlight>` needs to be configured to work properly. The theme also provides some additional features like a copy button and an option to set the maximum length of code blocks. Both of these functions and the dependent formatting rely on the `.highlight` CSS class. You must ensure that you always assign a language to your code blocks if you want to use these functions. If you do not want to apply syntax highlighting, you can also specify `plain` or `text` as the language.
 
 {{< toc >}}
 

exampleSite/content/en/shortcodes/propertylist.md

@@ -0,0 +1,23 @@
+---
+title: Properties
+---
+
+The property list shortcode creates a custom HTML description list that can be used to display properties or variables and general dependent information. The shortcode requires a data file in `data/properties/`, e.g. `data/properties/demo.yaml`, where the filename must be passed to the `name` attribute of the property list shortcode.
+
+<!-- prettier-ignore-start -->
+```tpl
+{{</* propertylist name=demo */>}}
+```
+<!-- prettier-ignore-end -->
+
+The supported attributes can be taken from the following example:
+
+<!-- prettier-ignore-start -->
+<!-- spellchecker-disable -->
+{{< include file="/data/properties/demo.yaml" language="Yaml" options="linenos=table" >}}
+<!-- spellchecker-enable -->
+<!-- prettier-ignore-end -->
+
+## Example
+
+{{< propertylist name=demo >}}

exampleSite/data/properties/demo.yaml

@@ -0,0 +1,17 @@
+---
+properties:
+  prop1:
+    type: string
+    description: Dummy description of the prop1 string property.
+    required: true
+
+  prop2:
+    type: int
+    defaultValue: 10
+    description:
+      en: Another description for the integer property called prop2.
+    required: false
+    tags:
+      en:
+        - tag1
+        - tag2

i18n/de.yaml

@@ -43,3 +43,7 @@ footer_content_license_prefix: >
   Inhalt lizensiert unter
 
 language_switch_no_tranlation_prefix: "Seite nicht übersetzt:"
+
+propertylist_required: erforderlich
+propertylist_optional: optional
+propertylist_default: Standardwert

i18n/en.yaml

@@ -43,3 +43,7 @@ footer_content_license_prefix: >
   Content licensed under
 
 language_switch_no_tranlation_prefix: "Page not translated:"
+
+propertylist_required: required
+propertylist_optional: optional
+propertylist_default: default

i18n/it.yaml

@@ -1,4 +1,3 @@
-
 ---
 edit_page: Modifica la pagina
 
@@ -15,6 +14,7 @@ error_message_code: Errore 404
 error_message_text: >
   Sembra che non sia possibile trovare quello che stavi cercando. Non ti preoccupare,
   possiamo riportarti alla <a class="gdoc-error__link" href="{{ . }}">pagina iniziale</a>.
+
 button_toggle_dark: Seleziona il tema Chiaro/Scuro/Automatico
 button_nav_open: Apri la Navigazione
 button_nav_close: Chiudi la Navigazione
@@ -41,4 +41,9 @@ footer_legal_notice: Avviso Legale
 footer_privacy_policy: Politica sulla Privacy
 footer_content_license_prefix: >
   Contenuto sotto licenza
+
 language_switch_no_tranlation_prefix: "Pagina non tradotta:"
+
+propertylist_required: richiesto
+propertylist_optional: opzionale
+propertylist_default: valore predefinito

i18n/zh-cn.yaml

@@ -44,3 +44,7 @@ footer_content_license_prefix: >
   内容许可证
 
 language_switch_no_tranlation_prefix: "页面未翻译："
+
+propertylist_required: 需要
+propertylist_optional: 可选
+propertylist_default: 默认值

layouts/shortcodes/propertylist.html

@@ -0,0 +1,49 @@
+{{- $name := .Get "name" -}}
+
+{{- if .Site.Data.properties }}
+  <dl class="gdoc-props">
+    {{- with (index .Site.Data.properties $name) }}
+      {{- range $key, $value := .properties }}
+        <dt class="flex flex-wrap align-center gdoc-props__meta">
+          <span class="gdoc-props__title">{{ $key }}</span>
+          {{- if $value.required }}
+            <span class="gdoc-props__tag warning">{{ i18n "propertylist_required" | lower }}</span>
+          {{ else }}
+            <span class="gdoc-props__tag tip">{{ i18n "propertylist_optional" | lower }}</span>
+          {{- end }}
+          {{- with $value.type }}
+            <span class="gdoc-props__tag note">{{ . }}</span>
+          {{- end }}
+
+          {{- with $value.tags }}
+            {{- $tags := . }}
+            {{- if reflect.IsMap $tags }}
+              {{- $tags = (index $tags $.Site.Language.Lang) }}
+            {{- end }}
+            {{- range $tags }}
+              <span class="gdoc-props__tag">{{ . }}</span>
+            {{- end }}
+          {{- end }}
+        </dt>
+        <dd>
+          <div>
+            {{- with $value.description }}
+              {{- $desc := . }}
+              {{- if reflect.IsMap $desc }}
+                {{- $desc = (index $desc $.Site.Language.Lang) }}
+              {{- end }}
+
+              {{ $desc }}
+            {{ end }}
+          </div>
+          <div class="gdoc-props__default">
+            {{- with default "none" $value.defaultValue }}
+              <span>{{ i18n "propertylist_default" | title }}:</span>
+              <span>{{ . }}</span>
+            {{- end }}
+          </div>
+        </dd>
+      {{- end }}
+    {{- end }}
+  </dl>
+{{- end }}

src/sass/_chroma_base.scss

@@ -5,7 +5,7 @@
   .chroma code {
     background-color: var(--code-background);
     display: block;
-    line-height: 1.45;
+    line-height: 1.45em;
     font-size: 0.85em;
     border-radius: $border-radius;
   }

src/sass/_color_mode.scss

@@ -42,6 +42,7 @@
 
   .gdoc-markdown {
     .gdoc-hint,
+    .gdoc-props__tag,
     .admonitionblock,
     .gdoc-post__codecopy--success {
       filter: none;
@@ -98,6 +99,7 @@
 
   .gdoc-markdown {
     .gdoc-hint,
+    .gdoc-props__tag,
     .admonitionblock,
     .gdoc-post__codecopy--success {
       filter: saturate(2.5) brightness(0.85);

src/sass/_markdown.scss

@@ -49,7 +49,7 @@
   &__link {
     text-decoration: none;
     border-bottom: $border-1 solid transparent;
-    line-height: 1em;
+    line-height: normal;
 
     &:hover {
       text-decoration: underline;

src/sass/_shortcodes.scss

@@ -181,3 +181,44 @@
 .gdoc-mermaid {
   font-family: "Liberation Sans", sans-serif;
 }
+
+// {{< propertylist >}}
+.gdoc-props {
+  &__title,
+  &__default {
+    font-family: "Liberation Mono", monospace;
+  }
+
+  &__meta {
+    line-height: normal;
+    margin-bottom: $padding-8;
+    > span {
+      margin-bottom: $padding-4;
+      &:not(:last-child) {
+        margin-right: $padding-8;
+      }
+    }
+  }
+
+  @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-style: italic;
+    font-size: $font-size-14;
+  }
+}