Skip to content

Commit c026103

Browse files
dvdksndvdksn
committed
guides: update listing layout on landing page
Signed-off-by: David Karlsson <[email protected]>
1 parent 9ef98ae commit c026103

File tree

3 files changed

+54
-64
lines changed

3 files changed

+54
-64
lines changed

‎hugo_stats.json‎

Lines changed: 10 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@
33
"tags": null,
44
"classes": [
55
"!mt-0",
6-
"-",
76
"--mount",
87
"--tmpfs",
98
"-mb-3",
@@ -15,7 +14,6 @@
1514
"-v",
1615
"-z-10",
1716
".NET",
18-
"64px)]",
1917
"Admin-Console",
2018
"After",
2119
"Angular",
@@ -78,7 +76,6 @@
7876
"Mac",
7977
"Mac-/-Linux",
8078
"Mac-/-Linux-/-Git-Bash",
81-
"Mac-/-Linux-/-PowerShell",
8279
"Mac-/-Linux-/-Windows-Git-Bash",
8380
"Mac-/-Linux-CLI",
8481
"Mac-and-Linux",
@@ -172,8 +169,8 @@
172169
"block",
173170
"border",
174171
"border-0",
175-
"border-2",
176172
"border-amber-light",
173+
"border-b",
177174
"border-b-4",
178175
"border-blue-light",
179176
"border-blue-light-500",
@@ -228,13 +225,11 @@
228225
"dark:from-blue-dark-200",
229226
"dark:from-blue-dark-400",
230227
"dark:from-gray-dark-100",
231-
"dark:group-hover:text-white",
232228
"dark:hidden",
233229
"dark:hover:bg-blue-dark",
234230
"dark:hover:bg-blue-dark-500",
235231
"dark:hover:bg-gray-dark-200",
236232
"dark:hover:bg-gray-dark-500",
237-
"dark:hover:border-blue-dark-500",
238233
"dark:hover:text-blue-dark",
239234
"dark:hover:text-white",
240235
"dark:prose-invert",
@@ -271,6 +266,7 @@
271266
"flex-col-reverse",
272267
"flex-grow",
273268
"flex-none",
269+
"flex-shrink",
274270
"flex-wrap",
275271
"focus:ring-blue-light",
276272
"font-medium",
@@ -296,7 +292,6 @@
296292
"grid-cols-1",
297293
"group",
298294
"group-hover:block'",
299-
"group-hover:text-black",
300295
"group-hover:underline",
301296
"h-16",
302297
"h-2",
@@ -312,15 +307,15 @@
312307
"hidden",
313308
"hidden'",
314309
"highlight",
315-
"hover:-translate-y-1",
316310
"hover:bg-blue-light-400",
317311
"hover:bg-gray-light-100",
318312
"hover:bg-gray-light-200",
319313
"hover:bg-gray-light-300",
314+
"hover:bg-white",
320315
"hover:bg-white/20",
321-
"hover:border-blue-light-400",
322316
"hover:border-gray-light-200",
323317
"hover:border-white/20",
318+
"hover:dark:bg-gray-dark-200",
324319
"hover:dark:bg-gray-dark-300",
325320
"hover:dark:border-gray-dark",
326321
"hover:dark:text-blue-dark",
@@ -358,7 +353,6 @@
358353
"lg:pb-2",
359354
"lg:scale-100",
360355
"lg:text-base",
361-
"line-clamp-5",
362356
"link",
363357
"lntable",
364358
"lntd",
@@ -374,13 +368,15 @@
374368
"max-w-full",
375369
"max-w-none",
376370
"max-w-xl",
371+
"mb-2",
377372
"mb-4",
378373
"mb-8",
379374
"md:block",
375+
"md:flex-nowrap",
380376
"md:flex-row",
381377
"md:grid-cols-2",
382378
"md:h-[334px]",
383-
"md:h-[calc(100vh",
379+
"md:h-[calc(100vh-64px)]",
384380
"md:hidden",
385381
"md:max-w-[66%]",
386382
"md:scale-100",
@@ -400,6 +396,7 @@
400396
"mt-1",
401397
"mt-2",
402398
"mt-20",
399+
"mt-4",
403400
"mx-auto",
404401
"my-0",
405402
"my-2",
@@ -519,13 +516,11 @@
519516
"top-3",
520517
"top-6",
521518
"top-full",
522-
"tracking-wider",
523519
"transition",
524520
"truncate",
525521
"underline",
526522
"underline-offset-2",
527523
"underline-offset-8",
528-
"uppercase",
529524
"w-2",
530525
"w-8",
531526
"w-[1200px]",
@@ -534,8 +529,10 @@
534529
"w-full",
535530
"w-screen",
536531
"whitespace-nowrap",
532+
"xl:flex-row",
537533
"xl:grid-cols-3",
538534
"xl:grid-cols-4",
535+
"xl:mb-0",
539536
"xl:w-[1200px]",
540537
"xl:w-[400px]",
541538
"youtube-video",

‎layouts/_default/baseof.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@
2626
}
2727
}
2828
})"
29-
class="md:h-[calc(100vh - 64px)] fixed md:sticky top-0 md:top-16 z-40 hidden h-screen flex-none overflow-y-auto overflow-x-hidden bg-background-light dark:bg-gray-dark-100 w-full md:z-auto md:block md:w-[300px]"
29+
class="md:h-[calc(100vh-64px)] fixed md:sticky top-0 md:top-16 z-40 hidden h-screen flex-none overflow-y-auto overflow-x-hidden bg-background-light dark:bg-gray-dark-100 w-full md:z-auto md:block md:w-[300px]"
3030
:class="{ 'hidden': ! $store.showSidebar }">
3131
<!-- Gray backdrop on small screens -->
3232
<div class="fixed bg-black/50 md:hidden" x-show="$store.showSidebar" @click="openSidebar = false"

