How I Built the Notes Shortcodes

I wanted to build a page where I can add little microblog snippets to a page.

I figured the most straight forward approach would be to make Hugo shortcodes with a few things like title, date, and content.

This might be an evolving thing, but I wanted to get something started.

In my layouts/shortcodes/ directory, I created a new html shortcode file called notecard.html.

This file looks like this:

{{- $id    := .Get "id"    | default "" -}}
{{- $title := .Get "title" | default "" -}}
{{- $icon  := .Get "icon"  | default "" -}}
{{- $hint  := .Get "hint"  | default "" -}}
{{- $class := .Get "class" | default "" -}}

{{- $dateRaw := .Get "date" | default "" -}}
{{- $dateFmt := .Get "datefmt" | default "2 Jan 2006" -}} {{/* Go time format */}}
{{- $date := "" -}}
{{- if $dateRaw -}}
  {{- $date = (time $dateRaw).Format $dateFmt -}}
{{- end -}}
{{- $updRaw := .Get "updated" | default "" -}}
{{- $updated := "" -}}
{{- if $updRaw -}}{{- $updated = (time $updRaw).Format $dateFmt -}}{{- end -}}

<div {{ if $id }}id="{{ $id }}"{{ end }} class="notecard {{ $class }}">
  {{- if or $title $icon $hint $date -}}
  <div class="notecard__hdr">
    <div class="notecard__lhs">
      {{- if $icon -}}<span class="notecard__icon" aria-hidden="true">{{ $icon }}</span>{{- end -}}
      {{- if $title -}}<div class="notecard__title">{{ $title }}</div>{{- end -}}
      {{- if $date -}}<time class="notecard__date" datetime="{{ $dateRaw }}">{{ $date }}</time>{{- end -}}
      {{- if $updated -}}<time class="notecard__updated" datetime="{{ $updRaw }}">updated: {{ $updated }}</time>{{- end -}}
    </div>
    {{- if $hint -}}<div class="notecard__hint">{{ $hint }}</div>{{- end -}}
  </div>
  {{- end -}}

  <div class="notecard__body">
    {{ .Inner | markdownify }}
  </div>
</div>

Here we can see where the shortcode grabs a few variables being passed:

  • id
    • unimportant at this point, but can be used to link a rudimentary markdown index to scroll to a specific note. might be useful when there is a long list of notes (which is a back of mind concern)
  • title
  • icon
    • an emoji to spice things up a bit. I may default this to a flame or checkmark so there is always something.
  • hint
    • this is the codeword for the “tag” so to speak, but it’s not a tag, just a note.
  • class
    • allows for future css additions.
  • dateRaw
    • enter in the date however you wish
  • dateFmt
    • this will handle the formatting of the date, which we probably want to always default to 2 Jan 2006 style, but maybe that taste will change.
  • updated
    • if a note is updated, this is where it is entered

Then, for the actual html, it’s a pretty simple box defined by css.

Here is the css controlling the notecard:

.notecard{
  border: 1px solid var(--card-border, color-mix(in srgb, currentColor 14%, transparent));
  border-radius: 10px;
  padding: 0.9rem 1rem;
  margin: 1rem 0;
  background: var(--card-bg, color-mix(in srgb, currentColor 2%, transparent));
}

.notecard__hdr{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap: .75rem;
  margin-bottom: .5rem;
}

.notecard__lhs{ display:flex; align-items:baseline; gap:.5rem; min-width:0; }
.notecard__icon{ opacity:.75; }
.notecard__title{ font-weight:600; line-height:1.2; }
.notecard__hint{ font-size:.85rem; opacity:.65; white-space:nowrap; }

.notecard__body :first-child{ margin-top:0; }
.notecard__body :last-child{ margin-bottom:0; }

/* optional: tighter variant */
.notecard.tight{ padding:.65rem .8rem; border-radius:8px; }
.notecard__lhs{display:flex;align-items:baseline;gap:.5rem;min-width:0}
.notecard__date{
  font-size:.85rem;
  opacity:.65;
  padding-left:.6rem;
  margin-left:.2rem;
  border-left:1px solid color-mix(in srgb,currentColor 18%,transparent);
  white-space:nowrap;
}
.notecard__updated{
  font-size:.85rem;
  opacity:.65;
  padding-left:.6rem;
  margin-left:.2rem;
  border-left:1px solid color-mix(in srgb,currentColor 18%,transparent);
  white-space:nowrap;
}