feat: Add blog template and gatsby util functions

content/pages/about.mdx

@@ -0,0 +1,8 @@
+---
+date: 2024-10-23T05:15:54.000Z
+---
+#### About Semantic
+
+Welcome to Semantic, the ultimate platform for creating a stunning, content-driven blog. Built with a focus on clean and semantic design, Semantic provides a seamless blogging experience with an emphasis on accessibility and modern web standards. Authored by Hak, Semantic allows you to showcase your writing and ideas in a way that’s both beautiful and intuitive.
+
+Explore the possibilities of building your own blog with ease, while ensuring that your content remains the star of the show. Whether you're a writer, creator, or enthusiast, Semantic has the tools to help you create a memorable online presence.

contents/posts/240828-lorem-post/post.mdx → content/posts/240828-lorem-post/post.mdx

@@ -1,8 +1,9 @@
 ---
 slug: 240828-lorem-post
 title: Lorem Ipsum is simply dummy text of the printing and typesetting industry
-date: "2024-08-28T08:00:00.000Z"
-coverImage: "cover.jpg"
+date: 2024-08-28T08:00:00.000Z
+coverImage: cover.jpg
+category: Tech
 ---
 
 Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

content/posts/apple-vision-pro/post.mdx

@@ -0,0 +1,9 @@
+---
+slug: apple-vision-pro
+title: Experience the future with Apple's revolutionary new product - Vision Pro
+date: 2024-10-23T05:15:54.000Z
+coverImage: cover.jpg
+category: Tech
+---
+
+Rorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vulputate libero et velit interdum, ac aliquet odio mattis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur tempus urna at turpis condimentum lobortis. Ut commodo efficitur neque. Ut diam quam, semper iaculis condimentum ac, vestibulum eu nisl.

gatsby-browser.ts

@@ -1,4 +1,3 @@
 import '@/styles/globals.css';
 
-import '@fontsource/roboto-mono';
-import 'material-symbols/outlined.css';
+import 'material-symbols/rounded.css';

gatsby-config.ts

