From 0d6284cfea329dc6aec3b03caf1f2d21ffbfe569 Mon Sep 17 00:00:00 2001
From: Emil Gulamov <125820963+mearashadowfax@users.noreply.github.com>
Date: Thu, 22 Feb 2024 21:59:24 +0400
Subject: [PATCH] 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                         | 4 ++--
 src/components/sections/features/FeaturesGeneral.astro | 2 ++
 src/components/sections/features/FeaturesStats.astro   | 3 +--
 src/components/ui/avatars/Avatar.astro                 | 3 +--
 src/components/ui/avatars/AvatarBlog.astro             | 5 ++---
 src/components/ui/avatars/AvatarBlogLarge.astro        | 6 +++---
 src/components/ui/cards/CardBlog.astro                 | 5 ++---
 src/components/ui/cards/CardBlogRecent.astro           | 5 +++--
 src/components/ui/cards/CardInsight.astro              | 4 ++--
 src/components/ui/cards/CardRelated.astro              | 7 ++-----
 src/components/ui/cards/CardSmall.astro                | 4 ++--
 src/components/ui/cards/CardWide.astro                 | 4 ++--
 src/components/ui/forms/input/Checkbox.astro           | 3 +--
 src/components/ui/forms/input/EmailContactInput.astro  | 3 +--
 src/components/ui/forms/input/EmailInput.astro         | 2 --
 src/components/ui/forms/input/TextAreaInput.astro      | 2 +-
 src/content/blog/post-1.md                             | 2 +-
 src/content/blog/post-2.md                             | 2 +-
 src/content/blog/post-3.md                             | 2 +-
 19 files changed, 30 insertions(+), 38 deletions(-)

diff --git a/src/components/ThemeIcon.astro b/src/components/ThemeIcon.astro
index a821daa..d2e2196 100644
--- a/src/components/ThemeIcon.astro
+++ b/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 -->
diff --git a/src/components/sections/features/FeaturesGeneral.astro b/src/components/sections/features/FeaturesGeneral.astro
index 599e647..8551372 100644
--- a/src/components/sections/features/FeaturesGeneral.astro
+++ b/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 -->
diff --git a/src/components/sections/features/FeaturesStats.astro b/src/components/sections/features/FeaturesStats.astro
index f157270..184b6e1 100644
--- a/src/components/sections/features/FeaturesStats.astro
+++ b/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;
diff --git a/src/components/ui/avatars/Avatar.astro b/src/components/ui/avatars/Avatar.astro
index fb23364..109939d 100644
--- a/src/components/ui/avatars/Avatar.astro
+++ b/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;
diff --git a/src/components/ui/avatars/AvatarBlog.astro b/src/components/ui/avatars/AvatarBlog.astro
index dfa1440..d104064 100644
--- a/src/components/ui/avatars/AvatarBlog.astro
+++ b/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">;
 }
diff --git a/src/components/ui/avatars/AvatarBlogLarge.astro b/src/components/ui/avatars/AvatarBlogLarge.astro
index 5c7706c..7b94664 100644
--- a/src/components/ui/avatars/AvatarBlogLarge.astro
+++ b/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">;
 }
diff --git a/src/components/ui/cards/CardBlog.astro b/src/components/ui/cards/CardBlog.astro
index 856655b..80d45fc 100644
--- a/src/components/ui/cards/CardBlog.astro
+++ b/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>
diff --git a/src/components/ui/cards/CardBlogRecent.astro b/src/components/ui/cards/CardBlogRecent.astro
index b589fb0..1f16d28 100644
--- a/src/components/ui/cards/CardBlogRecent.astro
+++ b/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>
diff --git a/src/components/ui/cards/CardInsight.astro b/src/components/ui/cards/CardInsight.astro
index 5a37f21..dc99c84 100644
--- a/src/components/ui/cards/CardInsight.astro
+++ b/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">;
 }
diff --git a/src/components/ui/cards/CardRelated.astro b/src/components/ui/cards/CardRelated.astro
index 190909e..217ac0b 100644
--- a/src/components/ui/cards/CardRelated.astro
+++ b/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"
diff --git a/src/components/ui/cards/CardSmall.astro b/src/components/ui/cards/CardSmall.astro
index 8b710ff..2670701 100644
--- a/src/components/ui/cards/CardSmall.astro
+++ b/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">;
 }
diff --git a/src/components/ui/cards/CardWide.astro b/src/components/ui/cards/CardWide.astro
index beca57c..cb22d66 100644
--- a/src/components/ui/cards/CardWide.astro
+++ b/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">;
 }
diff --git a/src/components/ui/forms/input/Checkbox.astro b/src/components/ui/forms/input/Checkbox.astro
index 2aff8a9..bdf0644 100644
--- a/src/components/ui/forms/input/Checkbox.astro
+++ b/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;
diff --git a/src/components/ui/forms/input/EmailContactInput.astro b/src/components/ui/forms/input/EmailContactInput.astro
index 9ec151c..d6e98a2 100644
--- a/src/components/ui/forms/input/EmailContactInput.astro
+++ b/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;
diff --git a/src/components/ui/forms/input/EmailInput.astro b/src/components/ui/forms/input/EmailInput.astro
index 650dd07..8b56e4d 100644
--- a/src/components/ui/forms/input/EmailInput.astro
+++ b/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;
diff --git a/src/components/ui/forms/input/TextAreaInput.astro b/src/components/ui/forms/input/TextAreaInput.astro
index c6944db..83374c9 100644
--- a/src/components/ui/forms/input/TextAreaInput.astro
+++ b/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}
diff --git a/src/content/blog/post-1.md b/src/content/blog/post-1.md
index 4f709e4..0b8fd19 100644
--- a/src/content/blog/post-1.md
+++ b/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"
diff --git a/src/content/blog/post-2.md b/src/content/blog/post-2.md
index 8e52d51..7cd7e5b 100644
--- a/src/content/blog/post-2.md
+++ b/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"
diff --git a/src/content/blog/post-3.md b/src/content/blog/post-3.md
index 2528634..0d4348d 100644
--- a/src/content/blog/post-3.md
+++ b/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"