·5 min read
Useful Hugo & Bulma Snippets
A couple of useful Hugo snippets used with the Bulma CSS framework. 🧠 Speaking Engagements <-- Speaking Category -- \{\{ $speaking := $.Site. Taxonomies.catego
## 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>
\{\{ range $upcomingEvents. ByDate. Reverse \}\}
<div
>
\{\{ partial "card.html" . \}\}
</div>
\{\{ end \}\}
</div>
\{\{ end \}\}
<!-- Show Past Events -->
<h2>⌛️ \{\{ len $pastEvents \}\} Past Events</h2>
<div>
\{\{ range $pastEvents. ByDate. Reverse \}\}
<div
>
\{\{ partial "card.html" . \}\}
</div>
\{\{ end \}\}
</div>
## Archive
\{\{ $regularPages := .Site. RegularPages \}\}
<div>
<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>
<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 role="navigation" aria-label="main navigation">
<div>
<!-- Brand -->
<div>
<!-- Logo -->
<a href="\{\{ "/" | absLangURL \}\}">
<img 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>
<div>
\{\{ range .Site. Menus.social \}\}
<a href="\{\{ .Permalink \}\}" target="_blank" rel="noopener">
\{\{ if .Identifier \}\}<i alt="\{\{ .Name \}\}" title="\{\{ .Name \}\}"></i>\{\{ end \}\}
</a>
\{\{ end \}\}
</div>
</div>
<!-- Hamburger Menu -->
<a role="button" 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>
<div>
\{\{ range .Site. Menus.main \}\}
\{\{ if .HasChildren \}\}
<div>
<a href="\{\{ .Permalink | relLangURL \}\}">
\{\{ if .Identifier \}\}<i alt="\{\{ .Name \}\}"></i> \{\{ end \}\}\{\{- .Name -\}\}
</a>
<div>
\{\{ range .Children \}\}
<a href="\{\{ .Permalink | relLangURL \}\}">
\{\{ if .Identifier \}\}<i alt="\{\{ .Name \}\}"></i>\{\{ end \}\} \{\{ .Name \}\}
</a>
\{\{ end \}\}
</div>
</div>
\{\{ else \}\}
<a href="\{\{ .Permalink | absLangURL \}\}">
\{\{- if .Identifier -\}\}<i alt="\{\{ .Name \}\}"></i>\{\{- end -\}\} \{\{ .Name \}\}
</a>
\{\{ end \}\}
\{\{ end \}\}
</div>
<!-- Social Icons -->
<div>
<div>
<div>
\{\{ range .Site. Menus.social \}\}
<a href="\{\{ .Permalink \}\}" target="_blank" rel="noopener">
\{\{ if .Identifier \}\}<i 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>
<!-- Categories -->
\{\{ if .Params.categories \}\}
<div>
<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>
<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>
\{\{ range $blog \}\} \{\{ if .Date. Before now \}\}
<div
>
\{\{ partial "card.html" . \}\}
</div>
\{\{ end \}\} \{\{ end \}\}
</div>
## Table of Contents
\{\{- if .Params.toc \}\}
<aside>
<p>Table of Contents</p>
<div>
\{\{ .TableOfContents \}\}
</div>
</aside>
\{\{- end \}\}
## Param Date
\{\{ $recDate := time .Params.recordingDate \}\}
<!-- Recording Date -->
\{\{- if .Params.recordingDate \}\}
<p>
<span>🎤</span>\{\{ if le $recDate now \}\}Recorded\{\{ else
\}\}Recording\{\{ end \}\} \{\{ dateFormat "January 2, 2006" .Params.recordingDate \}\}
</p>
\{\{- end \}\}
Tags 🏷️
