feat: add propertylist shortcode (#414)

uci-hugo-doc
Robert Kaussow 2022-05-22 22:00:37 +02:00 committed by GitHub
parent 5b05b7d68a
commit 6ab98d1da3
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
13 changed files with 154 additions and 4 deletions

View File

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

View File

@ -2,7 +2,7 @@
title: Code Blocks 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 >}} {{< toc >}}

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -181,3 +181,44 @@
.gdoc-mermaid { .gdoc-mermaid {
font-family: "Liberation Sans", sans-serif; 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;
}
}