feat: add option to sort items in properties shortcode (#527)

BREAKING CHANGE: To enable sorting of elements in the `properties` shortcode, it was necessary to change the structure of the properties file. Due to this change, the `properties` object now requires a list of maps instead of a map. A [sample file](https://raw.githubusercontent.com/thegeeklab/hugo-geekdoc/main/exampleSite/data/properties/demo.yaml) can be found in the repository.
This commit is contained in:
Robert Kaussow 2022-11-02 13:01:20 +01:00 committed by GitHub
parent 73c5f6a6b2
commit 128a55e974
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 38 additions and 13 deletions

View File

@ -2,11 +2,21 @@
title: Properties 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. 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`.
## Attributes
| Name | Description | default |
| ---------------- | ------------------------------------------------------ | --------- |
| name | name of the file from the `data/properties/` directory | undefined |
| sort (optional) | field name to use for sorting | undefined |
| order (optional) | sort order, only applied if `sort` is set | `asc` |
## Usage
<!-- prettier-ignore-start --> <!-- prettier-ignore-start -->
```tpl ```tpl
{{</* propertylist name=demo */>}} {{</* propertylist name=demo (sort=name) (order=[asc|desc]) */>}}
``` ```
<!-- prettier-ignore-end --> <!-- prettier-ignore-end -->
@ -20,4 +30,8 @@ The supported attributes can be taken from the following example:
## Example ## Example
{{< propertylist name=demo >}} <!-- prettier-ignore-start -->
<!-- spellchecker-disable -->
{{< propertylist name=demo sort=name order=asc >}}
<!-- spellchecker-enable -->
<!-- prettier-ignore-end -->

View File

@ -1,11 +1,11 @@
--- ---
properties: properties:
prop1: - name: prop1
type: string type: string
description: Dummy description of the prop1 string property. description: Dummy description of the prop1 string property.
required: true required: true
prop2: - name: prop2
type: int type: int
defaultValue: 10 defaultValue: 10
description: description:
@ -16,7 +16,7 @@ properties:
- tag1 - tag1
- tag2 - tag2
prop3: - name: prop3
type: bool type: bool
defaultValue: false defaultValue: false
description: | description: |
@ -27,3 +27,8 @@ properties:
More description how to use this property. More description how to use this property.
required: false required: false
- name: a-prop
type: string
description: Property to demonstrate sorting.
required: true

View File

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