Merge pull request #206 from h8570rg/maintenance_mode

Maintenance mode

.env.example

@@ -1,7 +1,7 @@
 NEXT_PUBLIC_SERVICE_ENV=local
-NEXT_PUBLIC_SERVICE_NAME=janreco
 NEXT_PUBLIC_SUPABASE_URL=
 NEXT_PUBLIC_SUPABASE_ANON_KEY=
 GOOGLE_CLIENT_ID=
 GOOGLE_SECRET=
 OPENAI_API_KEY=
+MAINTENANCE_MODE=false

app/(maintenance)/(routes)/maintenance/page.tsx

@@ -0,0 +1,59 @@
+"use client";
+
+import {
+  Navbar as NextUINavbar,
+  NavbarBrand,
+  NavbarContent,
+} from "@nextui-org/react";
+import Link from "next/link";
+import { useRouter } from "next/navigation";
+import { useState } from "react";
+import { Alert } from "@/components/Alert";
+import { Button } from "@/components/Button";
+import { Icon } from "@/components/Icon";
+import Logo from "@/components/Logo";
+
+export default function MaintenancePage() {
+  const router = useRouter();
+  const [isRefreshing, setIsRefreshing] = useState(false);
+  return (
+    <main className="relative flex min-h-screen flex-col">
+      <NextUINavbar position="static" className="absolute inset-x-0 top-0">
+        <NavbarContent>
+          <NavbarBrand>
+            <Link color="foreground" href="/">
+              <Logo className="text-large" />
+            </Link>
+          </NavbarBrand>
+        </NavbarContent>
+      </NextUINavbar>
+      <div className="flex grow items-center justify-center px-4">
+        <div className="flex flex-col items-center gap-4">
+          <h1 className="text-center text-large">メンテナンス中</h1>
+          <Alert
+            color="warning"
+            title="申し訳ありませんが、現在メンテナンス中です。しばらくしてから再度お試しください。"
+            endContent={
+              <div className="flex items-center justify-center self-stretch"></div>
+            }
+          />
+          <Button
+            color="default"
+            variant="flat"
+            startContent={
+              !isRefreshing && <Icon className="size-5" name="refresh" />
+            }
+            onPress={() => {
+              router.refresh();
+              setIsRefreshing(true);
+              setTimeout(() => setIsRefreshing(false), 1000);
+            }}
+            isLoading={isRefreshing}
+          >
+            再読み込み
+          </Button>
+        </div>
+      </div>
+    </main>
+  );
+}

components/Alert/index.tsx

@@ -0,0 +1 @@
+export { Alert } from "@nextui-org/react";

components/Icon/index.tsx

@@ -20,7 +20,8 @@ export type IconName =
   | "check-filled"
   | "edit"
   | "description"
-  | "bar-chart";
+  | "bar-chart"
+  | "refresh";
 
 export function Icon({
   name,
@@ -92,6 +93,9 @@ export function IconDefs() {
         <symbol id="bar-chart" viewBox="0 -960 960 960">
           <path d="M640-160v-280h160v280H640Zm-240 0v-640h160v640H400Zm-240 0v-440h160v440H160Z" />
         </symbol>
+        <symbol id="refresh" viewBox="0 -960 960 960">
+          <path d="M480-160q-134 0-227-93t-93-227q0-134 93-227t227-93q69 0 132 28.5T720-690v-110h80v280H520v-80h168q-32-56-87.5-88T480-720q-100 0-170 70t-70 170q0 100 70 170t170 70q77 0 139-44t87-116h84q-28 106-114 173t-196 67Z" />
+        </symbol>
       </defs>
     </svg>
   );

middleware.ts

@@ -10,6 +10,14 @@ export async function middleware(request: NextRequest) {
     return NextResponse.next();
   }
 
+  if (process.env.MAINTENANCE_MODE !== "true") {
+    if (request.nextUrl.pathname === "/maintenance") {
+      return NextResponse.rewrite(new URL("/404", request.url));
+    }
+  } else {
+    return NextResponse.rewrite(new URL("/maintenance", request.url));
+  }
+
   /** @see https://github.com/orgs/supabase/discussions/20905 */
   return await updateSession(request);
 }