Refactor component code and enhance loading attributes

The commit modifies several components to streamline their code by minimizing extra comments and embedded interfaces. This alteration enhances overall code readability. Furthermore, the 'loading=eager' attribute has been added to image components in CardBlogRecent and CardBlog templates to optimize loading performance by instructing the browser to load these images as soon as possible.

src/components/ThemeIcon.astro

@@ -2,7 +2,7 @@
 <button
   type="button"
   aria-label="Dark Theme Toggle"
-  class="hs-dark-mode group flex items-center font-medium text-neutral-600 outline-none ring-zinc-500 transition duration-300 hover:text-[#fa5a15] hs-dark-mode-active:hidden dark:text-neutral-400 dark:ring-zinc-200 dark:hover:text-[#fb713b] dark:focus:outline-none"
+  class="hs-dark-mode group flex h-8 w-8 items-center justify-center rounded-full font-medium text-neutral-600 outline-none ring-zinc-500 transition duration-300 hover:bg-neutral-200 hover:text-[#fa5a15] hs-dark-mode-active:hidden dark:text-neutral-400 dark:ring-zinc-200 dark:hover:text-[#fb713b] dark:focus:outline-none"
   data-hs-theme-click-value="dark"
 >
   <!-- The SVG displayed shows an abstract icon that represents the moon (dark theme) -->
@@ -24,7 +24,7 @@
 <button
   type="button"
   aria-label="Light Theme Toggle"
-  class="hs-dark-mode group hidden items-center font-medium text-neutral-600 outline-none ring-zinc-500 transition duration-300 hover:text-[#fa5a15] hs-dark-mode-active:block dark:text-neutral-400 dark:ring-zinc-200 dark:hover:text-[#fb713b] dark:focus:outline-none"
+  class="hs-dark-mode group hidden h-8 w-8 items-center justify-center rounded-full font-medium text-neutral-600 outline-none ring-zinc-500 transition duration-300 hover:text-[#fa5a15] hs-dark-mode-active:flex dark:text-neutral-400 dark:ring-zinc-200 dark:hover:bg-neutral-700 dark:hover:text-[#fb713b] dark:focus:outline-none"
   data-hs-theme-click-value="light"
 >
   <!-- The SVG displayed shows a standard sun icon that stands for the light theme -->

src/components/sections/features/FeaturesGeneral.astro

@@ -36,11 +36,13 @@ const subTitle: string =
         {title}
       </h2>
       <!-- Rendering subtitle -->
+      {subTitle &&
       <p
         class="mt-2 text-pretty text-neutral-600 dark:text-neutral-400 md:mt-4"
       >
         {subTitle}
       </p>
+      }
     </div>
 
     <!-- Block to display the IconBlock components -->

src/components/sections/features/FeaturesStats.astro

@@ -2,10 +2,9 @@
 // Import the necessary components
 import StatsBig from "../../ui/blocks/StatsBig.astro";
 import StatsSmall from "../../ui/blocks/StatsSmall.astro";
-// Get values from Astro's builtin props
+
 const { title, subTitle, stats, mainStatTitle, mainStatSubTitle } = Astro.props;
 
