fix biome

Author: AugustinMauroy

.vscode/settings.json

@@ -1,11 +1,13 @@
 {
+  "[javascript]": {
+    "editor.defaultFormatter": "biomejs.biome"
+  },
+  "editor.codeActionsOnSave": {
+    "source.action.useSortedKeys.biome": "explicit",
+    "source.fixAll.biome": "explicit"
+  },
+  "editor.defaultFormatter": "biomejs.biome",
   "editor.formatOnSave": true,
   "javascript.updateImportsOnFileMove.enabled": "always",
-  "typescript.updateImportsOnFileMove.enabled": "always",
-  "editor.formatOnPaste": true,
-  "editor.wordWrap": "wordWrapColumn",
-  "editor.wordWrapColumn": 100,
-  "[markdown]": {
-    "editor.wordWrap": "off"
-  }
+  "typescript.updateImportsOnFileMove.enabled": "always"
 }

app/article/[[...categories]]/page.tsx

@@ -1,8 +1,8 @@
+import type { Metadata } from 'next';
+import type { FC } from 'react';
 import { CategoriesSelector } from '~/components/Common/CategoriesSelector/index.tsx';
 import { ArticleCard } from '~/components/Post/ArticleCard/index.tsx';
 import { getPostsMetadata } from '~/lib/post.ts';
