experiment: change tooling

.gitignore

@@ -25,7 +25,7 @@ yarn-debug.log*
 yarn-error.log*
 
 # local env files
-.env*.local
+.env*
 
 # vercel
 .vercel

.idea/.gitignore

@@ -0,0 +1,5 @@
+# Default ignored files
+/shelf/
+/workspace.xml
+# Editor-based HTTP Client requests
+/httpRequests/

.idea/inspectionProfiles/Project_Default.xml

@@ -0,0 +1,6 @@
+<component name="InspectionProjectProfileManager">
+  <profile version="1.0">
+    <option name="myName" value="Project Default" />
+    <inspection_tool class="Eslint" enabled="true" level="WARNING" enabled_by_default="true" />
+  </profile>
+</component>

.idea/jsLibraryMappings.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="JavaScriptLibraryMappings">
+    <includedPredefinedLibrary name="Node.js Core" />
+  </component>
+</project>

.idea/modules.xml

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ProjectModuleManager">
+    <modules>
+      <module fileurl="file://$PROJECT_DIR$/.idea/nextts.iml" filepath="$PROJECT_DIR$/.idea/nextts.iml" />
+    </modules>
+  </component>
+</project>

.idea/nextts.iml

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<module type="WEB_MODULE" version="4">
+  <component name="NewModuleRootManager">
+    <content url="file://$MODULE_DIR$">
+      <excludeFolder url="file://$MODULE_DIR$/.tmp" />
+      <excludeFolder url="file://$MODULE_DIR$/temp" />
+      <excludeFolder url="file://$MODULE_DIR$/tmp" />
+    </content>
+    <orderEntry type="inheritedJdk" />
+    <orderEntry type="sourceFolder" forTests="false" />
+  </component>
+</module>

.idea/prettier.xml

@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="PrettierConfiguration">
+    <option name="myConfigurationMode" value="MANUAL" />
+    <option name="myRunOnReformat" value="true" />
+  </component>
+</project>

.idea/vcs.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="VcsDirectoryMappings">
+    <mapping directory="" vcs="Git" />
+  </component>
+</project>

.tool-versions

@@ -0,0 +1,3 @@
+nodejs 20.8.1
+yarn 1.22.19
+pnpm 8.9.2

app/about/page.tsx

@@ -0,0 +1,7 @@
+export default function About() {
+    return(
+        <div className={`flex flex-col`}>
+            <p>About</p>
+        </div>
+    )
+}

app/blog/page.tsx

@@ -0,0 +1,7 @@
+export default function Blog() {
+    return(
+        <div className={`flex flex-col`}>
+            <p>Blog Post List</p>
+        </div>
+    )
+}

app/dbcheck/page.tsx

@@ -0,0 +1,21 @@
+import { promisePool } from "@/backend/db";
+import {RowDataPacket} from "mysql2";
+
+async function query() {
+    try {
+        const [rows, fields] = await promisePool.query<RowDataPacket[]>('select slug from post limit 1;')
+        return(rows[0]['slug'] as string)
+    } catch (e) {
+        console.log(e)
+        return('something went wrong')
+    }
+}
+
+export default async function DbCheck() {
+    return(
+        <div className={`flex flex-col`}>
+            <p>Env: { process.env.MYSQL_HOST }</p>
+            <p>Result: { await query() }</p>
+        </div>
+    )
+}

app/fonts.ts

@@ -0,0 +1,23 @@
+import { Raleway, Syne, Questrial, Nunito_Sans } from "next/font/google";
+
+export const raleway = Raleway({
+    subsets: ['latin'],
+    display: "swap",
+})
+
+export const syne = Syne({
+    subsets: ['latin'],
+    display: "swap",
+})
+
+export const questrial = Questrial({
+    subsets: ['latin'],
+    display: "swap",
+    weight: ['400'],
+})
+
+export const nunito_sans = Nunito_Sans({
+    subsets: ['latin'],
+    display: "swap",
+    }
+)

