refactor: standardize code formatting across components and utilities
Some checks failed
Push to github container register / push-docker (push) Has been cancelled
Some checks failed
Push to github container register / push-docker (push) Has been cancelled
- 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.
This commit is contained in:
202
app/page.tsx
202
app/page.tsx
@@ -9,104 +9,116 @@ import { Separator } from "@/components/ui/separator";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
const servers = [
|
||||
{
|
||||
name: "サバイバル鯖",
|
||||
description: "採掘・冒険・建築を楽しむ通常ワールドです。",
|
||||
address: "survival.mc.neody.ad.jp",
|
||||
icon: Sprout,
|
||||
badgeVariant: "default" as const,
|
||||
},
|
||||
{
|
||||
name: "建築鯖",
|
||||
description: "大型建築や街づくり向けのクリエイティブ環境です。",
|
||||
address: "kenchiku.mc.neody.ad.jp",
|
||||
icon: Pickaxe,
|
||||
badgeVariant: "secondary" as const,
|
||||
},
|
||||
{
|
||||
name: "サバイバル鯖",
|
||||
description: "採掘・冒険・建築を楽しむ通常ワールドです。",
|
||||
address: "survival.mc.neody.ad.jp",
|
||||
icon: Sprout,
|
||||
badgeVariant: "default" as const,
|
||||
},
|
||||
{
|
||||
name: "建築鯖",
|
||||
description: "大型建築や街づくり向けのクリエイティブ環境です。",
|
||||
address: "kenchiku.mc.neody.ad.jp",
|
||||
icon: Pickaxe,
|
||||
badgeVariant: "secondary" as const,
|
||||
},
|
||||
];
|
||||
|
||||
export default function Home() {
|
||||
return (
|
||||
<div className="relative flex min-h-full flex-1 flex-col overflow-x-clip bg-background">
|
||||
<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">
|
||||
Takasumi-Neodyマイクラサーバプロジェクト接続ガイド
|
||||
</Badge>
|
||||
<h1 className="text-3xl font-semibold tracking-tight sm:text-5xl">
|
||||
Minecraft サーバへ接続する
|
||||
</h1>
|
||||
<p className="mt-4 max-w-3xl text-sm leading-7 text-muted-foreground sm:text-base">
|
||||
サーバー追加画面で下記アドレスを入力してください。Java版 と
|
||||
統合版のどちらにも対応しています。
|
||||
</p>
|
||||
<div className="mt-6">
|
||||
<Link
|
||||
href="/announcements"
|
||||
className={cn(
|
||||
buttonVariants({ variant: "outline" }),
|
||||
"transition-transform duration-200 hover:-translate-y-0.5"
|
||||
)}
|
||||
>
|
||||
お知らせを見る
|
||||
</Link>
|
||||
</div>
|
||||
</section>
|
||||
return (
|
||||
<div className="relative flex min-h-full flex-1 flex-col overflow-x-clip bg-background">
|
||||
<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"
|
||||
>
|
||||
Takasumi-Neodyマイクラサーバプロジェクト接続ガイド
|
||||
</Badge>
|
||||
<h1 className="text-3xl font-semibold tracking-tight sm:text-5xl">
|
||||
Minecraft サーバへ接続する
|
||||
</h1>
|
||||
<p className="mt-4 max-w-3xl text-sm leading-7 text-muted-foreground sm:text-base">
|
||||
サーバー追加画面で下記アドレスを入力してください。Java版 と
|
||||
統合版のどちらにも対応しています。
|
||||
</p>
|
||||
<div className="mt-6">
|
||||
<Link
|
||||
href="/announcements"
|
||||
className={cn(
|
||||
buttonVariants({ variant: "outline" }),
|
||||
"transition-transform duration-200 hover:-translate-y-0.5",
|
||||
)}
|
||||
>
|
||||
お知らせを見る
|
||||
</Link>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="grid gap-4 md:grid-cols-2">
|
||||
{servers.map((server) => {
|
||||
const Icon = server.icon;
|
||||
return (
|
||||
<article
|
||||
key={server.name}
|
||||
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"
|
||||
>
|
||||
<header>
|
||||
<div className="mb-2 flex flex-col items-start gap-2 sm:flex-row sm:items-center sm:justify-between sm:gap-3">
|
||||
<Badge variant={server.badgeVariant}>{server.name}</Badge>
|
||||
<span className="inline-flex items-center gap-1.5 text-xs text-muted-foreground">
|
||||
<Wifi className="size-3.5" />
|
||||
Java版 / 統合版 対応
|
||||
</span>
|
||||
</div>
|
||||
<h3 className="flex items-center gap-2 text-xl font-semibold">
|
||||
<Icon className="size-5" />
|
||||
{server.name}
|
||||
</h3>
|
||||
<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="mt-1 break-all font-mono text-sm">{server.address}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-5 flex gap-2">
|
||||
<a
|
||||
className={cn(buttonVariants(), "w-full sm:w-auto")}
|
||||
href={`minecraft://?addExternalServer=${server.name}|${server.address}`}
|
||||
>
|
||||
Minecraft で開く
|
||||
<ExternalLink className="size-4" />
|
||||
</a>
|
||||
</div>
|
||||
</article>
|
||||
);
|
||||
})}
|
||||
</section>
|
||||
<section className="grid gap-4 md:grid-cols-2">
|
||||
{servers.map((server) => {
|
||||
const Icon = server.icon;
|
||||
return (
|
||||
<article
|
||||
key={server.name}
|
||||
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"
|
||||
>
|
||||
<header>
|
||||
<div className="mb-2 flex flex-col items-start gap-2 sm:flex-row sm:items-center sm:justify-between sm:gap-3">
|
||||
<Badge variant={server.badgeVariant}>{server.name}</Badge>
|
||||
<span className="inline-flex items-center gap-1.5 text-xs text-muted-foreground">
|
||||
<Wifi className="size-3.5" />
|
||||
Java版 / 統合版 対応
|
||||
</span>
|
||||
</div>
|
||||
<h3 className="flex items-center gap-2 text-xl font-semibold">
|
||||
<Icon className="size-5" />
|
||||
{server.name}
|
||||
</h3>
|
||||
<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="mt-1 break-all font-mono text-sm">
|
||||
{server.address}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-5 flex gap-2">
|
||||
<a
|
||||
className={cn(buttonVariants(), "w-full sm:w-auto")}
|
||||
href={`minecraft://?addExternalServer=${server.name}|${server.address}`}
|
||||
>
|
||||
Minecraft で開く
|
||||
<ExternalLink className="size-4" />
|
||||
</a>
|
||||
</div>
|
||||
</article>
|
||||
);
|
||||
})}
|
||||
</section>
|
||||
|
||||
<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">
|
||||
<h2 className="text-xl font-semibold">接続手順</h2>
|
||||
<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>3. 接続したい鯖のサーバアドレスを入力して保存する。</li>
|
||||
<li>4. 一覧からサーバを選んで接続する。</li>
|
||||
</ol>
|
||||
</section>
|
||||
</main>
|
||||
</div>
|
||||
);
|
||||
<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">
|
||||
<h2 className="text-xl font-semibold">接続手順</h2>
|
||||
<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>3. 接続したい鯖のサーバアドレスを入力して保存する。</li>
|
||||
<li>4. 一覧からサーバを選んで接続する。</li>
|
||||
</ol>
|
||||
</section>
|
||||
</main>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user