refactor(all): biomejs

astro.config.ts

@@ -1,9 +1,8 @@
-import { defineConfig } from "astro/config";
+import sitemap from "@astrojs/sitemap";
 import tailwind from "@astrojs/tailwind";
 import remarkCallout from "@r4ai/remark-callout";
-import sitemap from "@astrojs/sitemap";
 import umami from "@yeskunall/astro-umami";
-
+import { defineConfig } from "astro/config";
 
 export default defineConfig({
 	site: "https://blog.z0x.ca",
@@ -21,8 +20,6 @@ export default defineConfig({
 		shikiConfig: {
 			theme: "css-variables",
 		},
-    remarkPlugins: [
+		remarkPlugins: [remarkCallout],
-      remarkCallout,
+	},
-    ],
-  }
 });

biome.json

@@ -0,0 +1,43 @@
+{
+	"$schema": "https://biomejs.dev/schemas/1.9.4/schema.json",
+	"vcs": {
+		"enabled": false,
+		"clientKind": "git",
+		"useIgnoreFile": false
+	},
+	"files": {
+		"ignoreUnknown": false,
+		"ignore": ["node_modules", "dist"]
+	},
+	"formatter": {
+		"enabled": true,
+		"indentStyle": "tab"
+	},
+	"organizeImports": {
+		"enabled": true
+	},
+	"linter": {
+		"enabled": true,
+		"rules": {
+			"recommended": true
+		}
+	},
+	"javascript": {
+		"formatter": {
+			"quoteStyle": "double"
+		}
+	},
+	"overrides": [
+		{
+			"include": ["*.astro"],
+			"linter": {
+				"rules": {
+					"style": {
+						"useConst": "off",
+						"useImportType": "off"
+					}
+				}
+			}
+		}
+	]
+}

package.json

@@ -25,6 +25,8 @@
 		"typescript": "^5.7.3"
 	},
 	"devDependencies": {
+		"@biomejs/biome": "1.9.4",
 		"@tailwindcss/typography": "^0.5.16"
-  }
+	},
+	"trustedDependencies": ["@biomejs/biome"]
 }

src/components/BackToTop.astro

@@ -1,7 +1,3 @@
----
-
----
-
 <button
   id="back-to-top"
   class="group relative flex w-fit flex-nowrap rounded border border-black/15 py-1.5 pl-8 pr-3 transition-colors duration-300 ease-in-out hover:bg-black/5 hover:text-black focus-visible:bg-black/5 focus-visible:text-black dark:border-white/20 dark:hover:bg-white/5 dark:hover:text-white dark:focus-visible:bg-white/5 dark:focus-visible:text-white"

src/components/Container.astro

@@ -1,5 +1 @@
----
-
----
-
 <div class="mx-auto max-w-screen-sm px-3"><slot /></div>

src/components/Footer.astro

@@ -1,6 +1,6 @@
 ---
-import Container from "@components/Container.astro";
 import BackToTop from "@components/BackToTop.astro";
+import Container from "@components/Container.astro";
 import { SITE } from "@consts";
 ---
 

src/components/TableOfContentsHeading.astro

@@ -1,6 +1,6 @@
 ---
-import type { Heading } from "./TableOfContents.astro";
 import Link from "./Link.astro";
+import type { Heading } from "./TableOfContents.astro";
 
 const { heading } = Astro.props;
 ---

src/consts.ts

