feat: notion renderer

KodingDev · KodingDev · commit db49414e7105 · 2023-01-23T21:53:53.000+11:00
diff --git a/.editorconfig b/.editorconfig
@@ -0,0 +1,5 @@
+root = true
+
+[*]
+end_of_line = lf
+insert_final_newline = true
diff --git a/.eslintrc.cjs b/.eslintrc.cjs
@@ -12,7 +12,8 @@ module.exports = {
 	ignorePatterns: ['*.cjs'],
 	rules: {
 		'prettier/prettier': 'error',
-		'@typescript-eslint/no-non-null-assertion': 'off'
+		'@typescript-eslint/no-non-null-assertion': 'off',
+		'svelte/no-at-html-tags': 'off'
 	},
 	parserOptions: {
 		sourceType: 'module',
diff --git a/.prettierrc b/.prettierrc
@@ -3,13 +3,8 @@
 	"singleQuote": true,
 	"trailingComma": "none",
 	"printWidth": 100,
-	"plugins": [
-		"prettier-plugin-svelte",
-		"prettier-plugin-tailwindcss"
-	],
-	"pluginSearchDirs": [
-		"."
-	],
+	"plugins": ["prettier-plugin-svelte", "prettier-plugin-tailwindcss"],
+	"pluginSearchDirs": ["."],
 	"overrides": [
 		{
 			"files": "*.svelte",
@@ -18,4 +13,4 @@
 			}
 		}
 	]
-}
+}
diff --git a/package.json b/package.json
@@ -35,6 +35,7 @@
 		"prettier-plugin-tailwindcss": "^0.2.1",
 		"svelte": "^3.44.0",
 		"svelte-check": "^2.7.1",
+		"svelte-highlight": "^7.1.2",
 		"svelte-icons": "^2.1.0",
 		"svelte-preprocess": "^4.10.7",
 		"tailwindcss": "^3.1.5",
@@ -48,4 +49,4 @@
 		"clsx": "^1.2.1",
 		"nprogress": "^0.2.0"
 	}
