wip: home posts list

This commit is contained in:
Suyono 2024-06-01 21:58:46 +10:00
parent 1340f2029a
commit 29892a915d
2 changed files with 49 additions and 33 deletions

View File

@ -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>

View File

@ -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>
)
}