Useful Hugo & Bulma Snippets

A couple of useful Hugo snippets used with the Bulma CSS framework. 🧠

Speaking Engagements

<!-- Speaking Category -->

{{ $speaking := ($.Site.Taxonomies.categories.speaking).Pages }}

<!-- Upcoming Events -->

{{ $upcomingEvents := where $speaking "Date" "ge" now }}

<!-- Past Events -->

{{ $pastEvents := where $speaking "Date" "lt" now }}

<!-- Show Upcoming Events -->

{{ if (len $upcomingEvents) "ge" 1 }}

<h2>

⏳️ {{ len $upcomingEvents }} Upcoming {{ if gt (len $upcomingEvents) 1

}}Events{{ else }}Event{{ end }}

</h2>

<div class="columns is-multiline">

{{ range $upcomingEvents.ByDate.Reverse }}

<div

class="column is-half-tablet is-one-third-desktop is-one-third-widescreen is-one-third-fullhd"

>

{{ partial "card.html" . }}

</div>

{{ end }}

</div>

{{ end }}

<!-- Show Past Events -->

<h2>⌛️ {{ len $pastEvents }} Past Events</h2>

<div class="columns is-multiline">

{{ range $pastEvents.ByDate.Reverse }}

<div

class="column is-half-tablet is-one-third-desktop is-one-third-widescreen is-one-third-fullhd"

>

{{ partial "card.html" . }}

</div>

{{ end }}

</div>

Archive

{{ $regularPages := .Site.RegularPages }}

<div class="table-border-none">

<h2>

✒️ I've written about {{ len $regularPages }} different things so far.

</h2>

<!-- Pages -->

{{ range $regularPages.GroupByDate "2006" }}

<!-- Line Separator - Year -->

<!-- Check for No Date -->

{{ if not (eq .Key "0001") }}

<!-- Year -->

<h3>{{ .Key }}</h3>

<!-- Table -->

<table class="table">

<tbody>

{{ range .Pages }}

<tr>

<td>{{ dateFormat "January 2" .Date }}</td>

<td><a href="{{ .RelPermalink }}">{{ .Title }}</a></td>

</tr>

{{ end }}

</tbody>

</table>

{{ end }}

<!-- End - Range - Year -->

{{ end }}

<!-- End Message -->

{{ partial "content/list/end-message.html" . }}

</div>

Navbar

{{ $currentPage := . }}



<nav class="navbar has-shadow is-spaced" role="navigation" aria-label="main navigation">

<div class="container is-fluid">

<!-- Brand -->

<div class="navbar-brand">

<!-- Logo -->

<a class="navbar-item" href="{{ "/" | absLangURL }}">

<img class="lozad" loading="lazy" data-src="/assets/img/logos/logo-square.png" src="/assets/img/logos/logo-square.png" height="128" alt="{{ .Title }}">

</a>

<!-- Left Icons -->

<!-- Hidden on Desktop, Mobile Only -->

<div class="navbar-item is-hidden-fullhd">

<div class="buttons">

{{ range .Site.Menus.social }}

<a class="button is-white" href="{{ .Permalink }}" target="_blank" rel="noopener">

{{ if .Identifier }}<i class="{{ .Identifier }}" alt="{{ .Name }}" title="{{ .Name }}"></i>{{ end }}

</a>

{{ end }}

</div>

</div>

<!-- Hamburger Menu -->

<a role="button" class="navbar-burger burger" aria-label="menu" aria-expanded="false" data-target="navMenu">

<span aria-hidden="true"></span>

<span aria-hidden="true"></span>

<span aria-hidden="true"></span>

</a>

</div>

<!-- Main Menu -->

<div id="navMenu" class="navbar-menu">

<div class="navbar-start">

{{ range .Site.Menus.main }}

{{ if .HasChildren }}

<div class="navbar-item has-dropdown is-hoverable">

<a class="navbar-link{{ if (eq $currentPage.Permalink .Permalink) }} is-active{{ end }}" href="{{ .Permalink | relLangURL }}">

{{ if .Identifier }}<i class="{{ .Identifier }}" alt="{{ .Name }}"></i> {{ end }}{{- .Name -}}

</a>

<div class="navbar-dropdown">

{{ range .Children }}

<a class="navbar-item{{ if (eq $currentPage.Permalink .Permalink) }} is-active{{ end }}" href="{{ .Permalink | relLangURL }}">

