feat: remove unnecessary prop lifting

src/application/dto/tag/utils/getArticlesByTag/getArticlesByTag.ts

@@ -1,13 +1,13 @@
-import type { ArticleDTO } from "@application/dto/article/types.ts";
-import type { RawTag } from "@application/dto/tag/types.ts";
-
-interface GetArticlesProps {
-	tag: RawTag;
-	articles: ArticleDTO[];
-}
-
-export function getArticlesByTag({ tag, articles }: GetArticlesProps) {
-	return articles.filter((article) =>
-		article.tags.map((tag) => tag.slug).includes(tag.fields.slug as unknown as string),
-	);
-}
+import type { ArticleDTO } from "@application/dto/article/types.ts";
+import type { RawTag } from "@application/dto/tag/types.ts";
+
+interface GetArticlesProps {
+	tag: RawTag;
+	articles: ArticleDTO[];
+}
+
+export function getArticlesByTag({ tag, articles }: GetArticlesProps) {
+	return articles.filter((article) =>
+		article.tags.map((tag) => tag.slug).includes(tag.fields.slug as unknown as string),
+	);
+}

src/application/dto/tag/utils/getArticlesByTag/index.ts

@@ -1 +1 @@
-export * from "./getArticlesByTag.ts";
+export * from "./getArticlesByTag.ts";

src/pages/about.astro

@@ -27,7 +27,7 @@ const bianca = (await authorDTO.render(rawAuthors as RawAuthor[]))
 ---
 
 <BaseLayout title="" description="">
-    <Breadcrumbs classNames="about-page" />
+    <Breadcrumbs />
     <AboutIntro />
     <LittleMoreOfMe client:only="react" cities={cities} />
     <AboutLatestArticles />

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

@@ -51,7 +51,7 @@ const { article } = Astro.props as ArticleProps;
           </section>
       )
   }
-    <Breadcrumbs classNames="article-page" />
+    <Breadcrumbs />
     <div class="article__details">
         <h1 class="article__title">
           {article.title}

src/pages/articles/index.astro

@@ -22,7 +22,7 @@ const featuredArticle = getFeaturedArticle(articles);
 
 <BaseLayout title="" description="">
     <h1 class="articles__title section-title">The Blog</h1>
-    <Breadcrumbs classNames="articles-page" />
+    <Breadcrumbs />
     <FeaturedArticle featuredArticle={featuredArticle} />
     <section class="articles__grid common-wrapper">
         <ul class="articles__grid__list flex row-wrap justify-space-between">

src/pages/contact.astro

@@ -6,7 +6,7 @@ import Breadcrumbs from '@shared/ui/components/breadcrumbs/Breadcrumbs.astro';
 import LatestArticles from '@shared/ui/components/latestArticles/LatestArticles.astro';---
 
 <BaseLayout title="" description="">
-  <Breadcrumbs classNames="contact-page" />
+  <Breadcrumbs />
   <ContactIntro />
   <Tabs />
   <LatestArticles />

src/pages/index.astro

@@ -5,7 +5,6 @@ import Welcome from "@modules/home/components/welcome/Welcome.astro";
 import BaseLayout from "@shared/ui/components/baseLayout/BaseLayout.astro";
 import LatestArticles from "@shared/ui/components/latestArticles/LatestArticles.astro";
 
-// todo: use location for breadrumbs instead of passing the classname
 // todo: add related articles card?
 // todo: how to deploy cloudfare pages
 // todo: add thinner svg lines

src/pages/tags/index.astro

@@ -14,7 +14,7 @@ const tags = await tagDTO.render(rawTags as RawTag[]);
 ---
 
 <BaseLayout title="" description="">
-    <Breadcrumbs classNames="tags-page" />
+    <Breadcrumbs />
     <section class="common-wrapper">
         <h1 class="flex justify-center">All tags</h1>
         <ul class="tags__list flex row-wrap">

src/shared/ui/components/articleCard/ArticleCard.astro

@@ -1,20 +1,20 @@
 ---
