feat: add slider for related articles

fbuireu · Sep 7, 2024 · bcdb997 · bcdb997
1 parent adf611c
commit bcdb997
Show file tree

Hide file tree

Showing 22 changed files with 165 additions and 247 deletions.
diff --git a/src/infrastructure/utils/validateContact/validateContact.ts b/src/infrastructure/utils/validateContact/validateContact.ts
@@ -5,14 +5,14 @@ import type { ContactFormData } from "@shared/ui/types";
 type ValidateContact = Omit<ContactFormData, "recaptcha">;
 
 export function validateContact(contact: ValidateContact) {
-    const { success, data, error } = contactFormSchema.safeParse(contact);
+	const { success, data, error } = contactFormSchema.safeParse(contact);
 
-    if (!success) {
-        throw new Exception({
-            message: error?.errors.join(", ") || "Invalid data",
-            code: "BAD_REQUEST",
-        });
-    }
+	if (!success) {
+		throw new Exception({
+			message: error?.errors.join(", ") || "Invalid data",
+			code: "BAD_REQUEST",
+		});
+	}
 
-    return data;
+	return data;
 }
diff --git a/src/pages/index.astro b/src/pages/index.astro
@@ -6,7 +6,6 @@ import Testimonials from "@modules/home/components/testimonials/Testimonials.ast
 import Welcome from "@modules/home/components/welcome/Welcome.astro";
 
 // check responsive
-// related articles slider?
 // todo: add small transitions & animations
 //        - Latest articles (https://codepen.io/jh3y/pen/MWLyGxo)
 //        - add small icons (reading time, tags, etc)?

diff --git a/src/pages/tags/_tag.css b/src/pages/tags/_tag.css
@@ -1,24 +1,25 @@
 .tag__article__list {
-    gap: 0 3rem;
+    --gap: 2rem;
+    gap: 0 var(--gap);
     margin-block: 2rem;
     position: relative;
 
     @media (width <= 960px) {
         margin-inline: 1rem;
     }
-}
-
-.tag__article__item {
-    --gap: 2rem;
-    margin-block-end: 3rem;
-    max-width: calc(100% / var(--items-per-row) - var(--gap));
-    position: relative;
-    width: 100%;
-    --items-per-row: 4;
 
-    @media (width <= 960px) {
-        --gap: 0;
+    .tag__article__item {
         margin-block-end: 3rem;
-        --items-per-row: 1;
-    }
+        max-width: calc(100% / var(--items-per-row) - var(--gap)); 
+        position: relative;
+        width: 100%;
+        --items-per-row: 4;
+
+        @media (width <= 960px) {
+            --gap: 0;
+            margin-block-end: 3rem;
+            --items-per-row: 1;
+        }
+    } 
 }
+
diff --git a/src/ui/modules/about/components/aboutLatestArticles/AboutLatestArticles.astro b/src/ui/modules/about/components/aboutLatestArticles/AboutLatestArticles.astro
@@ -15,7 +15,7 @@ const articles = await getCollection("articles");
       <h4 class="about-latest-articles__quote">Lorem ipsum dolir sit Amet. Dolor sit amet.</h4>
       <h6 class="about-latest-articles__quote__author">Ferran Buireu</h6>
     </div>