app/globals.css

@@ -1,27 +1,3 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
-
-:root {
-  --foreground-rgb: 0, 0, 0;
-  --background-start-rgb: 214, 219, 220;
-  --background-end-rgb: 255, 255, 255;
-}
-
-@media (prefers-color-scheme: dark) {
-  :root {
-    --foreground-rgb: 255, 255, 255;
-    --background-start-rgb: 0, 0, 0;
-    --background-end-rgb: 0, 0, 0;
-  }
-}
-
-body {
-  color: rgb(var(--foreground-rgb));
-  background: linear-gradient(
-      to bottom,
-      transparent,
-      rgb(var(--background-end-rgb))
-    )
-    rgb(var(--background-start-rgb));
-}

app/globals.css.orig

@@ -0,0 +1,27 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+:root {
+  --foreground-rgb: 0, 0, 0;
+  --background-start-rgb: 214, 219, 220;
+  --background-end-rgb: 255, 255, 255;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --foreground-rgb: 255, 255, 255;
+    --background-start-rgb: 0, 0, 0;
+    --background-end-rgb: 0, 0, 0;
+  }
+}
+
+body {
+  color: rgb(var(--foreground-rgb));
+  background: linear-gradient(
+      to bottom,
+      transparent,
+      rgb(var(--background-end-rgb))
+    )
+    rgb(var(--background-start-rgb));
+}

app/layout.tsx

@@ -1,22 +1,31 @@
-import './globals.css'
-import type { Metadata } from 'next'
-import { Inter } from 'next/font/google'
+import "./globals.css";
+import type { Metadata } from "next";
+import { Inter } from "next/font/google";
+import BlogHeader from "@/components/blogHeader";
+import BlogFooter from "@/components/blogFooter";
+import React from "react";
 
-const inter = Inter({ subsets: ['latin'] })
+const inter = Inter({ subsets: ["latin"] });
 
 export const metadata: Metadata = {
-  title: 'Create Next App',
-  description: 'Generated by create next app',
-}
+  title: "Create Next App",
+  description: "Generated by create next app",
+};
 
 export default function RootLayout({
   children,
 }: {
-  children: React.ReactNode
+  children: React.ReactNode;
 }) {
   return (
     <html lang="en">
-      <body className={inter.className}>{children}</body>
+      <body className={inter.className}>
+        <div className={`flex flex-col bg-white`}>
+          <BlogHeader />
+          {children}
+          <BlogFooter />
+        </div>
+      </body>
     </html>
-  )
+  );
 }

app/page.tsx

