display article description after title (#4)

inspired by https://p.atrick.org

package-lock.json

@@ -2818,9 +2818,9 @@
       "license": "MIT"
     },
     "node_modules/consola": {
-      "version": "3.3.2",
-      "resolved": "https://registry.npmjs.org/consola/-/consola-3.3.2.tgz",
-      "integrity": "sha512-X3dcWPU+QeEaPrdtX3zBRQ0P0kIeEnmJV49uNtpy4N/TPnzA3grJvHftKjHuFIQNLrqBPzzykmc3fNrkQDl5yA==",
+      "version": "3.3.3",
+      "resolved": "https://registry.npmjs.org/consola/-/consola-3.3.3.tgz",
+      "integrity": "sha512-Qil5KwghMzlqd51UXM0b6fyaGHtOC22scxrwrz4A2882LyUMwQjnvaedN1HAeXzphspQ6CpHkzMAWxBTUruDLg==",
       "license": "MIT",
       "engines": {
         "node": "^14.18.0 || >=16.10.0"
@@ -3211,9 +3211,9 @@
       }
     },
     "node_modules/es-module-lexer": {
-      "version": "1.5.4",
-      "resolved": "https://registry.npmjs.org/es-module-lexer/-/es-module-lexer-1.5.4.tgz",
-      "integrity": "sha512-MVNK56NiMrOwitFB7cqDwq0CQutbw+0BvLshJSse0MUNU+y1FC3bUS/AQg7oUng+/wKrrki7JfmwtVHkVfPLlw==",
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/es-module-lexer/-/es-module-lexer-1.6.0.tgz",
+      "integrity": "sha512-qqnD1yMU6tk/jnaMosogGySTZP8YtUgAffA9nMN+E/rjxcfRQ6IEk7IiozUjgxKoFHBGjTLnrHB/YC45r/59EQ==",
       "license": "MIT"
     },
     "node_modules/esast-util-from-estree": {
@@ -6652,20 +6652,21 @@
       }
     },
     "node_modules/regex": {
-      "version": "5.0.2",
-      "resolved": "https://registry.npmjs.org/regex/-/regex-5.0.2.tgz",
-      "integrity": "sha512-/pczGbKIQgfTMRV0XjABvc5RzLqQmwqxLHdQao2RTXPk+pmTXB2P0IaUHYdYyk412YLwUIkaeMd5T+RzVgTqnQ==",
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/regex/-/regex-5.1.0.tgz",
+      "integrity": "sha512-KNCzMdCkhhFKcWnqKIixAKDRzERQ/RTvENLRuLSqNFYdvn/XEgKSrpBHluYqnQxuDnzOB+iZRNGidQeEVe9upw==",
       "license": "MIT",
       "dependencies": {
         "regex-utilities": "^2.3.0"
       }
     },
     "node_modules/regex-recursion": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/regex-recursion/-/regex-recursion-5.0.0.tgz",
-      "integrity": "sha512-UwyOqeobrCCqTXPcsSqH4gDhOjD5cI/b8kjngWgSZbxYh5yVjAwTjO5+hAuPRNiuR70+5RlWSs+U9PVcVcW9Lw==",
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/regex-recursion/-/regex-recursion-5.1.0.tgz",
+      "integrity": "sha512-8PNVYEQEw5fyIGDuLqXMP5WSSjNey+9q+pUFdVqBbPxo9PL8nl7ucZRa3jzooTz7D6wMOHDrCMdwc6fqL60EXw==",
       "license": "MIT",
       "dependencies": {
+        "regex": "^5.1.0",
         "regex-utilities": "^2.3.0"
       }
     },

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>

src/content/projects/mortis/index.mdx

@@ -14,8 +14,6 @@ categories: ["personal"]
 includeHero: true
 ---
 
-> 1 Corinthians 15:26 - The last enemy to be destroyed is death.
-
 ![Final finished artwork for Mortis project](troy-lusty-mortis.avif)
 
 _Final_

src/layouts/Layout.astro

@@ -35,16 +35,6 @@ const { title, description, image, date, updated, tags } = Astro.props;
           <slot />
         </SkinnyCenter>
       </main>
-      <div
-        class="fixed top-[-10px] z-40 h-5 w-screen bg-primary opacity-90 blur"
-        aria-hidden="true"
-      >
-      </div>
-      <div
-        class="fixed bottom-[-10px] z-40 h-5 w-screen bg-primary opacity-90 blur"
-        aria-hidden="true"
-      >
-      </div>
       <Footer />
     </div>
   </body>

src/pages/cv.astro

@@ -14,7 +14,7 @@ import Prose from "@components/Prose.astro";
     <div
       class="flex flex-col items-start justify-between gap-6 md:flex-row md:items-center"
     >
-      <h1 class="animate-reveal break-words text-4xl font-medium opacity-0">
+      <h1 class="animate-reveal break-words text-4xl font-semibold opacity-0">
         Troy Lusty
       </h1>
       <div

src/pages/index.astro

@@ -3,7 +3,8 @@ import Layout from "@layouts/Layout.astro";
 import { HOME } from "@consts";
 import { getCollection } from "astro:content";
 import { Icon } from "astro-icon/components";
