hextra/layouts/partials/scripts.html

{{ $themeJS := resources.Get "js/theme.js" }}
<script src="{{ $themeJS.RelPermalink }}"></script>

{{ $codeCopyJS := resources.Get "js/code-copy.js" }}
<script src="{{ $codeCopyJS.RelPermalink }}"></script>

{{ $menuJS := resources.Get "js/menu.js" }}
<script src="{{ $menuJS.RelPermalink }}"></script>

{{ if .Page.Store.Get "hasMermaid" }}
  <script type="module">
    // TODO: embed mermaid.min.js in the theme
    import mermaid from "https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.esm.min.mjs";
    const theme = document.documentElement.classList.contains("dark") ? "dark" : "default";
    mermaid.initialize({ startOnLoad: true, theme: theme });
  </script>
{{ end }}

{{ if .HasShortcode "tabs" }}
  {{ $tabsJS := resources.Get "js/tabs.js" }}
  <script src="{{ $tabsJS.RelPermalink }}"></script>
{{ end }}


<!-- TODO: use feature flag for search and embed flexsearch -->
{{ $searchJSFile := printf "%s.search.js" .Language.Lang }}
{{ $searchJS := resources.Get "js/flexsearch.js" | resources.ExecuteAsTemplate $searchJSFile . }}
{{ if hugo.IsProduction }}
  {{ $searchJS = $searchJS | minify | fingerprint }}
{{ end }}
<script defer src="https://cdn.jsdelivr.net/npm/flexsearch@0.7.31/dist/flexsearch.bundle.min.js"></script>
<script defer src="{{ $searchJS.RelPermalink }}"></script>

{{ if .Page.Params.math }}
  <!-- TODO: embed katex in the theme -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.8/dist/katex.min.css" integrity="sha384-GvrOXuhMATgEsSwCs4smul74iXGOixntILdUW9XmUC6+HX0sLNAK3q71HotJqlAn" crossorigin="anonymous" />
  <script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.8/dist/katex.min.js" integrity="sha384-cpW21h6RZv/phavutF+AuVYrr+dA8xD9zs6FwLpaCct6O9ctzYFfFr4dgmgccOTx" crossorigin="anonymous"></script>
  <script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.8/dist/contrib/auto-render.min.js" integrity="sha384-+VBxd3r6XgURycqtZ117nYw44OOcIax56Z4dCRWbxyPt0Koah1uHoK0o4+/RRE05" crossorigin="anonymous"></script>
  <script>
    document.addEventListener("DOMContentLoaded", function () {
      renderMathInElement(document.body, {
        delimiters: [
          { left: "$$", right: "$$", display: true },
          { left: "$", right: "$", display: false },
          { left: "\\(", right: "\\)", display: false },
          { left: "\\[", right: "\\]", display: true },
        ],
        throwOnError: false,
      });
    });
  </script>
{{ end }}