-}
+}
diff --git a/src/app.postcss b/src/app.postcss
@@ -33,3 +33,8 @@ body {
 .icon.sm {
 	@apply h-[24px] w-[24px];
 }
+
+/* TODO: Add all notion styles here */
+.notion-code-inline {
+	@apply rounded-md bg-neutral-800 p-1 font-mono text-sm text-red-400 !important;
+}
diff --git a/src/lib/notion/blocks/NotionBlock.svelte b/src/lib/notion/blocks/NotionBlock.svelte
@@ -0,0 +1,16 @@
+<script lang="ts">
+	import type { NotionBlock } from '../index';
+	import { NOTION_BLOCK_RENDERERS } from '../notion.renderer';
+
+	// Pass in the
+	export let block: NotionBlock;
+
+	const renderer = NOTION_BLOCK_RENDERERS[block.type];
+</script>
+
+{#if renderer}
+	<svelte:component this={renderer()} {...$$restProps} {block} data={block[block.type]} />
+{:else}
+	<p class="text-red-400">Unknown block type: {block.type}</p>
+	<pre>{JSON.stringify(block, null, 2)}</pre>
+{/if}
diff --git a/src/lib/notion/blocks/NotionBulletedListItem.svelte b/src/lib/notion/blocks/NotionBulletedListItem.svelte
@@ -0,0 +1,43 @@
+<script lang="ts">
+	import clsx from 'clsx';
+	import type { NotionRichTextData } from '../notion.types';
+	import NotionBlock from './NotionBlock.svelte';
+	import NotionRichText from './NotionRichText.svelte';
+
+	export let block: NotionBlock;
+	export let data: {
+		rich_text: NotionRichTextData[];
+	};
+
+	// Indentation
+	export let level = 0;
+	const levels: {
+		ul: string;
+		li: string;
+	}[] = [
+		{
+			ul: 'list-disc',
+			li: 'ml-0'
+		},
+		{
+			ul: '[list-style-type:circle]',
+			li: 'ml-8'
+		},
+		{
+			ul: '[list-style-type:square]',
+			li: 'ml-16'
+		}
+	];
+</script>
+
+<ul class={clsx('list-inside', levels[level]?.ul)}>
+	<li class={levels[level]?.li || 'ml-0'}>
+		<NotionRichText text={data.rich_text} />
+
+		{#if block.children && block.children.length}
+			{#each block.children as child}
+				<NotionBlock block={child} level={level + 1} />
+			{/each}
+		{/if}
+	</li>
+</ul>
diff --git a/src/lib/notion/blocks/NotionCallout.svelte b/src/lib/notion/blocks/NotionCallout.svelte
@@ -0,0 +1,18 @@
+<script lang="ts">
+	import NotionRichText from '$lib/notion/blocks/NotionRichText.svelte';
+	import type { NotionColor, NotionEmoji, NotionRichTextData } from '$lib/notion/notion.types';
+
+	export let data: {
+		rich_text: NotionRichTextData[];
+		icon: NotionEmoji; // TODO: File support
+		color: NotionColor; // TODO: Handle
+	};
+</script>
+
+<div class="my-4 rounded-md bg-neutral-700 p-4">
+	{#if data.icon && data.icon.emoji}
+		<span class="mr-2">{data.icon.emoji}</span>
+	{/if}
+
+	<NotionRichText text={data.rich_text} />
+</div>
diff --git a/src/lib/notion/blocks/NotionCode.svelte b/src/lib/notion/blocks/NotionCode.svelte
@@ -0,0 +1,19 @@
+<script lang="ts">
+	import { HighlightAuto } from 'svelte-highlight';
+	import type { RichTextDataText } from '../notion.types';
+
+	export let data: {
+		caption: RichTextDataText[]; // TODO: Implement
+		rich_text: RichTextDataText[];
+		language?: string;
+	};
+
+	// Map code
+	const code = data.rich_text.map((text) => text.plain_text).join('');
+</script>
+
+<div class="py-2">
+	<div class="overflow-clip rounded-lg">
+		<HighlightAuto {code} />
+	</div>
+</div>
diff --git a/src/lib/notion/blocks/NotionHeading.svelte b/src/lib/notion/blocks/NotionHeading.svelte
@@ -0,0 +1,25 @@
+<script lang="ts">
+	import type { NotionBlock, NotionColor, NotionRichTextData } from '../notion.types';
+	import NotionRichText from './NotionRichText.svelte';
+
+	export let block: NotionBlock;
+	export let data: {
+		rich_text: NotionRichTextData[];
+		color: NotionColor; // TODO: Handle
+		is_toggleable: boolean; // TODO: Handle
+	};
+</script>
+
+{#if block.type == 'heading_1'}
+	<h3 class="my-6 text-4xl font-semibold">
+		<NotionRichText text={data.rich_text} />
+	</h3>
+{:else if block.type == 'heading_2'}
+	<h4 class="my-4 text-3xl font-semibold">
+		<NotionRichText text={data.rich_text} />
+	</h4>
+{:else if block.type == 'heading_3'}
+	<h5 class="my-3 text-2xl font-semibold">
+		<NotionRichText text={data.rich_text} />
+	</h5>
+{/if}
diff --git a/src/lib/notion/blocks/NotionImage.svelte b/src/lib/notion/blocks/NotionImage.svelte
@@ -0,0 +1,18 @@
+<script lang="ts">
+	import type { NotionFile, NotionRichTextData } from '../index';
+	import NotionRichText from './NotionRichText.svelte';
+
+	export let data: {
+		caption: NotionRichTextData[];
+		type: 'file';
+		file: NotionFile;
+	};
+</script>
+
+<div>
+	<img class="max-w-xl" src={data.file.url} alt="Notion" />
+
+	{#if data.caption && data.caption.length}
+		<NotionRichText text={data.caption} color="gray" />
+	{/if}
+</div>
diff --git a/src/lib/notion/blocks/NotionParagraph.svelte b/src/lib/notion/blocks/NotionParagraph.svelte
@@ -0,0 +1,17 @@
+<script lang="ts">
+	import type { NotionColor, NotionRichTextData } from '../notion.types';
+	import NotionRichText from './NotionRichText.svelte';
+
+	export let data: {
+		rich_text: NotionRichTextData[];
+		color: NotionColor;
+	};
+</script>
+
+<p class="my-2">
+	{#if data.rich_text && data.rich_text.length}
+		<NotionRichText text={data.rich_text} color={data.color} />
+	{:else}
+		<br />
+	{/if}
+</p>
diff --git a/src/lib/notion/blocks/NotionRichText.svelte b/src/lib/notion/blocks/NotionRichText.svelte
@@ -0,0 +1,28 @@
+<script lang="ts">
+	import { NOTION_COLOR_MAP } from '../notion.renderer';
+	import type { NotionColor, NotionRichTextData } from '../notion.types';
+
+	export let text: NotionRichTextData[];
+	export let color: NotionColor = 'default';
+</script>
+
+{#each text as text}
+	{#if text.type == 'text'}
+		<span
+			class:font-semibold={text.annotations.bold}
+			class:italic={text.annotations.italic}
+			class:underline={text.annotations.underline}
+			class:line-through={text.annotations.strikethrough}
+			class:notion-code-inline={text.annotations.code}
+			class={NOTION_COLOR_MAP[text.annotations.color == 'default' ? color : text.annotations.color]}
+		>
+			{#if text.text.link}
+				<a href={text.text.link.url}>
+					{text.text.content}
+				</a>
+			{:else}
+				<!-- The closing IF needs to be on the same line as the span to fix some formatting issues -->
+				{text.text.content}{/if}</span
+		>
+	{/if}
+{/each}
diff --git a/src/lib/notion/index.ts b/src/lib/notion/index.ts
@@ -0,0 +1,3 @@
+export * from './notion.types';
+export * from './notion.renderer';
+export * from './notion.utils';
diff --git a/src/lib/notion/notion.renderer.ts b/src/lib/notion/notion.renderer.ts
@@ -0,0 +1,62 @@
+import type { SvelteComponent } from 'svelte';
+import type { BlockType, NotionColor } from './index';
+
+import NotionCallout from './blocks/NotionCallout.svelte';
+import NotionHeading from './blocks/NotionHeading.svelte';
+import NotionParagraph from './blocks/NotionParagraph.svelte';
+import NotionBulletedListItem from './blocks/NotionBulletedListItem.svelte';
+import NotionImage from './blocks/NotionImage.svelte';
+import NotionCode from './blocks/NotionCode.svelte';
+
+/**
+ * Associates block types with their appropriate components
+ * for rendering.
+ *
+ * These are functions to allow for lazy loading of components.
+ *
+ * @see https://developers.notion.com/reference/block#block-type-object
+ */
+export const NOTION_BLOCK_RENDERERS: Partial<Record<BlockType, () => typeof SvelteComponent>> = {
+	heading_1: () => NotionHeading,
+	heading_2: () => NotionHeading,
+	heading_3: () => NotionHeading,
+
+	callout: () => NotionCallout,
+
+	paragraph: () => NotionParagraph,
+
+	bulleted_list_item: () => NotionBulletedListItem,
+
+	image: () => NotionImage,
+
+	code: () => NotionCode
+};
+
+/**
+ * Color mapping for Notion's color palette.
+ */
+export const NOTION_COLOR_MAP: Record<NotionColor | 'default', string> = {
+	default: 'text-gray-900 dark:text-gray-100',
+
+	// Foreground colors
+	blue: 'text-blue-500 dark:text-blue-400',
+	gray: 'text-gray-500 dark:text-gray-400',
+	brown: 'text-amber-600',
+	orange: 'text-orange-500 dark:text-orange-400',
+	yellow: 'text-yellow-500 dark:text-yellow-400',
+	green: 'text-green-500 dark:text-green-400',
+	purple: 'text-purple-500 dark:text-purple-400',
+	pink: 'text-pink-500 dark:text-pink-400',
+	red: 'text-red-500 dark:text-red-400',
+
+	// Background colors
+	blue_background: 'bg-blue-500 dark:bg-blue-400',
+	gray_background: 'bg-gray-500 dark:bg-gray-400',
+	brown_background: 'bg-amber-600',
+	orange_background: 'bg-orange-500 dark:bg-orange-400',
+	yellow_background: 'bg-yellow-500 dark:bg-yellow-400',
+	green_background: 'bg-green-500 dark:bg-green-400',
+	purple_background: 'bg-purple-500 dark:bg-purple-400',
+	pink_background: 'bg-pink-500 dark:bg-pink-400',
+	red_background: 'bg-red-500 dark:bg-red-400'
+};
diff --git a/src/lib/notion/notion.types.ts b/src/lib/notion/notion.types.ts
diff --git a/src/lib/notion/notion.utils.ts b/src/lib/notion/notion.utils.ts
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
diff --git a/src/routes/test/+page.server.ts b/src/routes/test/+page.server.ts
diff --git a/src/routes/test/+page.svelte b/src/routes/test/+page.svelte
diff --git a/yarn.lock b/yarn.lock

Original file line number	Diff line number	Diff line change
`@@ -3,13 +3,8 @@`
`3`	`3`	`"singleQuote": true,`
`4`	`4`	`"trailingComma": "none",`
`5`	`5`	`"printWidth": 100,`
`6`		`- "plugins": [`
`7`		`- "prettier-plugin-svelte",`
`8`		`- "prettier-plugin-tailwindcss"`
`9`		`- ],`
`10`		`- "pluginSearchDirs": [`
`11`		`- "."`
`12`		`- ],`
	`6`	`+ "plugins": ["prettier-plugin-svelte", "prettier-plugin-tailwindcss"],`
	`7`	`+ "pluginSearchDirs": ["."],`
`13`	`8`	`"overrides": [`
`14`	`9`	`{`
`15`	`10`	`"files": "*.svelte",`
`@@ -18,4 +13,4 @@`
`18`	`13`	`}`
`19`	`14`	`}`
`20`	`15`	`]`
`21`		`-}`
	`16`	`+}`
Original file line number	Diff line number	Diff line change
`@@ -33,3 +33,8 @@ body {`
`33`	`33`	`.icon.sm {`
`34`	`34`	`@apply h-[24px] w-[24px];`
`35`	`35`	`}`
	`36`	`+`
	`37`	`+/* TODO: Add all notion styles here */`
	`38`	`+.notion-code-inline {`
	`39`	`+ @apply rounded-md bg-neutral-800 p-1 font-mono text-sm text-red-400 !important;`
	`40`	`+}`