feat: add tag staggered animation on hover

fbuireu · Aug 24, 2024 · 728b4d1 · 728b4d1
1 parent 0f80f46
commit 728b4d1
Show file tree

Hide file tree

Showing 16 changed files with 132 additions and 117 deletions.
diff --git a/.github/renovate.json b/.github/renovate.json
@@ -1,16 +1,8 @@
 {
-    "$schema": "https://docs.renovatebot.com/renovate-schema.json",
-    "extends": [
-        "config:recommended"
-    ],
-    "labels": [
-        "dependencies",
-        "renovate",
-        "bot"
-    ],
-    "schedule": [
-        "every weekend"
-    ],
-    "assigneesFromCodeOwners": true,
-    "reviewersFromCodeOwners": true
+	"$schema": "https://docs.renovatebot.com/renovate-schema.json",
+	"extends": ["config:recommended"],
+	"labels": ["dependencies", "renovate", "bot"],
+	"schedule": ["every weekend"],
+	"assigneesFromCodeOwners": true,
+	"reviewersFromCodeOwners": true
 }
diff --git a/.lintstagedrc.json b/.lintstagedrc.json
@@ -1,14 +1,6 @@
 {
-    "src/**/*.{ts,tsx,css,astro}": [
-        "yarn format:changed"
-    ],
-    "src/**/*.{ts,tsx,astro}": [
-        "yarn lint:ts:changed"
-    ],
-    "src/**/*.css": [
-        "yarn lint:styles"
-    ],
-    "src/**/*.{test,spec}.{ts,tsx}": [
-        "yarn test --bail --findRelatedTests"
-    ]
+	"src/**/*.{ts,tsx,css,astro}": ["yarn format:changed"],
+	"src/**/*.{ts,tsx,astro}": ["yarn lint:ts:changed"],
+	"src/**/*.css": ["yarn lint:styles"],
+	"src/**/*.{test,spec}.{ts,tsx}": ["yarn test --bail --findRelatedTests"]
 }
diff --git a/.stylelintrc.cjs b/.stylelintrc.cjs
@@ -1,12 +1,12 @@
 /** @type {import('stylelint').Config} */
 module.exports = {
-  extends: "stylelint-config-recommended",
-  plugins: ["stylelint-order"],
-  allowEmptyInput: true,
-  rules: {
-    "order/properties-alphabetical-order": true,
-    "selector-class-pattern": null,
-    "value-keyword-case": null,
-    "custom-property-pattern": null,
-  },
+	extends: "stylelint-config-recommended",
+	plugins: ["stylelint-order"],
+	allowEmptyInput: true,
+	rules: {
+		"order/properties-alphabetical-order": true,
+		"selector-class-pattern": null,
+		"value-keyword-case": null,
+		"custom-property-pattern": null,
+	},
 };
diff --git a/commitlint.config.ts b/commitlint.config.ts
@@ -1,18 +1,14 @@
 import type { UserConfig } from "@commitlint/types";
 
 const Configuration: UserConfig = {
-    extends: ["@commitlint/config-conventional"],
-    parserPreset: "conventional-changelog-atom",
-    formatter: "@commitlint/format",
-    rules: {
-        "scope-case": [
-            2,
-            "always",
-            ["lower-case", "pascal-case", "camel-case"],
-        ],
-        "scope-enum": [2, "always", ["deps", "other"]],
-        "header-max-length": [2, "always", 130],
-    },
+	extends: ["@commitlint/config-conventional"],
+	parserPreset: "conventional-changelog-atom",
+	formatter: "@commitlint/format",
+	rules: {
+		"scope-case": [2, "always", ["lower-case", "pascal-case", "camel-case"]],
+		"scope-enum": [2, "always", ["deps", "other"]],
+		"header-max-length": [2, "always", 130],
+	},
 };
 
 export default Configuration;
diff --git a/package.json b/package.json
@@ -29,10 +29,10 @@
         "sync": "astro sync",
         "check": "astro check",
         "test": "vitest --passWithNoTests",