-import type { FC } from 'react';
-import type { Metadata } from 'next';
 
 type CategoriesParams = {
 	categories?: string[];
@@ -37,7 +37,7 @@ const CATEGORIES = [
 export const generateStaticParams = () => {
 	const params = [
 		{ categories: [] }, // For the base route without any categories
-		...CATEGORIES.slice(1).map(category => ({ categories: [category.slug] })), // For each individual category
+		...CATEGORIES.slice(1).map((category) => ({ categories: [category.slug] })), // For each individual category
 	];
 
 	return params;
@@ -49,8 +49,8 @@ export const generateMetadata = async ({
 	const currentCategories = (await params).categories || [];
 
 	return {
-		title: `Articles${currentCategories.length > 0 ? ` - ${currentCategories.join(', ')}` : ''}`,
 		description: 'Here you can find all the articles available on the website.',
+		title: `Articles${currentCategories.length > 0 ? ` - ${currentCategories.join(', ')}` : ''}`,
 	};
 };
 
@@ -66,8 +66,8 @@ const Page: FC<PageProps> = async ({ params }) => {
 				filter them by category using the dropdown below.
 			</p>
 			<CategoriesSelector
-				currentCategories={currentCategories}
 				categories={CATEGORIES}
+				currentCategories={currentCategories}
 			/>
 			{postsMetadata.length === 0 ? (
 				<div className="mt-8">
@@ -77,7 +77,7 @@ const Page: FC<PageProps> = async ({ params }) => {
 				</div>
 			) : (
 				<div className="grid grid-cols-1 justify-center gap-4 md:grid-cols-2 lg:grid-cols-3">
-					{postsMetadata.map(post => (
+					{postsMetadata.map((post) => (
 						<ArticleCard key={post.slug} {...post} />
 					))}
 				</div>

app/article/post/[article]/page.tsx

@@ -1,9 +1,9 @@
+import type { Metadata } from 'next';
 import { notFound } from 'next/navigation';
+import type { FC } from 'react';
+import { ArticleHeader } from '~/components/Post/ArticleHeader/index.tsx';
 import { getContent } from '~/lib/content.ts';
 import { getAllPosts } from '~/lib/post.ts';
-import { ArticleHeader } from '~/components/Post/ArticleHeader/index.tsx';
-import type { FC } from 'react';
-import type { Metadata } from 'next';
 import type { PostFrontmatter } from '~/types/frontmatter';
 import '~/styles/markdown.css';
 
@@ -18,7 +18,7 @@ type PageProps = {
 export async function generateStaticParams() {
 	const posts = await getAllPosts();
 
-	return posts.map(post => {
+	return posts.map((post) => {
 		const article = post.split('.').slice(0, -1).join('.');
 		return { article };
 	});
@@ -37,8 +37,8 @@ export async function generateMetadata({
 	const { frontmatter } = mdxResult;
 
 	return {
-		title: frontmatter.title,
 		description: frontmatter.description,
+		title: frontmatter.title,
 	};
 }
 
@@ -55,9 +55,9 @@ const Page: FC<PageProps> = async ({ params }) => {
 	return (
 		<main className="container mx-auto px-4">
 			<ArticleHeader
-				title={frontmatter.title}
-				description={frontmatter.description}
 				authors={frontmatter.authors}
+				description={frontmatter.description}
+				title={frontmatter.title}
 			/>
 			<article className="md-content">{content}</article>
 		</main>

app/layout.tsx

@@ -1,14 +1,14 @@
 import classNames from 'classnames';
-import { GeistSans } from 'geist/font/sans';
 import { GeistMono } from 'geist/font/mono';
-import { Header } from '~/components/Sections/Header/index.tsx';
-import type { FC, PropsWithChildren } from 'react';
+import { GeistSans } from 'geist/font/sans';
 import type { Metadata } from 'next';
+import type { FC, PropsWithChildren } from 'react';
+import { Header } from '~/components/Sections/Header/index.tsx';
 import '~/styles/globals.css';
 
 const metadata: Metadata = {
-	title: 'Nodejs-Loaders',
 	description: 'A collection of loaders for Node.js',
+	title: 'Nodejs-Loaders',
 };
 
 const RootLayout: FC<PropsWithChildren> = ({ children }) => (

app/not-found.tsx

@@ -1,5 +1,5 @@
-import { NotFoundSection } from '~/components/Sections/NotFound';
 import type { FC } from 'react';
+import { NotFoundSection } from '~/components/Sections/NotFound';
 
 const NotFoundPage: FC = () => <NotFoundSection />;
 

app/page.tsx

@@ -1,6 +1,6 @@
+import type { FC } from 'react';
 import { Hero } from '~/components/Landing/Hero/index.tsx';
 import { LatestArticleSection } from '~/components/Landing/LastestArticleSection/index.tsx';
-import type { FC } from 'react';
 
 const Page: FC = () => (
 	<main>

app/robots.ts

@@ -5,10 +5,10 @@ export const dynamic = 'force-static';
 
 export default function robots(): MetadataRoute.Robots {
 	return {
+		host: 'https://nodejs-loaders.github.io',
 		rules: {
-			userAgent: '*',
 			allow: '/',
+			userAgent: '*',
 		},
-		host: 'https://nodejs-loaders.github.io',
 	};
 }

biome.jsonc

@@ -1,83 +1,75 @@
 {
-	"$schema": "https://biomejs.dev/schemas/1.9.4/schema.json",
-	"files": {
-		"include": ["**/*.ts", "**/*.tsx", "**/*.js", "**/*.css", "**/*.json"],
-		"ignore": ["./node_modules", "./.next", "./out"]
+	"$schema": "https://biomejs.dev/schemas/2.1.2/schema.json",
+	"assist": {
+		"actions": {
+			"source": {
+				"organizeImports": {
+					"level": "on",
+					"options": {
+						"groups": [
+							":NODE:",
+							":PACKAGE:",
+							":ALIAS:",
+							":PATH:",
+							{ "type": true }
+						]
+					}
+				},
+				"useSortedAttributes": "on",
+				"useSortedKeys": "on",
+				"useSortedProperties": "on"
+			}
+		},
+		"enabled": true
 	},
-	"organizeImports": {
-		"enabled": false
+	"css": {
+		"formatter": {
+			"enabled": true
+		},
+		"linter": {
+			"enabled": true
+		}
+	},
+	"files": {
+		"includes": [
+			"**/*.ts",
+			"**/*.tsx",
+			"**/*.js",
+			"**/*.css",
+			"**/*.json",
+			"!out/**",
+			"!.next"
+		]
 	},
 	"formatter": {
 		"enabled": true,
 		"useEditorconfig": true
 	},
-	"linter": {
-		"rules": {
-			"recommended": false,
-			"nursery": {
-				"useSortedClasses": "error",
-				"noCommonJs": "error",
-				"noEnum": "error",
-				"noUnknownTypeSelector": "error"
-			},
-			"complexity": {
-				"noUselessThisAlias": "error",
-				"noUselessTypeConstraint": "error"
-			},
-			"correctness": {
-				"noUnusedVariables": "error",
-				"useArrayLiterals": "off",
-				"noUnknownFunction": "error",
-				"noUnknownUnit": "error",
-				"useImportExtensions": "error"
-			},
-			"style": {
-				"noNamespace": "error",
-				"useAsConstAssertion": "error",
-				"useBlockStatements": "off",
-				"useNodeAssertStrict": "warn",
-				"useNodejsImportProtocol": "error",
-				"useImportType": "error"
-			},
-			"suspicious": {
-				"noExplicitAny": "error",
-				"noExtraNonNullAssertion": "error",
-				"noMisleadingInstantiator": "error",
-				"noUnsafeDeclarationMerging": "error",
-				"useNamespaceKeyword": "error",
-				"noEmptyBlock": "error",
-				"noDuplicateAtImportRules": "error",
-				"noDuplicateObjectKeys": "error"
-			}
-		}
-	},
 	"javascript": {
 		"formatter": {
 			"jsxQuoteStyle": "double",
-			"quoteProperties": "asNeeded",
-			"trailingCommas": "es5",
-			"semicolons": "always",
-			"arrowParentheses": "asNeeded",
-			"bracketSameLine": false,
 			"quoteStyle": "single",
-			"attributePosition": "auto",
-			"bracketSpacing": true
+			"semicolons": "always"
 		}
 	},
-	"css": {
-		"linter": {
-			"enabled": true
-		},
+	"json": {
 		"formatter": {
 			"enabled": true
 		},
-		"parser": {
-			"cssModules": true
+		"linter": {
+			"enabled": true
 		}
 	},
-	"json": {
-		"formatter": {
-			"enabled": true
+	"linter": {
+		"rules": {
+			"a11y": {
+				"noSvgWithoutTitle": "off"
+			},
+			"recommended": true,
+			"style": {
+				"noDescendingSpecificity": "off",
+				"useNodeAssertStrict": "error"
+			}
 		}
 	}
 }

components/Common/AuthorsList/index.tsx

@@ -1,22 +1,22 @@
+import type { FC } from 'react';
 import { getGitHubAvatarUrl, getGithubProfileUrl } from '~/utils/gitHubUtils';
 import { getAcronymFromString } from '~/utils/stringUtils';
-import { Avatar, AvatarImage, AvatarFallback } from '../Avatar/index.tsx';
-import type { FC } from 'react';
+import { Avatar, AvatarFallback, AvatarImage } from '../Avatar/index.tsx';
 
 type AuthorsListProps = {
 	// xxx, yyy, zzz
 	authors: string;
 };
 
 export const AuthorsList: FC<AuthorsListProps> = ({ authors }) => {
-	const authorsList = authors.split(', ').map(author => (
+	const authorsList = authors.split(', ').map((author) => (
 		<Avatar key={author}>
 			<a
 				href={getGithubProfileUrl(author)}
-				target="_blank"
 				rel="noopener noreferrer"
+				target="_blank"
 			>
-				<AvatarImage src={getGitHubAvatarUrl(author)} alt={author} />
+				<AvatarImage alt={author} src={getGitHubAvatarUrl(author)} />
 				<AvatarFallback>{getAcronymFromString(author)}</AvatarFallback>
 			</a>
 		</Avatar>

components/Common/Avatar/index.tsx

@@ -9,11 +9,11 @@ const Avatar = ({
 	...props
 }: ComponentProps<typeof AvatarPrimitive.Root>) => (
 	<AvatarPrimitive.Root
-		ref={ref}
 		className={classNames(
 			className,
-			'flex size-10 shrink-0 overflow-hidden rounded-md shadow-green-300 shadow-sm outline-2 outline-green-300 transition-shadow hover:shadow-green-400 hover:shadow-md dark:shadow-green-800 dark:outline-green-800 hover:dark:shadow-green-700'
+			'flex size-10 shrink-0 overflow-hidden rounded-md shadow-green-300 shadow-sm outline-2 outline-green-300 transition-shadow hover:shadow-green-400 hover:shadow-md dark:shadow-green-800 dark:outline-green-800 hover:dark:shadow-green-700',
 		)}
+		ref={ref}
 		{...props}
 	/>
 );
@@ -26,8 +26,8 @@ const AvatarImage = ({
 	...props
 }: ComponentProps<typeof AvatarPrimitive.Image>) => (
 	<AvatarPrimitive.Image
-		ref={ref}
 		className={classNames('aspect-square size-full', className)}
+		ref={ref}
 		{...props}
 	/>
 );
@@ -40,11 +40,11 @@ const AvatarFallback = ({
 	...props
 }: ComponentProps<typeof AvatarPrimitive.Fallback>) => (
 	<AvatarPrimitive.Fallback
-		ref={ref}
 		className={classNames(
 			'flex size-full items-center justify-center rounded-md bg-green-100 font-bold text-base text-black dark:bg-green-800 dark:text-white',
-			className
+			className,
 		)}
+		ref={ref}
 		{...props}
 	/>
 );