mirror of
				https://github.com/theoludwig/theoludwig.git
				synced 2025-10-14 20:23:25 +02:00 
			
		
		
		
	chore: usage of eslint-plugin-tailwindcss
This commit is contained in:
		| @@ -1,9 +1,23 @@ | ||||
| { | ||||
|   "extends": ["conventions", "next/core-web-vitals", "prettier"], | ||||
|   "root": true, | ||||
|   "extends": [ | ||||
|     "conventions", | ||||
|     "next/core-web-vitals", | ||||
|     "plugin:tailwindcss/recommended", | ||||
|     "prettier" | ||||
|   ], | ||||
|   "plugins": ["prettier"], | ||||
|   "parserOptions": { | ||||
|     "project": "./tsconfig.json" | ||||
|   }, | ||||
|   "settings": { | ||||
|     "tailwindcss": { | ||||
|       "callees": ["classNames"] | ||||
|     }, | ||||
|     "react": { | ||||
|       "version": "detect" | ||||
|     } | ||||
|   }, | ||||
|   "rules": { | ||||
|     "prettier/prettier": "error", | ||||
|     "react/self-closing-comp": [ | ||||
|   | ||||
| @@ -1,4 +1,3 @@ | ||||
| #!/bin/sh | ||||
| . "$(dirname "$0")/_/husky.sh" | ||||
| #!/usr/bin/env sh | ||||
|  | ||||
| npm run lint:commit -- --edit | ||||
|   | ||||
| @@ -1,4 +1,3 @@ | ||||
| #!/bin/sh | ||||
| . "$(dirname "$0")/_/husky.sh" | ||||
| #!/usr/bin/env sh | ||||
|  | ||||
| npm run lint:staged | ||||
|   | ||||
| @@ -1,3 +1,4 @@ | ||||
| { | ||||
|   "semi": false | ||||
|   "semi": false, | ||||
|   "plugins": ["prettier-plugin-tailwindcss"] | ||||
| } | ||||
|   | ||||
| @@ -2,7 +2,7 @@ import { Loader } from "@/components/design/Loader" | ||||
|  | ||||
| const Loading = (): JSX.Element => { | ||||
|   return ( | ||||
|     <main className="flex flex-col flex-1 items-center justify-center"> | ||||
|     <main className="flex flex-1 flex-col items-center justify-center"> | ||||
|       <Loader /> | ||||
|     </main> | ||||
|   ) | ||||
|   | ||||
| @@ -2,7 +2,7 @@ import { Loader } from "@/components/design/Loader" | ||||
|  | ||||
| const Loading = (): JSX.Element => { | ||||
|   return ( | ||||
|     <main className="flex flex-col flex-1 items-center justify-center"> | ||||
|     <main className="flex flex-1 flex-col items-center justify-center"> | ||||
|       <Loader /> | ||||
|     </main> | ||||
|   ) | ||||
|   | ||||
| @@ -14,7 +14,7 @@ const ErrorHandling = (props: ErrorHandlingProps): JSX.Element => { | ||||
|   }, [error]) | ||||
|  | ||||
|   return ( | ||||
|     <main className="flex flex-col flex-1 items-center justify-center"> | ||||
|     <main className="flex flex-1 flex-col items-center justify-center"> | ||||
|       <h1 className="my-6 text-4xl font-semibold"> | ||||
|         Error{" "} | ||||
|         <span | ||||
|   | ||||
| @@ -29,7 +29,7 @@ | ||||
|  | ||||
| .prose a, | ||||
| .prose strong { | ||||
|   @apply text-yellow dark:text-yellow-dark font-semibold; | ||||
|   @apply font-semibold text-yellow dark:text-yellow-dark; | ||||
| } | ||||
|  | ||||
| strong, | ||||
|   | ||||
| @@ -65,7 +65,7 @@ const RootLayout = (props: RootLayoutProps): JSX.Element => { | ||||
|         colorScheme: theme, | ||||
|       }} | ||||
|     > | ||||
|       <body className="bg-white font-headline text-black dark:bg-black dark:text-white flex flex-col min-h-screen"> | ||||
|       <body className="flex min-h-screen flex-col bg-white font-headline text-black dark:bg-black dark:text-white"> | ||||
|         <Header /> | ||||
|         {children} | ||||
|         <Footer /> | ||||
|   | ||||
| @@ -2,7 +2,7 @@ import { Loader } from "@/components/design/Loader" | ||||
|  | ||||
| const Loading = (): JSX.Element => { | ||||
|   return ( | ||||
|     <main className="flex flex-col flex-1 items-center justify-center"> | ||||
|     <main className="flex flex-1 flex-col items-center justify-center"> | ||||
|       <Loader /> | ||||
|     </main> | ||||
|   ) | ||||
|   | ||||
| @@ -6,7 +6,7 @@ const NotFound = (): JSX.Element => { | ||||
|   const i18n = getI18n() | ||||
|  | ||||
|   return ( | ||||
|     <main className="flex flex-col flex-1 items-center justify-center"> | ||||
|     <main className="flex flex-1 flex-col items-center justify-center"> | ||||
|       <h1 className="my-6 text-4xl font-semibold"> | ||||
|         {i18n.translate("errors.error")}{" "} | ||||
|         <span | ||||
|   | ||||
| @@ -31,7 +31,7 @@ const Heading = ( | ||||
|         href={`#${id}`} | ||||
|         className="invisible !text-black group-hover:visible dark:!text-white" | ||||
|       > | ||||
|         <FontAwesomeIcon className="mr-2 inline h-4 w-4" icon={faLink} /> | ||||
|         <FontAwesomeIcon className="mr-2 inline size-4" icon={faLink} /> | ||||
|       </Link> | ||||
|       {children} | ||||
|     </h2> | ||||
| @@ -90,7 +90,7 @@ export const BlogPostContent = async ( | ||||
|                     alt={alt} | ||||
|                     width={1000} | ||||
|                     height={1000} | ||||
|                     className="h-auto w-auto" | ||||
|                     className="size-auto" | ||||
|                   /> | ||||
|                 </span> | ||||
|               ) | ||||
|   | ||||
| @@ -9,7 +9,7 @@ export const FooterText = (): JSX.Element => { | ||||
|     <p> | ||||
|       <Link | ||||
|         href="/" | ||||
|         className="text-yellow hover:underline dark:text-yellow-dark font-semibold" | ||||
|         className="font-semibold text-yellow hover:underline dark:text-yellow-dark" | ||||
|       > | ||||
|         Théo LUDWIG | ||||
|       </Link>{" "} | ||||
|   | ||||
| @@ -16,7 +16,7 @@ export const FooterVersion = (props: FooterVersionProps): JSX.Element => { | ||||
|       Version{" "} | ||||
|       <a | ||||
|         data-cy="version-link" | ||||
|         className="text-yellow hover:underline dark:text-yellow-dark font-semibold" | ||||
|         className="font-semibold text-yellow hover:underline dark:text-yellow-dark" | ||||
|         href={versionLink} | ||||
|         target="_blank" | ||||
|         rel="noopener noreferrer" | ||||
|   | ||||
| @@ -82,7 +82,7 @@ export const Locales = (props: LocalesProps): JSX.Element => { | ||||
|           return ( | ||||
|             <li | ||||
|               key={locale} | ||||
|               className="flex h-12 w-full items-center justify-center hover:bg-[#4f545c] hover:bg-opacity-20" | ||||
|               className="flex h-12 w-full items-center justify-center hover:bg-[#4f545c]/20" | ||||
|               onClick={async () => { | ||||
|                 return await handleLocale(locale) | ||||
|               }} | ||||
|   | ||||
| @@ -30,35 +30,35 @@ export const SwitchTheme = (props: SwitchThemeProps): JSX.Element => { | ||||
|           <div | ||||
|             data-cy="switch-theme-dark" | ||||
|             className={classNames( | ||||
|               "absolute bottom-0 left-[8px] top-0 mb-auto mt-auto h-[10px] w-[14px] leading-[0] transition-opacity duration-[250ms] ease-in-out", | ||||
|               "absolute inset-y-0 left-[8px] my-auto h-[10px] w-[14px] leading-[0] transition-opacity duration-[250ms] ease-in-out", | ||||
|               { | ||||
|                 "opacity-100": theme === "dark", | ||||
|                 "opacity-0": theme === "light", | ||||
|               }, | ||||
|             )} | ||||
|           > | ||||
|             <span className="relative flex h-[10px] w-[10px] items-center justify-center"> | ||||
|             <span className="relative flex size-[10px] items-center justify-center"> | ||||
|               🌜 | ||||
|             </span> | ||||
|           </div> | ||||
|           <div | ||||
|             data-cy="switch-theme-light" | ||||
|             className={classNames( | ||||
|               "absolute bottom-0 right-[10px] top-0 mb-auto mt-auto h-[10px] w-[10px] leading-[0]", | ||||
|               "absolute inset-y-0 right-[10px] my-auto size-[10px] leading-[0]", | ||||
|               { | ||||
|                 "opacity-100": theme === "light", | ||||
|                 "opacity-0": theme === "dark", | ||||
|               }, | ||||
|             )} | ||||
|           > | ||||
|             <span className="relative flex h-[10px] w-[10px] items-center justify-center"> | ||||
|             <span className="relative flex size-[10px] items-center justify-center"> | ||||
|               🌞 | ||||
|             </span> | ||||
|           </div> | ||||
|         </div> | ||||
|         <div | ||||
|           className={classNames( | ||||
|             "absolute top-[1px] box-border h-[22px] w-[22px] rounded-[50%] bg-[#fafafa] text-white transition-all duration-[250ms] ease-in-out", | ||||
|             "absolute top-[1px] box-border size-[22px] rounded-[50%] bg-[#fafafa] text-white transition-all duration-[250ms] ease-in-out", | ||||
|             { | ||||
|               "left-[27px]": theme === "dark", | ||||
|               "left-0": theme === "light", | ||||
| @@ -70,7 +70,7 @@ export const SwitchTheme = (props: SwitchThemeProps): JSX.Element => { | ||||
|           data-cy="switch-theme-input" | ||||
|           type="checkbox" | ||||
|           aria-label="Dark mode toggle" | ||||
|           className="absolute m-[-1px] h-[1px] w-[1px] overflow-hidden border-0 p-0 hidden" | ||||
|           className="absolute m-[-1px] hidden size-[1px] overflow-hidden border-0 p-0" | ||||
|           defaultChecked | ||||
|         /> | ||||
|       </div> | ||||
|   | ||||
| @@ -18,7 +18,7 @@ export const Header = (): JSX.Element => { | ||||
|         <div className="flex items-center justify-center"> | ||||
|           <Image | ||||
|             quality={100} | ||||
|             className="w-16 h-16" | ||||
|             className="size-16" | ||||
|             src={Logo} | ||||
|             alt="Théo LUDWIG" | ||||
|             priority | ||||
|   | ||||
| @@ -10,9 +10,9 @@ export const InterestItem = (props: InterestItemProps): JSX.Element => { | ||||
|   const { fontAwesomeIcon, title } = props | ||||
|  | ||||
|   return ( | ||||
|     <li className="interest-item mx-2 my-2 h-8 w-8" title={title}> | ||||
|     <li className="m-2 size-8" title={title}> | ||||
|       <FontAwesomeIcon | ||||
|         className="block h-full w-full text-yellow dark:text-yellow-dark" | ||||
|         className="block size-full text-yellow dark:text-yellow-dark" | ||||
|         icon={fontAwesomeIcon} | ||||
|       /> | ||||
|     </li> | ||||
|   | ||||
| @@ -15,7 +15,7 @@ export const Repository = (props: RepositoryProps): JSX.Element => { | ||||
|       <a href={href} target="_blank" rel="noopener noreferrer"> | ||||
|         <div className="flex"> | ||||
|           <GitHubIcon className="mr-2 h-6" /> | ||||
|           <span className="text-yellow dark:text-yellow-dark font-semibold"> | ||||
|           <span className="font-semibold text-yellow dark:text-yellow-dark"> | ||||
|             {name} | ||||
|           </span> | ||||
|         </div> | ||||
|   | ||||
| @@ -24,7 +24,7 @@ export const PortfolioItem = (props: PortfolioItemProps): JSX.Element => { | ||||
|         <div className="flex justify-center"> | ||||
|           <Image | ||||
|             quality={100} | ||||
|             className="h-auto w-auto transition-opacity duration-500 group-hover:opacity-20 dark:group-hover:opacity-5" | ||||
|             className="size-auto transition-opacity duration-500 group-hover:opacity-20 dark:group-hover:opacity-5" | ||||
|             width={300} | ||||
|             height={300} | ||||
|             src={image} | ||||
| @@ -35,7 +35,7 @@ export const PortfolioItem = (props: PortfolioItemProps): JSX.Element => { | ||||
|           <h3 className="my-6 text-2xl font-semibold text-yellow dark:text-yellow-dark"> | ||||
|             {title} | ||||
|           </h3> | ||||
|           <p className="my-6 mx-4 font-semibold">{description}</p> | ||||
|           <p className="mx-4 my-6 font-semibold">{description}</p> | ||||
|         </div> | ||||
|       </a> | ||||
|     </ShadowContainer> | ||||
|   | ||||
| @@ -6,13 +6,13 @@ export const ProfileDescriptionBottom = (): JSX.Element => { | ||||
|   const i18n = getI18n() | ||||
|  | ||||
|   return ( | ||||
|     <div className="my-6 text-gray dark:text-gray-dark text-center max-w-md text-base"> | ||||
|     <div className="my-6 max-w-md text-center text-base text-gray dark:text-gray-dark"> | ||||
|       <p>{htmlParser(i18n.translate("home.about.description-bottom"))}</p> | ||||
|  | ||||
|       <br /> | ||||
|       <a | ||||
|         href="/curriculum-vitae/index.html" | ||||
|         className="text-yellow hover:underline dark:text-yellow-dark font-semibold" | ||||
|         className="font-semibold text-yellow hover:underline dark:text-yellow-dark" | ||||
|       > | ||||
|         Curriculum vitæ ({i18n.translate("common.fr-FR")}) | ||||
|       </a> | ||||
|   | ||||
| @@ -8,7 +8,7 @@ export const Icon = (props: React.SVGProps<SVGSVGElement>): JSX.Element => { | ||||
|       xmlns="http://www.w3.org/2000/svg" | ||||
|       viewBox="0 0 24 24" | ||||
|       className={classNames( | ||||
|         "h-8 w-8 fill-current text-black dark:text-white", | ||||
|         "size-8 fill-current text-black dark:text-white", | ||||
|         className, | ||||
|       )} | ||||
|       {...rest} | ||||
|   | ||||
| @@ -9,7 +9,7 @@ import { NPMIcon } from "./SocialMediaIcons/NPMIcon" | ||||
|  | ||||
| export const SocialMediaList = (): JSX.Element => { | ||||
|   return ( | ||||
|     <ul className="social-media-list m-0 mt-2 list-none py-4 text-center"> | ||||
|     <ul className="m-0 mt-2 list-none py-4 text-center"> | ||||
|       <SocialMediaItem link="https://github.com/theoludwig" ariaLabel="GitHub"> | ||||
|         <GitHubIcon /> | ||||
|       </SocialMediaItem> | ||||
|   | ||||
| @@ -35,7 +35,7 @@ export const SkillComponent = (props: SkillComponentProps): JSX.Element => { | ||||
|     > | ||||
|       <div className="text-center"> | ||||
|         <Image | ||||
|           className="inline h-16 w-16" | ||||
|           className="inline size-16" | ||||
|           quality={100} | ||||
|           width={64} | ||||
|           height={64} | ||||
|   | ||||
| @@ -13,7 +13,7 @@ export const SkillsSection = (props: SkillsSectionProps): JSX.Element => { | ||||
|       <div className="mx-auto w-full px-4"> | ||||
|         <div className="flex flex-wrap px-4 py-6"> | ||||
|           <div className="flex-1"> | ||||
|             <div className="mb-8 border-b border-gray-600 dark:border-white dark:border-opacity-10"> | ||||
|             <div className="mb-8 border-b border-gray-600 dark:border-white/10"> | ||||
|               <h3 className="my-3 text-xl font-semibold text-yellow dark:text-yellow-dark"> | ||||
|                 {title} | ||||
|               </h3> | ||||
|   | ||||
| @@ -16,7 +16,7 @@ export const Loader = (props: LoaderProps): JSX.Element => { | ||||
|         height, | ||||
|       }} | ||||
|       className={classNames( | ||||
|         "animate-spin inline-block border-[3px] border-current border-t-transparent text-yellow dark:text-yellow-dark rounded-full", | ||||
|         "inline-block animate-spin rounded-full border-[3px] border-current border-t-transparent text-yellow dark:text-yellow-dark", | ||||
|         className, | ||||
|       )} | ||||
|       role="status" | ||||
|   | ||||
							
								
								
									
										20
									
								
								curriculum-vitae/package-lock.json
									
									
									
										generated
									
									
									
								
							
							
						
						
									
										20
									
								
								curriculum-vitae/package-lock.json
									
									
									
										generated
									
									
									
								
							| @@ -12,7 +12,7 @@ | ||||
|         "modern-normalize": "2.0.0" | ||||
|       }, | ||||
|       "devDependencies": { | ||||
|         "@types/node": "20.11.5", | ||||
|         "@types/node": "20.11.8", | ||||
|         "date-and-time": "3.1.1", | ||||
|         "vite": "5.0.12", | ||||
|         "vite-plugin-html": "3.2.2" | ||||
| @@ -668,9 +668,9 @@ | ||||
|       "dev": true | ||||
|     }, | ||||
|     "node_modules/@types/node": { | ||||
|       "version": "20.11.5", | ||||
|       "resolved": "https://registry.npmjs.org/@types/node/-/node-20.11.5.tgz", | ||||
|       "integrity": "sha512-g557vgQjUUfN76MZAN/dt1z3dzcUsimuysco0KeluHgrPdJXkP/XdAURgyO2W9fZWHRtRBiVKzKn8vyOAwlG+w==", | ||||
|       "version": "20.11.8", | ||||
|       "resolved": "https://registry.npmjs.org/@types/node/-/node-20.11.8.tgz", | ||||
|       "integrity": "sha512-i7omyekpPTNdv4Jb/Rgqg0RU8YqLcNsI12quKSDkRXNfx7Wxdm6HhK1awT3xTgEkgxPn3bvnSpiEAc7a7Lpyow==", | ||||
|       "dev": true, | ||||
|       "dependencies": { | ||||
|         "undici-types": "~5.26.4" | ||||
| @@ -941,9 +941,9 @@ | ||||
|       } | ||||
|     }, | ||||
|     "node_modules/dotenv": { | ||||
|       "version": "16.4.0", | ||||
|       "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-16.4.0.tgz", | ||||
|       "integrity": "sha512-WvImr5kpN5NGNn7KaDjJnLTh5rDVLZiDf/YLA8T1ZEZEBZNEDOE+mnkS0PVjPax8ZxBP5zC5SLMB3/9VV5de9g==", | ||||
|       "version": "16.4.1", | ||||
|       "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-16.4.1.tgz", | ||||
|       "integrity": "sha512-CjA3y+Dr3FyFDOAMnxZEGtnW9KBR2M0JvvUtXNW+dYJL5ROWxP9DUHCwgFqpMk0OXCc0ljhaNTr2w/kutYIcHQ==", | ||||
|       "dev": true, | ||||
|       "engines": { | ||||
|         "node": ">=12" | ||||
| @@ -1046,9 +1046,9 @@ | ||||
|       } | ||||
|     }, | ||||
|     "node_modules/fastq": { | ||||
|       "version": "1.16.0", | ||||
|       "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.16.0.tgz", | ||||
|       "integrity": "sha512-ifCoaXsDrsdkWTtiNJX5uzHDsrck5TzfKKDcuFFTIrrc/BS076qgEIfoIy1VeZqViznfKiysPYTh/QeHtnIsYA==", | ||||
|       "version": "1.17.0", | ||||
|       "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.17.0.tgz", | ||||
|       "integrity": "sha512-zGygtijUMT7jnk3h26kUms3BkSDp4IfIKjmnqI2tvx6nuBfiF1UqOxbnLfzdv+apBy+53oaImsKtMw/xYbW+1w==", | ||||
|       "dev": true, | ||||
|       "dependencies": { | ||||
|         "reusify": "^1.0.4" | ||||
|   | ||||
| @@ -13,7 +13,7 @@ | ||||
|     "modern-normalize": "2.0.0" | ||||
|   }, | ||||
|   "devDependencies": { | ||||
|     "@types/node": "20.11.5", | ||||
|     "@types/node": "20.11.8", | ||||
|     "date-and-time": "3.1.1", | ||||
|     "vite": "5.0.12", | ||||
|     "vite-plugin-html": "3.2.2" | ||||
|   | ||||
							
								
								
									
										550
									
								
								package-lock.json
									
									
									
										generated
									
									
									
								
							
							
						
						
									
										550
									
								
								package-lock.json
									
									
									
										generated
									
									
									
								
							
										
											
												File diff suppressed because it is too large
												Load Diff
											
										
									
								
							
							
								
								
									
										13
									
								
								package.json
									
									
									
									
									
								
							
							
						
						
									
										13
									
								
								package.json
									
									
									
									
									
								
							| @@ -26,7 +26,7 @@ | ||||
|     "test:dev": "start-server-and-test \"dev\" \"http://127.0.0.1:3000\" \"cypress open\"", | ||||
|     "curriculum-vitae:build": "node ./curriculum-vitae/build.js", | ||||
|     "release": "semantic-release", | ||||
|     "postinstall": "husky install" | ||||
|     "postinstall": "husky" | ||||
|   }, | ||||
|   "dependencies": { | ||||
|     "@fontsource/montserrat": "5.0.16", | ||||
| @@ -57,18 +57,18 @@ | ||||
|     "shiki": "0.14.7", | ||||
|     "unified": "10.1.2", | ||||
|     "unist-util-visit": "5.0.0", | ||||
|     "universal-cookie": "7.0.1" | ||||
|     "universal-cookie": "7.0.2" | ||||
|   }, | ||||
|   "devDependencies": { | ||||
|     "@commitlint/cli": "18.5.0", | ||||
|     "@commitlint/config-conventional": "18.5.0", | ||||
|     "@commitlint/cli": "18.6.0", | ||||
|     "@commitlint/config-conventional": "18.6.0", | ||||
|     "@saithodev/semantic-release-backmerge": "4.0.1", | ||||
|     "@semantic-release/git": "10.0.1", | ||||
|     "@tailwindcss/typography": "0.5.10", | ||||
|     "@total-typescript/ts-reset": "0.5.1", | ||||
|     "@tsconfig/strictest": "2.0.2", | ||||
|     "@types/negotiator": "0.6.3", | ||||
|     "@types/node": "20.11.5", | ||||
|     "@types/node": "20.11.8", | ||||
|     "@types/react": "18.2.48", | ||||
|     "@types/unist": "3.0.2", | ||||
|     "@typescript-eslint/eslint-plugin": "6.19.1", | ||||
| @@ -84,9 +84,10 @@ | ||||
|     "eslint-plugin-import": "2.29.1", | ||||
|     "eslint-plugin-prettier": "5.1.3", | ||||
|     "eslint-plugin-promise": "6.1.1", | ||||
|     "eslint-plugin-tailwindcss": "3.14.1", | ||||
|     "eslint-plugin-unicorn": "50.0.1", | ||||
|     "html-w3c-validator": "1.5.1", | ||||
|     "husky": "8.0.3", | ||||
|     "husky": "9.0.6", | ||||
|     "lint-staged": "15.2.0", | ||||
|     "markdownlint-cli2": "0.12.1", | ||||
|     "markdownlint-rule-relative-links": "2.2.0", | ||||
|   | ||||
		Reference in New Issue
	
	Block a user