refactor: standardize code formatting across components and utilities

- Updated formatting in SiteFooter and SiteHeader components for consistency.
- Refactored Badge, Button, Card, Separator components to improve readability.
- Enhanced markdown parsing logic in announcements and markdown utility functions.
- Adjusted ESLint configuration for better code quality checks.
- Added biome.json for BiomeJS configuration.
- Updated package.json and configuration files for improved dependency management.

app/announcements/[slug]/page.tsx

@@ -3,7 +3,10 @@ import Link from "next/link";
 import { notFound } from "next/navigation";
 
 import { Badge } from "@/components/ui/badge";
-import { getAnnouncementBySlug, getAnnouncementSlugs } from "@/lib/announcements";
+import {
+	getAnnouncementBySlug,
+	getAnnouncementSlugs,
+} from "@/lib/announcements";
 
 type PageProps = {
 	params: Promise<{ slug: string }>;
@@ -14,14 +17,17 @@ export async function generateStaticParams() {
 	return slugs.map((slug) => ({ slug }));
 }
 
-export async function generateMetadata({ params }: PageProps): Promise<Metadata> {
+export async function generateMetadata({
+	params,
+}: PageProps): Promise<Metadata> {
 	const { slug } = await params;
 
 	try {
 		const announcement = await getAnnouncementBySlug(slug);
 		return {
 			title: `${announcement.title} | お知らせ`,
-      description: announcement.summary || `${announcement.title} のお知らせです。`,
+			description:
+				announcement.summary || `${announcement.title} のお知らせです。`,
 		};
 	} catch {
 		return {
@@ -48,7 +54,9 @@ export default async function AnnouncementDetailPage({ params }: PageProps) {
 					お知らせ詳細
 				</Badge>
 				<p className="text-xs text-muted-foreground">{announcement.date}</p>
-        <h1 className="mt-2 text-2xl font-semibold tracking-tight sm:text-4xl">{announcement.title}</h1>
+				<h1 className="mt-2 text-2xl font-semibold tracking-tight sm:text-4xl">
+					{announcement.title}
+				</h1>
 			</header>
 
 			<section className="rounded-3xl border bg-card p-6 shadow-sm motion-safe:animate-in motion-safe:fade-in motion-safe:slide-in-from-bottom-2 motion-safe:duration-700 sm:p-8">
@@ -58,7 +66,10 @@ export default async function AnnouncementDetailPage({ params }: PageProps) {
 				/>
 			</section>
 
-      <Link href="/announcements" className="text-sm text-primary underline underline-offset-4 transition-transform duration-200 hover:-translate-y-0.5">
+			<Link
+				href="/announcements"
+				className="text-sm text-primary underline underline-offset-4 transition-transform duration-200 hover:-translate-y-0.5"
+			>
 				お知らせ一覧へ戻る
 			</Link>
 		</article>

app/announcements/page.tsx

@@ -17,7 +17,9 @@ export default async function AnnouncementsPage() {
 				<Badge variant="outline" className="mb-3">
 					お知らせ
 				</Badge>
-        <h1 className="text-3xl font-semibold tracking-tight sm:text-4xl">更新情報・告知</h1>
+				<h1 className="text-3xl font-semibold tracking-tight sm:text-4xl">
+					更新情報・告知
+				</h1>
 				<p className="mt-3 text-sm leading-7 text-muted-foreground sm:text-base">
 					このページは Markdown で作成したお知らせを表示します。
 				</p>
@@ -25,7 +27,10 @@ export default async function AnnouncementsPage() {
 
 			<section className="grid gap-4">
 				{announcements.map((item) => (
-          <article className="rounded-2xl border border-foreground/10 bg-card p-5 shadow-xs transition-all duration-300 motion-safe:animate-in motion-safe:fade-in motion-safe:slide-in-from-bottom-4 hover:-translate-y-1 hover:shadow-md sm:p-6" key={item.slug}>
+					<article
+						className="rounded-2xl border border-foreground/10 bg-card p-5 shadow-xs transition-all duration-300 motion-safe:animate-in motion-safe:fade-in motion-safe:slide-in-from-bottom-4 hover:-translate-y-1 hover:shadow-md sm:p-6"
+						key={item.slug}
+					>
 						<header>
 							<p className="text-xs text-muted-foreground">{item.date}</p>
 							<h2 className="mt-1 text-xl font-semibold">

app/layout.tsx

@@ -5,7 +5,7 @@ import { cn } from "@/lib/utils";
 import { SiteHeader } from "@/components/site-header";
 import { SiteFooter } from "@/components/site-footer";
 
-const inter = Inter({subsets:['latin'],variable:'--font-sans'});
+const inter = Inter({ subsets: ["latin"], variable: "--font-sans" });
 
 const geistSans = Geist({
 	variable: "--font-geist-sans",
@@ -19,7 +19,8 @@ const geistMono = Geist_Mono({
 
 export const metadata: Metadata = {
 	title: "Takasumi-Neodyマイクラサーバプロジェクト接続ガイド",
-  description: "Takasumi-Neodyマイクラサーバプロジェクト（サバイバル鯖・建築鯖）への接続方法とサーバアドレスを案内します。",
+	description:
+		"Takasumi-Neodyマイクラサーバプロジェクト（サバイバル鯖・建築鯖）への接続方法とサーバアドレスを案内します。",
 };
 
 export default function RootLayout({
@@ -30,7 +31,14 @@ export default function RootLayout({
 	return (
 		<html
 			lang="ja"
-      className={cn("h-full", "antialiased", geistSans.variable, geistMono.variable, "font-sans", inter.variable)}
+			className={cn(
+				"h-full",
+				"antialiased",
+				geistSans.variable,
+				geistMono.variable,
+				"font-sans",
+				inter.variable,
+			)}
 		>
 			<body className="min-h-full flex flex-col">
 				<SiteHeader />

app/page.tsx

@@ -31,7 +31,10 @@ export default function Home() {
 			<div className="pointer-events-none absolute inset-x-0 top-0 -z-10 h-[380px] bg-gradient-to-b from-emerald-200/40 via-sky-200/25 to-transparent blur-3xl dark:from-emerald-500/20 dark:via-sky-500/20" />
 			<main className="mx-auto flex w-full max-w-6xl flex-1 flex-col gap-8 px-4 py-8 sm:gap-10 sm:px-8 sm:py-14">
 				<section className="rounded-3xl border bg-card/70 p-6 shadow-sm backdrop-blur motion-safe:animate-in motion-safe:fade-in motion-safe:slide-in-from-bottom-3 motion-safe:duration-700 sm:p-10">
-          <Badge variant="outline" className="mb-4 max-w-full text-[11px] sm:text-xs">
+					<Badge
+						variant="outline"
+						className="mb-4 max-w-full text-[11px] sm:text-xs"
+					>
 						Takasumi-Neodyマイクラサーバプロジェクト接続ガイド
 					</Badge>
 					<h1 className="text-3xl font-semibold tracking-tight sm:text-5xl">
@@ -46,7 +49,7 @@ export default function Home() {
 							href="/announcements"
 							className={cn(
 								buttonVariants({ variant: "outline" }),
-                "transition-transform duration-200 hover:-translate-y-0.5"
+								"transition-transform duration-200 hover:-translate-y-0.5",
 							)}
 						>
 							お知らせを見る
@@ -74,12 +77,18 @@ export default function Home() {
 										<Icon className="size-5" />
 										{server.name}
 									</h3>
-                  <p className="mt-1 text-sm text-muted-foreground">{server.description}</p>
+									<p className="mt-1 text-sm text-muted-foreground">
+										{server.description}
+									</p>
 								</header>
 								<div className="mt-5">
 									<div className="rounded-xl border bg-background px-4 py-3">
-                    <p className="text-xs text-muted-foreground">サーバアドレス</p>
+										<p className="text-xs text-muted-foreground">
-                    <p className="mt-1 break-all font-mono text-sm">{server.address}</p>
+											サーバアドレス
+										</p>
+										<p className="mt-1 break-all font-mono text-sm">
+											{server.address}
+										</p>
 									</div>
 								</div>
 								<div className="mt-5 flex gap-2">
@@ -101,7 +110,10 @@ export default function Home() {
 					<Separator className="my-4" />
 					<ol className="space-y-3 text-sm leading-7 sm:text-base">
 						<li>1. Minecraft（Java版 または統合版）を起動する。</li>
-            <li>2. サーバー追加画面を開く（Java版: マルチプレイ / 統合版: サーバー）。</li>
+						<li>
+							2. サーバー追加画面を開く（Java版: マルチプレイ / 統合版:
+							サーバー）。
+						</li>
 						<li>3. 接続したい鯖のサーバアドレスを入力して保存する。</li>
 						<li>4. 一覧からサーバを選んで接続する。</li>
 					</ol>

app/sitemap.ts

@@ -31,16 +31,20 @@ export default async function sitemap(): Promise<MetadataRoute.Sitemap> {
 		},
 	];
 
-  const announcementRoutes: MetadataRoute.Sitemap = announcements.map((item) => {
+	const announcementRoutes: MetadataRoute.Sitemap = announcements.map(
+		(item) => {
 			const parsedDate = new Date(item.date);
 
 			return {
 				url: toAbsoluteUrl(`/announcements/${item.slug}/`),
-      lastModified: Number.isNaN(parsedDate.getTime()) ? new Date() : parsedDate,
+				lastModified: Number.isNaN(parsedDate.getTime())
+					? new Date()
+					: parsedDate,
 				changeFrequency: "monthly",
 				priority: 0.7,
 			};
-  });
+		},
+	);
 
 	return [...staticRoutes, ...announcementRoutes];
 }

biome.json

@@ -0,0 +1,8 @@
+{
+	"$schema": "https://biomejs.dev/schemas/2.2.0/schema.json",
+	"css": {
+		"parser": {
+			"tailwindDirectives": true
+		}
+	}
+}

components/ui/badge.tsx

@@ -1,8 +1,8 @@
-import { mergeProps } from "@base-ui/react/merge-props"
+import { mergeProps } from "@base-ui/react/merge-props";
-import { useRender } from "@base-ui/react/use-render"
+import { useRender } from "@base-ui/react/use-render";
-import { cva, type VariantProps } from "class-variance-authority"
+import { cva, type VariantProps } from "class-variance-authority";
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 
 const badgeVariants = cva(
 	"group/badge inline-flex h-5 w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3!",
@@ -24,8 +24,8 @@ const badgeVariants = cva(
 		defaultVariants: {
 			variant: "default",
 		},
-  }
+	},
-)
+);
 
 function Badge({
 	className,
@@ -39,14 +39,14 @@ function Badge({
 			{
 				className: cn(badgeVariants({ variant }), className),
 			},
-      props
+			props,
 		),
 		render,
 		state: {
 			slot: "badge",
 			variant,
 		},
-  })
+	});
 }
 
-export { Badge, badgeVariants }
+export { Badge, badgeVariants };

components/ui/button.tsx

@@ -1,9 +1,9 @@
-"use client"
+"use client";
 
-import { Button as ButtonPrimitive } from "@base-ui/react/button"
+import { Button as ButtonPrimitive } from "@base-ui/react/button";
-import { cva, type VariantProps } from "class-variance-authority"
+import { cva, type VariantProps } from "class-variance-authority";
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 
 const buttonVariants = cva(
 	"group/button inline-flex shrink-0 items-center justify-center rounded-md border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
@@ -39,8 +39,8 @@ const buttonVariants = cva(
 			variant: "default",
 			size: "default",
 		},
-  }
+	},
-)
+);
 
 function Button({
 	className,
@@ -54,7 +54,7 @@ function Button({
 			className={cn(buttonVariants({ variant, size, className }))}
 			{...props}
 		/>
-  )
+	);
 }
 
-export { Button, buttonVariants }
+export { Button, buttonVariants };

components/ui/card.tsx

@@ -1,6 +1,6 @@
-import * as React from "react"
+import * as React from "react";
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 
 function Card({
 	className,
@@ -13,11 +13,11 @@ function Card({
 			data-size={size}
 			className={cn(
 				"group/card flex flex-col gap-6 overflow-hidden rounded-xl bg-card py-6 text-sm text-card-foreground shadow-xs ring-1 ring-foreground/10 has-[>img:first-child]:pt-0 data-[size=sm]:gap-4 data-[size=sm]:py-4 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl",
-        className
+				className,
 			)}
 			{...props}
 		/>
-  )
+	);
 }
 
 function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
@@ -26,11 +26,11 @@ function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
 			data-slot="card-header"
 			className={cn(
 				"group/card-header @container/card-header grid auto-rows-min items-start gap-1 rounded-t-xl px-6 group-data-[size=sm]/card:px-4 has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto] [.border-b]:pb-6 group-data-[size=sm]/card:[.border-b]:pb-4",
-        className
+				className,
 			)}
 			{...props}
 		/>
-  )
+	);
 }
 
 function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
@@ -39,11 +39,11 @@ function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
 			data-slot="card-title"
 			className={cn(
 				"font-heading text-base leading-normal font-medium group-data-[size=sm]/card:text-sm",
-        className
+				className,
 			)}
 			{...props}
 		/>
-  )
+	);
 }
 
 function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
@@ -53,7 +53,7 @@ function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
 			className={cn("text-sm text-muted-foreground", className)}
 			{...props}
 		/>
-  )
+	);
 }
 
 function CardAction({ className, ...props }: React.ComponentProps<"div">) {
@@ -62,11 +62,11 @@ function CardAction({ className, ...props }: React.ComponentProps<"div">) {
 			data-slot="card-action"
 			className={cn(
 				"col-start-2 row-span-2 row-start-1 self-start justify-self-end",
-        className
+				className,
 			)}
 			{...props}
 		/>
-  )
+	);
 }
 
 function CardContent({ className, ...props }: React.ComponentProps<"div">) {
@@ -76,7 +76,7 @@ function CardContent({ className, ...props }: React.ComponentProps<"div">) {
 			className={cn("px-6 group-data-[size=sm]/card:px-4", className)}
 			{...props}
 		/>
-  )
+	);
 }
 
 function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
@@ -85,11 +85,11 @@ function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
 			data-slot="card-footer"
 			className={cn(
 				"flex items-center rounded-b-xl px-6 group-data-[size=sm]/card:px-4 [.border-t]:pt-6 group-data-[size=sm]/card:[.border-t]:pt-4",
-        className
+				className,
 			)}
 			{...props}
 		/>
-  )
+	);
 }
 
 export {
@@ -100,4 +100,4 @@ export {
 	CardAction,
 	CardDescription,
 	CardContent,
-}
+};

components/ui/separator.tsx

@@ -1,8 +1,8 @@
-"use client"
+"use client";
 
-import { Separator as SeparatorPrimitive } from "@base-ui/react/separator"
+import { Separator as SeparatorPrimitive } from "@base-ui/react/separator";
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 
 function Separator({
 	className,
@@ -15,11 +15,11 @@ function Separator({
 			orientation={orientation}
 			className={cn(
 				"shrink-0 bg-border data-horizontal:h-px data-horizontal:w-full data-vertical:w-px data-vertical:self-stretch",
-        className
+				className,
 			)}
 			{...props}
 		/>
-  )
+	);
 }
 
-export { Separator }
+export { Separator };

lib/announcements.ts

@@ -46,7 +46,10 @@ function parseFrontmatter(markdown: string): {
 		}
 
 		const key = line.slice(0, delimiterIndex).trim();
-    const value = line.slice(delimiterIndex + 1).trim().replace(/^"|"$/g, "");
+		const value = line
+			.slice(delimiterIndex + 1)
+			.trim()
+			.replace(/^"|"$/g, "");
 
 		if (key === "title" || key === "date" || key === "summary") {
 			frontmatter[key] = value;
@@ -64,7 +67,9 @@ export async function getAnnouncementSlugs(): Promise<string[]> {
 		.map((entry) => entry.name.replace(/\.md$/, ""));
 }
 
-export async function getAnnouncementBySlug(slug: string): Promise<AnnouncementDetail> {
+export async function getAnnouncementBySlug(
+	slug: string,
+): Promise<AnnouncementDetail> {
 	const filePath = path.join(ANNOUNCEMENTS_DIR, `${slug}.md`);
 	const markdown = await fs.readFile(filePath, "utf-8");
 	const { frontmatter, body } = parseFrontmatter(markdown);
@@ -80,7 +85,9 @@ export async function getAnnouncementBySlug(slug: string): Promise<AnnouncementD
 
 export async function getAllAnnouncements(): Promise<AnnouncementListItem[]> {
 	const slugs = await getAnnouncementSlugs();
-  const items = await Promise.all(slugs.map((slug) => getAnnouncementBySlug(slug)));
+	const items = await Promise.all(
+		slugs.map((slug) => getAnnouncementBySlug(slug)),
+	);
 
 	return items
 		.map((item) => ({

lib/markdown.ts

@@ -23,7 +23,10 @@ function applyInlineMarkdown(value: string): string {
 		.replace(/\*\*([^*]+)\*\*/g, "<strong>$1</strong>")
 		.replace(/\*([^*]+)\*/g, "<em>$1</em>")
 		.replace(/~~([^~]+)~~/g, "<del>$1</del>")
-    .replace(/\[([^\]]+)\]\((https?:\/\/[^\s)]+)\)/g, '<a href="$2" target="_blank" rel="noopener noreferrer">$1</a>');
+		.replace(
+			/\[([^\]]+)\]\((https?:\/\/[^\s)]+)\)/g,
+			'<a href="$2" target="_blank" rel="noopener noreferrer">$1</a>',
+		);
 }
 
 function flushParagraph(state: ParseState, html: string[]): void {
@@ -40,7 +43,9 @@ function flushList(state: ParseState, html: string[]): void {
 		return;
 	}
 
-  html.push(`<${state.listType}>${state.listBuffer.join("")}</${state.listType}>`);
+	html.push(
+		`<${state.listType}>${state.listBuffer.join("")}</${state.listType}>`,
+	);
 	state.listType = null;
 	state.listBuffer = [];
 }
@@ -66,7 +71,9 @@ export function markdownToHtml(markdown: string): string {
 			if (!state.inCodeBlock) {
 				state.inCodeBlock = true;
 				state.codeLang = line.slice(3).trim();
-        const className = state.codeLang ? ` class="language-${escapeHtml(state.codeLang)}"` : "";
+				const className = state.codeLang
+					? ` class="language-${escapeHtml(state.codeLang)}"`
+					: "";
 				html.push(`<pre><code${className}>`);
 			} else {
 				state.inCodeBlock = false;
@@ -92,7 +99,9 @@ export function markdownToHtml(markdown: string): string {
 			flushParagraph(state, html);
 			flushList(state, html);
 			const level = headingMatch[1].length;
-      html.push(`<h${level}>${applyInlineMarkdown(headingMatch[2])}</h${level}>`);
+			html.push(
+				`<h${level}>${applyInlineMarkdown(headingMatch[2])}</h${level}>`,
+			);
 			continue;
 		}
 
@@ -107,7 +116,9 @@ export function markdownToHtml(markdown: string): string {
 		if (blockquoteMatch) {
 			flushParagraph(state, html);
 			flushList(state, html);
-      html.push(`<blockquote><p>${applyInlineMarkdown(blockquoteMatch[1])}</p></blockquote>`);
+			html.push(
+				`<blockquote><p>${applyInlineMarkdown(blockquoteMatch[1])}</p></blockquote>`,
+			);
 			continue;
 		}
 

lib/utils.ts

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