{{ if .Identifier }}<i class="{{ .Identifier }}" alt="{{ .Name }}"></i>{{ end }} {{ .Name }}

</a>

{{ end }}

</div>

</div>

{{ else }}

<a class="navbar-item{{ if (eq $currentPage.Permalink .Permalink) }} is-active{{ end }}" href="{{ .Permalink | absLangURL }}">

{{- if .Identifier -}}<i class="{{ .Identifier }}" alt="{{ .Name }}"></i>{{- end -}} {{ .Name }}

</a>

{{ end }}

{{ end }}

</div>

<!-- Social Icons -->

<div class="navbar-end is-hidden-touch">

<div class="navbar-item">

<div class="buttons">

{{ range .Site.Menus.social }}

<a class="button is-white" href="{{ .Permalink }}" target="_blank" rel="noopener">

{{ if .Identifier }}<i class="{{ .Identifier }}" alt="{{ .Name }}" title="{{ .Name }}"></i>{{ end }}

</a>

{{ end }}

</div>

</div>

</div>

</div>

</div>

</nav>

Tags & Categories

{{ if or (or (.Params.tags) (.Params.categories)) }}

<!-- Taxonomy -->

<div class="columns">

<!-- Categories -->

{{ if .Params.categories }}

<div class="column">

<h3><a href="/categories/"> 📂 {{ i18n "categories" }}</a></h3>

<ul>

{{ range $category := .Params.categories }}

<li>

<a href="/categories/{{ $category | urlize }}/" title="{{ $category }}">

{{ $category }}

</a>

</li>

{{ end }}

</ul>

</div>

{{ end }}

<!-- Tags -->

{{ if .Params.tags }}

<div class="column">

<h3><a href="/tags/"> 📌 {{ i18n "tags" }}</a></h3>

<ul>

{{ range $tag := .Params.tags }}

<li>

<a href="/tags/{{ $tag | urlize }}/" title="{{ $tag }}"> {{ $tag }} </a>

</li>

{{ end }}

</ul>

</div>

{{ end }}

</div>

{{ end }}

SEO

<!-- Series -->

<!-- Add prefetch and prerender on section pages. Works especially well for articles or blog posts in a series -->

{{ if .IsPage }}

<!-- Previous Section -->

{{ if .PrevInSection }}

<link rel="prefetch" href="{{ .PrevInSection.Permalink }}" />

<link rel="prerender" href="{{ .PrevInSection.Permalink }}" />

<link rel="prev" href="{{ .PrevInSection.Permalink }}" /> {{ end }}

<!-- Next Section -->

{{ if .NextInSection }}

<link rel="prefetch" href="{{ .NextInSection.Permalink }}" />

<link rel="prerender" href="{{ .NextInSection.Permalink }}" />

<link rel="next" href="{{ .NextInSection.Permalink }}" /> {{ end }} {{ end }}

<!-- Canonical -->

<link rel="canonical" href="{{ .Permalink | safeURL }}" />

<!-- Alternative Output -->

{{ range .AlternativeOutputFormats -}} {{ printf `<link

rel="%s"

type="%s"

href="%s"

title="%s"

/>` .Rel .MediaType.Type .Permalink $.Site.Title | safeHTML }} {{ end -}}

Show Posts From Specific Category

<!-- Variables -->

{{ $blog := ($.Site.Taxonomies.categories.blog).Pages }}

<!-- Blog -->

<p>{{ len $blog}} blog posts written</p>

<div class="columns is-multiline">

{{ range $blog }} {{ if .Date.Before now }}

<div

class="column is-half-tablet is-one-third-desktop is-one-third-widescreen is-one-third-fullhd"

>

{{ partial "card.html" . }}

</div>

{{ end }} {{ end }}

</div>

Table of Contents

{{- if .Params.toc }}

<aside class="menu">

<p class="menu-label">Table of Contents</p>

<div class="menu-list">

{{ .TableOfContents }}

</div>

</aside>

{{- end }}

Param Date

{{ $recDate := time .Params.recordingDate }}

<!-- Recording Date -->

{{- if .Params.recordingDate }}

<p class="has-text-weight-light u-margin-top--sm u-margin-bottom--sm">

<span class="u-margin-right--sm">🎤</span>{{ if le $recDate now }}Recorded{{ else

}}Recording{{ end }} {{ dateFormat "January 2, 2006" .Params.recordingDate }}

</p>

{{- end }}