darkl (#45)

.vscode/settings.json

@@ -1,3 +1,8 @@
 {
-  "cSpell.words": ["clike", "prismjs"]
+  "cSpell.words": [
+    "clike",
+    "contexted",
+    "prismjs",
+    "viewports"
+  ]
 }

packages/svelte-notion-page/src/routes/+page.server.ts

@@ -0,0 +1,12 @@
+import type { PageServerLoad } from './$types';
+import NotionClient from '@cozy-blog/notion-client';
+import { PUBLIC_NOTION_API_KEY, PUBLIC_NOTION_PAGE } from '$env/static/public';
+
+const client = new NotionClient({ auth: PUBLIC_NOTION_API_KEY });
+
+export const load = (async () => {
+	const page = await client.fetchFullPage(PUBLIC_NOTION_PAGE);
+	return {
+		page: page
+	};
+}) satisfies PageServerLoad;

packages/svelte-notion-page/src/routes/+page.svelte

@@ -1,24 +1,13 @@
 <script lang="ts">
-	import { Notion } from '$lib/components';
-	import { json } from './notion-export';
-	const { blocks } = json as any;
-</script>
-
-<!-- <Notion>
-	<Notion.Body>
-		<Notion.Blocks blocks={[...blocks, ...blocks]} />
-	</Notion.Body>
-</Notion> -->
+	/**
+	 * this is for getting notion data
+	 */
+	import { onMount } from 'svelte';
+	import type { PageData } from './$types';
 
-<div class="viewer" />
+	export let data: PageData;
 
-<style>
-	.viewer {
-		margin-top: -3px;
-		margin-right: 3px;
-		position: fixed !important;
-		width: 100vw;
-		height: 100vh;
-		background-color: green;
-	}
-</style>
+	onMount(async () => {
+		console.log(data.page);
+	});
+</script>

packages/svelte-notion-page/src/stories/Component.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+	import type { Content } from '$lib/types.js';
+	import Notion from '$lib/components';
+	export let content: Content;
+	export let theme: 'light' | 'dark' = 'light';
+</script>
+
+<div style="background-color: {theme === 'light' ? 'white' : 'black'};" data-theme={theme}>
+	<Notion>
+		<Notion.Body>
+			<Notion.Title
+				title={content.properties.title.type === 'title'
+					? content.properties.title.title[0].plain_text
+					: ''}
+			/>
+			<Notion.Blocks blocks={content.blocks} />
+		</Notion.Body>
+	</Notion>
+</div>

packages/svelte-notion-page/src/stories/all/Example.mdx

@@ -0,0 +1,30 @@
+import { Meta, Story } from '@storybook/blocks';
+import { Source } from '@storybook/addon-docs';
+import { dedent } from 'ts-dedent';
+import * as ExampleStories from './Example.stories';
+
+<Meta of={ExampleStories} />
+
+# 컴포넌트 리스트
+- **텍스트**: 일반 텍스트 블록입니다.
+- **제목 1, 2, 3**: 세 가지 수준의 제목 블록을 제공합니다.
+- **불릿 목록 항목**: 불릿으로 구성된 목록 항목입니다.
+- **번호 목록 항목**: 번호가 매겨진 목록 항목입니다.
+- **할 일 목록 항목**: 할 일 목록 항목입니다.
+- **토글 목록 항목**: 접을 수 있는 목록 항목입니다.
+- **인용구**: 인용구 블록입니다.
+- **구분선**: 페이지의 구분선입니다.
+- **콜아웃**: 주의를 끌기 위한 콜아웃 블록입니다.
+- **이미지**: 이미지 파일을 삽입할 수 있습니다.
+- **코드**: 코드 스니펫을 표시합니다.
+- **표 – 인라인**: 페이지 내에 바로 표를 삽입할 수 있습니다.
+- **북마크**: 웹 링크에 대한 북마크를 생성합니다.
+- **수식**: LaTeX 형식의 수학식을 표시합니다.
+
+### 아직 개발 안됨!
+- **파일**: 다양한 유형의 파일을 삽입할 수 있습니다.
+- **비디오**: 비디오 파일을 삽입할 수 있습니다.
+- **페이지 링크**: 다른 페이지로의 링크입니다.
+- **데이터베이스**: 데이터베이스입니다 ㅋ.
+- **TableOfContent**: 글의 목차를 나타냅니다.
+- **임베드**: 웹 콘텐츠를 임베드할 수 있는 블록입니다. 아직 유트브만 적용했습니다.

packages/svelte-notion-page/src/stories/all/Example.stories.ts

@@ -0,0 +1,64 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import type { Meta, StoryObj } from '@storybook/svelte';
+import Component from '../Component.svelte';
+import Content from './content';
+
+const meta = {
+	title: 'Showcase',
+	component: Component
+} satisfies Meta<Component>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Desktop: Story = {
+	args: {
+		content: Content.allComponents as any
+	},
+	parameters: {
+		viewport: {
+			defaultViewport: 'desktop'
+		}
+	}
+};
+
+export const Mobile: Story = {
+	args: {
+		content: Content.allComponents as any
+	},
+	parameters: {
+		viewport: {
+			defaultViewport: 'mobile'
+		},
+		chromatic: {
+			viewports: [320, 640]
+		}
+	}
+};
+
+export const DarkDesktop: Story = {
+	args: {
+		theme: 'dark',
+		content: Content.allComponents as any
+	},
+	parameters: {
+		viewport: {
+			defaultViewport: 'desktop'
+		}
+	}
+};
+
+export const DarkMobile: Story = {
+	args: {
+		theme: 'dark',
+		content: Content.allComponents as any
+	},
+	parameters: {
+		viewport: {
+			defaultViewport: 'mobile'
+		},
+		chromatic: {
+			viewports: [320, 640]
+		}
+	}
+};