-    <AboutLatestArticlesSlider client:load articles={articles} location={Astro.url} />
+    <AboutLatestArticlesSlider client:load articles={articles} origin={Astro.url} />
     <script is:inline type="application/ld+json" set:html={JSON.stringify({
       "@context": "https://schema.org",
       "@type": "ItemList",

diff --git a/src/ui/modules/about/components/aboutLatestArticlesSlider/AboutLatestArticlesSlider.tsx b/src/ui/modules/about/components/aboutLatestArticlesSlider/AboutLatestArticlesSlider.tsx
@@ -2,13 +2,13 @@ import type { CollectionEntry } from "astro:content";
 import { DEFAULT_SWIPER_CONFIG } from "@const/const";
 import { ArticleCard } from "@modules/core/components/articleCard/ArticleCard";
 import { Slider } from "@modules/core/components/slider";
+import type { CSSProperties } from "react";
 import type { SwiperOptions } from "swiper/types";
 import "./about-latest-articles-slider.css";
-import type { CSSProperties } from "react";
 
 interface AboutLatestArticlesSLiderProps {
 	articles: CollectionEntry<"articles">[];
-	location: URL;
+	origin: URL;
 }
 
 const SLIDER_CONFIG: SwiperOptions = {
@@ -30,15 +30,15 @@ const SLIDER_CONFIG: SwiperOptions = {
 	containerModifierClass: "latest-articles-",
 };
 
-export const AboutLatestArticlesSlider = ({ articles, location }: AboutLatestArticlesSLiderProps) => {
+export const AboutLatestArticlesSlider = ({ articles, origin }: AboutLatestArticlesSLiderProps) => {
 	return (
 		<div className="about__latest-articles__slider">
 			<Slider
 				items={articles}
 				swiperOptions={SLIDER_CONFIG}
-				classNames="--is-about__latest-articles-slider"
+				origin={origin}
 				renderItem={(article) => {
-					const props = { ...article, location };
+					const props = { ...article, origin };
 
 					return (
 						<ArticleCard {...props}>

diff --git a/src/ui/modules/core/components/articleCard/ArticleCard.astro b/src/ui/modules/core/components/articleCard/ArticleCard.astro
@@ -1,17 +1,17 @@
 ---
-import { Image } from "astro:assets";
-import type { CollectionEntry } from "astro:content";
-import { PAGES_ROUTES } from "@const/index";
-import { articleVariantToClass } from "@modules/core/utils/articleVariantToClass";
-import { getLocation } from "@modules/core/utils/getLocation";
-import clsx from "clsx";
-import "./article-card.css";
-
-type ArticleCardProps = CollectionEntry<"articles">;
-
-const article = Astro.props as ArticleCardProps;
-const { pathname } = Astro.url;
-const location = getLocation(Astro.url);
+import { Image } from "astro:assets";
+import type { CollectionEntry } from "astro:content";
+import { PAGES_ROUTES } from "@const/index";
+import { articleVariantToClass } from "@modules/core/utils/articleVariantToClass";
+import { getLocation } from "@modules/core/utils/getLocation";
+import clsx from "clsx";
+import "./article-card.css";
+
+type ArticleCardProps = CollectionEntry<"articles">;
+
+const article = Astro.props as ArticleCardProps;
+const { pathname } = Astro.url;
+const location = getLocation(Astro.url);
 ---
 <a class="article-card__link" href={`${PAGES_ROUTES.ARTICLES}/${article.data.slug}`} aria-label={article.data.title}>{' '}</a>
 <article

diff --git a/src/ui/modules/core/components/articleCard/ArticleCard.tsx b/src/ui/modules/core/components/articleCard/ArticleCard.tsx
@@ -23,11 +23,11 @@ import type { ReactNode } from "react";
 import "./article-card.css";
 
 interface ArticleCardProps extends CollectionEntry<"articles"> {
-	location: URL;
+	origin: URL;
 	children: ReactNode;
 }
 
-export const ArticleCard = ({ children, location: origin, data }: ArticleCardProps) => {
+export const ArticleCard = ({ children, origin, data }: ArticleCardProps) => {
 	const location = getLocation(origin);
 
 	return (

diff --git a/src/ui/modules/core/components/articleCard/article-card.css b/src/ui/modules/core/components/articleCard/article-card.css
@@ -57,7 +57,7 @@
     / 1fr 1fr;
     }
 
-    &.--is-articles, &.--is-about, &.--is-tags {
+    &.--is-articles, &.--is-about, &.--is-tags, &.--is-article {
         color: var(--neutral-main)
     }
 }
diff --git a/src/ui/modules/core/components/latestArticles/LatestArticles.astro b/src/ui/modules/core/components/latestArticles/LatestArticles.astro
@@ -17,7 +17,7 @@ const articles = (await getCollection("articles")).slice(0, limit);
         Fresh from <a class="latest-articles__title__link --is-clickable --underline-on-hover"
                       href={`${PAGES_ROUTES.ARTICLES}`}>the blog</a>
     </h3>
-    <LatestArticlesSlider client:load articles={articles} location={Astro.url} />
+    <LatestArticlesSlider client:load articles={articles} origin={Astro.url} />
     <script is:inline type="application/ld+json" set:html={JSON.stringify({
       '@context': 'https://schema.org',
       '@type': 'ItemList',

diff --git a/...odules/core/components/latestArticles/atoms/latestArticlesSlider/LatestArticlesSlider.tsx b/...odules/core/components/latestArticles/atoms/latestArticlesSlider/LatestArticlesSlider.tsx
@@ -8,7 +8,7 @@ import "./latest-articles-slider.css";
 
 interface LatestArticlesSLiderProps {
 	articles: CollectionEntry<"articles">[];
-	location: URL;
+	origin: URL;
 }
 
 const SLIDER_CONFIG: SwiperOptions = {
@@ -34,15 +34,15 @@ const SLIDER_CONFIG: SwiperOptions = {
 	containerModifierClass: "latest-articles-",
 };
 
-export const LatestArticlesSlider = ({ articles, location }: LatestArticlesSLiderProps) => {
+export const LatestArticlesSlider = ({ articles, origin }: LatestArticlesSLiderProps) => {
 	return (
 		<div className="latest-articles__slider common-wrapper">
 			<Slider
 				items={articles}
 				swiperOptions={SLIDER_CONFIG}
-				classNames="--is-latest-articles-slider"
+				origin={origin}
 				renderItem={(article) => {
-					const props = { ...article, location };
+					const props = { ...article, origin };
 
 					return (
 						<ArticleCard {...props}>

diff --git a/src/ui/modules/core/components/relatedArticles/RelatedArticles.astro b/src/ui/modules/core/components/relatedArticles/RelatedArticles.astro
@@ -1,7 +1,7 @@
 ---
 import type { CollectionEntry } from "astro:content";
 import { getEntry } from "astro:content";
-import RelatedArticleCard from "./atoms/relatedArticleCard/RelatedArticleCard.astro";
+import { RelatedArticlesSlider } from "@modules/core/components/relatedArticles/atoms/relatedArticlesSlider";
 import "./related-articles.css";
 
 interface RelatedArticleProps {
@@ -17,22 +17,16 @@ const relatedArticles = await Promise.all(
     relatedArticles.length > 0 && (
     <section class="related-articles__wrapper common-wrapper">
         <h3 class="related-articles__title section-title">You might also like</h3>
-        <ul class="related-articles__grid__list flex row-wrap justify-space-between">
-          {relatedArticles.map((relatedArticle, index) => (
-              <li class="related-articles__grid__item">
-                  <RelatedArticleCard {...relatedArticle} />
-              </li>
-              <script is:inline type="application/ld+json" set:html={JSON.stringify({
-                '@context': 'https://schema.org',
-                '@type': 'ItemList',
-                'itemListElement': {
-                  '@type': 'ListItem',
-                  'position': index + 1,
-                  'url': new URL(relatedArticle.data.slug, Astro.url).href,
-                },
-              })}/>
-          ))}
-        </ul>
+        <RelatedArticlesSlider client:only="react" articles={relatedArticles} origin={Astro.url} />
+        <script is:inline type="application/ld+json" set:html={JSON.stringify({
+          '@context': 'https://schema.org',
+          '@type': 'ItemList',
+          'itemListElement': relatedArticles.map(({ data: { slug } }, index) => ({
+            '@type': 'ListItem',
+            'position': index + 1,
+            'url': new URL(slug, Astro.url).href,
+          })),
+        })} />
     </section>
         )
     }
diff --git a/...modules/core/components/relatedArticles/atoms/relatedArticleCard/RelatedArticleCard.astro b/...modules/core/components/relatedArticles/atoms/relatedArticleCard/RelatedArticleCard.astro