misskey-dev · kakkokari-gtyih · Apr 5, 2023 · Apr 5, 2023 · Apr 5, 2023 · Apr 5, 2023
diff --git a/locales/index.d.ts b/locales/index.d.ts
@@ -1055,6 +1055,7 @@ export interface Locale {
     "video": string;
     "videos": string;
     "dataSaver": string;
+    "copyEmbedCode": string;
     "accountMigration": string;
     "accountMoved": string;
     "accountMovedShort": string;

diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml
@@ -1052,6 +1052,7 @@ noteIdOrUrl: "ノートIDまたはURL"
 video: "動画"
 videos: "動画"
 dataSaver: "データセーバー"
+copyEmbedCode: "埋め込みコードをコピー"
 accountMigration: "アカウントの移行"
 accountMoved: "このユーザーは新しいアカウントに移行しました："
 accountMovedShort: "このアカウントは移行されています"

diff --git a/packages/backend/src/config.ts b/packages/backend/src/config.ts
@@ -155,6 +155,7 @@ export type Config = {
 	driveUrl: string;
 	userAgent: string;
 	clientEntry: string;
+	clientEmbedEntry: string;
 	clientManifestExists: boolean;
 	mediaProxy: string;
 	externalMediaProxyEnabled: boolean;
@@ -191,7 +192,10 @@ export function loadConfig(): Config {
 	const clientManifestExists = fs.existsSync(_dirname + '/../../../built/_vite_/manifest.json');
 	const clientManifest = clientManifestExists ?
 		JSON.parse(fs.readFileSync(`${_dirname}/../../../built/_vite_/manifest.json`, 'utf-8'))
-		: { 'src/_boot_.ts': { file: 'src/_boot_.ts' } };
+		: {
+			'src/_boot_.ts': { file: 'src/_boot_.ts' },
+			'src/embed/init.ts': { file: 'src/embed/init.ts' },
+		};
 	const config = yaml.load(fs.readFileSync(path, 'utf-8')) as Source;
 
 	const url = tryCreateUrl(config.url);
@@ -256,6 +260,7 @@ export function loadConfig(): Config {
 			: null,
 		userAgent: `Misskey/${version} (${config.url})`,
 		clientEntry: clientManifest['src/_boot_.ts'],
+		clientEmbedEntry: clientManifest['src/embed/init.ts'],
 		clientManifestExists: clientManifestExists,
 		perChannelMaxNoteCacheCount: config.perChannelMaxNoteCacheCount ?? 1000,
 		perUserNotificationsMaxCount: config.perUserNotificationsMaxCount ?? 500,

diff --git a/packages/backend/src/server/web/ClientServerService.ts b/packages/backend/src/server/web/ClientServerService.ts
@@ -413,6 +413,17 @@ export class ClientServerService {
 			});
 		};
 
+		const renderEmbed404 = async (reply: FastifyReply) => {
+			reply.status(404);
+			const meta = await this.metaService.fetch();
+
+			return await reply.view('embed/404', {
+				instanceName: meta.name ?? 'Misskey',
+				icon: meta.iconUrl,
+				url: this.config.url,
+			});
+		};
+
 		// URL preview endpoint
 		fastify.get<{ Querystring: { url: string; lang: string; } }>('/url', (request, reply) => this.urlPreviewService.handle(request, reply));
 
@@ -549,6 +560,35 @@ export class ClientServerService {
 			}
 		});
 
