chore(deps): bump Node

.nvmrc

@@ -1 +1 @@
-22.6.0
+22.8.0

package.json

@@ -57,7 +57,7 @@
 		"@fontsource/baskervville": "^5.0.21",
 		"@hookform/resolvers": "^3.9.0",
 		"@million/lint": "1.0.0-rc.84",
-		"algoliasearch": "^5.2.4",
+		"algoliasearch": "^5.2.5",
 		"astro": "^4.15.2",
 		"clsx": "^2.1.1",
 		"contentful": "^10.15.0",
@@ -90,7 +90,7 @@
 		"@testing-library/react-hooks": "^8.0.1",
 		"@types/add": "^2.0.3",
 		"@types/markdown-it": "^14.1.2",
-		"@types/node": "^22.5.2",
+		"@types/node": "^22.5.3",
 		"@types/react": "^18.3.5",
 		"@types/react-dom": "^18.3.0",
 		"@types/three": "^0.168.0",

src/pages/articles/_article.css

@@ -1,9 +1,14 @@
+.article__featured__image{
+    max-height: 50vh;
+    object-fit: cover;
+}
+
 .article__wrapper {
     display: grid;
     gap: 0 1rem;
     grid: '. Main-Content .' / 1fr min(var(--grid-article), 100%) 1fr;
     line-height: var(--base-line-height);
-    margin: 2rem 0;
+    margin: 4rem 0;
 
     @supports (initial-letter: 3 2) {
         & > p:first-of-type::first-letter {

src/pages/articles/index.astro

@@ -9,14 +9,19 @@ import "./_articles.css";
 
 const articles = await getCollection("articles");
 const featuredArticle = getFeaturedArticle(articles);
+
+const metadata = {
+	title: "Articles",
+	description: "Articles I wrote while drinking coffee",
+	...(featuredArticle?.data.featuredImage && { image: featuredArticle.data.featuredImage.url }),
+};
 ---
 
-<BaseLayout>
+<BaseLayout {...metadata}>
     <h1 class="articles__title section-title">The Blog</h1>
     <Breadcrumbs />
   {
-      featuredArticle &&
-      <FeaturedArticle featuredArticle={featuredArticle} />
+      featuredArticle && <FeaturedArticle featuredArticle={featuredArticle} />
   }
     <section class="articles__grid common-wrapper">
         <ul class="articles__grid__list flex row-wrap">

src/ui/modules/about/components/aboutIntro/AboutIntro.astro

@@ -19,7 +19,9 @@ import "./about-intro.css";
         Quid de Platone aut de Democrito loquar? Summus dolor plures dies manere non potest? Si enim ita est, vide ne facinus
         facias, cum mori.
       </p>
-        <LinkWithArrow title="See my work" href={`${PAGES_ROUTES.PROJECTS}`} classNames="about-me-intro__body__cta" />
+        <LinkWithArrow href={`${PAGES_ROUTES.PROJECTS}`} classNames="about-me-intro__body__cta">
+            See my work
+        </LinkWithArrow>
     </div>
   </div>
   <div class="about-me-intro__section --right flex row-wrap">

src/ui/modules/article/components/articleDetails/ArticleDetails.astro

@@ -9,20 +9,21 @@ interface ArticleDetailsProps {
 
 const { article } = Astro.props as ArticleDetailsProps;
 ---
-<div class="article__details">
-    <h1 class="article__title">
+
+<div class="article-details">
+    <h1 class="article-details__title">
       {article.data.title}
     </h1>
-    <p class="article__author">by <a class="--underline-on-hover" href={`${PAGES_ROUTES.TAGS}/${article.data.author.slug}`}>{article.data.author.name}</a></p>
-    <time class="article__publish-date font-sans-serif" datetime={article.data.publishDate}>
+    <p class="article-details__author">by <a class="--underline-on-hover" href={`${PAGES_ROUTES.TAGS}/${article.data.author.slug}`}>{article.data.author.name}</a></p>
+    <time class="article-details__publish-date font-sans-serif" datetime={article.data.publishDate}>
       {article.data.publishDate}
     </time>
-    <p class="article__reading-time">{article.data.readingTime} minutes read</p>
+    <p class="article-details__reading-time">{article.data.readingTime} minutes read</p>
   {
       article.data.tags?.length && (
-          <ul class="article__tags__list flex row-wrap">
+          <ul class="article-details__tags__list flex row-wrap">
             {article.data.tags?.map(({ slug, name }) => (
-                <li class="article__tag__item">
+                <li class="article-details__tag__item">
                     <a href={`${PAGES_ROUTES.TAGS}/${slug}`} class="--underline-on-hover">#{name}</a>
                 </li>
             ))}

src/ui/modules/article/components/articleDetails/article-details.css

@@ -1,11 +1,11 @@
-.article__details {
+.article-details {
     display: grid;
     gap: 1rem 0;
     grid:
-      'Article-Date Article-Date Article-Date' min-content
-      'Article-Title Article-Title Article-Title' 1fr
-      'Article-Author Article-Author Article-Reading-Time' min-content
-      'Article-Tags Article-Tags Article-Tags' min-content / 1fr 1fr;
+      'Article-Details-Date Article-Details-Date Article-Details-Date' min-content
+      'Article-Details-Title  Article-Details-Title  Article-Details-Title' 1fr
+      'Article-Details-Author Article-Details-Author Article-Reading-Time' min-content
+      'Article-Details-Tags Article-Details-Tags Article-Details-Tags' min-content / 1fr 1fr;
     margin: 2rem auto;
     max-width: var(--grid-small);
     width: 100%;
@@ -15,34 +15,34 @@
     }
 }
 
-.article__title {
-    grid-area: Article-Title;
+.article-details__title {
+    grid-area: Article-Details-Title ;
 }
 
-.article__author {
-    grid-area: Article-Author;
+.article-details__author {
+    grid-area: Article-Details-Author;
 
     a {
         color: var(--primary-main);
     }
 }
 
-.article__reading-time{
+.article-details__reading-time{
     grid-area: Article-Reading-Time;
 }
 
-.article__tags__list {
+.article-details__tags__list {
     gap: 0 1rem;
-    grid-area: Article-Tags;
+    grid-area: Article-Details-Tags;
     text-transform: lowercase;
     z-index: 10;
 }
 
-.article__publish-date {
-    grid-area: Article-Date;
+.article-details__publish-date {
+    grid-area: Article-Details-Date;
 }
 
-.article__featured__image {
+.article-details__featured__image {
     max-height: 60dvh;
     object-fit: cover;
 }

src/ui/modules/articles/components/featuredArticle/FeaturedArticle.astro

@@ -47,12 +47,14 @@ const featuredArticleShareUrl = new URL(`${PAGES_ROUTES.ARTICLES}/${featuredArti
                           </ul>
                       )
                   }
-                <LinkWithArrow title="Read More" href={`${PAGES_ROUTES.ARTICLES}/${featuredArticle.data.slug}`} classNames="featured-article__cta" />
+                <LinkWithArrow href={`${PAGES_ROUTES.ARTICLES}/${featuredArticle.data.slug}`} classNames="featured-article__cta">
+                    Read more
+                </LinkWithArrow>
                 </div>
                 <div class="featured-article__share__wrapper flex row-wrap">
                     <p class="featured-article__share__title font-serif">SHARE IT!</p>
                     <ul class="featured-article__share__links__list flex row-nowrap">
-                        <li class="featured-article__share__link__item --underline-on-hover">
+                        <li class="featured-article__share__link__item --underline-on-hover --is-clickable">
                             <a
                                 target="_blank"
                                 rel="noopener noreferrer"
@@ -61,7 +63,7 @@ const featuredArticleShareUrl = new URL(`${PAGES_ROUTES.ARTICLES}/${featuredArti
                                 Linkedin
                             </a>
                         </li>
-                        <li class="featured-article__share__link__item --underline-on-hover">
+                        <li class="featured-article__share__link__item --underline-on-hover --is-clickable">
                             <a
                                 target="_blank"
                                 rel="noopener noreferrer"

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

@@ -38,22 +38,22 @@
 
     &.--no-image-variant {
         grid:
-    'Publish-Date Publish-Date' auto
-    'Title Title' 1fr
-    'Author Reading-Time' auto
-    'Excerpt Excerpt' auto
-    'Tags Tags' auto
+    'Article-Card-Publish-Date Article-Card-Publish-Date' auto
+    'Article-Card-Title Article-Card-Title' 1fr
+    'Article-Card-Author Article-Card-Reading-Time' auto
+    'Article-Card-Excerpt Article-Card-Excerpt' auto
+    'Article-Card-Tags Article-Card-Tags' auto
     / 1fr 1fr;
     }
 
     &.--default-variant {
         grid:
-    'Publish-Date Publish-Date' auto
-    'Featured-Image Featured-Image' 1fr
-    'Title Title' auto
-    'Author Reading-Time' auto
-    'Excerpt Excerpt' auto
-    'Tags Tags' auto
+    'Article-Card-Publish-Date Article-Card-Publish-Date' auto
+    'Article-Card-Featured-Image Article-Card-Featured-Image' 1fr
+    'Article-Card-Title Article-Card-Title' auto
+    'Article-Card-Author Article-Card-Reading-Time' auto
+    'Article-Card-Excerpt Article-Card-Excerpt' auto
+    'Article-Card-Tags Article-Card-Tags' auto
     / 1fr 1fr;
     }
 

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

@@ -1,6 +1,6 @@
 .article__author {
     color: currentColor;
-    grid-area: Author;
+    grid-area: Article-Card-Author;
 
     a {
         color: var(--primary-main);

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

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

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

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

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

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

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

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

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

@@ -1,7 +1,7 @@
 .article__tags__list {
     color: currentColor;
     gap: 0 1rem;
-    grid-area: Tags;
+    grid-area: Article-Card-Tags;
     position: relative;
     text-transform: lowercase;
     z-index: 10;

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

@@ -1,6 +1,6 @@
 .article__title {
     align-self: center;
     color: currentColor;
-    grid-area: Title;
+    grid-area: Article-Card-Title;
     letter-spacing: normal;
 }

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

@@ -12,7 +12,7 @@ const { href, classNames, title } = Astro.props as LinkWithArrowProps;
 ---
 
 <a href={href} class:list={[`${classNames} link-with-arrow flex align-center --underline-on-hover --is-clickable`]}>
-    {title}
+    <slot />
     <Fragment set:html={horizontalArrowRaw} />
 </a>