From 968f676b3ad877907fe3e82f2857c5d6093953a8 Mon Sep 17 00:00:00 2001
From: kakkokari-gtyih <67428053+kakkokari-gtyih@users.noreply.github.com>
Date: Tue, 20 Aug 2024 13:44:14 +0900
Subject: [PATCH] =?UTF-8?q?enhance:=20=E3=82=B5=E3=83=BC=E3=83=90=E3=83=BC?=
=?UTF-8?q?=E3=82=B5=E3=82=A4=E3=83=89=E3=81=AEembed=E7=B3=BB=E3=82=92?=
=?UTF-8?q?=E3=81=95=E3=82=89=E3=81=AB=E5=88=86=E9=9B=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
.../src/server/web/ClientServerService.ts | 11 ++-
packages/backend/src/server/web/style.css | 23 +----
.../backend/src/server/web/style.embed.css | 27 ++++++
.../src/server/web/views/base-embed.pug | 86 +++++++++++++++++++
scripts/build-assets.mjs | 3 +-
5 files changed, 125 insertions(+), 25 deletions(-)
create mode 100644 packages/backend/src/server/web/style.embed.css
create mode 100644 packages/backend/src/server/web/views/base-embed.pug
diff --git a/packages/backend/src/server/web/ClientServerService.ts b/packages/backend/src/server/web/ClientServerService.ts
index d5b2096f87..5c6246c21b 100644
--- a/packages/backend/src/server/web/ClientServerService.ts
+++ b/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) => {
diff --git a/packages/backend/src/server/web/style.css b/packages/backend/src/server/web/style.css
index d339ba4bb6..dbcc8f537c 100644
--- a/packages/backend/src/server/web/style.css
+++ b/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;
diff --git a/packages/backend/src/server/web/style.embed.css b/packages/backend/src/server/web/style.embed.css
new file mode 100644
index 0000000000..1aad28f973
--- /dev/null
+++ b/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;
+}
diff --git a/packages/backend/src/server/web/views/base-embed.pug b/packages/backend/src/server/web/views/base-embed.pug
new file mode 100644
index 0000000000..14a7d8062e
--- /dev/null
+++ b/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
+
+
+ block content
diff --git a/scripts/build-assets.mjs b/scripts/build-assets.mjs
index e2d77914b7..6da07a507c 100644
--- a/scripts/build-assets.mjs
+++ b/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'