From 7a609e4a5c7f3fec51d2ba76129e8f5449b597ec Mon Sep 17 00:00:00 2001
From: Emil Gulamov <125820963+mearashadowfax@users.noreply.github.com>
Date: Mon, 19 Feb 2024 17:41:42 +0400
Subject: [PATCH] Refactor components to 'sections' directory and improve SEO

All component files have been moved to a newly created 'sections' directory for better organization. Changes in import paths are reflected in all dependent files. Also, implemented SEO enhancements by adding structured data and default meta descriptions to the Meta component, and adjusted it to accept these values as props from parent components.
---
 src/components/Meta.astro                     | 44 +++++++++++--------
 .../{ => sections}/Authentication.astro       |  0
 .../{ => sections}/ClientsSection.astro       |  0
 .../{ => sections}/ContactSection.astro       |  0
 src/components/{ => sections}/FAQ.astro       |  0
 .../{ => sections}/FeaturesGeneral.astro      |  0
 .../{ => sections}/FeaturesNavs.astro         |  0
 .../{ => sections}/FeaturesStats.astro        |  0
 .../{ => sections}/FeaturesStatsAlt.astro     |  0
 .../{ => sections}/FooterSection.astro        |  0
 .../{ => sections}/HeroSection.astro          |  0
 .../{ => sections}/HeroSectionAlt.astro       |  0
 src/components/{ => sections}/Navbar.astro    |  0
 .../{ => sections}/PricingSection.astro       |  0
 .../{ => sections}/TestimonialsSection.astro  |  0
 .../TestimonialsSectionAlt.astro              |  0
 src/layouts/MainLayout.astro                  |  5 ++-
 src/pages/contact.astro                       |  2 +-
 src/pages/index.astro                         | 16 +++----
 src/pages/products/index.astro                |  9 ++--
 src/pages/services.astro                      |  2 +-
 21 files changed, 41 insertions(+), 37 deletions(-)
 rename src/components/{ => sections}/Authentication.astro (100%)
 rename src/components/{ => sections}/ClientsSection.astro (100%)
 rename src/components/{ => sections}/ContactSection.astro (100%)
 rename src/components/{ => sections}/FAQ.astro (100%)
 rename src/components/{ => sections}/FeaturesGeneral.astro (100%)
 rename src/components/{ => sections}/FeaturesNavs.astro (100%)
 rename src/components/{ => sections}/FeaturesStats.astro (100%)
 rename src/components/{ => sections}/FeaturesStatsAlt.astro (100%)
 rename src/components/{ => sections}/FooterSection.astro (100%)
 rename src/components/{ => sections}/HeroSection.astro (100%)
 rename src/components/{ => sections}/HeroSectionAlt.astro (100%)
 rename src/components/{ => sections}/Navbar.astro (100%)
 rename src/components/{ => sections}/PricingSection.astro (100%)
 rename src/components/{ => sections}/TestimonialsSection.astro (100%)
 rename src/components/{ => sections}/TestimonialsSectionAlt.astro (100%)

diff --git a/src/components/Meta.astro b/src/components/Meta.astro
index 8a0b35d..52c48bc 100644
--- a/src/components/Meta.astro
+++ b/src/components/Meta.astro
@@ -1,15 +1,26 @@
 ---
-// Assign a description using the `meta` prop passed from the parent component,
-// `meta` is used as a variable on each individual page by passing it as a prop to this component.
-// For example, you can pass a meta description to the MainLayout component like this: <MainLayout meta="Page description"/>
-const { meta: description } = Astro.props;
+// Default properties for the Meta component. These values are used if props are not provided.
+// 'title' sets the default page title for the website.
+// 'meta' sets a default description meta tag to describe the page content.
+// 'structuredData' defines default structured data in JSON-LD format to enhance search engine understanding of the page (for SEO purposes).
+const defaultProps = {
+  title: "ScrewFast", // Default title
+  meta: "ScrewFast offers top-tier hardware tools and expert construction services to meet all your project needs. Start exploring and contact our sales team for superior quality and reliability.",
+  structuredData: {
+    "@context": "https://schema.org",
+    "@type": "WebSite",
+    "name": "ScrewFast",
+    "url": "https://screwfast.uk",
+    "description": "ScrewFast offers top-tier hardware tools and expert construction services to meet all your project needs. Start exploring and contact our sales team for superior quality and reliability.",
+  },
+};
 
-interface Props {
-  meta?: string;
-}
+// Extract props with default values assigned from defaultProps. Values can be overridden when the component is used.
+// For example:
+// <MainLayout title="Custom Title" meta="Custom description." />
+const { title = defaultProps.title, meta = defaultProps.meta, structuredData = defaultProps.structuredData } = Astro.props;
 
 // Define the metadata for your website and individual pages
-const title: string = "ScrewFast"; // Set the website title
 const ogTitle: string = "ScrewFast: Hardware Tools & Construction Services"; // Set the Open Graph title
 const author: string = "Emil Gulamov"; // Set the author's name
 const ogDescription: string =
