Multipage sections

3 files changed, 84 insertions, 4 deletions

diff --git a/layouts/_default/section.html b/layouts/_default/section.html
new file mode 100644
index 0000000..8a5f090
--- /dev/null
+++ b/layouts/_default/section.html
@@ -0,0 +1,72 @@
+{{ define "main" }}
+
+<section class="text-gray-700 body-font">
+  <div class="container px-5 py-8 mx-auto">
+    {{- partial "custom-message.html" . -}}
+
+    <div>
+      {{ $pages  := where .Paginator.Pages "Kind" "page" }}
+
+      {{ $paginator := .Paginate (where $pages ".Params.exclude" "!=" "true") .Site.Params.paginate }}
+      <div class="flex flex-wrap sm:-m-4 -mx-4 -mb-10 -mt-4">
+        {{ range $paginator.Pages }}
+        <a
+          target="_blank"
+          rel="noopener"
+          href="{{ .Params.Link }}"
+          class="card p-4 md:w-1/3 sm:mb-4 mb-6 hover:shadow-xl hover:bg-gray-400 transition duration-200 ease-in rounded-lg {{ lower .Section }}"
+        >
+          <div class="rounded-lg h-64 overflow-hidden relative">
+            {{ if (or .Params.Image .CurrentSection.Params.Image) }}
+            <img
+              alt="{{ .Title }}"
+              class="object-cover object-center h-full w-full"
+              src="{{ (or .Params.Image .CurrentSection.Params.Image) }}"
+            />
+            {{ end }}
+            <span
+              class="bg-blue-500 text-white px-3 py-1 tracking-widest text-xs absolute right-0 top-0 rounded-bl"
+              >{{ title .Section }}</span
+            >
+            <h2
+              class="text-white px-2 py-1 tracking-widest text-2xl leading-tight font-extrabold font-bree text-center w-full h-full flex justify-center items-center absolute top-0 left-0"
+            >
+              {{ .Title }}
+            </h2>
+            <p
+              class="text-white px-2 py-1 tracking-widest text-md leading-tight font-light w-full text-center absolute bottom-0 left-0"
+            >
+              {{ .Params.Subtitle }}
+            </p>
+          </div>
+        </a>
+        {{ end }}
+      </div>
+
+
+      {{ if gt $paginator.TotalPages 1 }}
+      <nav aria-label="Page navigation">
+        <ul class="flex gap-2 justify-center mt-2">
+          {{ if $paginator.HasPrev }}
+          <li class="cursor-pointer rounded hover:bg-blue-400 hover:text-white"><a class="px-3 py-1" href="{{ $paginator.Prev.URL }}" rel="prev" class="page-link">&laquo; Prev</a></li>
+          {{ end }}
+          {{ range $paginator.Pagers }}
+          {{ if eq . $paginator }}
+          <li class="cursor-pointer rounded bg-blue-500 text-white"><a class="px-3 py-1" href="{{ .URL }}" class="page-link">{{ .PageNumber }}</a></li>
+          {{ else }}
+          <li class="cursor-pointer rounded hover:bg-blue-400 hover:text-white"><a class="px-3 py-1" href="{{ .URL }}" class="page-link">{{ .PageNumber }}</a></li>
+          {{ end }}
+          {{ end }}
+
+          {{ if $paginator.HasNext }}
+          <li class="cursor-pointer rounded hover:bg-blue-400 hover:text-white"><a class="px-3 py-1" href="{{ $paginator.Next.URL }}" rel="next" class="page-link">Next &raquo;</a></li>
+          {{ end }}
+        </ul>
+      </nav>
+      {{ end }}
+    </div>
+
+  </div>
+</section>
+
+{{ end }}
diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html
index 6d8475a..39d8c7f 100644
--- a/layouts/partials/footer.html
+++ b/layouts/partials/footer.html
@@ -84,6 +84,12 @@
 <script>
   const allTypes = ["all",  {{ range .Site.Sections }}"{{lower .Title}}",{{ end }}];
   const filter = (event, type) => {
+    const isMultiPage = !!document.querySelector('nav.multipage');
+
+    if (isMultiPage) {
+      return;
+    }
+
     const isActive = event.target.classList.contains("active");
 
     showAll();
@@ -92,7 +98,7 @@
       event.target.classList.add("active");
       if (type !== "other") {
         document
-          .querySelectorAll(`.${type}`)
+          .querySelectorAll(`nav:not(.multipage) .${type}`)
           .forEach((item) => item.classList.remove("hide"));
       } else {
         document
@@ -107,10 +113,10 @@
   const showAll = () => {
     allTypes.forEach((type) => {
       document
-        .querySelectorAll(`.${type}`)
+        .querySelectorAll(`nav:not(.multipage) .${type}`)
         .forEach((item) => item.classList.remove("hide"));
       document
-        .querySelectorAll(`.filter-${type}`)
+        .querySelectorAll(`nav:not(.multipage) .filter-${type}`)
         .forEach((filterItem) => filterItem.classList.remove("active"));
     });
   };
diff --git a/layouts/partials/header.html b/layouts/partials/header.html
index ed022a9..52072e8 100644
--- a/layouts/partials/header.html
+++ b/layouts/partials/header.html
@@ -9,16 +9,18 @@
     {{- partial "logo.html" . -}}
     </a>
     <nav
-      class="md:ml-auto flex flex-wrap items-center text-base justify-center"
+      class="md:ml-auto flex flex-wrap items-center text-base justify-center {{ if .Site.Params.multipage }} multipage {{ end }}"
     >
       {{ if and (eq .Site.Params.hideAutoMenu false) (eq $.IsNode true ) }}
       <a
         class="mr-2 px-2 rounded cursor-pointer select-none hover:text-gray-900 show-all"
+        href="{{ if .Site.Params.multipage }}/{{ else }}#{{ end }}"
         >All</a
       >
       {{ range where .Site.Sections ".Params.private" "!=" true }}
       <a
         class="mr-2 px-2 rounded cursor-pointer select-none hover:text-gray-900 filter-{{lower .Title}}"
+        href="{{ if .Site.Params.multipage }}{{ .Permalink }}{{ else }}#{{ end }}"
         >{{.Title}}</a
       >
       {{ end }}