Shortcode for folder/document tree

[gavlinski]

Hi! Is there a support for a shortcode like tree linux command that visually maps directory structures in a hierarchical, tree-like format?

References:

• https://discourse.gohugo.io/t/simple-shortcode-for-folder-document-tree/46320
• https://mcshelby.github.io/hugo-theme-relearn/shortcodes/tree/index.html

[razonyang]

Yes, I do have a tree module created half year ago, which is private.

Now, I make it as public.

To install it, import the github.com/hbstack/code-block-tree in your configuration.

Usage, just put the same output as tree command should work.

```tree
assets
├── favicon.ico
├── hb
│   └── modules
│       └── custom
│           ├── js
│           │   └── index.ts
│           ├── purgecss.config.toml
│           └── scss
│               ├── _ad.scss
│               ├── index.scss
│               └── variables.tmpl.scss
├── images
│   ├── covers
│   │   ├── archlinux.png
│   │   ├── disk.jpg
│   │   ├── git.jpg
│   │   ├── github.jpg
│   │   ├── network.jpg
│   │   ├── tux.jpg
│   │   └── wifi.jpg
│   ├── logo.jpg
│   ├── pwa
│   │   └── offline.png
│   └── thumbnail.jpg
├── jsconfig.json
└── mask-icon.svg

9 directories, 18 files
```

[gavlinski]

Thank you very much! During this time, I took the opportunity to adapt the existing code and I really liked the result. I will share the code here so that you can evaluate if anything can be reused, merged or improved even further.

```tree { title="assets/" }
- favicon.ico | far | image | red
- hb | fas | folder-open
  - modules | fas | folder-open
    - custom | fas | folder-open
      - js | fas | folder-open
        - index.ts | far | file-code
      - purgecss.config.toml | far | file-lines
      - scss | fas | folder-open
        - _ad.scss | far | file-image
        - index.scss | far | file-image
        - variables.tmpl.scss | far | file-image
- images | fas | folder-open
  - covers | fas | folder-open
    - archlinux.png | far | image | purple
    - disk.jpg | far | image | purple
    - git.jpg | far | image | purple
    - github.jpg | far | image | purple
    - network.jpg | far | image | purple
    - tux.jpg | far | image | purple
    - wifi.jpg | far | image | purple
  - logo.jpg | far | image | purple
  - pwa | fas | folder-open
    - offline.png | far | image | green
  - thumbnail.jpg | far | image | purple
- jsconfig.json | far | file-code
- mask-icon.svg | far | image | gray
```

• layouts/_default/_markup/render-codeblock-tree.html

  {{- partial "shortcodes/tree.html" (dict
    "page"       .Page
    "attributes" .Attributes
    "content"    .Inner
    "title"      .Attributes.title
    "link"       .Attributes.link
  ) }}

• layouts/partials/shortcodes/tree.html

  {{ $content := .content | .page.RenderString }}
  <div class="list-tree">
  {{- with .title }}
  <div class="tree-header">
    {{ partial "icons/icon" (dict "vendor" "fas" "name" "folder-open") }}
    <span class="tree-title">
      {{- if and $.link -}}
        <a href="{{ $.link | safeURL }}" class="tree-title-link">
          {{ . | $.page.RenderString | safeHTML }}
        </a>
      {{- else -}}
        {{ . | $.page.RenderString | safeHTML }}
      {{- end -}}
    </span>
  </div>
  {{- end }}
  {{- $matches := findRESubmatch `<li>([\s\S]*?)(</li|<ul)` $content }}
  {{- range $matches }}
    {{- $replacement := "" }}
    {{- $text := index . 1 }}
    {{- $rest := index . 2 }}
    {{- $parts := split $text "|" }}
  
    {{- if gt (len $parts) 1 }}
      {{- $name := trim (index $parts 0) " \t\n\r" }}
      {{- $vendor := trim (index $parts 1) " \t\n\r" }}
      {{- $icon := trim (index $parts 2) " \t\n\r" }}
      {{- $color := trim (index $parts 3) " \t\n\r" }}
  
      {{- $ctx := dict "vendor" $vendor "name" $icon }}
      {{- if $color }}
        {{- $ctx = merge $ctx (dict "color" $color) }}
      {{- end }}
  
      {{- $iconContent := partial "icons/icon" $ctx }}
      {{- $replacement = printf `<li>%s<span>%s</span>%s` $iconContent $name $rest }}
    {{- end }}
  
    {{- if $replacement }}
      {{- $content = replace $content (index . 0) $replacement }}
    {{- end }}
  {{- end }}
  {{- $content | safeHTML -}}
  </div>

• assets/hb/modules/custom/scss/index.scss

  .list-tree {
      padding: 8px 12px;
      background: var(--hb-primary-bg);
      border-radius: 0.125rem;
  }
  
  .tree-title {
      margin-left: -4px;
  }
  
  .list-tree ul {
      list-style-type: none;
      padding: 0;
      position: relative;
      overflow: hidden;
  }
  
  .list-tree>ul {
      padding-inline-start: 1rem;
  }
  
  .list-tree li {
      color: var(--hb-body-color);
      margin-bottom: 0;
      margin-inline-end: 0;
      margin-inline-start: 0.5rem;
      margin-top: 0;
      padding-bottom: 0;
      padding-inline-end: 0.75rem;
      padding-inline-start: 1rem;
      padding-top: 0;
      position: relative;
  }
  
  .list-tree>ul>li {
      margin-inline-start: calc(-0.5rem);
  }
  
  .list-tree li::before,
  .list-tree li::after {
      content: '';
      position: absolute;
      inset-inline-start: 0;
  }
  
  .list-tree li::before {
      border-top: 2px solid var(--hb-body-color);
      height: 0;
      top: 0.75rem;
      width: 0.75rem;
  }
  
  .list-tree li:after {
      border-left: 2px solid var(--hb-body-color);
      height: 100%;
      top: -0.5rem;
      width: 0;
  }
  
  .list-tree ul:last-child li:last-child:after {
      height: 1.25rem;
  }
  
  .list-tree svg {
      color: var(--hb-primary);
      margin-inline-end: 0.25rem;
  }

[razonyang]

Looks great, thanks for sharing.