refactor(starter): upgrade to new version of gatsby

internal/gatsby/constants/index.ts

@@ -0,0 +1,2 @@
+export { default as routes } from "./routes";
+export { default as templates } from "./templates";

internal/gatsby/constants/routes.ts

@@ -0,0 +1,10 @@
+const routes = Object.freeze({
+  notFoundRoute: "/404",
+  categoriesListRoute: "/categories",
+  categoryRoute: "/category",
+  tagsListRoute: "/tags",
+  tagRoute: "/tag",
+  indexRoute: "/",
+});
+
+export default routes;

internal/gatsby/constants/templates.ts

@@ -0,0 +1,12 @@
+import path from "path";
+
+const templates = Object.freeze({
+  categoriesTemplate: path.resolve("./src/templates/categories-template.tsx"),
+  notFoundTemplate: path.resolve("./src/templates/not-found-template.tsx"),
+  indexTemplate: path.resolve("./src/templates/index-template.tsx"),
+  tagsTemplate: path.resolve("./src/templates/tags-template.tsx"),
+  pageTemplate: path.resolve("./src/templates/page-template.tsx"),
+  postTemplate: path.resolve("./src/templates/post-template.tsx"),
+});
+
+export default templates;

internal/gatsby/create-pages.ts

@@ -0,0 +1,142 @@
+import { GatsbyNode } from "gatsby";
+
+import * as constants from "./constants";
+import * as queries from "./queries";
+import * as utils from "./utils";
+
+type CreateWithPagination = (parameters: {
+  group?: string;
+  template: string;
+  total: number;
+  page: number;
+  path: string;
+}) => void;
+
+const getPaginationPath = (basePath: string, page: number): string =>
+  [basePath, "page", page].join("/");
+
+const createPages: GatsbyNode["createPages"] = async ({ graphql, actions }) => {
+  const { createPage } = actions;
+
+  createPage({
+    path: constants.routes.notFoundRoute,
+    component: constants.templates.notFoundTemplate,
+    context: {},
+  });
+
+  createPage({
+    path: constants.routes.tagsListRoute,
+    component: constants.templates.tagsTemplate,
+    context: {},
+  });
+
+  createPage({
+    path: constants.routes.categoriesListRoute,
+    component: constants.templates.categoriesTemplate,
+    context: {},
+  });
+
+  const pages = await queries.pagesQuery(graphql);
+
+  pages.forEach(edge => {
+    const { node } = edge;
+
+    if (node?.frontmatter?.template === "page" && node?.fields?.slug) {
+      createPage({
+        path: node.fields.slug,
+        component: constants.templates.pageTemplate,
+        context: { slug: node.fields.slug },
+      });
+    } else if (node?.frontmatter?.template === "post" && node?.fields?.slug) {
+      createPage({
+        path: node.fields.slug,
+        component: constants.templates.postTemplate,
+        context: { slug: node.fields.slug },
+      });
+    }
+  });
+
+  const createWithPagination: CreateWithPagination = ({
+    group,
+    template,
+    page,
+    path,
+    total,
+  }) => {
+    createPage({
+      component: template,
+      path: page === 0 ? path : getPaginationPath(path, page),
+      context: {
+        group,
+        pagination: {
+          currentPage: page,
+          prevPagePath:
+            page <= 1 ? path : getPaginationPath(path, utils.decrement(page)),
+          nextPagePath: getPaginationPath(path, utils.increment(page)),
+          hasNextPage: page !== utils.decrement(total),
+          hasPrevPage: page !== 0,
+        },
+      },
+    });
+  };
+
+  const categories = await queries.categoriesQuery(graphql);
+  const metadata = await queries.metadataQuery(graphql);
+  const postsLimit = metadata?.postsLimit ?? 1;
+
+  categories.forEach(category => {
+    const total = Math.ceil(category.totalCount / postsLimit);
+    const path = utils.concat(
+      constants.routes.categoryRoute,
+      "/",
+      utils.toKebabCase(category.fieldValue),
+    );
+
+    for (let page = 0; page < total; page += 1) {
+      createWithPagination({
+        group: category.fieldValue,
+        template: constants.templates.categoriesTemplate,
+        total,
+        page,
+        path,
+      });
+    }
+  });
+
+  const tags = await queries.tagsQuery(graphql);
+
+  tags.forEach(tag => {
+    const path = utils.concat(
+      constants.routes.tagRoute,
+      "/",
+      utils.toKebabCase(tag.fieldValue),
+    );
+
+    const total = Math.ceil(tag.totalCount / postsLimit);
+
+    for (let page = 0; page < total; page += 1) {
+      createWithPagination({
+        group: tag.fieldValue,
+        template: constants.templates.categoriesTemplate,
+        total,
+        page,
+        path,
+      });
+    }
+  });
+
+  const path = constants.routes.indexRoute;
+  const posts = await queries.postsQuery(graphql);
+  const total = Math.ceil(posts?.edges?.length ?? 0 / postsLimit);
+
+  for (let page = 0; page < total; page += 1) {
+    createWithPagination({
+      template: constants.templates.indexTemplate,
+      total,
+      page,
+      path,
+    });
+  }
+};
+
+export { createPages };

