display article description after title (#4)

inspired by https://p.atrick.org

src/components/Article.astro

@@ -30,15 +30,17 @@ const listFormatter = new Intl.ListFormat("en-GB", {
 >
   <div class="mx-auto mb-16 max-w-prose">
     <h1
-      class="animate-reveal break-words text-start text-4xl font-medium opacity-0"
+      class="animate-reveal break-words text-start text-4xl font-semibold opacity-0"
     >
-      {article.data.title}
+      <span class="text-secondary">{article.data.title}</span><span
+        class="ml-2 text-tertiary">{article.data.description}</span
+      >
     </h1>
     <div
       class="flex animate-reveal flex-col items-start opacity-0 [animation-delay:0.1s]"
     >
       <div
-        class="mt-4 flex flex-col items-start gap-2 text-lg text-tertiary md:flex-row"
+        class="mt-4 flex flex-col items-start gap-2 text-lg text-accent md:flex-row"
       >
         <div class="flex items-center gap-2">
           <Icon name="mdi:calendar" />
@@ -71,7 +73,7 @@ const listFormatter = new Intl.ListFormat("en-GB", {
       </div>
       {
         article.data.extraAuthors ? (
-          <div class="mt-2 flex items-center gap-2 text-tertiary">
+          <div class="mt-2 flex items-center gap-2">
             <p>
               In collaboration with{" "}
               {listFormatter.format(article.data.extraAuthors)}
@@ -82,14 +84,14 @@ const listFormatter = new Intl.ListFormat("en-GB", {
       <ul class="mt-4 flex flex-wrap gap-1">
         {
           article.data.categories.map((category: string) => (
-            <li class="rounded border border-accent bg-accent/50 px-1 py-0.5 text-sm capitalize text-primary invert">
+            <li class="rounded border border-accent bg-accent px-1 py-0.5 text-sm capitalize text-primary">
               {category}
             </li>
           ))
         }
         {
           article.data.tags.map((tag: string) => (
-            <li class="rounded border border-accent bg-accent/50 px-1 py-0.5 text-sm capitalize text-secondary">
+            <li class="rounded border border-accent bg-primary px-1 py-0.5 text-sm capitalize text-accent">
               {tag}
             </li>
           ))

src/components/Footer.astro

@@ -19,9 +19,6 @@ import { Icon } from "astro-icon/components";
       </div>
       <div class="text-left sm:gap-6 md:text-right">
         <div>
-          <h2 class="mb-6 text-sm font-semibold uppercase text-secondary">
-            Sections
-          </h2>
           <ul class="font-medium text-tertiary">
             {
               SITE.NAVLINKS.map((i) => (

src/components/Prose.astro

@@ -1,5 +1,5 @@
 <div
-  class="prose max-w-full prose-headings:text-secondary prose-h1:text-xl prose-h1:font-bold prose-p:max-w-full prose-p:text-pretty prose-p:break-words prose-p:text-lg prose-p:text-tertiary prose-a:text-secondary prose-a:underline prose-a:decoration-tertiary/30 prose-a:decoration-wavy prose-blockquote:border-secondary prose-strong:text-secondary prose-code:whitespace-pre-wrap prose-code:font-semibold prose-code:text-tertiary prose-code:before:content-none prose-code:after:content-none prose-pre:w-fit prose-pre:max-w-full prose-pre:border prose-pre:border-accent prose-pre:bg-accent/50 prose-pre:text-tertiary prose-li:text-tertiary prose-li:marker:text-secondary prose-img:max-h-[90vh] prose-img:w-auto prose-img:max-w-full prose-img:rounded prose-video:max-h-[95vh] prose-video:w-auto prose-video:max-w-full prose-video:rounded"
+  class="prose max-w-full prose-headings:text-secondary prose-h1:text-xl prose-h1:font-bold prose-p:max-w-full prose-p:text-pretty prose-p:break-words prose-p:text-lg prose-p:text-secondary prose-a:text-secondary prose-a:underline prose-a:decoration-tertiary prose-a:decoration-wavy prose-blockquote:border-secondary prose-strong:text-secondary prose-code:whitespace-pre-wrap prose-code:font-semibold prose-code:text-accent prose-code:before:content-none prose-code:after:content-none prose-pre:w-fit prose-pre:max-w-full prose-pre:border prose-pre:border-accent prose-pre:bg-primary prose-li:text-secondary prose-li:marker:text-secondary prose-img:max-h-[90vh] prose-img:w-auto prose-img:max-w-full prose-img:rounded prose-video:max-h-[90vh] prose-video:w-auto prose-video:max-w-full prose-video:rounded"
 >
   <slot />
 </div>

src/components/RelatedArticles.astro

@@ -33,7 +33,7 @@ const next = items[(index + 1) % items.length];
       />
     </a>
     <a href={`/${prev.collection}/${prev.slug}`}>
-      <p class="animate-reveal break-words text-2xl font-medium opacity-0">
+      <p class="animate-reveal break-words text-xl font-medium opacity-0">
         {prev.data.title}
       </p>
     </a>
@@ -42,7 +42,7 @@ const next = items[(index + 1) % items.length];
     class="group flex w-fit flex-row items-center justify-between gap-6 self-end"
   >
     <a href={`/${next.collection}/${next.slug}`}>
-      <p class="animate-reveal break-words text-2xl font-medium opacity-0">
+      <p class="animate-reveal break-words text-xl font-medium opacity-0">
         {next.data.title}
       </p>
     </a>

src/components/Showcase.astro

@@ -1,49 +0,0 @@
----
-import { Image } from "astro:assets";
-import FormattedDate from "@components/FormattedDate.astro";
-
-type Props = {
-  collection: any;
-};
-
-const { collection } = Astro.props;
----
-
-<article
-  class="group relative isolate mx-auto flex w-full flex-col justify-end overflow-hidden rounded-lg px-8 pb-8 pt-40"
->
-  <Image
-    src={collection.data.image.url}
-    alt={collection.data.image.alt}
-    title={collection.data.title}
-    loading="eager"
-    class="absolute inset-0 h-full w-full object-cover duration-300 ease-in-out group-hover:scale-105"
-    fit="cover"
-  />
-  <div
-    class="absolute inset-0 bg-gradient-to-t from-black via-transparent to-transparent"
-  >
-  </div>
-  <a
-    class="absolute inset-0 z-20"
-    href={`/${collection.collection}/${collection.slug}`}
-    aria-label={collection.data.title}></a>
-  <h3
-    class="z-10 mt-3 w-fit text-xl font-medium text-primary dark:text-secondary"
-  >
-    {collection.data.title}
-  </h3>
-  <div
-    class="z-10 w-fit gap-y-1 overflow-hidden text-sm leading-6 text-tertiary"
-  >
-    {
-      collection.data.collection ? (
-        <span>
-          <FormattedDate date={collection.data.date} /> &bull; Collection
-        </span>
-      ) : (
-        <FormattedDate date={collection.data.date} />
-      )
-    }
-  </div>
-</article>

src/components/ShowcasePage.astro

@@ -1,23 +0,0 @@
----
-import Layout from "@layouts/Layout.astro";
-import { SITE } from "@consts";
-import Showcase from "@components/Showcase.astro";
-
-interface Props {
-  content: any;
-  CONSTS: any;
-}
-
-const { content, CONSTS } = Astro.props;
----
-
-<Layout title={SITE.TITLE} description={CONSTS.DESCRIPTION}>
-  <h1 class="animate-reveal break-words text-4xl font-medium opacity-0">
-    {CONSTS.TITLE}
-  </h1>
-  <div
-    class="mt-16 grid animate-reveal grid-cols-1 gap-6 opacity-0 [animation-delay:0.1s] md:grid-cols-3 md:[&>*:nth-child(4n+2)]:col-span-2 md:[&>*:nth-child(4n+3)]:col-span-2 md:[&>*:only-child]:col-span-3"
-  >
-    {content.map((article: any) => <Showcase collection={article} />)}
-  </div>
-</Layout>

src/components/ShowcasePost.astro

@@ -0,0 +1,28 @@
+---
+import FormattedDate from "@components/FormattedDate.astro";
+
+type Props = {
+  collection: any;
+};
+
+const { collection } = Astro.props;
+---
+
+<li>
+  <a
+    class="bg-none hover:bg-tertiary/30"
+    href={`/${collection.collection}/${collection.slug}`}
+  >
+    <article class="flex flex-col">
+      <h3 class="mb-3 text-balance text-xl font-semibold">
+        <span title="Title" class="text-secondary">{collection.data.title}</span
+        ><span title="Description" class="ml-2 text-tertiary"
+          >{collection.data.description}</span
+        >
+      </h3>
+      <time class="block text-sm text-accent"
+        ><FormattedDate date={collection.data.date} /></time
+      >
+    </article>
+  </a>
+</li>

src/components/ShowcaseProject.astro

@@ -0,0 +1,51 @@
+---
+import { Image } from "astro:assets";
+import FormattedDate from "@components/FormattedDate.astro";
+
+type Props = {
+  collection: any;
+};
+
+const { collection } = Astro.props;
+---
+
+<li>
+  <article
+    class="group relative isolate mx-auto flex w-full flex-col justify-end overflow-hidden rounded-lg px-8 pb-8 pt-40"
+  >
+    <Image
+      src={collection.data.image.url}
+      alt={collection.data.image.alt}
+      title={collection.data.title}
+      loading="eager"
+      class="absolute inset-0 h-full w-full object-cover duration-300 ease-in-out group-hover:scale-105"
+      fit="cover"
+    />
+    <div
+      class="absolute inset-0 bg-gradient-to-t from-black via-transparent to-transparent"
+    >
+    </div>
+    <a
+      class="absolute inset-0 z-20"
+      href={`/${collection.collection}/${collection.slug}`}
+      aria-label={collection.data.title}></a>
+    <h3
+      class="z-10 mt-3 w-fit text-xl font-semibold text-primary dark:text-secondary"
+    >
+      {collection.data.title}
+    </h3>
+    <div
+      class="z-10 w-fit gap-y-1 overflow-hidden text-sm leading-6 text-accent"
+    >
+      {
+        collection.data.collection ? (
+          <span>
+            <FormattedDate date={collection.data.date} /> &bull; Collection
+          </span>
+        ) : (
+          <FormattedDate date={collection.data.date} />
+        )
+      }
+    </div>
+  </article>
+</li>