wip: home posts list

app/page.tsx

@@ -1,7 +1,7 @@
 import Image from "next/image";
-import Link from "next/link";
 import { getAssetsDomain } from "@/backend/env"
 import { raleway, syne, questrial } from "@/app/fonts";
+import { HomePostList } from "@/components/homePostList";
 
 export default function Home() {
   return (
@@ -25,38 +25,7 @@ export default function Home() {
             </div>
           </div>
         </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`}
-            >
-              <Image
-                  src={`https://${getAssetsDomain()}/pthumb.webp`}
-                  alt="post thumbnail"
-                  width={454}
-                  height={341}
-              />
-              <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>
+        <HomePostList className={`flex flex-col mx-auto my-8`} />
         <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>