-        "test:changed": "yarn test --bail --findRelatedTests --passWithNoTests",
-        "test:all": "yarn test --passWithNoTests",
-        "test:ut": "yarn test --passWithNoTests",
-        "test:e2e": "yarn test --passWithNoTests",
+        "test:changed": "yarn test --bail --findRelatedTests",
+        "test:all": "yarn test",
+        "test:ut": "yarn test",
+        "test:e2e": "yarn test",
         "format": "biome check --write --no-errors-on-unmatched",
         "format:all": "yarn format .",
         "format:changed": "yarn format --changed",

diff --git a/src/pages/articles/index.astro b/src/pages/articles/index.astro
@@ -20,8 +20,7 @@ const featuredArticle = getFeaturedArticle(articles);
           {
             articles
                 .filter((article) => article.data.slug !== featuredArticle.data.slug)
-                .map((article, index) => {
-                  return;
+                .map((article, index) => (
                     <li class="articles__grid__item">
                         <ArticleCard {...article} />
                         <script is:inline type="application/ld+json" set:html={JSON.stringify({
@@ -33,8 +32,8 @@ const featuredArticle = getFeaturedArticle(articles);
                             'url': new URL(`${Astro.url}/${article.data.slug}`, Astro.url).href,
                           },
                         })} />
-                    </li>;
-                })}
+                    </li>
+                ))}
         </ul>
     </section>
 </BaseLayout>
diff --git a/src/pages/index.astro b/src/pages/index.astro
@@ -7,8 +7,8 @@ import Welcome from "@modules/home/components/welcome/Welcome.astro";
 
 // todo: check metadata all pages
 // todo: add small transitions & animations
-//        - home articles: show tags staggered in hover
 //        - CTAs with arrow: animate arrow
+//        - add underline to links
 //        - Latest articles (https://codepen.io/jh3y/pen/MWLyGxo)
 // todo: wait for wrangler webhook -->  add Algolia + filters (+ URL filtering) https://www.algolia.com/developers/contentful-search-algolia/ (webhook problem)
 // todo: how to deploy cloudfare pages

diff --git a/src/ui/modules/about/components/aboutLatestArticlesSlider/AboutLatestArticlesSlider.tsx b/src/ui/modules/about/components/aboutLatestArticlesSlider/AboutLatestArticlesSlider.tsx
@@ -4,6 +4,7 @@ import { ArticleCard } from "@modules/core/components/articleCard/ArticleCard.ts
 import { Slider } from "@modules/core/components/slider";
 import type { SwiperOptions } from "swiper/types";
 import "./about-latest-articles-slider.css";
