chore: fix spacing in code

Dockerfile

@@ -1,4 +1,4 @@
-FROM node:lts-iron
+FROM node:lts-alpine3.20
 
 ENV NODE_OPTIONS="--max-old-space-size=4096"
 

client/next.config.mjs

@@ -1,17 +1,13 @@
-import generated from "@next/mdx";
+import mdx from "@next/mdx";
 
-const withMDX = generated()
+const withMDX = mdx()
 
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   pageExtensions: ['js', 'jsx', 'ts', 'tsx', 'md', 'mdx'],
   experimental: {
     webVitalsAttribution: ['CLS', 'LCP']
   },
-  devIndicators: {
-    buildActivity: true,
-    buildActivityPosition: 'bottom-right',
-  },
   images: {
     dangerouslyAllowSVG: true,
     remotePatterns: [
@@ -40,5 +36,4 @@ const nextConfig = {
   }
 }
 
-// export default nextConfig;
 export default withMDX(nextConfig);

client/package.json

@@ -14,16 +14,17 @@
     "@gsap/react": "^2.1.0",
     "@mdx-js/loader": "^3.0.1",
     "@mdx-js/react": "^3.0.1",
+    "@next/bundle-analyzer": "^14.2.3",
     "@next/mdx": "^14.2.3",
     "@radix-ui/react-dropdown-menu": "^2.0.6",
     "@radix-ui/react-hover-card": "^1.0.7",
     "@radix-ui/react-slot": "^1.0.2",
     "@radix-ui/react-switch": "^1.0.3",
     "@types/mdx": "^2.0.13",
     "@uiw/react-markdown-preview": "^5.1.1",
-    "axios": "^1.6.8",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.0",
+    "gray-matter": "^4.0.3",
     "gsap": "^3.12.5",
     "lottie-react": "^2.4.0",
     "lru-cache": "^10.2.2",

client/src/app/action.ts

@@ -1,8 +1,22 @@
 "use server"
 
+import {promises as fs} from 'fs';
+import path from 'path';
+import matter from "gray-matter";
+import {LRUCache} from 'lru-cache';
+
+const cache = new LRUCache<string, {
+  name: string,
+  content: string
+}>({
+  max: 100,
+  ttl: 1000 * 60 * 24
+});
+
 const getGithubData = async () => {
   const response = await fetch('https://api.github.com/users/AureliusIvan',
       {
+        mode: 'cors',
         next: {
           revalidate: 3600 * 24
         }
@@ -11,4 +25,32 @@ const getGithubData = async () => {
   return response.json();
 }
 
-export {getGithubData}
+
+const getPostData = async () => {
+  const postsDirectory = path.join(process.cwd(), 'src/posts')
+  const filenames = await fs.readdir(postsDirectory)
+  return await Promise.all(filenames.map(async (filename) => {
+
+        if (cache.has(filename)) {
+          return cache.get(filename)
+        }
+
+
+        const filePath = path.join(postsDirectory, filename)
+        const fileContent = await fs.readFile(filePath, 'utf8')
+        const {data, content} = matter(fileContent)
+        const returnData = {
+          name: filename.replace(/\.md$/, ''),
+          content: content
+        }
+        cache.set(filename, returnData)
+        return returnData
+      }
+  ))
+}
+
+
+export {
+  getGithubData,
+  getPostData
+}

client/src/app/layout.tsx

@@ -8,7 +8,9 @@ import {Navbar} from '@/components/ui/navbar.component';
 import {cn} from '@/lib/utils';
 import {ThemeProvider} from '@/components/theme-provider';
 import {Montserrat} from 'next/font/google'
-import Footer from "@/components/ui/footer";
+import dynamic from 'next/dynamic';
+
+const Footer = dynamic(() => import('@/components/ui/footer'), {})
 
 
 export const metadata: Metadata = {
@@ -38,7 +40,7 @@ interface RootLayoutProps {
 }
 
 
-export default function RootLayout(
+export default async function RootLayout(
     {children}: Readonly<RootLayoutProps>
 ) {
   return (
@@ -64,7 +66,6 @@ export default function RootLayout(
                 bg-primaryLight text-textPrimaryLight'>
 
           <Navbar routes={Routes}/>
-
           {children}
 
           <Footer/>

client/src/app/loading.tsx

@@ -1,8 +1,13 @@
-export default function Loading() {
+"use server"
+
+async function Loading() {
   return (
-      <div
-          className='flex items-center justify-center h-screen w-full'
-      >
+      <div className='flex flex-col items-center justify-center gap-4 min-h-screen'>
+        <h1>
+          ...
+        </h1>
       </div>
   )
-}
+}
+
+export default Loading

client/src/app/log/loading.tsx

@@ -0,0 +1,12 @@
+"use server"
+
+async function Loading() {
+  return (
+      <div className='flex flex-col items-center justify-center gap-4 min-h-screen'>
+        <h1>
+        </h1>
+      </div>
+  )
+}
+
+export default Loading

client/src/app/page.tsx

@@ -2,12 +2,14 @@
 
 import type {Metadata} from 'next'
 
-import {Loading} from '@/components/ui/loading/loading';
+import dynamic from 'next/dynamic';
 import {Title} from '@/components/ui/title';
-import {Suspense} from 'react';
 import {InProgressSection} from "@/components/section/in-progress";
-import GameScreen from '@/components/game/game-screen';
+import PostSection from "@/components/section/post";
 
+const GameScreen = dynamic(() => import('@/components/game/game-screen'), {
+  ssr: true,
+})
 
 export async function generateMetadata(): Promise<Metadata> {
   return {
@@ -22,6 +24,7 @@ export async function generateMetadata(): Promise<Metadata> {
   }
 }
 
+
 async function Home() {
   return (
       <main
@@ -31,53 +34,59 @@ async function Home() {
 
         {/* Hero Section */}
         <section
-            className='flex flex-col items-center justify-center gap-4'
+            className='
+            flex flex-col items-center justify-center gap-4
+            mt-10 min-h-[20vh] w-full
+            '
         >
-          <Title>
+          <Title size={"large"}>
             {/*(on development) <br/>*/}
-            Hi. I&#39;am Ivan.<br/>
-            a Developer.
+            Hi. I&#39;m Ivan.<br/>
+            a developer.
           </Title>
 
-          <GameScreen/>
 
-          <div
-              className='flex flex-col items-center justify-center w-full gap-4'
-          >
-          </div>
+          <p className={"text-center font-light animate"}>
+            I loves to write about web development, <br/>
+            technology, and life.
+          </p>
+
+        </section>
+
+        {/* Game Section */}
+        <section
+        >
+
+          <GameScreen/>
 
         </section>
 
         {/* Post Section */}
         <section
-            className={"w-full flex flex-col items-center justify-center gap-4"}
+            className="w-full flex flex-col
+            items-center justify-center gap-4"
         >
           <Title>
             Recent Post
           </Title>
           (on development)
-          {/* Post List */
-          }
-          <Suspense fallback={<Loading/>}>
-          </Suspense>
-
+          <PostSection/>
         </section>
 
 
-        {/* Achievement Section */}
-        <section>
-        </section>
-
         {/* In Progress */}
         <section
-            className={"w-full flex flex-col items-center " +
-                "justify-center gap-4 m-4"}
+            className="w-full flex flex-col items-center
+            justify-center gap-4 m-4"
         >
           <Title>
             Project
           </Title>
+
           (on development)
+
           <InProgressSection/>
+
         </section>
 
         {/* Awards Section */}