Added embed and list blocks

Author: subhendupsingh

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "sveltekit-notion-blog",
-	"version": "0.0.3",
+	"version": "0.0.4",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build && npm run package",

src/lib/components/Block.svelte

@@ -4,8 +4,11 @@
 	import Paragraph from "./Paragraph.svelte";
 	import Table from "./FAQ.svelte";
 	import ImageBlock from "./ImageBlock.svelte";
+	import NumberedList from "./NumberedList.svelte";
+	import BulletList from "./BulletList.svelte";
+	import Embed from "./Embed.svelte";
     export let block: BlockObjectResponse;
-    //$: console.log(block.type, block);
+    $: console.log(block.type, block);
     
 </script>
 
@@ -18,8 +21,12 @@
     <Heading heading={block} />
 {:else if block.type=="paragraph"}
     <Paragraph paragraph={block} />
-<!-- {:else if block.type=="table"}
-    <Table /> -->
+{:else if block.type=="numbered_list_item"}
+    <NumberedList {block} />
+{:else if block.type=="bulleted_list_item"}
+    <BulletList {block} />
 {:else if block.type=="image"}
     <ImageBlock {block} />
+{:else if block.type=="embed"}
+    <Embed {block} />
 {/if}

src/lib/components/BulletList.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+	import type { BulletedListItemBlockObjectResponse, NumberedListItemBlockObjectResponse } from "@notionhq/client/build/src/api-endpoints";
+	import Text from "./Text.svelte";
+    export let block: BulletedListItemBlockObjectResponse;
+</script>
+
+{#if block && block.bulleted_list_item?.rich_text.length > 0}
+    {#each  block.bulleted_list_item.rich_text as item }
+        <Text text={item} />
+    {/each}
+{/if}

src/lib/components/Embed.svelte

@@ -0,0 +1,38 @@
+<script lang="ts">
+	import type { EmbedBlockObjectResponse } from "@notionhq/client/build/src/api-endpoints";
+    export let block:  EmbedBlockObjectResponse;
+
+    //$: url = block?.embed?.url;
+
+    const isImage = (url: string) => {
+        return url.indexOf(".jpg") >=0 || url.indexOf(".png") >=0 || url.indexOf(".jpeg") >=0 || url.indexOf(".webp") >=0 || url.indexOf(".avif") >=0
+    }
+
+    const fetchEmbedMetas = async (url: string) => {
+        const response = await fetch(`https://api.dub.sh/metatags?url=${url}`)
+        
+        if(response.ok){
+            return response.json();
+        }else{
+            return url;
+        }
+    }
+</script>
+
+{#if block}
+    {#if isImage(block.embed.url)}
+        <img src={block.embed.url} alt={block.embed.caption?.join(" ")} />
+    {:else}
+        {#await fetchEmbedMetas(block.embed.url)}
+            Generating Embed...
+        {:then {title, description, image}} 
+            <div class="flex flex-col overflow-hidden rounded-md border border-gray-300 bg-gray-50">
+                <img src={image} alt={description} class="h-[250px] w-full border-b border-gray-300 object-cover" />
+                <div class="flex flex-col bg-slate-50 gap-1">
+                    <b class="text-sm text-[#536471]">{title}</b>
+                    <p class="line-clamp-2 text-sm text-[#536471]">{description}</p>
+                </div>
+            </div>
+        {/await}
+    {/if}
+{/if}

src/lib/components/ImageBlock.svelte

@@ -8,7 +8,7 @@
     {#if block.image.type=="file"}
         <Image src={block.image.file.url} layout="fullWidth" aspectRatio={16/9} class="aspect-video object-cover rounded-md" />
         {#if block.image.caption?.length > 0}
-        <p class="w-full text-xs text-gray-400 text-center">{block.image.caption?.[0].plain_text}</p>
+            <p class="w-full text-xs text-gray-400 text-center">{block.image.caption?.[0].plain_text}</p>
         {/if}
     {:else if block.image.type=="external"}
         <Image src={block.image.external.url} layout="fullWidth" aspectRatio={16/9} class="aspect-video object-cover rounded-md" />

src/lib/components/NumberedList.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+	import type { NumberedListItemBlockObjectResponse } from "@notionhq/client/build/src/api-endpoints";
+	import Text from "./Text.svelte";
+    export let block: NumberedListItemBlockObjectResponse;
+</script>
+
+{#if block && block.numbered_list_item.rich_text?.length> 0}
+    {#each  block.numbered_list_item.rich_text as item }
+        <Text text={item} />
+    {/each}
+{/if}

src/lib/components/Text.svelte

@@ -0,0 +1,8 @@
+<script lang="ts">
+	import type { RichTextItemResponse } from "@notionhq/client/build/src/api-endpoints";
+    export let text: RichTextItemResponse;
+</script>
+
+{#if text}
+    <p style:font-weight={text.annotations.bold ? "bold": "normal"} style:font-style={text.annotations.italic ? "italic": "normal"}>{text.plain_text}</p>
+{/if}

src/lib/notion/api.ts

@@ -86,7 +86,7 @@ export const getBlocks = async (blogClient: BlogClient,  blockId: string): Promi
 
     const { results } = await notion.blocks.children.list({
         block_id: blockId,
-        page_size: 50,
+        page_size: 100,
     });
 
     let blocks: BlockObjectResponse[] = [];