From 827086c49d971c4c72b2fc189e5ac0784d23177b Mon Sep 17 00:00:00 2001 From: Ricardo Tribaldos <579671+tribal2@users.noreply.github.com> Date: Wed, 27 Mar 2024 16:57:42 -0500 Subject: [PATCH 1/3] Extract contants from Meta component --- src/components/Meta.astro | 34 ++++++++++------------------------ src/data_files/constants.ts | 36 ++++++++++++++++++++++++++++++++++++ 2 files changed, 46 insertions(+), 24 deletions(-) create mode 100644 src/data_files/constants.ts diff --git a/src/components/Meta.astro b/src/components/Meta.astro index d642a37..f0ae831 100644 --- a/src/components/Meta.astro +++ b/src/components/Meta.astro @@ -1,25 +1,13 @@ --- +import { getImage } from "astro:assets"; +import { OG, SEO, SITE } from "@/data_files/constants"; + // 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. @@ -28,12 +16,10 @@ 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 URL = `${Astro.site}`; // Set the website URL in astro.config.mjs +const author = SITE.author; +const ogTitle = OG.title; +const ogDescription = OG.description; const socialImage: string = `${Astro.site}/social.png`; // Set the path for the social media image --- @@ -57,7 +43,7 @@ const socialImage: string = `${Astro.site}/social.png`; // Set the path for the - + diff --git a/src/data_files/constants.ts b/src/data_files/constants.ts new file mode 100644 index 0000000..b3c642f --- /dev/null +++ b/src/data_files/constants.ts @@ -0,0 +1,36 @@ +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!", +}; From 3431077897459f5276eefea932da55703ff1629c Mon Sep 17 00:00:00 2001 From: Ricardo Tribaldos <579671+tribal2@users.noreply.github.com> Date: Wed, 27 Mar 2024 17:03:27 -0500 Subject: [PATCH 2/3] Move social image to /src/images to allow Astro auto optimization --- src/components/Meta.astro | 4 +++- src/data_files/constants.ts | 3 +++ {public => src/images}/social.png | Bin 3 files changed, 6 insertions(+), 1 deletion(-) rename {public => src/images}/social.png (100%) diff --git a/src/components/Meta.astro b/src/components/Meta.astro index f0ae831..f6fd70c 100644 --- a/src/components/Meta.astro +++ b/src/components/Meta.astro @@ -20,7 +20,9 @@ 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 socialImage: string = `${Astro.site}/social.png`; // Set the path for the social media image +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) + --- +
diff --git a/src/pages/products/[...slug].astro b/src/pages/products/[...slug].astro index 3e68918..d423383 100644 --- a/src/pages/products/[...slug].astro +++ b/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}`; --- - +
diff --git a/src/pages/products/index.astro b/src/pages/products/index.astro index cb103be..0403ed9 100644 --- a/src/pages/products/index.astro +++ b/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}`; --- -