internal/gatsby/on-create-node.ts

@@ -0,0 +1,58 @@
+import { GatsbyNode } from "gatsby";
+import { createFilePath } from "gatsby-source-filesystem";
+
+import * as constants from "./constants";
+import * as types from "./types";
+import * as utils from "./utils";
+
+const onCreateNode: GatsbyNode["onCreateNode"] = ({
+  node,
+  actions,
+  getNode,
+}) => {
+  const { createNodeField } = actions;
+
+  if (node.internal.type === "MarkdownRemark") {
+    const { frontmatter, parent }: types.Edge["node"] = node;
+    const { tags, category, slug } = frontmatter || {};
+
+    if (slug) {
+      const dirname = parent && getNode(parent)?.relativeDirectory;
+      const value =
+        typeof dirname === "string"
+          ? utils.concat("/", dirname, "/", slug)
+          : utils.concat("/", slug);
+
+      createNodeField({ node, name: "slug", value });
+    } else {
+      const value = createFilePath({ node, getNode });
+      createNodeField({ node, name: "slug", value });
+    }
+
+    if (tags) {
+      const value = tags.map(tag =>
+        utils.concat(
+          constants.routes.tagRoute,
+          "/",
+          utils.toKebabCase(tag),
+          "/",
+        ),
+      );
+
+      createNodeField({ node, name: "tagSlugs", value });
+    }
+
+    if (category) {
+      const value = utils.concat(
+        constants.routes.categoryRoute,
+        "/",
+        utils.toKebabCase(category),
+        "/",
+      );
+
+      createNodeField({ node, name: "categorySlug", value });
+    }
+  }
+};
+
+export { onCreateNode };

internal/gatsby/queries/categories-query.ts

@@ -0,0 +1,32 @@
+import { CreatePagesArgs } from "gatsby";
+
+interface CategoriesQueryResult {
+  allMarkdownRemark: {
+    group: Array<{
+      fieldValue: string;
+      totalCount: number;
+    }>;
+  };
+}
+
+const categoriesQuery = async (graphql: CreatePagesArgs["graphql"]) => {
+  const result = await graphql<CategoriesQueryResult>(`
+    {
+      allMarkdownRemark(
+        filter: {
+          frontmatter: { template: { eq: "post" }, draft: { ne: true } }
+        }
+        sort: { order: DESC, fields: [frontmatter___date] }
+      ) {
+        group(field: frontmatter___category) {
+          fieldValue
+          totalCount
+        }
+      }
+    }
+  `);
+
+  return result?.data?.allMarkdownRemark?.group ?? [];
+};
+
+export default categoriesQuery;

internal/gatsby/queries/index.ts

@@ -0,0 +1,5 @@
+export { default as categoriesQuery } from "./categories-query";
+export { default as metadataQuery } from "./metadata-query";
+export { default as postsQuery } from "./posts-query";
+export { default as pagesQuery } from "./pages-query";
+export { default as tagsQuery } from "./tags-query";

internal/gatsby/queries/metadata-query.ts

@@ -0,0 +1,23 @@
+import { CreatePagesArgs } from "gatsby";
+
+interface MetadataQueryResult {
+  site: {
+    siteMetadata: {
+      postsLimit?: number;
+    };
+  };
+}
+
+const metadataQuery = async (graphql: CreatePagesArgs["graphql"]) => {
+  const result = await graphql<MetadataQueryResult>(`
+    query SiteMetaData {
+      site {
+        postsLimit
+      }
+    }
+  `);
+
+  return result?.data?.site.siteMetadata ?? {};
+};
+
+export default metadataQuery;

