Skip to content

Commit b90b1f2

Browse files
gcushengcushen
committed
feat: port author notes feature from Bootstrap to Tailwind module
Close #3125
1 parent 25ba004 commit b90b1f2

File tree

7 files changed

+138
-1
lines changed

7 files changed

+138
-1
lines changed

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,3 +6,4 @@
66
@import "steps.css";
77
@import "cards.css";
88
@import "math.css";
9+
@import "author-notes.css";

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

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
/* Author Notes Tooltip Styles */
2+
3+
/* Hide elements with x-cloak until Alpine.js initializes */
4+
[x-cloak] {
5+
display: none !important;
6+
}
7+
8+
/* Ensure tooltip appears above other content */
9+
.author-notes-tooltip {
10+
z-index: 9999;
11+
}
12+
13+
/* Smooth hover effect for the info icon */
14+
.author-notes {
15+
@apply inline-flex items-center justify-center;
16+
@apply transition-all duration-200 ease-in-out;
17+
}
18+
19+
/* Focus styles for accessibility */
20+
.author-notes:focus {
21+
@apply outline-none ring-2 ring-primary-500 ring-offset-2 rounded-full;
22+
}
23+
24+
/* Additional responsive styles for mobile */
25+
@media (max-width: 640px) {
26+
/* On mobile, tooltips should be wider if needed */
27+
.author-notes-tooltip {
28+
white-space: normal;
29+
max-width: 200px;
30+
}
31+
}
32+
33+
/* Print styles - show author notes inline when printing */
34+
@media print {
35+
.author-notes {
36+
display: none;
37+
}
38+
39+
/* Show author notes as superscript numbers in print */
40+
.author-notes::after {
41+
display: inline;
42+
content: attr(data-tooltip);
43+
vertical-align: super;
44+
font-size: 0.75em;
45+
margin-left: 0.25em;
46+
}
47+
}

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

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -79,6 +79,15 @@
7979
{{ $query = first $items_count $query }}
8080
{{ end }}
8181

82+
{{/* Check if any items have author_notes to enable Alpine.js */}}
83+
{{ range $query }}
84+
{{ if isset .Params "author_notes" }}
85+
{{ $page.Store.Set "has_alpine" true }}
86+
<script>console.log('Author notes found in collection - Alpine.js enabled');</script>
87+
{{ break }}
88+
{{ end }}
89+
{{ end }}
90+
8291
{{ $columns := $block.design.columns | default "2" }}
8392

8493
{{ if $block.content.title }}

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
{{/* Load Alpine JS extension? */}}
22
{{ if (.Page.Store.Get "has_alpine") }}
3+
<script>console.log('✓ Alpine.js loading on demand');</script>
34
{{ $alpine_js := resources.Get "dist/lib/alpinejs/cdn.min.js" }}
45
{{ $alpine_js = $alpine_js | resources.Fingerprint "sha256" }}
56
<script src="{{ $alpine_js.RelPermalink }}" integrity="{{ $alpine_js.Data.Integrity }}" defer></script>

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

Lines changed: 30 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,36 @@
1616
</span>
1717
{{- if isset $.Params "author_notes" -}}
1818
{{- with (index $.Params.author_notes $index) -}}
19-
<i class="author-notes fas fa-info-circle" data-toggle="tooltip" title="{{.}}"></i>
19+
<span class="relative inline-block ml-1" x-data="{ tooltip: false }">
20+
<button
21+
@mouseenter="tooltip = true"
22+
@mouseleave="tooltip = false"
23+
@click="tooltip = !tooltip"
24+
class="author-notes text-primary-600 dark:text-primary-400 hover:text-primary-800 dark:hover:text-primary-200 transition-colors cursor-help"
25+
data-tooltip="{{.}}"
26+
aria-label="{{.}}"
27+
type="button"
28+
>
29+
<svg class="inline-block w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
30+
<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>
31+
</svg>
32+
</button>
33+
<div
34+
x-show="tooltip"
35+
x-transition:enter="transition ease-out duration-200"
36+
x-transition:enter-start="opacity-0 transform scale-95"
37+
x-transition:enter-end="opacity-100 transform scale-100"
38+
x-transition:leave="transition ease-in duration-150"
39+
x-transition:leave-start="opacity-100 transform scale-100"
40+
x-transition:leave-end="opacity-0 transform scale-95"
41+
@click.away="tooltip = false"
42+
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"
43+
x-cloak
44+
>
45+
{{.}}
46+
<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>
47+
</div>
48+
</span>
2049
{{- end -}}
2150
{{- end -}}
2251
{{- end -}}

