From 2d85f66f830c10df3bc410d409925300602274f1 Mon Sep 17 00:00:00 2001 From: myjeong19 Date: Tue, 25 Mar 2025 06:34:41 +0900 Subject: [PATCH] feat. Add Tweet Embed Component --- packages/core/src/lib/components/index.ts | 3 + packages/core/src/lib/components/tweet.tsx | 16 ++ packages/core/src/lib/index.css | 14 ++ packages/core/src/lib/types.ts | 11 + packages/story/src/stories/tweet/tweet.json | 222 ++++++++++++++++++ .../story/src/stories/tweet/tweet.stories.tsx | 20 ++ 6 files changed, 286 insertions(+) create mode 100644 packages/core/src/lib/components/tweet.tsx create mode 100644 packages/story/src/stories/tweet/tweet.json create mode 100644 packages/story/src/stories/tweet/tweet.stories.tsx diff --git a/packages/core/src/lib/components/index.ts b/packages/core/src/lib/components/index.ts index 8d0c420..1fad740 100644 --- a/packages/core/src/lib/components/index.ts +++ b/packages/core/src/lib/components/index.ts @@ -16,6 +16,7 @@ import Todo from "./todo"; import Table from "./table"; import TableRow from "./table-row"; import Fallback from "./fallback"; +import Tweet from "./tweet"; export { Headings, @@ -35,6 +36,7 @@ export { Todo, Table, Fallback, + Tweet, }; export default { @@ -58,4 +60,5 @@ export default { table: Table, table_row: TableRow, fallback: Fallback, + notionpresso_tweet: Tweet, }; diff --git a/packages/core/src/lib/components/tweet.tsx b/packages/core/src/lib/components/tweet.tsx new file mode 100644 index 0000000..e9a2356 --- /dev/null +++ b/packages/core/src/lib/components/tweet.tsx @@ -0,0 +1,16 @@ +import type { NotionpressoTweetArgs } from "../types"; + +const Tweet: React.FC = ({ + notionpresso_tweet: { html }, +}) => { + return ( +
+
+
+ ); +}; + +export default Tweet; diff --git a/packages/core/src/lib/index.css b/packages/core/src/lib/index.css index ac016bd..eb1d208 100644 --- a/packages/core/src/lib/index.css +++ b/packages/core/src/lib/index.css @@ -1328,3 +1328,17 @@ margin-right: 6px; font-family: monaco, "Andale Mono", "Ubuntu Mono", monospace; } + +.notionpresso-tweet { + display: flex; + justify-content: center; + align-items: center; + width: 100%; + height: 100%; +} + +.notion-embed-tweet-content { + width: fit-content; + height: fit-content; + border: none; +} diff --git a/packages/core/src/lib/types.ts b/packages/core/src/lib/types.ts index 7491ca0..df2d983 100644 --- a/packages/core/src/lib/types.ts +++ b/packages/core/src/lib/types.ts @@ -213,3 +213,14 @@ export type BookmarkArgs = { export type SyncedBlockArgs = { type: "synced_block"; }; + +export type NotionpressoTweetArgs = { + type: "notionpresso_tweet"; + notionpresso_tweet: { + url: string; + iframe_url: string; + source: string; + tweet_id: string; + html: string; + }; +}; diff --git a/packages/story/src/stories/tweet/tweet.json b/packages/story/src/stories/tweet/tweet.json new file mode 100644 index 0000000..cf97461 --- /dev/null +++ b/packages/story/src/stories/tweet/tweet.json @@ -0,0 +1,222 @@ +{ + "object": "page", + "id": "1999c395-c2fb-809a-957e-f8556877bd8c", + "created_time": "2025-02-13T12:28:00.000Z", + "last_edited_time": "2025-03-24T21:18:00.000Z", + "created_by": { + "object": "user", + "id": "52c52d67-2221-4853-bae4-9687a30c395a" + }, + "last_edited_by": { + "object": "user", + "id": "52c52d67-2221-4853-bae4-9687a30c395a" + }, + "cover": null, + "icon": null, + "parent": { + "type": "workspace", + "workspace": true + }, + "archived": false, + "in_trash": false, + "properties": { + "title": { + "id": "title", + "type": "title", + "title": [ + { + "type": "text", + "text": { + "content": "Outer", + "link": null + }, + "annotations": { + "bold": false, + "italic": false, + "strikethrough": false, + "underline": false, + "code": false, + "color": "default" + }, + "plain_text": "Outer", + "href": null + } + ] + } + }, + "url": "https://www.notion.so/Outer-1999c395c2fb809a957ef8556877bd8c", + "public_url": null, + "request_id": "be0efcfb-9011-4c8a-a7f8-865fae6a94f2", + "blocks": [ + { + "object": "block", + "id": "1c09c395-c2fb-807a-8274-d0616599e043", + "parent": { + "type": "page_id", + "page_id": "1999c395-c2fb-809a-957e-f8556877bd8c" + }, + "created_time": "2025-03-24T14:50:00.000Z", + "last_edited_time": "2025-03-24T14:50:00.000Z", + "created_by": { + "object": "user", + "id": "52c52d67-2221-4853-bae4-9687a30c395a" + }, + "last_edited_by": { + "object": "user", + "id": "52c52d67-2221-4853-bae4-9687a30c395a" + }, + "has_children": false, + "archived": false, + "in_trash": false, + "type": "paragraph", + "paragraph": { + "rich_text": [], + "color": "default" + }, + "blocks": [] + }, + { + "object": "block", + "id": "1c09c395-c2fb-80f5-8219-f1a84e5aa007", + "parent": { + "type": "page_id", + "page_id": "1999c395-c2fb-809a-957e-f8556877bd8c" + }, + "created_time": "2025-03-24T21:18:00.000Z", + "last_edited_time": "2025-03-24T21:18:00.000Z", + "created_by": { + "object": "user", + "id": "52c52d67-2221-4853-bae4-9687a30c395a" + }, + "last_edited_by": { + "object": "user", + "id": "52c52d67-2221-4853-bae4-9687a30c395a" + }, + "has_children": false, + "archived": false, + "in_trash": false, + "type": "paragraph", + "paragraph": { + "rich_text": [], + "color": "default" + }, + "blocks": [] + }, + { + "object": "block", + "id": "1c09c395-c2fb-80f0-bf45-dacf84551519", + "parent": { + "type": "page_id", + "page_id": "1999c395-c2fb-809a-957e-f8556877bd8c" + }, + "created_time": "2025-03-24T21:18:00.000Z", + "last_edited_time": "2025-03-24T21:18:00.000Z", + "created_by": { + "object": "user", + "id": "52c52d67-2221-4853-bae4-9687a30c395a" + }, + "last_edited_by": { + "object": "user", + "id": "52c52d67-2221-4853-bae4-9687a30c395a" + }, + "has_children": false, + "archived": false, + "in_trash": false, + "type": "notionpresso_tweet", + "notionpresso_tweet": { + "url": "https://x.com/myjeong19/status/1898282942738448763", + "iframe_url": "https://platform.twitter.com/embed/Tweet.html?id=1898282942738448763&dnt=true&embedId=twitter-widget-0&frame=false&hideCard=false&hideThread=false&lang=en&theme=light&siteScreenName=NotionpressoHQ&widgetsVersion=2b959255e8896%3A1673658205745&width=100%25&features=eyJ0ZndfdGltZWxpbmVfbGlzdCI6eyJidWNrZXQiOltdLCJ2ZXJzaW9uIjpudWxsfSwidGZ3X2ZvbGxvd2VyX2NvdW50X3N1bnNldCI6eyJidWNrZXQiOnRydWUsInZlcnNpb24iOm51bGx9LCJ0ZndfdHdlZXRfZWRpdF9iYWNrZW5kIjp7ImJ1Y2tldCI6Im9uIiwidmVyc2lvbiI6bnVsbH0sInRmd19yZWZzcmNfc2Vzc2lvbiI6eyJidWNrZXQiOiJvbiIsInZlcnNpb24iOm51bGx9LCJ0ZndfZm9zbnJfc29mdF9pbnRlcnZlbnRpb25zX2VuYWJsZWQiOnsiYnVja2V0Ijoib24iLCJ2ZXJzaW9uIjpudWxsfSwidGZ3X21peGVkX21lZGlhXzE1ODk3Ijp7ImJ1Y2tldCI6InRyZWF0bWVudCIsInZlcnNpb24iOm51bGx9LCJ0ZndfdXNlX3Byb2ZpbGVfaW1hZ2Vfc2hhcGVfZW5hYmxlZCI6eyJidWNrZXQiOiJvbiIsInZlcnNpb24iOm51bGx9LCJ0ZndfdmlkZW9faGxzX2R5bmFtaWNfbWFuaWZlc3RzXzE1MDgyIjp7ImJ1Y2tldCI6InRydWVfYml0cmF0ZSIsInZlcnNpb24iOm51bGx9LCJ0ZndfbGVnYWN5X3RpbWVsaW5lX3N1bnNldCI6eyJidWNrZXQiOnRydWUsInZlcnNpb24iOm51bGx9LCJ0ZndfdHdlZXRfZWRpdF9mcm9udGVuZCI6eyJidWNrZXQiOiJvbiIsInZlcnNpb24iOm51bGx9fQ", + "source": "twitter", + "tweet_id": "1898282942738448763", + "html": "\n
\n \n
\n \n\n", + "theme": "auto" + }, + "blocks": [] + }, + { + "object": "block", + "id": "1999c395-c2fb-80c6-89d5-d70674c4018b", + "parent": { + "type": "page_id", + "page_id": "1999c395-c2fb-809a-957e-f8556877bd8c" + }, + "created_time": "2025-02-13T12:28:00.000Z", + "last_edited_time": "2025-02-13T12:28:00.000Z", + "created_by": { + "object": "user", + "id": "52c52d67-2221-4853-bae4-9687a30c395a" + }, + "last_edited_by": { + "object": "user", + "id": "52c52d67-2221-4853-bae4-9687a30c395a" + }, + "has_children": false, + "archived": false, + "in_trash": false, + "type": "paragraph", + "paragraph": { + "rich_text": [], + "color": "default" + }, + "blocks": [] + }, + { + "object": "block", + "id": "1c09c395-c2fb-8091-a690-db90d8283e97", + "parent": { + "type": "page_id", + "page_id": "1999c395-c2fb-809a-957e-f8556877bd8c" + }, + "created_time": "2025-03-24T14:17:00.000Z", + "last_edited_time": "2025-03-24T14:18:00.000Z", + "created_by": { + "object": "user", + "id": "52c52d67-2221-4853-bae4-9687a30c395a" + }, + "last_edited_by": { + "object": "user", + "id": "52c52d67-2221-4853-bae4-9687a30c395a" + }, + "has_children": false, + "archived": false, + "in_trash": false, + "type": "notionpresso_tweet", + "notionpresso_tweet": { + "url": "https://x.com/myjeong19/status/1854475122901700921", + "iframe_url": "https://platform.twitter.com/embed/Tweet.html?id=1854475122901700921&dnt=true&embedId=twitter-widget-0&frame=false&hideCard=false&hideThread=false&lang=en&theme=light&siteScreenName=NotionpressoHQ&widgetsVersion=2b959255e8896%3A1673658205745&width=100%25&features=eyJ0ZndfdGltZWxpbmVfbGlzdCI6eyJidWNrZXQiOltdLCJ2ZXJzaW9uIjpudWxsfSwidGZ3X2ZvbGxvd2VyX2NvdW50X3N1bnNldCI6eyJidWNrZXQiOnRydWUsInZlcnNpb24iOm51bGx9LCJ0ZndfdHdlZXRfZWRpdF9iYWNrZW5kIjp7ImJ1Y2tldCI6Im9uIiwidmVyc2lvbiI6bnVsbH0sInRmd19yZWZzcmNfc2Vzc2lvbiI6eyJidWNrZXQiOiJvbiIsInZlcnNpb24iOm51bGx9LCJ0ZndfZm9zbnJfc29mdF9pbnRlcnZlbnRpb25zX2VuYWJsZWQiOnsiYnVja2V0Ijoib24iLCJ2ZXJzaW9uIjpudWxsfSwidGZ3X21peGVkX21lZGlhXzE1ODk3Ijp7ImJ1Y2tldCI6InRyZWF0bWVudCIsInZlcnNpb24iOm51bGx9LCJ0ZndfdXNlX3Byb2ZpbGVfaW1hZ2Vfc2hhcGVfZW5hYmxlZCI6eyJidWNrZXQiOiJvbiIsInZlcnNpb24iOm51bGx9LCJ0ZndfdmlkZW9faGxzX2R5bmFtaWNfbWFuaWZlc3RzXzE1MDgyIjp7ImJ1Y2tldCI6InRydWVfYml0cmF0ZSIsInZlcnNpb24iOm51bGx9LCJ0ZndfbGVnYWN5X3RpbWVsaW5lX3N1bnNldCI6eyJidWNrZXQiOnRydWUsInZlcnNpb24iOm51bGx9LCJ0ZndfdHdlZXRfZWRpdF9mcm9udGVuZCI6eyJidWNrZXQiOiJvbiIsInZlcnNpb24iOm51bGx9fQ", + "source": "twitter", + "tweet_id": "1854475122901700921", + "html": "\n
\n \n
\n \n\n", + "theme": "auto" + }, + "blocks": [] + }, + { + "object": "block", + "id": "1c09c395-c2fb-80d8-a370-c2e250f28823", + "parent": { + "type": "page_id", + "page_id": "1999c395-c2fb-809a-957e-f8556877bd8c" + }, + "created_time": "2025-03-24T18:09:00.000Z", + "last_edited_time": "2025-03-24T18:09:00.000Z", + "created_by": { + "object": "user", + "id": "52c52d67-2221-4853-bae4-9687a30c395a" + }, + "last_edited_by": { + "object": "user", + "id": "52c52d67-2221-4853-bae4-9687a30c395a" + }, + "has_children": false, + "archived": false, + "in_trash": false, + "type": "paragraph", + "paragraph": { + "rich_text": [], + "color": "default" + }, + "blocks": [] + } + ] +} diff --git a/packages/story/src/stories/tweet/tweet.stories.tsx b/packages/story/src/stories/tweet/tweet.stories.tsx new file mode 100644 index 0000000..0bb8718 --- /dev/null +++ b/packages/story/src/stories/tweet/tweet.stories.tsx @@ -0,0 +1,20 @@ +import type { Meta, StoryObj } from "@storybook/react"; +import Component from "../../lib/Notion"; +import json from "./tweet.json"; + +const blocks = json.blocks as any; + +const meta: Meta = { + title: "Blocks/Tweet", + component: Component, +}; + +export default meta; +type Story = StoryObj; + +export const Tweet: Story = { + args: { + title: "Tweet", + blocks: blocks, + }, +};