From 6f78a439197195c7824116a6938fdd321dcdf68a Mon Sep 17 00:00:00 2001 From: Augustin Mauroy <97875033+AugustinMauroy@users.noreply.github.com> Date: Thu, 13 Feb 2025 13:03:04 +0100 Subject: [PATCH 1/2] style: migrate to tailwind v4 --- app/article/[[...categories]]/page.module.css | 44 - app/article/[[...categories]]/page.tsx | 15 +- app/article/post/[article]/page.module.css | 5 - app/article/post/[article]/page.tsx | 3 +- .../Common/AuthorsList/index.module.css | 5 - components/Common/AuthorsList/index.tsx | 3 +- components/Common/Avatar/index.module.css | 40 - components/Common/Avatar/index.tsx | 13 +- components/Common/Button/index.module.css | 59 +- .../CategoriesSelector/index.module.css | 31 - .../Common/CategoriesSelector/index.tsx | 16 +- components/Landing/Hero/index.module.css | 41 - components/Landing/Hero/index.tsx | 14 +- .../LastestArticleSection/index.module.css | 6 +- .../Landing/LastestArticleSection/index.tsx | 6 +- components/Post/ArticleCard/index.module.css | 55 - .../Post/ArticleCard/index.test.tsx.snapshot | 4 +- components/Post/ArticleCard/index.tsx | 24 +- .../Post/ArticleHeader/index.module.css | 18 - components/Post/ArticleHeader/index.tsx | 7 +- .../Post/LastestArticle/index.module.css | 12 - components/Post/LastestArticle/index.tsx | 5 +- components/Sections/Header/index.module.css | 52 - components/Sections/Header/index.tsx | 19 +- components/Sections/NotFound/index.module.css | 20 - components/Sections/NotFound/index.tsx | 9 +- package-lock.json | 1877 +++++------------ package.json | 4 +- postcss.config.js | 4 +- registers/react.ts | 1 - styles/globals.css | 39 +- styles/markdown.css | 12 +- tailwind.config.ts | 28 - 33 files changed, 702 insertions(+), 1789 deletions(-) delete mode 100644 app/article/[[...categories]]/page.module.css delete mode 100644 app/article/post/[article]/page.module.css delete mode 100644 components/Common/AuthorsList/index.module.css delete mode 100644 components/Common/Avatar/index.module.css delete mode 100644 components/Common/CategoriesSelector/index.module.css delete mode 100644 components/Landing/Hero/index.module.css delete mode 100644 components/Post/ArticleCard/index.module.css delete mode 100644 components/Post/ArticleHeader/index.module.css delete mode 100644 components/Post/LastestArticle/index.module.css delete mode 100644 components/Sections/Header/index.module.css delete mode 100644 components/Sections/NotFound/index.module.css delete mode 100644 tailwind.config.ts diff --git a/app/article/[[...categories]]/page.module.css b/app/article/[[...categories]]/page.module.css deleted file mode 100644 index 59ca66c..0000000 --- a/app/article/[[...categories]]/page.module.css +++ /dev/null @@ -1,44 +0,0 @@ -.page { - @apply container - mx-auto - px-4 - py-8; - - h1 { - @apply mb-4 - font-bold - text-3xl - lg:text-4xl; - } - - p { - @apply mb-4 - max-w-screen-md - text-gray-500 - dark:text-gray-400; - } - - .noArticles { - @apply mt-8; - - p { - @apply bg-gradient-to-r - from-green-300 - to-green-800 - bg-clip-text - text-center - font-black - text-3xl - text-transparent; - } - } - - .articles { - @apply grid - grid-cols-1 - justify-center - gap-4 - md:grid-cols-2 - lg:grid-cols-3; - } -} diff --git a/app/article/[[...categories]]/page.tsx b/app/article/[[...categories]]/page.tsx index 6a2e25e..6a301d2 100644 --- a/app/article/[[...categories]]/page.tsx +++ b/app/article/[[...categories]]/page.tsx @@ -1,7 +1,6 @@ import { CategoriesSelector } from '~/components/Common/CategoriesSelector/index.tsx'; import { ArticleCard } from '~/components/Post/ArticleCard/index.tsx'; import { getPostsMetadata } from '~/lib/post.ts'; -import styles from './page.module.css'; import type { FC } from 'react'; import type { Metadata } from 'next'; @@ -60,9 +59,9 @@ const Page: FC = async ({ params }) => { const postsMetadata = await getPostsMetadata(currentCategories[0]); return ( -
-

Article list

-

+

+

Article list

+

Here you can find all the articles available on the website. You can filter them by category using the dropdown below.

@@ -71,11 +70,13 @@ const Page: FC = async ({ params }) => { categories={CATEGORIES} /> {postsMetadata.length === 0 ? ( -
-

No articles here for now

+
+

+ No articles here for now +

) : ( -
+
{postsMetadata.map(post => ( ))} diff --git a/app/article/post/[article]/page.module.css b/app/article/post/[article]/page.module.css deleted file mode 100644 index 2057ca7..0000000 --- a/app/article/post/[article]/page.module.css +++ /dev/null @@ -1,5 +0,0 @@ -.page { - @apply container - mx-auto - px-4; -} diff --git a/app/article/post/[article]/page.tsx b/app/article/post/[article]/page.tsx index 11d4887..9755701 100644 --- a/app/article/post/[article]/page.tsx +++ b/app/article/post/[article]/page.tsx @@ -2,7 +2,6 @@ import { notFound } from 'next/navigation'; import { getContent } from '~/lib/content.ts'; import { getAllPosts } from '~/lib/post.ts'; import { ArticleHeader } from '~/components/Post/ArticleHeader/index.tsx'; -import styles from './page.module.css'; import type { FC } from 'react'; import type { Metadata } from 'next'; import type { PostFrontmatter } from '~/types/frontmatter'; @@ -54,7 +53,7 @@ const Page: FC = async ({ params }) => { const { content, frontmatter } = mdxResult; return ( -
+
= ({ authors }) => { )); - return
{authorsList}
; + return
{authorsList}
; }; diff --git a/components/Common/Avatar/index.module.css b/components/Common/Avatar/index.module.css deleted file mode 100644 index 2355bde..0000000 --- a/components/Common/Avatar/index.module.css +++ /dev/null @@ -1,40 +0,0 @@ -.root { - @apply flex - size-10 - shrink-0 - overflow-hidden - rounded-md - outline - outline-2 - outline-green-300 - dark:outline-green-800 - shadow-sm - transition-shadow - shadow-green-300 - dark:shadow-green-800; - - &:has(.image):hover { - @apply shadow-md - shadow-green-400 - dark:shadow-green-700; - } -} - -.image { - @apply aspect-square - size-full; -} - -.fallback { - @apply flex - size-full - items-center - justify-center - rounded-md - bg-green-100 - text-base - font-bold - text-black - dark:bg-green-800 - dark:text-white; -} diff --git a/components/Common/Avatar/index.tsx b/components/Common/Avatar/index.tsx index 8909dd2..4f06d64 100644 --- a/components/Common/Avatar/index.tsx +++ b/components/Common/Avatar/index.tsx @@ -1,7 +1,6 @@ 'use client'; import * as AvatarPrimitive from '@radix-ui/react-avatar'; import classNames from 'classnames'; -import styles from './index.module.css'; import type { ComponentProps } from 'react'; const Avatar = ({ @@ -11,7 +10,10 @@ const Avatar = ({ }: ComponentProps) => ( ); @@ -25,7 +27,7 @@ const AvatarImage = ({ }: ComponentProps) => ( ); @@ -39,7 +41,10 @@ const AvatarFallback = ({ }: ComponentProps) => ( ); diff --git a/components/Common/Button/index.module.css b/components/Common/Button/index.module.css index ecd33e2..b4bd757 100644 --- a/components/Common/Button/index.module.css +++ b/components/Common/Button/index.module.css @@ -1,5 +1,7 @@ +@reference "../../../styles/globals.css"; + .button { - @apply rounded + @apply rounded-sm inline-flex items-center justify-center @@ -8,15 +10,9 @@ py-2 transition duration-300 - ease-in-out; - - &:focus { - @apply outline-none; - } - - svg { - @apply size-5; - } + ease-in-out + focus:outline-none + has-[svg]:*:size-5; } .primary { @@ -26,15 +22,12 @@ bg-green-500 text-white dark:bg-green-400 - dark:text-gray-900; - - &:hover { - @apply border-gray-600 - bg-transparent - text-gray-600 - dark:text-gray-300 - dark:border-gray-300; - } + dark:text-gray-900 + hover:border-gray-600 + hover:bg-transparent + hover:text-gray-600 + hover:dark:text-gray-300 + hover:dark:border-gray-300; } .secondary { @@ -44,15 +37,12 @@ bg-gray-600 text-white dark:bg-gray-300 - dark:text-gray-900; - - &:hover { - @apply border-gray-600 - bg-transparent - text-gray-600 - dark:text-gray-300 - dark:border-gray-300; - } + dark:text-gray-900 + hover:border-gray-600 + hover:bg-transparent + hover:text-gray-600 + hover:dark:text-gray-300 + hover:dark:border-gray-300; } .special { @@ -62,12 +52,9 @@ bg-transparent text-gray-600 dark:text-gray-300 - dark:border-gray-300; - - &:hover { - @apply bg-green-500 - text-white - dark:bg-green-400 - dark:text-gray-900; - } + dark:border-gray-300 + hover:bg-green-500 + hover:text-white + hover:dark:bg-green-400 + hover:dark:text-gray-900; } diff --git a/components/Common/CategoriesSelector/index.module.css b/components/Common/CategoriesSelector/index.module.css deleted file mode 100644 index 25867c6..0000000 --- a/components/Common/CategoriesSelector/index.module.css +++ /dev/null @@ -1,31 +0,0 @@ -.categoriesSelector { - @apply flex - space-x-2 - border-green-400 - border-b-4 - mb-4 - text-gray-800 - dark:text-gray-200 - dark:border-green-600; - - .item { - @apply flex - items-center - px-2 - py-1 - rounded-t-md - cursor-pointer - transition - duration-200 - hover:bg-green-400 - hover:text-white - dark:hover:bg-green-600 - dark:hover:text-white; - - &.active { - @apply bg-green-400 - text-white - dark:bg-green-600; - } - } -} diff --git a/components/Common/CategoriesSelector/index.tsx b/components/Common/CategoriesSelector/index.tsx index 8619928..0ccbfdf 100644 --- a/components/Common/CategoriesSelector/index.tsx +++ b/components/Common/CategoriesSelector/index.tsx @@ -1,5 +1,4 @@ import classNames from 'classnames'; -import styles from './index.module.css'; import type { FC } from 'react'; type CategoriesSelectorProps = { @@ -14,15 +13,18 @@ export const CategoriesSelector: FC = ({ currentCategories, categories, }) => ( -
    +
      {categories.map((category, i) => (
    • {category.category} diff --git a/components/Landing/Hero/index.module.css b/components/Landing/Hero/index.module.css deleted file mode 100644 index 572174c..0000000 --- a/components/Landing/Hero/index.module.css +++ /dev/null @@ -1,41 +0,0 @@ -.hero { - @apply flex - h-[calc(100vh-4rem)] - w-full - flex-col - items-center - justify-center - gap-8 - bg-gradient-to-b - from-transparent - via-green-50/50 - to-green-50 - px-10 - dark:from-transparent - dark:via-green-800/25 - dark:to-green-800; - - h1 { - @apply text-center - font-bold - text-4xl; - - code { - @apply rounded - bg-gray-200 - p-1 - dark:bg-gray-800 - dark:text-gray-200; - } - } - - p { - @apply text-center - dark:text-gray-200; - } - - .actions { - @apply flex - gap-4; - } -} diff --git a/components/Landing/Hero/index.tsx b/components/Landing/Hero/index.tsx index 3a2525d..7c060d6 100644 --- a/components/Landing/Hero/index.tsx +++ b/components/Landing/Hero/index.tsx @@ -1,18 +1,20 @@ import { ButtonLink } from '~/components/Common/Button/Link/index.tsx'; import { NPMIcon } from '~/components/Icons/NPM.tsx'; -import styles from './index.module.css'; import type { FC } from 'react'; export const Hero: FC = () => ( -
      -

      - Nodejs-Loaders - A collection of loaders for Node.js +
      +

      + + Nodejs-Loaders + {' '} + - A collection of loaders for Node.js

      -

      +

      This project is a collection of loaders for Node.js. It's allow you to have a lightweight and fast devlopment or testing environment.

      -
      +
      Read more about us diff --git a/components/Landing/LastestArticleSection/index.module.css b/components/Landing/LastestArticleSection/index.module.css index 0bc64fc..28b2152 100644 --- a/components/Landing/LastestArticleSection/index.module.css +++ b/components/Landing/LastestArticleSection/index.module.css @@ -1,3 +1,5 @@ +@reference "../../../styles/globals.css"; + .section { @apply bg-green-50 px-10 @@ -10,14 +12,14 @@ border-b-2 dark:border-gray-200; - h2 { + .title { @apply mb-2 font-bold text-3xl dark:text-white; } - p { + .p { @apply font-semibold text-gray-600 dark:text-gray-200; diff --git a/components/Landing/LastestArticleSection/index.tsx b/components/Landing/LastestArticleSection/index.tsx index 5d56afd..0b5626f 100644 --- a/components/Landing/LastestArticleSection/index.tsx +++ b/components/Landing/LastestArticleSection/index.tsx @@ -5,8 +5,10 @@ import type { FC } from 'react'; export const LatestArticleSection: FC = () => (
      -

      Lastes Articles

      -

      Discover the lastest articles about Nodejs-Loaders

      +

      Lastes Articles

      +

      + Discover the lastest articles about Nodejs-Loaders +

      diff --git a/components/Post/ArticleCard/index.module.css b/components/Post/ArticleCard/index.module.css deleted file mode 100644 index baaf4dc..0000000 --- a/components/Post/ArticleCard/index.module.css +++ /dev/null @@ -1,55 +0,0 @@ -.content { - @apply bg-white p-4 - rounded-md - max-w-96 - border-2 - border-gray-600 - dark:bg-gray-800 - dark:text-white - dark:border-gray-800; - - .title { - @apply text-2xl - font-bold - text-green-600 - mb-2 - dark:text-green-400; - - a { - @apply text-green-600 - hover:text-green-800 - dark:text-green-400 - dark:hover:text-green-300; - } - } - - .description { - @apply text-gray-700 - mb-2 - dark:text-gray-300 - font-medium; - } - - .meta { - @apply flex - justify-between - items-center - gap-1.5 - text-gray-500 - dark:text-gray-400; - - .author { - @apply text-gray-600 - dark:text-gray-300 - font-medium - truncate; - } - - .date { - @apply text-gray-600 - dark:text-gray-300 - font-thin - flex-shrink-0; - } - } -} diff --git a/components/Post/ArticleCard/index.test.tsx.snapshot b/components/Post/ArticleCard/index.test.tsx.snapshot index 46b81e8..52d3e2d 100644 --- a/components/Post/ArticleCard/index.test.tsx.snapshot +++ b/components/Post/ArticleCard/index.test.tsx.snapshot @@ -1,7 +1,7 @@ exports[`ArticleCard > should render as a div by default 1`] = ` -"

      Test Title

      Test Description

      Author1, Author22025-07-01
      " +"

      Test Title

      Test Description

      Author1, Author22025-07-01
      " `; exports[`ArticleCard > should render as a li when specified 1`] = ` -"

    • Test Title

      Test Description

      Author1, Author22025-07-01
      • " +"

    • Test Title

      Test Description

      Author1, Author22025-07-01
      • " `; diff --git a/components/Post/ArticleCard/index.tsx b/components/Post/ArticleCard/index.tsx index 7a146fd..5a8b7e8 100644 --- a/components/Post/ArticleCard/index.tsx +++ b/components/Post/ArticleCard/index.tsx @@ -1,4 +1,3 @@ -import styles from './index.module.css'; import { postSlug2Href } from '~/utils/postUtils.ts'; import type { FC } from 'react'; import type { PostFrontmatter } from '~/types/frontmatter.ts'; @@ -16,16 +15,25 @@ export const ArticleCard: FC = ({ slug, as: Component = 'div', }) => ( - -

      - {title} + +

      + + {title} +

      -

      {description}

      -
      - +

      + {description} +

      +
      + {authors.split(',').slice(0, 2).join(', ')} - {date} + + {date} +
      ); diff --git a/components/Post/ArticleHeader/index.module.css b/components/Post/ArticleHeader/index.module.css deleted file mode 100644 index 37a9483..0000000 --- a/components/Post/ArticleHeader/index.module.css +++ /dev/null @@ -1,18 +0,0 @@ -.header { - @apply my-8 - border-gray-200 - border-b-2 - dark:border-gray-800; - - h1 { - @apply font-bold - text-3xl - lg:text-4xl; - } - - p { - @apply text-gray-500 - text-lg - dark:text-gray-400; - } -} diff --git a/components/Post/ArticleHeader/index.tsx b/components/Post/ArticleHeader/index.tsx index 7764328..f801bf6 100644 --- a/components/Post/ArticleHeader/index.tsx +++ b/components/Post/ArticleHeader/index.tsx @@ -1,5 +1,4 @@ import { AuthorsList } from '~/components/Common/AuthorsList/index.tsx'; -import styles from './index.module.css'; import type { FC } from 'react'; type ArticleHeaderProps = { @@ -13,9 +12,9 @@ export const ArticleHeader: FC = ({ description, authors, }) => ( -
      -

      {title}

      -

      {description}

      +
      +

      {title}

      +

      {description}

      ); diff --git a/components/Post/LastestArticle/index.module.css b/components/Post/LastestArticle/index.module.css deleted file mode 100644 index cb837c4..0000000 --- a/components/Post/LastestArticle/index.module.css +++ /dev/null @@ -1,12 +0,0 @@ -.wrapper { - @apply w-full; - - ul { - @apply flex - flex-col - items-center - justify-between - gap-4 - xl:flex-row; - } -} diff --git a/components/Post/LastestArticle/index.tsx b/components/Post/LastestArticle/index.tsx index 07c0833..c1ec900 100644 --- a/components/Post/LastestArticle/index.tsx +++ b/components/Post/LastestArticle/index.tsx @@ -1,6 +1,5 @@ import { getPostsMetadata } from '~/lib/post.ts'; import { ArticleCard } from '../ArticleCard/index.tsx'; -import styles from './index.module.css'; import type { FC } from 'react'; type LastestArticleProps = { @@ -15,11 +14,11 @@ export const LastestArticle: FC = async ({ limit }) => { }); return ( -
      +
      {usedPostsMetadata.length === 0 ? (

      No posts found.

      ) : ( -
        +
          {usedPostsMetadata.map(postMetadata => (
        • diff --git a/components/Sections/Header/index.module.css b/components/Sections/Header/index.module.css deleted file mode 100644 index 27810b9..0000000 --- a/components/Sections/Header/index.module.css +++ /dev/null @@ -1,52 +0,0 @@ -.header { - @apply border-b-2 - border-gray-600 - w-full - h-16 - px-4 - text-gray-600 - flex - justify-between - items-center - bg-gray-50 - dark:text-gray-300 - dark:bg-gray-900; - - .logo { - @apply cursor-pointer - rounded - py-0.5 - inline-flex - items-center - text-lg - gap-2 - px-1; - - &:hover { - @apply bg-gray-200 - dark:bg-gray-800; - } - } - - .nav { - @apply flex - items-center - gap-4; - - ul { - @apply flex - items-center - gap-4; - - li:has(a > svg) { - @apply p-1 - rounded-sm; - - &:hover { - @apply bg-gray-200 - dark:bg-gray-800; - } - } - } - } -} diff --git a/components/Sections/Header/index.tsx b/components/Sections/Header/index.tsx index 669ce3f..09fec10 100644 --- a/components/Sections/Header/index.tsx +++ b/components/Sections/Header/index.tsx @@ -2,7 +2,6 @@ import Link from 'next/link'; import { ButtonLink } from '~/components/Common/Button/Link/index.tsx'; import { Logo } from '~/components/Icons/Logo.tsx'; import { GithubIcon } from '~/components/Icons/Github.tsx'; -import styles from './index.module.css'; import type { FC } from 'react'; const NAVIGATION = [ @@ -17,13 +16,16 @@ const NAVIGATION = [ ]; export const Header: FC = () => ( -
          - +
          + Nodejs-loaders -