refactor(starter): upgrade and move to typescript

internal/gatsby/constants/routes.ts

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

internal/gatsby/constants/templates.ts

@@ -1,12 +1,22 @@
 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"),
+  indexTemplate: path.resolve(
+    "./src/templates/IndexTemplate/IndexTemplate.tsx",
+  ),
+  notFoundTemplate: path.resolve(
+    "./src/templates/NotFoundTemplate/NotFoundTemplate.tsx",
+  ),
+  categoryTemplate: path.resolve(
+    "./src/templates/CategoryTemplate/CategoryTemplate.tsx",
+  ),
+  categoriesTemplate: path.resolve(
+    "./src/templates/CategoriesTemplate/CategoriesTemplate.tsx",
+  ),
+  tagTemplate: path.resolve("./src/templates/TagTemplate/TagTemplate.tsx"),
+  tagsTemplate: path.resolve("./src/templates/TagsTemplate/TagsTemplate.tsx"),
+  pageTemplate: path.resolve("./src/templates/PageTemplate/PageTemplate.tsx"),
+  postTemplate: path.resolve("./src/templates/PostTemplate/PostTemplate.tsx"),
 });
 
 export default templates;

internal/gatsby/create-pages.ts

@@ -5,6 +5,7 @@ import * as queries from "./queries";
 import * as utils from "./utils";
 
 type CreateWithPagination = (parameters: {
+  limit: number;
   group?: string;
   template: string;
   total: number;
@@ -13,7 +14,7 @@ type CreateWithPagination = (parameters: {
 }) => void;
 
 const getPaginationPath = (basePath: string, page: number): string =>
-  [basePath, "page", page].join("/");
+  [basePath === "/" ? "" : basePath, "page", page].join("/");
 
 const createPages: GatsbyNode["createPages"] = async ({ graphql, actions }) => {
   const { createPage } = actions;
@@ -62,12 +63,15 @@ const createPages: GatsbyNode["createPages"] = async ({ graphql, actions }) => {
     page,
     path,
     total,
+    limit,
   }) => {
     createPage({
       component: template,
       path: page === 0 ? path : getPaginationPath(path, page),
       context: {
         group,
+        limit,
+        offset: page * limit,
         pagination: {
           currentPage: page,
           prevPagePath:
@@ -94,8 +98,9 @@ const createPages: GatsbyNode["createPages"] = async ({ graphql, actions }) => {
 
     for (let page = 0; page < total; page += 1) {
       createWithPagination({
+        limit: postsLimit,
         group: category.fieldValue,
-        template: constants.templates.categoriesTemplate,
+        template: constants.templates.categoryTemplate,
         total,
         page,
         path,
@@ -116,8 +121,9 @@ const createPages: GatsbyNode["createPages"] = async ({ graphql, actions }) => {
 
     for (let page = 0; page < total; page += 1) {
       createWithPagination({
+        limit: postsLimit,
         group: tag.fieldValue,
-        template: constants.templates.categoriesTemplate,
+        template: constants.templates.tagTemplate,
         total,
         page,
         path,
@@ -126,12 +132,14 @@ const createPages: GatsbyNode["createPages"] = async ({ graphql, actions }) => {
   });
 
   const path = constants.routes.indexRoute;
+  const template = constants.templates.indexTemplate;
   const posts = await queries.postsQuery(graphql);
-  const total = Math.ceil(posts?.edges?.length ?? 0 / postsLimit);
+  const total = Math.ceil((posts?.edges?.length ?? 0) / postsLimit);
 
   for (let page = 0; page < total; page += 1) {
     createWithPagination({
-      template: constants.templates.indexTemplate,
+      limit: postsLimit,
+      template,
       total,
       page,
       path,

internal/gatsby/on-create-webpack-config.ts

@@ -0,0 +1,25 @@
+import path from "path";
+
+import { CreateWebpackConfigArgs } from "gatsby";
+import { CompilerOptions } from "typescript";
+
+import { compilerOptions } from "../../tsconfig.json";
+
+const onCreateWebpackConfig = (
+  (options: Pick<CompilerOptions, "paths">) =>
+  ({ actions }: CreateWebpackConfigArgs) => {
+    actions.setWebpackConfig({
+      resolve: {
+        alias: Object.entries(options.paths || []).reduce(
+          (aliases, [name, [target]]) => ({
+            ...aliases,
+            [name]: path.resolve(target),
+          }),
+          {},
+        ),
+      },
+    });
+  }
+)(compilerOptions);
+
+export { onCreateWebpackConfig };

internal/gatsby/queries/metadata-query.ts

@@ -12,7 +12,9 @@ const metadataQuery = async (graphql: CreatePagesArgs["graphql"]) => {
   const result = await graphql<MetadataQueryResult>(`
     query SiteMetaData {
       site {
-        postsLimit
+        siteMetadata {
+          postsLimit
+        }
       }
     }
   `);

internal/gatsby/types/edge.ts

@@ -1,9 +1,11 @@
 import { Node as GatsbyNode } from "gatsby";
 
 interface Frontmatter {
+  date?: string;
   slug?: string;
   template?: string;
   category?: string;
+  description?: string;
   tags?: Array<string>;
 }
 

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

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

internal/testing/__mocks__/all-markdown-remark.ts

@@ -1,52 +1,4 @@
-export default {
-  allMarkdownRemark: {
-    group: [
-      {
-        fieldValue: "typography",
-        totalCount: 1,
-      },
-      {
-        fieldValue: "design inspiration",
-        totalCount: 1,
-      },
-    ],
-    edges: [
-      {
-        node: {
-          id: "08870ea6-bdc8-4ec6-bf72-1e7d4488eb72",
-          fields: {
-            slug: "/posts/perfecting-the-art-of-perfection",
-            categorySlug: "/typography",
-          },
-          frontmatter: {
-            date: "2016-09-01",
-            description:
-              "An Essay on Typography by Eric Gill takes the reader back to the year 1930. The year when a conflict between two worlds came to its term. The machines of the industrial world finally took over the handicrafts.",
-            category: "typography",
-            title: "Perfecting the Art of Perfection",
-            template: "post",
-          },
-          html: "",
-        },
-      },
-      {
-        node: {
-          id: "066adc91-f87a-4e57-9fef-7a677baf5c1d",
-          fields: {
-            slug: "/posts/the-birth-of-movable-type",
-            categorySlug: "/design-inspiration",
-          },
-          frontmatter: {
-            date: "2016-09-01",
-            description:
-              "German inventor Johannes Gutenberg developed a method of movable type and used it to create one of the western world’s first major printed books, the “Forty–Two–Line” Bible.",
-            category: "design inspiration",
-            title: "Johannes Gutenberg: The Birth of Movable Type",
-            template: "post",
-          },
-          html: "",
-        },
-      },
-    ],
-  },
-};
+import edges from "./edges";
+import group from "./group";
+
+export default { group, edges };

internal/testing/__mocks__/author.ts

@@ -1,7 +1,7 @@
 import contacts from "./contacts";
 
 export default {
-  photo: "/static/photo.jpg",
+  photo: "/photo.jpg",
   bio: "Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu.",
   name: "John Doe",
   contacts,

internal/testing/__mocks__/contacts.ts

@@ -4,5 +4,4 @@ export default {
   github: "#",
   twitter: "#",
   telegram: "#",
-  vkontakte: "#",
 };

internal/testing/__mocks__/edges.ts

@@ -0,0 +1,38 @@
+export default [
+  {
+    node: {
+      id: "08870ea6-bdc8-4ec6-bf72-1e7d4488eb72",
+      fields: {
+        slug: "/posts/perfecting-the-art-of-perfection",
+        categorySlug: "/typography",
+      },
+      frontmatter: {
+        date: "2016-09-01",
+        description:
+          "An Essay on Typography by Eric Gill takes the reader back to the year 1930. The year when a conflict between two worlds came to its term. The machines of the industrial world finally took over the handicrafts.",
+        category: "typography",
+        title: "Perfecting the Art of Perfection",
+        template: "post",
+      },
+      html: "<p>An Essay on Typography by Eric Gill takes the reader back to the year 1930. The year when a conflict between two worlds came to its term. The machines of the industrial world finally took over the handicrafts.</p>",
+    },
+  },
+  {
+    node: {
+      id: "066adc91-f87a-4e57-9fef-7a677baf5c1d",
+      fields: {
+        slug: "/posts/the-birth-of-movable-type",
+        categorySlug: "/design-inspiration",
+      },
+      frontmatter: {
+        date: "2016-09-01",
+        description:
+          "German inventor Johannes Gutenberg developed a method of movable type and used it to create one of the western world’s first major printed books, the “Forty–Two–Line” Bible.",
+        category: "design inspiration",
+        title: "Johannes Gutenberg: The Birth of Movable Type",
+        template: "post",
+      },
+      html: "<p>German inventor Johannes Gutenberg developed a method of movable type and used it to create one of the western world’s first major printed books, the “Forty–Two–Line” Bible.</p>",
+    },
+  },
+];

internal/testing/__mocks__/group.ts

@@ -0,0 +1,10 @@
+export default [
+  {
+    fieldValue: "typography",
+    totalCount: 1,
+  },
+  {
+    fieldValue: "design inspiration",
+    totalCount: 1,
+  },
+];

internal/testing/__mocks__/index.ts

@@ -5,3 +5,4 @@ export { default as pageContext } from "./page-context";
 export { default as contacts } from "./contacts";
 export { default as author } from "./author";
 export { default as menu } from "./menu";
+export { default as edges } from "./edges";

internal/testing/__mocks__/markdown-remark.ts

@@ -2,15 +2,17 @@ export default {
   id: "08870ea6-bdc8-4ec6-bf72-1e7d4488eb72",
   fields: {
     slug: "/posts/perfecting-the-art-of-perfection",
+    tagsSlugs: ["/handwriting", "/helvetica"],
     categorySlug: "/typography",
   },
   frontmatter: {
     date: "2016-09-01",
     description:
       "An Essay on Typography by Eric Gill takes the reader back to the year 1930. The year when a conflict between two worlds came to its term. The machines of the industrial world finally took over the handicrafts.",
-    category: "typography",
+    category: "Typography",
+    tags: ["Handwriting", "Helvetica"],
     title: "Perfecting the Art of Perfection",
     template: "post",
   },
-  html: "",
+  html: "<p>An Essay on Typography by Eric Gill takes the reader back to the year 1930. The year when a conflict between two worlds came to its term. The machines of the industrial world finally took over the handicrafts.</p>",
 };

internal/testing/__mocks__/page-context.ts

@@ -1,12 +1,10 @@
 export default {
-  pageContext: {
-    group: "typography",
-    pagination: {
-      currentPage: 2,
-      prevPagePath: "/typography/page/1",
-      nextPagePath: "/typography/page/3",
-      hasNextPage: true,
-      hasPrevPage: true,
-    },
+  group: "typography",
+  pagination: {
+    currentPage: 2,
+    prevPagePath: "/typography/page/1",
+    nextPagePath: "/typography/page/3",
+    hasNextPage: true,
+    hasPrevPage: true,
   },
 };

internal/testing/jest-config.ts

@@ -20,6 +20,12 @@ const jestConfig: Config.InitialOptions = {
     ".+\\.(css|sass|scss)$": "identity-obj-proxy",
     ".+\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":
       "identity-obj-proxy",
+    "^gatsby-page-utils/(.*)$": "gatsby-page-utils/dist/$1",
+    "^gatsby-core-utils/(.*)$": "gatsby-core-utils/dist/$1",
+    "^gatsby-plugin-utils/(.*)$": [
+      "gatsby-plugin-utils/dist/$1",
+      "gatsby-plugin-utils/$1",
+    ],
   },
   transform: { "^.+\\.(t)sx?$": ["@swc/jest", swc] },
   setupFiles: ["<rootDir>/internal/testing/jest-setup.ts"],