Add biome commands

Author: mimorisuzuko

biome.json

@@ -12,7 +12,7 @@
 	},
 	"files": {
 		"ignoreUnknown": false,
-		"includes": ["!.next", "!package.json"]
+		"includes": ["!.next", "!package.json", "src/**/*"]
 	},
 	"formatter": {
 		"enabled": true,
@@ -30,6 +30,9 @@
 			"correctness": {
 				"noUnusedVariables": "error"
 			},
+			"performance": {
+				"noImgElement": "off"
+			},
 			"recommended": true,
 			"style": {
 				"noNonNullAssertion": "off"

package.json

@@ -4,7 +4,9 @@
   "private": true,
   "scripts": {
     "dev": "next dev --turbopack",
-    "build": "next build && touch docs/.nojekyll && echo 'mimorisuzu.co' > docs/CNAME && rm -rf docs/404.html"
+    "build": "next build && touch docs/.nojekyll && echo 'mimorisuzu.co' > docs/CNAME && rm -rf docs/404.html",
+    "biome": "bunx biome check",
+    "biome:write": "bunx biome check --write"
   },
   "dependencies": {
     "@mimorisuzuko/yuuka": "1.0.7",

src/app/page.tsx

@@ -9,28 +9,27 @@ export default function Home() {
 		<div>
 			<Global>
 				{{
-					body: {
-						margin: 0,
-						fontFamily:
-							"'Helvetica Neue', Arial, 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', Meiryo, sans-serif"
-					},
 					a: {
 						color: Colors.Pink
+					},
+					body: {
+						fontFamily:
+							"'Helvetica Neue', Arial, 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', Meiryo, sans-serif",
+						margin: 0
 					}
 				}}
 			</Global>
 			<Header />
 			<div
 				css={{
-					maxWidth: 960,
+					h2: {
+						color: Colors.Pink
+					},
 					marginLeft: "auto",
 					marginRight: "auto",
+					maxWidth: 960,
 					paddingLeft: "0.5rem",
-					paddingRight: "0.5rem",
-
-					h2: {
-						color: Colors.Pink
-					}
+					paddingRight: "0.5rem"
 				}}
 			>
 				<Profile />

src/components/Header.tsx

@@ -7,58 +7,57 @@ export default function Header() {
 	return (
 		<div
 			css={{
-				backgroundColor: Colors.Pink,
-				marginBottom: "1rem",
-				display: "flex",
-				paddingLeft: "1rem",
+				"@media screen and (min-width: 480px)": {
+					a: {
+						display: "flex"
+					}
+				},
 				"> div, a": {
-					paddingTop: "1rem",
+					color: "white",
 					paddingBottom: "1rem",
-					color: "white"
+					paddingTop: "1rem"
 				},
 				a: {
 					display: "none"
 				},
-				"@media screen and (min-width: 480px)": {
-					a: {
-						display: "flex"
-					}
-				}
+				backgroundColor: Colors.Pink,
+				display: "flex",
+				marginBottom: "1rem",
+				paddingLeft: "1rem"
 			}}
 		>
 			<div css={{ marginRight: "1rem" }}>{usbVersion()}</div>
 			{links.map((a, i) => {
 				return (
 					<a
 						css={{
-							textDecoration: "none",
-							transform: "skew(-45deg)",
-							display: "flex",
-
 							":hover": {
-								color: Colors.Pink,
-								backgroundColor: "white"
+								backgroundColor: "white",
+								color: Colors.Pink
 							},
 
 							":not(:first-child)": {
 								marginLeft: -1
-							}
+							},
+							display: "flex",
+							textDecoration: "none",
+							transform: "skew(-45deg)"
 						}}
 						href={`#${a.toLowerCase()}`}
 						key={i}
 					>
 						<div
 							css={{
-								width: 1,
+								backgroundColor: "white",
 								height: "100%",
-								backgroundColor: "white"
+								width: 1
 							}}
 						/>
 						<div
 							css={{
-								transform: "skew(45deg)",
 								paddingLeft: "1rem",
-								paddingRight: "1rem"
+								paddingRight: "1rem",
+								transform: "skew(45deg)"
 							}}
 						>
 							{a}

src/components/Profile.tsx

@@ -67,40 +67,38 @@ export default function Profile() {
 	return (
 		<div
 			css={{
-				display: "flex",
-				flexWrap: "wrap",
 				"> div": {
-					padding: "0 0.5rem",
-					boxSizing: "border-box"
-				}
+					boxSizing: "border-box",
+					padding: "0 0.5rem"
+				},
+				display: "flex",
+				flexWrap: "wrap"
 			}}
 		>
 			<div
 				css={{
-					flexBasis: "100%",
-
 					"@media screen and (min-width: 480px)": {
 						flexBasis: "30%"
-					}
+					},
+					flexBasis: "100%"
 				}}
 			>
 				<img
 					alt="logo"
 					css={{
-						width: "100%",
+						borderRadius: "50%",
 						display: "block",
-						borderRadius: "50%"
+						width: "100%"
 					}}
 					src="/me.jpg"
 				/>
 			</div>
 			<div
 				css={{
-					flexBasis: "100%",
-
 					"@media screen and (min-width: 480px)": {
 						flexBasis: "70%"
-					}
+					},
+					flexBasis: "100%"
 				}}
 			>
 				<div

src/components/Publications.tsx

@@ -2,10 +2,10 @@ import { css } from "@mimorisuzuko/yuuka";
 import type { ReactNode } from "react";
 import { RiFilePdf2Fill, RiNewsFill, RiYoutubeFill } from "react-icons/ri";
 import {
-	type Publication,
 	arxivs,
 	journalsWithReview,
 	oralsDomestic,
+	type Publication,
 	papersDomesticWithReview,
 	papersInternationalWithReview,
 	postersAndDemosDomestic,
@@ -307,20 +307,20 @@ export default function Publications() {
 		<div
 			css={{
 				details: {
-					marginTop: "1em",
-					marginBottom: "1em"
+					marginBottom: "1em",
+					marginTop: "1em"
+				},
+
+				li: {
+					overflowWrap: "break-word"
 				},
 
 				summary: {
 					h3: {
-						marginTop: 0,
+						display: "inline-block",
 						marginBottom: 0,
-						display: "inline-block"
+						marginTop: 0
 					}
-				},
-
-				li: {
-					overflowWrap: "break-word"
 				}
 			}}
 		>