@@ -9,28 +9,20 @@ const config: GatsbyConfig = {
   },
   graphqlTypegen: true,
   plugins: [
-    `gatsby-plugin-vanilla-extract`,
-    `gatsby-plugin-sharp`,
-    `gatsby-transformer-sharp`,
-    `gatsby-transformer-remark`,
-    `gatsby-plugin-image`,
-    {
-      resolve: `gatsby-source-filesystem`,
-      options: {
-        name: `pages`,
-        path: `${__dirname}/contents/pages/`,
-      },
-    },
     {
-      resolve: `gatsby-source-filesystem`,
+      resolve: `gatsby-plugin-vanilla-extract`,
       options: {
-        name: `posts`,
-        path: `${__dirname}/contents/posts/`,
+        identifiers: `short`,
       },
     },
+    `gatsby-plugin-sharp`,
+    `gatsby-transformer-sharp`,
+    `gatsby-transformer-remark`,
+    `gatsby-plugin-image`,
     {
       resolve: `gatsby-plugin-mdx`,
       options: {
+        extensions: [`.mdx`, `.md`],
         gatsbyRemarkPlugins: [
           {
             resolve: `gatsby-remark-images`,
@@ -41,6 +33,20 @@ const config: GatsbyConfig = {
         ],
       },
     },
+    {
+      resolve: `gatsby-source-filesystem`,
+      options: {
+        name: `pages`,
+        path: `${__dirname}/content/pages/`,
+      },
+    },
+    {
+      resolve: `gatsby-source-filesystem`,
+      options: {
+        name: `posts`,
+        path: `${__dirname}/content/posts/`,
+      },
+    },
   ],
 };
 

gatsby-node.ts

@@ -1,138 +1,11 @@
-import path from 'path';
 import { GatsbyNode } from 'gatsby';
-
-const templates = {
-  about: path.resolve(`./src/templates/AboutTemplate.tsx`),
-  post: path.resolve(`./src/templates/BlogPostTemplate.tsx`),
-  category: path.resolve(`./src/templates/CategoryTemplate.tsx`),
-  tag: path.resolve(`./src/templates/TagTemplate.tsx`),
-  allCategories: path.resolve(`./src/templates/AllCategoriesTemplate.tsx`),
-  allTags: path.resolve(`./src/templates/AllTagsTemplate.tsx`),
-};
-
-export const createSchemaCustomization: GatsbyNode['createSchemaCustomization'] = ({ actions }) => {
-  const { createTypes } = actions;
-
-  createTypes(`
-    type MdxFrontmatter {
-      category: String
-      tag: [String]
-    }
-  `);
-};
-
-export const onCreateWebpackConfig: GatsbyNode['onCreateWebpackConfig'] = ({
-  getConfig,
-  actions,
-}) => {
-  const output = getConfig().output || {};
-
-  actions.setWebpackConfig({
-    output,
-    resolve: {
-      alias: {
-        '@/constants': path.resolve(__dirname, 'src/constants'),
-        '@/components': path.resolve(__dirname, 'src/components'),
-        '@/hooks': path.resolve(__dirname, 'src/hooks'),
-        '@/styles': path.resolve(__dirname, 'src/styles'),
-        '@/queries': path.resolve(__dirname, 'src/queries'),
-      },
-    },
-  });
-};
-
-export const createPages: GatsbyNode['createPages'] = async ({ graphql, actions, reporter }) => {
-  const { createPage } = actions;
-
-  type Data = {
-    allMdx: {
-      nodes: {
-        id: string;
-        frontmatter: {
-          slug: string;
-          category?: string;
-          tag?: string[];
-        };
-        internal: {
-          contentFilePath: string;
-        };
-      }[];
-    };
-  };
-
-  const queryResult = await graphql<Data>(`
-    query GetAllMdxPosts {
-      allMdx {
-        nodes {
-          id
-          frontmatter {
-            slug
-            category
-            tag
-          }
-          internal {
-            contentFilePath
-          }
-        }
-      }
-    }
-  `);
-
-  if (queryResult.errors) {
-    reporter.panicOnBuild('🚨 There was an error with the MDX query.', queryResult.errors);
-    return;
-  }
-
-  const posts = queryResult.data?.allMdx.nodes || [];
-  const categories = new Set<string>();
-  const tags = new Set<string>();
-
-  posts.forEach(({ id, frontmatter, internal }) => {
-    const { slug, category, tag } = frontmatter;
-
-    if (internal.contentFilePath.includes('about')) {
-      createPage({
-        path: `/about`,
-        component: `${templates.about}?__contentFilePath=${internal.contentFilePath}`,
-        context: { id },
-      });
-    } else {
-      createPage({
-        path: `/blog/${slug}`,
-        component: `${templates.post}?__contentFilePath=${internal.contentFilePath}`,
-        context: { id, category, tags: tag || [] },
-      });
-
-      if (category) categories.add(category);
-      tag?.forEach(t => tags.add(t));
-    }
-  });
-
-  categories.forEach(category =>
-    createPage({
-      path: `/category/${category}`,
-      component: templates.category,
-      context: { category },
-    }),
-  );
-
-  tags.forEach(tag =>
-    createPage({
-      path: `/tag/${tag}`,
-      component: templates.tag,
-      context: { tag },
-    }),
-  );
-
-  createPage({
-    path: `/category`,
-    component: templates.allCategories,
-    context: { categories: Array.from(categories) },
-  });
-
-  createPage({
-    path: `/tag`,
-    component: templates.allTags,
-    context: { tags: Array.from(tags) },
-  });
-};
+import { createCustomWebpackConfig } from './gatsby/createCustomWebpackConfig';
+import { createCustomSchema } from './gatsby/createCustomSchema';
+import { createCustomPages } from './gatsby/createCustomPages';
+import { sourceNodes } from './gatsby/createCustomNode';
+
+export const onCreateNode: GatsbyNode['sourceNodes'] = sourceNodes;
+export const onCreateWebpackConfig: GatsbyNode['onCreateWebpackConfig'] = createCustomWebpackConfig;
+export const createSchemaCustomization: GatsbyNode['createSchemaCustomization'] =
+  createCustomSchema;
+export const createPages: GatsbyNode['createPages'] = createCustomPages;

gatsby-ssr.tsx

@@ -36,6 +36,18 @@ export const onRenderBody: GatsbySSR['onRenderBody'] = ({
   setPreBodyComponents,
 }) => {
   setHeadComponents([
+    <link rel="preconnect" href="https://fonts.googleapis.com" key="fontsGoogle" />,
+    <link
+      rel="preconnect"
+      href="https://fonts.gstatic.com"
+      crossOrigin="anonymous"
+      key="fontsGstatic"
+    />,
+    <link
+      href="https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,100..700;1,100..700&display=swap"
+      rel="stylesheet"
+      key="robotoMonoFont"
+    />,
     <link
       rel="preload"
       href="/fonts/PretendardVariable.woff2"

gatsby/_queries/about.ts

@@ -0,0 +1,19 @@
+export type AboutPageQueryType = {
+  mdx: {
+    id: string;
+    internal: {
+      contentFilePath: string;
+    };
+  };
+};
+
+export const AboutPageQuery = `
+    query AboutPost {
+      mdx(internal: { contentFilePath: { regex: "/content/pages/about.mdx$/" } }) {
+        id
+        internal {
+          contentFilePath
+        }
+      }
+    }
+  `;