‎layouts/guides/landing.html‎

Lines changed: 43 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -65,8 +65,30 @@
6565
{{- partial "breadcrumbs.html" . }}
6666
<h1 data-pagefind-weight="10" class="scroll-mt-36">{{ .Title }}</h1>
6767
{{ .Content }}
68+
<h2>Featured</h2>
69+
<div class="not-prose py-4 grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-8">
70+
{{- $featured := where .Pages "Params.featured" true }}
71+
{{- with $featured }}
72+
{{- range . }}
73+
<div class="flex flex-col h-full">
74+
<a class="hover:underline" href="{{ .Permalink }}">
75+
{{- $img := resources.Get (.Params.image | default "/images/thumbnail.webp") }}
76+
{{- $img = $img.Process "resize 600x" }}
77+
<img class="h-48 w-full object-cover rounded shadow" src="{{ $img.Permalink }}">
78+
<p class="text-xl leading-snug my-4">{{ .Title }}</p>
79+
</a>
80+
<p class="flex-grow text-sm">{{ .Summary }}</p>
81+
<div class="mt-4">
82+
{{ template "guide-metadata" . }}
83+
</div>
84+
</div>
85+
{{- end }}
86+
{{- end }}
87+
</div>
88+
</ul>
89+
<hr class="text-divider-light dark:text-divider-dark">
6890
{{- $taxonomies := slice "products" "subjects" "levels" "languages" }}
69-
<div class="not-prose"
91+
<div class="not-prose min-h-screen"
7092
x-data="{
7193
filters: { {{ delimit (apply $taxonomies "fmt.Printf" "%s: []," "." ) "" }} },
7294

