resolved cozy-blog/issue#63 북마크 컴포넌트 개선 (#32)

* bookmark 레이아웃 수정 * storybook 개선 * publish * asdf
notionpresso · Mar 21, 2023 · 7f39e72 · 7f39e72
1 parent 297d08e
commit 7f39e72
Show file tree

Hide file tree

Showing 5 changed files with 65 additions and 16 deletions.
diff --git a/packages/svelte-notion-page/package.json b/packages/svelte-notion-page/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@cozy-blog/svelte-notion-page",
-	"version": "0.0.6",
+	"version": "0.0.7",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "svelte-kit sync && svelte-package",

diff --git a/packages/svelte-notion-page/src/lib/default-notion-components/Bookmark.svelte b/packages/svelte-notion-page/src/lib/default-notion-components/Bookmark.svelte
@@ -5,27 +5,42 @@
 	const {
 		bookmark: { url, caption }
 	} = props;
-	export let getMeta: (url: string) => {
-		title: string;
-		description: string;
-		image: string;
-		favicon: string;
-	} = (url: string) => {
+	export let getMeta: (url: string) => Promise<{
+		title?: string;
+		description?: string;
+		image?: string;
+		favicon?: string;
+	}> = async (url: string) => {
 		return {
 			title: 'You must replace this component with something that have own getMeta method',
 			description: '',
 			image: '',
 			favicon: ''
 		};
 	};
-	$: ({ title, description, image, favicon } = getMeta(url));
+	let { title, description, image, favicon } = {
+		title: '',
+		description: '',
+		image: '',
+		favicon: ''
+	};
+	$: {
+		getMeta(url).then((result) => {
+			title = result.title || '';
+			description = result.description || '';
+			image = result.image || '';
+			favicon = result.favicon || '';
+		});
+	}
 </script>
 
 <div class="notion-block notion-bookmark">
 	<a target="_blank" rel="noopener noreferrer" href={url} class="notion-bookmark-content">
 		<div class="notion-bookmark-details">
 			<h3 class="notion-bookmark-title">{title}</h3>
-			<p class="notion-bookmark-description">{description}</p>
+			{#if description}
+				<p class="notion-bookmark-description">{description}</p>
+			{/if}
 			<div class="notion-bookmark-link">
 				<div class="notion-bookmark-link-icon">
 					{#if favicon}
@@ -35,11 +50,11 @@
 				<p class="notion-bookmark-link-text">{url}</p>
 			</div>
 		</div>
-		<div class="notion-bookmark-image">
-			{#if image}
+		{#if image}
+			<div class="notion-bookmark-image">
 				<img src={image} alt="thumbnail" />
-			{/if}
-		</div>
+			</div>
+		{/if}
 	</a>
 	{#if caption.length !== 0}
 		<div class="notion-asset-caption">
@@ -58,14 +73,16 @@
 	}
 
 	.notion-bookmark-content {
-		height: 106px;
 		cursor: pointer;
 		display: flex;
 		overflow: hidden;
 		border: 1px solid var(--fg-color-1);
 		border-radius: 3px;
 		box-sizing: border-box;
 		user-select: none;
+		max-height: 106px;
+		min-height: 74px;
+
 		text-decoration: none;
 	}
 

diff --git a/packages/svelte-notion-page/src/stories/bookmark/BookMark.svelte b/packages/svelte-notion-page/src/stories/bookmark/BookMark.svelte
@@ -0,0 +1,23 @@
+<script lang="ts">
+	import Bookmark from '$lib/default-notion-components/Bookmark.svelte';
+	export let props: any;
+	async function getMeta(url: string) {
+		if (url.includes('naver.com')) {
+			return {
+				title: '네이버',
+				description: '네이버 메인에서 다양한 정보와 유용한 컨텐츠를 만나 보세요. 네이버 메인에서 다양한 정보와 유용한 컨텐츠를 만나 보세요. 네이버 메인에서 다양한 정보와 유용한 컨텐츠를 만나 보세요. 네이버 메인에서 다양한 정보와 유용한 컨텐츠를 만나 보세요. 네이버 메인에서 다양한 정보와 유용한 컨텐츠를 만나 보세요.',
+				favicon: 'https://www.naver.com/favicon.ico',
+				image: 'https://s.pstatic.net/static/www/mobile/edit/2016/0705/mobile_212852414260.png'
+			};
+		}
+
+		return {
+			title: 'You must replace this component with something that have own getMeta method',
+			description: '',
+			image: '',
+			favicon: ''
+		};
+	}
+</script>
+
+<Bookmark {props} {getMeta} />
diff --git a/packages/svelte-notion-page/src/stories/bookmark/Example.svelte b/packages/svelte-notion-page/src/stories/bookmark/Example.svelte
@@ -2,7 +2,16 @@
 	import { json } from './notion-export';
 	import type { Content } from '$lib/types.js';
 	import Notion from '$lib/components';
+	import { defaultComponents, NotionComponentProvider, notionComponentProviderContext } from '$lib';
+	import BookMark from './BookMark.svelte';
 	const content = json as unknown as Content;
+
+	notionComponentProviderContext.set(
+		new NotionComponentProvider({
+			...defaultComponents,
+			bookmark: BookMark
+		})
+	);
 </script>
 
 <Notion>

diff --git a/packages/svelte-notion-page/src/stories/bookmark/notion-export.ts b/packages/svelte-notion-page/src/stories/bookmark/notion-export.ts
@@ -328,7 +328,7 @@ export const json = {
 						href: null
 					}
 				],
-				url: 'https://medium.com/@BlogAuthor/the-medium-author-guide-to-valentines-day-the-entertainment-earth-s-way-2423f4233268'
+				url: 'https://www.naver.com'
 			}
 		},
 		{
@@ -439,7 +439,7 @@ export const json = {
 					type: 'bookmark',
 					bookmark: {
 						caption: [],
-						url: 'https://medium.com/@BlogAuthor/the-medium-author-guide-to-valentines-day-the-entertainment-earth-s-way-2423f4233268'
+						url: 'https://www.naver.com'
 					}
 				}
 			]