From 04e8089294b4c365bc8a21558d732c2ca8ddcb52 Mon Sep 17 00:00:00 2001 From: Emil Gulamov <125820963+mearashadowfax@users.noreply.github.com> Date: Sun, 18 Feb 2024 07:39:17 +0400 Subject: [PATCH] Refactor several component files for improved maintainability This commit refactors multiple component files for better understandability and maintainability. Detailed comments are added for enhanced readability. The data source is defined using Astro.js to simplify the process of acquiring data for the components. Unnecessary files like 'preline.js' from the vendor scripts directory are deleted as part of clean-up. --- src/components/Authentication.astro | 9 ++- src/components/ui/avatars/Avatar.astro | 2 + src/components/ui/avatars/AvatarBlog.astro | 7 +- .../ui/avatars/AvatarBlogLarge.astro | 20 +++-- ...2.astro => AvatarTestimonialSection.astro} | 0 src/components/ui/blocks/AccordionItem.astro | 40 ++++++---- src/components/ui/buttons/AuthBtn.astro | 16 ++-- src/components/ui/buttons/Btn404.astro | 33 +++++---- src/components/ui/cards/CardBlog.astro | 13 +++- src/components/ui/cards/CardBlogRecent.astro | 15 ++-- src/components/ui/cards/CardInsight.astro | 74 +++++++++++++------ src/components/ui/cards/CardRelated.astro | 11 ++- src/components/ui/cards/CardSmall.astro | 15 ++-- src/components/ui/cards/CardWide.astro | 15 ++-- src/pages/404.astro | 18 +++-- src/pages/blog/[...slug].astro | 23 ++++-- src/pages/insights/[...slug].astro | 50 ++++++------- src/pages/products/[...slug].astro | 37 +++++++--- 18 files changed, 256 insertions(+), 142 deletions(-) rename src/components/ui/avatars/{AvatarTestimonialSection2.astro => AvatarTestimonialSection.astro} (100%) diff --git a/src/components/Authentication.astro b/src/components/Authentication.astro index 7e0a8fd..69a9e79 100644 --- a/src/components/Authentication.astro +++ b/src/components/Authentication.astro @@ -1,15 +1,16 @@ --- -// Import the necessary dependencies from individual component files +// Import the necessary components from their respective component files import LoginModal from "./ui/forms/LoginModal.astro"; import RegisterModal from "./ui/forms/RegisterModal.astro"; import RecoverModal from "./ui/forms/RecoverModal.astro"; import LoginBtn from "./ui/buttons/LoginBtn.astro"; --- + - + - + - + diff --git a/src/components/ui/avatars/Avatar.astro b/src/components/ui/avatars/Avatar.astro index d39b6ff..5f67be6 100644 --- a/src/components/ui/avatars/Avatar.astro +++ b/src/components/ui/avatars/Avatar.astro @@ -1,6 +1,8 @@ --- +// 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 9e20c2f..dfa1440 100644 --- a/src/components/ui/avatars/AvatarBlog.astro +++ b/src/components/ui/avatars/AvatarBlog.astro @@ -1,14 +1,17 @@ --- +// 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">; } --- +
; } --- +
- {blogEntry.data.authorImageAlt} -
\ No newline at end of file + {blogEntry.data.authorImageAlt} +
diff --git a/src/components/ui/avatars/AvatarTestimonialSection2.astro b/src/components/ui/avatars/AvatarTestimonialSection.astro similarity index 100% rename from src/components/ui/avatars/AvatarTestimonialSection2.astro rename to src/components/ui/avatars/AvatarTestimonialSection.astro diff --git a/src/components/ui/blocks/AccordionItem.astro b/src/components/ui/blocks/AccordionItem.astro index 5dba715..e94dac2 100644 --- a/src/components/ui/blocks/AccordionItem.astro +++ b/src/components/ui/blocks/AccordionItem.astro @@ -1,6 +1,7 @@ --- +// Define props from Astro const { id, collapseId, heading, content, first } = Astro.props; - +// Define TypeScript interface for props interface Props { id: string; collapseId: string; @@ -8,45 +9,58 @@ interface Props { content: string; first?: boolean; } +// Define class names for the accordion and its content const ACCORDION_CLASS_DEFAULT = "hs-accordion pb-3 active"; const ACCORDION_CLASS_COLLAPSED = "hs-accordion pt-6 pb-3"; const ACCORDION_CONTENT_CLASS = "hs-accordion-content w-full overflow-hidden transition-[height] duration-300"; +// Helper function to return the correct class for the accordion function getAccordionClass(first: boolean = false) { return first ? ACCORDION_CLASS_DEFAULT : ACCORDION_CLASS_COLLAPSED; } -const SVG_PARAMS = { - width: "24", - height: "24", - viewBox: "0 0 24 24", - fill: "none", - stroke: "currentColor", - strokeWidth: "2", - strokeLinecap: "round", - strokeLinejoin: "round", -}; --- +
+ +
+

