HugoBlox-kit/modules/blox/layouts/_partials/libraries.html

{{/* Load Preact for component-based blocks */}}
{{/* Check if any blocks on this page use Preact (set by init.html) */}}
{{ if .Page.Store.Get "needs_preact" }}
  {{ $preact_blocks := .Page.Store.Get "preact_blocks" | default slice }}
  
  {{/* Preact is now bundled with each template via js.Build and node_modules */}}
  
  {{/* Build and load each Preact block's client script */}}
  {{ range $block_type := $preact_blocks }}
    {{ $client_path := printf "js/hbx/blocks/%s/client.jsx" $block_type }}
    {{ $client_jsx := resources.Get $client_path }}
    
    {{ if $client_jsx }}
      {{/* Build the client-side JSX using Hugo's official integration */}}
      {{ $jsx_opts := dict 
        "targetPath" (printf "assets/js/preact-built/%s.js" $block_type)
        "JSX" "automatic"
        "JSXImportSource" "preact"
        "format" "iife"
        "minify" hugo.IsProduction
        "sourceMap" (cond hugo.IsDevelopment "external" "")
      }}
      {{ $built_jsx := $client_jsx | js.Build $jsx_opts }}
      {{ if hugo.IsProduction }}
        {{ $built_jsx = $built_jsx | fingerprint "sha256" }}
      {{ end }}
      <script defer src="{{ $built_jsx.RelPermalink }}"{{ if hugo.IsProduction }} integrity="{{ $built_jsx.Data.Integrity }}"{{ end }}></script>
    {{ end }}
  {{ end }}
{{ end }}

{{/* Show site search? */}}
{{ $show_search := site.Params.hugoblox.header.search | default false }}

{{/* Hugo Blox Animations - load synchronously BEFORE Alpine.js to register components */}}
{{ if .Page.Store.Get "has_animations" }}
  {{ $animations_js := resources.Get "js/hb-animations.js" | resources.Minify }}
  {{- if hugo.IsProduction -}}
    {{ $animations_js = $animations_js | fingerprint "sha256" }}
  {{- end -}}
  <script src="{{ $animations_js.RelPermalink }}"{{ if hugo.IsProduction }} integrity="{{ $animations_js.Data.Integrity }}"{{ end }}></script>
{{ end }}

{{/* Load Alpine JS extension? */}}
{{/* Alpine is needed for search modal and other interactive components */}}
{{ $needs_alpine := or (.Page.Store.Get "has_alpine") $show_search (.Page.Store.Get "has_animations") }}
{{ if $needs_alpine }}
  <script>console.log('✓ Alpine.js loading on demand');</script>
  {{ $alpine_js := resources.Get "dist/lib/alpinejs/cdn.min.js" }}
  {{ $alpine_js = $alpine_js | resources.Fingerprint "sha256" }}
  <script src="{{ $alpine_js.RelPermalink }}" integrity="{{ $alpine_js.Data.Integrity }}" defer></script>
{{ end }}

{{/* Hugo Blox Search JavaScript (CSS is in main.css) */}}
{{ if $show_search }}
{{ $search_js := resources.Get "js/hb-search.js" | resources.Minify }}
{{- if hugo.IsProduction -}}
  {{ $search_js = $search_js | fingerprint "sha256" }}
{{- end -}}
<script defer src="{{ $search_js.RelPermalink }}"{{ if hugo.IsProduction }} integrity="{{ $search_js.Data.Integrity }}"{{ end }}></script>
{{ end }}

{{/* Mermaid */}}
{{ if (.Page.Store.Get "has_mermaid") }}
  {{ $mermaid_js := resources.Get "dist/lib/mermaid/mermaid.min.js" }}
  {{ $mermaid_config_js := resources.Get "js/hb-mermaid-config.js" }}
  {{ $mermaid_config_js = $mermaid_config_js | resources.Minify }}
  {{ $mermaid_bundle := slice $mermaid_js $mermaid_config_js | resources.Concat "js/mermaid.bundle.js" | resources.Fingerprint "sha256" }}
  <script defer src="{{ $mermaid_bundle.RelPermalink }}" integrity="{{ $mermaid_bundle.Data.Integrity }}"></script>
{{ end }}

{{/* Markmap */}}
{{ if (.Page.Store.Get "has_markmap") }}
<style>
  .markmap > svg {
    width: 100%;
    height: 100%;
  }
</style>
<script>
  window.markmap = {
    autoLoader: {
      manual: false,
      onReady() {
        const { autoLoader, builtInPlugins } = window.markmap;
        // Disable Prism highlighting plugin as it conflicts and attempts to re-render code blocks outside of Markmap.
        autoLoader.transformPlugins = builtInPlugins.filter(plugin => plugin.name !== 'prism');
      },
    },
  };
</script>
{{ $markmap_js := resources.Get "dist/lib/markmap/index.js" }}
{{ $markmap_js = $markmap_js | resources.Minify | resources.Fingerprint "sha256" }}
<script defer src="{{ $markmap_js.RelPermalink }}" integrity="{{ $markmap_js.Data.Integrity }}"></script>
{{ end }}

{{/* Katex */}}
{{ if (.Page.HasShortcode "math") | or .Params.math | or site.Params.hugoblox.content.math.enable }}
  {{ $katex_css := resources.Get "dist/lib/katex/katex.min.css" }}
  {{ $katex_css = $katex_css | resources.Fingerprint "sha256" }}
  <link type="text/css" rel="stylesheet" href="{{ $katex_css.RelPermalink }}" integrity="{{ $katex_css.Data.Integrity }}" />
  {{ $katex_js := resources.Get "dist/lib/katex/katex.min.js" }}
  {{ $katex_js = $katex_js | resources.Fingerprint "sha256" }}
  <script defer src="{{ $katex_js.RelPermalink }}" integrity="{{ $katex_js.Data.Integrity }}"></script>
  {{ $katex_render_js := resources.Get "dist/lib/katex/auto-render.min.js" }}
  {{ $katex_config_js := resources.Get "js/katex-config.js" }}
  {{ $katex_config_js = $katex_config_js | resources.Minify }}
  {{ $katex_bundle := slice $katex_render_js $katex_config_js | resources.Concat "js/katex-renderer.js" | resources.Fingerprint "sha256" }}
  <script defer src="{{ $katex_bundle.RelPermalink }}" integrity="{{ $katex_bundle.Data.Integrity }}"></script>
  {{ $katex_fonts := resources.Match "dist/lib/katex/fonts/*" }}
  {{ range $katex_fonts }}
    {{ .Publish }}
  {{ end }}
{{ end }}

{{/* Plotly */}}
{{ if .Page.HasShortcode "chart" }}
{{ $plotly_js := resources.Get "dist/lib/plotly/plotly.min.js" }}
{{ $plotly_js = $plotly_js | resources.Fingerprint "sha256" }}
<script defer src="{{ $plotly_js.RelPermalink }}" integrity="{{ $plotly_js.Data.Integrity }}"></script>
{{ end }}