feat: add support for Alpine JS

modules/blox-tailwind/i18n/en.yaml

@@ -107,6 +107,17 @@
 - id: user_profile_latest
   translation: Latest
 
+# Countdown widget
+
+- id: days
+  translation: Days
+- id: hours
+  translation: Hours
+- id: minutes
+  translation: Minutes
+- id: seconds
+  translation: Seconds
+
 # Accomplishments widget
 
 - id: see_certificate

modules/blox-tailwind/layouts/partials/blox/hero.html

@@ -23,11 +23,6 @@
       {{ with $block.content.text }}<p class="mt-6 text-lg leading-8 text-gray-600 dark:text-gray-300">{{ . | $page.RenderString | emojify }}</p>{{end}}
 
       {{ if $block.content.primary_action.url }}
-        {{ $pack := or $block.content.primary_action.icon_pack "fas" }}
-        {{ $pack_prefix := $pack }}
-        {{ if in (slice "fab" "fas" "far" "fal") $pack }}
-          {{ $pack_prefix = "fa" }}
-        {{ end }}
         {{ $link := $block.content.primary_action.url }}
         {{ $scheme := (urls.Parse $link).Scheme }}
         {{ $target := "" }}

modules/blox-tailwind/layouts/partials/functions/get_logo_url.html

@@ -4,7 +4,8 @@
 
 {{ $logo_url := "" }}
 {{ if resources.Get "media/logo.png" | or (resources.Get "media/logo.svg") }}
-  {{ $logo_url = (partial "functions/get_logo" (dict "constraint" "fit" "size" 192)).Permalink }}
+  {{/* !CACHED! Can safely cache this site logo variant */}}
+  {{ $logo_url = (partialCached "functions/get_logo" (dict "constraint" "fit" "size" 192)).Permalink }}
 {{ else }}
   {{ $logo_url = (partial "functions/get_site_icon" 192).Permalink }}
 {{ end }}

modules/blox-tailwind/layouts/partials/functions/parse_block_v2.html

@@ -123,12 +123,15 @@
 
 {{ $widget_class := printf "blox-%s" (replace (replace $block_type "." "-") "_" "-") }}
 
-{{ $widget_config_file := printf "blocks/%s-config.html" $block_type }}
-{{ if templates.Exists (printf "partials/%s" $widget_config_file) }}
-  {{ $cfg := partial $widget_config_file $widget_args }}
-  {{ with $cfg.use_container }}{{ $use_container = . }}{{ end }}
-  {{ with $cfg.inject_section_heading }}{{ $use_cols = . }}{{ end }}
-{{end}}
+{{/* Now loaded in `init.html` */}}
+{{/*
+  {{ $widget_config_file := printf "blox/%s--CONFIG.html" $block_type }}
+  {{ if templates.Exists (printf "partials/%s" $widget_config_file) }}
+    {{ $cfg := partial $widget_config_file $widget_args }}
+    {{ with $cfg.use_container }}{{ $use_container = . }}{{ end }}
+    {{ with $cfg.inject_section_heading }}{{ $use_cols = . }}{{ end }}
+  {{end}}
+*/}}
 
 {{/* Dedicated child div for bg prevents parallax 100% height issue within new CSS grid page wrapper. */}}
 <section id="{{$hash_id}}" class="relative hbb-section {{$widget_class}} {{if $bg.text_color_light}}dark{{else if (eq $bg.text_color_light false)}}light{{end}} {{with $css_classes}}{{.}}{{end}}" {{with $style}}style="{{. | safeCSS}}"{{end}} {{print $extra_attributes | safeHTMLAttr}}>

modules/blox-tailwind/layouts/partials/init.html

@@ -1,5 +1,23 @@
 {{/* Workaround Hugo concurrency issues (e.g. not detecting Page.Store variables) */}}
 {{/* https://discourse.gohugo.io/t/persisting-data-across-the-build-of-a-site/41114/6 */}}
-{{- range site.AllPages }}
+{{- range $page := site.AllPages }}
   {{- $noop := .Content }}
+  {{ if eq .Type "landing" }}
+    {{ range $index, $block := .Params.sections }}
+      {{/* Do not show sections intended only for the demo site. */}}
+      {{ if or (not $block.demo) ($block.demo | and (eq (os.Getenv "WC_DEMO") "true")) }}
+        {{ $block_type := lower ($block.blox | default $block.block) | default "markdown" }}
+        {{ range $r := site.Data.blox_aliases.renames }}
+          {{ $block_type = cond (eq $block_type $r.old) $r.new $block_type }}
+        {{ end }}
+        {{ $widget_config_file := printf "blox/%s--CONFIG.html" $block_type }}
+        {{ if templates.Exists (printf "partials/%s" $widget_config_file) }}
+          {{/* warnf "Loading blox config at %s" $widget_config_file */}}
+          {{ $hash_id := $block.id | default (printf "section-%s" (replace $block_type "." "-")) }}
+          {{ $widget_args := dict "wcPage" $page "wcBlock" $block "wcIdentifier" $hash_id }}
+          {{ partial $widget_config_file $widget_args }}
+        {{end}}
+      {{ end }}
+    {{ end }}
+  {{- end -}}
 {{- end -}}

modules/blox-tailwind/layouts/partials/libraries.html

@@ -1,3 +1,10 @@
+{{/* Load Alpine JS extension? */}}
+{{ if (.Page.Store.Get "has_alpine") }}
+  {{ $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 }}
+
 {{/* Show site search? */}}
 {{ $show_search := site.Params.header.navbar.show_search | default false }}
 {{ if $show_search }}

