Merge pull request #191 from nunocoracao/177-new-list-view-cards

implemented card gallery for lists

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,14 +1901,14 @@ select {
   border-style: dotted;
 }
 
-.border-neutral-400 {
+.border-neutral-300 {
   --tw-border-opacity: 1;
-  border-color: rgba(var(--color-neutral-400), var(--tw-border-opacity));
+  border-color: rgba(var(--color-neutral-300), var(--tw-border-opacity));
 }
 
-.border-neutral-300 {
+.border-neutral-400 {
   --tw-border-opacity: 1;
-  border-color: rgba(var(--color-neutral-300), var(--tw-border-opacity));
+  border-color: rgba(var(--color-neutral-400), var(--tw-border-opacity));
 }
 
 .border-neutral-200 {
@@ -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%;
+  }
 }

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; 

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 = []

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();
+    })
+  );
+});

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"]

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" >}}
   </span>
   <span class="flex items-center justify-between grow dark:text-neutral-300">
-    <span class="prose dark:prose-invert">This is a demo of the <code id="layout">background</code> layout.</span>
+    <span class="prose dark:prose-invert">This is a demo of the <code id="layout">profile</code> layout.</span>
     <button
       id="switch-layout-button"
       class="px-4 !text-neutral !no-underline rounded-md bg-primary-600 hover:!bg-primary-500 dark:bg-primary-800 dark:hover:!bg-primary-700"

exampleSite/content/docs/configuration/index.md

@@ -146,6 +146,8 @@ Many of the article defaults here can be overridden on a per article basis by sp
 | `homepage.showRecentItems`      | 5                      | How many articles to display if showRecent is true. If variable is set to 0 or if it isn't defined the system will default to 5 articles.                                                                                                                                                                          |
 | `homepage.showMoreLink`         | 'false'                | Wether or not to display a show more link at the end of your posts that takes the user to a predefined place.                                                                                                                                                                                                      |
 | `homepage.showMoreLinkDest`     | '/posts'               | The destination of the show more button.                                                                                                                                                                                                                                                                           |
+| `homepage.cardView`             | `false`                | Display recent articles as a gallery of cards.                                                                                                                                                                                                                                                                     |
+| `homepage.cardViewScreenWidth`  | `false`                | Enhance the width of the recent articles card gallery to take the full width available.                                                                                                                                                                                                                            |
 | `article.showDate`              | `true`                 | Whether or not article dates are displayed.                                                                                                                                                                                                                                                                        |
 | `article.showViews`             | `false`                | Whether or not article views are displayed. This requires firebase integrations to be enabled, look below.                                                                                                                                                                                                         |
 | `article.showLikes`             | `false`                | Whether or not article likes are displayed. This requires firebase integrations to be enabled, look below.                                                                                                                                                                                                         |
@@ -174,6 +176,8 @@ Many of the article defaults here can be overridden on a per article basis by sp
 | `list.showSummary`              | `false`                | Whether or not article summaries are displayed on list pages. If a summary is not provided in the [front matter]({{< ref "front-matter" >}}), one will be auto generated using the `summaryLength` parameter in the [site configuration](#site-configuration).                                                     |
 | `list.showCards`                | `false`                | Whether or not each article is displayed as a card or as simple inline text.                                                                                                                                                                                                                                       |
 | `list.groupByYear`              | `true`                 | Whether or not articles are grouped by year on list pages.                                                                                                                                                                                                                                                         |
+| `list.cardView`                 | `false`                | Display lists as a gallery of cards.                                                                                                                                                                                                                                                                               |
+| `list.cardViewScreenWidth`      | `false`                | Enhance the width of card galleries in lists to take the full width available.                                                                                                                                                                                                                                     |
 | `sitemap.excludedKinds`         | `["taxonomy", "term"]` | Kinds of content that should be excluded from the generated `/sitemap.xml` file. Refer to the [Hugo docs](https://gohugo.io/templates/section-templates/#page-kinds) for acceptable values.                                                                                                                        |
 | `taxonomy.showTermCount`        | `true`                 | Whether or not the number of articles within a taxonomy term is displayed on the taxonomy listing.                                                                                                                                                                                                                 |
 | `firebase.apiKey`               | _Not set_              | Firebase apiKey, required to integrate against Firebase. Check [this page]({{< ref "firebase-views" >}}) for a guide on how to integrate Firebase into Blowfish                                                                                                                                                    |

exampleSite/content/docs/homepage-layout/index.md

@@ -82,4 +82,8 @@ The articles listed in this section are derived from the `mainSections` setting
 
 Blowfish was built so it would be easy to add visual support to your articles. If your familiar with Hugo article strucutre, you just need to place an image file (almost all formats are supported bue we recommend `.png` or `.jpg`) that starts with `feature*` inside your article folder. And that's it, Blowfish will then able to both use the image as a thumbnail within your website as well as for <a target="_blank" href="https://oembed.com/">oEmbed</a> cards across social platforms. 
 
-[Here]({{< ref "thumbnails" >}}) is a guide with more info and a [sample]({{< ref "thumbnail_sample" >}}) if you want to see an example.
+[Here]({{< ref "thumbnails" >}}) is a guide with more info and a [sample]({{< ref "thumbnail_sample" >}}) if you want to see an example.
+
+## Card Gallery
+
+Blowfish also supports displaying the standard lists of articles as card galleries. You can config this both for the recent section in the homepage and for lists of articles across your website. For homepage you can use `homepage.cardView` and `homepage.cardViewScreenWidth`; and for lists use `list.cardView` and `list.cardViewScreenWidth`. Check the [Configuration docs]({{< ref "configuration" >}}) for more details, and the homepage for a live demo.