Skip to content

guides: update listing layout on landing page #21152

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Oct 21, 2024
Merged

guides: update listing layout on landing page #21152

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
23 changes: 10 additions & 13 deletions hugo_stats.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@
"tags": null,
"classes": [
"!mt-0",
"-",
"--mount",
"--tmpfs",
"-mb-3",
Expand All @@ -15,7 +14,6 @@
"-v",
"-z-10",
".NET",
"64px)]",
"Admin-Console",
"After",
"Angular",
Expand Down Expand Up @@ -78,7 +76,6 @@
"Mac",
"Mac-/-Linux",
"Mac-/-Linux-/-Git-Bash",
"Mac-/-Linux-/-PowerShell",
"Mac-/-Linux-/-Windows-Git-Bash",
"Mac-/-Linux-CLI",
"Mac-and-Linux",
Expand Down Expand Up @@ -172,8 +169,8 @@
"block",
"border",
"border-0",
"border-2",
"border-amber-light",
"border-b",
"border-b-4",
"border-blue-light",
"border-blue-light-500",
Expand Down Expand Up @@ -228,13 +225,11 @@
"dark:from-blue-dark-200",
"dark:from-blue-dark-400",
"dark:from-gray-dark-100",
"dark:group-hover:text-white",
"dark:hidden",
"dark:hover:bg-blue-dark",
"dark:hover:bg-blue-dark-500",
"dark:hover:bg-gray-dark-200",
"dark:hover:bg-gray-dark-500",
"dark:hover:border-blue-dark-500",
"dark:hover:text-blue-dark",
"dark:hover:text-white",
"dark:prose-invert",
Expand Down Expand Up @@ -271,6 +266,7 @@
"flex-col-reverse",
"flex-grow",
"flex-none",
"flex-shrink",
"flex-wrap",
"focus:ring-blue-light",
"font-medium",
Expand All @@ -296,7 +292,6 @@
"grid-cols-1",
"group",
"group-hover:block'",
"group-hover:text-black",
"group-hover:underline",
"h-16",
"h-2",
Expand All @@ -312,15 +307,15 @@
"hidden",
"hidden'",
"highlight",
"hover:-translate-y-1",
"hover:bg-blue-light-400",
"hover:bg-gray-light-100",
"hover:bg-gray-light-200",
"hover:bg-gray-light-300",
"hover:bg-white",
"hover:bg-white/20",
"hover:border-blue-light-400",
"hover:border-gray-light-200",
"hover:border-white/20",
"hover:dark:bg-gray-dark-200",
"hover:dark:bg-gray-dark-300",
"hover:dark:border-gray-dark",
"hover:dark:text-blue-dark",
Expand Down Expand Up @@ -358,7 +353,6 @@
"lg:pb-2",
"lg:scale-100",
"lg:text-base",
"line-clamp-5",
"link",
"lntable",
"lntd",
Expand All @@ -374,13 +368,15 @@
"max-w-full",
"max-w-none",
"max-w-xl",
"mb-2",
"mb-4",
"mb-8",
"md:block",
"md:flex-nowrap",
"md:flex-row",
"md:grid-cols-2",
"md:h-[334px]",
"md:h-[calc(100vh",
"md:h-[calc(100vh-64px)]",
"md:hidden",
"md:max-w-[66%]",
"md:scale-100",
Expand All @@ -400,6 +396,7 @@
"mt-1",
"mt-2",
"mt-20",
"mt-4",
"mx-auto",
"my-0",
"my-2",
Expand Down Expand Up @@ -519,13 +516,11 @@
"top-3",
"top-6",
"top-full",
"tracking-wider",
"transition",
"truncate",
"underline",
"underline-offset-2",
"underline-offset-8",
"uppercase",
"w-2",
"w-8",
"w-[1200px]",
Expand All @@ -534,8 +529,10 @@
"w-full",
"w-screen",
"whitespace-nowrap",
"xl:flex-row",
"xl:grid-cols-3",
"xl:grid-cols-4",
"xl:mb-0",
"xl:w-[1200px]",
"xl:w-[400px]",
"youtube-video",
Expand Down
2 changes: 1 addition & 1 deletion layouts/_default/baseof.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@
}
}
})"
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]"
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]"
:class="{ 'hidden': ! $store.showSidebar }">
<!-- Gray backdrop on small screens -->
<div class="fixed bg-black/50 md:hidden" x-show="$store.showSidebar" @click="openSidebar = false"
Expand Down
93 changes: 43 additions & 50 deletions layouts/guides/landing.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -65,8 +65,30 @@
{{- partial "breadcrumbs.html" . }}
<h1 data-pagefind-weight="10" class="scroll-mt-36">{{ .Title }}</h1>
{{ .Content }}
<h2>Featured</h2>
<div class="not-prose py-4 grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-8">
{{- $featured := where .Pages "Params.featured" true }}
{{- with $featured }}
{{- range . }}
<div class="flex flex-col h-full">
<a class="hover:underline" href="{{ .Permalink }}">
{{- $img := resources.Get (.Params.image | default "/images/thumbnail.webp") }}
{{- $img = $img.Process "resize 600x" }}
<img class="h-48 w-full object-cover rounded shadow" src="{{ $img.Permalink }}">
<p class="text-xl leading-snug my-4">{{ .Title }}</p>
</a>
<p class="flex-grow text-sm">{{ .Summary }}</p>
<div class="mt-4">
{{ template "guide-metadata" . }}
</div>
</div>
{{- end }}
{{- end }}
</div>
</ul>
<hr class="text-divider-light dark:text-divider-dark">
{{- $taxonomies := slice "products" "subjects" "levels" "languages" }}
<div class="not-prose"
<div class="not-prose min-h-screen"
x-data="{
filters: { {{ delimit (apply $taxonomies "fmt.Printf" "%s: []," "." ) "" }} },

