feat: port author notes feature from Bootstrap to Tailwind module

Close #3125

modules/blox-tailwind/assets/css/components/all.css

@@ -6,3 +6,4 @@
 @import "steps.css";
 @import "cards.css";
 @import "math.css";
+@import "author-notes.css";

modules/blox-tailwind/assets/css/components/author-notes.css

@@ -0,0 +1,47 @@
+/* Author Notes Tooltip Styles */
+
+/* Hide elements with x-cloak until Alpine.js initializes */
+[x-cloak] {
+  display: none !important;
+}
+
+/* Ensure tooltip appears above other content */
+.author-notes-tooltip {
+  z-index: 9999;
+}
+
+/* Smooth hover effect for the info icon */
+.author-notes {
+  @apply inline-flex items-center justify-center;
+  @apply transition-all duration-200 ease-in-out;
+}
+
+/* Focus styles for accessibility */
+.author-notes:focus {
+  @apply outline-none ring-2 ring-primary-500 ring-offset-2 rounded-full;
+}
+
+/* Additional responsive styles for mobile */
+@media (max-width: 640px) {
+  /* On mobile, tooltips should be wider if needed */
+  .author-notes-tooltip {
+    white-space: normal;
+    max-width: 200px;
+  }
+}
+
+/* Print styles - show author notes inline when printing */
+@media print {
+  .author-notes {
+    display: none;
+  }
+  
+  /* Show author notes as superscript numbers in print */
+  .author-notes::after {
+    display: inline;
+    content: attr(data-tooltip);
+    vertical-align: super;
+    font-size: 0.75em;
+    margin-left: 0.25em;
+  }
+}

modules/blox-tailwind/layouts/_partials/blox/collection.html

@@ -79,6 +79,15 @@
   {{ $query = first $items_count $query }}
 {{ end }}
 
+{{/* Check if any items have author_notes to enable Alpine.js */}}
+{{ range $query }}
+  {{ if isset .Params "author_notes" }}
+    {{ $page.Store.Set "has_alpine" true }}
+    <script>console.log('Author notes found in collection - Alpine.js enabled');</script>
+    {{ break }}
+  {{ end }}
+{{ end }}
+
 {{ $columns := $block.design.columns | default "2" }}
 
 {{ if $block.content.title }}

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

