wip

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

@@ -807,6 +807,29 @@ export class ClientServerService {
 			});
 		});
 
+		fastify.get<{ Params: { note: string; } }>('/embed/notes/:note', async (request, reply) => {
+			reply.removeHeader('X-Frame-Options');
+
+			const note = await this.notesRepository.findOneBy({
+				id: request.params.note,
+			});
+
+			if (note == null) return;
+			if (note.visibility !== 'public') return;
+			if (note.userHost != null) return;
+
+			const _note = await this.noteEntityService.pack(note, null, { detail: true });
+
+			reply.header('Cache-Control', 'public, max-age=3600');
+			return await reply.view('base-embed', {
+				title: this.meta.name ?? 'Misskey',
+				...await this.generateCommonPugData(this.meta),
+				embedCtx: htmlSafeJsonStringify({
+					note: _note,
+				}),
+			});
+		});
+
 		fastify.get<{ Params: { clip: string; } }>('/embed/clips/:clip', async (request, reply) => {
 			reply.removeHeader('X-Frame-Options');
 

packages/frontend-embed/src/pages/note.vue

@@ -5,8 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <template>
 <div :class="$style.noteEmbedRoot">
-	<EmLoading v-if="loading"/>
+	<EmNoteDetailed v-if="note" :note="note"/>
-	<EmNoteDetailed v-else-if="note" :note="note"/>
 	<XNotFound v-else/>
 </div>
 </template>
@@ -24,20 +23,12 @@ const props = defineProps<{
 }>();
 
 const note = ref<Misskey.entities.Note | null>(null);
-const loading = ref(true);
 
-// TODO: クライアント側でAPIを叩くのは二度手間なので予めHTMLに埋め込んでおく
+const embedCtxEl = document.getElementById('misskey_embedCtx');
-misskeyApi('notes/show', {
+const embedCtx = (embedCtxEl && embedCtxEl.textContent) ? JSON.parse(embedCtxEl.textContent) : null;
+// NOTE: devモードのときしか embedCtx が null になることは無い
+note.value = embedCtx != null ? embedCtx.note : await misskeyApi('notes/show', {
 	noteId: props.noteId,
-}).then(res => {
-	// リモートのノートは埋め込ませない
-	if (res.url == null && res.uri == null) {
-		note.value = res;
-	}
-	loading.value = false;
-}).catch(err => {
-	console.error(err);
-	loading.value = false;
 });
 </script>