-import { Image } from "astro:assets";
-import type { ArticleDTO } from "@application/dto/article/types";
-import { ArticleType } from "@application/dto/article/types";
-import clsx from "clsx";
-import { getLocation } from "./utils/getLocation";
-import "./article-card.css";
-
-export interface ArticleCardProps extends ArticleDTO {
-	origin: URL;
-	href: string;
-}
-
-const { href, title, description, variant, featuredImage, publishDate, author, tags } = Astro.props as ArticleCardProps;
-
-const { pathname } = Astro.url;
-const origin = getLocation(Astro.url);
+import { Image } from "astro:assets";
+import type { ArticleDTO } from "@application/dto/article/types";
+import { ArticleType } from "@application/dto/article/types";
+import clsx from "clsx";
+import { getLocation } from "./utils/getLocation";
+import "./article-card.css";
+
+export interface ArticleCardProps extends ArticleDTO {
+	origin: URL;
+	href: string;
+}
+
+const { href, title, description, variant, featuredImage, publishDate, author, tags } = Astro.props as ArticleCardProps;
+
+const { pathname } = Astro.url;
+const origin = getLocation(Astro.url);
 ---
 
 <a class="article__link-card" href={href} aria-label={title}>{" "}</a>

src/shared/ui/components/articleCard/utils/getLocation/getLocation.ts

@@ -1,8 +1,10 @@
 const PATHS_MAP = {
+	article: "/articles/",
 	articles: "/articles",
 	about: "/about",
 	tag: "/tag",
 	tags: "/tags",
+	contact: "/contact",
 	home: "/",
 };
 

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

@@ -1,18 +1,13 @@
 ---
-import { breadcrumbDTO } from "@application/dto/breadcrumb/breadcrumbDTO";
-import "./breadcrumbs.css";
-
-interface BreadcrumbProps {
-	classNames?: string;
-}
-
-const { classNames } = Astro.props as BreadcrumbProps;
-const { pathname: currentPath, origin } = Astro.url;
-
-const breadcrumbs = breadcrumbDTO.render({ currentPath });
+import { breadcrumbDTO } from "@application/dto/breadcrumb/breadcrumbDTO";
+import { getLocation } from "../articleCard/utils/getLocation";
+import "./breadcrumbs.css";
+
+const breadcrumbs = breadcrumbDTO.render({ currentPath: Astro.url.pathname });
+const origin = getLocation(Astro.url);
 ---
 
-<section class:list={[`breadcrumbs__wrapper ${classNames}`, { 'common-wrapper': classNames }]}>
+<section class:list={[`breadcrumbs__wrapper common-wrapper`, `--is-${origin}` ]}>
 <ul class="breadcrumbs__list flex justify-center align-center font-sans-serif">
   {breadcrumbs?.map(({ link, label }, index) => {
       const isLast = breadcrumbs.at(-1).link === link
@@ -29,7 +24,7 @@ const breadcrumbs = breadcrumbDTO.render({ currentPath });
             "@type": "ListItem",
             "position": index + 1,
             "item": {
-              "@id": `${origin}${link}`,
+              "@id": `${Astro.url.origin}${link}`,
               "name": label
             }
           })}/>

src/shared/ui/components/breadcrumbs/breadcrumbs.css

@@ -7,28 +7,29 @@
         color: var(--primary-main)
     }
 
-    .article-page .breadcrumbs__list {
+
+    .--is-article .breadcrumbs__list {
         justify-content: flex-start;
         margin: 0 auto;
         max-width: var(--grid-small);
         padding-block-start: 2rem;
         width: 100%;
     }
 
-    .articles-page .breadcrumbs__list {
+    .--is-articles .breadcrumbs__list {
         margin-bottom: 5rem;
 
         @media (width <= 960px) {
             margin-bottom: 2rem;
         }
     }
 
-    .projects-page .breadcrumbs__list{
+    .--is-projects .breadcrumbs__list{
         display: none;
     }
 
-    .about-page .breadcrumbs__list,
-    .contact-page .breadcrumbs__list {
+    .--is-about .breadcrumbs__list,
+    .--is-contact .breadcrumbs__list {
         justify-content: flex-start;
         padding-top: 2rem;
     }

src/ui/modules/projects/components/projectsIntro/ProjectsIntro.astro

@@ -1,8 +1,8 @@
 ---
-import Breadcrumbs from "@shared/ui/components/breadcrumbs/Breadcrumbs.astro";
-import "./projects-intro.css";
+import Breadcrumbs from "@shared/ui/components/breadcrumbs/Breadcrumbs.astro";
+import "./projects-intro.css";
 ---
 <section class="projects-intro__wrapper">
   <h1 class="articles__title section-title">Projects</h1>
-  <Breadcrumbs classNames="projects-page" />
+  <Breadcrumbs />
 </section>