From 6ab98d1da3bc8dc31a491d75deaa0617f43af138 Mon Sep 17 00:00:00 2001 From: Robert Kaussow Date: Sun, 22 May 2022 22:00:37 +0200 Subject: [PATCH] feat: add propertylist shortcode (#414) --- .dictionary | 1 + .../content/en/features/code-blocks.md | 2 +- .../content/en/shortcodes/propertylist.md | 23 +++++++++ exampleSite/data/properties/demo.yaml | 17 +++++++ i18n/de.yaml | 4 ++ i18n/en.yaml | 4 ++ i18n/it.yaml | 7 ++- i18n/zh-cn.yaml | 4 ++ layouts/shortcodes/propertylist.html | 49 +++++++++++++++++++ src/sass/_chroma_base.scss | 2 +- src/sass/_color_mode.scss | 2 + src/sass/_markdown.scss | 2 +- src/sass/_shortcodes.scss | 41 ++++++++++++++++ 13 files changed, 154 insertions(+), 4 deletions(-) create mode 100644 exampleSite/content/en/shortcodes/propertylist.md create mode 100644 exampleSite/data/properties/demo.yaml create mode 100644 layouts/shortcodes/propertylist.html diff --git a/.dictionary b/.dictionary index 9a1cc86..4ee8422 100644 --- a/.dictionary +++ b/.dictionary @@ -31,3 +31,4 @@ Favicon[s]? UI webpack pre-processor[s]? +propertylist diff --git a/exampleSite/content/en/features/code-blocks.md b/exampleSite/content/en/features/code-blocks.md index 03beb09..e13aa1a 100644 --- a/exampleSite/content/en/features/code-blocks.md +++ b/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 `` 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 `` 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 >}} diff --git a/exampleSite/content/en/shortcodes/propertylist.md b/exampleSite/content/en/shortcodes/propertylist.md new file mode 100644 index 0000000..fca3bb3 --- /dev/null +++ b/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. + + +```tpl +{{}} +``` + + +The supported attributes can be taken from the following example: + + + +{{< include file="/data/properties/demo.yaml" language="Yaml" options="linenos=table" >}} + + + +## Example + +{{< propertylist name=demo >}} diff --git a/exampleSite/data/properties/demo.yaml b/exampleSite/data/properties/demo.yaml new file mode 100644 index 0000000..c1f8fe9 --- /dev/null +++ b/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 diff --git a/i18n/de.yaml b/i18n/de.yaml index a90ea00..83e8537 100644 --- a/i18n/de.yaml +++ b/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 diff --git a/i18n/en.yaml b/i18n/en.yaml index 73468e4..1807dc8 100644 --- a/i18n/en.yaml +++ b/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 diff --git a/i18n/it.yaml b/i18n/it.yaml index 80e36c0..db535dc 100644 --- a/i18n/it.yaml +++ b/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 pagina iniziale. + 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 diff --git a/i18n/zh-cn.yaml b/i18n/zh-cn.yaml index 44c19dc..efbb14d 100644 --- a/i18n/zh-cn.yaml +++ b/i18n/zh-cn.yaml @@ -44,3 +44,7 @@ footer_content_license_prefix: > 内容许可证 language_switch_no_tranlation_prefix: "页面未翻译：" + +propertylist_required: 需要 +propertylist_optional: 可选 +propertylist_default: 默认值 diff --git a/layouts/shortcodes/propertylist.html b/layouts/shortcodes/propertylist.html new file mode 100644 index 0000000..3b68c9a --- /dev/null +++ b/layouts/shortcodes/propertylist.html @@ -0,0 +1,49 @@ +{{- $name := .Get "name" -}} + +{{- if .Site.Data.properties }} +
+ {{- with (index .Site.Data.properties $name) }} + {{- range $key, $value := .properties }} +
+ {{ $key }} + {{- if $value.required }} + {{ i18n "propertylist_required" | lower }} + {{ else }} + {{ i18n "propertylist_optional" | lower }} + {{- end }} + {{- with $value.type }} + {{ . }} + {{- end }} + + {{- with $value.tags }} + {{- $tags := . }} + {{- if reflect.IsMap $tags }} + {{- $tags = (index $tags $.Site.Language.Lang) }} + {{- end }} + {{- range $tags }} + {{ . }} + {{- end }} + {{- end }} +
+
+
+ {{- with $value.description }} + {{- $desc := . }} + {{- if reflect.IsMap $desc }} + {{- $desc = (index $desc $.Site.Language.Lang) }} + {{- end }} + + {{ $desc }} + {{ end }} +
+
+ {{- with default "none" $value.defaultValue }} + {{ i18n "propertylist_default" | title }}: + {{ . }} + {{- end }} +
+
+ {{- end }} + {{- end }} +
+{{- end }} diff --git a/src/sass/_chroma_base.scss b/src/sass/_chroma_base.scss index 812df77..2e36447 100644 --- a/src/sass/_chroma_base.scss +++ b/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; } diff --git a/src/sass/_color_mode.scss b/src/sass/_color_mode.scss index 274cf2d..4b8192e 100644 --- a/src/sass/_color_mode.scss +++ b/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); diff --git a/src/sass/_markdown.scss b/src/sass/_markdown.scss index 815eb1b..c568890 100644 --- a/src/sass/_markdown.scss +++ b/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; diff --git a/src/sass/_shortcodes.scss b/src/sass/_shortcodes.scss index 3f2bbcd..8fa7484 100644 --- a/src/sass/_shortcodes.scss +++ b/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; + } +}