Improve site's multi-language support by adding French translation

This update vastly improves the website's support for multiple languages by adding French translations to several new pages, including 404, contact, products index, home, and services pages. This update also introduces a new ContactSection_fr.astro component for a French version of the Contact Us section. Site configuration has been modified to appropriately handle these new additions.

astro.config.mjs

@@ -25,10 +25,11 @@ export default defineConfig({
     sitemap(),
     starlight({
       title: "ScrewFast Docs",
-      defaultLocale: "en",
+      defaultLocale: "root",
       locales: {
-        en: {
+        root: {
           label: "English",
+          lang: "en",
         },
         de: { label: "Deutsch", lang: "de" },
         es: { label: "Español", lang: "es" },
@@ -76,6 +77,16 @@ export default defineConfig({
       components: {
         SiteTitle: "./src/components/ui/starlight/SiteTitle.astro",
       },
+      head: [
+        {
+          tag: "meta",
+          attrs: { property: "og:image", content: "https://screwfast.uk" + "/social.png" },
+        },
+        {
+          tag: "meta",
+          attrs: { property: "twitter:image", content: "https://screwfast.uk" + "/social.png" },
+        },
+      ],
     }),
     compressor({
       gzip: false,

src/components/sections/ContactSection_fr.astro

@@ -1,119 +0,0 @@
----
-// Import the necessary dependencies.
-import AuthBtn from "../ui/buttons/AuthBtn.astro";
-import ContactIconBlock from "../ui/blocks/ContactIconBlock.astro";
-import TextInput from "../ui/forms/input/TextInput.astro";
-import EmailContactInput from "../ui/forms/input/EmailContactInput.astro";
-import PhoneInput from "../ui/forms/input/PhoneInput.astro";
-import TextAreaInput from "../ui/forms/input/TextAreaInput.astro";
-import Icon from "../ui/icons/Icon.astro";
-
-// Define the variables that will be used in this component
-const title: string = "Contactez-nous";
-const subTitle: string =
-  "Vous avez des questions ou souhaitez discuter d'un projet ? Contactez-nous et laissons-nous élaborer la solution parfaite avec nos outils et services.";
-const formTitle: string = "Remplissez le formulaire ci-dessous";
-const formSubTitle: string =
-  "Nous vous répondrons dans un délai de 1 à 2 jours ouvrables.";
----
-
-<!-- Contact Us -->
-<section class="mx-auto max-w-[85rem] px-4 py-10 sm:px-6 lg:px-8 lg:py-14">
-  <div class="mx-auto max-w-2xl lg:max-w-5xl">
-    <div class="text-center">
-      <h1
-        class="text-balance text-2xl font-bold tracking-tight text-neutral-800 dark:text-neutral-200 md:text-4xl md:leading-tight"
-      >
-        {title}
-      </h1>
-      <p class="mt-1 text-pretty text-neutral-600 dark:text-neutral-400">
-        {subTitle}
-      </p>
-    </div>
-
-    <div class="mt-12 grid items-center gap-6 lg:grid-cols-2 lg:gap-16">
-      <div class="flex flex-col rounded-xl p-4 sm:p-6 lg:p-8">
-        <h2
-          class="mb-8 text-xl font-bold text-neutral-700 dark:text-neutral-300"
-        >
-          {formTitle}
-        </h2>
-        <!-- Form for user input with various input fields.-->
-        <!-- Each field utilizes a different input component for the specific type of input (text, email, phone, and textarea)-->
-        <form>
-          <div class="grid gap-4">
-            <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
-              <TextInput
-                id="hs-firstname-contacts"
-                label="Prénom"
-                name="hs-firstname-contacts"
-              />
-              <TextInput
-                id="hs-lastname-contacts"
-                label="Nom"
-                name="hs-firstname-contacts"
-              />
-            </div>
-            <EmailContactInput id="hs-email-contacts" />
-            <PhoneInput id="hs-phone-number" />
-            <TextAreaInput
-              id="hs-about-contacts"
-              label="Détails"
-              name="hs-about-contacts"
-            />
-          </div>
-
-          <div class="mt-4 grid">
-            <AuthBtn title="Envoyer un message" />
-          </div>
-
-          <div class="mt-3 text-center">
-            <p class="text-sm text-neutral-600 dark:text-neutral-400">
-              {formSubTitle}
-            </p>
-          </div>
-        </form>
-      </div>
-
-      <!--ContactIconBlocks are used to display different methods of contacting, including visiting office, email, browsing knowledgebase, and FAQ.-->
-      <div class="divide-y divide-neutral-300 dark:divide-neutral-700">
-        <ContactIconBlock
-          heading="Base de connaissances"
-          content="Parcourez tous nos articles de base de connaissances."
-          isLinkVisible={true}
-          linkTitle="Visiter les guides et tutoriels"
-          linkURL="#"
-          isArrowVisible={true}
-          ><Icon name="question" />
-        </ContactIconBlock>
-
-        <ContactIconBlock
-          heading="FAQ"
-          content="Explorez notre FAQ pour des réponses rapides et claires aux questions courantes."
-          isLinkVisible={true}
-          linkTitle="Visiter la FAQ"
-          linkURL="#"
-          isArrowVisible={true}
-          ><Icon name="chatBubble" />
-        </ContactIconBlock>
-
-        <ContactIconBlock
-          heading="Visitez notre bureau"
-          content="ScrewFast UK"
-          isAddressVisible={true}
-          addressContent="72 Union Terrace, E10 4PE London"
-          ><Icon name="mapPin" />
-        </ContactIconBlock>
-
-        <ContactIconBlock
-          heading="Contactez-nous par e-mail"
-          content="Préférez-vous le texte écrit ? Envoyez-nous un e-mail à"
-          isLinkVisible={true}
-          linkTitle="support@screwfast.uk"
-          linkURL="#"
-          ><Icon name="envelopeOpen" />
-        </ContactIconBlock>
-      </div>
-    </div>
-  </div>
-</section>

src/components/sections/FooterSection.astro

@@ -2,13 +2,18 @@
 // Import the necessary dependencies
 import FooterSocialLink from "../ui/links/FooterSocialLink.astro";
 import EmailFooterInput from "../ui/forms/input/EmailFooterInput.astro";
-import { footerLinks, socialLinks } from "@/utils/navigation.ts";
+import enStrings from "@/utils/navigation.ts";
+import frStrings from "@/utils/fr/navigation.ts";
 import Icon from "../ui/icons/Icon.astro";
 
+// Select the correct translation based on the page's lang prop:
+const strings = Astro.currentLocale === "fr" ? frStrings : enStrings;
+
 // Define the variables that will be used in this component
-const sectionThreeTitle: string = "Stay up to date";
+const sectionThreeTitle: string = Astro.currentLocale === "fr" ? "Rester à jour" : "Stay up to date";
-const sectionThreeContent: string =
+const sectionThreeContent: string = Astro.currentLocale === "fr" ? "Restez informé des derniers outils et des offres exclusives." :
   "Stay updated with the latest tools and exclusive deals.";
+const crafted: string = Astro.currentLocale === "fr" ? "Fabriqué par" : "Crafted by";
 ---
 
 <footer class="w-full bg-neutral-300 dark:bg-neutral-900">
@@ -74,7 +79,7 @@ const sectionThreeContent: string =
       </div>
       <!-- An array of links for Product and Company sections -->
       {
-        footerLinks.map((section) => (
+        strings.footerLinks.map((section) => (
           <div class="col-span-1">
             <h3 class="font-bold text-neutral-800 dark:text-neutral-200">
               {section.section}
@@ -119,7 +124,7 @@ const sectionThreeContent: string =
     >
       <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 by
+          © <span id="current-year"></span> ScrewFast. {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"
@@ -131,23 +136,23 @@ const sectionThreeContent: string =
 
       <!-- Social Brands -->
       <div>
-        <FooterSocialLink url={socialLinks.facebook}
+        <FooterSocialLink url={strings.socialLinks.facebook}
           ><Icon name="facebookFooter" />
         </FooterSocialLink>
 
-        <FooterSocialLink url={socialLinks.x}
+        <FooterSocialLink url={strings.socialLinks.x}
           ><Icon name="xFooter" /></FooterSocialLink
         >
 
-        <FooterSocialLink url={socialLinks.github}
+        <FooterSocialLink url={strings.socialLinks.github}
           ><Icon name="githubFooter" />
         </FooterSocialLink>
 
-        <FooterSocialLink url={socialLinks.google}
+        <FooterSocialLink url={strings.socialLinks.google}
           ><Icon name="googleFooter" />
         </FooterSocialLink>
 
-        <FooterSocialLink url={socialLinks.slack}
+        <FooterSocialLink url={strings.socialLinks.slack}
           ><Icon name="slackFooter" />
         </FooterSocialLink>
       </div>

src/components/sections/Navbar.astro

@@ -3,7 +3,11 @@
 import ThemeIcon from "../ThemeIcon.astro";
 import NavLink from "../ui/links/NavLink.astro";
 import Authentication from "./Authentication.astro";
-import { navBarLinks } from "@/utils/navigation.ts";
+import enStrings from "@/utils/navigation.ts";
+import frStrings from "@/utils/fr/navigation.ts";
+
+// Select the correct translation based on the page's lang prop:
+const strings = Astro.currentLocale === "fr" ? frStrings : enStrings;
 ---
 
 <!-- Main header component -->
@@ -131,7 +135,7 @@ import { navBarLinks } from "@/utils/navigation.ts";
         class="mt-5 flex flex-col gap-x-0 gap-y-4 md:mt-0 md:flex-row md:items-center md:justify-end md:gap-x-7 md:gap-y-0 md:ps-7"
       >
         <!-- Navigation links and Authentication component -->
-        {navBarLinks.map(link => (
+        {strings.navBarLinks.map(link => (
           <NavLink url={link.url} name={link.name} />
         ))}
 

src/components/ui/starlight/SiteTitle.astro

@@ -3,8 +3,10 @@ import logo from "@/images/starlight/screwfast_logo_dark.svg?raw";
 import docs from "@/images/starlight/docs_logo.svg?raw";
 import type { Props } from "@astrojs/starlight/props";
 
+
 const main = "/";
-const self = "/" + (Astro.props.locale || "en") + "/welcome-to-docs/";
+const locale = Astro.props.locale ? Astro.props.locale + "/" : "";
+const self = "/" + locale + "welcome-to-docs/";
 ---
 
 <span class="site-title flex">

src/content/docs/welcome-to-docs.mdx

@@ -13,18 +13,18 @@ hero:
   tagline: Your central hub for streamlined tool guidance, detailed service docs, and project support.
   image:
       alt: A ScrewFast's Logo
-      dark: ../../../images/starlight/screwfast_hero.svg
+      dark: ../../images/starlight/screwfast_hero.svg
-      light: ../../../images/starlight/screwfast_hero_dark.svg
+      light: ../../images/starlight/screwfast_hero_dark.svg
   actions:
     - text: Get started
       icon: right-arrow
       variant: primary
-      link: /en/guides/getting-started/
+      link: /guides/getting-started/
     - text: View on GitHub
       icon: external
       link: https://github.com/mearashadowfax/ScrewFast
 ---
-import "../../../styles/starlight_main.css";
+import "@/styles/starlight_main.css";
 import { Card, CardGrid } from '@astrojs/starlight/components';
 
 <CardGrid stagger>

src/layouts/MainLayout.astro

@@ -4,7 +4,7 @@ import Meta from "@/components/Meta.astro";
 import Navbar from "@/components/sections/Navbar.astro";
 import FooterSection from "@/components/sections/FooterSection.astro";
 
-// Setting expected props 
+// Setting expected props
 const { title = "ScrewFast", meta, structuredData, lang = "en" } = Astro.props;
 
 // Interface to type-check the properties
@@ -20,7 +20,7 @@ interface Props {
 This is the main structure for the page.
 We set the language of the page to English and add classes for scrollbar and scroll behavior.
 -->
-<html lang={lang} class="scrollbar-hide scroll-pt-16 lenis lenis-smooth">
+<html lang={lang} class="scrollbar-hide lenis lenis-smooth scroll-pt-16">
   <head>
     <!-- Adding metadata to the HTML document -->
     <Meta meta={meta} structuredData={structuredData} />
@@ -61,7 +61,7 @@ We set the language of the page to English and add classes for scrollbar and scr
     <div class="mx-auto max-w-screen-2xl px-4 sm:px-6 lg:px-8">
       <Navbar />
       <main>
-      <slot />
+        <slot />
       </main>
     </div>
     <FooterSection />
@@ -75,7 +75,9 @@ 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,
+      html.lenis body {
         height: auto;
       }
 

src/pages/fr/contact.astro

@@ -1,7 +1,7 @@
 ---
 // Import the necessary components
 import MainLayout from "@/layouts/MainLayout.astro";
-import ContactSection from "@/components/sections/ContactSection_fr.astro";
+import ContactSection from "@/components/sections/fr/ContactSection_fr.astro";
 ---
 
 <!--Utilizing MainLayout for the outer layout of the page, and defining meta for SEO purposes-->

src/pages/fr/index.astro

@@ -11,12 +11,13 @@ import PricingSection from "@/components/sections/pricing/PricingSection.astro";
 import FAQ from "@/components/sections/FAQ.astro";
 import AnnouncementBanner from "@/components/ui/banners/AnnouncementBanner.astro";
 import heroImage from "@/images/hero-image.avif";
-import faqs from "@/data_files/faqs.json";
+import faqs from "@/data_files/fr/faqs.json";
-import features from "@/data_files/features.json";
+import features from "@/data_files/fr/features.json";
 import featureImage from "@/images/features-image.avif";
 import construction from "@/images/construction-image.avif";
 import tools from "@/images/automated-tools.avif";
 import dashboard from "@/images/dashboard-image.avif";
+import { getRelativeLocaleUrl } from 'astro:i18n';
 
 const avatarSrcs: Array<string> = [
   "https://images.unsplash.com/photo-1568602471122-7832951cc4c5?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2&w=300&h=300&q=80",
@@ -37,9 +38,9 @@ const avatarSrcs: Array<string> = [
     title=`Équipez vos projets avec <span class="text-yellow-500 dark:text-yellow-400">ScrewFast</span>`
     subTitle="Outils matériels de haute qualité et services de construction experts pour tous les besoins en projet."
     primaryBtn="Commencez à explorer"
-    primaryBtnURL="/products"
+    primaryBtnURL={getRelativeLocaleUrl("fr", "products")}
     secondaryBtn="Contacter l'équipe commerciale"
-    secondaryBtnURL="/contact"
+    secondaryBtnURL={getRelativeLocaleUrl("fr", "contact")}
     withReview={true}
     avatars={avatarSrcs}
     rating=`<span class="font-bold">4.8</span> / 5`

src/pages/fr/services.astro

@@ -5,6 +5,7 @@ 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/sections/features/FeaturesStats.astro";
+import { getRelativeLocaleUrl } from 'astro:i18n';
 
 // Import necessary images
 import blueprints from "@/images/blueprints-image.avif";
@@ -119,7 +120,7 @@ const articles: Article[] = [
     subTitle="Chez ScrewFast, nous sommes fiers de fournir des solutions complètes et un service exceptionnel dans l'industrie du matériel et de la construction. Notre équipe expérimentée est dédiée à soutenir votre projet de sa conception à son achèvement avec une gamme de services spécialisés."
     btnExists={true}
     btnTitle="Planifier une consultation"
-    btnURL="#"
+    btnURL={getRelativeLocaleUrl("fr", "#")}
   />
   <!-- RightSection and LeftSection contain details about various services along with pertinent imagery.
   They alternate for variety in design.

src/utils/navigation.ts

@@ -1,5 +1,5 @@
 // An array of links for navigation bar
-export const navBarLinks = [
+const navBarLinks = [
   { name: "Home", url: "/" },
   { name: "Products", url: "/products" },
   { name: "Services", url: "/services" },
@@ -7,11 +7,11 @@ export const navBarLinks = [
   { name: "Contact", url: "/contact" },
 ];
 // An array of links for footer
-export const footerLinks = [
+const footerLinks = [
   {
     section: "Ecosystem",
     links: [
-      { name: "Documentation", url: "/en/welcome-to-docs/" },
+      { name: "Documentation", url: "/welcome-to-docs/" },
       { name: "Tools & Equipment", url: "/products" },
       { name: "Construction Services", url: "/services" },
     ],
@@ -27,10 +27,16 @@ export const footerLinks = [
   },
 ];
 // An object of links for social icons
-export const socialLinks = {
+const socialLinks = {
   facebook: "#",
   x: "#",
   github: "https://github.com/mearashadowfax/ScrewFast",
   google: "#",
   slack: "#",
 };
+
+export default {
+  navBarLinks,
+  footerLinks,
+  socialLinks,
+};