From 49e0179832700c1feb506b8b1d4354ab7de8c2a7 Mon Sep 17 00:00:00 2001
From: jtbx <ccc@jtbx.de>
Date: Tue, 17 Oct 2023 22:52:36 +0200
Subject: [PATCH] Home: Add columns feature

---
 README.md                                     |  9 ++++
 themes/ccchh/assets/sass/main.scss            | 43 ++++++++++++++++++-
 themes/ccchh/layouts/index.html               | 24 +++++++++--
 .../ccchh/layouts/shortcodes/img-resize.html  |  8 +++-
 4 files changed, 77 insertions(+), 7 deletions(-)

diff --git a/README.md b/README.md
index 7ea9431..37240ee 100644
--- a/README.md
+++ b/README.md
@@ -72,3 +72,12 @@ You can use solid and brand icons from https://fontawesome.com/icons version 6 i
 {{< fa envelope >}}
 {{< fa brands gitlab >}}
 ```
+
+## Home One-Pager Architecture
+
+The Home page is a one-pager which combines multiple files from the `content/home` directory.
+Each sub-directory is creating a section of the home page and all content files in these directories must have `headless: true` in their front matter.
+
+If a directory only contains an `index.md`, it will be rendered as normal content.
+If there are additional markdown files, those will be rendered as a flexbox column layout.
+An image gallery can be added by providing a list of `resources` in the front matter.
diff --git a/themes/ccchh/assets/sass/main.scss b/themes/ccchh/assets/sass/main.scss
index cefd070..c6b1043 100644
--- a/themes/ccchh/assets/sass/main.scss
+++ b/themes/ccchh/assets/sass/main.scss
@@ -157,7 +157,7 @@ body>main {
   }
 }
 
-// Home Friends&Family Gallery
+// Home Friends&Family Gallery + Groups Gallery
 .flex-grid {
   display: flex;
   flex-wrap: wrap;
@@ -165,11 +165,47 @@ body>main {
 
   div {
     width: 250px;
+    padding-left: 14px; // var(--grid-spacing-horizontal)
+    padding-right: 14px; // var(--grid-spacing-horizontal)
+
+    img.groups-img {
+      display: block;
+      margin: 0 auto;
+      // (250px - 2*var(--grid-spacing-horizontal)) * 3/4
+      max-height: (222px * 3/4);
+    }
 
     // 2*250px + 2*var(--spacing) + 1px
     @media only screen and (max-width: 533px) {
       width: 150px;
+
+      img.groups-img {
+        // (150px - 2*var(--grid-spacing-horizontal)) * 3/4
+        max-height: (122px*3/4);
+      }
     }
+
+
+    &.wide {
+      width: 350px;
+
+      img.groups-img {
+        // (350px - 2*var(--grid-spacing-horizontal)) * 3/4
+        max-height: (322px*3/4);
+      }
+
+      // 2*350px + 2*var(--spacing) + 1px
+      @media only screen and (max-width: 733px) {
+        width: 250px;
+
+        img.groups-img {
+          // (250px - 2*var(--grid-spacing-horizontal)) * 3/4
+          max-height: (222px*3/4);
+        }
+      }
+    }
+
+
   }
 }
 
@@ -177,12 +213,15 @@ body>main {
   a {
     img {
       display: block;
-      padding: var(--grid-spacing-horizontal);
+      padding-top: 14px; // var(--grid-spacing-horizontal)
+      padding-bottom: 14px; // var(--grid-spacing-horizontal)
       margin: 0 auto;
     }
   }
 }
 
+
+
 // Blog Overview: Categories list
 div.nav-aside {
   ul {
diff --git a/themes/ccchh/layouts/index.html b/themes/ccchh/layouts/index.html
index 994d007..bef599c 100644
--- a/themes/ccchh/layouts/index.html
+++ b/themes/ccchh/layouts/index.html
@@ -24,16 +24,34 @@
     {{- end }}
 
     {{- $home := .Site.GetPage "/home" }}
-    {{- range sort ($home.Resources.ByType "page") "File.Path" "asc" }}
+    {{- $sections := where ($home.Resources.ByType "page") ".File.LogicalName" "index.md" }}
+    {{- range sort $sections "File.Path" "asc" }}
     <div class="section">
       <h2>{{ .Title }}</h2>
       {{ .Content -}}
 
-      {{- $sec := .CurrentSection }}
+      {{- $subsec_dir := strings.TrimLeft "home/" .File.Dir }}
+      {{- $subsec_glob := printf "%s*.md" (strings.TrimLeft "home/" .File.Dir) }}
+      {{- $subsecs := where ($home.Resources.Match $subsec_glob) ".File.LogicalName" "!=" "index.md" }}
+      {{- if $subsecs }}
+      <div class="flex-grid">
+      {{- range $subsecs }}
+        <div class="wide">
+          <h4>{{ .Title }}</h4>
+          {{- $img_path := printf "%s%s" $subsec_dir .Params.Image }}
+          {{- with $home.Resources.Get $img_path }}
+          <img class="groups-img" src="{{ .Permalink }}">
+          {{- end }}
+          {{ .Content }}
+        </div>
+      {{- end }}
+      </div>
+      {{- end }}
+
       {{- with .Params.Resources }}
       <div class="flex-grid">
         {{- range . }}
-        {{- $img := $sec.Resources.GetMatch (printf "*/%s" .src) }}
+        {{- $img := $home.Resources.GetMatch (printf "*/%s" .src) }}
         <div class="img-link"><a href="{{ .params.url }}"><img src="{{ $img.Permalink }}" class="box-image" alt=""></a></div>
         {{- end }}
       </div>
diff --git a/themes/ccchh/layouts/shortcodes/img-resize.html b/themes/ccchh/layouts/shortcodes/img-resize.html
index 0e733d0..b77beb2 100644
--- a/themes/ccchh/layouts/shortcodes/img-resize.html
+++ b/themes/ccchh/layouts/shortcodes/img-resize.html
@@ -6,9 +6,13 @@
 
 {{- $page := .Page }}
 {{- if not $isBundle }}
-  {{ $page_dir := path.Dir .Page.File }}
-  {{ $pagebundle_path := path.Join "/" $page_dir }}
+{{ $page_dir := path.Dir .Page.File }}
+{{ $pagebundle_path := path.Join "/" $page_dir }}
+{{ $page = .Site.GetPage $pagebundle_path }}
+{{- if not $page.IsPage }}
+  {{ $pagebundle_path := path.Join "/" .Page.Section }}
   {{ $page = .Site.GetPage $pagebundle_path }}
+  {{- end -}}
 {{- end -}}
 
 {{- with $page.Resources.Get $imagename }}