@@ -1,113 +1,69 @@
-import Image from 'next/image'
+import Image from "next/image";
+import Link from "next/link";
+import { raleway, syne, questrial } from "@/app/fonts";
 
 export default function Home() {
   return (
-    <main className="flex min-h-screen flex-col items-center justify-between p-24">
-      <div className="z-10 max-w-5xl w-full items-center justify-between font-mono text-sm lg:flex">
-        <p className="fixed left-0 top-0 flex w-full justify-center border-b border-gray-300 bg-gradient-to-b from-zinc-200 pb-6 pt-8 backdrop-blur-2xl dark:border-neutral-800 dark:bg-zinc-800/30 dark:from-inherit lg:static lg:w-auto  lg:rounded-xl lg:border lg:bg-gray-200 lg:p-4 lg:dark:bg-zinc-800/30">
-          Get started by editing&nbsp;
-          <code className="font-mono font-bold">app/page.tsx</code>
-        </p>
-        <div className="fixed bottom-0 left-0 flex h-48 w-full items-end justify-center bg-gradient-to-t from-white via-white dark:from-black dark:via-black lg:static lg:h-auto lg:w-auto lg:bg-none">
-          <a
-            className="pointer-events-none flex place-items-center gap-2 p-8 lg:pointer-events-auto lg:p-0"
-            href="https://vercel.com?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
+    <div className={`flex flex-col`}>
+      <div className={`bg-cover bg-center flex flex-col-reverse bg-blog-cover`}>
+        <div className={`bg-neutral-100 bg-opacity-30 flex flex-col py-10`}>
+          <p className={`${raleway.className} text-white text-center text-7xl font-thin mb-6`}>
+            SUYONO
+          </p>
+          <p className={`${raleway.className} text-white text-center font-thin text-xl mb-10`}>
+            A Tech Archive
+          </p>
+        </div>
+        <div className={`h-64`}></div> {/* spacer */}
+        <div className={`h-64`}></div> {/* spacer */}
+      </div>
+      <div className={`flex flex-row justify-center my-8`}>
+        <div className={`border border-slate-100 flex flex-col`}>
+          <Link
+            href="/post/nginx-ssl-client-certificate-verification-manage-access-to-a-site"
+            className={`flex flex-row max-w-4xl items-center`}
           >
-            By{' '}
             <Image
-              src="/vercel.svg"
-              alt="Vercel Logo"
-              className="dark:invert"
-              width={100}
-              height={24}
-              priority
+              src="/assets/pthumb.webp"
+              alt="post thumbnail"
+              width={454}
+              height={341}
             />
-          </a>
+            <div className={`flex flex-col mx-10`}>
+              <p className={`${syne.className} text-2xl`}>
+                Nginx + SSL Client Certificate Verification: Manage Access to a
+                site
+              </p>
+              <p className={`${questrial.className} line-clamp-3 mt-4`}>
+                Access control is a fundamental part of security. Most entities
+                rely on the combination of username and password, sometimes with
+                additional multi-factor authentication to improve security. Some
+                entities also use the SSL client certificate verification to
+                manage access to specific resources. One of the use cases where
+                SSL client certificate verification fits perfectly is managing
+                access to internet-facing development or staging servers. In
+                this post, I&apos;ll share how to set up the certificates and
+                configure nginx to verify users based on their certificates.
+              </p>
+            </div>
+          </Link>
         </div>
       </div>
-
-      <div className="relative flex place-items-center before:absolute before:h-[300px] before:w-[480px] before:-translate-x-1/2 before:rounded-full before:bg-gradient-radial before:from-white before:to-transparent before:blur-2xl before:content-[''] after:absolute after:-z-20 after:h-[180px] after:w-[240px] after:translate-x-1/3 after:bg-gradient-conic after:from-sky-200 after:via-blue-200 after:blur-2xl after:content-[''] before:dark:bg-gradient-to-br before:dark:from-transparent before:dark:to-blue-700 before:dark:opacity-10 after:dark:from-sky-900 after:dark:via-[#0141ff] after:dark:opacity-40 before:lg:h-[360px] z-[-1]">
-        <Image
-          className="relative dark:drop-shadow-[0_0_0.3rem_#ffffff70] dark:invert"
-          src="/next.svg"
-          alt="Next.js Logo"
-          width={180}
-          height={37}
-          priority
-        />
+      <div className={`flex flex-row bg-teal-50 justify-center`}>
+        <div className={`max-w-4xl py-28 px-10`}>
+          <p className={`text-3xl ${raleway.className}`}>Hi There</p>
+          <p className={`text-base ${raleway.className} my-4`}>
+            a new take on experience is the best teacher
+          </p>
+          <p className={`${raleway.className} text-sm`}>
+            I started this blog as an archive of my experiences and knowledge.
+            By writing them out, I hope it will help me unlearn and relearn the
+            various knowledge and skills I&apos;ve accumulated. I hope the
+            articles, source code examples, and server config examples I wrote
+            will help you somehow. Read on and enjoy!
+          </p>
+        </div>
       </div>
-
-      <div className="mb-32 grid text-center lg:max-w-5xl lg:w-full lg:mb-0 lg:grid-cols-4 lg:text-left">
-        <a
-          href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
-          className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <h2 className={`mb-3 text-2xl font-semibold`}>
-            Docs{' '}
-            <span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
-              -&gt;
-            </span>
-          </h2>
-          <p className={`m-0 max-w-[30ch] text-sm opacity-50`}>
-            Find in-depth information about Next.js features and API.
-          </p>
-        </a>
-
-        <a
-          href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-          className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <h2 className={`mb-3 text-2xl font-semibold`}>
-            Learn{' '}
-            <span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
-              -&gt;
-            </span>
-          </h2>
-          <p className={`m-0 max-w-[30ch] text-sm opacity-50`}>
-            Learn about Next.js in an interactive course with&nbsp;quizzes!
-          </p>
-        </a>
-
-        <a
-          href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
-          className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <h2 className={`mb-3 text-2xl font-semibold`}>
-            Templates{' '}
-            <span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
-              -&gt;
-            </span>
-          </h2>
-          <p className={`m-0 max-w-[30ch] text-sm opacity-50`}>
-            Explore the Next.js 13 playground.
-          </p>
-        </a>
-
-        <a
-          href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
-          className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <h2 className={`mb-3 text-2xl font-semibold`}>
-            Deploy{' '}
-            <span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
-              -&gt;
-            </span>
-          </h2>
-          <p className={`m-0 max-w-[30ch] text-sm opacity-50`}>
-            Instantly deploy your Next.js site to a shareable URL with Vercel.
-          </p>
-        </a>
-      </div>
-    </main>
-  )
+    </div>
+  );
 }

