[site/components,#97][s]: refactor initiative components and layout

site/content/components/InitiativeCard.jsx

@@ -1,18 +1,20 @@
-export default function InitiativeCard({ initiative, image }) {
+import Link from "next/link";
+
+export default function InitiativeCard({ initiative }) {
   return (
     <li className="group relative flex flex-col items-start m-0 p-0">
       <div role="heading" className="text-base font-semibold text-zinc-800 dark:text-zinc-100">
         <div className="absolute -inset-x-4 -inset-y-6 z-0 scale-95 bg-zinc-100 opacity-0 transition group-hover:scale-100 group-hover:opacity-100 dark:bg-zinc-800/50 sm:-inset-x-6 sm:rounded-2xl"></div>
-        <a href={initiative.url_path} className="flex flex-col transition font-medium text-primary group-hover:text-secondary">
+        <Link href={initiative.url_path} className="flex flex-col transition font-medium text-primary group-hover:text-secondary">
           <span className="absolute -inset-x-4 -inset-y-6 z-20 sm:-inset-x-6 sm:rounded-2xl" />
-          {image && <img src={image} className="z-10 w-full aspect-video object-cover object-left m-0" />}
+          {initiative.image && <img src={initiative.image} className="z-10 w-full aspect-video object-cover object-left m-0" />}
           <span className="relative z-10 mt-4">
-            {!image && <svg viewBox="0 0 24 24" aria-hidden="true" className="z-10 h-6 w-6 flex-none float-left">
+            {!initiative.image && <svg viewBox="0 0 24 24" aria-hidden="true" className="z-10 h-6 w-6 flex-none float-left">
               <path fill="currentColor" d="M15.712 11.823a.75.75 0 1 0 1.06 1.06l-1.06-1.06Zm-4.95 1.768a.75.75 0 0 0 1.06-1.06l-1.06 1.06Zm-2.475-1.414a.75.75 0 1 0-1.06-1.06l1.06 1.06Zm4.95-1.768a.75.75 0 1 0-1.06 1.06l1.06-1.06Zm3.359.53-.884.884 1.06 1.06.885-.883-1.061-1.06Zm-4.95-2.12 1.414-1.415L12 6.344l-1.415 1.413 1.061 1.061Zm0 3.535a2.5 2.5 0 0 1 0-3.536l-1.06-1.06a4 4 0 0 0 0 5.656l1.06-1.06Zm4.95-4.95a2.5 2.5 0 0 1 0 3.535L17.656 12a4 4 0 0 0 0-5.657l-1.06 1.06Zm1.06-1.06a4 4 0 0 0-5.656 0l1.06 1.06a2.5 2.5 0 0 1 3.536 0l1.06-1.06Zm-7.07 7.07.176.177 1.06-1.06-.176-.177-1.06 1.06Zm-3.183-.353.884-.884-1.06-1.06-.884.883 1.06 1.06Zm4.95 2.121-1.414 1.414 1.06 1.06 1.415-1.413-1.06-1.061Zm0-3.536a2.5 2.5 0 0 1 0 3.536l1.06 1.06a4 4 0 0 0 0-5.656l-1.06 1.06Zm-4.95 4.95a2.5 2.5 0 0 1 0-3.535L6.344 12a4 4 0 0 0 0 5.656l1.06-1.06Zm-1.06 1.06a4 4 0 0 0 5.657 0l-1.061-1.06a2.5 2.5 0 0 1-3.535 0l-1.061 1.06Zm7.07-7.07-.176-.177-1.06 1.06.176.178 1.06-1.061Z"></path>
             </svg>}{" "}
             {initiative.title}
           </span>
-        </a>
+        </Link>
       </div>
       <p className="relative z-10 mt-2 text-sm text-zinc-600 line-clamp-3">
         {initiative.description}

site/layouts/initiatives.jsx

@@ -1,66 +1,57 @@
 /* eslint import/no-default-export: off */
-import { formatDate } from "@/lib/formatDate.js";
+import Link from "next/link";
 import allPersons from "../.contentlayer/generated/Person/_index.json";
+import { formatDate } from "@/lib/formatDate.js";
 
 export default function InitiativeLayout({ children, frontMatter }) {
-  const { title, image, description, homepage, status, resolution, team, alumni, created, url_path } = frontMatter;
+  const { title, image, description, homepage, status, team, alumni, created } = frontMatter;
 
   const homepageUrl = homepage?.startsWith("http") ? homepage : `https://lifeitself.org/initiatives${homepage}`
   const contributors = allPersons.filter(person => team.concat(alumni).includes(person.id))
-
-  // index page
-  if (url_path === "initiatives") return (
-    <div className="relative mx-auto lg:max-w-4xl px-4 sm:px-16 lg:px-20 mt-16 sm:mt-20 space-y-8">
-      <h1 className="text-4xl font-bold font-headings tracking-tight text-zinc-800 dark:text-zinc-100 sm:text-5xl">{title}</h1>
-      <div className="docs prose prose-headings:font-headings prose-a:break-words lg:col-span-2 lg:max-w-5xl">
-        {children}
-      </div>
-    </div>
-  )
 
   return (
     <div className="relative mx-auto max-w-2xl lg:max-w-5xl px-4 sm:px-16 lg:px-20 mt-16 sm:mt-20">
-      <div className="grid grid-cols-1 gap-y-16 lg:grid-cols-2 lg:gap-y-12 gap-x-20">
+      <div className="grid grid-cols-1 gap-y-12 lg:grid-cols-2 gap-x-20">
         <div className="lg:col-span-2 lg:max-w-xl">
           <h1 className="text-4xl font-bold font-headings tracking-tight text-zinc-800 dark:text-zinc-100 sm:text-5xl">{title}</h1>
           <div className="mt-6 space-y-7 text-base text-zinc-600 dark:text-zinc-400">
             {description}
           </div>
         </div>
-        <div className="lg:row-start-2 lg:col-start-2">
+        <div className="lg:row-start-2 lg:col-start-2 sm:max-w-sm">
           <img alt={title} src={image} width="800" height="800" className="aspect-square shadow-sm rounded-2xl bg-zinc-100 object-cover dark:bg-zinc-800 border" loading="lazy" />
         </div>
         <div className="lg:row-start-2 lg:col-start-1">
-          <div className="max-w-xs lg:max-w-none">
+          <div className="max-w-xs sm:max-w-none">
             <h2 className="text-2xl font-bold font-headings text-primary">Information</h2>
             <dl className="mt-2 px-1 divide-y divide-gray-200 border-b border-t border-gray-200">
               {homepage && homepageUrl && <div className="flex justify-between gap-x-2 py-3 text-sm font-medium">
                 <dt className="text-gray-500">Homepage</dt>
-                <dd className="whitespace-nowrap flex text-gray-900 w-min">
+                <dd className="sm:whitespace-nowrap flex text-gray-900 w-min overflow-x-auto">
                   <a href={homepageUrl} className="underline hover:text-indigo-600">{homepageUrl}</a>
                 </dd>
               </div>}
-              <div className="flex justify-between py-3 text-sm font-medium">
+              {created && <div className="flex justify-between py-3 text-sm font-medium">
                 <dt className="text-gray-500">Created on</dt>
                 <dd className="whitespace-nowrap text-gray-900">{formatDate(created)}</dd>
-              </div>
-              <div className="flex items-center justify-between py-3 text-sm font-medium">
+              </div>}
+              {status && <div className="flex items-center justify-between py-3 text-sm font-medium">
                 <dt className="text-gray-500">Status</dt>
-                <dd className="whitespace-nowrap text-gray-900 text-xs capitalize px-2.5 py-1 ring-1 ring-inset ring-gray-300 rounded-full">{status ?? resolution}</dd>
-              </div>
+                <dd className="whitespace-nowrap text-gray-900 text-xs capitalize px-2.5 py-1 ring-1 ring-inset ring-gray-300 rounded-full">{status}</dd>
+              </div>}
             </dl>
           </div>
           <div className="max-w-xs lg:max-w-none mt-10">
             <h3 className="font-bold font-headings text-2xl text-primary">Contributors</h3>
             <ul role="list" className="mt-2 divide-y divide-gray-200 border-b border-t border-gray-200">
-              {contributors.map((person) => (
+              {contributors?.map((person) => (
                 <li key={person._id} className="group relative flex items-center py-3">
                   <div className="absolute w-full h-full z-0 scale-95 bg-zinc-100 opacity-0 transition group-hover:scale-100 group-hover:opacity-100 dark:bg-zinc-800/50" />
-                  <a href={person.url_path} className="flex items-center px-1">
+                  <Link href={person.url_path} className="flex items-center px-1">
                     <span className="absolute w-full h-full z-20" />
                     <img src={person.avatar} alt="" className="z-10 h-8 w-8 rounded-full" />
                     <p className="z-10 ml-4 text-sm font-medium text-gray-900">{person.name}</p>
-                  </a>
+                  </Link>
                 </li>
               ))}
             </ul>