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>

components/homePostList.tsx

@@ -0,0 +1,47 @@
+import Link from "next/link";
+import Image from "next/image";
+import {getAssetsDomain} from "@/backend/env";
+import {questrial, syne} from "@/app/fonts";
+import { RowDataPacket } from "mysql2";
+import { getPromisePool } from "@/backend/db";
+
+interface post extends RowDataPacket {
+    id: number,
+    slug: string,
+    title: string,
+    preview: string,
+    cover_url: string,
+    cover_alt: string,
+    preview_cover_height: number,
+    preview_cover_width: number,
+}
+
+export type HomePostListProps = {
+    className?: string;
+}
+
+export async function HomePostList(props :HomePostListProps) {
+    const [posts] = await getPromisePool().query<post[]>(
+        'SELECT * FROM post LIMIT 10;'
+    );
+    return (
+        <div className={props.className}>
+            {posts.map(post => (
+                <div key={post.id} className={`border border-slate-100 flex flex-col`}>
+                    <Link
+                        href={`/post/${post.slug}`}
+                        className={`flex flex-row max-w-4xl items-center`} >
+                        <Image src={post.cover_url}
+                               alt={post.cover_alt}
+                               height={post.preview_cover_height}
+                               width={post.preview_cover_width} />
+                        <div className={`flex flex-col mx-10`}>
+                            <p className={`${syne.className} text-2xl`}>{post.title}</p>
+                            <p className={`${questrial.className} line-clamp-3 mt-4`}>{post.preview}</p>
+                        </div>
+                    </Link>
+                </div>
+            ))}
+        </div>
+    )
+}