chore: adapt theme to new template system (#696)

* Adapted theme's layout to [Hugo v0.146.0](https://gohugo.io/templates/new-templatesystem-overview/)
* Bumped minimal Hugo version to v0.146.0

layouts/_partials/components/codeblock-copy-button.html

@@ -0,0 +1,15 @@
+{{/* TODO: remove filename variable */}}
+{{- $filename := .filename | default "" -}}
+{{- $display := site.Params.highlight.copy.display | default "hover" -}}
+{{- $copyCode := (T "copyCode") | default "Copy code" -}}
+
+
+<div class="hextra-code-copy-btn-container {{ if eq $display `hover` }}hx:opacity-0{{ end }} hx:transition hx:group-hover/code:opacity-100 hx:flex hx:gap-1 hx:absolute hx:m-[11px] hx:right-0 {{ if $filename }}hx:top-8{{ else }}hx:top-0{{ end }}">
+  <button
+    class="hextra-code-copy-btn hx:group/copybtn hx:cursor-pointer hx:transition-all hx:active:opacity-50 hx:bg-primary-700/5 hx:border hx:border-black/5 hx:text-gray-600 hx:hover:text-gray-900 hx:rounded-md hx:p-1.5 hx:dark:bg-primary-300/10 hx:dark:border-white/10 hx:dark:text-gray-400 hx:dark:hover:text-gray-50"
+    title="{{ $copyCode }}"
+  >
+    <div class="copy-icon hx:group-[.copied]/copybtn:hidden hx:pointer-events-none hx:h-4 hx:w-4"></div>
+    <div class="success-icon hx:hidden hx:group-[.copied]/copybtn:block hx:pointer-events-none hx:h-4 hx:w-4"></div>
+  </button>
+</div>

layouts/_partials/components/codeblock.html

@@ -0,0 +1,29 @@
+{{ $filename := .filename | default "" -}}
+{{ $base_url := .base_url | default "" -}}
+{{ $lang := .lang | default "" }}
+{{ $content := .content }}
+{{ $options := .options | default (dict) }}
+
+{{- if $filename -}}
+  <div class="filename not-prose" dir="auto">
+    {{- if $base_url -}}
+
+      {{- $base_url = strings.TrimSuffix "/" $base_url -}}
+      {{- $filename = strings.TrimPrefix "/" $filename -}}
+      {{- $file_url := urls.JoinPath $base_url $filename -}}
+
+      <a class="hx:no-underline hx:inline-flex hx:items-center hx:gap-1" href="{{ $file_url }}" target="_blank" rel="noopener noreferrer">
+          <span>{{- $filename -}}</span>
+          {{- partial "utils/icon" (dict "name" "external-link" "attributes" "height=1em") -}}
+      </a>
+    {{- else -}}
+      {{- $filename -}}
+    {{- end -}}
+  </div>
+{{- end -}}
+
+{{- if transform.CanHighlight $lang -}}
+  <div>{{- highlight $content $lang $options -}}</div>
+{{- else -}}
+  <div><pre><code>{{ $content }}</code></pre></div>
+{{- end -}}

layouts/_partials/components/comments.html

@@ -0,0 +1,11 @@
+{{- $enableComments := site.Params.comments.enable | default false -}}
+
+{{ if not (eq .Params.comments nil) }}
+  {{ $enableComments = .Params.comments }}
+{{ end }}
+
+{{- if $enableComments -}}
+  {{- if eq site.Params.comments.type "giscus" -}}
+    {{ partial "components/giscus.html" . }}
+  {{- end -}}
+{{- end -}}

layouts/_partials/components/giscus.html

@@ -0,0 +1,71 @@
+{{- $lang := site.Language.LanguageCode | default `en` -}}
+
+{{- with site.Params.comments.giscus -}}
+<script>
+  /*
+   * "preferred color scheme" theme in giscus works using "prefers-color-scheme" in media query.
+   * but, hugo's theme switch function works by using "color-theme" in local storage.
+   * This solution was created with reference to:
+   * https://github.com/giscus/giscus/issues/336#issuecomment-1214366281
+  */
+  function getHugoTheme() {
+    return localStorage.getItem("color-theme");
+  }
+  
+  function getGiscusTheme() {
+    let giscusTheme = "{{ (string .theme) | default `light` }}";
+    if(getHugoTheme() == 'light') {
+      return giscusTheme.replace('dark', 'light');
+    } else {
+      return giscusTheme.replace('light', 'dark');
+    }
+  }
+
+  function setGiscusTheme() {
+    function sendMessage(message) {
+      const iframe = document.querySelector('iframe.giscus-frame');
+      if (!iframe) return;
+      iframe.contentWindow.postMessage({ giscus: message }, 'https://giscus.app');
+    }
+    sendMessage({
+      setConfig: {
+        theme: getGiscusTheme(),
+      },
+    });
+  }
+
+  document.addEventListener('DOMContentLoaded', function () {
+    const giscusAttributes = {
+      "src": "https://giscus.app/client.js",
+      "data-repo": "{{ .repo }}",
+      "data-repo-id": "{{ .repoId }}",
+      "data-category": "{{ .category }}",
+      "data-category-id": "{{ .categoryId }}",
+      "data-mapping": "{{ .mapping | default `pathname` }}",
+      "data-strict": "{{ (string .strict) | default 0 }}",
+      "data-reactions-enabled": "{{ (string .reactionsEnabled) |  default 1 }}",
+      "data-emit-metadata": "{{ (string .emitMetadata) | default 0 }}",
+      "data-input-position": "{{ .inputPosition | default `top` }}",
+      "data-theme": getGiscusTheme(),
+      "data-lang": "{{ .lang | default $lang }}",
+      "crossorigin": "anonymous",
+      "async": "",
+    };
+
+    // Dynamically create script tag
+    const giscusScript = document.createElement("script");
+    Object.entries(giscusAttributes).forEach(([key, value]) => giscusScript.setAttribute(key, value));
+    document.getElementById('giscus').appendChild(giscusScript);
+
+    // Update giscus theme when theme switcher is clicked
+    const toggles = document.querySelectorAll(".theme-toggle");
+    if (toggles) {
+      toggles.forEach(toggle => toggle.addEventListener('click', setGiscusTheme));
+    }
+  });
+</script>
+
+<div id="giscus"></div>
+{{- else -}}
+  {{ warnf "giscus is not configured" }}
+{{- end -}}

layouts/_partials/components/github-style-alert.html

@@ -0,0 +1,42 @@
+{{- $content := .content -}}
+{{- $alertType := .alertType -}}
+{{- $alertTitle := .alertTitle -}}
+
+{{- $icons := dict
+  "note" "information-circle"
+  "tip" "light-bulb"
+  "important" "information-circle"
+  "warning" "exclamation"
+  "caution" "exclamation-circle"
+-}}
+
+{{- $icon := index $icons $alertType -}}
+{{- $title := or $alertTitle (or (i18n $alertType) (title $alertType)) -}}
+
+{{- $defaultClass := "hx:border-orange-100 hx:bg-orange-50 hx:text-orange-800 hx:dark:border-orange-400/30 hx:dark:bg-orange-400/20 hx:dark:text-orange-300" }}
+
+{{- $alertClasses := dict
+  "note" "hx:border-blue-200 hx:bg-blue-100 hx:text-blue-900 hx:dark:border-blue-200/30 hx:dark:bg-blue-900/30 hx:dark:text-blue-200"
+  "tip" "hx:border-green-200 hx:bg-green-100 hx:text-green-900 hx:dark:border-green-200/30 hx:dark:bg-green-900/30 hx:dark:text-green-200"
+  "important" "hx:border-indigo-200 hx:bg-indigo-100 hx:text-indigo-900 hx:dark:border-indigo-200/30 hx:dark:bg-indigo-900/30 hx:dark:text-indigo-200"
+  "warning" "hx:border-amber-200 hx:bg-amber-100 hx:text-amber-900 hx:dark:border-amber-200/30 hx:dark:bg-amber-900/30 hx:dark:text-amber-200"
+  "caution" "hx:border-red-200 hx:bg-red-100 hx:text-red-900 hx:dark:border-red-200/30 hx:dark:bg-red-900/30 hx:dark:text-red-200"
+-}}
+
+{{- $class := index $alertClasses $alertType | default $defaultClass -}}
+
+
+<div class="hx:overflow-x-auto hx:mt-6 hx:flex hx:flex-col hx:rounded-lg hx:border hx:py-4 hx:px-4 hx:border-gray-200 hx:contrast-more:border-current hx:contrast-more:dark:border-current {{ $class }}">
+  <p class="hx:flex hx:items-center hx:font-medium">
+    {{- with $icon -}}
+      {{- partial "utils/icon.html" (dict "name" . "attributes" `height=16px class="hx:inline-block hx:align-middle hx:mr-2"`) -}}
+    {{- end -}}
+    {{- $title -}}
+  </p>
+
+  <div class="hx:w-full hx:min-w-0 hx:leading-7">
+    <div class="hx:mt-6 hx:leading-7 hx:first:mt-0">
+      {{- $content -}}
+    </div>
+  </div>
+</div>

layouts/_partials/components/last-updated.html

@@ -0,0 +1,12 @@
+{{- $lastUpdated := (T "lastUpdated") | default "Last updated on" -}}
+
+{{- if site.Params.displayUpdatedDate -}}
+  {{- with .Lastmod -}}
+    {{ $datetime := (time.Format "2006-01-02T15:04:05.000Z" .) }}
+    <div class="hx:mt-12 hx:mb-8 hx:block hx:text-xs hx:text-gray-500 hx:ltr:text-right hx:rtl:text-left hx:dark:text-gray-400">{{ $lastUpdated }} <time datetime="{{ $datetime }}">{{ partial "utils/format-date" . }}</time></div>
+  {{- else -}}
+    <div class="hx:mt-16"></div>
+  {{- end -}}
+{{- else -}}
+  <div class="hx:mt-16"></div>
+{{- end -}}

layouts/_partials/components/pager.html

@@ -0,0 +1,53 @@
+{{/* Article navigation on the footer of the article */}}
+
+{{- $reversePagination := .Scratch.Get "reversePagination" | default false -}}
+
+{{- $prev := cond $reversePagination .PrevInSection .NextInSection -}}
+{{- $next := cond $reversePagination .NextInSection .PrevInSection -}}
+
+{{- if eq .Params.prev false }}
+  {{- if $reversePagination }}{{ $next = false }}{{ else }}{{ $prev = false }}{{ end -}}
+{{ else }}
+  {{- with .Params.prev -}}
+    {{- with $.Site.GetPage . -}}
+      {{- if $reversePagination }}{{ $next = . }}{{ else }}{{ $prev = . }}{{ end -}}
+    {{- end -}}
+  {{- end -}}
+{{- end -}}
+
+{{- if eq .Params.next false }}
+  {{- if $reversePagination }}{{ $prev = false }}{{ else }}{{ $next = false }}{{ end -}}
+{{ else }}
+  {{- with .Params.next -}}
+    {{- with $.Site.GetPage . -}}
+      {{- if $reversePagination }}{{ $prev = . }}{{ else }}{{ $next = . }}{{ end -}}
+    {{- end -}}
+  {{- end -}}
+{{- end -}}
+
+{{- if or $prev $next -}}
+  <div class="hx:mb-8 hx:flex hx:items-center hx:border-t hx:pt-8 hx:border-gray-200 hx:dark:border-neutral-800 hx:contrast-more:border-neutral-400 hx:dark:contrast-more:border-neutral-400 hx:print:hidden">
+    {{- if $prev -}}
+      {{- $linkTitle := partial "utils/title" $prev -}}
+      <a
+        href="{{ $prev.RelPermalink }}"
+        title="{{ $linkTitle }}"
+        class="hx:flex hx:max-w-[50%] hx:items-center hx:gap-1 hx:py-4 hx:text-base hx:font-medium hx:text-gray-600 hx:transition-colors [word-break:break-word] hx:hover:text-primary-600 hx:dark:text-gray-300 hx:md:text-lg hx:ltr:pr-4 hx:rtl:pl-4"
+      >
+        {{- partial "utils/icon.html" (dict "name" "chevron-right" "attributes" "class=\"hx:inline hx:h-5 hx:shrink-0 hx:ltr:rotate-180\"") -}}
+        {{- $linkTitle -}}
+      </a>
+    {{- end -}}
+    {{- if $next -}}
+      {{- $linkTitle := partial "utils/title" $next -}}
+      <a
+        href="{{ $next.RelPermalink }}"
+        title="{{ $linkTitle }}"
+        class="hx:flex hx:max-w-[50%] hx:items-center hx:gap-1 hx:py-4 hx:text-base hx:font-medium hx:text-gray-600 hx:transition-colors [word-break:break-word] hx:hover:text-primary-600 hx:dark:text-gray-300 hx:md:text-lg hx:ltr:ml-auto hx:ltr:pl-4 hx:ltr:text-right hx:rtl:mr-auto hx:rtl:pr-4 hx:rtl:text-left"
+      >
+        {{- $linkTitle -}}
+        {{- partial "utils/icon.html" (dict "name" "chevron-right" "attributes" "class=\"hx:inline hx:h-5 hx:shrink-0 hx:rtl:-rotate-180\"") -}}
+      </a>
+    {{- end -}}
+  </div>
+{{- end -}}