fix: make article metadata fill container width first

package-lock.json

@@ -13,7 +13,7 @@
         "@astrojs/rss": "^4.0.12",
         "@astrojs/sitemap": "3.4.1",
         "@tailwindcss/vite": "^4.1.8",
-        "astro": "^5.8.2",
+        "astro": "^5.9.0",
         "astro-icon": "^1.1.5",
         "rehype-external-links": "^3.0.0",
         "tailwindcss": "^4.1.8",
@@ -83,9 +83,9 @@
       }
     },
     "node_modules/@astrojs/compiler": {
-      "version": "2.11.0",
+      "version": "2.12.0",
-      "resolved": "https://registry.npmjs.org/@astrojs/compiler/-/compiler-2.11.0.tgz",
+      "resolved": "https://registry.npmjs.org/@astrojs/compiler/-/compiler-2.12.0.tgz",
-      "integrity": "sha512-zZOO7i+JhojO8qmlyR/URui6LyfHJY6m+L9nwyX5GiKD78YoRaZ5tzz6X0fkl+5bD3uwlDHayf6Oe8Fu36RKNg==",
+      "integrity": "sha512-7bCjW6tVDpUurQLeKBUN9tZ5kSv5qYrGmcn0sG0IwacL7isR2ZbyyA3AdZ4uxsuUFOS2SlgReTH7wkxO6zpqWA==",
       "license": "MIT"
     },
     "node_modules/@astrojs/internal-helpers": {
@@ -2455,12 +2455,12 @@
       }
     },
     "node_modules/astro": {
-      "version": "5.8.2",
+      "version": "5.9.0",
-      "resolved": "https://registry.npmjs.org/astro/-/astro-5.8.2.tgz",
+      "resolved": "https://registry.npmjs.org/astro/-/astro-5.9.0.tgz",
-      "integrity": "sha512-t0TBpBdVluA2QVmbFBwpIqmTvBwNhIz1XTIT1BWPkDkoIgsiEMf6BOZqcoGG7f4GVKkUB9bTgMOhPgU3tbJ6vQ==",
+      "integrity": "sha512-AHF7oZDBQRwggHUG0bwBhRQjrDD+vJpCtPd0/GVxDB1hGRV0SQuFWS0UHX5bYczIqFcao1z9o9o0r2rQtHrTMg==",
       "license": "MIT",
       "dependencies": {
-        "@astrojs/compiler": "^2.11.0",
+        "@astrojs/compiler": "^2.12.0",
         "@astrojs/internal-helpers": "0.6.1",
         "@astrojs/markdown-remark": "6.3.2",
         "@astrojs/telemetry": "3.3.0",

package.json

@@ -17,7 +17,7 @@
     "@astrojs/rss": "^4.0.12",
     "@astrojs/sitemap": "3.4.1",
     "@tailwindcss/vite": "^4.1.8",
-    "astro": "^5.8.2",
+    "astro": "^5.9.0",
     "astro-icon": "^1.1.5",
     "rehype-external-links": "^3.0.0",
     "tailwindcss": "^4.1.8",

src/components/Article.astro

@@ -51,7 +51,7 @@ if (article.data.extraAuthors && article.data.extraAuthors.length !== 0) {
   <div
     class="animate-reveal text-tertiary flex flex-row flex-wrap items-start gap-2 font-medium opacity-0 [animation-delay:0.1s]"
   >
-    <div class="flex items-center gap-2">
+    <div class="flex flex-wrap items-center gap-2">
       <Icon name="mdi:calendar" />
       {
         !article.data.updated ? (
@@ -70,26 +70,25 @@ if (article.data.extraAuthors && article.data.extraAuthors.length !== 0) {
           </>
         )
       }
-    </div>
       {
         isPost ? (
-        <div class="flex items-center gap-2">
+          <>
             <Icon name="mdi:timer" />
             <p>{readingTime(article.body)}</p>
-        </div>
+          </>
         ) : null
       }
       {
         article.data.extraAuthors ? (
-        <div class="flex items-center gap-2">
+          <>
             <Icon name="mdi:account-plus" />
             <p set:html={formattedList} />
-        </div>
+          </>
         ) : null
       }
       {
         article.data.tags ? (
-        <div class="flex flex-wrap items-center gap-2">
+          <>
             <Icon name="mdi:tag" />
             {article.data.tags.map((tag: string) => (
               <a
@@ -99,10 +98,11 @@ if (article.data.extraAuthors && article.data.extraAuthors.length !== 0) {
                 {tag}
               </a>
             ))}
-        </div>
+          </>
         ) : null
       }
     </div>
+  </div>
   <div
     class="animate-reveal mx-auto max-w-full opacity-0 [animation-delay:0.2s]"
   >

src/content/projects/camouflage-store/index.mdx

@@ -28,7 +28,6 @@ As of 2024-12-05 the [YouTube channel](https://www.youtube.com/@camouflagestoreu
 Most recently I completed modernising the website which included moving it to [Shopify](https://camouflagestore.uk) from its previous CMS platform. This has resulted in the owner gaining more control over his business as he can now make changes to the site that would have previously required hiring a developer to do. Additionally, the new site is far more modern introducing benefits such as being mobile friendly, fast, and much more secure which will improve the experience for everyone.
 
 ![Camouflage Store homepage as of 2022](camouflage-store-homepage.avif)
-_New design as of 2022_
 
 The default border-radius of buttons was also unable to be changed within the theme so I used Shopify's custom CSS feature to override the default styling on all affected elements. This instantly makes the site look more unique compared to others using the same theme. Additionally, keywords have been added into the HTML head for better SEO using Liquid and a custom product metafeild.
 
@@ -41,7 +40,6 @@ Whilst making these modifications to the theme, I found two bugs. Initially with
 Here's a look at the prior site as it was the day we switched over to using the new redesign.
 
 ![Camouflage Store Previous Design](camouflage-store-previous.avif)
-_Previous design_
 
 ## Branding
 

src/pages/about/index.astro

@@ -143,7 +143,7 @@ const sortedEducation = [...education].sort((a, b) => a.id - b.id);
       </h1>
       <p class="text-secondary/70 max-w-md text-pretty">
         <Link
-          class="inline-flex items-center gap-x-1.5 align-baseline leading-none hover:underline"
+          class="inline-flex items-center gap-x-1.5 align-baseline leading-none hover:underline hover:decoration-2 hover:underline-offset-2"
           href="https://www.google.com/maps/place/Devon"
         >
           <Icon name="mdi:earth" class="h-3 w-3" />
@@ -155,7 +155,7 @@ const sortedEducation = [...education].sort((a, b) => a.id - b.id);
           aria-label="Website"
           class="bg-button text-secondary hover:bg-button-active flex w-fit flex-row items-center gap-1 justify-self-center rounded-full p-2 text-center text-sm text-nowrap capitalize transition-colors duration-300"
         >
-          <Icon name="mdi:link-variant" class="h-4 w-4" />
+          <Icon name="mdi:web" class="h-4 w-4" />
         </Link>
         <Link
           href={`mailto:${SITE.EMAIL}`}
@@ -183,7 +183,7 @@ const sortedEducation = [...education].sort((a, b) => a.id - b.id);
         class="text-secondary/70 hidden max-w-md items-center text-pretty print:flex"
       >
         <Link
-          class="inline-flex gap-x-1.5 align-baseline leading-none hover:underline"
+          class="inline-flex items-center gap-x-1.5 align-baseline leading-none hover:underline"
           href={`mailto:${SITE.EMAIL}`}
         >
           <Icon name="mdi:email" class="h-3 w-3" />
@@ -212,11 +212,9 @@ const sortedEducation = [...education].sort((a, b) => a.id - b.id);
       of 3D environments. Using either real-time or offline rendering techniques
       in software packages such as Blender, Unreal Engine, and more recently: Godot.
       In addition to this I also have an interest in web development, graphic design,
-      and cyber security which all make up a large part of my hobbies not including
+      and cyber security which partially make up my hobbies excluding riding motorbikes.
-      motorbikes. If you're reading this offline, my portfolio of work can be found
+      If you're reading this offline, my portfolio of work can be found on my website
-      on my website at <a
+      at <a href="/projects" class="text-secondary underline hover:no-underline"
-        href="/projects"
-        class="text-secondary underline hover:no-underline"
         >troylusty.com/projects</a
       >.
     </p>
@@ -233,7 +231,7 @@ const sortedEducation = [...education].sort((a, b) => a.id - b.id);
         <p class="text-secondary/70">
           Do you think I'd be a good fit to help out on a project you're working
           on, or maybe just want to chat? <Link
-            href="mailto:hello@troylusty.com"
+            href={`mailto:${SITE.EMAIL}`}
             class="underline hover:no-underline"
           >
             Send me an email!</Link

src/pages/posts/index.astro

@@ -3,7 +3,6 @@ import { getCollection } from "astro:content";
 import { SITE, POSTS } from "@consts";
 import ShowcasePost from "@components/ShowcasePost.astro";
 import Layout from "@layouts/Layout.astro";
-import Link from "@components/Link.astro";
 
 const posts = (await getCollection("posts"))
   .filter((post) => !post.data.draft)
@@ -23,11 +22,11 @@ const posts = (await getCollection("posts"))
       posts.map((article: any) => <ShowcasePost collection={article} />)
     }
   </ol>
-  <div class="flex justify-end">
+  <div class="animate-reveal flex justify-end opacity-0 [animation-delay:0.2s]">
-    <Link
+    <a
       href="/posts.xml"
       class="text-tertiary hover:text-secondary text-xs transition-colors duration-300"
-      >View posts feed</Link
+      >View posts feed</a
     >
   </div>
 </Layout>

src/pages/projects/index.astro

@@ -3,7 +3,6 @@ import { getCollection } from "astro:content";
 import { PROJECTS, SITE } from "@consts";
 import Layout from "@layouts/Layout.astro";
 import ShowcaseProject from "@components/ShowcaseProject.astro";
-import Link from "@components/Link.astro";
 
 const projects = (await getCollection("projects"))
   .filter((project) => !project.data.draft)
@@ -19,11 +18,11 @@ const projects = (await getCollection("projects"))
   >
     {projects.map((article: any) => <ShowcaseProject collection={article} />)}
   </ol>
-  <div class="flex justify-end">
+  <div class="animate-reveal flex justify-end opacity-0 [animation-delay:0.2s]">
-    <Link
+    <a
       href="/projects.xml"
       class="text-tertiary hover:text-secondary text-xs transition-colors duration-300"
-      >View projects feed</Link
+      >View projects feed</a
     >
   </div>
 </Layout>

src/pages/tags/[tag].astro

@@ -62,9 +62,11 @@ const allArticlesWithTag = [...blogPostsWithTag, ...projectsWithTag]
   >
     {allArticlesWithTag.map((article) => <ShowcasePost collection={article} />)}
   </ul>
+  <div class="animate-reveal flex justify-end opacity-0 [animation-delay:0.2s]">
     <a
       href="/tags"
-    class="animate-reveal w-fit underline opacity-0 [animation-delay:0.2s] hover:no-underline"
+      class="text-tertiary hover:text-secondary text-xs transition-colors duration-300"
       >See all tags</a
     >
+  </div>
 </Layout>

src/pages/tags/index.astro

@@ -41,12 +41,14 @@ const allTagsSorted = freqSort(allTags);
   >
     {
       allTagsSorted.map((tag: string) => (
+        <li>
           <a
             href={`/tags/${createSlug(tag)}`}
-          class="underline hover:no-underline"
+            class="bg-button text-secondary hover:bg-button-active flex w-fit flex-row items-center gap-1 justify-self-center rounded-sm px-2 py-1 text-center font-sans text-sm font-light text-nowrap capitalize no-underline transition-colors duration-300"
           >
             {tag}
           </a>
+        </li>
       ))
     }
   </ol>