Hugo flashcard HTML Shortcode

flashcard.html

<!-- Made by Shay Nehmad, feel free to use. For details see
  https://mrnice.dev/posts/hugo-flashcard-shortcode-for-study/
-->
<!-- This "with" is for error handling, see
 https://gohugo.io/templates/shortcode-templates/#error-handling-in-shortcodes
-->
{{ with .Get "question" }}

<!-- get a random string to add to each ID -->
{{ $seed := now.Format ":time_full" }} {{ $random := delimit (shuffle (split
(md5 $seed) "" )) "" }}

<!-- create a unique ID for the answer, based on the question's SHA and the
random string. -->
{{ $questionSHA := . | sha1 }} {{ $answerID := printf "answer-id-%s-%s"
$questionSHA $random }}

<!-- The CSS and JS for the flashcard -->
<link rel="stylesheet" href="/css/flashcard.css" />
<script src="/js/flashcard.js"></script>

<!-- The flashcard itself -->
<div class="flashcard">
  <div class="notepad-line"></div>
  <button
    class="flashcard__front"
    onclick="toggleAnswer({{ $answerID }})"
    role="button"
  >
    {{ . | markdownify }}
  </button>
  <div id="{{ $answerID }}" class="flashcard__back">
    {{ $.Inner | markdownify }}
  </div>
</div>
<!-- Error handling stuff -->
{{ else }} {{ errorf "missing value for param 'question': %s" .Position }} {{
end }}