app/post/[slug]/page.tsx

@@ -0,0 +1,82 @@
+import { getPost } from "@/backend/post";
+import DOMPurify from "dompurify";
+import { JSDOM } from "jsdom";
+import { nunito_sans, raleway } from "@/app/fonts";
+import parse, {
+  domToReact,
+  Element,
+  HTMLReactParserOptions,
+} from "html-react-parser";
+import { DummyPostSlug, DummyPostString } from "@/components/dummyPost";
+
+const options: HTMLReactParserOptions = {
+  replace: (domNode) => {
+    if (domNode instanceof Element && domNode.attribs) {
+      // console.log(domNode.attribs)
+      if (domNode.name === "h1") {
+        if (domNode.attribs.class === "title") {
+          return (
+            <h1 className={`${raleway.className} mx-auto w-224 text-4xl`}>
+              {domToReact(domNode.children)}
+            </h1>
+          );
+        } else {
+          return (
+              <h1 className={`${raleway.className} mx-auto w-224 text-3xl`}>
+                  {domToReact(domNode.children)}
+              </h1>
+          );
+        }
+      } else if (domNode.name === "h2") {
+        return (
+            <h1 className={`${raleway.className} mx-auto w-224 text-2xl`}>
+                {domToReact(domNode.children)}
+            </h1>
+        );
+      } else if (domNode.name === "h3") {
+        return (
+            <h1 className={`${raleway.className} mx-auto w-224 text-xl`}>
+                {domToReact(domNode.children)}
+            </h1>
+        );
+      } else if (domNode.name === "p") {
+        if (domNode.attribs.class === "paragraph") {
+          return (
+              <h1 className={`${nunito_sans.className} mx-auto w-224`}>
+                  {domToReact(domNode.children)}
+              </h1>
+          );
+        } else {
+          const classes = domNode.attribs.class.split(" ");
+          if (classes.includes("code")) {
+              if (classes.includes("shell")) {
+
+              } else if (classes.includes("go") || classes.includes("golang")) {
+
+              } else {
+
+              }
+          }
+        }
+      }
+    }
+  },
+};
+
+export default async function Post({ params }: { params: { slug: string } }) {
+  let content = "";
+
+  const dummySlug = await DummyPostSlug();
+  if (dummySlug === params.slug) {
+    content = await DummyPostString();
+    console.log(content);
+  } else {
+    content = await getPost(params.slug);
+  }
+
+  content = DOMPurify(new JSDOM("<!DOCTYPE html>").window).sanitize(content);
+  // console.log(content)
+  const elem = parse(content, options);
+
+  return <div className={`flex flex-col`}>{elem}</div>;
+}