-// TypeScript interface for the properties
 interface Props {
   title: string;
   subTitle?: string;

src/components/ui/avatars/Avatar.astro

@@ -1,9 +1,8 @@
 ---
 import { Image } from "astro:assets";
-// Destructure the properties from Astro.props
+
 const { src, alt } = Astro.props;
 
-// Define TypeScript interface for the properties
 interface Props {
   src: string;
   alt: string;

src/components/ui/avatars/AvatarBlog.astro

@@ -1,12 +1,11 @@
 ---
 // Import necessary components
 import { Image } from "astro:assets";
-// Import necessary types
+
 import type { CollectionEntry } from "astro:content";
 
-// Extract blogEntry property from Astro.props
 const { blogEntry } = Astro.props;
-// Define Props interface
+
 interface Props {
   blogEntry: CollectionEntry<"blog">;
 }

src/components/ui/avatars/AvatarBlogLarge.astro

@@ -1,11 +1,11 @@
 ---
 // Import necessary components
 import { Image } from "astro:assets";
-// Import necessary types
+
 import type { CollectionEntry } from "astro:content";
-// Extract blogEntry property from Astro.props
+
 const { blogEntry } = Astro.props;
-// Define Props interface
+
 interface Props {
   blogEntry: CollectionEntry<"blog">;
 }

src/components/ui/cards/CardBlog.astro

@@ -5,10 +5,8 @@ import { Image } from "astro:assets";
 import { formatDate } from "../../../utils/utils";
 import type { CollectionEntry } from "astro:content";
 
-// Define data sources from Astro props
 const { blogEntry } = Astro.props;
 
-// Define TypeScript props interface
 interface Props {
   blogEntry: CollectionEntry<"blog">;
 }
@@ -16,7 +14,7 @@ interface Props {
 
 <!-- The following anchor tag is the main container for the card.
      It's a link to the blog post detailed page.
-     The data-astro-prefetch is a Astro.js specific Dynamic HTML feature,
+     The data-astro-prefetch is an Astro specific Dynamic HTML feature,
      which automatically prefetches the linked page to speed up navigation. -->
 <a
   class="group relative block rounded-xl outline-none ring-zinc-500 transition duration-500 focus-visible:ring dark:ring-zinc-200 dark:focus:outline-none"
@@ -32,6 +30,7 @@ interface Props {
       src={blogEntry.data.cardImage}
       alt={blogEntry.data.cardImageAlt}
       draggable={"false"}
+      loading={"eager"}
       format={"avif"}
     />
   </div>

src/components/ui/cards/CardBlogRecent.astro

@@ -4,9 +4,9 @@ import { Image } from "astro:assets";
 import type { CollectionEntry } from "astro:content";
 import AvatarBlogLarge from "../avatars/AvatarBlogLarge.astro";
 import PrimaryCTA from "../buttons/PrimaryCTA.astro";
-// Define data source from Astro.js incoming props
+
 const { blogEntry } = Astro.props;
-// Define TypeScript props interface
+
 interface Props {
   blogEntry: CollectionEntry<"blog">;
 }
@@ -22,6 +22,7 @@ interface Props {
         src={blogEntry.data.cardImage}
         alt={blogEntry.data.cardImageAlt}
         draggable={"false"}
+        loading={"eager"}
         format={"avif"}
       />
     </div>

src/components/ui/cards/CardInsight.astro

@@ -2,9 +2,9 @@
 // Import necessary modules and utilities
 import { Image } from "astro:assets";
 import type { CollectionEntry } from "astro:content";
-// Define data source from Astro.js incoming props
+
 const { insightEntry } = Astro.props;
-// Define TypeScript props interface
+
 interface Props {
   insightEntry: CollectionEntry<"insights">;
 }

src/components/ui/cards/CardRelated.astro

@@ -3,22 +3,19 @@
 import { Image } from "astro:assets";
 import { formatDate } from "../../../utils/utils";
 import type { CollectionEntry } from "astro:content";
-// Define data source from Astro.js incoming props
+
 const { blogEntry } = Astro.props;
-// Define TypeScript props interface
+
 interface Props {
   blogEntry: CollectionEntry<"blog">;
 }
 ---
 
-<!-- The anchor tag is the main container for the blog preview card. Currently, it links to "#".
-     You might want to change it to the corresponding blog post's URL. -->
 <a
   class="group block rounded-xl outline-none ring-zinc-500 transition duration-300 focus-visible:ring dark:ring-zinc-200 dark:focus:outline-none"
   href={`/blog/${blogEntry.slug}/`}
   data-astro-prefetch
 >
-  <!-- The blog post's cover image. It uses astro:assets' Image for loading the image optimally -->
   <div>
     <Image
       class="aspect-video rounded-xl"

src/components/ui/cards/CardSmall.astro

@@ -2,9 +2,9 @@
 // Import necessary modules and utilities
 import { Image } from "astro:assets";
 import type { CollectionEntry } from "astro:content";
-// Define data source from Astro.js incoming props
+
 const { product } = Astro.props;
-// Define TypeScript props interface
+
 interface Props {
   product: CollectionEntry<"products">;
 }

src/components/ui/cards/CardWide.astro

@@ -2,9 +2,9 @@
 // Import necessary modules and utilities
 import { Image } from "astro:assets";
 import type { CollectionEntry } from "astro:content";
-// Define data source from Astro.js incoming props
+
 const { product } = Astro.props;
-// Define TypeScript props interface
+
 interface Props {
   product: CollectionEntry<"products">;
 }

src/components/ui/forms/input/Checkbox.astro

@@ -1,7 +1,6 @@
 ---
-// Extract label and id from Astro.props with default value for label
 const { label = "Remember me", id } = Astro.props;
-// Define TypeScript interface for the properties
+
 interface Props {
   label?: string;
   id?: string;

src/components/ui/forms/input/EmailContactInput.astro

@@ -1,7 +1,6 @@
 ---
-// Destructure the properties from Astro.props, setting default value for label
 const { label = "Email", id } = Astro.props;
-// Define TypeScript interface for the properties
+
 interface Props {
   label?: string;
   id: string;

src/components/ui/forms/input/EmailInput.astro

@@ -1,8 +1,6 @@
 ---
-// Destructure the properties from Astro.props, setting default value for label
 const { label = "Email address", id, errorId } = Astro.props;
 
-// Define TypeScript interface for the properties
 interface Props {
   label?: string;
   id: string;

src/components/ui/forms/input/TextAreaInput.astro

@@ -9,7 +9,7 @@ interface Props {
 ---
 
 <div>
-  <label for="hs-about-contacts-1" class="sr-only">{label}</label>
+  <label for={id} class="sr-only">{label}</label>
   <textarea
     id={id}
     name={name}

src/content/blog/post-1.md

@@ -3,7 +3,7 @@ title: "Maximizing Efficiency with ScrewFast's Cutting-Edge Tools"
 description: "Innovating Construction Efficiency with Precision Tools & Support"
 author: "Jacob"
 authorImage: "../../images/blog/jacob.avif"
-authorImageAlt: "Image Description"
+authorImageAlt: "Avatar Description"
 pubDate: 2024-02-06
 cardImage: "../../images/blog/post-1.avif"
 cardImageAlt: "Top view mechanical tools arrangement"

src/content/blog/post-2.md

@@ -3,7 +3,7 @@ title: "Enhancing Safety and Workmanship with ScrewFast Construction Services"
 description: "Quality construction services for lasting results"
 author: "Brad"
 authorImage: "../../images/blog/brad.avif"
-authorImageAlt: "Image Description"
+authorImageAlt: "Avatar Description"
 pubDate: 2024-02-10
 cardImage: "../../images/blog/post-2.avif"
 cardImageAlt: "Man in black sweatpants using DEWALT circular saw and cutting a wood plank"

src/content/blog/post-3.md

@@ -4,7 +4,7 @@ description: "Affordable, durable tools for efficient construction projects"
 author: "Olga Zabegina"
 role: "Strategic Marketing Manager"
 authorImage: "../../images/blog/anna.avif"
-authorImageAlt: "Image Description"
+authorImageAlt: "Avatar Description"
 pubDate: 2024-02-18
 cardImage: "../../images/blog/post-3.avif"
 cardImageAlt: "Side view worker wearing gloves"