blowfish/layouts/_default/baseof.html

<!doctype html>
<html
  lang="{{ with site.Params.isoCode | default (site.Language.Locale | default `en`) }}{{- . -}}{{ end }}"
  dir="{{ cond (site.Params.rtl | default false) `rtl` `ltr` }}"
  class="scroll-smooth"
  data-default-appearance="{{ site.Params.defaultAppearance | default `light` }}"
  data-auto-appearance="{{ site.Params.autoSwitchAppearance | default `true` }}">
  {{- partial "head.html" . -}}
  {{- partialCached "init.html" . -}}

  {{ $bodyLayout := "flex flex-col h-screen m-auto leading-7 max-w-7xl px-6 sm:px-14 md:px-24 lg:px-32" }}
  {{ $bodyColor := "text-lg bg-neutral text-neutral-900 dark:bg-neutral-800 dark:text-neutral" }}
  <body class="{{ $bodyLayout }} {{ $bodyColor }} {{ if site.Params.enableStyledScrollbar | default true }}bf-scrollbar{{ end }}">
    <div id="the-top" class="absolute flex self-center">
      <a
        class="px-3 py-1 text-sm -translate-y-8 rounded-b-lg bg-primary-200 focus:translate-y-0 dark:bg-neutral-600"
        href="#main-content">
        <span class="font-bold text-primary-600 pe-2 dark:text-primary-400">&darr;</span>
        {{ i18n "nav.skip_to_main" }}
      </a>
    </div>
    <header>
      {{ $header := print "header/" site.Params.header.layout ".html" }}
      {{ if templates.Exists ( printf "partials/%s" $header ) }}
        {{ partial $header . }}
      {{ else }}
        {{ partial "header/basic.html" . }}
      {{ end }}
    </header>
    <div class="relative flex flex-col grow">
      <main id="main-content" class="grow">
        {{ block "main" . }}{{ end }}
        {{ if and (site.Params.footer.showScrollToTop | default true) }}
          {{- partial "scroll-to-top.html" . -}}
        {{ end }}
      </main>
      {{- partial "footer.html" . -}}
      {{ if site.Params.enableSearch | default false }}
        {{- partial "search.html" . -}}
      {{ end }}
    </div>
    {{/* Rendered after the main block so page heroes that paint their own
      fixed background can suppress the site-wide canvas for their page.
      The layer is fixed, so its position in the DOM has no visual effect. */}}
    {{ if and (site.Params.backgroundCanvas | default false) (not (.Store.Get "suppressBackgroundCanvas")) }}
      {{ $default := site.Store.Get "defaultBackgroundImage" }}
      {{ $canvasURL := $default.url }}
      {{ if not $canvasURL }}
        {{ with $default.obj }}{{ $canvasURL = .RelPermalink }}{{ end }}
      {{ end }}
      {{ with $canvasURL }}
        <div id="background-canvas" aria-hidden="true" class="pointer-events-none fixed inset-0 -z-20">
          <img
            src="{{ . }}"
            role="presentation"
            loading="eager"
            decoding="async"
            class="nozoom h-full w-full object-cover" />
          <div class="absolute inset-0 bg-neutral/75 dark:bg-neutral-800/60"></div>
        </div>
      {{ end }}
    {{ end }}
  </body>
  {{ if site.Params.buymeacoffee.globalWidget | default false }}
    {{/* Inject the third-party widget after the page is idle so it never
      competes with rendering-critical resources. */}}
    <script>
      (function () {
        var load = function () {
          var s = document.createElement("script");
          s.src = "https://cdnjs.buymeacoffee.com/1.0.0/widget.prod.min.js";
          s.setAttribute("data-name", "BMC-Widget");
          s.setAttribute("data-cfasync", "false");
          s.setAttribute("data-id", {{ site.Params.buymeacoffee.identifier }});
          s.setAttribute("data-description", "Support me on Buy me a coffee!");
          {{ with site.Params.buymeacoffee.globalWidgetMessage }}s.setAttribute("data-message", {{ . }});{{ end }}
          s.setAttribute("data-color", {{ site.Params.buymeacoffee.globalWidgetColor | default `#FFDD00` }});
          {{ with site.Params.buymeacoffee.globalWidgetPosition }}s.setAttribute("data-position", {{ . }});{{ end }}
          s.setAttribute("data-x_margin", "18");
          s.setAttribute("data-y_margin", "18");
          document.body.appendChild(s);
        };
        if ("requestIdleCallback" in window) {
          requestIdleCallback(load, { timeout: 4000 });
        } else {
          window.addEventListener("load", function () {
            setTimeout(load, 1500);
          });
        }
      })();
    </script>
  {{ end }}
</html>