@@ -1,5 +1,6 @@
 {{/* Load Alpine JS extension? */}}
 {{ if (.Page.Store.Get "has_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>

modules/blox-tailwind/layouts/_partials/page_metadata_authors.html

@@ -16,7 +16,36 @@
     </span>
     {{- if isset $.Params "author_notes" -}}
       {{- with (index $.Params.author_notes $index) -}}
-        <i class="author-notes fas fa-info-circle" data-toggle="tooltip" title="{{.}}"></i>
+        <span class="relative inline-block ml-1" x-data="{ tooltip: false }">
+          <button
+            @mouseenter="tooltip = true"
+            @mouseleave="tooltip = false"
+            @click="tooltip = !tooltip"
+            class="author-notes text-primary-600 dark:text-primary-400 hover:text-primary-800 dark:hover:text-primary-200 transition-colors cursor-help"
+            data-tooltip="{{.}}"
+            aria-label="{{.}}"
+            type="button"
+          >
+            <svg class="inline-block w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+              <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd"></path>
+            </svg>
+          </button>
+          <div
+            x-show="tooltip"
+            x-transition:enter="transition ease-out duration-200"
+            x-transition:enter-start="opacity-0 transform scale-95"
+            x-transition:enter-end="opacity-100 transform scale-100"
+            x-transition:leave="transition ease-in duration-150"
+            x-transition:leave-start="opacity-100 transform scale-100"
+            x-transition:leave-end="opacity-0 transform scale-95"
+            @click.away="tooltip = false"
+            class="absolute z-50 bottom-full left-1/2 transform -translate-x-1/2 mb-2 px-3 py-2 text-sm text-white bg-gray-900 dark:bg-gray-700 rounded-lg shadow-lg whitespace-nowrap"
+            x-cloak
+          >
+            {{.}}
+            <div class="absolute top-full left-1/2 transform -translate-x-1/2 -mt-1 w-0 h-0 border-l-4 border-r-4 border-t-4 border-transparent border-t-gray-900 dark:border-t-gray-700"></div>
+          </div>
+        </span>
       {{- end -}}
     {{- end -}}
   {{- end -}}

modules/blox-tailwind/layouts/list.html

@@ -10,6 +10,15 @@
 {{ $view := .Params.view | default "card" }}
 {{ $block := . }}
 
+{{/* Check if any pages have author_notes to enable Alpine.js */}}
+{{ range .Pages }}
+  {{ if isset .Params "author_notes" }}
+    {{ $.Store.Set "has_alpine" true }}
+    <script>console.log('Author notes found in list - Alpine.js enabled');</script>
+    {{ break }}
+  {{ end }}
+{{ end }}
+
 <div class="flex flex-col items-center">
 
   {{ partial "functions/render_view" (dict "fragment" "start" "page" $block "item" . "view" $view) }}

modules/blox-tailwind/layouts/single.html

@@ -32,6 +32,12 @@
         {{- if .Params.authors }}<span class="mx-1">·</span>{{ end -}}
         {{- end -}}
 
+        {{/* Set Alpine.js flag if author notes exist */}}
+        {{ if isset .Params "author_notes" }}
+          {{ .Store.Set "has_alpine" true }}
+          <script>console.log('Author notes detected in single.html, Alpine.js should load');</script>
+        {{ end }}
+
         {{ $taxonomy := "authors" }}
         {{ range $i, $author_obj := (.GetTerms $taxonomy) }}
           {{ $author_page := $author_obj.Page }}
@@ -50,6 +56,41 @@
           {{ with $author_page.Params.website }}
           </a>
           {{ end }}
+          {{/* Add author note tooltip if available */}}
+          {{- if isset $.Params "author_notes" -}}
+            {{- with (index $.Params.author_notes $i) -}}
+              <span class="relative inline-block ml-1" x-data="{ tooltip: false }">
+                <button
+                  @mouseenter="tooltip = true"
+                  @mouseleave="tooltip = false"
+                  @click="tooltip = !tooltip"
+                  class="author-notes text-primary-600 dark:text-primary-400 hover:text-primary-800 dark:hover:text-primary-200 transition-colors cursor-help"
+                  data-tooltip="{{.}}"
+                  aria-label="{{.}}"
+                  type="button"
+                >
+                  <svg class="inline-block w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+                    <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd"></path>
+                  </svg>
+                </button>
+                <div
+                  x-show="tooltip"
+                  x-transition:enter="transition ease-out duration-200"
+                  x-transition:enter-start="opacity-0 transform scale-95"
+                  x-transition:enter-end="opacity-100 transform scale-100"
+                  x-transition:leave="transition ease-in duration-150"
+                  x-transition:leave-start="opacity-100 transform scale-100"
+                  x-transition:leave-end="opacity-0 transform scale-95"
+                  @click.away="tooltip = false"
+                  class="absolute z-50 bottom-full left-1/2 transform -translate-x-1/2 mb-2 px-3 py-2 text-sm text-white bg-gray-900 dark:bg-gray-700 rounded-lg shadow-lg whitespace-nowrap"
+                  x-cloak
+                >
+                  {{.}}
+                  <div class="absolute top-full left-1/2 transform -translate-x-1/2 -mt-1 w-0 h-0 border-l-4 border-r-4 border-t-4 border-transparent border-t-gray-900 dark:border-t-gray-700"></div>
+                </div>
+              </span>
+            {{- end -}}
+          {{- end -}}
         {{ end }}
 
         {{ if ne .Params.reading_time false }}