backend/db.ts

@@ -0,0 +1,20 @@
+import mysql, { PoolOptions } from "mysql2";
+
+const access: PoolOptions = {
+    host: process.env.MYSQL_HOST,
+    port: 'MYSQL_PORT' in process.env && typeof process.env.MYSQL_PORT === 'string' ? parseInt(process.env.MYSQL_PORT) : 3306,
+    user: process.env.MYSQL_USER,
+    password: process.env.MYSQL_PASSWORD,
+    database: 'MYSQL_DATABASE' in process.env ? process.env.MYSQL_DATABASE : 'blog',
+    waitForConnections: true,
+    connectionLimit: 10,
+    maxIdle: 10,
+    idleTimeout: 60000,
+    queueLimit: 0,
+    enableKeepAlive: true,
+    keepAliveInitialDelay: 0,
+}
+
+export const pool = mysql.createPool(access)
+
+export const promisePool = pool.promise()

backend/post.ts

@@ -0,0 +1,13 @@
+import { RowDataPacket } from "mysql2";
+import { promisePool } from "@/backend/db";
+
+export async function getPost(slug: string): Promise<string> {
+    try {
+        const [rows, fields] = await promisePool.query<RowDataPacket[]>(
+            'select content from post where slug = ?', [slug])
+        return rows[0]['content']
+    } catch (e) {
+        console.log(e)
+        throw e
+    }
+}

components/blogFooter.tsx

@@ -0,0 +1,13 @@
+import {raleway} from "@/app/fonts";
+
+export default function BlogFooter() {
+    return (
+      <div>
+        <p className={`${raleway.className} text-center text-xl my-10`}>Suyono</p>
+        <p className={`${raleway.className} text-center`}>suyono3484@gmail.com</p>
+        <p className={`${raleway.className} text-center mt-20 mb-10`}>
+          &copy;2023 by Suyono. Built using Next.js
+        </p>
+      </div>
+    );
+}

components/blogHeader.tsx

@@ -0,0 +1,25 @@
+import Link from "next/link";
+import { raleway }from "@/app/fonts";
+
+export default function BlogHeader() {
+    return(
+        <div>
+            <div className="ml-20 py-8">
+                <p className={`${raleway.className} text-2xl font-thin`}>SUYONO</p>
+            </div>
+            <div className="bg-gray-100">
+                <div className="flex flex-row ml-20">
+                    <Link href="/" className={`${raleway.className} m-2 font-thin text-sm`}>
+                        Home
+                    </Link>
+                    <Link href="/about" className={`${raleway.className} m-2 font-thin text-sm`}>
+                        About
+                    </Link>
+                    <Link href="/blog" className={`${raleway.className} m-2 font-thin text-sm`}>
+                        Blog
+                    </Link>
+                </div>
+            </div>
+        </div>
+    )
+}

components/dummyPost.tsx