internal/gatsby/queries/pages-query.ts

@@ -0,0 +1,32 @@
+import { CreatePagesArgs } from "gatsby";
+
+import * as types from "../types";
+
+export interface PagesQueryResult {
+  allMarkdownRemark: {
+    edges?: Array<types.Edge>;
+  };
+}
+
+const pagesQuery = async (graphql: CreatePagesArgs["graphql"]) => {
+  const result = await graphql<PagesQueryResult>(`
+    {
+      allMarkdownRemark(filter: { frontmatter: { draft: { ne: true } } }) {
+        edges {
+          node {
+            frontmatter {
+              template
+            }
+            fields {
+              slug
+            }
+          }
+        }
+      }
+    }
+  `);
+
+  return result?.data?.allMarkdownRemark?.edges ?? [];
+};
+
+export default pagesQuery;

internal/gatsby/queries/posts-query.ts

@@ -0,0 +1,29 @@
+import { CreatePagesArgs } from "gatsby";
+
+import * as types from "../types";
+
+export interface PostsQueryResult {
+  allMarkdownRemark: {
+    edges?: Array<types.Edge>;
+  };
+}
+
+const postsQuery = async (graphql: CreatePagesArgs["graphql"]) => {
+  const result = await graphql<PostsQueryResult>(`
+    {
+      allMarkdownRemark(filter: { frontmatter: { draft: { ne: true } } }) {
+        edges {
+          node {
+            fields {
+              slug
+            }
+          }
+        }
+      }
+    }
+  `);
+
+  return result?.data?.allMarkdownRemark;
+};
+
+export default postsQuery;

internal/gatsby/queries/tags-query.ts

@@ -0,0 +1,31 @@
+import { CreatePagesArgs } from "gatsby";
+
+interface TagsQueryResult {
+  allMarkdownRemark: {
+    group: Array<{
+      fieldValue: string;
+      totalCount: number;
+    }>;
+  };
+}
+
+const tagsQuery = async (graphql: CreatePagesArgs["graphql"]) => {
+  const result = await graphql<TagsQueryResult>(`
+    {
+      allMarkdownRemark(
+        filter: {
+          frontmatter: { template: { eq: "post" }, draft: { ne: true } }
+        }
+      ) {
+        group(field: frontmatter___tags) {
+          fieldValue
+          totalCount
+        }
+      }
+    }
+  `);
+
+  return result?.data?.allMarkdownRemark?.group || [];
+};
+
+export default tagsQuery;

internal/gatsby/types/edge.ts

@@ -0,0 +1,25 @@
+import { Node as GatsbyNode } from "gatsby";
+
+interface Frontmatter {
+  slug?: string;
+  template?: string;
+  category?: string;
+  tags?: Array<string>;
+}
+
+interface Fields {
+  slug?: string;
+  categorySlug?: string;
+  tagSlugs?: Array<string>;
+}
+
+interface Node extends GatsbyNode {
+  fields?: Fields;
+  frontmatter?: Frontmatter;
+}
+
+interface Edge {
+  node: Node;
+}
+
+export default Edge;

internal/gatsby/types/index.ts

@@ -0,0 +1 @@
+export type { default as Edge } from "./edge";

internal/gatsby/utils/concat.ts

@@ -0,0 +1,3 @@
+const concat = (...args: string[]): string => args.join("");
+
+export default concat;

internal/gatsby/utils/decrement.ts

@@ -0,0 +1,3 @@
+const decrement = (n: number): number => n - 1;
+
+export default decrement;

internal/gatsby/utils/increment.ts

@@ -0,0 +1,3 @@
+const increment = (n: number): number => n + 1;
+
+export default increment;

internal/gatsby/utils/index.ts

@@ -0,0 +1,4 @@
+export { default as toKebabCase } from "./to-kebab-case";
+export { default as decrement } from "./decrement";
+export { default as increment } from "./increment";
+export { default as concat } from "./concat";

internal/gatsby/utils/to-kebab-case.ts

@@ -0,0 +1,6 @@
+const toKebabCase = (str: string = ""): string => str.toLowerCase()
+  .replace(/[^\w\s]/gi, "")
+  .split(" ").join("-")
+  .split("_").join("-");
+
+export default toKebabCase;