- add /stage/ pages creation

- fix `/category/ page creation, sort by fields_category - fix `/tag` group by published posts only
juxtdesigncc · Feb 21, 2022 · 7fff028 · 7fff028
1 parent 4d8537f
commit 7fff028
Show file tree

Hide file tree

Showing 8 changed files with 151 additions and 14 deletions.
diff --git a/gatsby-config.js b/gatsby-config.js
@@ -14,6 +14,7 @@ module.exports = {
   },
   plugins: [
     "gatsby-plugin-react-helmet",
+    "gatsby-plugin-sitemap",
     "gatsby-plugin-postcss",
     {
       resolve: `gatsby-plugin-google-gtag`,

diff --git a/gatsby/create-pages.js b/gatsby/create-pages.js
@@ -4,6 +4,7 @@ const _ = require("lodash");
 const createCategoriesPages = require("./pagination/create-categories-pages.js");
 const createTagsPages = require("./pagination/create-tags-pages.js");
 const createPostsPages = require("./pagination/create-posts-pages.js");
+const createStagePages = require("./pagination/create-stage-pages.js");
 
 const query = `
   {
@@ -81,6 +82,7 @@ const createPages = async ({ graphql, actions }) => {
 
   await createTagsPages(graphql, actions);
   // await createPostsPages(graphql, actions);
+  await createStagePages(graphql, actions);
   await createCategoriesPages(graphql, actions);
 };
 

diff --git a/gatsby/on-create-node.js b/gatsby/on-create-node.js
@@ -75,34 +75,49 @@ const onCreateNode = ({ node, actions, getNode }) => {
       });
     }
 
-    // console.log(processedFrontmatterDate, processedFileDate);
-
     if (node.frontmatter.tags) {
       const tagSlugs = node.frontmatter.tags.map(
         (tag) => `/tag/${kebabCase(tag)}/`
       );
       createNodeField({ node, name: "tagSlugs", value: tagSlugs });
     }
 
-    // ## Create a compulsory field called "Stage"
-    let stages = ["seedling", "budding", "evergreen"];
+    // create a compulsory field called "stage"
+    let stages = ["seedling", "budding", "evergreen"]; // defined list of stages
+    let defaultStage = "seedling";
 
+    // create node field if frontmatter's stage matches with the list
     if (stages.includes(node.frontmatter.stage)) {
       createNodeField({
         node,
         name: "stage",
         value: node.frontmatter.stage,
       });
+    } else if (!node.frontmatter.stage) {
+      // apply default stage if frontmatter stage is null
+      createNodeField({
+        node,
+        name: "stage",
+        value: defaultStage,
+      });
     } else if (!stages.includes(node.frontmatter.stage)) {
-      console.error(`No stage match for ${node.fields.title}`);
+      // Warning if frontmatter stage not match with defined list, apply default stage
+      console.warn(
+        `Stage unmatch for ${node.fields.title}, please edit the respective files soonm, applied default stage`
+      );
       createNodeField({
         node,
         name: "stage",
-        value: `seedling`,
+        value: defaultStage,
       });
     }
 
-    // ## Set a default category to "notes" unless provided
+    let defaultCategory = {
+      name: "notes",
+      slug: "/category/notes/",
+    };
+
+    // create a compulsory field called "category", default value is
     if (node.frontmatter.category) {
       const categorySlug = `/category/${kebabCase(node.frontmatter.category)}/`;
       createNodeField({ node, name: "categorySlug", value: categorySlug });
@@ -115,12 +130,12 @@ const onCreateNode = ({ node, actions, getNode }) => {
       createNodeField({
         node,
         name: "categorySlug",
-        value: `/category/notes/`,
+        value: defaultCategory.slug,
       });
       createNodeField({
         node,
         name: "category",
-        value: "notes",
+        value: defaultCategory.name,
       });
     }
   }

