tree: make more robust, change separator

This commit is contained in:
Sören Weber 2025-03-24 15:04:52 +01:00
parent c062fd1ed2
commit c5d591c514
No known key found for this signature in database
GPG Key ID: BEC6D55545451B6D
9 changed files with 191 additions and 179 deletions

View File

@ -442,37 +442,37 @@ Markdown will automatically number each of your items consecutively. This means,
{{% badge color="#7dc903" icon="fa-fw fas fa-puzzle-piece" %}}Relearn{{% /badge %}} You can add lists as a tree with configurable icons and colors.
Text can be followed by optional double colons (`::`) to define the icon and another optional double colons to define the icon's color.
The name can be followed by an optional pipe (`|`) to define an icon and further optional pipe to define the icon's color.
More details can be found in the [`tree` shortcode docs](shortcodes/tree).
````md
```tree
- home::folder
- .config::folder
- My Documents::folder::gold
- home | folder
- .config | folder
- My Documents | folder | gold
- index.html
- resume.odt::file-word::#df6f40
- Images::folder
- resume.odt | file-word | #df6f40
- Images | folder
- pic1.jpg
- pic2.jpg::file-image::secondary
- Code::folder
- home.php::fa-fw fab fa-php::#888cc4
- pic2.jpg | file-image | secondary
- Code | folder
- home.php | fa-fw fab fa-php | #888cc4
```
````
{{% notice style="code" icon="eye" title="Result" %}}
```tree
- home::folder
- .config::folder
- My Documents::folder::gold
- home | folder
- .config | folder
- My Documents | folder | gold
- index.html
- resume.odt::file-word::#df6f40
- Images::folder
- resume.odt | file-word | #df6f40
- Images | folder
- pic1.jpg
- pic2.jpg::file-image::secondary
- Code::folder
- home.php::fa-fw fab fa-php::#888cc4
- pic2.jpg | file-image | secondary
- Code | folder
- home.php | fa-fw fab fa-php | #888cc4
```
{{% /notice %}}

View File

