From c2dda2165b678719405e3c0b00a1c08ed93f2f18 Mon Sep 17 00:00:00 2001 From: Emil Gulamov <125820963+mearashadowfax@users.noreply.github.com> Date: Sun, 18 Feb 2024 07:39:53 +0400 Subject: [PATCH] Update component codebase for readability and maintenance Several component files have been refactored to improve code clarity and ease of maintenance. This includes introducing comprehensive comments explaining the functionality and purpose of sections of the code, as well as leveraging Astro.js for more streamlined data sourcing. The commit also includes the removal of redundant files from the vendor scripts directory as part of a general clean-up, improving overall codebase organization. --- src/components/ClientsSection.astro | 21 ++++---- src/components/ContactSection.astro | 16 ++----- src/components/FAQ.astro | 48 +++++++++++++------ src/components/FeaturesGeneral.astro | 18 +++---- src/components/FeaturesNavs.astro | 10 ++-- src/components/FeaturesStats.astro | 15 ++++-- ...resStats2.astro => FeaturesStatsAlt.astro} | 6 +-- src/components/FooterSection.astro | 11 ++--- .../ui/blocks/ContactIconBlock.astro | 10 ++++ src/components/ui/forms/input/Checkbox.astro | 26 +++++++--- .../ui/forms/input/EmailContactInput.astro | 6 ++- .../ui/forms/input/EmailFooterInput.astro | 6 ++- .../ui/forms/input/EmailInput.astro | 10 +++- .../ui/links/FooterSocialLink.astro | 13 ++--- src/pages/contact.astro | 9 ++-- 15 files changed, 142 insertions(+), 83 deletions(-) rename src/components/{FeaturesStats2.astro => FeaturesStatsAlt.astro} (91%) diff --git a/src/components/ClientsSection.astro b/src/components/ClientsSection.astro index d099ef4..9254e35 100644 --- a/src/components/ClientsSection.astro +++ b/src/components/ClientsSection.astro @@ -1,9 +1,6 @@ --- -// Variables for customization of the LoginModal Component -// Main heading +// Define the variables that will be used in this component const title: string = "Trusted by Industry Leaders"; - -// Sub-heading text const subTitle: string = "Experience the reliability chosen by industry giants."; --- @@ -12,19 +9,21 @@ const subTitle: string = class="mx-auto max-w-[85rem] px-4 py-10 sm:px-6 lg:px-8 lg:py-14 2xl:max-w-full" > -
+

{title}

-

+

{subTitle}

-
+
- +
-

{formTitle}

- + +
@@ -79,8 +74,8 @@ const formSubTitle: string = "We'll get back to you in 1-2 business days.";
- +
- diff --git a/src/components/FAQ.astro b/src/components/FAQ.astro index 86257f7..9013569 100644 --- a/src/components/FAQ.astro +++ b/src/components/FAQ.astro @@ -1,15 +1,16 @@ --- - +// Import the necessary AccordionItem component import AccordionItem from "./ui/blocks/AccordionItem.astro"; - +// Define the string variable `subTitle` to provide additional information. const subTitle: string = "Ask us anything about our brand and products, and get factual responses."; -// Helper function to generate ids +// Define a helper function to generate ids dynamically. const makeId = (base: any, index: any) => `${base}${index + 1}`; - +// Define an array `faqs` that holds the content for the Frequently Asked Questions. const faqs = [ + // Content of each FAQ item goes here { heading: "What types of tools are included in the Starter Kit?", content: @@ -45,7 +46,10 @@ const faqs = [ ]; --- -
+ +
@@ -59,21 +63,37 @@ const faqs = [

- +
- {faqs.map((question, i) => { - // Generate ids dynamically - let id = makeId("hs-basic-with-title-and-arrow-stretched-heading-", i); - let collapseId = makeId("hs-basic-with-title-and-arrow-stretched-collapse", i); + { + faqs.map((question, i) => { + // Generate ids dynamically for each FAQ accordion item. + let id = makeId( + "hs-basic-with-title-and-arrow-stretched-heading-", + i, + ); + let collapseId = makeId( + "hs-basic-with-title-and-arrow-stretched-collapse", + i, + ); - return - })} + return ( + + ); + }) + }
- - \ No newline at end of file + + + diff --git a/src/components/FeaturesGeneral.astro b/src/components/FeaturesGeneral.astro index db5d352..b782c5d 100644 --- a/src/components/FeaturesGeneral.astro +++ b/src/components/FeaturesGeneral.astro @@ -1,13 +1,11 @@ --- -// Import the necessary dependencies from individual component files +// Import the necessary dependencies import { Image } from "astro:assets"; import featureImage from "../images/features-image.avif"; import IconBlock from "./ui/blocks/IconBlock.astro"; -// Main heading +// Define the string variables `title` and `subTitle` for the main heading and sub-heading text respectively. const title: string = "Meeting Industry Demands"; - -// Sub-heading text const subTitle: string = "At ScrewFast, we tackle the unique challenges encountered in the hardware and construction sectors. From cutting-edge tools to expert services, we're dedicated to helping you overcome obstacles and achieve your goals."; --- @@ -15,7 +13,7 @@ const subTitle: string =
- +
- +
+
- +

{title}

- +

@@ -43,9 +42,10 @@ const subTitle: string =

- +
+ ScrewFast's offerings to perfectly suit your hardware and construction needs.`; --- @@ -17,7 +17,7 @@ const title: string = `Customize - +

\ No newline at end of file + + + diff --git a/src/components/FeaturesStats.astro b/src/components/FeaturesStats.astro index ed18326..e445b43 100644 --- a/src/components/FeaturesStats.astro +++ b/src/components/FeaturesStats.astro @@ -1,21 +1,22 @@ --- +// Import the necessary components import StatsBig from "../components/ui/blocks/StatsBig.astro"; import StatsSmall from "../components/ui/blocks/StatsSmall.astro"; - +// Get values from Astro's builtin props const { title, subTitle } = Astro.props; - +// TypeScript interface for the properties interface Props { title: string; subTitle: string; } -/* TypeScript type for testimonials. */ +// TypeScript type for the statistics type Stat = { stat: string; description: string; }; -/* An array of testimonials, each being an object that conforms to the above `Testimonial` type. */ +// An array of statistics, each being an object that conforms to the above `Stat` type const stats: Stat[] = [ { stat: "99.8%", @@ -36,30 +37,36 @@ const stats: Stat[] = [ class="mx-auto max-w-[85rem] px-4 py-10 sm:px-6 lg:px-8 lg:py-14 2xl:max-w-full" >
+

{title}

+

{subTitle}

+
+
+
+ { stats.map((stat) => ( diff --git a/src/components/FeaturesStats2.astro b/src/components/FeaturesStatsAlt.astro similarity index 91% rename from src/components/FeaturesStats2.astro rename to src/components/FeaturesStatsAlt.astro index db7d2c9..e40ca9e 100644 --- a/src/components/FeaturesStats2.astro +++ b/src/components/FeaturesStatsAlt.astro @@ -14,7 +14,7 @@ const benefits: string[] = [ "Customer support dedicated to your project's success.", ]; -const ListItemMarker:string = ``; +const ListItemMarker: string = ``; ---
-