+		// Note Embed
+		fastify.get<{ Params: { note: string; } }>('/notes/:note/embed', async (request, reply) => {
+			reply.removeHeader('X-Frame-Options');
+
+			const note = await this.notesRepository.findOneBy({
+				id: request.params.note,
+				visibility: In(['public', 'home']),
+			});
+
+			if (note) {
+				const _note = await this.noteEntityService.pack(note);
+				const profile = await this.userProfilesRepository.findOneByOrFail({ userId: note.userId });
+				const meta = await this.metaService.fetch();
+				reply.header('Cache-Control', 'public, max-age=15');
+				return await reply.view('embed/note', {
+					note: _note,
+					profile,
+					avatarUrl: _note.user.avatarUrl,
+					// TODO: Let locale changeable by instance setting
+					summary: getNoteSummary(_note),
+					instanceName: meta.name ?? 'Misskey',
+					icon: meta.iconUrl,
+					themeColor: meta.themeColor,
+				});
+			} else {
+				return await renderEmbed404(reply);
+			}
+		});
+
 		// Page
 		fastify.get<{ Params: { user: string; page: string; } }>('/@:user/pages/:page', async (request, reply) => {
 			const { username, host } = Acct.parse(request.params.user);

diff --git a/packages/backend/src/server/web/embed.css b/packages/backend/src/server/web/embed.css
@@ -0,0 +1,21 @@
+html,body {
+    max-width: 650px;
+}
+
+#splash {
+    max-width: 650px;
+    width: 100%;
+    height: 100%;
+}
+
+.sr-only {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border-width: 0;
+}
diff --git a/packages/backend/src/server/web/style.css b/packages/backend/src/server/web/style.css
@@ -17,7 +17,7 @@ html {
 	width: 100vw;
 	height: 100vh;
 	cursor: wait;
-	background-color: var(--bg);
+	background-color: var(--bg, #fff);
 	opacity: 1;
 	transition: opacity 0.5s ease;
 }

diff --git a/packages/backend/src/server/web/views/embed/404.pug b/packages/backend/src/server/web/views/embed/404.pug
@@ -0,0 +1,16 @@
+extends ./base
+
+block style 
+	style.
+
+block content
+	div#error
+		div
+			div#instance-info
+				a(href=url target='_blank')
+					img(src= icon || '/static-assets/splash.png')
+					span.sr-only(data-mi-i18n='aboutX' data-mi-i18n-ctx=`{"x": "${instanceName}"}`)
+
+			img.main(src='https://xn--931a.moe/assets/not-found.jpg')
+			h2(data-mi-i18n='notFound')
+			p(data-mi-i18n='notFoundDescription')
diff --git a/packages/backend/src/server/web/views/embed/base.pug b/packages/backend/src/server/web/views/embed/base.pug
@@ -0,0 +1,98 @@
+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
+
+	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='twitter:card' content='summary')
+		meta(property='og:site_name' content= instanceName || 'Misskey')
+		meta(name='viewport' content='width=device-width, initial-scale=1')
+		link(rel='icon' href= icon || '/favicon.ico')
+		link(rel='apple-touch-icon' href= icon || '/apple-touch-icon.png')
+		link(rel='manifest' href='/manifest.json')
+		link(rel='search' type='application/opensearchdescription+xml' title=(title || "Misskey") href=`${url}/opensearch.xml`)
+		link(rel='prefetch' href='https://xn--931a.moe/assets/info.jpg')
+		link(rel='prefetch' href='https://xn--931a.moe/assets/not-found.jpg')
+		link(rel='prefetch' href='https://xn--931a.moe/assets/error.jpg')
+		//- https://github.com/misskey-dev/misskey/issues/9842
+		link(rel='stylesheet' href='/assets/tabler-icons/tabler-icons.min.css?v2.12.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 desc
+			meta(name='description' content= desc || '✨🌎✨ A interplanetary communication platform ✨🚀✨')
+
+		block meta
+
+		block og
+			meta(property='og:title'       content= title || 'Misskey') 
+			meta(property='og:description' content= desc || '✨🌎✨ A interplanetary communication platform ✨🚀✨') 
+			meta(property='og:image'       content= img)
+
+		style
+			include ../../style.css
+			include ../../embed.css
+
+		block style
+
+		script.
+			var VERSION = "#{version}";
+			var CLIENT_ENTRY = "#{clientEntry.file}";
+			var EMBED = true;
+
+		script
+			include ../../boot.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>
+
+		div#container 
+			block content
diff --git a/packages/backend/src/server/web/views/embed/note.pug b/packages/backend/src/server/web/views/embed/note.pug
@@ -0,0 +1,126 @@
+extends ./base
+
+block vars
+	- const user = note.user;
+	- const title = user.name ? `${user.name} (@${user.username})` : `@${user.username}`;
+	- const url = `${config.url}/notes/${note.id}`;
+	- const userUrl = (user) => user.host ? `${config.url}/@${user.username}@${user.host}` : `${config.url}/@${user.username}`;
+	- const isRenote = note.renote && note.text == null && note.fileIds.length == 0 && note.poll == null;
+	- const displayUser = isRenote ? note.renote.user: note.user;
+	- const mainNote = isRenote ? note.renote : note;
+	- const displayMedia = mainNote.files.filter((item) => item.type.startsWith('image') || item.type.startsWith('video')).slice(0, 4);
+	- const noteEmoji = Object.entries(note.emojis || {}).map((e) => { return { name: e[0], url: e[1], host: note.user.host }; }).concat(Object.entries(note.renote?.emojis || {}).map((e) => { return { name: e[0], url: e[1], host: note.renote?.user.host }; }))
+
+block meta
+	if !user.host
+		link(rel='alternate' href=url type='application/activity+json')
+	if note.uri
+		link(rel='alternate' href=note.uri type='application/activity+json')
+	script(id='remote_custom_emojis' type='application/json') !{JSON.stringify(noteEmoji)}
+
+block content 
+	div#note
+
+		header
+			div.wrapper
+				if isRenote 
+					div#renote
+						a.avatar(href=userUrl(note.user) target="_blank" rel="noopener noreferrer")
+							img(src=note.user.avatarUrl)
+
+						i.ti.ti-repeat
+
+						span(data-mi-i18n='renotedBy' data-mi-i18n-ctx=`{"user": "${note.user.name || note.user.username}"}`)
+							a(href=userUrl(note.user) target="_blank" rel="noopener noreferrer")
+								b(data-mi-i18n-target='user')
+
+				div.author
+					a.avatar(href=userUrl(displayUser) target="_blank" rel="noopener noreferrer")
+						img(src=displayUser.avatarUrl)
+
+					div.user-info
+						a.user-name(href=userUrl(displayUser) target="_blank" rel="noopener noreferrer") #{displayUser.name || displayUser.username}
+						div.user-id @#{displayUser.username}
+							if displayUser.host 
+								span(style="opacity: .5;") @#{displayUser.host}
+
+			div#instance-info
+				a(href=config.url target='_blank')
+					img(src= icon || '/static-assets/splash.png')
+					span.sr-only(data-mi-i18n='aboutX' data-mi-i18n-ctx=`{"x": "${instanceName}"}`)
+
+		main
+			if (mainNote.cw != null)
+				div.cw-meta
+					span.mfm.cw-summary #{mainNote.cw}
+					button._button#cw-button
+						span#cw-info-show
+							b(data-mi-i18n="showMore")
+							span.cw-info-wrapper
+								if(mainNote.text)
+									span.cw-info(data-mi-i18n='_cw.chars' data-mi-i18n-ctx=`{"count": ${mainNote.text.length}}`)
+								if(mainNote.files && mainNote.files.length !== 0)
+									span.cw-info(data-mi-i18n='_cw.files' data-mi-i18n-ctx=`{"count": ${mainNote.files.length}}`)
+								if(mainNote.poll != null)
+									span.cw-info(data-mi-i18n='poll')
+						span.hide#cw-info-hide
+							b(data-mi-i18n="hide")
+				div#note-body.mfm.hide #{mainNote.text}
+
+			else
+				div#note-body.mfm #{mainNote.text}
+
+			if (!isRenote && note.renote)
+				div#quote
+					div.quote-avatar
+						a.avatar(href=userUrl(note.renote.user) target="_blank" rel="noopener noreferrer")
+							img(src=note.renote.user.avatarUrl)
+
+					div.quote-body
+						div.meta
+							div.author
+								a(href=userUrl(note.renote.user) target="_blank" rel="noopener noreferrer")
+									b #{note.renote.user.name || note.renote.user.username}
+								span @#{note.renote.user.username}
+								if note.renote.user.host 
+									span(style="opacity: .5;") @#{note.renote.user.host}
+
+							a.time(href=`${config.url}/notes/${note.renote.id}` target="_blank" rel="noopener noreferrer")
+								time.locale-string(datetime=note.renote.createdAt data-mi-date-mode="relative")
+
+						if (note.renote.cw != null)
+							div.cw-meta
+								span.mfm.cw-summary #{note.renote.cw}
+								button._button#quote-cw-button
+									span#quote-cw-info-show
+										b(data-mi-i18n="showMore")
+										span.cw-info-wrapper
+											if(mainNote.text)
+												span.cw-info(data-mi-i18n='_cw.chars' data-mi-i18n-ctx=`{"count": ${mainNote.text.length}}`)
+											if(mainNote.files && mainNote.files.length !== 0)
+												span.cw-info(data-mi-i18n='_cw.files' data-mi-i18n-ctx=`{"count": ${mainNote.files.length}}`)
+											if(mainNote.poll != null)
+												span.cw-info(data-mi-i18n='poll')
+									span.hide#quote-cw-info-hide
+										b(data-mi-i18n="hide")
+							div#quote-note-body.mfm.hide #{mainNote.text}
+						else
+							div#quote-note-body.mfm #{note.renote.text}		
+		footer 
+			div.info
+				a(href=`${config.url}/notes/${mainNote.id}`, target="_blank", rel="noopener noreferrer")
+					time.locale-string(datetime=mainNote.createdAt data-mi-date-mode="detailed")
+			div.reactions
+				each val, key in mainNote.reactions 
+					span.reaction-item
+						span.emoji #{key}
+						span.count #{val}
+
+			a._button.button(href=`${config.url}/notes/${mainNote.id}`, target="_blank", rel="noopener noreferrer")
+				i.ti.ti-arrow-back-up
+			a._button.button(href=`${config.url}/notes/${mainNote.id}`, target="_blank", rel="noopener noreferrer")
+				i.ti.ti-repeat
+			a._button.button(href=`${config.url}/notes/${mainNote.id}`, target="_blank", rel="noopener noreferrer")
+				i.ti.ti-plus
+			a._button.button(href=`${config.url}/notes/${mainNote.id}`, target="_blank", rel="noopener noreferrer")
+				i.ti.ti-dots
diff --git a/packages/frontend/package.json b/packages/frontend/package.json
@@ -47,6 +47,7 @@
 		"eventemitter3": "5.0.1",
 		"gsap": "3.12.4",
 		"idb-keyval": "6.2.1",
+		"iframe-resizer": "^4.3.6",
 		"insert-text-at-cursor": "0.3.0",
 		"is-file-animated": "1.0.2",
 		"json5": "2.2.3",
@@ -95,6 +96,7 @@
 		"@testing-library/vue": "8.0.1",
 		"@types/escape-regexp": "0.0.3",
 		"@types/estree": "1.0.5",
+    "@types/iframe-resizer": "^3.5.9",
 		"@types/matter-js": "0.19.5",
 		"@types/micromatch": "4.0.6",
 		"@types/node": "20.10.5",