remove tags from article header (#6)

troylusty · Dec 28, 2024 · 4487fb0 · 4487fb0
1 parent 01f721f
commit 4487fb0
Show file tree

Hide file tree

Showing 14 changed files with 50 additions and 68 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,10 +1,9 @@
 {
-  "name": "astro",
+  "name": "troylusty.com",
   "type": "module",
   "version": "0.0.1",
   "scripts": {
     "dev": "astro dev",
-    "start": "astro dev",
     "build": "astro check && astro build",
     "preview": "astro preview",
     "astro": "astro",

diff --git a/src/components/Article.astro b/src/components/Article.astro
@@ -37,66 +37,46 @@ const listFormatter = new Intl.ListFormat("en-GB", {
       >
     </h1>
     <div
-      class="flex animate-reveal flex-col items-start opacity-0 [animation-delay:0.1s]"
+      class="mt-4 flex animate-reveal flex-col flex-wrap items-start gap-2 text-lg text-tertiary opacity-0 [animation-delay:0.1s] md:flex-row"
     >
-      <div
-        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" />
-          {
-            datesMatch ? (
+      <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
+              <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="mt-2 flex items-center gap-2">
-            <p>
-              In collaboration with{" "}
+          <div class="flex items-center gap-2">
+            <Icon name="mdi:account-plus" />
+            <p title="Extra authors">
               {listFormatter.format(article.data.extraAuthors)}
             </p>
           </div>
         ) : null
       }
-      <ul class="mt-4 flex flex-wrap gap-1">
-        {
-          article.data.categories.map((category: string) => (
-            <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-primary px-1 py-0.5 text-sm capitalize text-accent">
-              {tag}
-            </li>
-          ))
-        }
-      </ul>
     </div>
   </div>
   <div

diff --git a/src/components/Footer.astro b/src/components/Footer.astro
@@ -26,7 +26,7 @@ import { Icon } from "astro-icon/components";
                   <a
                     data-navlink
                     href={i.href}
-                    class="capitalize hover:text-secondary"
+                    class="capitalize transition-colors hover:text-secondary"
                   >
                     {i.name}
                   </a>
@@ -40,8 +40,9 @@ import { Icon } from "astro-icon/components";
     <div class="mt-12 sm:flex sm:items-center sm:justify-between lg:mt-16">
       <span class="text-sm text-tertiary sm:text-center"
         >&copy; {new Date().getFullYear()}
-        <a href="/" class="hover:text-secondary">{SITE.TITLE}</a>. All Rights
-        Reserved.
+        <a href="/" class="transition-colors hover:text-secondary"
+          >{SITE.TITLE}</a
+        >. All Rights Reserved.
       </span>
       <div class="mt-4 flex gap-5 sm:mt-0 sm:justify-center">
         {
@@ -50,7 +51,7 @@ import { Icon } from "astro-icon/components";
               <Icon
                 name={i.icon}
                 title={i.name}
-                class="h-5 w-5 text-tertiary hover:text-secondary"
+                class="h-5 w-5 text-tertiary transition-colors hover:text-secondary"
               />
             </Link>
           ))

diff --git a/src/components/RelatedArticles.astro b/src/components/RelatedArticles.astro
@@ -24,7 +24,7 @@ const next = items[(index + 1) % items.length];
   <div class="group flex w-fit flex-row items-center justify-between gap-6">
     <a
       href={`/${prev.collection}/${prev.slug}`}
-      class="animate-reveal rounded-full bg-secondary p-1 opacity-0 transition-all ease-in-out group-hover:scale-90 group-hover:bg-tertiary"
+      class="animate-reveal rounded-full bg-secondary p-1 opacity-0 transition-colors group-hover:bg-tertiary"
     >
       <Icon
         name="mdi:arrow-left"
@@ -48,7 +48,7 @@ const next = items[(index + 1) % items.length];
     </a>
     <a
       href={`/${next.collection}/${next.slug}`}
-      class="animate-reveal rounded-full bg-secondary p-1 opacity-0 transition-all ease-in-out group-hover:scale-90 group-hover:bg-tertiary"
+      class="animate-reveal rounded-full bg-secondary p-1 opacity-0 transition-colors group-hover:bg-tertiary"
     >
       <Icon
         name="mdi:arrow-right"

diff --git a/src/components/ShowcasePost.astro b/src/components/ShowcasePost.astro
@@ -10,13 +10,15 @@ const { collection } = Astro.props;
 
 <li>
   <a
-    class="bg-none hover:bg-tertiary/30"
+    class="group 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"
+        ><span
+          title="Description"
+          class="ml-2 text-tertiary transition-colors group-hover:text-accent"
           >{collection.data.description}</span
         >
       </h3>

diff --git a/src/components/ShowcaseProject.astro b/src/components/ShowcaseProject.astro
@@ -18,7 +18,7 @@ const { collection } = Astro.props;
       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"
+      class="absolute inset-0 h-full w-full object-cover transition-transform duration-300 group-hover:scale-105"
       fit="cover"
     />
     <div
@@ -40,7 +40,7 @@ const { collection } = Astro.props;
       {
         collection.data.collection ? (
           <span>
-            <FormattedDate date={collection.data.date} /> &bull; Collection
+            <FormattedDate date={collection.data.date} /> (Collection)
           </span>
         ) : (
           <FormattedDate date={collection.data.date} />

diff --git a/src/content/posts/libreboot-on-an-x230/index.mdx b/src/content/posts/libreboot-on-an-x230/index.mdx
@@ -103,7 +103,7 @@ paru -S flashprog dmidecode
 sudo flashprog -p internal:laptop=force_I_want_a_brick,boardmismatch=force -r dump.bin
 ```
 
-5. Clone Libreboot MaKe and change into the directory.
+5. Clone LibreBoot MaKe and change into the directory.
 
 ```sh
 git clone https://codeberg.org/libreboot/lbmk; cd lbmk

diff --git a/src/content/projects/studying-spider/index.mdx b/src/content/projects/studying-spider/index.mdx
@@ -8,7 +8,7 @@ tags: ["blender"]
 categories: ["personal"]
 ---
 
-Thanks to [Sam](https://www.artstation.com/samgriffiths) for feedback.
+Thanks to [Sam](https://www.artstation.com/samgriffiths) for the feedback.
 
 ![Studying Spider](troy-lusty-studying-spider.avif)
 

diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
@@ -3,7 +3,7 @@ import Head from "@components/Head.astro";
 import Header from "@components/Header.astro";
 import Footer from "@components/Footer.astro";
 import SkinnyCenter from "@components/SkinnyCenter.astro";
-import "@styles/tailwind.css";
+import "@styles/global.css";
 
 interface Props {
   title: string;

diff --git a/src/lib/utils.ts b/src/lib/utils.ts
@@ -10,7 +10,7 @@ export function readingTime(html: string) {
   const textOnly = html.replace(/<[^>]+>/g, "");
   const wordCount = textOnly.split(/\s+/).length;
   const readingTimeMinutes = (wordCount / 200 + 1).toFixed();
-  return `${wordCount} words (~${readingTimeMinutes} min read)`;
+  return `${wordCount} words (${readingTimeMinutes} mins)`;
 }
 
 export function dateRange(startDate: Date, endDate?: Date | string): string {

diff --git a/src/pages/404.astro b/src/pages/404.astro
@@ -11,7 +11,7 @@ import { Icon } from "astro-icon/components";
     >
       <div>
         <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"
         >
           404

diff --git a/src/pages/index.astro b/src/pages/index.astro
@@ -30,7 +30,7 @@ const projects = (await getCollection("projects"))
       </a>
       <a
         href="/projects"
-        class="animate-reveal rounded-full bg-secondary p-1 opacity-0 transition-all ease-in-out group-hover:scale-90 group-hover:bg-tertiary"
+        class="animate-reveal rounded-full bg-secondary p-1 opacity-0 transition-colors group-hover:bg-tertiary"
       >
         <Icon
           name="mdi:arrow-right"
@@ -57,7 +57,7 @@ const projects = (await getCollection("projects"))
       </a>
       <a
         href="/posts"
-        class="animate-reveal rounded-full bg-secondary p-1 opacity-0 transition-all ease-in-out [animation-delay:0.2s] group-hover:scale-90 group-hover:bg-tertiary"
+        class="animate-reveal rounded-full bg-secondary p-1 opacity-0 transition-colors [animation-delay:0.2s] group-hover:bg-tertiary"
       >
         <Icon
           name="mdi:arrow-right"

diff --git a/src/styles/tailwind.css → src/styles/global.css b/src/styles/tailwind.css → src/styles/global.css
-Original file line number
+Diff line change
@@ Expand Up / @@ -11,7 +11,7 @@ import { Icon } from "astro-icon/components"; @@
         >
           <div>
             <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"
             >
@@ Expand Down @@