feat: improve breadcrumbs

package.json

@@ -51,7 +51,7 @@
 		"@fontsource-variable/nunito-sans": "^5.0.14",
 		"@fontsource/baskervville": "^5.0.20",
 		"@hookform/resolvers": "^3.4.0",
-		"astro": "^4.8.4",
+		"astro": "^4.8.5",
 		"firebase": "^10.12.0",
 		"firebase-admin": "^12.1.0",
 		"gsap": "^3.12.5",

src/assets/images/svg-components/leftArrow/LeftArrow.tsx

@@ -1,14 +1,14 @@
-interface LeftArrowProps{
-	fill?: string
+interface LeftArrowProps {
+	fill?: string;
 }
 
-export const LeftArrow = ({fill='currentColor'}:LeftArrowProps) => {
+export const LeftArrow = ({ fill = "currentColor" }: LeftArrowProps) => {
 	return (
 		<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25 25">
 			<g id="Left">
 				<polygon
 					points="24 12.001 2.914 12.001 8.208 6.706 7.501 5.999 1 12.501 7.5 19.001 8.207 18.294 2.914 13.001 24 13.001 24 12.001"
-					style={{fill}}
+					style={{ fill }}
 					stroke="#232326"
 					strokeWidth="0.25"
 				/>

src/consts.ts

@@ -43,12 +43,6 @@ export const WORLD_GLOBE_CONFIG: WorldGlobeConfig = {
 
 export const DEFAULT_LOCALE_STRING: Intl.LocalesArgument = "es-ES";
 
-export const CONTACT_FORM_REQUEST_PARAMETERS: RequestInit = {
-	method: `POST`,
-	headers: { "Content-Type": `application/x-www-form-urlencoded` },
-	signal: AbortSignal.timeout(10000),
-};
-
 export const DEFAULT_DATE_FORMAT: Intl.DateTimeFormatOptions = {
 	weekday: "long",
 	year: "numeric",

src/pages/contact.astro

@@ -3,11 +3,11 @@ import BaseLayout from "@components/templates/baseLayout/BaseLayout.astro";
 import Tabs from "@components/organisms/tabs/Tabs.astro";
 import ContactIntro from "@components/organisms/contactIntro/ContactIntro.astro";
 import LatestArticles from "src/ui/components/organisms/latestArticles/LatestArticles.astro";
-import Breadcrumbs from "@components/molecules/breadcrumbs/Breadcrumbs.astro";
+import Breadcrumbs from "../ui/components/molecules/breadcrumbs/Breadcrumbs.astro";
 ---
 
 <BaseLayout title="" description="">
-  <Breadcrumbs />
+  <Breadcrumbs classNames="contact-page" />
   <ContactIntro />
   <Tabs />
   <LatestArticles />

src/ui/components/molecules/breadcrumbs/Breadcrumbs.astro

@@ -1,27 +1,34 @@
 ---
-import { generateBreadcrumbs } from './utils/generateBreadcrumbs';
-
-const { pathname:currentPath }= Astro.url;
-
-const breadcrumbs = generateBreadcrumbs({ currentPath });
+import { generateBreadcrumbs } from "./utils/generateBreadcrumbs";
+import "./breadcrumbs.css";
+
+interface BreadcrumbProps {
+	classNames?: string;
+}
+
+const { classNames } = Astro.props as BreadcrumbProps;
+const { pathname: currentPath, origin } = Astro.url;
+
+const breadcrumbs = generateBreadcrumbs({ currentPath });
 ---
 
-<div class="flex justify-center align-center">
+<section class:list={[`breadcrumbs__wrapper ${classNames}`, { 'common-wrapper': classNames }]}>
+<ul class="breadcrumbs__list flex justify-center align-center font-sans-serif">
   {breadcrumbs?.map(({ link, label }) => {
       const isLast = breadcrumbs.at(-1).link === link
 
       return (
-        <>
+        <li class="breadcrumb__item flex">
           {!isLast ? (
-          <a href={link}>{label}</a>
+              <a href={link}>{label}</a><span>/</span>
             ) : (
-            <span>{label}</span>
+            <strong class="--is-current-page">{label}</strong>
             )}
-          {!isLast && " / "}
-        </>
+        </li>
       );
     })}
-</div>
+</ul>
+</section>
 
 <script type="application/ld+json" set:html={JSON.stringify({
   "@context": "https://schema.org/",
@@ -33,7 +40,7 @@ const breadcrumbs = generateBreadcrumbs({ currentPath });
       "@type": "ListItem",
       "position": index + 1,
       "name": label,
-      "item": isLast ? undefined : link
+      "item": !isLast ? `${origin}${link}`: undefined
     };
   })
 })}/>

src/ui/components/molecules/breadcrumbs/breadcrumbs.css

@@ -1,5 +1,13 @@
 @layer breadcrumbs {
-    .breadcrumbs{
-        gap:2rem;
+    .breadcrumb__item,
+    .breadcrumbs__list{
+        gap: 1rem;
+    }
+    .--is-current-page{
+        color: var(--primary-main)
+    }
+    .contact-page .breadcrumbs__list {
+        justify-content: flex-start;
+        padding-top: 2rem;
     }
 }

src/ui/components/molecules/latestArticles/components/latestArticlesSliderNavigation/LatestArticlesSliderNavigation.tsx

@@ -1,6 +1,6 @@
 import "./latest-articles-slider-navigation.css";
 import { useSwiper } from "swiper/react";
-import { LeftArrow } from '@assets/images/svg-components/leftArrow';
+import { LeftArrow } from "@assets/images/svg-components/leftArrow";
 
 export const LatestArticlesSliderNavigation = () => {
 	const swiper = useSwiper();
@@ -12,14 +12,14 @@ export const LatestArticlesSliderNavigation = () => {
 				type="button"
 				onClick={() => swiper.slidePrev()}
 			>
-				<LeftArrow fill="#ffffff"/>
+				<LeftArrow fill="#ffffff" />
 			</button>
 			<button
 				className="latest-articles__slider__navigation__button --right clickable"
 				type="button"
 				onClick={() => swiper.slideNext()}
 			>
-				<LeftArrow fill="#ffffff"/>
+				<LeftArrow fill="#ffffff" />
 			</button>
 		</div>
 	);

src/ui/components/organisms/contactForm/ContactForm.tsx

@@ -5,8 +5,6 @@ import { z } from "zod";
 import { useGoogleReCaptcha } from "react-google-recaptcha-v3";
 import "./contact-form.css";
 import { autosize } from "@components/organisms/contactForm/utils/autosize";
-import { CONTACT_FORM_REQUEST_PARAMETERS } from "src/consts.ts";
-import { encode } from "@components/organisms/contactForm/utils/encode";
 import { flyPlane } from "@components/organisms/contactForm/utils/flyPlane";
 import Spinner from "@components/atoms/spinner/Spinner.tsx";
 import { actions } from "astro:actions";

src/ui/components/organisms/contactIntro/contact-intro.css

@@ -3,7 +3,7 @@
     display: grid;
     gap: 0 8rem;
     grid: 'AboutMe-Text AboutMe-Image' 1fr / 1fr 1fr;
-    justify-items: center;
+    justify-items: self-start;
 
     @media (max-width: 960px) {
       gap: 2rem 0;

yarn.lock

@@ -4122,9 +4122,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"astro@npm:^4.8.4":
-  version: 4.8.4
-  resolution: "astro@npm:4.8.4"
+"astro@npm:^4.8.5":
+  version: 4.8.5
+  resolution: "astro@npm:4.8.5"
   dependencies:
     "@astrojs/compiler": "npm:^2.8.0"
     "@astrojs/internal-helpers": "npm:0.4.0"
@@ -4195,7 +4195,7 @@ __metadata:
       optional: true
   bin:
     astro: astro.js
-  checksum: 10c0/804dd91bfe0ca66aaf8e5b2817028dca9436f5097c442d766d4dd26970e3acfc65b6f0e4273d775ce3e7c92130b0f066511922b5a905e72220b2607c7689d082
+  checksum: 10c0/7b9be8204af74e736e722a0c28c6f1247626f1ab343c9cf380fae4e0be94b5211bba8630ba68a7aa97c2cd016060dcf4a54a91d6c06510f43160a964e961950e
   languageName: node
   linkType: hard
 
@@ -4284,7 +4284,7 @@ __metadata:
     "@types/react": "npm:^18.3.2"
     "@types/react-dom": "npm:^18.3.0"
     "@types/three": "npm:^0.164.0"
-    astro: "npm:^4.8.4"
+    astro: "npm:^4.8.5"
     firebase: "npm:^10.12.0"
     firebase-admin: "npm:^12.1.0"
     gsap: "npm:^3.12.5"