feat: add properylist shortcode (#455)

This commit is contained in:
Robert Kaussow 2023-10-27 21:57:55 +02:00 committed by GitHub
parent bf7048d8c1
commit e7a3759f0a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 141 additions and 1 deletions

View File

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

View File

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

View File

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

View File

@ -230,7 +230,7 @@
padding: $padding-4 $padding-16; padding: $padding-4 $padding-16;
} }
.gblog-page__anchor { .gblog-post__anchor {
display: none; 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 %}} // {{% progress %}}
.gblog-progress { .gblog-progress {
margin-bottom: $padding-16; margin-bottom: $padding-16;