-import Showcase from "@components/Showcase.astro";
+import ShowcaseProject from "@components/ShowcaseProject.astro";
+import ShowcasePost from "@components/ShowcasePost.astro";
 
 const posts = (await getCollection("posts"))
   .filter((post) => !post.data.draft)
@@ -21,7 +22,7 @@ const projects = (await getCollection("projects"))
     <div class="group flex flex-row items-center justify-between gap-6">
       <a href="/projects">
         <h2
-          class="animate-reveal break-words text-4xl font-medium opacity-0"
+          class="animate-reveal break-words text-4xl font-semibold opacity-0"
           id="featured-projects"
         >
           Featured projects
@@ -38,17 +39,17 @@ const projects = (await getCollection("projects"))
         />
       </a>
     </div>
-    <div
+    <ol
       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"
     >
-      {projects.map((project) => <Showcase collection={project} />)}
-    </div>
+      {projects.map((project) => <ShowcaseProject collection={project} />)}
+    </ol>
   </section>
   <section aria-labelledby="recent-posts">
     <div class="group flex flex-row items-center justify-between gap-6">
       <a href="/posts">
         <h2
-          class="animate-reveal break-words text-4xl font-medium opacity-0 [animation-delay:0.2s]"
+          class="animate-reveal break-words text-4xl font-semibold opacity-0 [animation-delay:0.2s]"
           id="recent-posts"
         >
           Recent posts
@@ -65,10 +66,10 @@ const projects = (await getCollection("projects"))
         />
       </a>
     </div>
-    <div
-      class="mt-16 grid animate-reveal grid-cols-1 gap-6 opacity-0 [animation-delay:0.3s] 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"
+    <ol
+      class="mt-16 grid animate-reveal grid-cols-1 gap-6 opacity-0 [animation-delay:0.3s]"
     >
-      {posts.map((post) => <Showcase collection={post} />)}
-    </div>
+      {posts.map((post) => <ShowcasePost collection={post} />)}
+    </ol>
   </section>
 </Layout>

src/pages/posts/index.astro

@@ -1,11 +1,21 @@
 ---
 import { getCollection } from "astro:content";
-import { POSTS } from "@consts";
-import ShowcasePage from "@components/ShowcasePage.astro";
+import { SITE, POSTS } from "@consts";
+import ShowcasePost from "@components/ShowcasePost.astro";
+import Layout from "@layouts/Layout.astro";
 
 const posts = (await getCollection("posts"))
   .filter((post) => !post.data.draft)
   .sort((a, b) => b.data.date.valueOf() - a.data.date.valueOf());
 ---
 
-<ShowcasePage content={posts} CONSTS={POSTS} />
+<Layout title={SITE.TITLE} description={POSTS.DESCRIPTION}>
+  <h1 class="animate-reveal break-words text-4xl font-semibold opacity-0">
+    {POSTS.TITLE}
+  </h1>
+  <ol
+    class="mt-16 grid animate-reveal grid-cols-1 gap-6 opacity-0 [animation-delay:0.1s]"
+  >
+    {posts.map((article: any) => <ShowcasePost collection={article} />)}
+  </ol>
+</Layout>

src/pages/projects/index.astro

@@ -1,11 +1,21 @@
 ---
 import { getCollection } from "astro:content";
-import { PROJECTS } from "@consts";
-import ShowcasePage from "@components/ShowcasePage.astro";
+import { PROJECTS, SITE } from "@consts";
+import Layout from "@layouts/Layout.astro";
+import ShowcaseProject from "@components/ShowcaseProject.astro";
 
 const projects = (await getCollection("projects"))
   .filter((project) => !project.data.draft)
   .sort((a, b) => b.data.date.valueOf() - a.data.date.valueOf());
 ---
 
-<ShowcasePage content={projects} CONSTS={PROJECTS} />
+<Layout title={SITE.TITLE} description={PROJECTS.DESCRIPTION}>
+  <h1 class="animate-reveal break-words text-4xl font-semibold opacity-0">
+    {PROJECTS.TITLE}
+  </h1>
+  <ol
+    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"
+  >
+    {projects.map((article: any) => <ShowcaseProject collection={article} />)}
+  </ol>
+</Layout>

src/styles/tailwind.css

@@ -7,17 +7,17 @@
 
 @layer base {
   :root {
-    --primary: 60deg 3.03% 93.53%;
-    --secondary: 60deg 5.56% 7.06%;
-    --tertiary: 45deg 5.13% 30.59%;
-    --accent: 60deg 2.44% 83.92%;
+    --primary: 0deg 0% 99%;
+    --secondary: 0deg 0% 13%;
+    --tertiary: 0deg 0% 51%;
+    --accent: 0deg 0% 39%;
   }
   @media (prefers-color-scheme: dark) {
     :root {
-      --primary: 60deg 3.03% 6.47%;
-      --secondary: 60deg 5.56% 92.94%;
-      --tertiary: 45deg 5.13% 69.41%;
-      --accent: 60deg 2.44% 16.08%;
+      --primary: 0deg 0% 0%;
+      --secondary: 0deg 0% 93%;
+      --tertiary: 0deg 0% 45%;
+      --accent: 0deg 0% 71%;
     }
   }
 }