Merge pull request #28 from rotary-dev-fellowship/feat-siteConstants

Enhance theme customization: refactor constants and optimize social images

src/components/Meta.astro

@@ -1,29 +1,15 @@
 ---
 import { getImage } from "astro:assets";
+import { OG, SEO, SITE } from "@/data_files/constants";
 import faviconSvgSrc from "@/images/icon.svg";
 import faviconSrc from "@/images/icon.png";
 
 // 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 = {
-  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": "WebPage",
-    "@id": "https://screwfast.uk",
-    "url": "https://screwfast.uk",
-    "name": "ScrewFast | Top-quality Hardware Tools",
-    "description": "ScrewFast offers top-tier hardware tools and expert construction services to meet all your project needs.",
-    "isPartOf": {
-      "@type": "WebSite",
-      "url": "https://screwfast.uk",
-      "name": "ScrewFast",
-      "description": "ScrewFast offers top-tier hardware tools and expert construction services to meet all your project needs."
-    },
-    "inLanguage": "en-US"
-  },
+  meta: SITE.description,
+  structuredData: SEO.structuredData,
 };
 
 // Extract props with default values assigned from defaultProps. Values can be overridden when the component is used.
@@ -32,13 +18,12 @@ const defaultProps = {
 const { meta = defaultProps.meta, structuredData = defaultProps.structuredData } = Astro.props;
 
 // Define the metadata for your website and individual pages
-const title: string = "ScrewFast"; // Set default 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 =
-  "Equip your projects with ScrewFast's top-quality hardware tools and expert construction services. Trusted by industry leaders, ScrewFast offers simplicity, affordability, and reliability. Experience the difference with user-centric design and cutting-edge tools. Start exploring now!"; // Set the Open Graph description
-const URL: string = `${Astro.site}`; // Set the website URL in astro.config.mjs
-const socialImage: string = `${Astro.site}/social.png`; // Set the path for the social media image
+const URL = `${Astro.site}`; // Set the website URL in astro.config.mjs
+const author = SITE.author;
+const ogTitle = OG.title;
+const ogDescription = OG.description;
+const socialImageRes = await getImage({ src: OG.image, width: 1200, height: 600 });
+const socialImage = Astro.url.origin + socialImageRes.src; // Get the full URL of the image (https://stackoverflow.com/a/9858694)
 
 // Generate and optimize the favicon images
 const faviconSvg = await getImage({
@@ -75,7 +60,7 @@ const appleTouchIcon = await getImage({
 <meta property="og:url" content={URL} />
 <meta property="og:type" content="website" />
 <meta property="og:title" content={ogTitle} />
-<meta property="og:site_name" content={title} />
+<meta property="og:site_name" content={SITE.title} />
 <meta property="og:description" content={ogDescription} />
 <meta property="og:image" content={socialImage} />
 <meta content="1200" property="og:image:width" />

src/components/sections/FooterSection.astro

@@ -5,6 +5,7 @@ import EmailFooterInput from "../ui/forms/input/EmailFooterInput.astro";
 import enStrings from "@/utils/navigation.ts";
 import frStrings from "@/utils/fr/navigation.ts";
 import Icon from "../ui/icons/Icon.astro";
+import { SITE } from "@/data_files/constants";
 
 // Select the correct translation based on the page's lang prop:
 const strings = Astro.currentLocale === "fr" ? frStrings : enStrings;
@@ -124,7 +125,7 @@ const crafted: string = Astro.currentLocale === "fr" ? "Fabriqué par" : "Crafte
     >
       <div class="flex items-center justify-between">
         <p class="text-sm text-neutral-600 dark:text-neutral-400">
-          © <span id="current-year"></span> ScrewFast. {crafted}
+          © <span id="current-year"></span> {SITE.title}. {crafted}
           <a
             class="rounded-lg font-medium underline underline-offset-2 outline-none ring-zinc-500 transition duration-300 hover:text-neutral-700 hover:decoration-dashed focus:outline-none focus-visible:ring dark:ring-zinc-200 dark:hover:text-neutral-300"
             href="https://sobstvennoai.dev"

src/data_files/constants.ts

@@ -0,0 +1,39 @@
+import ogImageSrc from "@/images/social.png";
+
+export const SITE = {
+  title: "ScrewFast",
+  tagline: "Top-quality Hardware Tools",
+  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.",
+  description_short: "ScrewFast offers top-tier hardware tools and expert construction services to meet all your project needs.",
+  url: "https://screwfast.uk",
+  author: "Emil Gulamov",
+};
+
+export const SEO = {
+  title: SITE.title,
+  description: SITE.description,
+  structuredData: {
+    "@context": "https://schema.org",
+    "@type": "WebPage",
+    inLanguage: "en-US",
+    "@id": SITE.url,
+    url: SITE.url,
+    name: SITE.title,
+    description: SITE.description,
+    isPartOf: {
+      "@type": "WebSite",
+      url: SITE.url,
+      name: SITE.title,
+      description: SITE.description,
+    },
+  },
+};
+
+export const OG = {
+  locale: "en_US",
+  type: "website",
+  url: SITE.url,
+  title: `${SITE.title}: : Hardware Tools & Construction Services`,
+  description: "Equip your projects with ScrewFast's top-quality hardware tools and expert construction services. Trusted by industry leaders, ScrewFast offers simplicity, affordability, and reliability. Experience the difference with user-centric design and cutting-edge tools. Start exploring now!",
+  image: ogImageSrc,
+};

src/layouts/MainLayout.astro

@@ -3,9 +3,10 @@
 import Meta from "@/components/Meta.astro";
 import Navbar from "@/components/sections/Navbar.astro";
 import FooterSection from "@/components/sections/FooterSection.astro";
+import { SITE } from "@/data_files/constants";
 
 // Setting expected props
-const { title = "ScrewFast", meta, structuredData, lang = "en" } = Astro.props;
+const { title = SITE.title, meta, structuredData, lang = "en" } = Astro.props;
 
 // Interface to type-check the properties
 interface Props {
@@ -75,7 +76,7 @@ We set the language of the page to English and add classes for scrollbar and scr
         -ms-overflow-style: none;
         scrollbar-width: none;
       }
-      
+
       html.lenis,
       html.lenis body {
         height: auto;

src/pages/404.astro

@@ -2,6 +2,10 @@
 // Import section components
 import MainLayout from "@/layouts/MainLayout.astro";
 import Btn404 from "@/components/ui/buttons/Btn404.astro";
+import { SITE } from "@/data_files/constants";
+
+const pageTitle: string = `Page Not Found | ${SITE.title}`;
+
 
 // Define variables for page content
 const title: string = "404";
@@ -12,7 +16,8 @@ const btnTitle: string = "Go Back";
 ---
 
 <MainLayout
-  title="Page Not Found | ScrewFast">
+  title={pageTitle}
+>
   <section class="grid h-svh place-content-center">
     <div class="mx-auto max-w-screen-xl px-4 py-8 lg:px-6 lg:py-16">
       <div class="mx-auto max-w-screen-sm text-center">

src/pages/blog/[...slug].astro

@@ -10,6 +10,7 @@ import { Image } from "astro:assets";
 import { capitalize, formatDate } from "@/utils/utils";
 import { getCollection } from "astro:content";
 import type { CollectionEntry } from "astro:content";
+import { SITE } from "@/data_files/constants";
 
 // getStaticPaths is used to pre-render all routes based on the blog posts
 export async function getStaticPaths() {
@@ -32,9 +33,14 @@ const blogPosts: CollectionEntry<"blog">[] = await getCollection("blog");
 const relatedPosts: CollectionEntry<"blog">[] = blogPosts.filter(
   (blogEntry) => blogEntry.slug !== post.slug
 );
+
+const pageTitle: string = `${post.data.title} | ${SITE.title}`;
+
 ---
 
-<MainLayout title={post.data.title + " | ScrewFast"}>
+<MainLayout
+  title={pageTitle}
+>
   <section class="mx-auto max-w-3xl px-4 pb-12 pt-6 sm:px-6 lg:px-8 lg:pt-10">
     <div class="max-w-2xl">
       <div class="mb-6 flex items-center justify-between">

src/pages/blog/index.astro

@@ -6,6 +6,7 @@ import CardBlogRecent from "@/components/ui/cards/CardBlogRecent.astro";
 import CardInsight from "@/components/ui/cards/CardInsight.astro";
 import { getCollection } from "astro:content";
 import type { CollectionEntry } from "astro:content";
+import { SITE } from "@/data_files/constants";
 
 // Get all blogs post and sort them based on publish date
 const blogPosts: CollectionEntry<"blog">[] = (await getCollection("blog")).sort(
@@ -15,7 +16,7 @@ const blogPosts: CollectionEntry<"blog">[] = (await getCollection("blog")).sort(
 // Get all insights posts
 const insightPosts: CollectionEntry<"insights">[] =
   await getCollection("insights");
-  
+
 // Separate the most recent post from others
 const mostRecentPost: CollectionEntry<"blog"> = blogPosts[0];
 const otherPosts: CollectionEntry<"blog">[] = blogPosts.slice(1);
@@ -27,10 +28,12 @@ const subTitle: string =
 const secondTitle: string = "Insights";
 const secondSubTitle: string =
   "Stay up-to-date with the latest trends and developments in the construction industry with insights from ScrewFast's team of industry experts. ";
+
+const pageTitle: string = `Blog | ${SITE.title}`;
 ---
 
-<MainLayout 
-  title="Blog | ScrewFast" 
+<MainLayout
+  title={pageTitle}
   structuredData={{
     "@context": "https://schema.org",
     "@type": "WebPage",

src/pages/contact.astro

@@ -2,11 +2,14 @@
 // Import the necessary components
 import MainLayout from "@/layouts/MainLayout.astro";
 import ContactSection from "@/components/sections/ContactSection.astro";
+import { SITE } from "@/data_files/constants";
+
+const pageTitle: string = `Contact | ${SITE.title}`;
 ---
 
 <!--Utilizing MainLayout for the outer layout of the page, and defining meta for SEO purposes-->
 <MainLayout
-  title="Contact | ScrewFast"
+  title={pageTitle}
   structuredData={{
     "@context": "https://schema.org",
     "@type": "WebPage",

src/pages/insights/[...slug].astro

@@ -1,5 +1,6 @@
 ---
 // Import section components
+import { SITE } from "@/data_files/constants";
 import MainLayout from "@/layouts/MainLayout.astro";
 import { Image } from "astro:assets";
 import { getCollection } from "astro:content";
@@ -14,9 +15,13 @@ export async function getStaticPaths() {
 }
 // Get the props for this page that define a specific insight post
 const { post } = Astro.props;
+
+const pageTitle: string = `${post.data.title} | ${SITE.title}`;
 ---
 
-<MainLayout title={post.data.title + " | ScrewFast"}>
+<MainLayout
+  title={pageTitle}
+>
   <section class="py-6 sm:py-8 lg:py-12">
     <div class="mx-auto max-w-screen-xl px-4 md:px-8">
       <div class="grid gap-8 md:grid-cols-2 lg:gap-12">

src/pages/products/[...slug].astro

@@ -5,6 +5,7 @@ import ProductTabBtn from "@/components/ui/buttons/ProductTabBtn.astro";
 import PrimaryCTA from "@/components/ui/buttons/PrimaryCTA.astro";
 import { Image } from "astro:assets";
 import { getCollection } from "astro:content";
+import { SITE } from "@/data_files/constants";
 
 // Global declaration for gsap animation library
 declare global {
@@ -22,9 +23,13 @@ export async function getStaticPaths() {
 }
 
 const { product } = Astro.props;
+
+const pageTitle: string = `${product.data.main.title} | ${SITE.title}`;
 ---
 
-<MainLayout title={product.data.main.title + " | ScrewFast"}>
+<MainLayout
+  title={pageTitle}
+>
   <div id="overlay" class="fixed inset-0 bg-neutral-200 dark:bg-neutral-800">
   </div>
 

src/pages/products/index.astro

@@ -10,6 +10,7 @@ import TestimonialsSectionAlt from "@/components/sections/testimonials/Testimoni
 // Importing necessary functions from Astro
 import { getCollection } from "astro:content";
 import type { CollectionEntry } from "astro:content";
+import { SITE } from "@/data_files/constants";
 
 // Fetching all the product related content and sorting it by main.id
 const product: CollectionEntry<"products">[] = (
@@ -57,10 +58,12 @@ const testimonials = [
     avatarAlt: "Image Description",
   },
 ];
+
+const pageTitle: string = `Products | ${SITE.title}`;
 ---
 
-<MainLayout 
-  title="Products | ScrewFast" 
+<MainLayout
+  title={pageTitle}
   structuredData={{
     "@context": "https://schema.org",
     "@type": "WebPage",

src/pages/services.astro

@@ -15,6 +15,7 @@ import aerialView from "@/images/aerial-view.avif";
 import usingTools from "@/images/using-tools.avif";
 import progressBuilding from "@/images/progress-building.avif";
 import underConstruction from "@/images/under-construction.avif";
+import { SITE } from "@/data_files/constants";
 
 interface Article {
   isRightSection: boolean;
@@ -90,10 +91,12 @@ const articles: Article[] = [
     btnURL: "#",
   },
 ];
+
+const pageTitle: string = `Services | ${SITE.title}`;
 ---
 
-<MainLayout 
-  title="Services | ScrewFast" 
+<MainLayout
+  title={pageTitle}
   structuredData={{
     "@context": "https://schema.org",
     "@type": "WebPage",