Skip to content

Commit

Permalink
Merge pull request #21152 from dvdksn/guides-listing-updates
Browse files Browse the repository at this point in the history 
guides: update listing layout on landing page
  • Loading branch information
@dvdksn
dvdksn authored Oct 21, 2024
2 parents d2c3f01 + c026103 commit bfd1fd4
Show file tree
Hide file tree
Showing 3 changed files with 54 additions and 64 deletions.
23 changes: 10 additions & 13 deletions hugo_stats.json
View file
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
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
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

0 comments on commit bfd1fd4

Please sign in to comment.