‎modules/blox-tailwind/layouts/list.html‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,15 @@ <h1 class="lg:text-6xl">{{ .Title }}</h1>
1010
{{ $view := .Params.view | default "card" }}
1111
{{ $block := . }}
1212

13+
{{/* Check if any pages have author_notes to enable Alpine.js */}}
14+
{{ range .Pages }}
15+
{{ if isset .Params "author_notes" }}
16+
{{ $.Store.Set "has_alpine" true }}
17+
<script>console.log('Author notes found in list - Alpine.js enabled');</script>
18+
{{ break }}
19+
{{ end }}
20+
{{ end }}
21+
1322
<div class="flex flex-col items-center">
1423

1524
{{ partial "functions/render_view" (dict "fragment" "start" "page" $block "item" . "view" $view) }}

‎modules/blox-tailwind/layouts/single.html‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,12 @@ <h1 class="mt-2 text-4xl font-bold tracking-tight text-slate-900 dark:text-slate
3232
{{- if .Params.authors }}<span class="mx-1">·</span>{{ end -}}
3333
{{- end -}}
3434

35+
{{/* Set Alpine.js flag if author notes exist */}}
36+
{{ if isset .Params "author_notes" }}
37+
{{ .Store.Set "has_alpine" true }}
38+
<script>console.log('Author notes detected in single.html, Alpine.js should load');</script>
39+
{{ end }}
40+
3541
{{ $taxonomy := "authors" }}
3642
{{ range $i, $author_obj := (.GetTerms $taxonomy) }}
3743
{{ $author_page := $author_obj.Page }}
@@ -50,6 +56,41 @@ <h1 class="mt-2 text-4xl font-bold tracking-tight text-slate-900 dark:text-slate
5056
{{ with $author_page.Params.website }}
5157
</a>
5258
{{ end }}
59+
{{/* Add author note tooltip if available */}}
60+
{{- if isset $.Params "author_notes" -}}
61+
{{- with (index $.Params.author_notes $i) -}}
62+
<span class="relative inline-block ml-1" x-data="{ tooltip: false }">
63+
<button
64+
@mouseenter="tooltip = true"
65+
@mouseleave="tooltip = false"
66+
@click="tooltip = !tooltip"
67+
class="author-notes text-primary-600 dark:text-primary-400 hover:text-primary-800 dark:hover:text-primary-200 transition-colors cursor-help"
68+
data-tooltip="{{.}}"
69+
aria-label="{{.}}"
70+
type="button"
71+
>
72+
<svg class="inline-block w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
73+
<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>
74+
</svg>
75+
</button>
76+
<div
77+
x-show="tooltip"
78+
x-transition:enter="transition ease-out duration-200"
79+
x-transition:enter-start="opacity-0 transform scale-95"
80+
x-transition:enter-end="opacity-100 transform scale-100"
81+
x-transition:leave="transition ease-in duration-150"
82+
x-transition:leave-start="opacity-100 transform scale-100"
83+
x-transition:leave-end="opacity-0 transform scale-95"
84+
@click.away="tooltip = false"
85+
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"
86+
x-cloak
87+
>
88+
{{.}}
89+
<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>
90+
</div>
91+
</span>
92+
{{- end -}}
93+
{{- end -}}
5394
{{ end }}
5495

5596
{{ if ne .Params.reading_time false }}

0 commit comments

Comments
 (0)