modules/blox-tailwind/layouts/partials/site_footer.html

@@ -3,7 +3,7 @@
   {{ partial "functions/get_hook" (dict "hook" "footer-start" "context" .) }}
 
   {{/* Load footer block */}}
-  {{ $footer_section_name := site.Params.footer.block | default "minimal" }}
+  {{ $footer_section_name := site.Params.footer.blox | default "minimal" }}
   {{ $footer_section_path := printf "components/footers/%s.html" $footer_section_name }}
   {{ if not (templates.Exists (printf "partials/%s" $footer_section_path)) }}
     {{ errorf "Check your `params.yaml`. Cannot find footer block at `layouts/partials/%s`" $footer_section_path }}

modules/blox-tailwind/layouts/partials/site_head.html

@@ -134,7 +134,8 @@
   </script>
 
   {{/* Analytics & Verification */}}
-  {{ partial "blox-analytics/index" . }}
+  {{/* !CACHED! All analytics and verification code is at site level */}}
+  {{ partialCached "blox-analytics/index" . }}
 
   {{/* RSS Feed */}}
   {{ with .OutputFormats.Get "RSS" }}
@@ -163,7 +164,8 @@
   {{ else if $sharing_image }}
     {{ $og_image = $sharing_image.Permalink }}
   {{ else if $has_logo }}
-    {{ $og_image = (partial "functions/get_logo" (dict "constraint" "fit" "size" 300)).Permalink }}
+    {{/* !CACHED! Can safely cache this site logo variant */}}
+    {{ $og_image = (partialCached "functions/get_logo" (dict "constraint" "fit" "size" 300)).Permalink }}
     {{ $twitter_card = "summary" }}
   {{ else }}
     {{ $og_image = (partial "functions/get_site_icon" 512).Permalink }}
@@ -247,6 +249,7 @@
   {{ end }}
 
   {{/* Init prior to auto-chunking/bundling scripts due to Hugo concurrency issues */}}
+  {{/* !CACHED! Initialized once at site level and then cached for each page */}}
   {{- partialCached "init.html" . -}}
 
   {{/* Load Third-Party Libraries */}}

modules/blox-tailwind/layouts/shortcodes/table.html

@@ -25,12 +25,12 @@
 {{ $is_remote := strings.HasPrefix $src "http" }}
 {{ $rows := transform.Unmarshal (dict "delimiter" $delimiter) (.Page.Resources.Get $src).Content }}
 
-<table class="table-auto">
+<table class="table-auto w-full">
   {{ if $useHeaderRow }}
     {{ $headerRow := index $rows 0 }}
     {{ $rows = after 1 $rows }}
     <thead>
-      <tr> {{ range $headerRow }} <th>{{ . | markdownify | emojify }}</th> {{ end }} </tr>
+      <tr> {{ range $headerRow }} <th class="border-b dark:border-slate-600 font-medium p-4 pt-0 pb-3 text-slate-400 dark:text-slate-200 text-left">{{ . | markdownify | emojify }}</th> {{ end }} </tr>
     </thead>
   {{ end }}
   <tbody>
@@ -38,9 +38,9 @@
     <tr>
       {{ range . }}
         {{ if (findRE "^\\d+$" .) }}
-          <td data-table-dtype="number">{{ . }}</td>
+          <td data-table-dtype="number" class="border-b border-slate-100 dark:border-slate-700 p-4 text-slate-500 dark:text-slate-400">{{ . }}</td>
         {{ else }}
-          <td data-table-dtype="text">{{ . | markdownify | emojify }}</td>
+          <td data-table-dtype="text" class="border-b border-slate-100 dark:border-slate-700 p-4 text-slate-500 dark:text-slate-400">{{ . | markdownify | emojify }}</td>
         {{ end }}
       {{ end }}
     </tr>

modules/blox-tailwind/package.json

@@ -1,6 +1,7 @@
 {
   "dependencies": {
     "@tailwindcss/nesting": "0.0.0-insiders.565cd3e",
+    "alpinejs": "^3.13.10",
     "dotenv": "^16.3.1",
     "katex": "^0.16.9",
     "markmap-autoloader": "^0.15.4",

modules/blox-tailwind/tailwind.config.js

@@ -14,6 +14,7 @@ module.exports = {
     './layouts/**/*.html',
     '**/libs/chroma/*.css',
     './**/*.svg',
+    '../../starters/**/*.html',
     ...content_extra,
     // ...(process.env.HB_TPL ? '../../starters/'+process.env.HB_TPL+'/hugo_stats.json' : './hugo_stats.json'),
   ],
@@ -25,7 +26,7 @@ module.exports = {
     'pl-4', 'pl-8', 'pl-12',   /* TOC indents */
     'min-h-screen', /* Blox options */
   ],
-  whitelistPatterns: [/^bg-white/, /^bg-gray-/, /^bg-primary-/], /* /^pl-/ for TOC */
+  whitelistPatterns: [/^bg-white/, /^bg-gray-/, /^bg-primary-/, /^bg-gradient-/, /^from-primary-/, /^to-primary-/], /* /^pl-/ for TOC */
   darkMode: ['class'],
   theme: {
     extend: {

modules/blox-tailwind/vite.config.js

@@ -30,6 +30,8 @@ export default defineConfig({
       "src": "node_modules/katex/dist/fonts/", "dest": "katex/"
     }, {
       "src": "node_modules/markmap-autoloader/dist/index.js", "dest": "markmap/"
+    }, {
+      "src": "node_modules/alpinejs/dist/cdn.min.js", "dest": "alpinejs/"
     },
     ],
     hook: "buildStart", enforce: 'pre'