Expand Down Expand Up @@ -103,67 +125,38 @@ <h1 data-pagefind-weight="10" class="scroll-mt-36">{{ .Title }}</h1>
}
}"
x-cloak
@guide-filter.window="filters = $event.detail.filters; window.scrollTo({ top: 0 });">
<div x-ref="container" class="pt-4 grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-6">
{{- $featured := where .Pages "Params.featured" true }}
{{- with $featured }}
{{- range . }}
{{- $opts := dict "page" . "taxonomies" $taxonomies }}
{{- $filters := partial "utils/filter-terms.html" $opts }}
<div x-show="showItem({{ jsonify $filters }});" class="flex flex-col h-full">
<div class="text-xs font-semibold text-gray-light dark:text-gray-dark tracking-wider uppercase">Featured</div>
<a class="hover:underline" href="{{ .Permalink }}">
{{- $img := resources.Get (.Params.image | default "/images/thumbnail.webp") }}
{{- $img = $img.Process "resize 600x" }}
<img class="h-48 w-full object-cover rounded shadow" src="{{ $img.Permalink }}">
<p class="text-xl leading-snug my-4">{{ .Title }}</p>
</a>
<p class="flex-grow text-sm">{{ .Summary }}</p>
<hr class="text-divider-light dark:text-divider-dark">
{{ template "guide-metadata" . }}
</div>
{{- end }}
{{- end }}
{{- range (collections.Complement $featured .Pages) }}
{{- $opts := dict "page" . "taxonomies" $taxonomies }}
{{- $filters := partial "utils/filter-terms.html" $opts }}
<a href="{{ .Permalink }}" x-show="showItem({{ jsonify $filters }});" x-transition
class="group flex flex-col justify-between p-4 rounded border-2
border-gray-light-100 bg-white dark:bg-gray-dark-200
dark:border-gray-dark-400 drop-shadow transition
hover:-translate-y-1 hover:border-blue-light-400
dark:hover:border-blue-dark-500">
<div>
<div class="text-lg mb-4 group-hover:underline">{{ .Title }}</div>
<div
class="text-sm line-clamp-5 group-hover:text-black dark:group-hover:text-white text-gray-light dark:text-gray-dark">
{{- .Summary }}
</div>
</div>
<div>
<hr class="text-divider-light dark:text-divider-dark">
{{ template "guide-metadata" . }}
</div>
</a>
{{- end }}
</div>
</ul>
@guide-filter.window="filters = $event.detail.filters; document.getElementById('all-guides').scrollIntoView({ behavior: 'smooth' })">
<h2 id="all-guides" class="scroll-mt-36">All guides</h2>
{{- range .Pages }}
{{- $opts := dict "page" . "taxonomies" $taxonomies }}
{{- $filters := partial "utils/filter-terms.html" $opts }}
<a href="{{ .Permalink }}" x-show="showItem({{ jsonify $filters }});" x-transition
class="group flex flex-col justify-between p-4 border-b
border-divider-light hover:bg-white
hover:dark:bg-gray-dark-200 dark:border-divider-dark
drop-shadow transition">
<div class="flex flex-col xl:flex-row justify-between">
<div class="text-lg group-hover:underline mb-2 xl:mb-0 truncate">{{ .Title }}</div>
{{ template "guide-metadata" . }}
</div>
</a>
{{- end }}
</article>
</div>
{{ end }}

{{- define "guide-metadata" }}
<div class="flex items-center text-sm justify-between text-gray-light dark:text-gray-dark">
<div class="flex flex-wrap gap-2">
<div class="flex gap-8 items-center text-sm justify-between text-gray-light dark:text-gray-dark">
<div class="flex flex-wrap md:flex-nowrap gap-2">
{{- $taxoterms := .GetTerms "languages" }}
{{- $taxoterms = $taxoterms | append (.GetTerms "levels") }}
{{- $taxoterms = $taxoterms | append (.GetTerms "subjects") }}
{{- range $taxoterms }}
<span class="rounded bg-gray-light-200 dark:bg-gray-dark-300 px-2">{{- .Page.LinkTitle }}</span>
<span class="rounded whitespace-nowrap bg-gray-light-200 dark:bg-gray-dark-300 px-2">{{- .Page.LinkTitle }}</span>
{{- end }}
</div>
{{- with .Params.time }}
<div class="flex whitespace-nowrap gap-2">
<div class="flex whitespace-nowrap flex-shrink gap-2">
<span class="icon-svg">{{ partialCached "icon" "schedule" "schedule" }}</span>
<span>{{ . }}</span>
</div>
Expand Down
Loading