Categories
Blog

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>
{{ $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 }}

 

By Frances Coronel

Frances Coronel is a software engineer specializing in UI development on the Customer Acquisition Team at Slack where her mission is to make your working life simpler, more pleasant, and more productive.

She has been working professionally as a developer since 2015 and holds a Bachelors in Computer Science from Hampton University and a Masters in Computer Science from Cornell Tech.

Outside of Slack, Frances is an Executive Director of Techqueria, a 501c3 nonprofit that serves the largest community of Latinx in Tech in the US.

She also supports Code Nation as a member of their Bay Area Leadership Council and the Latino Community Foundation as a member of their Latinos in Tech Giving Circle.