enhance: サーバーサイドのembed系をさらに分離

packages/backend/src/server/web/ClientServerService.ts

@@ -782,9 +782,16 @@ export class ClientServerService {
 		//#endregion
 
 		//#region embed pages
-		fastify.get('/embed*', async (request, reply) => {
+		fastify.get('/embed/*', async (request, reply) => {
+			const meta = await this.metaService.fetch();
+
 			reply.removeHeader('X-Frame-Options');
-			return await renderBase(reply, { noindex: true, embed: true });
+
+			reply.header('Cache-Control', 'public, max-age=3600');
+			return await reply.view('base-embed', {
+				title: meta.name ?? 'Misskey',
+				...await this.generateCommonPugData(meta),
+			});
 		});
 
 		fastify.get('/_info_card_', async (request, reply) => {

packages/backend/src/server/web/style.css

@@ -9,13 +9,6 @@ html {
 	color: var(--fg);
 }
 
-html.embed {
-	box-sizing: border-box;
-	background-color: transparent;
-	color-scheme: light dark;
-	max-width: 500px;
-}
-
 #splash {
 	position: fixed;
 	z-index: 10000;
@@ -29,21 +22,6 @@ html.embed {
 	transition: opacity 0.5s ease;
 }
 
-html.embed #splash {
-	box-sizing: border-box;
-	min-height: 300px;
-	border-radius: var(--radius, 12px);
-	border: 1px solid var(--divider, #e8e8e8);
-}
-
-html.embed.norounded #splash {
-	border-radius: 0;
-}
-
-html.embed.noborder #splash {
-	border: none;
-}
-
 #splashIcon {
 	position: absolute;
 	top: 0;
@@ -69,6 +47,7 @@ html.embed.noborder #splash {
 	transform: translateY(70px);
 	color: var(--accent);
 }
+
 #splashSpinner > .spinner {
 	position: absolute;
 	top: 0;

packages/backend/src/server/web/style.embed.css

@@ -0,0 +1,27 @@
+/*
+ * SPDX-FileCopyrightText: syuilo and misskey-project
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+html.embed {
+	box-sizing: border-box;
+	background-color: transparent;
+	color-scheme: light dark;
+	max-width: 500px;
+}
+
+html.embed #splash {
+	box-sizing: border-box;
+	min-height: 300px;
+	border-radius: var(--radius, 12px);
+	border: 1px solid var(--divider, #e8e8e8);
+}
+
+html.embed.norounded #splash {
+	border-radius: 0;
+}
+
+html.embed.noborder #splash {
+	border: none;
+}

packages/backend/src/server/web/views/base-embed.pug

@@ -0,0 +1,86 @@
+block vars
+
+block loadClientEntry
+	- const clientEntry = config.clientEmbedEntry;
+
+doctype html
+
+//
+	-
+	  _____ _         _
+	 |     |_|___ ___| |_ ___ _ _
+	 | | | | |_ -|_ -| '_| -_| | |
+	 |_|_|_|_|___|___|_,_|___|_  |
+	                         |___|
+	 Thank you for using Misskey!
+	 If you are reading this message... how about joining the development?
+	 https://github.com/misskey-dev/misskey
+
+
+html(class='embed')
+
+	head
+		meta(charset='utf-8')
+		meta(name='application-name' content='Misskey')
+		meta(name='referrer' content='origin')
+		meta(name='theme-color' content= themeColor || '#86b300')
+		meta(name='theme-color-orig' content= themeColor || '#86b300')
+		meta(property='instance_url' content= instanceUrl)
+		meta(name='viewport' content='width=device-width, initial-scale=1')
+		meta(name='format-detection' content='telephone=no,date=no,address=no,email=no,url=no')
+		link(rel='icon' href= icon || '/favicon.ico')
+		link(rel='apple-touch-icon' href= appleTouchIcon || '/apple-touch-icon.png')
+		link(rel='prefetch' href=serverErrorImageUrl)
+		link(rel='prefetch' href=infoImageUrl)
+		link(rel='prefetch' href=notFoundImageUrl)
+		//- https://github.com/misskey-dev/misskey/issues/9842
+		link(rel='stylesheet' href='/assets/tabler-icons/tabler-icons.min.css?v3.3.0')
+		link(rel='modulepreload' href=`/vite/${clientEntry.file}`)
+
+		if !config.clientManifestExists
+				script(type="module" src="/vite/@vite/client")
+
+		if Array.isArray(clientEntry.css)
+			each href in clientEntry.css
+				link(rel='stylesheet' href=`/vite/${href}`)
+
+		title
+			block title
+				= title || 'Misskey'
+
+		block meta
+			meta(name='robots' content='noindex')
+
+		style
+			include ../style.css
+			include ../style.embed.css
+
+		script.
+			var VERSION = "#{version}";
+			var CLIENT_ENTRY = "#{clientEntry.file}";
+
+		script(type='application/json' id='misskey_meta' data-generated-at=now)
+			!= metaJson
+
+		script
+			include ../boot.embed.js
+
+	body
+		noscript: p
+			| JavaScriptを有効にしてください
+			br
+			| Please turn on your JavaScript
+		div#splash
+			img#splashIcon(src= icon || '/static-assets/splash.png')
+			div#splashSpinner
+				<svg class="spinner bg" viewBox="0 0 152 152" xmlns="http://www.w3.org/2000/svg">
+					<g transform="matrix(1,0,0,1,12,12)">
+						<circle cx="64" cy="64" r="64" style="fill:none;stroke:currentColor;stroke-width:24px;"/>
+					</g>
+				</svg>
+				<svg class="spinner fg" viewBox="0 0 152 152" xmlns="http://www.w3.org/2000/svg">
+					<g transform="matrix(1,0,0,1,12,12)">
+						<path d="M128,64C128,28.654 99.346,0 64,0C99.346,0 128,28.654 128,64Z" style="fill:none;stroke:currentColor;stroke-width:24px;"/>
+					</g>
+				</svg>
+		block content

scripts/build-assets.mjs

@@ -73,7 +73,8 @@ async function buildBackendStyle() {
   await fs.mkdir('./packages/backend/built/server/web', { recursive: true });
 
   for (const file of [
-    './packages/backend/src/server/web/style.css',
+		'./packages/backend/src/server/web/style.css',
+		'./packages/backend/src/server/web/style.embed.css',
     './packages/backend/src/server/web/bios.css',
     './packages/backend/src/server/web/cli.css',
     './packages/backend/src/server/web/error.css'