@@ -0,0 +1,78 @@
+export async function DummyPostString() {
+    const ReactDOMServer = (await import('react-dom/server')).default
+    const component = await DummyPost()
+    return ReactDOMServer.renderToStaticMarkup(component)
+}
+
+export async function DummyPostSlug() {
+    return "dummy-post"
+}
+
+export async function DummyPost() {
+    return(
+        <div>
+            <h1 className="title">Nginx + SSL Client Certificate Verification: Manage access to a site</h1>
+            <p className="paragraph">Access control is a fundamental part of security. Most entities rely on
+                the combination of username and password, sometimes with additional multi-factor authentication
+                to improve security. Some entities also use the SSL client certificate verification to manage access
+                to specific resources. One of the use cases where SSL client certificate verification fits perfectly is
+                managing access to internet-facing development or staging servers. In this post, I&apos;ll share how
+                to set up the certificates and configure nginx to verify users based on their certificates.</p>
+            <h1>Preparing the certificates</h1>
+            <p className="paragraph">There are two certificates we are going to create. The first one is the root
+                certificate. It will be placed in the Nginx server. The second one is the client certificate. It will
+                be installed in the client machine/browsers.</p>
+            <h2>Root CA</h2>
+            <p className="paragraph">For generating a root CA, execute these two steps:</p>
+            <h3>Generate RSA Key</h3>
+            <p className="code">openssl genrsa -aes256 -out ca.key 4096</p>
+            <h3>Create Root CA crt file.</h3>
+            <p className="code">openssl req -new -x509 -days 3650 -key ca.key -out ca.crt</p>
+            <h2>Setup CA configuration</h2>
+            <p className="paragraph">This is an optional step, but if you want to be able to revoke access you
+                previously granted, you need to do this step.</p>
+            <p className="paragraph">Create a file named ca.cnf in the same directory as the ca.key and ca.crt.</p>
+            <p className="code">[ ca ]
+                default_ca = gca
+
+                [ crl_ext ]
+                authorityKeyIdentifier=keyid:always
+
+                [ gca ]
+                dir = ./
+                new_certs_dir = $dir
+                unique_subject = no
+                certificate = $dir/ca.crt
+                database = $dir/certindex
+                private_key = $dir/ca.key
+                serial = $dir/certserial
+                default_days = 365
+                default_md = sha256
+                policy = gca_policy
+                x509_extensions = gca_extensions
+                crlnumber = $dir/crlnumber
+                default_crl_days = 365
+
+                [ gca_policy ]
+                commonName = supplied
+                stateOrProvinceName = supplied
+                countryName = optional
+                emailAddress = optional
+                organizationName = supplied
+                organizationUnitName = optional
+
+                [ gca_extensions ]
+                basicConstraints = CA:false
+                subjectKeyIdentifier = hash
+                authorityKeyIdentifier = keyid:always
+                keyUsage = digitalSignature,keyEncipherment
+                extendedKeyUsage = serverAuth
+                crlDistributionPoints = URI:http://example.com/root.crl
+                subjectAltName = @alt_names
+
+                [ alt_names ]
+                DNS.1 = example.com
+                DNS.2 = *.example.com</p>
+        </div>
+    )
+}

next.config.js

@@ -1,4 +1,9 @@
 /** @type {import('next').NextConfig} */
-const nextConfig = {}
+const nextConfig = {
+    webpack: (config) => {
+        config.externals = [...config.externals, "jsdom"];
+        return config;
+    }
+}
 
 module.exports = nextConfig

package.json

@@ -9,17 +9,27 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@types/dompurify": "^3.0.3",
+    "@types/jsdom": "^21.1.3",
     "@types/node": "20.6.5",
     "@types/react": "18.2.22",
     "@types/react-dom": "18.2.7",
     "autoprefixer": "10.4.16",
+    "dompurify": "^3.0.6",
     "eslint": "8.50.0",
     "eslint-config-next": "13.5.2",
+    "html-react-parser": "^4.2.2",
+    "jsdom": "^22.1.0",
+    "mysql2": "^3.6.1",
     "next": "13.5.2",
     "postcss": "8.4.30",
     "react": "18.2.0",
     "react-dom": "18.2.0",
+    "redis": "^4.6.10",
     "tailwindcss": "3.3.3",
     "typescript": "5.2.2"
+  },
+  "devDependencies": {
+    "prettier": "3.0.3"
   }
 }

tailwind.config.ts

@@ -12,7 +12,11 @@ const config: Config = {
         'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
         'gradient-conic':
           'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',
+        'blog-cover': "url('/assets/placeholder.webp')"
       },
+      width: {
+        '224': '56rem',
+      }
     },
   },
   plugins: [],