@@ -6,4 +6,3 @@ export const SITE: Site = {
 export const HOME: Metadata = {
 	TITLE: "blog",
 };
-

src/content.config.ts

@@ -1,8 +1,8 @@
 import { defineCollection, z } from "astro:content";
-import { glob } from 'astro/loaders';
+import { glob } from "astro/loaders";
 
 const blog = defineCollection({
-  loader: glob({ pattern: '**/*.{md,mdx}', base: "./src/content" }),
+	loader: glob({ pattern: "**/*.{md,mdx}", base: "./src/content" }),
 	schema: z.object({
 		title: z.string(),
 		description: z.string(),

src/layouts/Layout.astro

@@ -1,6 +1,6 @@
 ---
-import Head from "@components/Head.astro";
 import Footer from "@components/Footer.astro";
+import Head from "@components/Head.astro";
 import { SITE } from "@consts";
 
 type Props = {

src/lib/utils.ts

@@ -1,4 +1,4 @@
-import { clsx, type ClassValue } from "clsx";
+import { type ClassValue, clsx } from "clsx";
 import { twMerge } from "tailwind-merge";
 
 export function cn(...inputs: ClassValue[]) {

src/pages/404.astro

@@ -1,7 +1,7 @@
 ---
-import Layout from "@layouts/Layout.astro";
 import Container from "@components/Container.astro";
 import { SITE } from "@consts";
+import Layout from "@layouts/Layout.astro";
 ---
 
 <Layout title="404" description={SITE.DESCRIPTION}>

src/pages/[...id].astro

@@ -1,14 +1,16 @@
 ---
 import { type CollectionEntry, getCollection, render } from "astro:content";
-import Layout from "@layouts/Layout.astro";
 import Container from "@components/Container.astro";
 import FormattedDate from "@components/FormattedDate.astro";
-import { readingTime } from "@lib/utils";
 import PostNavigation from "@components/PostNavigation.astro";
 import TableOfContents from "@components/TableOfContents.astro";
+import Layout from "@layouts/Layout.astro";
+import { readingTime } from "@lib/utils";
 
 export async function getStaticPaths() {
-  const posts = (await getCollection("blog")).filter((post) => !post.data.draft).sort((a, b) => b.data.date.valueOf() - a.data.date.valueOf());
+	const posts = (await getCollection("blog"))
+		.filter((post) => !post.data.draft)
+		.sort((a, b) => b.data.date.valueOf() - a.data.date.valueOf());
 	return posts.map((post) => ({
 		params: { id: post.id },
 		props: post,
@@ -16,7 +18,9 @@ export async function getStaticPaths() {
 }
 type Props = CollectionEntry<"blog">;
 
-const posts = (await getCollection("blog")).filter((post) => !post.data.draft).sort((a, b) => b.data.date.valueOf() - a.data.date.valueOf());
+const posts = (await getCollection("blog"))
+	.filter((post) => !post.data.draft)
+	.sort((a, b) => b.data.date.valueOf() - a.data.date.valueOf());
 
 function getNextPost() {
 	let postIndex;

src/pages/index.astro

@@ -1,12 +1,14 @@
 ---
 import { type CollectionEntry, getCollection } from "astro:content";
-import Layout from "@layouts/Layout.astro";
-import Container from "@components/Container.astro";
 import ArrowCard from "@components/ArrowCard.astro";
+import Container from "@components/Container.astro";
 import { SITE } from "@consts";
 import { HOME } from "@consts";
+import Layout from "@layouts/Layout.astro";
 
-const data = (await getCollection("blog")).filter((post) => !post.data.draft).sort((a, b) => b.data.date.valueOf() - a.data.date.valueOf());
+const data = (await getCollection("blog"))
+	.filter((post) => !post.data.draft)
+	.sort((a, b) => b.data.date.valueOf() - a.data.date.valueOf());
 
 type Acc = {
 	[year: string]: CollectionEntry<"blog">[];
@@ -21,7 +23,9 @@ const posts = data.reduce((acc: Acc, post) => {
 	return acc;
 }, {});
 
-const years = Object.keys(posts).sort((a, b) => parseInt(b) - parseInt(a));
+const years = Object.keys(posts).sort(
+	(a, b) => Number.parseInt(b) - Number.parseInt(a),
+);
 ---
 
 <Layout title={HOME.TITLE} description={SITE.DESCRIPTION}>

src/pages/rss.xml.js

@@ -1,11 +1,10 @@
+import { getCollection } from "astro:content";
 import rss from "@astrojs/rss";
 import { SITE } from "@consts";
-import { getCollection } from "astro:content";
 
 export async function GET(context) {
 	const blog = (await getCollection("blog")).filter((post) => !post.data.draft);
 
-
 	const items = [...blog].sort(
 		(a, b) => new Date(b.data.date).valueOf() - new Date(a.data.date).valueOf(),
 	);

src/styles/callout.css

@@ -122,11 +122,13 @@ details[data-callout][open] > summary[data-callout-title]::after {
 	}
 }
 
-[data-callout][data-callout-type="abstract"] > [data-callout-title]:empty::after {
+[data-callout][data-callout-type="abstract"]
+	> [data-callout-title]:empty::after {
 	content: "Abstract";
 }
 
-[data-callout][data-callout-type="summary"] > [data-callout-title]:empty::after {
+[data-callout][data-callout-type="summary"]
+	> [data-callout-title]:empty::after {
 	content: "Summary";
 }
 
@@ -161,7 +163,8 @@ details[data-callout][open] > summary[data-callout-title]::after {
 	content: "Hint";
 }
 
-[data-callout][data-callout-type="important"] > [data-callout-title]:empty::after {
+[data-callout][data-callout-type="important"]
+	> [data-callout-title]:empty::after {
 	content: "Important";
 }
 
@@ -184,7 +187,8 @@ details[data-callout][open] > summary[data-callout-title]::after {
 	}
 }
 
-[data-callout][data-callout-type="success"] > [data-callout-title]:empty::after {
+[data-callout][data-callout-type="success"]
+	> [data-callout-title]:empty::after {
 	content: "Success";
 }
 
@@ -215,7 +219,8 @@ details[data-callout][open] > summary[data-callout-title]::after {
 	}
 }
 
-[data-callout][data-callout-type="question"] > [data-callout-title]:empty::after {
+[data-callout][data-callout-type="question"]
+	> [data-callout-title]:empty::after {
 	content: "Question";
 }
 
@@ -246,15 +251,18 @@ details[data-callout][open] > summary[data-callout-title]::after {
 	}
 }
 
-[data-callout][data-callout-type="warning"] > [data-callout-title]:empty::after {
+[data-callout][data-callout-type="warning"]
+	> [data-callout-title]:empty::after {
 	content: "Warning";
 }
 
-[data-callout][data-callout-type="caution"] > [data-callout-title]:empty::after {
+[data-callout][data-callout-type="caution"]
+	> [data-callout-title]:empty::after {
 	content: "Caution";
 }
 
-[data-callout][data-callout-type="attention"] > [data-callout-title]:empty::after {
+[data-callout][data-callout-type="attention"]
+	> [data-callout-title]:empty::after {
 	content: "Attention";
 }
 
@@ -277,7 +285,8 @@ details[data-callout][open] > summary[data-callout-title]::after {
 	}
 }
 
-[data-callout][data-callout-type="failure"] > [data-callout-title]:empty::after {
+[data-callout][data-callout-type="failure"]
+	> [data-callout-title]:empty::after {
 	content: "Failure";
 }
 
@@ -285,7 +294,8 @@ details[data-callout][open] > summary[data-callout-title]::after {
 	content: "Fail";
 }
 
-[data-callout][data-callout-type="missing"] > [data-callout-title]:empty::after {
+[data-callout][data-callout-type="missing"]
+	> [data-callout-title]:empty::after {
 	content: "Missing";
 }
 
@@ -353,7 +363,8 @@ details[data-callout][open] > summary[data-callout-title]::after {
 	}
 }
 
-[data-callout][data-callout-type="example"] > [data-callout-title]:empty::after {
+[data-callout][data-callout-type="example"]
+	> [data-callout-title]:empty::after {
 	content: "Example";
 }