Merge pull request #14 from apvarun/pagination

Pagination
apvarun · Jun 19, 2021 · 1e07be1 · 1e07be1
2 parents fb025be + 299bd9c
commit 1e07be1
Show file tree

Hide file tree

Showing 7 changed files with 132 additions and 41 deletions.
diff --git a/exampleSite/config.toml b/exampleSite/config.toml
@@ -14,6 +14,10 @@ pluralizelisttitles = false
   description = "Minimal, one page, theme for showcasing your work"
   message = ""
   hideAutoMenu = false
+
+  # Pagination options
+  paginate = 3
+  multipage = true
 
 [[menu.main]]
   name = "External"

diff --git a/layouts/_default/section.html b/layouts/_default/section.html
@@ -0,0 +1,19 @@
+{{ define "main" }}
+
+<section class="text-gray-700 body-font">
+  <div class="container px-5 py-8 mx-auto">
+    {{- partial "custom-message.html" . -}}
+
+
+    {{ .Scratch.Set "pages" .Paginator.Pages }}
+
+    {{ if eq .Site.Params.multipage true }}
+    {{- partial "pagination.html" . -}}
+    {{ else }}
+    {{- partial "no-pagination.html" . -}}
+    {{ end }}
+
+  </div>
+</section>
+
+{{ end }}
diff --git a/layouts/index.html b/layouts/index.html
@@ -3,44 +3,16 @@
 <section class="text-gray-700 body-font">
   <div class="container px-5 py-8 mx-auto">
     {{- partial "custom-message.html" . -}}
+
+    {{ .Scratch.Set "pages" .Site.Pages }}
+
+    {{ if eq .Site.Params.multipage true }}
+    {{- partial "pagination.html" . -}}
+    {{ else }}
+    {{- partial "no-pagination.html" . -}}
+    {{ end }}
 
-    <div class="flex flex-wrap sm:-m-4 -mx-4 -mb-10 -mt-4">
-      {{ range where .Site.Pages "Kind" "page" }}
-      {{ if ne .Params.Exclude true }}
-      <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 }}
-      {{ end }}
-    </div>
   </div>
 </section>
 
-{{ end }}
+{{ end }}
diff --git 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
@@ -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 }}

diff --git a/layouts/partials/no-pagination.html b/layouts/partials/no-pagination.html
@@ -0,0 +1,31 @@
+{{ $pagelist := $.Scratch.Get "pages" }}
+{{ if $pagelist }}
+<div>
+  {{ $pages := where $pagelist "Kind" "page" }}
+
+  <div class="flex flex-wrap sm:-m-4 -mx-4 -mb-10 -mt-4">
+    {{ range where $pages ".Params.exclude" "!=" "true" }}
+    <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>
+
+</div>
+{{ end }}
diff --git a/layouts/partials/pagination.html b/layouts/partials/pagination.html
@@ -0,0 +1,57 @@
+{{ $pagelist := $.Scratch.Get "pages" }}
+{{ if $pagelist }}
+<div>
+  {{ $pages := where $pagelist "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>
+{{ end }}