@ -12,21 +12,21 @@ The theme generates the navigation menu out of the given directory structure.
Organize your site like [any other Hugo project](https://gohugo.io/content/structure/). Typically, you will have a _content_ directory with all your pages.
````tree
- content::folder
- log::folder
- first-day::folder
- _index.md::fa-fw fab fa-markdown::secondary
- first-sub-page::folder
- _index.md::fa-fw fab fa-markdown::secondary
- picture1.png::file-alt::accent
- plain.txt::file-alt::accent
- second-day::folder
- index.md::fa-fw fab fa-markdown::secondary
- picture1.png::file-alt::accent
- picture2.png::file-alt::accent
- third-day.md::fa-fw fab fa-markdown::secondary
- _index.md::fa-fw fab fa-markdown::secondary
- _index.md::fa-fw fab fa-markdown::secondary
- content | folder
- log | folder
- first-day | folder
- _index.md | fa-fw fab fa-markdown | secondary
- first-sub-page | folder
- _index.md | fa-fw fab fa-markdown | secondary
- picture1.png | file-alt | accent
- plain.txt | file-alt | accent
- second-day | folder
- index.md | fa-fw fab fa-markdown | secondary
- picture1.png | file-alt | accent
- picture2.png | file-alt | accent
- third-day.md | fa-fw fab fa-markdown | secondary
- _index.md | fa-fw fab fa-markdown | secondary
- _index.md | fa-fw fab fa-markdown | secondary
````
> [!note]

View File

@ -327,18 +327,18 @@ For both sections, the default `shortcuts` Hugo menu should be displayed as if [
Directory structure:
````tree
- content::folder
- log::folder
- first-day.md::fa-fw fab fa-markdown::secondary
- second-day.md::fa-fw fab fa-markdown::secondary
- third-day.md::fa-fw fab fa-markdown::secondary
- _index.md::fa-fw fab fa-markdown::secondary
- ship::folder
- cargo.md::fa-fw fab fa-markdown::secondary
- midst.md::fa-fw fab fa-markdown::secondary
- upper.md::fa-fw fab fa-markdown::secondary
- _index.md::fa-fw fab fa-markdown::secondary
- _index.md::fa-fw fab fa-markdown::secondary
- content | folder
- log | folder
- first-day.md | fa-fw fab fa-markdown | secondary
- second-day.md | fa-fw fab fa-markdown | secondary
- third-day.md | fa-fw fab fa-markdown | secondary
- _index.md | fa-fw fab fa-markdown | secondary
- ship | folder
- cargo.md | fa-fw fab fa-markdown | secondary
- midst.md | fa-fw fab fa-markdown | secondary
- upper.md | fa-fw fab fa-markdown | secondary
- _index.md | fa-fw fab fa-markdown | secondary
- _index.md | fa-fw fab fa-markdown | secondary
````
{{% badge style="cyan" icon="gears" title=" " %}}Option{{% /badge %}} {{% badge style="green" icon="fa-fw fab fa-markdown" title=" " %}}Front Matter{{% /badge %}} Using [Hugo's cascade feature](https://gohugo.io/content-management/front-matter/#cascade), we can redefine the menus once in `log/_index.md` and `ship/_index.md` setting `sidebarmenus` so they will be used in all children pages.
@ -372,15 +372,15 @@ You may have the need to add arbitrary links at some point in your menu that sho
Assume the following structure
````tree
- content::folder
- log::folder
- first-day.md::fa-fw fab fa-markdown::secondary
- second-day.md::fa-fw fab fa-markdown::secondary
- third-day.md::fa-fw fab fa-markdown::secondary
- _index.md::fa-fw fab fa-markdown::secondary
- burning-sail-incident.md::fa-fw fab fa-markdown::secondary
- kraken-incident.md::fa-fw fab fa-markdown::secondary
- _index.md::fa-fw fab fa-markdown::secondary
- content | folder
- log | folder
- first-day.md | fa-fw fab fa-markdown | secondary
- second-day.md | fa-fw fab fa-markdown | secondary
- third-day.md | fa-fw fab fa-markdown | secondary
- _index.md | fa-fw fab fa-markdown | secondary
- burning-sail-incident.md | fa-fw fab fa-markdown | secondary
- kraken-incident.md | fa-fw fab fa-markdown | secondary
- _index.md | fa-fw fab fa-markdown | secondary
````
You now want to add a top level menu entry that points to `third-day` as separate `crows-nest-incident`.

View File

@ -65,24 +65,24 @@ Here's how to make your site multilingual using [translations by file name](http
2. Duplicate your content files and add language codes to their file names:
````tree
- content::folder
- log::folder
- first-day::folder
- _index.en.md::fa-fw fab fa-markdown::secondary
- _index.pir.md::fa-fw fab fa-markdown::secondary
- second-day::folder
- index.en.md::fa-fw fab fa-markdown::secondary
- index.pir.md::fa-fw fab fa-markdown::secondary
- third-day.en.md::fa-fw fab fa-markdown::secondary
- third-day.pir.md::fa-fw fab fa-markdown::secondary
- _index.en.md::fa-fw fab fa-markdown::secondary
- _index.pir.md::fa-fw fab fa-markdown::secondary
- _index.en.md::fa-fw fab fa-markdown::secondary
- _index.pir.md::fa-fw fab fa-markdown::secondary
- themes::folder
- hugo-theme-relearn::folder
- ...::folder
- hugo.toml::file-alt::accent
- content | folder
- log | folder
- first-day | folder
- _index.en.md | fa-fw fab fa-markdown | secondary
- _index.pir.md | fa-fw fab fa-markdown | secondary
- second-day | folder
- index.en.md | fa-fw fab fa-markdown | secondary
- index.pir.md | fa-fw fab fa-markdown | secondary
- third-day.en.md | fa-fw fab fa-markdown | secondary
- third-day.pir.md | fa-fw fab fa-markdown | secondary
- _index.en.md | fa-fw fab fa-markdown | secondary
- _index.pir.md | fa-fw fab fa-markdown | secondary
- _index.en.md | fa-fw fab fa-markdown | secondary
- _index.pir.md | fa-fw fab fa-markdown | secondary
- themes | folder
- hugo-theme-relearn | folder
- ... | folder
- hugo.toml | file-alt | accent
````
## Translation by Content Directory
@ -114,29 +114,29 @@ The theme also support [translations by content directory](https://gohugo.io/con
2. Duplicate your content files into separate directories named by their language code:
````tree
- content::folder
- en::folder
- log::folder
- first-day::folder
- _index.md::fa-fw fab fa-markdown::secondary
- second-day::folder
- index.md::fa-fw fab fa-markdown::secondary
- third-day.md::fa-fw fab fa-markdown::secondary
- _index.md::fa-fw fab fa-markdown::secondary
- _index.md::fa-fw fab fa-markdown::secondary
- pir::folder
- log::folder
- first-day::folder
- _index.md::fa-fw fab fa-markdown::secondary
- second-day::folder
- index.md::fa-fw fab fa-markdown::secondary
- third-day.md::fa-fw fab fa-markdown::secondary
- _index.md::fa-fw fab fa-markdown::secondary
- _index.md::fa-fw fab fa-markdown::secondary
- themes::folder
- hugo-theme-relearn::folder
- ...::folder
- hugo.toml::file-alt::accent
- content | folder
- en | folder
- log | folder
- first-day | folder
- _index.md | fa-fw fab fa-markdown | secondary
- second-day | folder
- index.md | fa-fw fab fa-markdown | secondary
- third-day.md | fa-fw fab fa-markdown | secondary
- _index.md | fa-fw fab fa-markdown | secondary
- _index.md | fa-fw fab fa-markdown | secondary
- pir | folder
- log | folder
- first-day | folder
- _index.md | fa-fw fab fa-markdown | secondary
- second-day | folder
- index.md | fa-fw fab fa-markdown | secondary
- third-day.md | fa-fw fab fa-markdown | secondary
- _index.md | fa-fw fab fa-markdown | secondary
- _index.md | fa-fw fab fa-markdown | secondary
- themes | folder
- hugo-theme-relearn | folder
- ... | folder
- hugo.toml | file-alt | accent
````

View File

@ -8,19 +8,19 @@ weight = 1
If you've followed the [Getting Started](introduction/quickstart) guide, your directory layout will look similar to this:
````tree
- content::folder
- log::folder
- first-day::folder
- _index.md::fa-fw fab fa-markdown::secondary
- second-day::folder
- index.md::fa-fw fab fa-markdown::secondary
- third-day.md::fa-fw fab fa-markdown::secondary
- _index.md::fa-fw fab fa-markdown::secondary
- _index.md::fa-fw fab fa-markdown::secondary
- themes::folder
- hugo-theme-relearn::folder
- ...::folder
- hugo.toml::file-alt::accent
- content | folder
- log | folder
- first-day | folder
- _index.md | fa-fw fab fa-markdown | secondary
- second-day | folder
- index.md | fa-fw fab fa-markdown | secondary
- third-day.md | fa-fw fab fa-markdown | secondary
- _index.md | fa-fw fab fa-markdown | secondary
- _index.md | fa-fw fab fa-markdown | secondary
- themes | folder
- hugo-theme-relearn | folder
- ... | folder
- hugo.toml | file-alt | accent
````
Hugo uses a [union file system](https://gohugo.io/getting-started/directory-structure/#union-file-system), which lets you combine multiple directories.

View File

@ -7,10 +7,10 @@ title = 'Tree'
The `tree` shortcode displays a list as a tree with configurable icons and colors.
````tree
- home::folder
- .config::folder
- My Documents::folder::magic
- home.php::fa-fw fab fa-php::#888cc4
- home | folder
- .config | folder
- My Documents | folder | magic
- home.php | fa-fw fab fa-php | #888cc4
````
## Usage
@ -20,10 +20,10 @@ The `tree` shortcode displays a list as a tree with configurable icons and color
````md
```tree
- home::folder
- .config::folder
- My Documents::folder::magic
- home.php::fa-fw fab fa-php::#888cc4
- home | folder
- .config | folder
- My Documents | folder | magic
- home.php | fa-fw fab fa-php | #888cc4
```
````
@ -32,10 +32,10 @@ The `tree` shortcode displays a list as a tree with configurable icons and color
````go
{{%/* tree */%}}
- home::folder
- .config::folder
- My Documents::folder::magic
- home.php::fa-fw fab fa-php::#888cc4
- home | folder
- .config | folder
- My Documents | folder | magic
- home.php | fa-fw fab fa-php | #888cc4
{{%/* /tree */%}}
````
@ -45,10 +45,10 @@ The `tree` shortcode displays a list as a tree with configurable icons and color
````go
{{ partial "shortcodes/tree.html" (dict
"page" .
"content" `- home::folder
- .config::folder
- My Documents::folder::magic
- home.php::fa-fw fab fa-php::#888cc4`
"content" `- home | folder
- .config | folder
- My Documents | folder | magic
- home.php | fa-fw fab fa-php | #888cc4`
)}}
````
@ -65,9 +65,9 @@ Codefence syntax is widely available in other Markdown parsers like GitHub and t
### Item Syntax
`<NAME> [ :: <ICON> [ :: <COLOR> ] ]`
`<NAME> [ | <ICON> [ | <COLOR> ] ]`
The **NAME** can be followed by optional double colons (`::`) to define an **ICON** and further optional double colons to define the icon's **COLOR**.
The **NAME** can be followed by an optional pipe (`|`) to define an **ICON** and further optional pipe to define the icon's **COLOR**.
- **ICON**: [Font Awesome icon name](shortcodes/icon#finding-an-icon) set to the left of the **NAME**. If you give a single string, it is selected from Font Awesome's [solid](https://fontawesome.com/icons?d=gallery&s=solid&m=free) icons. If you want to use a different set, you have to give the complete styles after the double colons. See above example for the `home.php`.
@ -91,40 +91,40 @@ Every possible combination
````md
```tree
- just name
- [just name](http://example.com) | folder
- Documents
- My Documents
- simple icons::folder
- Documents::folder
- My Documents::folder
- not so simple icons::file-alt::secondary
- a.png::file-alt
- a with border.png::file-alt
- mindblowing icons::fa-fw fab fa-markdown::accent
- text.md::fa-fw fab fa-markdown
- alternative text.md::fa-fw fab fa-markdown
- and now with color::fa-fw fab fa-php
- script.php::fa-fw fab fa-markdown::purple
- alt script.php::fa-fw fab fa-markdown::#888cc4
- magic.php::fa-fw fab fa-markdown::orange
- simple icons | folder
- Documents | folder
- My Documents | folder
- not so simple icons | file-alt | secondary
- a.png | file-alt
- a with border.png | file-alt
- mindblowing icons | fa-fw fab fa-markdown | accent
- text.md | fa-fw fab fa-markdown
- alternative text.md | fa-fw fab fa-markdown
- and now with color | fa-fw fab fa-php
- script.php | fa-fw fab fa-markdown | purple
- alt script.php | fa-fw fab fa-markdown | #888cc4
- magic.php | fa-fw fab fa-markdown | orange
```
````
````tree
- name-only
- [just name](http://example.com) | folder
- Documents
- My Documents
- simple icons::folder
- Documents::folder
- My Documents::folder
- not so simple icons::file-alt::secondary
- a.png::file-alt
- a with border.png::file-alt
- mindblowing icons::fa-fw fab fa-markdown::accent
- text.md::fa-fw fab fa-markdown
- alternative text.md::fa-fw fab fa-markdown
- and now with color::fa-fw fab fa-php
- script.php::fa-fw fab fa-php::purple
- alt script.php::fa-fw fab fa-php::#888cc4
- magic.php::fa-fw fab fa-php::orange
- simple icons | folder
- Documents | folder
- My Documents | folder
- not so simple icons | file-alt | secondary
- a.png | file-alt
- a with border.png | file-alt
- mindblowing icons | fa-fw fab fa-markdown | accent
- text.md | fa-fw fab fa-markdown
- alternative text.md | fa-fw fab fa-markdown
- and now with color | fa-fw fab fa-php
- script.php | fa-fw fab fa-php | purple
- alt script.php | fa-fw fab fa-php | #888cc4
- magic.php | fa-fw fab fa-php | orange
````

View File

@ -3,7 +3,7 @@
{{- range site.Params.boxStyle }}
{{- if eq (lower .identifier) $style }}
{{- $title := or .title (.i18n | T) }}
{{- $set = dict "style" $style "title" $title "icon" .icon }}
{{- $set = dict "identifier" .identifier "style" $style "title" $title "icon" .icon }}
{{- break }}
{{- end }}
{{- end }}
@ -18,7 +18,7 @@
) }}
{{- if eq .identifier $style }}
{{- $title := .identifier | T }}
{{- $set = dict "style" $style "title" $title "icon" .icon }}
{{- $set = dict "identifier" .identifier "style" $style "title" $title "icon" .icon }}
{{- break }}
{{- end }}
{{- end }}

View File

@ -1,32 +1,44 @@
{{ $content := .content | .page.RenderString }}
<div class="list-tree">
{{- $matches := findRESubmatch `<li>([^<>:]+)::([\w-]+)::([^<>\n\r\t ]+)` $content }}
{{- $matches := findRESubmatch `<li>([\s\S]*?)(</li|<ul)` $content }}
{{- range $matches }}
{{- $name := index . 1 }}
{{- $icon := index . 2 }}
{{- $color := index . 3 }}
{{- $replacement := "" }}
{{- if (where site.Params.boxStyle "identifier" $color | first 1) }}
{{- $replacement = printf `<li><i class="fa-fw fas fa-%s cstyle %s"></i><span>%s</span>` $icon $color $name }}
{{- else }}
{{- $replacement = printf `<li><i class="fa-fw fas fa-%s" style="color: %s;"></i><span>%s</span>` $icon $color $name }}
{{- $text := index . 1 }}
{{- $rest := index . 2 }}
{{- $parts := split $text "|" }}
{{- if eq (len $parts) 3 }}
{{- $name := trim (index $parts 0) "\n\r\t " }}
{{- $icon := trim (index $parts 1) "\n\r\t " }}
{{- $color := trim (index $parts 2) "\n\r\t " }}
{{- $classes := split $icon " " }}
{{- if eq (len $classes) 1 }}
{{- $boxStyle := partial "_relearn/boxStyle.gotmpl" (dict "style" $color) }}
{{- if $boxStyle.identifier }}
{{- $replacement = printf `<li><i class="fa-fw fas fa-%s cstyle %s"></i><span>%s</span>%s` $icon $color $name $rest }}
{{- else }}
{{- $replacement = printf `<li><i class="fa-fw fas fa-%s" style="color: %s;"></i><span>%s</span>%s` $icon $color $name $rest }}
{{- end }}
{{- else }}
{{- $boxStyle := partial "_relearn/boxStyle.gotmpl" (dict "style" $color) }}
{{- if $boxStyle.identifier }}
{{- $replacement = printf `<li><i class="%s cstyle %s"></i><span>%s</span>%s` $icon $color $name $rest }}
{{- else }}
{{- $replacement = printf `<li><i class="%s" style="color: %s;"></i><span>%s</span>%s` $icon $color $name $rest }}
{{- end }}
{{- end }}
{{- else if eq (len $parts) 2 }}
{{- $name := trim (index $parts 0) "\n\r\t " }}
{{- $icon := trim (index $parts 1) "\n\r\t " }}
{{- $classes := split $icon " " }}
{{- if eq (len $classes) 1 }}
{{- $replacement = printf `<li><i class="fa-fw fas fa-%s"></i><span>%s</span>%s` $icon $name $rest }}
{{- else }}
{{- $replacement = printf `<li><i class="%s"></i><span>%s</span>%s` $icon $name $rest }}
{{- end }}
{{- end }}
{{- $content = replace $content (index . 0) $replacement }}
{{- end }}
{{- $matches := findRESubmatch `<li>([^<>:]+)::([^<>:]+)::([^<>\n\r\t ]+)` $content }}
{{- range $matches }}
{{- $name := index . 1 }}
{{- $icon := index . 2 }}
{{- $color := index . 3 }}
{{- $replacement := "" }}
{{- if (where site.Params.boxStyle "identifier" $color | first 1) }}
{{- $replacement = printf `<li><i class="%s cstyle %s"></i><span>%s</span>` $icon $color $name }}
{{- else }}
{{- $replacement = printf `<li><i class="%s" style="color: %s;"></i><span>%s</span>` $icon $color $name }}
{{- if $replacement }}
{{- $content = replace $content (index . 0) $replacement }}
{{- end }}
{{- $content = replace $content (index . 0) $replacement }}
{{- end }}
{{- $content = (replaceRE `<li>([^<>:]+)::([\w-]+)([\n\r\t ]*<)` `<li><i class="fa-fw fas fa-$2"></i><span>$1</span>$3` $content) }}
{{- $content = (replaceRE `<li>([^<>:]+)::([^<>\n\r\t]+)` `<li><i class="$2"></i><span>$1</span>` $content) }}
{{- $content | safeHTML -}}
</div>

View File

@ -1 +1 @@
7.5.0+964ca24fd04abba3d8c22dd7bdc9de5a707e08fe
7.5.0+c062fd1ed2a28faac56d4693a8f6e236345f9706