@@ -18,19 +29,14 @@ const URL: string = "https://screwfast.uk"; // Set the website URL
 const socialImage: string = "https://screwfast.uk/social.png"; // Set the URL for the social media image
 ---
 
-<!-- JSON-LD structured data script for the website -->
-<script type="application/ld+json">
-  {
-    "@context": "https://schema.org",
-    "@type": "WebSite",
-    "name": "ScrewFast",
-    "url": "https://screwfast.uk",
-    "description": "ScrewFast offers top-tier hardware tools and expert construction services to meet all your project needs. Start exploring and contact our sales team for superior quality and reliability."
-  }
-</script>
+<!-- Inject structured data into the page if provided. This data is formatted as JSON-LD, a method recommended by Google for structured data pass:
+     https://developers.google.com/search/docs/advanced/structured-data/intro-structured-data -->
+{structuredData && (
+  <script type="application/ld+json" set:html={JSON.stringify(structuredData)}></script>
+)}
 <!-- Define the character set, description, author, and viewport settings -->
 <meta charset="utf-8" />
-<meta content={description} name="description" />
+<meta content={meta} name="description" />
 <meta name="web_author" content={author} />
 <meta
   name="viewport"
diff --git a/src/components/Authentication.astro b/src/components/sections/Authentication.astro
similarity index 100%
rename from src/components/Authentication.astro
rename to src/components/sections/Authentication.astro
diff --git a/src/components/ClientsSection.astro b/src/components/sections/ClientsSection.astro
similarity index 100%
rename from src/components/ClientsSection.astro
rename to src/components/sections/ClientsSection.astro
diff --git a/src/components/ContactSection.astro b/src/components/sections/ContactSection.astro
similarity index 100%
rename from src/components/ContactSection.astro
rename to src/components/sections/ContactSection.astro
diff --git a/src/components/FAQ.astro b/src/components/sections/FAQ.astro
similarity index 100%
rename from src/components/FAQ.astro
rename to src/components/sections/FAQ.astro
diff --git a/src/components/FeaturesGeneral.astro b/src/components/sections/FeaturesGeneral.astro
similarity index 100%
rename from src/components/FeaturesGeneral.astro
rename to src/components/sections/FeaturesGeneral.astro
diff --git a/src/components/FeaturesNavs.astro b/src/components/sections/FeaturesNavs.astro
similarity index 100%
rename from src/components/FeaturesNavs.astro
rename to src/components/sections/FeaturesNavs.astro
diff --git a/src/components/FeaturesStats.astro b/src/components/sections/FeaturesStats.astro
similarity index 100%
rename from src/components/FeaturesStats.astro
rename to src/components/sections/FeaturesStats.astro
diff --git a/src/components/FeaturesStatsAlt.astro b/src/components/sections/FeaturesStatsAlt.astro
similarity index 100%
rename from src/components/FeaturesStatsAlt.astro
rename to src/components/sections/FeaturesStatsAlt.astro
diff --git a/src/components/FooterSection.astro b/src/components/sections/FooterSection.astro
similarity index 100%
rename from src/components/FooterSection.astro
rename to src/components/sections/FooterSection.astro
diff --git a/src/components/HeroSection.astro b/src/components/sections/HeroSection.astro
similarity index 100%
rename from src/components/HeroSection.astro
rename to src/components/sections/HeroSection.astro
diff --git a/src/components/HeroSectionAlt.astro b/src/components/sections/HeroSectionAlt.astro
similarity index 100%
rename from src/components/HeroSectionAlt.astro
rename to src/components/sections/HeroSectionAlt.astro
diff --git a/src/components/Navbar.astro b/src/components/sections/Navbar.astro
similarity index 100%
rename from src/components/Navbar.astro
rename to src/components/sections/Navbar.astro
diff --git a/src/components/PricingSection.astro b/src/components/sections/PricingSection.astro
similarity index 100%
rename from src/components/PricingSection.astro
rename to src/components/sections/PricingSection.astro
diff --git a/src/components/TestimonialsSection.astro b/src/components/sections/TestimonialsSection.astro
similarity index 100%
rename from src/components/TestimonialsSection.astro
rename to src/components/sections/TestimonialsSection.astro
diff --git a/src/components/TestimonialsSectionAlt.astro b/src/components/sections/TestimonialsSectionAlt.astro
similarity index 100%
rename from src/components/TestimonialsSectionAlt.astro
rename to src/components/sections/TestimonialsSectionAlt.astro
diff --git a/src/layouts/MainLayout.astro b/src/layouts/MainLayout.astro
index be91147..98fe466 100644
--- a/src/layouts/MainLayout.astro
+++ b/src/layouts/MainLayout.astro
@@ -5,12 +5,13 @@ import Navbar from "../components/Navbar.astro";
 import FooterSection from "../components/FooterSection.astro";
 
 // Setting expected props - expecting 'title' and 'meta' as options with a default value for title
