Parse and list blog posts

Author: GRA0007

app/blog/[id]/page.tsx

@@ -3,9 +3,9 @@ import { Fira_Code, Lexend_Zetta } from 'next/font/google'
 import { notFound } from 'next/navigation'
 
 import Section from '/components/Section/Section'
-import { fetchPost } from '/services/blog'
 import Nav from '../../../components/Nav'
 import Socials from '../../../components/Socials'
+import { fetchPost } from '../../../utils/blog'
 
 import styles from './page.module.scss'
 

app/page.tsx

@@ -1,14 +1,18 @@
+import { BlogEntry } from '/components/BlogEntry'
 import { DesignWork } from '/components/DesignWork'
 import { Eyes } from '/components/Eyes'
 import { ProjectCard } from '/components/ProjectCard'
 import { Socials } from '/components/Socials'
 import { DESIGN_WORK } from '/res/designWork'
 import { PROJECTS } from '/res/projects'
+import { fetchBlogPosts } from '/utils/blog'
 import { AllProjects } from './projects'
 
 const projectCards = PROJECTS.map((project) => <ProjectCard key={project.name} {...project} />)
 
 const Home = async () => {
+  const posts = await fetchBlogPosts()
+
   return (
     <>
       <header className="relative flex min-h-[80vh] items-center justify-center overflow-hidden px-12 py-20">
@@ -60,10 +64,14 @@ const Home = async () => {
           ))}
         </section>
 
-        <section className="bg-light px-gutter pb-14 text-dark">
-          <h1 className="mb-10 text-4xl">Blog</h1>
-          {/* {blogPosts?.posts.map((post) => <BlogEntry key={post.id} {...post} />) ?? <p>Failed to load blog posts</p>} */}
-        </section>
+        {posts.length > 0 && (
+          <section className="bg-light pb-14 text-dark">
+            <h1 className="mb-10 px-gutter text-4xl">Blog</h1>
+            {posts.map((post) => (
+              <BlogEntry key={post.slug} number={post.number} slug={post.slug} title={post.title} />
+            ))}
+          </section>
+        )}
       </main>
 
       <footer className="px-gutter py-16 text-center">

components/BlogEntry/BlogEntry.module.scss

@@ -0,0 +1,25 @@
+import { Lexend_Zetta } from 'next/font/google'
+import Link from 'next/link'
+
+const lexendZetta = Lexend_Zetta({ subsets: ['latin'] })
+
+interface BlogEntryProps {
+  slug: string
+  number: number
+  title: string
+}
+
+export const BlogEntry = ({ slug, number, title }: BlogEntryProps) => {
+  return (
+    <Link href={`/blog/${slug}`} className="!no-underline group">
+      <article className="flex items-center gap-3 pr-gutter">
+        <span
+          className={`${lexendZetta.className} block bg-[length:200%_100%] bg-gradient-to-r from-50% from-dark to-50% to-transparent bg-no-repeat py-4 pr-3 pl-gutter font-black text-2xl transition-[background-position-x,color] [background-position-x:100%] group-hover:text-light group-hover:[background-position-x:0]`}
+        >
+          {number.toString().padStart(2, '0')}
+        </span>
+        <span className="underline transition-[font-weight] group-hover:font-semibold">{title}</span>
+      </article>
+    </Link>
+  )
+}

components/BlogEntry/BlogEntry.tsx

@@ -1,5 +1,6 @@
 import { useId } from 'react'
 import type { Project as ProjectProps } from '/res/projects'
+import { getS3Url } from '/utils/getS3Url'
 
 export const ProjectCard = ({ name, description, image, href }: ProjectProps) => {
   const id = useId()
@@ -13,7 +14,7 @@ export const ProjectCard = ({ name, description, image, href }: ProjectProps) =>
     >
       <article>
         <img
-          src={`https://benji-portfolio.s3.ap-southeast-2.amazonaws.com/Portfolio/Projects/${image.src}`}
+          src={getS3Url(`Portfolio/Projects/${image.src}`)}
           alt={image.alt}
           className="aspect-video w-full rounded-2xl bg-current object-cover"
         />

components/BlogEntry/index.tsx

@@ -0,0 +1,17 @@
+import { createEnv } from '@t3-oss/env-nextjs'
+import { z } from 'zod'
+
+export const env = createEnv({
+  server: {
+    AWS_ACCESS_KEY: z.string().min(1),
+    AWS_SECRET_KEY: z.string().min(1),
+  },
+  client: {
+    NEXT_PUBLIC_AWS_REGION: z.string().min(1),
+    NEXT_PUBLIC_AWS_BUCKET: z.string().min(1),
+  },
+  experimental__runtimeEnv: {
+    NEXT_PUBLIC_AWS_REGION: process.env.NEXT_PUBLIC_AWS_REGION,
+    NEXT_PUBLIC_AWS_BUCKET: process.env.NEXT_PUBLIC_AWS_BUCKET,
+  },
+})

components/ProjectCard/index.tsx

@@ -1,5 +1,8 @@
 import type { NextConfig } from 'next'
 
+// Validate env variables
+import '/env'
+
 const nextConfig: NextConfig = {
   poweredByHeader: false,
   experimental: {

env.ts

@@ -10,21 +10,27 @@
     "format": "biome check --fix"
   },
   "dependencies": {
+    "@aws-sdk/client-s3": "^3.717.0",
     "@biomejs/biome": "^1.9.4",
+    "@portaljs/remark-wiki-link": "^1.2.0",
+    "@t3-oss/env-nextjs": "^0.11.1",
     "@tailwindcss/postcss": "4.0.0-beta.8",
     "@types/node": "22.10.2",
     "@types/poisson-disk-sampling": "2.2.4",
     "@types/react": "19.0.2",
     "@types/react-dom": "19.0.2",
     "babel-plugin-react-compiler": "19.0.0-beta-b2e8e9c-20241220",
     "next": "15.1.2",
+    "next-mdx-remote": "^5.0.0",
     "poisson-disk-sampling": "2.3.1",
     "react": "19.0.0",
     "react-dom": "19.0.0",
+    "remark-gfm": "^4.0.0",
     "schema-dts": "^1.1.2",
     "tailwind-merge": "^2.6.0",
     "tailwindcss": "4.0.0-beta.8",
-    "typescript": "5.7.2"
+    "typescript": "5.7.2",
+    "zod": "^3.24.1"
   },
   "packageManager": "[email protected]+sha256.9e534e70afef06374f6126b44bda5760947135ce16a30aef1010e965fb7e3e3e"
 }