show embed dialog

locales/en-US.yml

@@ -1114,6 +1114,8 @@ isPatron: "Calckey Patron"
 reactionPickerSkinTone: "Preferred emoji skin tone"
 enableServerMachineStats: "Enable server hardware statistics"
 enableIdenticonGeneration: "Enable Identicon generation"
+embed: "Embed"
+embedDescription: "Embed this post on your website by copying the code below:"
 
 _sensitiveMediaDetection:
   description: "Reduces the effort of server moderation through automatically recognizing

packages/backend/assets/embed.js

@@ -55,7 +55,7 @@
 
     });
 
-    [].forEach.call(document.querySelectorAll('iframe.mastodon-embed'), function (iframe) {
+    [].forEach.call(document.querySelectorAll('iframe.embed'), function (iframe) {
       // select unique id for each iframe
       let id = 0;
       let failCount = 0;

packages/client/src/components/MkEmbedDialog.vue

@@ -0,0 +1,85 @@
+<template>
+	<MkModal
+		ref="modal"
+		:z-priority="'middle'"
+		@click="$refs.modal.close()"
+		@closed="$emit('closed')"
+	>
+		<div :class="$style.root">
+			<div :class="$style.title">
+				<p>{{ i18n.ts.embedDescription }}</p>
+				<MkCode :code="codeblock" lang="html" :inline="false"/>
+				<br/>
+				<MkButton
+					:class="$style.gotIt"
+					primary
+					full
+					@click="copyToClipboard(codeblock); $refs.modal.close()"
+					>{{ i18n.ts.copyContent }}</MkButton
+				>
+				<MkButton
+					:class="$style.gotIt"
+					primary
+					full
+					@click="$refs.modal.close()"
+					>{{ i18n.ts.gotIt }}</MkButton
+				>
+			</div>
+		</div>
+	</MkModal>
+</template>
+
+<script lang="ts" setup>
+import { shallowRef } from "vue";
+import MkModal from "@/components/MkModal.vue";
+import MkButton from "@/components/MkButton.vue";
+import MkCode from "@/components/MkCode.vue";
+import { i18n } from "@/i18n";
+import { host } from "@/config";
+import copyToClipboard from "@/scripts/copy-to-clipboard";
+
+const modal = shallowRef<InstanceType<typeof MkModal>>();
+
+const props = withDefaults(
+	defineProps<{
+		id: string;
+	}>(),
+	{
+		id: "No ID provided!",
+	}
+);
+
+const codeblock = `<iframe src="https://${host}/notes/${props.id}/embed" class="embed" style="max-width: 100%; border: 0" width="400" allowfullscreen="allowfullscreen"></iframe><script src="https://${host}/static-assets/embed.js" async="async"></script>`
+</script>
+
+<style lang="scss" module>
+.root {
+	margin: auto;
+	position: relative;
+	padding: 32px;
+	min-width: 320px;
+	max-width: 480px;
+	box-sizing: border-box;
+	text-align: center;
+	background: var(--panel);
+	border-radius: var(--radius);
+}
+
+.title {
+	font-weight: bold;
+}
+
+.version {
+	margin: 1em 0;
+}
+
+.gotIt {
+	margin: 8px 0 0 0;
+}
+
+.releaseNotes {
+	> img {
+		border-radius: 10px;
+	}
+}
+</style>

packages/client/src/os.ts

@@ -926,6 +926,22 @@ export function post(props: Record<string, any> = {}) {
 	});
 }
 
+export function showEmbedDialog(props: {id: string}) {
+	return new Promise(() => {
+		popup(
+			defineAsyncComponent({
+				loader: () => import("@/components/MkEmbedDialog.vue"),
+				loadingComponent: MkWaitingDialog,
+			}),
+			{
+				...props,
+			},
+			{},
+			"closed",
+		);
+	});
+}
+
 export const deckGlobalEvents = new EventEmitter();
 
 /*

packages/client/src/scripts/get-note-menu.ts

@@ -476,6 +476,13 @@ export function getNoteMenu(props: {
 						action: share,
 				  }
 				: undefined,
+			{
+				icon: "ph-code ph-bold ph-lg",
+				text: i18n.ts.embed,
+				action: os.showEmbedDialog({
+					id: appearNote.id,
+				}),
+			},
 		].filter((x) => x !== undefined);
 	}