From f2d3ff157287a3c9be955af4ff05de27ab966557 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nuno=20Cora=C3=A7=C3=A3o?= Date: Sat, 5 Nov 2022 15:11:20 +0000 Subject: [PATCH] implemented card gallery for lists --- assets/css/compiled/main.css | 98 +++++++++---- assets/css/main.css | 7 + config/_default/params.toml | 4 + exampleSite/assets/js/home.js | 51 ++++++- exampleSite/config/_default/params.toml | 11 +- exampleSite/content/.Ulysses-Settings.plist | 14 -- exampleSite/content/_index.md | 2 +- .../content/docs/configuration/index.md | 4 + .../content/docs/homepage-layout/index.md | 6 +- exampleSite/content/samples/_index.md | 2 +- exampleSite/layouts/partials/home/custom.html | 13 +- .../partials/recent-articles-demo.html | 64 +++++++++ layouts/_default/list.html | 130 +++++++++++++----- layouts/partials/article-link-card.html | 64 +++++++++ layouts/partials/article-link.html | 4 +- layouts/partials/recent-articles.html | 63 ++++++--- 16 files changed, 430 insertions(+), 107 deletions(-) delete mode 100644 exampleSite/content/.Ulysses-Settings.plist create mode 100644 exampleSite/layouts/partials/recent-articles-demo.html create mode 100644 layouts/partials/article-link-card.html diff --git a/assets/css/compiled/main.css b/assets/css/compiled/main.css index 2dc412e1..704b7337 100644 --- a/assets/css/compiled/main.css +++ b/assets/css/compiled/main.css @@ -1413,14 +1413,18 @@ select { top: calc(100vh - 5.5rem); } -.top-20 { - top: 5rem; -} - .top-0 { top: 0px; } +.right-0 { + right: 0px; +} + +.top-20 { + top: 5rem; +} + .z-50 { z-index: 50; } @@ -1441,6 +1445,10 @@ select { margin: auto; } +.m-2 { + margin: 0.5rem; +} + .m-1 { margin: 0.25rem; } @@ -1499,6 +1507,10 @@ select { margin-top: 3rem; } +.mb-5 { + margin-bottom: 1.25rem; +} + .mt-10 { margin-top: 2.5rem; } @@ -1575,10 +1587,6 @@ select { margin-top: 0.5rem; } -.mb-5 { - margin-bottom: 1.25rem; -} - .\!mb-9 { margin-bottom: 2.25rem !important; } @@ -1671,6 +1679,10 @@ select { width: 3rem; } +.w-screen { + width: 100vw; +} + .w-full { width: 100%; } @@ -1683,10 +1695,6 @@ select { width: 6rem; } -.w-screen { - width: 100vw; -} - .w-8 { width: 2rem; } @@ -1699,6 +1707,10 @@ select { min-width: 0px; } +.min-w-full { + min-width: 100%; +} + .min-w-\[1\.8rem\] { min-width: 1.8rem; } @@ -1844,14 +1856,14 @@ select { border-radius: 9999px; } -.rounded-md { - border-radius: 0.375rem; -} - .rounded { border-radius: 0.25rem; } +.rounded-md { + border-radius: 0.375rem; +} + .rounded-lg { border-radius: 0.5rem; } @@ -1889,16 +1901,16 @@ select { border-style: dotted; } -.border-neutral-400 { - --tw-border-opacity: 1; - border-color: rgba(var(--color-neutral-400), var(--tw-border-opacity)); -} - .border-neutral-300 { --tw-border-opacity: 1; border-color: rgba(var(--color-neutral-300), var(--tw-border-opacity)); } +.border-neutral-400 { + --tw-border-opacity: 1; + border-color: rgba(var(--color-neutral-400), var(--tw-border-opacity)); +} + .border-neutral-200 { --tw-border-opacity: 1; border-color: rgba(var(--color-neutral-200), var(--tw-border-opacity)); @@ -2055,6 +2067,11 @@ select { padding-right: 0.5rem; } +.py-4 { + padding-top: 1rem; + padding-bottom: 1rem; +} + .px-1 { padding-left: 0.25rem; padding-right: 0.25rem; @@ -2095,6 +2112,14 @@ select { padding-bottom: 4rem; } +.pl-8 { + padding-left: 2rem; +} + +.pr-8 { + padding-right: 2rem; +} + .pt-8 { padding-top: 2rem; } @@ -2103,6 +2128,14 @@ select { padding-top: 0.75rem; } +.pt-4 { + padding-top: 1rem; +} + +.pb-2 { + padding-bottom: 0.5rem; +} + .pl-2 { padding-left: 0.5rem; } @@ -2111,10 +2144,6 @@ select { padding-bottom: 1rem; } -.pt-4 { - padding-top: 1rem; -} - .pt-16 { padding-top: 4rem; } @@ -2311,6 +2340,12 @@ select { mix-blend-mode: multiply; } +.shadow-2xl { + --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25); + --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); +} + .shadow-lg { --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color); @@ -3015,6 +3050,13 @@ body:has(#menu-controller:checked) { background-position:center; } +.thumbnail_card { + height: 300px; + background-repeat:no-repeat; + background-size:cover; + background-position:center; +} + .single_hero_basic { background-repeat:no-repeat; background-size:cover; @@ -3771,4 +3813,10 @@ body:has(#menu-controller:checked) { .xl\:w-1\/4 { width: 25%; } +} + +@media (min-width: 1536px) { + .\32xl\:w-1\/5 { + width: 20%; + } } \ No newline at end of file diff --git a/assets/css/main.css b/assets/css/main.css index fb16a5f2..9fe984ca 100644 --- a/assets/css/main.css +++ b/assets/css/main.css @@ -347,6 +347,13 @@ body:has(#menu-controller:checked) { background-position:center; } +.thumbnail_card { + height: 300px; + background-repeat:no-repeat; + background-size:cover; + background-position:center; +} + .single_hero_basic { background-repeat:no-repeat; background-size:cover; diff --git a/config/_default/params.toml b/config/_default/params.toml index 5c5b4f87..967dbdac 100644 --- a/config/_default/params.toml +++ b/config/_default/params.toml @@ -29,6 +29,8 @@ enableCodeCopy = true showRecentItems = 5 showMoreLink = false showMoreLinkDest = "/posts" + cardView = false + cardViewScreenWidth = false [article] showDate = true @@ -61,6 +63,8 @@ enableCodeCopy = true showTableOfContents = false showCards = false groupByYear = true + cardView = false + cardViewScreenWidth = false [sitemap] excludedKinds = [] diff --git a/exampleSite/assets/js/home.js b/exampleSite/assets/js/home.js index 509b2965..7e3918be 100644 --- a/exampleSite/assets/js/home.js +++ b/exampleSite/assets/js/home.js @@ -1,9 +1,9 @@ var layouts = [ + "profile", "background", "hero", - "profile", - "card", - "page" + "page", + "card" ] var currentLayout = 0 @@ -33,3 +33,48 @@ window.addEventListener("DOMContentLoaded", (event) => { }) ); }); + +var list_config = [ + "CardViewProse", + "CardViewScreenWidth", + "NormalView" +] + +var titles = { + "CardViewProse" : "card view with constrained width", + "CardViewScreenWidth" : "card view with full width", + "NormalView" : "standard list view" +} + +var currentConfig = 0 + +function switchList() { + + var old = currentConfig + currentConfig = currentConfig == list_config.length - 1 ? 0 : currentConfig + 1 + + var oldDiv = document.getElementById(list_config[old]) + var currentDiv = document.getElementById(list_config[currentConfig]) + const configCode = document.querySelectorAll("code[id=config]"); + + console.log(currentConfig) + console.log(oldDiv) + console.log(currentDiv) + + currentDiv.style.display = "block"; + oldDiv.style.display = "none"; + + configCode.forEach(function (el) { + el.innerText = titles[list_config[currentConfig]]; + }); + +} + +window.addEventListener("DOMContentLoaded", (event) => { + document.querySelectorAll("#switch-config-button").forEach((button) => + button.addEventListener("click", function (e) { + e.preventDefault(); + switchList(); + }) + ); +}); diff --git a/exampleSite/config/_default/params.toml b/exampleSite/config/_default/params.toml index da1577b0..5c51c970 100644 --- a/exampleSite/config/_default/params.toml +++ b/exampleSite/config/_default/params.toml @@ -25,10 +25,13 @@ mainSections = ["docs"] [homepage] layout = "custom" # valid options: page, profile, hero, card, background, custom homepageImage = "/img/iceland.jpg" # used in: hero, and card - showRecent = true - showRecentItems = 5 + showRecent = false + showRecentItems = 10 showMoreLink = true showMoreLinkDest = "docs" + cardView = true + cardViewScreenWidth = false + [article] showDate = false @@ -57,10 +60,12 @@ mainSections = ["docs"] [list] showBreadcrumbs = false - showSummary = true + showSummary = false showTableOfContents = true showCards = true groupByYear = false + cardView = true + cardViewScreenWidth = false [sitemap] excludedKinds = ["taxonomy","term"] diff --git a/exampleSite/content/.Ulysses-Settings.plist b/exampleSite/content/.Ulysses-Settings.plist deleted file mode 100644 index fe51321e..00000000 --- a/exampleSite/content/.Ulysses-Settings.plist +++ /dev/null @@ -1,14 +0,0 @@ - - - - - defaultPathExtensions - md - enforceFencedCodeBlocks - - sheetFormat - foreign - useInlineLinks - - - diff --git a/exampleSite/content/_index.md b/exampleSite/content/_index.md index 46fc8aea..704d3ec1 100755 --- a/exampleSite/content/_index.md +++ b/exampleSite/content/_index.md @@ -10,7 +10,7 @@ This is a demo site built entirely using Blowfish. It also contains a complete s {{< icon "triangle-exclamation" >}} - This is a demo of the background layout. + This is a demo of the profile layout. + + + +
+
+
+ {{ range first $recentArticles (.Paginate (where .Site.RegularPages "Type" "in" + .Site.Params.mainSections)).Pages }} +
+ {{ partial "article-link-card.html" . }} +
+ {{ end }} +
+
+
+ + + +{{ if .Site.Params.homepage.showMoreLink | default false }} +{{ if index .Site.Params.homepage "showRecentItems" }} +{{ $showMoreLinkDest = .Site.Params.homepage.showMoreLinkDest }} +{{ end }} +
+ + + +
+{{ end }} \ No newline at end of file diff --git a/layouts/_default/list.html b/layouts/_default/list.html index 4462abef..ab916162 100644 --- a/layouts/_default/list.html +++ b/layouts/_default/list.html @@ -1,49 +1,111 @@ {{ define "main" }} - {{ $toc := and (.Params.showTableOfContents | default (.Site.Params.list.showTableOfContents | default false)) (in .TableOfContents " - {{ if .Params.showBreadcrumbs | default (.Site.Params.list.showBreadcrumbs | default false) }} - {{ partial "breadcrumbs.html" . }} - {{ end }} -

{{ .Title }}

+{{ $toc := and (.Params.showTableOfContents | default (.Site.Params.list.showTableOfContents | default false)) (in +.TableOfContents " + {{ if .Params.showBreadcrumbs | default (.Site.Params.list.showBreadcrumbs | default false) }} + {{ partial "breadcrumbs.html" . }} + {{ end }} +

{{ .Title }}

-
+ {{- end }} prose flex max-w-full flex-col dark:prose-invert lg:flex-row"> {{ if $toc }} -
-
- {{ partial "toc.html" . }} -
+
+
+ {{ partial "toc.html" . }}
+
{{ end }}
{{ .Content | emojify }}
{{ if gt .Pages 0 }} -
- {{ range (.Paginate (.Pages.GroupByDate "2006")).PageGroups }} - {{ if $.Params.groupByYear | default ($.Site.Params.list.groupByYear | default true) }} -

+ + {{ if .Site.Params.list.cardView | default false }} + + {{ $cardViewScreenWidth := .Site.Params.list.cardViewScreenWidth}} + + {{ if not $.Params.groupByYear | default ($.Site.Params.list.groupByYear | default true) }} + + {{ if $cardViewScreenWidth }} +
+
+ {{ else }} +
+
+ {{ end }} + + {{ end }} + + + + {{ range (.Paginate (.Pages.GroupByDate "2006")).PageGroups }} + {{ if $.Params.groupByYear | default ($.Site.Params.list.groupByYear | default true) }} +

{{ .Key }}

-
- {{ end }} - {{ range .Pages }} - {{ partial "article-link.html" . }} - {{ end }} - {{ end }} -
- {{ partial "pagination.html" . }} - {{ else }} -
-

- {{ i18n "list.no_articles" | emojify }} -

-
- {{ end }} -{{ end }} + {{ else }} + {{ end }} + + {{ if $.Params.groupByYear | default ($.Site.Params.list.groupByYear | default true) }} + + {{ if $cardViewScreenWidth}} +
+
+ {{ else }} +
+
+ {{ end }} + {{ end }} + + {{ range .Pages }} + + {{ if $cardViewScreenWidth }} +
+ {{ else }} +
+ {{ end }} + + {{ partial "article-link-card.html" . }} +
+ {{ end }} + {{ if $.Params.groupByYear | default ($.Site.Params.list.groupByYear | default true) }} +
+
+ {{ end }} + + + {{ end }} + + {{ if not $.Params.groupByYear | default ($.Site.Params.list.groupByYear | default true) }} +
+
+ {{ end }} + + {{ else }} +
+ {{ range (.Paginate (.Pages.GroupByDate "2006")).PageGroups }} + {{ if $.Params.groupByYear | default ($.Site.Params.list.groupByYear | default true) }} +

+ {{ .Key }} +

+ {{ end }} + {{ range .Pages }} + {{ partial "article-link.html" . }} + {{ end }} + {{ end }} +
+ {{ partial "pagination.html" . }} + {{ end }} + + {{ else }} +
+

+ {{ i18n "list.no_articles" | emojify }} +

+
+ {{ end }} + {{ end }} \ No newline at end of file diff --git a/layouts/partials/article-link-card.html b/layouts/partials/article-link-card.html new file mode 100644 index 00000000..4f26f1cb --- /dev/null +++ b/layouts/partials/article-link-card.html @@ -0,0 +1,64 @@ +{{ with .Params.externalUrl }} + + {{ else }} + + {{ end }} +
+ + {{- with $.Params.images -}} + {{- range first 6 . }} + {{ end -}} + {{- else -}} + {{- $images := $.Resources.ByType "image" -}} + {{- $featured := $images.GetMatch "*feature*" -}} + {{- if not $featured }}{{ $featured = $images.GetMatch "{*cover*,*thumbnail*}" }}{{ end -}} + {{- with $featured -}} + {{ with .Resize "600x" }} +
+ {{ end }} + {{- else -}} + {{- with $.Site.Params.images }} + {{ end -}} + {{- end -}} + {{- end -}} + + + {{ if and .Draft .Site.Params.article.showDraftLabel }} + + {{ partial "badge.html" (i18n "article.draft" | emojify) }} + + {{ end }} + +
+ + {{ with .Params.externalUrl }} +
+
+ {{ $.Title | emojify }} + + ↗ + ↖ + +
+
+ {{ else }} +
{{ .Title | emojify }}
+ {{ end }} + +
+ {{ partial "article-meta.html" . }} +
+ + {{ if .Params.showSummary | default (.Site.Params.list.showSummary | default false) }} +
+ {{ .Summary | emojify }} +
+ {{ end }} +
+
+ +
+
+ \ No newline at end of file diff --git a/layouts/partials/article-link.html b/layouts/partials/article-link.html index 06dfb4e3..a429e8af 100644 --- a/layouts/partials/article-link.html +++ b/layouts/partials/article-link.html @@ -45,7 +45,7 @@ {{ with .Params.externalUrl }}
+ class="font-bold text-xl text-neutral-800 decoration-primary-500 hover:underline hover:underline-offset-2 dark:text-neutral"> {{ $.Title | emojify }} ↗ @@ -54,7 +54,7 @@
{{ else }} -
{{ .Title | emojify }}
{{ end }} {{ if and .Draft .Site.Params.article.showDraftLabel }} diff --git a/layouts/partials/recent-articles.html b/layouts/partials/recent-articles.html index bd5fac0b..a80fc690 100644 --- a/layouts/partials/recent-articles.html +++ b/layouts/partials/recent-articles.html @@ -5,21 +5,48 @@ {{ $recentArticles = .Site.Params.homepage.showRecentItems }} {{ end }}

{{ i18n "shortcode.recent_articles" | emojify }}

-
- {{ range first $recentArticles (.Paginate (where .Site.RegularPages "Type" "in" .Site.Params.mainSections)).Pages }} - {{ partial "article-link.html" . }} - {{ end }} -
-{{ if .Site.Params.homepage.showMoreLink | default false }} -{{ if index .Site.Params.homepage "showRecentItems" }} -{{ $showMoreLinkDest = .Site.Params.homepage.showMoreLinkDest }} -{{ end }} -
- - - -
-{{ end }} -{{ end }} \ No newline at end of file + +{{ if .Site.Params.homepage.cardView | default false }} +{{ if .Site.Params.homepage.cardViewScreenWidth | default false }} +
+
+ {{ else }} +
+
+ {{ end }} + + {{ range first $recentArticles (.Paginate (where .Site.RegularPages "Type" "in" + .Site.Params.mainSections)).Pages }} + + {{ if .Site.Params.homepage.cardViewScreenWidth | default false }} +
+ {{ else }} +
+ {{ end }} + + {{ partial "article-link-card.html" . }} +
+ {{ end }} +
+
+ {{ else }} +
+ {{ range first $recentArticles (.Paginate (where .Site.RegularPages "Type" "in" .Site.Params.mainSections)).Pages + }} + {{ partial "article-link.html" . }} + {{ end }} +
+ {{ end }} + {{ if .Site.Params.homepage.showMoreLink | default false }} + {{ if index .Site.Params.homepage "showRecentItems" }} + {{ $showMoreLinkDest = .Site.Params.homepage.showMoreLinkDest }} + {{ end }} +
+ + + +
+ {{ end }} + {{ end }} \ No newline at end of file