+import type { CSSProperties } from "react";
 
 interface AboutLatestArticlesSLiderProps {
 	articles: CollectionEntry<"articles">[];
@@ -52,11 +53,17 @@ export const AboutLatestArticlesSlider = ({ articles, origin }: AboutLatestArtic
 							<ArticleCard.Author slug={article.data.author.slug}>{article.data.author.name}</ArticleCard.Author>
 							<ArticleCard.ReadingTime>{article.data.readingTime} min.</ArticleCard.ReadingTime>
 							<ArticleCard.Tags>
-								{article.data.tags?.map((tag) => (
-									<ArticleCard.Tag tag={tag} key={tag.name}>
-										{tag.name}
-									</ArticleCard.Tag>
-								))}
+								{article.data.tags?.map((tag, index) => {
+									const style: CSSProperties & { [key: string]: string } = {
+										"--inline-index": String(index),
+									};
+
+									return (
+										<ArticleCard.Tag key={tag.name} tag={tag} style={style}>
+											{tag.name}
+										</ArticleCard.Tag>
+									);
+								})}
 							</ArticleCard.Tags>
 						</ArticleCard>
 					);

diff --git a/src/ui/modules/core/components/articleCard/ArticleCard.astro b/src/ui/modules/core/components/articleCard/ArticleCard.astro
@@ -13,7 +13,7 @@ const { pathname } = Astro.url;
 const origin = getLocation(Astro.url);
 ---
 
-<a class="article__link-card" href={`/articles/${article.data.slug}`} aria-label={article.data.title}>{" "}</a>
+<a class="article__link-card" href={`/articles/${article.data.slug}`} aria-label={article.data.title}>{' '}</a>
 <article
     class={clsx(
         'article__item',
@@ -44,8 +44,8 @@ const origin = getLocation(Astro.url);
     <p class="article__excerpt">{article.data.description}</p>
     <p class="article__reading-time">{article.data.readingTime} min.</p>
     <ul class="article__tags__list flex">
-      {article.data.tags?.map(({slug, name}) => (
-          <a class="article__tag__item" href={`/tags/${slug}`}>
+      {article.data.tags?.map(({ slug, name }, index) => (
+          <a class="article__tag__item" href={`/tags/${slug}`} style={`--inline-index: ${String(index)}`}>
               #{name}
           </a>
       ))}

diff --git a/src/ui/modules/core/components/articleCard/ArticleCard.tsx b/src/ui/modules/core/components/articleCard/ArticleCard.tsx
@@ -63,8 +63,8 @@ const ReadingTime = ({ children }: ArticleCardReadingTimeProps) => (
 	<ArticleCardReadingTime>{children}</ArticleCardReadingTime>
 );
 const Tags = ({ children }: ArticleCardTagsListProps) => <ArticleCardTagsList>{children}</ArticleCardTagsList>;
-const Tag = ({ children, tag }: ArticleCardTagItemProps) => (
-	<ArticleCardTagItem tag={tag}>{children}</ArticleCardTagItem>
+const Tag = ({ children, ...props }: ArticleCardTagItemProps) => (
+	<ArticleCardTagItem {...props}>{children}</ArticleCardTagItem>
 );
 
 ArticleCard.Title = Title;

diff --git a/src/ui/modules/core/components/articleCard/article-card.css b/src/ui/modules/core/components/articleCard/article-card.css
@@ -3,55 +3,61 @@
 @import url('atoms/articleCardImage/article-card-image.css');
 @import url('atoms/articleCardPublishDate/article-card-publish-date.css');
 @import url('atoms/articleCardTagsList/article-card-tags-list.css');
+@import url('atoms/articleCardTagItem/article-card-tag-item.css');
 @import url('atoms/articleCardTitle/article-card-title.css');
 @import url('atoms/articleCardReadingTime/article-card-reading-time.css');
 
-    .article__item__wrapper {
-        backface-visibility: hidden;
-        -webkit-font-smoothing: subpixel-antialiased;
-        max-width: calc(100% / 4 - 2rem);
-        position: relative;
-        transform: translateZ(0);
-        transition: 0.2s scale;
-        width: 100%;
-        will-change: transform;
-    }
+.article__item__wrapper {
+    backface-visibility: hidden;
+    -webkit-font-smoothing: subpixel-antialiased;
+    max-width: calc(100% / 4 - 2rem);
+    position: relative;
+    transform: translateZ(0);
+    transition: 0.2s scale;
+    width: 100%;
+    will-change: transform;
+}
+
+.article__link-card {
+    inset: 0;
+    position: absolute;
+    width: 100%;
+    z-index: 1;
 
-    .article__link-card {
-        inset: 0;
-        position: absolute;
-        width: 100%;
-        z-index: 1;
+    &:hover ~ .article__item .article__tag__item {
+        transform: translateY(0);
     }
+}
 
-    .article__item {
-        color: var(--white);
-        display: grid;
-        gap: 0.5rem 0;
-        height: 100%;
+.article__item {
+    color: var(--white);
+    display: grid;
+    gap: 0.5rem 0;
+    height: 100%;
+    overflow: hidden;
 
-        &.--no-image-variant {
-            grid:
-        'Publish-Date Publish-Date' auto
-        'Title Title' auto
-        'Author Reading-Time' auto
-        'Excerpt Excerpt' auto
-        'Tags Tags' auto
-        / 1fr 1fr;
-        }
+    &.--no-image-variant {
+        grid:
+    'Publish-Date Publish-Date' auto
+    'Title Title' auto
+    'Author Reading-Time' auto
+    'Excerpt Excerpt' auto
+    'Tags 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
-        / 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
+    / 1fr 1fr;
+    }
 
-        &.--is-articles, &.--is-about, &.--is-tag{
-            color: var(--neutral-main)
-        }
+    &.--is-articles, &.--is-about, &.--is-tag {
+        color: var(--neutral-main)
     }
+}
diff --git a/src/ui/modules/core/components/articleCard/atoms/articleCardAuthor/article-card-author.css b/src/ui/modules/core/components/articleCard/atoms/articleCardAuthor/article-card-author.css
@@ -7,4 +7,8 @@
         position: relative;
         z-index: 10;
     }
-}
+
+    &:has(a:hover) ~ .article__tags__list .article__tag__item {
+        transform: translateY(0);
+    }
+}
diff --git a/src/ui/modules/core/components/articleCard/atoms/articleCardTagItem/ArticleCardTagItem.tsx b/src/ui/modules/core/components/articleCard/atoms/articleCardTagItem/ArticleCardTagItem.tsx
@@ -1,13 +1,15 @@
 import type { BaseTagDTO } from "@application/dto/tag/types.ts";
-import type { ReactNode } from "react";
+import type { CSSProperties, ReactNode } from "react";
+import "./article-card-tag-item.css";
 
 export interface ArticleCardTagItemProps {
 	children: ReactNode;
 	tag: BaseTagDTO;
+	style: CSSProperties;
 }
 
-export const ArticleCardTagItem = ({ children, tag }: ArticleCardTagItemProps) => (
-	<a key={tag.name} className="article__tag__item" href={`/tags/${tag.slug}`}>
+export const ArticleCardTagItem = ({ children, tag, style }: ArticleCardTagItemProps) => (
+	<a key={tag.name} className="article__tag__item" href={`/tags/${tag.slug}`} style={style}>
 		#{children}
 	</a>
 );
diff --git a/...ui/modules/core/components/articleCard/atoms/articleCardTagItem/article-card-tag-item.css b/...ui/modules/core/components/articleCard/atoms/articleCardTagItem/article-card-tag-item.css
@@ -0,0 +1,5 @@
+.article__tag__item {
+    transform: translateY(100px);
+    transition: transform 0.3s ease;
+    transition-delay: calc(var(--inline-index) * 0.1s);
+}
diff --git a/.../modules/core/components/articleCard/atoms/articleCardTagsList/article-card-tags-list.css b/.../modules/core/components/articleCard/atoms/articleCardTagsList/article-card-tags-list.css
@@ -5,4 +5,8 @@
     position: relative;
     text-transform: lowercase;
     z-index: 10;
+
+    &:hover .article__tag__item {
+        transform: translateY(0);
+    }
 }
diff --git a/...odules/core/components/latestArticles/atoms/latestArticlesSlider/LatestArticlesSlider.tsx b/...odules/core/components/latestArticles/atoms/latestArticlesSlider/LatestArticlesSlider.tsx
@@ -2,13 +2,15 @@ import type { CollectionEntry } from "astro:content";
 import { DEFAULT_SWIPER_CONFIG } from "@const/const.ts";
 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 "./latest-articles-slider.css";
 
 interface LatestArticlesSLiderProps {
 	articles: CollectionEntry<"articles">[];
 	origin: URL;
 }
+
 const SLIDER_CONFIG: SwiperOptions = {
 	...DEFAULT_SWIPER_CONFIG,
 	slidesPerView: 4,
@@ -55,11 +57,17 @@ export const LatestArticlesSlider = ({ articles, origin }: LatestArticlesSLiderP
 							<ArticleCard.Author slug={article.data.author.slug}>{article.data.author.name}</ArticleCard.Author>
 							<ArticleCard.ReadingTime>{article.data.readingTime} min.</ArticleCard.ReadingTime>
 							<ArticleCard.Tags>
-								{article.data.tags?.map((tag) => (
-									<ArticleCard.Tag tag={tag} key={tag.name}>
-										{tag.name}
-									</ArticleCard.Tag>
-								))}
+								{article.data.tags?.map((tag, index) => {
+									const style: CSSProperties & { [key: string]: string } = {
+										"--inline-index": String(index),
+									};
+
+									return (
+										<ArticleCard.Tag key={tag.name} tag={tag} style={style}>
+											{tag.name}
+										</ArticleCard.Tag>
+									);
+								})}
 							</ArticleCard.Tags>
 						</ArticleCard>
 					);