to be treated as a generic web page (src/consts.ts, src/layouts/Layout.astro, src/pages...)

This commit is contained in:
ひでまる 2025-01-28 14:47:07 +09:00
parent 12197db374
commit 7e3384b85f
3 changed files with 27 additions and 10 deletions

View file

@ -1,2 +1,10 @@
export const DOMAIN = "mi.v-sli.me";
export const DOMAIN = "ap.example.tld";
export const TITLE = "インスタンスの墓標";
export const DESCRIPTION = `このインスタンスは閉鎖しました。"${DOMAIN}"を支えていただきありがとうございました。`;
export const MAIN_MESSAGE_LINE: string[] = [
`このインスタンスは滅んでしまったようです。`,
`ここにあるのは、`,
`インスタンスの墓標です。`,
];
export const NEXT_INSTANCE_URL = "https://new.example.tld";
export const NEXT_INSTANCE_MESSAGE = "新しいインスタンスに進む";

View file

@ -1,6 +1,6 @@
---
const { title = "My Site" } = Astro.props;
const { title = "410 GONE", description = "410 GONE" } = Astro.props;
import "../styles/globals.css";
---
<html lang="ja">

View file

@ -2,12 +2,22 @@
import Layout from "../layouts/Layout.astro";
import { Icon } from "astro-icon/components";
import { Image } from "astro:assets";
import { DESCRIPTION } from "../consts";
import {
TITLE,
MAIN_MESSAGE_LINE,
DESCRIPTION,
NEXT_INSTANCE_MESSAGE,
NEXT_INSTANCE_URL,
} from "../consts";
const mainMessage: string = MAIN_MESSAGE_LINE.map((m, i) =>
i < MAIN_MESSAGE_LINE.length - 1 ? `${m}<br />` : m,
).join("");
---
<Layout title="ホームページ">
<Layout title={TITLE} description={DESCRIPTION}>
<html lang="ja">
<head>
<title>ぷよすきーの墓標</title>
<title>{TITLE}</title>
</head>
<body>
<header class="w-full h-12 backdrop-blur-lg bg-black!">
@ -26,9 +36,8 @@ import { DESCRIPTION } from "../consts";
>
<div
class="relative flex place-items-center before:absolute before:h-[300px] before:w-[480px] before:-translate-x-1/2 before:rounded-full before:bg-gradient-radial before:from-white before:to-transparent before:blur-2xl before:content-[''] after:absolute after:-z-20 after:h-[180px] after:w-[240px] after:translate-x-1/3 after:bg-gradient-conic after:from-sky-200 after:via-blue-200 after:blur-2xl after:content-[''] before:dark:bg-gradient-to-br before:dark:from-transparent before:dark:to-blue-700 before:dark:opacity-10 after:dark:from-sky-900 after:dark:via-[#0141ff] after:dark:opacity-40 before:lg:h-[360px] z-[-1] text-sm font-bold sm:text-3xl"
>
ぷよすきーは滅んでしまったようです。 <br /> ここにあるのは、 <br />
ぷよすきーの墓標です。
>
<nav set:html={mainMessage} />
<Icon name="game-icons:hasty-grave" class="w-48 sm:w-96" width={300} height={300} />
<!-- <Image -->
<!-- class="w-48 sm:w-96" -->
@ -44,14 +53,14 @@ import { DESCRIPTION } from "../consts";
class="mb-32 grid text-center lg:max-w-5xl lg:w-full lg:mb-0 lg:text-left"
>
<a
href="https://puyo.v-sli.me"
href={NEXT_INSTANCE_URL}
class="text-center group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30"
target="_blank"
rel="noopener noreferrer"
>
<div class="mb-3 text-center flex justify-center items-center">
<h2 class="text-2xl font-semibold leading-30">
新しいぷよすきーに進む
{NEXT_INSTANCE_MESSAGE}
</h2>
<Icon name="pixelarticons:next" width={30} height={30} class="ml-2 h-full" />
</div>