feat: support embed memo with iframe (#912)

web/src/components/EmbedMemoDialog.tsx

+import React from "react";
+import Icon from "./Icon";
+import { generateDialog } from "./Dialog";
+import copy from "copy-to-clipboard";
+import toastHelper from "./Toast";
+
+interface Props extends DialogProps {
+  memoId: MemoId;
+}
+
+const EmbedMemoDialog: React.FC<Props> = (props: Props) => {
+  const { memoId, destroy } = props;
+
+  const memoEmbeddedCode = () => {
+    return `<iframe style="width:100%;height:auto;min-width:256px;" src="${window.location.origin}/m/${memoId}/embed" frameBorder="0"></iframe>`;
+  };
+
+  const handleCopyCode = () => {
+    copy(memoEmbeddedCode());
+    toastHelper.success("Succeed to copy code to clipboard.");
+  };
+
+  return (
+    <>
+      <div className="dialog-header-container">
+        <p className="title-text">Embed Memo</p>
+        <button className="btn close-btn" onClick={() => destroy()}>
+          <Icon.X />
+        </button>
+      </div>
+      <div className="dialog-content-container !w-80">
+        <p className="text-base leading-6 mb-2">Copy and paste the below codes into your blog or website.</p>
+        <pre className="w-full font-mono text-sm p-3 border rounded-lg">
+          <code className="w-full break-all whitespace-pre-wrap">{memoEmbeddedCode()}</code>
+        </pre>
+        <p className="w-full text-sm leading-6 flex flex-row justify-between items-center mt-2">
+          * Only the public memo supports.
+          <span className="btn-primary" onClick={handleCopyCode}>
+            Copy
+          </span>
+        </p>
+      </div>
+    </>
+  );
+};
+
+function showEmbedMemoDialog(memoId: MemoId) {
+  generateDialog(
+    {
+      className: "embed-memo-dialog",
+      dialogName: "embed-memo-dialog",
+    },
+    EmbedMemoDialog,
+    {
+      memoId,
+    }
+  );
+}
+
+export default showEmbedMemoDialog;

web/src/components/Memo.tsx

@@ -10,6 +10,7 @@ import MemoContent from "./MemoContent";
 import MemoResources from "./MemoResources";
 import showShareMemo from "./ShareMemoDialog";
 import showPreviewImageDialog from "./PreviewImageDialog";
+import showEmbedMemoDialog from "./EmbedMemoDialog";
 import showChangeMemoCreatedTsDialog from "./ChangeMemoCreatedTsDialog";
 import "../less/memo.less";
 
@@ -54,6 +55,10 @@ const Memo: React.FC<Props> = (props: Props) => {
     navigate(`/m/${memo.id}`);
   };
 
+  const handleShowEmbedMemoDialog = () => {
+    showEmbedMemoDialog(memo.id);
+  };
+
   const handleCopyContent = () => {
     copy(memo.content);
     toastHelper.success(t("message.succeed-copy-content"));
@@ -214,6 +219,9 @@ const Memo: React.FC<Props> = (props: Props) => {
                 <span className="btn" onClick={handleViewMemoDetailPage}>
                   {t("memo.view-detail")}
                 </span>
+                <span className="btn" onClick={handleShowEmbedMemoDialog}>
+                  Embed memo
+                </span>
                 <span className="btn archive-btn" onClick={handleArchiveMemoClick}>
                   {t("common.archive")}
                 </span>

web/src/components/ShareMemoDialog.tsx

@@ -99,7 +99,7 @@ const ShareMemoDialog: React.FC<Props> = (props: Props) => {
 
   const handleCopyLinkBtnClick = () => {
     copy(`${window.location.origin}/m/${memo.id}`);
-    toastHelper.success(t("message.succeed-copy-content"));
+    toastHelper.success("Succeed to copy memo link to clipboard.");
   };
 
   const memoVisibilityOptionSelectorItems = VISIBILITY_SELECTOR_ITEMS.map((item) => {

web/src/css/global.css

 html,
 body {
-  @apply text-base dark:bg-zinc-800;
+  @apply text-base w-full h-full dark:bg-zinc-800;
   font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Noto Sans", "Noto Sans CJK SC", "Microsoft YaHei UI", "Microsoft YaHei",
     "WenQuanYi Micro Hei", sans-serif, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
     "Noto Color Emoji";
 }
+
+#root {
+  @apply w-full h-full;
+}

web/src/less/auth.less

 .page-wrapper.auth {
-  @apply flex flex-row justify-center items-center w-full h-screen bg-zinc-100 dark:bg-zinc-800;
+  @apply flex flex-row justify-center items-center w-full h-full bg-zinc-100 dark:bg-zinc-800;
 
   > .page-container {
     @apply w-80 max-w-full h-full py-4 flex flex-col justify-start items-center ml-calc;

web/src/less/explore.less

 .page-wrapper.explore {
-  @apply relative top-0 w-full h-screen overflow-y-auto overflow-x-hidden bg-zinc-100 dark:bg-zinc-800;
+  @apply relative top-0 w-full h-full overflow-y-auto overflow-x-hidden bg-zinc-100 dark:bg-zinc-800;
 
   > .page-container {
-    @apply relative w-full min-h-screen mx-auto flex flex-col justify-start items-center pb-8;
+    @apply relative w-full min-h-full mx-auto flex flex-col justify-start items-center pb-8;
 
     > .page-header {
       @apply sticky top-0 z-10 max-w-2xl w-full min-h-full flex flex-row justify-between backdrop-blur-sm items-center px-4 sm:pr-6 pt-6 mb-2 ml-calc;

web/src/less/home.less

 .page-wrapper.home {
-  @apply relative top-0 w-full h-screen overflow-y-auto overflow-x-hidden bg-zinc-100 dark:bg-zinc-800;
+  @apply relative top-0 w-full h-full overflow-y-auto overflow-x-hidden bg-zinc-100 dark:bg-zinc-800;
 
   > .banner-wrapper {
     @apply w-full flex flex-col justify-start items-center;
   }
 
   > .page-container {
-    @apply relative w-full min-h-screen mx-auto flex flex-row justify-start sm:justify-center items-start;
+    @apply relative w-full min-h-full mx-auto flex flex-row justify-start sm:justify-center items-start;
 
     > .sidebar-wrapper {
       @apply flex-shrink-0 ml-calc;

web/src/less/memo-detail.less

 .page-wrapper.memo-detail {
-  @apply relative top-0 w-full h-screen overflow-y-auto overflow-x-hidden bg-zinc-100 dark:bg-zinc-800;
+  @apply relative top-0 w-full h-full overflow-y-auto overflow-x-hidden bg-zinc-100 dark:bg-zinc-800;
 
   > .page-container {
-    @apply relative w-full min-h-screen mx-auto flex flex-col justify-start items-center pb-8;
+    @apply relative w-full min-h-full mx-auto flex flex-col justify-start items-center pb-8;
 
     > .page-header {
       @apply sticky top-0 z-10 max-w-2xl w-full min-h-full flex flex-row justify-between items-center px-4 pt-6 mb-2 bg-zinc-100 dark:bg-zinc-800 ml-calc;

web/src/less/memo.less

@@ -54,7 +54,7 @@
         @apply hidden flex-col justify-start items-center absolute top-2 -right-4 flex-nowrap hover:flex p-3;
 
         > .more-action-btns-container {
-          @apply w-28 h-auto p-1 z-1 whitespace-nowrap rounded-lg bg-white dark:bg-zinc-700;
+          @apply w-auto h-auto p-1 z-1 whitespace-nowrap rounded-lg bg-white dark:bg-zinc-700;
           box-shadow: 0 0 8px 0 rgb(0 0 0 / 20%);
 
           > .btns-container {

web/src/less/siderbar.less

 .sidebar-wrapper {
-  @apply fixed sm:sticky top-0 z-30 sm:z-0 -translate-x-64 sm:translate-x-0 sm:flex flex-col justify-start items-start w-64 h-screen py-4 pl-2 bg-white dark:bg-zinc-800 sm:bg-transparent overflow-x-hidden overflow-y-auto transition-transform duration-300 overscroll-contain hide-scrollbar;
+  @apply fixed sm:sticky top-0 z-30 sm:z-0 -translate-x-64 sm:translate-x-0 sm:flex flex-col justify-start items-start w-64 h-full py-4 pl-2 bg-white dark:bg-zinc-800 sm:bg-transparent overflow-x-hidden overflow-y-auto transition-transform duration-300 overscroll-contain hide-scrollbar;
 
   &.show {
     @apply translate-x-0 shadow-2xl sm:shadow-none;
@@ -19,7 +19,7 @@
 }
 
 .mask {
-  @apply fixed top-0 left-0 w-screen h-screen bg-black opacity-0 transition-opacity duration-300 pointer-events-none z-20 sm:hidden;
+  @apply fixed top-0 left-0 w-full h-full bg-black opacity-0 transition-opacity duration-300 pointer-events-none z-20 sm:hidden;
 
   &.show {
     @apply opacity-60 pointer-events-auto;

web/src/pages/EmbedMemo.tsx

+import dayjs from "dayjs";
+import { useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { useParams } from "react-router-dom";
+import { UNKNOWN_ID } from "../helpers/consts";
+import { useMemoStore } from "../store/module";
+import useLoading from "../hooks/useLoading";
+import toastHelper from "../components/Toast";
+import MemoContent from "../components/MemoContent";
+import MemoResources from "../components/MemoResources";
+
+interface State {
+  memo: Memo;
+}
+
+const EmbedMemo = () => {
+  const { i18n } = useTranslation();
+  const params = useParams();
+  const memoStore = useMemoStore();
+  const [state, setState] = useState<State>({
+    memo: {
+      id: UNKNOWN_ID,
+    } as Memo,
+  });
+  const loadingState = useLoading();
+
+  useEffect(() => {
+    const memoId = Number(params.memoId);
+    if (memoId && !isNaN(memoId)) {
+      memoStore
+        .fetchMemoById(memoId)
+        .then((memo) => {
+          setState({
+            memo,
+          });
+          loadingState.setFinish();
+        })
+        .catch((error) => {
+          console.error(error);
+          toastHelper.error(error.response.data.message);
+        });
+    }
+  }, []);
+
+  return (
+    <section className="w-full h-full flex flex-row justify-start items-start p-2">
+      {!loadingState.isLoading && (
+        <main className="w-full max-w-lg mx-auto my-auto shadow px-4 py-4 rounded-lg">
+          <div className="w-full flex flex-col justify-start items-start">
+            <div className="w-full mb-2 flex flex-row justify-start items-center text-sm text-gray-400 dark:text-gray-300">
+              <span>{dayjs(state.memo.displayTs).locale(i18n.language).format("YYYY/MM/DD HH:mm:ss")}</span>
+              <a className="ml-2 hover:underline hover:text-green-600" href={`/u/${state.memo.creator.id}`}>
+                @{state.memo.creator.nickname || state.memo.creator.username}
+              </a>
+            </div>
+            <MemoContent className="memo-content" content={state.memo.content} onMemoContentClick={() => undefined} />
+            <MemoResources resourceList={state.memo.resourceList} />
+          </div>
+        </main>
+      )}
+    </section>
+  );
+};
+
+export default EmbedMemo;

web/src/pages/Loading.tsx

@@ -2,7 +2,7 @@ import Icon from "../components/Icon";
 
 function Loading() {
   return (
-    <div className="flex flex-row justify-center items-center w-full h-screen bg-zinc-100 dark:bg-zinc-800">
+    <div className="flex flex-row justify-center items-center w-full h-full bg-zinc-100 dark:bg-zinc-800">
       <div className="w-80 max-w-full h-full py-4 flex flex-col justify-center items-center">
         <Icon.Loader className="animate-spin dark:text-gray-200" />
       </div>

web/src/router/index.tsx

@@ -8,6 +8,7 @@ const Auth = lazy(() => import("../pages/Auth"));
 const Explore = lazy(() => import("../pages/Explore"));
 const Home = lazy(() => import("../pages/Home"));
 const MemoDetail = lazy(() => import("../pages/MemoDetail"));
+const EmbedMemo = lazy(() => import("../pages/EmbedMemo"));
 
 const router = createBrowserRouter([
   {
@@ -96,6 +97,19 @@ const router = createBrowserRouter([
       return null;
     },
   },
+  {
+    path: "/m/:memoId/embed",
+    element: <EmbedMemo />,
+    loader: async () => {
+      try {
+        await initialGlobalState();
+        await initialUserState();
+      } catch (error) {
+        // do nth
+      }
+      return null;
+    },
+  },
 ]);
 
 export default router;