Updates

pages/_app.tsx

@@ -1,6 +1,25 @@
 import "@/styles/globals.css";
+import { PagePropsType } from "@/types";
 import type { AppProps } from "next/app";
+import "prism-themes/themes/prism-dracula.css";
+import React from "react";
+
+export type AppContextType = {
+    pageProps: PagePropsType;
+};
+
+export const AppContext = React.createContext<AppContextType>({
+    pageProps: {},
+});
 
 export default function App({ Component, pageProps }: AppProps) {
-    return <Component {...pageProps} />;
+    return (
+        <AppContext.Provider
+            value={{
+                pageProps,
+            }}
+        >
+            <Component {...pageProps} />
+        </AppContext.Provider>
+    );
 }

pages/blog/[slug]/index.tsx

@@ -0,0 +1,91 @@
+import Layout from "@/layouts/main";
+import Main from "@/components/pages/blog/slug";
+import { GetStaticPaths, GetStaticProps } from "next";
+import datasquirel from "@moduletrace/datasquirel";
+import { DSQL_TBENME_BLOG_POSTS, PagePropsType } from "@/types";
+import { APIResponseObject } from "@moduletrace/datasquirel/dist/package-shared/types";
+import { serialize } from "next-mdx-remote/serialize";
+import remarkGfm from "remark-gfm";
+import rehypePrismPlus from "rehype-prism-plus";
+import matter from "gray-matter";
+
+export default function SingleBlogPost() {
+    return (
+        <Layout>
+            <Main />
+        </Layout>
+    );
+}
+
+export const getStaticProps: GetStaticProps<PagePropsType> = async (ctx) => {
+    const blogPostRes: APIResponseObject<DSQL_TBENME_BLOG_POSTS[]> =
+        await datasquirel.crud<DSQL_TBENME_BLOG_POSTS>({
+            action: "get",
+            table: "blog_posts",
+            query: {
+                query: {
+                    slug: {
+                        value: ctx.params?.slug,
+                    },
+                },
+            },
+        });
+
+    const singleBlogPost = blogPostRes.payload?.[0] || null;
+
+    if (!singleBlogPost?.body) {
+        return {
+            props: {},
+        };
+    }
+
+    const pageMdString = singleBlogPost.body;
+
+    const pageGrayMatter = matter(pageMdString);
+
+    const data = pageGrayMatter.data;
+    const content = pageGrayMatter.content;
+
+    const mdxSource = await serialize(content, {
+        mdxOptions: {
+            remarkPlugins: [remarkGfm],
+            rehypePlugins: [rehypePrismPlus],
+        },
+        scope: data,
+    });
+
+    return {
+        props: {
+            blogPost: singleBlogPost,
+            mdxSource,
+        },
+    };
+};
+
+export const getStaticPaths: GetStaticPaths = async (ctx) => {
+    const blogPostRes: APIResponseObject<DSQL_TBENME_BLOG_POSTS[]> =
+        await datasquirel.crud<DSQL_TBENME_BLOG_POSTS>({
+            action: "get",
+            table: "blog_posts",
+        });
+
+    const blogPosts = blogPostRes.payload;
+
+    if (!blogPosts?.[0]) {
+        return {
+            paths: [],
+            fallback: "blocking",
+        };
+    }
+
+    return {
+        paths: blogPosts.map((post) => {
+            return {
+                params: {
+                    slug: post.slug,
+                },
+            };
+        }),
+        fallback: "blocking",
+    };
+};

pages/blog/index.tsx

@@ -0,0 +1,34 @@
+import Layout from "@/layouts/main";
+import Main from "@/components/pages/blog";
+import { GetStaticProps } from "next";
+import datasquirel from "@moduletrace/datasquirel";
+import { DSQL_TBENME_BLOG_POSTS, PagePropsType } from "@/types";
+import { APIResponseObject } from "@moduletrace/datasquirel/dist/package-shared/types";
+
+export default function BlogPage() {
+    return (
+        <Layout>
+            <Main />
+        </Layout>
+    );
+}
+
+export const getStaticProps: GetStaticProps<PagePropsType> = async (ctx) => {
+    const blogPosts: APIResponseObject<DSQL_TBENME_BLOG_POSTS[]> =
+        await datasquirel.crud<DSQL_TBENME_BLOG_POSTS>({
+            action: "get",
+            table: "blog_posts",
+            query: {
+                order: {
+                    field: "id",
+                    strategy: "DESC",
+                },
+            },
+        });
+
+    return {
+        props: {
+            blogPosts: blogPosts.payload || null,
+        },
+    };
+};