-const { title = "ScrewFast", meta } = Astro.props;
+const { title = "ScrewFast", meta, structuredData } = Astro.props;
 
 // Interface to type-check the properties
 interface Props {
   title?: string;
   meta?: string;
+  structuredData?: object;
 }
 ---
 
@@ -21,7 +22,7 @@ We set the language of the page to English and add classes for scrollbar and scr
 <html lang="en" class="scrollbar-hide scroll-pt-16">
   <head>
     <!-- Adding metadata to the HTML document -->
-    <Meta meta={meta} />
+    <Meta meta={meta} structuredData={structuredData} />
     <!-- Define the title of the page -->
     <title>{title}</title>
     <script is:inline>
diff --git a/src/pages/contact.astro b/src/pages/contact.astro
index 90cb86b..fdbdf63 100644
--- a/src/pages/contact.astro
+++ b/src/pages/contact.astro
@@ -1,7 +1,7 @@
 ---
 // Import the necessary components
 import MainLayout from "../layouts/MainLayout.astro";
-import ContactSection from "../components/ContactSection.astro";
+import ContactSection from "../components/sections/ContactSection.astro";
 ---
 
 <!--Utilizing MainLayout for the outer layout of the page, and defining meta for SEO purposes-->
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 6e4025a..c4bdc3f 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -1,14 +1,14 @@
 ---
 // Import the necessary components
 import MainLayout from "../layouts/MainLayout.astro";
-import HeroSection from "../components/HeroSection.astro";
-import HeroSectionAlt from "../components/HeroSectionAlt.astro";
-import ClientsSection from "../components/ClientsSection.astro";
-import FeaturesGeneral from "../components/FeaturesGeneral.astro";
-import FeaturesNavs from "../components/FeaturesNavs.astro";
-import TestimonialsSection from "../components/TestimonialsSection.astro";
-import PricingSection from "../components/PricingSection.astro";
-import FAQ from "../components/FAQ.astro";
+import HeroSection from "../components/sections/HeroSection.astro";
+import HeroSectionAlt from "../components/sections/HeroSectionAlt.astro";
+import ClientsSection from "../components/sections/ClientsSection.astro";
+import FeaturesGeneral from "../components/sections/FeaturesGeneral.astro";
+import FeaturesNavs from "../components/sections/FeaturesNavs.astro";
+import TestimonialsSection from "../components/sections/TestimonialsSection.astro";
+import PricingSection from "../components/sections/PricingSection.astro";
+import FAQ from "../components/sections/FAQ.astro";
 ---
 
 <!--Utilizing MainLayout for the outer layout of the page, and defining meta for SEO purposes-->
diff --git a/src/pages/products/index.astro b/src/pages/products/index.astro
index 8cdf6fe..d546778 100644
--- a/src/pages/products/index.astro
+++ b/src/pages/products/index.astro
@@ -4,8 +4,8 @@ import MainLayout from "../../layouts/MainLayout.astro";
 import PrimaryCTA from "../../components/ui/buttons/PrimaryCTA.astro";
 import CardSmall from "../../components/ui/cards/CardSmall.astro";
 import CardWide from "../../components/ui/cards/CardWide.astro";
-import FeaturesStatsAlt from "../../components/FeaturesStatsAlt.astro";
-import TestimonialsSectionAlt from "../../components/TestimonialsSectionAlt.astro";
+import FeaturesStatsAlt from "../../components/sections/FeaturesStatsAlt.astro";
+import TestimonialsSectionAlt from "../../components/sections/TestimonialsSectionAlt.astro";
 
 // Importing necessary functions from Astro
 import { getCollection } from "astro:content";
@@ -26,10 +26,7 @@ const subTitle: string =
 ---
 
 <!--Utilizing MainLayout for the outer layout of the page, and defining meta for SEO purposes-->
-<MainLayout
-  title="Products | ScrewFast"
-  meta="ScrewFast offers top-tier hardware tools and expert construction services to meet all your project needs. Start exploring and contact our sales team for superior quality and reliability."
->
+<MainLayout title="Products | ScrewFast">
   <div
     class="mx-auto max-w-[85rem] px-4 py-10 sm:px-6 lg:px-8 lg:py-14 2xl:max-w-full"
   >
diff --git a/src/pages/services.astro b/src/pages/services.astro
index 4018f01..9e01bd5 100644
--- a/src/pages/services.astro
+++ b/src/pages/services.astro
@@ -4,7 +4,7 @@ import MainLayout from "../layouts/MainLayout.astro";
 import MainSection from "../components/ui/blocks/MainSection.astro";
 import LeftSection from "../components/ui/blocks/LeftSection.astro";
 import RightSection from "../components/ui/blocks/RightSection.astro";
-import FeaturesStats from "../components/FeaturesStats.astro";
+import FeaturesStats from "../components/sections/FeaturesStats.astro";
 
 // Import necessary images
 import blueprints from "../images/blueprints-image.avif";