hugo-esv-include

custom.css

/* === Custom Styles for ESV Bible Verses (Ananke Theme) === */

/* General blockquote appearance */
.esv-blockquote {
  border-left: 4px solid #ccc;      /* subtle left bar */
  padding-left: 1rem;               /* space after border */
  margin: 1.5rem 0;                 /* top/bottom spacing */
  font-style: italic;               /* scripture look */
  color: #222;                      /* near-black text for readability */
  background-color: #f9f9f9;        /* faint background */
  border-radius: 4px;               /* soft corners */
}

/* Verse numbers in superscript */
.esv-blockquote sup.verse-num {
  font-size: 0.6em;       /* smaller superscripts */
  line-height: 0;
  vertical-align: super;
  color: #bbb;
  opacity: 0.8; 
  margin-right: 2px;
  position: relative;
  top: -0.2em;            /* fine-tune vertical alignment */

}

/* Footer (passage reference) */
.esv-blockquote footer {
  text-align: right;
  font-style: normal;
  font-weight: 600;
  color: #555;
  margin-top: 0.5rem;
}

/* Responsive tweaks for narrow screens */
@media (max-width: 640px) {
  .esv-blockquote {
    padding-left: 0.75rem;
    font-size: 0.95rem;
  }
}

esv.html

{{/* layouts/shortcodes/esv.html
   Usage:
     {{< esv passage="John 15:1-5" >}}                ← default (superscript verse nums only)
     {{< esv passage="Psalm 23" headings="true" >}}   ← with headings
     {{< esv passage="Romans 8" footnotes="true" >}}  ← with footnotes

   Requires: HUGO_ESV_API_KEY
*/}}

{{ $passage := .Get "passage" | default "John 3:16" }}
{{ $includeRefs := .Get "refs" | default "false" }}
{{ $includeHeadings := .Get "headings" | default "false" }}
{{ $includeFootnotes := .Get "footnotes" | default "false" }}
{{ $includeVerseNums := .Get "verseNumbers" | default "true" }}

{{/* Disable inline styles so we can style verse numbers ourselves */}}
{{ $url := printf "https://api.esv.org/v3/passage/html/?q=%s&include-passage-references=%s&include-headings=%s&include-footnotes=%s&include-verse-numbers=%s&inline-styles=false"
    (urlquery $passage)
    $includeRefs
    $includeHeadings
    $includeFootnotes
    $includeVerseNums
}}

{{ $apiKey := getenv "HUGO_ESV_API_KEY" }}
{{ if not $apiKey }}
  <div class="esv-error red">
    ⚠️ Missing HUGO_ESV_API_KEY
  </div>
{{ else }}
  {{ $headers := dict "Authorization" (printf "Token %s" $apiKey) }}
  {{ $opts := dict "headers" $headers "timeout" "10s" }}
  {{ $res := resources.GetRemote $url $opts }}

  {{ if not $res }}
    <div class="esv-error red">⚠️ Could not fetch passage.</div>
  {{ else }}
    {{ $data := transform.Unmarshal $res.Content }}
    {{ $html := index $data "passages" 0 | default "Passage not found." }}

    <blockquote class="esv-blockquote bl bw2 b--light-silver pl3 i near-black mv4">
      {{ $html | safeHTML }}
      <footer class="tr b mt2 mid-gray">— {{ $passage }} (ESV)</footer>
    </blockquote>
  {{ end }}
{{ end }}

hugo-shortcode

{{< esv passage="1 John 5:13-14" >}}