{content}

diff --git a/src/components/ui/buttons/AuthBtn.astro b/src/components/ui/buttons/AuthBtn.astro index 52cf9ce..7aad2a7 100644 --- a/src/components/ui/buttons/AuthBtn.astro +++ b/src/components/ui/buttons/AuthBtn.astro @@ -1,11 +1,14 @@ --- +// Destructure the properties from Astro.props const { title } = Astro.props; +// Define TypeScript interface for the properties interface Props { title: string; } - -const baseClasses = "inline-flex w-full items-center justify-center gap-x-2 rounded-lg px-4 py-3 text-sm font-bold text-neutral-700 focus-visible:ring outline-none transition duration-300"; +// Define CSS classes for styling the button +const baseClasses = + "inline-flex w-full items-center justify-center gap-x-2 rounded-lg px-4 py-3 text-sm font-bold text-neutral-700 focus-visible:ring outline-none transition duration-300"; const borderClasses = "border border-transparent"; const bgColorClasses = "bg-yellow-400 dark:focus:outline-none"; const hoverClasses = "hover:bg-yellow-500"; @@ -13,7 +16,10 @@ const fontSizeClasses = "2xl:text-base"; const disabledClasses = "disabled:pointer-events-none disabled:opacity-50"; const ringClasses = "ring-zinc-500 dark:ring-zinc-200"; --- + + \ No newline at end of file + type="submit" + class={`${baseClasses} ${borderClasses} ${bgColorClasses} ${hoverClasses} ${fontSizeClasses} ${disabledClasses} ${ringClasses}`} + >{title} diff --git a/src/components/ui/buttons/Btn404.astro b/src/components/ui/buttons/Btn404.astro index dc46d43..8026ef4 100644 --- a/src/components/ui/buttons/Btn404.astro +++ b/src/components/ui/buttons/Btn404.astro @@ -1,18 +1,22 @@ --- +// Destructure the properties from Astro.props const { title, id, noArrow } = Astro.props; - +// Define TypeScript interface for the properties interface Props { - title?: string; - id?: string; - noArrow?: boolean; + title?: string; + id?: string; + noArrow?: boolean; } - -const baseClasses = "group inline-flex items-center justify-center gap-x-2 rounded-lg px-4 py-3 text-sm font-bold text-neutral-50 ring-zinc-500 transition duration-300 focus-visible:ring outline-none"; +// Define CSS classes for styling the button +const baseClasses = + "group inline-flex items-center justify-center gap-x-2 rounded-lg px-4 py-3 text-sm font-bold text-neutral-50 ring-zinc-500 transition duration-300 focus-visible:ring outline-none"; const borderClasses = "border border-transparent"; -const bgColorClasses = "bg-[#fa5a15] hover:bg-[#e14d0b] active:bg-[#e14d0b] dark:focus:outline-none"; +const bgColorClasses = + "bg-[#fa5a15] hover:bg-[#e14d0b] active:bg-[#e14d0b] dark:focus:outline-none"; const disableClasses = "disabled:pointer-events-none disabled:opacity-50"; const fontSizeClasses = "2xl:text-base"; const ringClasses = "dark:ring-zinc-200"; +// SVG for an arrow icon const arrowSVG = ``; --- + \ No newline at end of file + {title} + + + {noArrow ? null : } + diff --git a/src/components/ui/cards/CardBlog.astro b/src/components/ui/cards/CardBlog.astro index 732feac..8c0831e 100644 --- a/src/components/ui/cards/CardBlog.astro +++ b/src/components/ui/cards/CardBlog.astro @@ -1,22 +1,29 @@ --- +// Import necessary components and utilities import AvatarBlog from "../avatars/AvatarBlog.astro"; import { Image } from "astro:assets"; - import { formatDate } from "../../../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">; } --- + +
@@ -28,7 +35,7 @@ interface Props { format={"avif"} />
- +
@@ -45,7 +52,7 @@ interface Props {
- +

; } --- +
+
- +
+

@@ -36,7 +39,7 @@ interface Props { {blogEntry.data.description}

- +
@@ -49,7 +52,7 @@ interface Props {

- +
; + insightEntry: CollectionEntry<"insights">; } --- - -
- {insightEntry.data.cardImageAlt} -
- -
-

- {insightEntry.data.title} -

-

+ + + +

+ {insightEntry.data.cardImageAlt} +
+ +
+ +

+ {insightEntry.data.title} +

+ +

{insightEntry.data.description} -

-

- Read more - -

-
- \ No newline at end of file +

+ +

+ Read more + +

+
+ diff --git a/src/components/ui/cards/CardRelated.astro b/src/components/ui/cards/CardRelated.astro index e6b6b04..a609f1f 100644 --- a/src/components/ui/cards/CardRelated.astro +++ b/src/components/ui/cards/CardRelated.astro @@ -1,20 +1,23 @@ --- +// Import necessary modules and utilities import { Image } from "astro:assets"; - import { formatDate } from "../../../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">; } --- + +
+

{blogEntry.data.title}

+

{formatDate(blogEntry.data.pubDate)}

diff --git a/src/components/ui/cards/CardSmall.astro b/src/components/ui/cards/CardSmall.astro index af38f25..8b710ff 100644 --- a/src/components/ui/cards/CardSmall.astro +++ b/src/components/ui/cards/CardSmall.astro @@ -1,27 +1,30 @@ --- +// 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">; } - +// Define classes to be used with the Image component const imageClass = "absolute inset-0 h-full w-full object-cover object-center transition duration-[600ms] ease-[cubic-bezier(0.45,0,0.55,1)] group-hover:scale-110"; +// AnchorSVG - an SVG icon to be added next to the product's subtitle const AnchorSVG = ` `; --- + + {product.data.main.imgAlt} - +
- + {product.data.main.subTitle} diff --git a/src/components/ui/cards/CardWide.astro b/src/components/ui/cards/CardWide.astro index fe68893..beca57c 100644 --- a/src/components/ui/cards/CardWide.astro +++ b/src/components/ui/cards/CardWide.astro @@ -1,27 +1,30 @@ --- +// 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">; } - +// Define classes to be used with the Image component const imageClass = "absolute inset-0 h-full w-full object-cover object-center transition duration-[600ms] ease-[cubic-bezier(0.45,0,0.55,1)] group-hover:scale-110"; +// AnchorSVG - an SVG icon to be added next to the product's subtitle const AnchorSVG = ` `; --- + + {product.data.main.imgAlt} - +
- + {product.data.main.subTitle} - 404 + {title}

- Oops, this isn't the tool you were looking for! + {subTitle}

- Don't let this hiccup slow you down. Let's get you back to building - your masterpiece. + {content}

- + +
+