refactor: concat built-in js scripts

chore: vendorize katex 0.16.8

chore: vendorize flexsearch 0.7.31

chore: add katex fonts

chore: vendorize mermaid

* add option to disable math globally

chore: fix edit url nil variable

chore: add comments
This commit is contained in:
Xin
2023-08-12 22:48:41 +01:00
parent d66ae7146f
commit 3d7a4b7c99
71 changed files with 1735 additions and 36 deletions

View File

@ -1,7 +1,7 @@
{{- $enableFooterSwitches := .Scratch.Get "enableFooterSwitches" | default false -}}
<footer class="bg-gray-100 pb-[env(safe-area-inset-bottom)] dark:bg-neutral-900 print:bg-transparent">
<footer class="hextra-footer bg-gray-100 pb-[env(safe-area-inset-bottom)] dark:bg-neutral-900 print:bg-transparent">
{{- if $enableFooterSwitches }}{{ template "footer-switches" }}{{ end -}}
<hr class="dark:border-neutral-800" />
<div class="mx-auto flex max-w-[90rem] justify-center py-12 pl-[max(env(safe-area-inset-left),1.5rem)] pr-[max(env(safe-area-inset-right),1.5rem)] text-gray-600 dark:text-gray-400 md:justify-start">

View File

@ -1,42 +1,52 @@
{{ $themeJS := resources.Get "js/theme.js" }}
<script src="{{ $themeJS.RelPermalink }}"></script>
{{ $jsTheme := resources.Get "js/theme.js" }}
{{ $jsMenu := resources.Get "js/menu.js" }}
{{ $jsCodeCopy := resources.Get "js/code-copy.js" }}
{{ $jsTabs := resources.Get "js/code-copy.js" }}
{{ $codeCopyJS := resources.Get "js/code-copy.js" }}
<script src="{{ $codeCopyJS.RelPermalink }}"></script>
{{ $scripts := slice $jsTheme $jsMenu $jsCodeCopy $jsTabs | resources.Concat "js/main.js" }}
{{ if hugo.IsProduction }}
{{ $scripts = $scripts | minify | fingerprint }}
{{ end }}
<script defer src="{{ $scripts.RelPermalink }}" integrity="{{ $scripts.Data.Integrity }}"></script>
{{ $menuJS := resources.Get "js/menu.js" }}
<script src="{{ $menuJS.RelPermalink }}"></script>
{{/* FlexSearch */}}
{{- if not site.Params.search.disabled -}}
{{ $jsSearchScript := printf "%s.search.js" .Language.Lang }}
{{ $jsSearch := resources.Get "js/flexsearch.js" | resources.ExecuteAsTemplate $jsSearchScript . }}
{{ if hugo.IsProduction }}
{{ $jsSearch = $jsSearch | minify | fingerprint }}
{{ end }}
{{ $flexSearchJS := resources.Get "vendor/flexsearch/flexsearch.bundle.min.js" | fingerprint }}
<script defer src="{{ $flexSearchJS.RelPermalink }}" integrity="{{ $flexSearchJS.Data.Integrity }}"></script>
<script defer src="{{ $jsSearch.RelPermalink }}" integrity="{{ $jsSearch.Data.Integrity }}"></script>
{{- end -}}
{{ 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 });
{{/* Mermaid */}}
{{ if .Page.Store.Get "hasMermaid" -}}
{{ $mermaidJS := resources.Get "vendor/mermaid/mermaid.min.js" | fingerprint }}
<script defer src="{{ $mermaidJS.RelPermalink }}" integrity="{{ $mermaidJS.Data.Integrity }}"></script>
<script>
document.addEventListener("DOMContentLoaded", function () {
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>
{{/* KaTex */}}
{{ if and (not site.Params.math.disabled) .Page.Params.math }}
{{ $katexCSS := resources.Get "vendor/katex/katex.min.css" | fingerprint }}
{{ $katexJS := resources.Get "vendor/katex/katex.min.js" | fingerprint }}
{{ $katexAutoRenderJS := resources.Get "vendor/katex/auto-render.min.js" | fingerprint }}
<link type="text/css" rel="stylesheet" href="{{ $katexCSS.RelPermalink }}" integrity="{{ $katexCSS.Data.Integrity }}" />
<script defer src="{{ $katexJS.RelPermalink }}" integrity="{{ $katexJS.Data.Integrity }}"></script>
<script defer src="{{ $katexAutoRenderJS.RelPermalink }}" integrity="{{ $katexAutoRenderJS.Data.Integrity }}"></script>
{{ $katexFonts := resources.Match "vendor/katex/fonts/*" }}
{{ range $katexFonts }}
{{ .Publish }}
{{ end }}
<script>
// TODO: make render options configurable
document.addEventListener("DOMContentLoaded", function () {
renderMathInElement(document.body, {
delimiters: [

View File

@ -4,7 +4,7 @@
{{- with site.Params.toc.disabled -}}{{ $toc = not . }}{{- end -}}
<nav class="order-last hidden w-64 shrink-0 xl:block print:hidden px-4" aria-label="table of contents">
<nav class="hextra-toc order-last hidden w-64 shrink-0 xl:block print:hidden px-4" aria-label="table of contents">
{{ if $toc }}
<div class="sticky top-16 overflow-y-auto pr-4 pt-6 text-sm [hyphens:auto] max-h-[calc(100vh-4rem-env(safe-area-inset-bottom))] ltr:-mr-4 rtl:-ml-4">
{{ with .Fragments.Headings }}
@ -26,7 +26,8 @@
{{/* TOC bottom part */}}
<div class="{{ $borderClass }} sticky bottom-0 flex flex-col items-start gap-2 pb-8 dark:border-neutral-800 contrast-more:border-t contrast-more:border-neutral-400 contrast-more:shadow-none contrast-more:dark:border-neutral-400">
{{- if not site.Params.editURL.disabled -}}
{{- $editURL := urls.JoinPath site.Params.editURL.base .File.Path -}}
{{- $editURL := site.Params.editURL.base | default "" -}}
{{- with .File -}}{{ $editURL = urls.JoinPath $editURL .Path }}{{- end -}}
{{- with .Params.editURL -}}{{ $editURL = .Params.editURL }}{{- end -}}
<a class="text-xs font-medium text-gray-500 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-100 contrast-more:text-gray-800 contrast-more:dark:text-gray-50" href="{{ $editURL }}" target="_blank" rel="noreferer">{{ i18n "article.edit_this_page" }}</a>
{{- end -}}