From c5e1e5dda7ebc2b51df7ec1f93acf94b95aadd8a Mon Sep 17 00:00:00 2001
From: Troy <hello@troylusty.com>
Date: Thu, 13 Feb 2025 18:55:50 +0000
Subject: [PATCH] feat: reduce page sizing complexity

---
 src/components/Article.astro         | 84 ++++++++++++++--------------
 src/components/Carousel.astro        |  3 +-
 src/components/Footer.astro          |  2 +-
 src/components/FormattedDate.astro   |  7 ++-
 src/components/Header.astro          |  2 +-
 src/components/Prose.astro           |  2 +-
 src/components/RelatedArticles.astro |  2 +-
 src/components/ShowcasePost.astro    | 21 +++----
 src/layouts/Layout.astro             |  7 +--
 src/pages/cv.astro                   | 14 ++---
 src/pages/index.astro                | 16 +++---
 src/pages/posts/index.astro          | 18 +++---
 src/pages/projects/index.astro       | 18 +++---
 13 files changed, 95 insertions(+), 101 deletions(-)

diff --git a/src/components/Article.astro b/src/components/Article.astro
index 99c3601..f09a0eb 100644
--- a/src/components/Article.astro
+++ b/src/components/Article.astro
@@ -28,56 +28,54 @@ const listFormatter = new Intl.ListFormat("en-GB", {
   updated={article.data.updated}
   tags={article.data.tags}
 >
-  <div class="mx-auto mb-8">
-    <h1
-      class="animate-reveal text-start text-2xl font-semibold break-words opacity-0"
+  <h1
+    class="animate-reveal text-start text-3xl font-semibold break-words opacity-0"
+  >
+    <span class="text-secondary">{article.data.title}</span><span
+      class="text-tertiary ml-2">{article.data.description}</span
     >
-      <span class="text-secondary">{article.data.title}</span><span
-        class="text-tertiary ml-2">{article.data.description}</span
-      >
-    </h1>
-    <div
-      class="animate-reveal text-tertiary mt-4 flex flex-row flex-wrap items-start gap-2 opacity-0 [animation-delay:0.1s]"
-    >
-      <div class="flex items-center gap-2">
-        <Icon name="mdi:calendar" />
-        {
-          datesMatch ? (
+  </h1>
+  <div
+    class="animate-reveal text-tertiary flex flex-row flex-wrap items-start gap-2 opacity-0 [animation-delay:0.1s]"
+  >
+    <div class="flex items-center gap-2">
+      <Icon name="mdi:calendar" />
+      {
+        datesMatch ? (
+          <p title="Date">
+            <FormattedDate date={article.data.date} />
+          </p>
+        ) : (
+          <>
             <p title="Date">
               <FormattedDate date={article.data.date} />
             </p>
-          ) : (
-            <>
-              <p title="Date">
-                <FormattedDate date={article.data.date} />
-              </p>
-              <Icon name="mdi:trending-up" />
-              <p title="Updated">
-                <FormattedDate date={article.data.updated} />
-              </p>
-            </>
-          )
-        }
-      </div>
-      {
-        isPost ? (
-          <div class="flex items-center gap-2">
-            <Icon name="mdi:timer" />
-            <p title="Word count">{readingTime(article.body)}</p>
-          </div>
-        ) : null
-      }
-      {
-        article.data.extraAuthors ? (
-          <div class="flex items-center gap-2">
-            <Icon name="mdi:account-plus" />
-            <p title="Collaborators">
-              {listFormatter.format(article.data.extraAuthors)}
+            <Icon name="mdi:trending-up" />
+            <p title="Updated">
+              <FormattedDate date={article.data.updated} />
             </p>
-          </div>
-        ) : null
+          </>
+        )
       }
     </div>
+    {
+      isPost ? (
+        <div class="flex items-center gap-2">
+          <Icon name="mdi:timer" />
+          <p title="Word count">{readingTime(article.body)}</p>
+        </div>
+      ) : null
+    }
+    {
+      article.data.extraAuthors ? (
+        <div class="flex items-center gap-2">
+          <Icon name="mdi:account-plus" />
+          <p title="Collaborators">
+            {listFormatter.format(article.data.extraAuthors)}
+          </p>
+        </div>
+      ) : null
+    }
   </div>
   <div class="animate-reveal mx-auto opacity-0 [animation-delay:0.2s]">
     <Prose>
diff --git a/src/components/Carousel.astro b/src/components/Carousel.astro
index 373339f..3430735 100644
--- a/src/components/Carousel.astro
+++ b/src/components/Carousel.astro
@@ -7,7 +7,6 @@ const { data } = Astro.props;
 ---
 
 <div
-  class="pt-6"
   data-slides={data}
   x-data="{            
     // Sets the time between each slides in milliseconds
@@ -71,7 +70,7 @@ const { data } = Astro.props;
       </div>
     </template>
   </div>
-  <div class="relative min-h-16">
+  <div class="relative min-h-18">
     <template x-for="(slide, index) in slides">
       <div
         x-show="currentSlideIndex == index + 1"
diff --git a/src/components/Footer.astro b/src/components/Footer.astro
index afde5d8..2e48a53 100644
--- a/src/components/Footer.astro
+++ b/src/components/Footer.astro
@@ -4,7 +4,7 @@ import Link from "@components/Link.astro";
 import { Icon } from "astro-icon/components";
 ---
 
-<footer class="mx-auto mt-auto mb-6 w-full max-w-[65ch] pt-24">
+<footer class="mx-auto mt-auto w-full">
   <div class="flex flex-col items-center justify-between gap-2 md:gap-4">
     <span class="text-tertiary text-center text-sm"
       >&copy; {new Date().getFullYear()}
diff --git a/src/components/FormattedDate.astro b/src/components/FormattedDate.astro
index 1176b8f..2575d53 100644
--- a/src/components/FormattedDate.astro
+++ b/src/components/FormattedDate.astro
@@ -1,12 +1,13 @@
 ---
 interface Props {
-  date?: Date;
+  date: Date;
+  className?: string;
 }
 
-const { date = new Date() } = Astro.props;
+const { date = new Date(), className } = Astro.props;
 ---
 
-<time datetime={date.toISOString()}>
+<time datetime={date.toISOString()} class={`${className}`}>
   {
     date.toLocaleDateString("en-GB", {
       day: "2-digit",
diff --git a/src/components/Header.astro b/src/components/Header.astro
index 5b8242f..3cc5860 100644
--- a/src/components/Header.astro
+++ b/src/components/Header.astro
@@ -6,7 +6,7 @@ const pathname = new URL(Astro.request.url).pathname;
 const currentPath = pathname.replace(/\/$/, "");
 ---
 
-<header class="mx-auto mb-8 w-full max-w-[65ch] space-y-6 md:pt-4">
+<header class="mx-auto w-full">
   <nav
     class="md:flex-no-wrap flex w-full flex-wrap justify-between"
     x-data="{ open: false }"
diff --git a/src/components/Prose.astro b/src/components/Prose.astro
index 2651a87..da1722b 100644
--- a/src/components/Prose.astro
+++ b/src/components/Prose.astro
@@ -1,5 +1,5 @@
 <div
-  class="prose 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-secondary prose-a:text-secondary prose-a:underline prose-a:decoration-tertiary prose-a:decoration-wavy prose-strong:text-secondary prose-code:whitespace-pre-wrap prose-code:font-medium prose-code:text-secondary prose-code:before:content-none prose-code:after:content-none 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 max-w-full"
+  class="prose 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-secondary prose-a:text-secondary prose-a:underline prose-a:decoration-tertiary prose-a:decoration-wavy prose-strong:text-secondary prose-code:whitespace-pre-wrap prose-code:font-medium prose-code:text-secondary prose-code:before:content-none prose-code:after:content-none 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-sm prose-video:max-h-[90vh] prose-video:w-auto prose-video:max-w-full prose-video:rounded-sm max-w-full"
 >
   <slot />
 </div>
diff --git a/src/components/RelatedArticles.astro b/src/components/RelatedArticles.astro
index d8ae7aa..0c8de22 100644
--- a/src/components/RelatedArticles.astro
+++ b/src/components/RelatedArticles.astro
@@ -19,7 +19,7 @@ const next = items[(index + 1) % items.length];
 
 {
   items.length > 1 ? (
-    <div class="mx-auto mt-8 flex max-w-prose flex-col-reverse justify-between gap-4 md:flex-row md:gap-0">
+    <div class="mx-auto flex w-full flex-col-reverse items-center justify-between gap-4 md:flex-row">
       <Button
         href={`/${prev.collection}/${prev.slug}`}
         link={`Previous: ${prev.data.title}`}
diff --git a/src/components/ShowcasePost.astro b/src/components/ShowcasePost.astro
index 427f4aa..1111604 100644
--- a/src/components/ShowcasePost.astro
+++ b/src/components/ShowcasePost.astro
@@ -13,16 +13,17 @@ const { collection } = Astro.props;
     class="group hover:bg-tertiary/30 bg-none"
     href={`/${collection.collection}/${collection.slug}`}
   >
-    <article class="flex flex-row items-center justify-between">
-      <h3 class="text-secondary mb-1 font-semibold text-nowrap">
-        {collection.data.title}
-      </h3>
-      <hr
-        class="text-tertiary group-hover:text-secondary mx-6 w-full border-dotted transition-colors duration-300"
-      />
-      <time class="text-accent block text-nowrap"
-        ><FormattedDate date={collection.data.date} /></time
-      >
+    <article class="flex flex-col">
+      <div class="flex flex-col justify-between md:flex-row md:items-center">
+        <h3 class="text-secondary mb-1 font-semibold text-nowrap">
+          {collection.data.title}
+        </h3>
+        <FormattedDate
+          date={collection.data.date}
+          className="text-accent block text-nowrap"
+        />
+      </div>
+      <p class="text-tertiary text-pretty">{collection.data.description}</p>
     </article>
   </a>
 </li>
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
index b69c3c1..da119b5 100644
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -27,13 +27,10 @@ const { title, description, image, date, updated, tags } = Astro.props;
     tags={tags}
   />
   <body
-    class="bg-primary text-secondary flex min-h-screen flex-col justify-start p-4"
+    class="bg-primary text-secondary items mx-auto my-0 flex min-h-screen w-full max-w-[65ch] flex-col justify-start gap-6 p-4 md:my-6"
   >
     <Header />
-    <main
-      class="mx-auto w-full max-w-[65ch] space-y-6"
-      transition:animate="fade"
-    >
+    <main transition:animate="fade" class="flex flex-col gap-6">
       <slot />
     </main>
     <Footer />
diff --git a/src/pages/cv.astro b/src/pages/cv.astro
index 3ef43b3..3377a5d 100644
--- a/src/pages/cv.astro
+++ b/src/pages/cv.astro
@@ -164,11 +164,11 @@ import icon from "public/assets/icon.png";
                   <p class="mb-2 italic lg:inline-block lg:w-3/12 lg:align-top">
                     Task:
                   </p>
-                  <div class="w-full lg:inline-block lg:w-8/12">
+                  <p class="w-full lg:inline-block lg:w-8/12">
                     <Link href="/projects/camouflage-store"
-                      >CMS Migration and Rebrand
-                    </Link>
-                  </div>
+                      >CMS Migration and Rebrand</Link
+                    >
+                  </p>
                 </section>
                 <section class="mb-6">
                   <p class="mb-2 italic lg:inline-block lg:w-3/12 lg:align-top">
@@ -225,9 +225,9 @@ import icon from "public/assets/icon.png";
                   <p class="mb-2 italic lg:inline-block lg:w-3/12 lg:align-top">
                     Deployed to:
                   </p>
-                  <div class="w-full lg:inline-block lg:w-8/12">
+                  <p class="w-full lg:inline-block lg:w-8/12">
                     <Link href="/">troylusty.com</Link>
-                  </div>
+                  </p>
                 </section>
                 <section class="mb-6">
                   <p class="mb-2 italic lg:inline-block lg:w-3/12 lg:align-top">
@@ -255,7 +255,7 @@ import icon from "public/assets/icon.png";
                   <p class="mb-2 italic lg:inline-block lg:w-3/12 lg:align-top">
                     Built with:
                   </p>
-                  <div class="w-full lg:inline-block lg:w-8/12">
+                  <div class="mt-5 w-full lg:inline-block lg:w-8/12">
                     <span class="box">Astro</span>
                     <span class="box">Tailwind CSS</span>
                     <span class="box">Alpine.js</span>
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 1be3454..a93e155 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -14,11 +14,13 @@ const projectsJSON = JSON.stringify(projects);
 ---
 
 <Layout title={HOME.TITLE} description={HOME.DESCRIPTION}>
-  <Hero />
-  <section
-    id="featured-projects"
-    class="animate-reveal opacity-0 [animation-delay:0.1s]"
-  >
-    <Carousel data={projectsJSON} />
-  </section>
+  <div class="block w-full">
+    <Hero />
+    <section
+      id="featured-projects"
+      class="animate-reveal opacity-0 [animation-delay:0.1s]"
+    >
+      <Carousel data={projectsJSON} />
+    </section>
+  </div>
 </Layout>
diff --git a/src/pages/posts/index.astro b/src/pages/posts/index.astro
index 86f76f7..ee89056 100644
--- a/src/pages/posts/index.astro
+++ b/src/pages/posts/index.astro
@@ -10,14 +10,12 @@ const posts = (await getCollection("posts"))
 ---
 
 <Layout title={SITE.TITLE} description={POSTS.DESCRIPTION}>
-  <div class="mx-auto max-w-[65ch]">
-    <h1 class="animate-reveal text-2xl font-semibold break-words opacity-0">
-      {POSTS.TITLE}
-    </h1>
-    <ol
-      class="animate-reveal mt-8 grid grid-cols-1 gap-6 opacity-0 [animation-delay:0.1s]"
-    >
-      {posts.map((article: any) => <ShowcasePost collection={article} />)}
-    </ol>
-  </div>
+  <h1 class="animate-reveal text-3xl font-semibold break-words opacity-0">
+    {POSTS.TITLE}
+  </h1>
+  <ol
+    class="animate-reveal grid grid-cols-1 gap-6 opacity-0 [animation-delay:0.1s]"
+  >
+    {posts.map((article: any) => <ShowcasePost collection={article} />)}
+  </ol>
 </Layout>
diff --git a/src/pages/projects/index.astro b/src/pages/projects/index.astro
index e3f13c5..6132c51 100644
--- a/src/pages/projects/index.astro
+++ b/src/pages/projects/index.astro
@@ -10,14 +10,12 @@ const projects = (await getCollection("projects"))
 ---
 
 <Layout title={SITE.TITLE} description={PROJECTS.DESCRIPTION}>
-  <div class="mx-auto max-w-[65ch]">
-    <h1 class="animate-reveal text-2xl font-semibold break-words opacity-0">
-      {PROJECTS.TITLE}
-    </h1>
-    <ol
-      class="animate-reveal mt-8 grid grid-cols-1 gap-4 opacity-0 [animation-delay:0.1s] md:grid-cols-2"
-    >
-      {projects.map((article: any) => <ShowcaseProject collection={article} />)}
-    </ol>
-  </div>
+  <h1 class="animate-reveal text-3xl font-semibold break-words opacity-0">
+    {PROJECTS.TITLE}
+  </h1>
+  <ol
+    class="animate-reveal grid grid-cols-1 gap-4 opacity-0 [animation-delay:0.1s] md:grid-cols-2"
+  >
+    {projects.map((article: any) => <ShowcaseProject collection={article} />)}
+  </ol>
 </Layout>