add: bing webmaster verification key

client/next.config.mjs

@@ -6,8 +6,15 @@ const withMDX = mdx()
 const nextConfig = {
   pageExtensions: ['js', 'jsx', 'ts', 'tsx', 'md', 'mdx'],
   experimental: {
-    webVitalsAttribution: ['CLS', 'LCP'],
     mdxRs: true,
+    turbo: {
+      rules: {
+        '*.svg': {
+          loaders: ['@svgr/webpack'],
+          as: '*.js',
+        },
+      }
+    }
   },
   images: {
     dangerouslyAllowSVG: true,

client/public/BingSiteAuth.xml

@@ -0,0 +1,4 @@
+<?xml version="1.0"?>
+<users>
+	<user>A5BAF2CED21531C2027D8B084BCA761C</user>
+</users>

client/src/app/post/[slug]/page.module.scss

@@ -2,10 +2,26 @@
   display: flex;
   flex-direction: column;
   align-items: center;
-  padding: 20px;
-  gap: 20px;
+  padding-inline: 20px;
   min-height: 100vh;
 
+
+  .article {
+    animation: fadeIn 0.3s ease-in-out 1;
+    will-change: opacity, transform;
+  }
+
+  @keyframes fadeIn {
+    from {
+      opacity: 0;
+      transform: translateY(50vh);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+
   h1 {
     font-size: 2rem;
     font-weight: 700;
@@ -45,4 +61,10 @@
     max-width: 100%;
     border-radius: 5px;
   }
+
+  a{
+    color: #a4ff9c;
+    text-decoration: none;
+    font-weight: 700;
+  }
 }

client/src/app/post/[slug]/page.tsx

@@ -1,15 +1,17 @@
 "use server"
 
 import styles from './page.module.scss'
-import {MDXRemote} from "next-mdx-remote/rsc";
-import {getPostDataBySlug} from "@/app/action";
 import Link from "next/link";
 import Image from "next/image";
 import CloseIcon from "@/static/svg/close.svg";
+import {MDXRemote} from "next-mdx-remote/rsc";
+import {getPostDataBySlug} from "@/app/action";
 import {LinkButton} from "@/components/ui/button";
+import {cn} from "@/lib/utils"
 
 export default async function Page({params}: { params: { slug: string } }) {
   const res: any = await getPostDataBySlug(params.slug)
+
   if (!res) {
     return <div>404</div>
   }
@@ -19,40 +21,51 @@ export default async function Page({params}: { params: { slug: string } }) {
           className={styles.page}
       >
 
-
-        <div
-            className={"flex justify-between items-center gap-4 w-full max-w-[50rem]"}
+        <article
+            className={cn(
+                styles.article,
+                'backdrop-blur-2xl bg-white/30 dark:bg-white/10 p-4 ' +
+                'rounded-lg w-full max-w-[50rem] mx-auto mt-4'
+            )}
         >
 
 
-          <Link
-              className='text-blue-500'
-              href={'/'}>
-            <Image
-                className={'invert'}
-                src={CloseIcon}
-                alt={'Back'}
-                width={20}
-                height={20}
-            />
-          </Link>
-
-          <LinkButton
-              variant={'icon'}
-              href={'/'}
+          {/* top bar */}
+          <div
+              className={"flex justify-between items-center gap-4 w-full max-w-[50rem]"}
           >
-            Share
-          </LinkButton>
 
-        </div>
+            {/* close button */}
+            <Link
+                className='text-blue-500'
+                href={'/'}>
+              <Image
+                  className={'dark:invert'}
+                  src={CloseIcon}
+                  alt={'Back'}
+                  width={20}
+                  height={20}
+              />
+            </Link>
 
-        <h1
-            className={"text-[2rem] font-bold text-center"}
-        >
-          {res.title}
-        </h1>
+            {/* share button */}
+            <LinkButton
+                variant={'icon'}
+                href={'/'}
+            >
+              Share
+            </LinkButton>
+
+          </div>
+
+          <h1
+              className={"text-[2rem] font-bold text-center"}
+          >
+            {res.title}
+          </h1>
 
-        <MDXRemote source={res.content}/>
+          <MDXRemote source={res.content}/>
+        </article>
       </section>
   )
 }

client/src/components/section/post.tsx

@@ -10,7 +10,7 @@ async function PostSection() {
   const res: any = await getPostData()
   return (
       <section
-          className={"grid grid-cols-1 gap-4 w-full max-w-3xl p-4"}
+          className={"grid grid-cols-1 gap-4 w-full max-w-3xl p-2"}
       >
         {
           res.map((post: PostData) => {

client/src/components/ui/button.tsx

@@ -55,7 +55,7 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
 Button.displayName = "Button"
 
 
-const LinkButton = React.forwardRef<HTMLAnchorElement, ButtonProps| any>(
+const LinkButton = React.forwardRef<HTMLAnchorElement, ButtonProps | any>(
     ({className, variant, size, asChild = false, ...props}, ref) => {
       const Comp = asChild ? Slot : "a" as any
       return (
@@ -75,4 +75,5 @@ LinkButton.displayName = "LinkButton"
 export {
   Button,
   LinkButton,
-  buttonVariants}
+  buttonVariants
+}

client/src/posts/how-i-develop-my-personal-website.md

@@ -3,10 +3,46 @@ _description: I'm working on a personal website and I'm documenting my process
 _date: 08-06-2023
 _tags: website, nextjs, tailwindcss, mdx, react, nginx, digitalocean, github-actions, vercel
 
-
 ## Introduction
 
-I've been working on my personal website for a while now and I'm documenting my process here. 
-I'm using Next.js, Tailwind CSS, and MDX to build the site. I'm also using React for the frontend and Nginx for the server. 
-I'm hosting the site on DigitalOcean and using GitHub Actions to automate the deployment process. 
+I've been working on my personal website for a while now and I'm documenting my process here.
+I'm using a combination of technologies to build the site and I'm also using some tools to automate the deployment
+process.
+I'm using Next.js, Tailwind CSS, and MDX to build the site. I'm also using React for the frontend and Nginx for the
+server.
+I'm hosting the site on DigitalOcean and using GitHub Actions to automate the deployment process.
 I'm also using Vercel for preview deployments.
+
+## Setting Up The Project
+
+## Building The Site
+
+## Wait, what is SSR!?
+
+Starting on Next.js 12, you can now choose between Server Side Rendering (SSR) and Static Site Generation (SSG) on a
+per-page basis.
+This is a great feature because it allows you to choose the best rendering method for each page of your site.
+
+```javascript
+"use server";
+```
+
+...and for the client side rendering:
+```javascript
+"use client";
+```
+Which will allow us to use some web APIs that are not available on the server side.
+
+## Deployment
+
+## Final Result
+
+(END)
+
+## Also check out my other posts:
+
+- [How I Built My Personal Blog](/post/how-i-develop-my-personal-website)
+
+## References:
+
+- [Next.js](https://nextjs.org/)

docker-compose.prod.yml

@@ -33,6 +33,9 @@ services:
       - cmsnetwork
     volumes:
       - ./volumes/mongo:/data/db
+    command:
+      - sleep
+      - infinity
 
 networks:
   cmsnetwork:

docker-compose.yml

@@ -10,6 +10,7 @@ services:
     tty: true
     ports:
       - 3000:3000
+      - 4000:4000
     volumes:
       - .:/app
       - ./volumes/logs:/app/logs
@@ -22,14 +23,17 @@ services:
 
   mongo:
     container_name: mongo-${PROJECT_NAME}
-    image: mongo:5.0-focal
+    image: mongo:5.0
     tty: true
     ports:
       - 27017:27017
     networks:
       - cmsnetwork
     volumes:
       - ./volumes/mongo:/data/db
+    command:
+      - sleep
+      - infinity
 
 networks:
   cmsnetwork:

src/config/express.config.ts

@@ -1,8 +1,5 @@
 import express, {Application} from 'express';
 import morgan from "morgan";
-import {config as env} from "dotenv";
-
-env();
 
 class ExpressApp {
   private readonly app: Application;

src/index.ts

@@ -1,34 +1,41 @@
 import dotenv from 'dotenv';
 import path from 'path';
 import compression from 'compression';
-// import morgan from "morgan";
 import express from 'express';
-import {AppRouter} from './routes/routes';
-import {connectDB} from './data/mongo-database.config';
-import {ExpressApp} from './config/express.config';
+import { AppRouter } from './routes/routes';
+import { connectDB } from './data/mongo-database.config';
+import { ExpressApp } from './config/express.config';
 
+// Load environment variables from .env file
 dotenv.config({
   path: path.resolve(__dirname, '../.env')
 });
 
 const APP_PORT: string | number = process.env.PORT || 4000;
 
-connectDB().then(r => console.log(r)).catch(e => console.log(e));
+const startServer = async () => {
+  try {
+    // Connect to the database
+    await connectDB();
+    console.log('Database connected successfully');
 
-const Middleware = [
-  express.json,
-  compression
-];
-
-const app: express.Application = new ExpressApp(
-    Middleware,
-    AppRouter
-).getApp();
-
-// app.use(morgan('dev'));
-
-app.listen(APP_PORT,
-    () => {
+    // Create the express application
+    const app: express.Application = new ExpressApp(
+        [
+          express.json(),
+          compression()
+        ],
+        AppRouter
+    ).getApp();
+    // Start the server
+    app.listen(APP_PORT, () => {
       console.log(`[server]: Server is running at http://localhost:${APP_PORT}`);
-    }
-);
+    });
+  } catch (error) {
+    console.error('Failed to start the server:', error);
+    process.exit(1); // Exit with failure
+  }
+};
+
+// noinspection JSIgnoredPromiseFromCall
+startServer();