@@ -103,67 +125,38 @@ <h1 data-pagefind-weight="10" class="scroll-mt-36">{{ .Title }}</h1>
103125
}
104126
}"
105127
x-cloak
106-
@guide-filter.window="filters = $event.detail.filters; window.scrollTo({ top: 0 });">
107-
<div x-ref="container" class="pt-4 grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-6">
108-
{{- $featured := where .Pages "Params.featured" true }}
109-
{{- with $featured }}
110-
{{- range . }}
111-
{{- $opts := dict "page" . "taxonomies" $taxonomies }}
112-
{{- $filters := partial "utils/filter-terms.html" $opts }}
113-
<div x-show="showItem({{ jsonify $filters }});" class="flex flex-col h-full">
114-
<div class="text-xs font-semibold text-gray-light dark:text-gray-dark tracking-wider uppercase">Featured</div>
115-
<a class="hover:underline" href="{{ .Permalink }}">
116-
{{- $img := resources.Get (.Params.image | default "/images/thumbnail.webp") }}
117-
{{- $img = $img.Process "resize 600x" }}
118-
<img class="h-48 w-full object-cover rounded shadow" src="{{ $img.Permalink }}">
119-
<p class="text-xl leading-snug my-4">{{ .Title }}</p>
120-
</a>
121-
<p class="flex-grow text-sm">{{ .Summary }}</p>
122-
<hr class="text-divider-light dark:text-divider-dark">
123-
{{ template "guide-metadata" . }}
124-
</div>
125-
{{- end }}
126-
{{- end }}
127-
{{- range (collections.Complement $featured .Pages) }}
128-
{{- $opts := dict "page" . "taxonomies" $taxonomies }}
129-
{{- $filters := partial "utils/filter-terms.html" $opts }}
130-
<a href="{{ .Permalink }}" x-show="showItem({{ jsonify $filters }});" x-transition
131-
class="group flex flex-col justify-between p-4 rounded border-2
132-
border-gray-light-100 bg-white dark:bg-gray-dark-200
133-
dark:border-gray-dark-400 drop-shadow transition
134-
hover:-translate-y-1 hover:border-blue-light-400
135-
dark:hover:border-blue-dark-500">
136-
<div>
137-
<div class="text-lg mb-4 group-hover:underline">{{ .Title }}</div>
138-
<div
139-
class="text-sm line-clamp-5 group-hover:text-black dark:group-hover:text-white text-gray-light dark:text-gray-dark">
140-
{{- .Summary }}
141-
</div>
142-
</div>
143-
<div>
144-
<hr class="text-divider-light dark:text-divider-dark">
145-
{{ template "guide-metadata" . }}
146-
</div>
147-
</a>
148-
{{- end }}
149-
</div>
150-
</ul>
128+
@guide-filter.window="filters = $event.detail.filters; document.getElementById('all-guides').scrollIntoView({ behavior: 'smooth' })">
129+
<h2 id="all-guides" class="scroll-mt-36">All guides</h2>
130+
{{- range .Pages }}
131+
{{- $opts := dict "page" . "taxonomies" $taxonomies }}
132+
{{- $filters := partial "utils/filter-terms.html" $opts }}
133+
<a href="{{ .Permalink }}" x-show="showItem({{ jsonify $filters }});" x-transition
134+
class="group flex flex-col justify-between p-4 border-b
135+
border-divider-light hover:bg-white
136+
hover:dark:bg-gray-dark-200 dark:border-divider-dark
137+
drop-shadow transition">
138+
<div class="flex flex-col xl:flex-row justify-between">
139+
<div class="text-lg group-hover:underline mb-2 xl:mb-0 truncate">{{ .Title }}</div>
140+
{{ template "guide-metadata" . }}
141+
</div>
142+
</a>
143+
{{- end }}
151144
</article>
152145
</div>
153146
{{ end }}
154147

155148
{{- define "guide-metadata" }}
156-
<div class="flex items-center text-sm justify-between text-gray-light dark:text-gray-dark">
157-
<div class="flex flex-wrap gap-2">
149+
<div class="flex gap-8 items-center text-sm justify-between text-gray-light dark:text-gray-dark">
150+
<div class="flex flex-wrap md:flex-nowrap gap-2">
158151
{{- $taxoterms := .GetTerms "languages" }}
159152
{{- $taxoterms = $taxoterms | append (.GetTerms "levels") }}
160153
{{- $taxoterms = $taxoterms | append (.GetTerms "subjects") }}
161154
{{- range $taxoterms }}
162-
<span class="rounded bg-gray-light-200 dark:bg-gray-dark-300 px-2">{{- .Page.LinkTitle }}</span>
155+
<span class="rounded whitespace-nowrap bg-gray-light-200 dark:bg-gray-dark-300 px-2">{{- .Page.LinkTitle }}</span>
163156
{{- end }}
164157
</div>
165158
{{- with .Params.time }}
166-
<div class="flex whitespace-nowrap gap-2">
159+
<div class="flex whitespace-nowrap flex-shrink gap-2">
167160
<span class="icon-svg">{{ partialCached "icon" "schedule" "schedule" }}</span>
168161
<span>{{ . }}</span>
169162
</div>

0 commit comments

Comments
 (0)