style: small improvements + rename

src/pages/projects.astro

@@ -12,7 +12,7 @@ const metadata: Partial<SeoMetadata> = {
 	title: "Projects",
 };
 ---
-<BaseLayout>
+<BaseLayout {...metadata}>
   <ProjectsIntro />
   {projects.map((project, index) =>(
     <ProjectSection id={project.data.id}>

src/pages/tags/[slug].astro

@@ -42,7 +42,7 @@ export async function getStaticPaths() {
 const { slug } = Astro.params as TagParams;
 const { tag } = Astro.props as TagProps;
 const metadata: Partial<SeoMetadata> = {
-	title: tag.title,
+	title: `#${slug}`,
 };
 ---
 <BaseLayout {...metadata}>

src/pages/tags/index.astro

@@ -8,7 +8,7 @@ import "./_tags.css";
 
 const tags = await getCollection("tags");
 const metadata: Partial<SeoMetadata> = {
-	title: tag.title,
+	title: "Tags",
 };
 ---
 <BaseLayout {...metadata}>
@@ -21,7 +21,7 @@ const metadata: Partial<SeoMetadata> = {
                   <h2 class="tags__item__letter">{letter.data.name}</h2>
                   <ul class="tags__item__list flex column-wrap">
                     {tags[index].data.tags.map((tag) => (
-                        <li class="tag__item font-sans-serif">
+                        <li class="tag__item font-sans-serif --is-clickable">
                             <a href={`${PAGES_ROUTES.TAGS}/${tag.slug}`} class="--underline-on-hover">{tag.name}(&times;{tag.count})</a>
                         </li>
                         <script is:inline type="application/ld+json" set:html={JSON.stringify({

src/ui/modules/core/components/articleCard/ArticleCard.astro

@@ -1,22 +1,22 @@
 ---
-import { Image } from "astro:assets";
-import type { CollectionEntry } from "astro:content";
-import { ArticleType } from "@application/dto/article/types";
-import { PAGES_ROUTES } from "@const/index";
-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 { ArticleType } from "@application/dto/article/types";
+import { PAGES_ROUTES } from "@const/index";
+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__link-card" href={`${PAGES_ROUTES.ARTICLES}/${article.data.slug}`} aria-label={article.data.title}>{' '}</a>
+<a class="article-card__link" href={`${PAGES_ROUTES.ARTICLES}/${article.data.slug}`} aria-label={article.data.title}>{' '}</a>
 <article
     class={clsx(
-        'article__item',
+        'article-card__item',
         {
           '--default-variant': article.data.variant === ArticleType.DEFAULT,
           '--no-image-variant': article.data.variant === ArticleType.NO_IMAGE,
@@ -26,26 +26,26 @@ const location = getLocation(Astro.url);
 >
   {article.data.featuredImage && (
       <Image
-          class="article__item__featured-image"
+          class="article-card__featured-image"
           src={article.data.featuredImage.url}
           width={article.data.featuredImage.details.width}
           height={article.data.featuredImage.details.height}
           alt={article.data.title}
           transition:name=`featured-image-${pathname}`
       />
   )}
-    <time class="article__item__publish-date" datetime={article.data.publishDate}>
+    <time class="article-card__publish-date" datetime={article.data.publishDate}>
       {article.data.publishDate}
     </time>
-    <h3 class="article__title font-serif inner-section-title">{article.data.title}</h3>
-    <p class="article__author">
-        by <a href={`${PAGES_ROUTES.TAGS}/${article.data.author.slug}`} class="article__author__name --is-clickable --underline-on-hover ">{article.data.author.name}</a>
+    <h3 class="article-card__title font-serif inner-section-title">{article.data.title}</h3>
+    <p class="article-card__author">
+        by <a href={`${PAGES_ROUTES.TAGS}/${article.data.author.slug}`} class="article-card__author__name --is-clickable --underline-on-hover ">{article.data.author.name}</a>
     </p>
-    <p class="article__excerpt">{article.data.description}</p>
-    <p class="article__reading-time">{article.data.readingTime} minutes read</p>
-    <ul class="article__tags__list flex">
+    <p class="article-card__excerpt">{article.data.description}</p>
+    <p class="article-card__reading-time">{article.data.readingTime} minutes read</p>
+    <ul class="article-card__tags__list flex">
       {article.data.tags?.map(({ slug, name }, index) => (
-          <a class="article__tag__item --underline-on-hover --is-clickable" href={`${PAGES_ROUTES.TAGS}/${slug}`} style={`--inline-index: ${String(index)}`}>
+          <a class="article-card__tag__item --underline-on-hover --is-clickable" href={`${PAGES_ROUTES.TAGS}/${slug}`} style={`--inline-index: ${String(index)}`}>
               #{name}
           </a>
       ))}

src/ui/modules/core/components/articleCard/ArticleCard.tsx

@@ -32,12 +32,12 @@ export const ArticleCard = ({ children, location: origin, data }: ArticleCardPro
 
 	return (
 		<>
-			<a className={"article__link-card"} href={`${PAGES_ROUTES.ARTICLES}/${data.slug}`} aria-label={data.title}>
+			<a className={"article-card__link"} href={`${PAGES_ROUTES.ARTICLES}/${data.slug}`} aria-label={data.title}>
 				{" "}
 			</a>
 			<article
 				className={clsx(
-					"article__item",
+					"article-card__item",
 					{
 						"--default-variant": data.variant === ArticleType.DEFAULT,
 						"--no-image-variant": data.variant === ArticleType.NO_IMAGE,

src/ui/modules/core/components/articleCard/article-card.css

@@ -18,18 +18,18 @@
     will-change: transform;
 }
 
-.article__link-card {
+.article-card__link {
     inset: 0;
     position: absolute;
     width: 100%;
     z-index: 1;
 
-    &:hover ~ .article__item .article__tag__item {
+    &:hover ~ .article-card__item .article-card__tag__item {
         translate: 0 0;
     }
 }
 
-.article__item {
+.article-card__item {
     color: var(--white);
     display: grid;
     gap: 0.5rem 0;

src/ui/modules/core/components/articleCard/atoms/articleCardAuthor/ArticleCardAuthor.tsx

@@ -8,9 +8,9 @@ export interface ArticleCardAuthorProps {
 }
 
 export const ArticleCardAuthor = ({ children, slug }: ArticleCardAuthorProps) => (
-	<p className={"article__author"}>
+	<p className={"article-card__author"}>
 		by{" "}
-		<a href={`${PAGES_ROUTES.TAGS}/${slug}`} className="article__author__name --underline-on-hover --is-clickable">
+		<a href={`${PAGES_ROUTES.TAGS}/${slug}`} className="article-card__author__name --underline-on-hover --is-clickable">
 			{children}
 		</a>
 	</p>

src/ui/modules/core/components/articleCard/atoms/articleCardAuthor/article-card-author.css

@@ -1,4 +1,4 @@
-.article__author {
+.article-card__author {
     color: currentColor;
     grid-area: Article-Card-Author;
 
@@ -8,11 +8,11 @@
         z-index: 10;
     }
 
-    &:has(a:hover) ~ .article__tags__list .article__tag__item {
+    &:has(a:hover) ~ .article-card__tags__list .article-card__tag__item {
         translate: 0 0;
     }
 }
 
-.article__author__name {
+.article-card__author__name {
     display: inline-block;
 }

src/ui/modules/core/components/articleCard/atoms/articleCardExcerpt/ArticleCardExcerpt.tsx

@@ -6,5 +6,5 @@ export interface ArticleCardExcerptProps {
 }
 
 export const ArticleCardExcerpt = ({ children }: ArticleCardExcerptProps) => (
-	<p className="article__excerpt">{children}</p>
+	<p className="article-card__excerpt">{children}</p>
 );

src/ui/modules/core/components/articleCard/atoms/articleCardExcerpt/article-card-excerpt.css

@@ -1,4 +1,4 @@
-.article__excerpt {
+.article-card__excerpt {
     color: currentColor;
     grid-area: Article-Card-Excerpt;
 }

src/ui/modules/core/components/articleCard/atoms/articleCardImage/ArticleCardImage.tsx

@@ -4,5 +4,5 @@ import "./article-card-image.css";
 export type ArticleCardImageProps = Pick<HTMLImageElement, "src" | "alt">;
 
 export const ArticleCardImage = ({ src, alt }: ArticleCardImageProps) => (
-	<Image classNames="article__item__featured-image" src={src} alt={alt} />
+	<Image classNames="article-card__featured-image" src={src} alt={alt} />
 );

src/ui/modules/core/components/articleCard/atoms/articleCardImage/article-card-image.css

@@ -1,4 +1,4 @@
-.article__item__featured-image {
+.article-card__featured-image {
     grid-area: Article-Card-Featured-Image;
     object-fit: cover;
     z-index: 0;

src/ui/modules/core/components/articleCard/atoms/articleCardPublishDate/ArticleCardPublishDate.tsx

@@ -7,7 +7,7 @@ export interface ArticleCardPublishDateProps {
 }
 
 export const ArticleCardPublishDate = ({ children, publishDate }: ArticleCardPublishDateProps) => (
-	<time className={"article__item__publish-date"} dateTime={publishDate}>
+	<time className={"article-card__publish-date"} dateTime={publishDate}>
 		{children}
 	</time>
 );

src/ui/modules/core/components/articleCard/atoms/articleCardPublishDate/article-card-publish-date.css

@@ -1,3 +1,3 @@
-.article__item__publish-date {
+.article-card__publish-date {
     grid-area: Article-Card-Publish-Date;
 }

src/ui/modules/core/components/articleCard/atoms/articleCardReadingTime/ArticleCardReadingTime.tsx

@@ -6,5 +6,5 @@ export interface ArticleCardReadingTimeProps {
 }
 
 export const ArticleCardReadingTime = ({ children }: ArticleCardReadingTimeProps) => (
-	<p className={"article__reading-time"}>{children}</p>
+	<p className={"article-card__reading-time"}>{children}</p>
 );

src/ui/modules/core/components/articleCard/atoms/articleCardReadingTime/article-card-reading-time.css

@@ -1,4 +1,4 @@
-.article__reading-time {
+.article-card__reading-time {
     grid-area: Article-Card-Reading-Time;
     justify-self: flex-end;
 }

src/ui/modules/core/components/articleCard/atoms/articleCardTagItem/ArticleCardTagItem.tsx

@@ -12,7 +12,7 @@ export interface ArticleCardTagItemProps {
 export const ArticleCardTagItem = ({ children, tag, style }: ArticleCardTagItemProps) => (
 	<a
 		key={tag.name}
-		className="article__tag__item --underline-on-hover --is-clickable"
+		className="article-card__tag__item --underline-on-hover --is-clickable"
 		href={`${PAGES_ROUTES.TAGS}/${tag.slug}`}
 		style={style}
 	>

src/ui/modules/core/components/articleCard/atoms/articleCardTagItem/article-card-tag-item.css

@@ -1,4 +1,4 @@
-.article__tag__item {
+.article-card__tag__item {
     transition: all 0.3s ease;
     transition-delay: calc(var(--inline-index) * 0.1s);
     translate: 0 100px;

src/ui/modules/core/components/articleCard/atoms/articleCardTagsList/ArticleCardTagsList.tsx

@@ -6,5 +6,5 @@ export interface ArticleCardTagsListProps {
 }
 
 export const ArticleCardTagsList = ({ children }: ArticleCardTagsListProps) => (
-	<ul className="article__tags__list flex">{children}</ul>
+	<ul className="article-card__tags__list flex">{children}</ul>
 );

src/ui/modules/core/components/articleCard/atoms/articleCardTagsList/article-card-tags-list.css

@@ -1,12 +1,12 @@
-.article__tags__list {
+.article-card__tags__list {
     color: currentColor;
     gap: 0 1rem;
     grid-area: Article-Card-Tags;
     position: relative;
     text-transform: lowercase;
     z-index: 10;
 
-    &:hover .article__tag__item {
+    &:hover .article-card__tag__item {
         translate: 0 0;
     }
 }

src/ui/modules/core/components/articleCard/atoms/articleCardTitle/ArticleCardTitle.tsx

@@ -6,5 +6,5 @@ export interface ArticleCardTitleProps {
 }
 
 export const ArticleCardTitle = ({ children }: ArticleCardTitleProps) => (
-	<h3 className="article__title font-serif inner-section-title">{children}</h3>
+	<h3 className="article-card__title font-serif inner-section-title">{children}</h3>
 );

src/ui/modules/core/components/articleCard/atoms/articleCardTitle/article-card-title.css

@@ -1,4 +1,4 @@
-.article__title {
+.article-card__title {
     align-self: center;
     color: currentColor;
     grid-area: Article-Card-Title;

src/ui/modules/core/components/footer/Footer.astro

@@ -10,7 +10,7 @@ const currentYear = new Date().getFullYear();
 <footer>
   <section class="footer__wrapper common-wrapper">
     <div class="footer__logo flex row-wrap justify-center">
-      <a href="/public">
+      <a href={PAGES_ROUTES.HOME}>
           <Fragment set:html={logo} />
       </a>
     </div>

src/ui/modules/core/components/linkWithArrow/LinkWithArrow.astro

@@ -3,12 +3,11 @@ import horizontalArrowRaw from "@assets/images/svg/left-arrow.svg?raw";
 import "./link-with-arrow.css";
 
 interface LinkWithArrowProps {
-	title: string;
 	href: string;
 	classNames: string;
 }
 
-const { href, classNames, title } = Astro.props as LinkWithArrowProps;
+const { href, classNames } = Astro.props as LinkWithArrowProps;
 ---
 <a href={href} class:list={[`${classNames} link-with-arrow flex align-center --underline-on-hover --is-clickable`]}>
     <slot />

src/ui/modules/core/components/relatedArticles/atoms/relatedArticleCard/RelatedArticleCard.astro

@@ -1,21 +1,21 @@
 ---
-import { Image } from "astro:assets";
-import type { CollectionEntry } from "astro:content";
-import { ArticleType } from "@application/dto/article/types";
-import { PAGES_ROUTES } from "@const/index";
-import clsx from "clsx";
-import "./related-article-card.css";
-
-type RelatedArticleCardProps = CollectionEntry<"articles">;
-
-const { pathname } = Astro.url;
-const relatedArticle = Astro.props as RelatedArticleCardProps;
+import { Image } from "astro:assets";
+import type { CollectionEntry } from "astro:content";
+import { ArticleType } from "@application/dto/article/types";
+import { PAGES_ROUTES } from "@const/index";
+import clsx from "clsx";
+import "./related-article-card.css";
+
+type RelatedArticleCardProps = CollectionEntry<"articles">;
+
+const { pathname } = Astro.url;
+const relatedArticle = Astro.props as RelatedArticleCardProps;
 ---
-<a class="related-article__link-card" href={`${PAGES_ROUTES.ARTICLES}/${relatedArticle.data.slug}`}
+<a class="related-article-card__link" href={`${PAGES_ROUTES.ARTICLES}/${relatedArticle.data.slug}`}
    aria-label={relatedArticle.data.title}>{' '}</a>
 <article
     class={clsx(
-        'related-article__item',
+        'related-article-card__item',
         {
           '--default-variant': relatedArticle.data.variant === ArticleType.DEFAULT,
           '--no-image-variant': relatedArticle.data.variant === ArticleType.NO_IMAGE,
@@ -24,26 +24,26 @@ const relatedArticle = Astro.props as RelatedArticleCardProps;
 >
   {relatedArticle.data.featuredImage && (
       <Image
-          class="related-article__item__featured-image"
+          class="related-article-card__item__featured-image"
           src={relatedArticle.data.featuredImage.url}
           width={relatedArticle.data.featuredImage.details.width}
           height={relatedArticle.data.featuredImage.details.height}
           alt={relatedArticle.data.title}
           transition:name=`featured-image-${pathname}`
       />
   )}
-    <time class="related-article__item__publish-date" datetime={relatedArticle.data.publishDate}>
+    <time class="related-article-card__item__publish-date" datetime={relatedArticle.data.publishDate}>
       {relatedArticle.data.publishDate}
     </time>
-    <h3 class="related-article__title font-serif inner-section-title">{relatedArticle.data.title}</h3>
-    <p class="related-article__author">
-        by <a href={`${PAGES_ROUTES.TAGS}/${relatedArticle.data.author.slug}`} class="related-article__author__name --underline-on-hover --is-clickable">{relatedArticle.data.author.name}</a>
+    <h3 class="related-article-card__title font-serif inner-section-title">{relatedArticle.data.title}</h3>
+    <p class="related-article-card__author">
+        by <a href={`${PAGES_ROUTES.TAGS}/${relatedArticle.data.author.slug}`} class="related-article-card__author__name --underline-on-hover --is-clickable">{relatedArticle.data.author.name}</a>
     </p>
-    <p class="related-article__excerpt">{relatedArticle.data.description}</p>
-    <p class="related-article__reading-time">{relatedArticle.data.readingTime} minutes read</p>
-    <ul class="related-article__tags__list flex">
+    <p class="related-article-card__excerpt">{relatedArticle.data.description}</p>
+    <p class="related-article-card__reading-time">{relatedArticle.data.readingTime} minutes read</p>
+    <ul class="related-article-card__tags__list flex">
       {relatedArticle.data.tags?.map(({ slug, name }, index) => (
-          <a class="related-article__tag__item --underline-on-hover --is-clickable" href={`${PAGES_ROUTES.TAGS}/${slug}`} style={`--inline-index: ${String(index)}`}>
+          <a class="related-article-card__tag__item --underline-on-hover --is-clickable" href={`${PAGES_ROUTES.TAGS}/${slug}`} style={`--inline-index: ${String(index)}`}>
               #{name}
           </a>
       ))}