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;