Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: support embed memo with iframe (#912)
- Loading branch information
Showing
13 changed files
with
164 additions
and
13 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,60 @@ | ||
| 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; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,7 +1,11 @@ | ||
| 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; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,65 @@ | ||
| 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; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters