Scramblings

Dev scratchpad. Digital garden

Hugo - Snippets for Breadcrumbs, Table of contents, Import code file as markdown, Quote

May 28, 2024 | Reading Time: 2 min

Note that the below snippets are stylized to Bootstrap 5. These can be easily adopted to any styling need.

Partial

 1<!-- layouts/partials/breadcrumbs.html -->
 2<div id="breadcrumbs-container" style="height: 1.2em; line-height: 1em; margin: 0; overflow: hidden; font-size: small;">
 3<ul id="breadcrumbs" style="list-style: none; padding: 0;">
 4    {{ range $index, $element := .Ancestors.Reverse }}
 5    {{if not $element.IsHome }}    
 6    <li class="text-muted" style="display: inline;">
 7        <span>&gt;</span>
 8        <a class="text-muted" href="{{ $element.RelPermalink }}">{{$element.Title}}</a>
 9    </li>
10    {{else}}
11    <li class="text-muted" style="display: inline;">
12        <a class="text-muted" href="{{ "/" | relLangURL }}" aria-label="home"><i class="fas fa-home"></i></a>
13    </li>
14    {{ end }}{{ end }}
15    {{ if not .IsHome }}
16    <li class="text-muted" style="display: inline;">
17        <span>&gt;</span>
18    </li>
19    {{ end }}
20</ul>
21</div>

Use as

1<!-- Uncomment below -->
2{{/* partial "breadcrumbs.html" . */}}

Table of contents

Partial

1<!-- layouts/partials/toc.html -->
2<div class="mt-1 mb-5">
3  {{ if and (gt .WordCount 300 ) (ne .Params.toc false) }}
4  <aside>
5    <h4>Table of contents</h4>
6    {{ .TableOfContents }}
7  </aside>
8  {{ end }}
9</div>

Use as

1<!-- Uncomment below -->
2{{/* - partial "toc.html" . - */}}

Code file as markdown

Shortcode

1<!-- layouts/shortcodes/codefile.html -->
2{{ $file := .Get "file" }}
3{{ $lang := .Get "lang" | default "plaintext" }}
4{{ $content := readFile $file }}
5
6{{- /* Insert the content as a Markdown code block */ -}}
7{{ printf "```%s\n%s\n```" $lang $content | markdownify }}

Use as

1<!-- Uncomment below -->
2{{/* % codefile file="posts/shell/zshrc" lang="shell" % */}}

Quote

Shortcode

1<!-- layouts/shortcodes/authorquote.html -->
2<div class="authorquote border-start border-3 border-secondary px-4 py-1" style="margin: 2.5em 10px; position: relative;">
3  <div class="quote-wrapper d-flex align-items-start">
4    <i class="fas fa-quote-left text-muted pe-2" style="font-size: 2em; flex-shrink: 0;"></i>
5    <div class="quote-content flex-grow-1" style="line-height: 1.5;">{{ .Inner }}</div>
6  </div>
7  <div class="author text-muted text-end mt-1" style="font-style: italic; font-weight: bold;">-- {{ .Get "author" | markdownify }}</div>
8</div>

Use as

1<!-- Uncomment below -->
2{{/* % authorquote author="Ian MacLaren" % */}}
3Be kind, for everyone is fighting a hard battle.
4{{/* % /authorquote % */}}