From 959417a1a6a09b9ebe53cb8e6edd3b3462181595 Mon Sep 17 00:00:00 2001 From: ThinaticSystem Date: Sun, 30 Jun 2024 15:32:55 +0000 Subject: [PATCH] =?UTF-8?q?[wip]=20Feature:=20TanStack=E3=81=AE=E3=83=AB?= =?UTF-8?q?=E3=83=BC=E3=83=88=E5=AE=9A=E7=BE=A9=E3=81=8B=E3=82=89OGP?= =?UTF-8?q?=E5=88=86=E5=B2=90=E4=BB=98=E3=81=8D=E3=81=AEindex.html?= =?UTF-8?q?=E3=82=92=E7=94=9F=E6=88=90?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/scripts/generate-template-html.js | 71 ++++++++++++++++++++++ frontend/src/routes/__root.tsx | 6 ++ frontend/src/routes/route.tsx | 6 ++ frontend/src/staticDataRouteOption.ts | 11 ++++ 4 files changed, 94 insertions(+) create mode 100644 frontend/scripts/generate-template-html.js create mode 100644 frontend/src/staticDataRouteOption.ts diff --git a/frontend/scripts/generate-template-html.js b/frontend/scripts/generate-template-html.js new file mode 100644 index 00000000..a154e4cd --- /dev/null +++ b/frontend/scripts/generate-template-html.js @@ -0,0 +1,71 @@ +// @ts-check + +import fs from "node:fs"; +import process from "node:process"; + +import { routeTree } from "../src/routeTree.gen"; + +/** @typedef {import("../src/staticDataRouteOption").CustomStaticDataRouteOption} CustomStaticDataRouteOption */ + +/** 書き出すHTMLファイルのパス */ +const distFile = process.cwd() + "/dist/index.html"; + +/** TanStack RouterのRouteの型の扱い方がよくわかんにゃいのでとりあえず */ +/** + * @typedef {{ + * children?: Record; + * fullPath: string; + * options: { + * staticData: CustomStaticDataRouteOption; + * } + * }} RouteTree; + */ + +/** + * Generate flatten routes array. Nested children will be pettanko. (Nippongo ga utenai in VS code, naniyue?) + * @param {RouteTree} parent + */ +const getFlattenRoutes = (parent) => { + /** @type {RouteTree[]} */ + const flattenRoutes = []; + flattenRoutes.push(parent); + if (parent.children != null) { + // 子孫ルートを収集 + for (const child of Object.values(parent.children)) { + flattenRoutes.push(...getFlattenRoutes(child)); + } + } + return flattenRoutes; +}; + +const flattenRoutes = getFlattenRoutes(/** @type {RouteTree} */ (routeTree)); +const html = ` + + + + + + + + + ${ + route.options.staticData.ogp.imageUrl != null + ? ` + ` + : "" + }`, + ))()}> + + Frost + + +
+ + +`; + +// htmlファイルへ書き込み +fs.writeFileSync(distFile, html); diff --git a/frontend/src/routes/__root.tsx b/frontend/src/routes/__root.tsx index dbf901cf..b85b12d3 100644 --- a/frontend/src/routes/__root.tsx +++ b/frontend/src/routes/__root.tsx @@ -11,4 +11,10 @@ export const Route = createRootRoute({ ), + staticData: { + ogp: { + title: "", + description: "", + }, + }, }); diff --git a/frontend/src/routes/route.tsx b/frontend/src/routes/route.tsx index 8e2870f6..40c0e1a0 100644 --- a/frontend/src/routes/route.tsx +++ b/frontend/src/routes/route.tsx @@ -5,6 +5,12 @@ import { DeleteParrot } from "./-components/DeleteParrot"; export const Route = createFileRoute("/")({ component: Home, + staticData: { + ogp: { + title: "Frost", + description: "Top", + }, + }, }); function Home() { diff --git a/frontend/src/staticDataRouteOption.ts b/frontend/src/staticDataRouteOption.ts new file mode 100644 index 00000000..0e8a40e7 --- /dev/null +++ b/frontend/src/staticDataRouteOption.ts @@ -0,0 +1,11 @@ +export interface CustomStaticDataRouteOption { + ogp: { + title: string; + description: string; + imageUrl?: string; + }; +} + +declare module "@tanstack/react-router" { + interface StaticDataRouteOption extends CustomStaticDataRouteOption {} +}