modified PostCarousel to use grid, among other things

frontend/components/AuthorCard.tsx

@@ -9,11 +9,13 @@ export default function AuthorCard({
 }) {
   return (
     <div
-      class={isIdentified
+      class={
-        ? "p-6 bg-[#45475a] rounded-lg shadow-md"
+        isIdentified
-        : "p-6 bg-[#45475a] rounded-lg shadow-md transition-all duration-300 ease-in-out hover:shadow-xl hover:scale-105"}
+          ? "p-6 bg-[#313244] shadow-md"
+          : "p-6 bg-[#313244] shadow-md transition-all duration-300 ease-in-out hover:shadow-xl hover:scale-105"
+      }
     >
-      <div class="min-w-screen flex flex-col items-center justify-between bg-[#313244] sm:min-h-screen">
+      <div class="min-w-screen flex flex-col items-center justify-between bg-[#45475a] rounded-lg shadow-md">
         <div class="sm:mt-14 sm:mb-14 mt-12 mb-4 flex flex-col items-center gap-y-5 gap-x-10 md:flex-row">
           <PhotoCircle
             src={author.image ?? "/logo.svg"}

frontend/components/Footer.tsx

@@ -1,3 +1,5 @@
+import * as hi from "jsr:@preact-icons/hi2";
+
 export default function Footer() {
   return (
     <footer class="bg-[#313244] text-[#cdd6f4] py-8">
@@ -7,51 +9,59 @@ export default function Footer() {
           <div class="space-y-2">
             <a
               class="mb-8 text-[#cdd6f4] transition-all duration-300 ease-in-out hover:text-[#cba6f7] hover:drop-shadow-[0_0_20px_rgba(96,165,250,0.7)] hover:scale-110 cursor-pointer visited:text-[#bac2de]"
-              href="/posts.rss"
+              href={`${Deno.env.get("BASE_URI_API")}/posts/rss`}
             >
-              RSS
+              <div class="flex items-center gap-2">
+                <hi.HiOutlineRss />
+                RSS
+              </div>
             </a>
-            <br />
             <a
               class="mb-8 text-[#cdd6f4] transition-all duration-300 ease-in-out hover:text-[#cba6f7] hover:drop-shadow-[0_0_20px_rgba(96,165,250,0.7)] hover:scale-110 cursor-pointer visited:text-[#bac2de]"
               href="/sitemap.xml"
             >
-              Sitemap
+              <div class="flex items-center gap-2">
+                <hi.HiOutlineMap />
+                Sitemap
+              </div>
             </a>
           </div>
 
           <div>
             <a class="mb-8 text-[#cdd6f4] transition-all duration-300 ease-in-out hover:text-[#cba6f7] hover:drop-shadow-[0_0_20px_rgba(96,165,250,0.7)] hover:scale-110 cursor-pointer visited:text-[#bac2de]">
-              Resume
+              <div class="flex items-center gap-2">
+                <hi.HiOutlineBriefcase />
+                Resume
+              </div>
             </a>
-            <br />
             <a
               class="mb-8 text-[#cdd6f4] transition-all duration-300 ease-in-out hover:text-[#cba6f7] hover:drop-shadow-[0_0_20px_rgba(96,165,250,0.7)] hover:scale-110 cursor-pointer visited:text-[#bac2de]"
               href="mailto:wjmiller2016@gmail.com"
             >
-              Email me
+              <div class="flex items-center gap-2">
+                <hi.HiOutlineEnvelope />
+                Email me
+              </div>
             </a>
-            <br />
             <a
               class="mb-8 text-[#cdd6f4] transition-all duration-300 ease-in-out hover:text-[#cba6f7] hover:drop-shadow-[0_0_20px_rgba(96,165,250,0.7)] hover:scale-110 cursor-pointer visited:text-[#bac2de]"
               href="https://x.com/wymillerlinux"
             >
-              X
+              <div class="flex items-center gap-2">X (Twitter)</div>
             </a>
-            <br />
             <a
               class="mb-8 text-[#cdd6f4] transition-all duration-300 ease-in-out hover:text-[#cba6f7] hover:drop-shadow-[0_0_20px_rgba(96,165,250,0.7)] hover:scale-110 cursor-pointer visited:text-[#bac2de]"
               href="https://github.com/wymillerlinux"
             >
-              GitHub
+              <div class="flex items-center gap-2">GitHub</div>
             </a>
           </div>
         </div>
 
         <div class="border-t border-gray-700 mt-8 pt-4 text-center">
           <p class="text-sm text-gray-400">
-            © {new Date().getFullYear()}{" "}
+            © {new Date().getFullYear()} Miller Web Solutions. All Rights
-            Miller Web Solutions. All Rights Reserved. Hosted by Akamai.
+            Reserved. Hosted by Akamai.
           </p>
         </div>
       </div>

frontend/components/PostCard.tsx

@@ -4,7 +4,7 @@ import { truncateString } from "../lib/truncate.ts";
 export const PostCard = function PostCard({ post }: { post: Post }) {
   return (
     <div class="p-6 bg-[#45475a] rounded-lg shadow-md transition-all duration-300 ease-in-out hover:shadow-xl hover:scale-105">
-      <a href={`${Deno.env.get("BASE_URI_WEB")}/posts/${post.post_id}`}>
+      <a href={`${Deno.env.get("BASE_URI_WEB")}/posts/${post.slug}`}>
         <h2 class="text-white text-lg font-bold mb-2">{post.title}</h2>
         <p class="text-white">
           Written by{" "}
@@ -30,4 +30,5 @@ export type Post = {
   title: string;
   body: string;
   created_at: string;
+  slug: string;
 };

frontend/components/PostCarousel.tsx

@@ -6,12 +6,12 @@ interface PostOpts {
 
 export const PostCarousel = function PostCarousel({ posts }: PostOpts) {
   return (
-    <div class="post-carousel flex flex-col items-center justify-between bg-[#313244]">
+    <div className="flex w-full bg-[#313244] p-8">
-      <div class="flex items-center justify-center">
+      <div className="items-center justify-center">
-        <div class="flex space-x-4">
+        <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4 max-w-7xl w-full">
-          {posts.map((post: Post) => {
+          {posts.map((post: Post) => (
-            return <PostCard post={post} />;
+            <PostCard key={post.post_id} post={post} />
-          })}
+          ))}
         </div>
       </div>
     </div>

frontend/routes/posts/index.tsx

@@ -12,7 +12,7 @@ interface PageData {
 }
 
 export const handler: Handlers<PageData> = {
-  async GET(_: any, ctx: any) {
+  async GET(_, ctx) {
     const [featuredResult, recentResult, hotResult, popularResult] =
       await Promise.all([
         fetch(`${Deno.env.get("BASE_URI_API")}/posts/featured`),
@@ -22,8 +22,8 @@ export const handler: Handlers<PageData> = {
       ]);
 
     // parse all JSON responses concurrently
-    const [featuredPosts, recentPosts, hotPosts, popularPosts] = await Promise
+    const [featuredPosts, recentPosts, hotPosts, popularPosts] =
-      .all([
+      await Promise.all([
         featuredResult.json(),
         recentResult.json(),
         hotResult.json(),
@@ -52,7 +52,7 @@ export default function PostPage({ data }: PageProps<PageData>) {
             Featured Posts
           </h2>
         </div>
-        <div className="text-lg font-thin italic text-white text-center flex">
+        <div className="text-lg font-thin italic text-white mb-4 text-center flex">
           Ignite the impossible
         </div>
         <PostCarousel posts={featuredPosts} />