diff --git a/gatsby/pagination/create-categories-pages.js b/gatsby/pagination/create-categories-pages.js
@@ -14,7 +14,7 @@ module.exports = async (graphql, actions) => {
           fileAbsolutePath: { regex: "/vault/" }
         }
       ) {
-        group(field: frontmatter___category) {
+        group(field: fields___category) {
           fieldValue
           totalCount
         }

diff --git a/gatsby/pagination/create-stage-pages.js b/gatsby/pagination/create-stage-pages.js
@@ -0,0 +1,47 @@
+const kebabCase = require("lodash.kebabcase");
+const path = require("path");
+const siteConfig = require("../../config");
+
+module.exports = async (graphql, actions) => {
+  const { createPage } = actions;
+  const { postsPerPage } = siteConfig;
+
+  const result = await graphql(`
+    {
+      allMdx(
+        filter: {
+          frontmatter: { publish: { ne: false } }
+          fileAbsolutePath: { regex: "/vault/" }
+        }
+      ) {
+        group(field: fields___stage) {
+          fieldValue
+          totalCount
+        }
+      }
+    }
+  `);
+
+  result.data.allMdx.group.forEach((stage) => {
+    const numPages = Math.ceil(stage.totalCount / postsPerPage);
+    const stageSlug = `/stage/${kebabCase(stage.fieldValue)}`;
+
+    for (let i = 0; i < numPages; i += 1) {
+      createPage({
+        path: i === 0 ? `${stageSlug}/` : `${stageSlug}/page/${i}`,
+        component: path.resolve("./src/templates/stage-template.tsx"),
+        context: {
+          stage: stage.fieldValue,
+          slug: stageSlug,
+          currentPage: i,
+          postsLimit: postsPerPage,
+          postsOffset: i * postsPerPage,
+          prevPagePath: i <= 1 ? stageSlug : `${stageSlug}/page/${i - 1}`,
+          nextPagePath: `${stageSlug}/page/${i + 1}`,
+          hasPrevPage: i !== 0,
+          hasNextPage: i !== numPages - 1,
+        },
+      });
+    }
+  });
+};
diff --git a/gatsby/pagination/create-tags-pages.js b/gatsby/pagination/create-tags-pages.js
@@ -8,7 +8,12 @@ module.exports = async (graphql, actions) => {
 
   const result = await graphql(`
     {
-      allMdx {
+      allMdx(
+        filter: {
+          frontmatter: { publish: { ne: false } }
+          fileAbsolutePath: { regex: "/vault/" }
+        }
+      ) {
         group(field: frontmatter___tags) {
           fieldValue
           totalCount

diff --git a/src/templates/category-template.tsx b/src/templates/category-template.tsx
@@ -27,8 +27,8 @@ const CategoryTemplate = ({ data, pageContext }: Props) => {
 
   return (
     <Layout title={pageTitle}>
-      <div className="py-4 border-b border-slate-200">
-        <h1 className="capitalize inline-block mr-2 text-3xl md:text-6xl">
+      <div className="my-2 py-4 border-b border-slate-200">
+        <h1 className="capitalize inline-block mr-2 text-5xl md:text-7xl font-black">
           {category}
         </h1>
       </div>
@@ -49,7 +49,8 @@ export const query = graphql`
   query CategoryPage($category: String) {
     allMdx(
       filter: {
-        frontmatter: { publish: { ne: false }, category: { eq: $category } }
+        frontmatter: { publish: { ne: false } }
+        fields: { category: { eq: $category } }
       }
       sort: { order: DESC, fields: fields___date }
     ) {

diff --git a/src/templates/stage-template.tsx b/src/templates/stage-template.tsx
@@ -0,0 +1,66 @@
+import Layout from "@/components/Layout";
+import React from "react";
+import ListNote from "@/components/ListNote";
+import { graphql } from "gatsby";
+import { SITE_TITLE } from "../../config";
+
+type Props = {
+  data: AllMdx;
+  pageContext: PageContext;
+};
+
+const StageTemplate = ({ data, pageContext }: Props) => {
+  const { edges } = data.allMdx;
+  const {
+    stage,
+    slug,
+    currentPage,
+    prevPagePath,
+    nextPagePath,
+    hasPrevPage,
+    hasNextPage,
+  } = pageContext;
+  const pageTitle =
+    currentPage > 0
+      ? `${stage} - Page ${currentPage} - ${SITE_TITLE}`
+      : `${stage} - ${SITE_TITLE}`;
+
+  return (
+    <Layout title={pageTitle}>
+      <div className="my-2 py-4 border-b border-slate-200">
+        <h1 className="capitalize inline-block mr-2 text-5xl md:text-7xl font-black">
+          {stage}
+        </h1>
+      </div>
+      <ListNote edges={edges} />
+      {/* {(hasPrevPage || hasNextPage) && (
+        <Pagination
+          prevPagePath={prevPagePath}
+          nextPagePath={nextPagePath}
+          hasPrevPage={hasPrevPage}
+          hasNextPage={hasNextPage}
+        />
+      )} */}
+    </Layout>
+  );
+};
+
+export const query = graphql`
+  query StagePage($stage: String) {
+    allMdx(
+      filter: {
+        frontmatter: { publish: { ne: false } }
+        fields: { stage: { eq: $stage } }
+      }
+      sort: { order: DESC, fields: fields___date }
+    ) {
+      edges {
+        node {
+          ...postList
+        }
+      }
+    }
+  }
+`;
+
+export default StageTemplate;