finalized and published to NPM

Author: subhendupsingh

src/lib/components/BlogPost.svelte

@@ -0,0 +1,97 @@
+<script lang="ts">
+	import { JsonLd, MetaTags } from "svelte-meta-tags";
+	import ErrorPage from "./ErrorPage.svelte";
+	import Post from "./Post.svelte";
+	import type { TableOfContentItems } from "$lib/types";
+	import type { PageData } from "../../routes/blog/[slug]/$types";
+
+    export let data: PageData;
+
+    let tableOfContent: (TableOfContentItems | undefined)[] | undefined;
+
+    $: tableOfContent = data?.blocks?.map((block)=>{
+        if(block.type==="heading_1"){
+            return {
+                type: block.type,
+                text: block.heading_1?.rich_text?.[0]?.plain_text,
+                id: block.id
+            }
+        }else if(block.type==="heading_2"){
+            return {
+                type: block.type,
+                text: block.heading_2?.rich_text?.[0]?.plain_text,
+                id: block.id
+            }
+        }else if(block.type==="heading_3"){
+            return {
+                type: block.type,
+                text: block.heading_3?.rich_text?.[0]?.plain_text,
+                id: block.id
+            }
+        }else{
+            return undefined;
+        }
+    });
+</script>
+
+<MetaTags
+  title= {data.title}
+  titleTemplate="%s | StoreBud- Launch ecommerce website in india and the world"
+  description= {data.description}
+  openGraph={{
+    url: "https://mystorebud.com/blog/" + data.slug,
+    title:data.title,
+    description: data.description,
+    images: [
+      { url: data.cover ?? "" }
+    ],
+    site_name: 'StoreBud'
+  }}
+  twitter={{
+    handle: '@mystorebud',
+    site: '@mystorebud',
+    cardType: 'summary_large_image',
+    title: data.title,
+    description: data.description,
+    image: data.cover ,
+    imageAlt: data.title
+  }}
+  facebook={{
+    appId: '1234567890'
+  }}
+/>
+
+<JsonLd 
+    schema={{
+        "@context": "https://schema.org", 
+        "@type": "BlogPosting",
+        "headline": data.title,
+        "image": data.cover,
+        "author": data.author?.name ?? "Team StoreBud", 
+        "publisher": {
+            "@type": "Organization",
+            "name": "StoreBud",
+            "logo": {
+            "@type": "ImageObject",
+            "url": "https://www.mystorebud.com/android-chrome-192x192.png"
+            }
+        },
+        "url": "http://www.mystorebud.com",
+        "mainEntityOfPage": {
+            "@type": "WebPage",
+            "@id": "https://mystorebud.com/blog"
+        },
+        "description": data.description,
+        "articleBody": data.description,
+        "dateCreated": data?.published ? new Date(data?.published).toISOString() : new Date().toISOString(),
+        "datePublished": data?.published ? new Date(data.published).toISOString() : new Date().toISOString(),
+    }}
+/> 
+
+<ErrorPage {data} />
+
+<div class="min-h-screen bg-white py-8 flex flex-col justify-center relative overflow-hidden lg:py-12">
+    <div class="relative w-full px-6 py-12 md:max-w-3xl md:mx-auto lg:max-w-4xl lg:pt-16 lg:pb-28">
+        <Post blocks={data.blocks} {tableOfContent} title={data.title} cover={data.cover} faqs={data.faqs} author={data.author} published={data.published} />
+    </div>
+</div>

src/lib/components/ErrorPage.svelte

@@ -0,0 +1,12 @@
+<script lang="ts">
+    export let data: any;
+</script>
+
+{#if data?.error}
+    <div class="flex min-h-screen min-w-full justify-center items-center">
+        <div class="bg-slate-200 p-10 rounded-md text-gray-700 flex flex-col gap-4">
+            <h3 class="font-bold text-2xl text-gray-700">Error code: {data.error.code}</h3>
+            <p class="text-lg text-gray-600">{data.error.message}</p>
+        </div>
+    </div>
+{/if}

src/lib/components/PostsList.svelte

@@ -0,0 +1,28 @@
+<script lang="ts">
+	import PostItem from "./PostItem.svelte";
+	import type { PageData } from "../../routes/$types";
+	import ErrorPage from "./ErrorPage.svelte";
+    export let data: PageData;
+</script>
+
+{#if data.pages}
+    <div class="min-h-screen bg-white py-8 flex flex-col gap-20 relative overflow-hidden lg:py-8">
+        <div class="relative w-full px-6 py-12 md:max-w-3xl md:mx-auto lg:max-w-4xl lg:pt-12 lg:pb-28">
+            <div class="flex flex-col gap-12 mb-8">
+                <h1 class="font-bold text-4xl">Welcome to StoreBud blog - Platform for growing D2C brands!</h1>
+           
+                <p class="text-lg">
+                    StoreBud blogs cover variuos topics related to setting up your own ecommerce website in India and 
+                    other parts of the world, including tips and tricks, best practices and success stroies of the 
+                    growing D2C brands.
+                </p>
+            </div>
+
+            {#each data.pages as page}
+                <PostItem properties = { page.properties } cover = { page.cover } />
+            {/each}
+        </div>
+    </div>
+{/if}
+
+<ErrorPage {data} />

src/lib/index.js

@@ -0,0 +1,168 @@
+import { Client, isFullUser } from "@notionhq/client";
+import { getBlocks, getDatabaseById, getFAQs, getPageBySlug } from "./notion/api";
+import { PUBLIC_NOTION_TOKEN } from "$env/static/public";
+import type { ServerLoadEvent } from "@sveltejs/kit";
+import BlogPost from "$lib/components/BlogPost.svelte";
+import PostsList from "$lib/components/PostsList.svelte";
+
+type Tokens = { notionToken: string, databaseId: string, vercelByPassToken?: string };
+export type BlogClient = {client: Client, config: Tokens};
+
+let notionCLient: BlogClient;
+
+export const initNotion = ( config: Tokens ): BlogClient | null => {
+        if(config?.notionToken && config?.notionToken){
+            const client = new Client({
+                auth: config.notionToken,
+            });
+            notionCLient = { client, config};
+            return notionCLient;
+        }else{
+            return null;
+        }
+}
+
+export const getAllPosts = async () => {
+    try {
+        
+        if(!notionCLient){
+            return {
+                error: {
+                    code: 400,
+                    message: "Notion client is not initialized"
+                }
+            }
+        }
+
+        const res = await getDatabaseById(notionCLient); 
+
+        if(res.isOk()){
+            if(res.value?.length > 0){
+                return {
+                    pages: res.value
+                }
+            }else{
+                return {
+                    error: {
+                        code: 400,
+                        message: "Please add rows in the database"
+                    }
+                }
+            }
+        }
+
+        if(res.isErr()){
+            return {
+                error: {
+                    code: res.error.code,
+                    message: res.error.message
+                }
+            }
+        }
+    } catch (error) {
+        return {
+            error: {
+                code: 500,
+                message: "Some error ocurred"
+            }
+        }
+    }
+}
+
+
+export const getBlogPageBySlug = async (event: ServerLoadEvent) => {
+    const { slug } = event.params;
+
+    if(!notionCLient){
+        return {
+            error: {
+                code: 400,
+                message: "Notion client is not initialized"
+            }
+        }
+    }
+
+    if(!slug){
+        return {
+            error: {
+                code: 400,
+                message: "Invalid or missing blog slug"
+            }
+        }
+    }
+    
+    const response = await getPageBySlug(notionCLient , slug);
+    
+    if(response.isOk() && response.value?.length>0){
+        const page = response.value?.[0];
+        const title = page.properties["Title"].type=="title" && page.properties["Title"]?.title?.[0]?.type=="text" ? page.properties["Title"]?.title?.[0]?.text?.content : undefined;
+        const description = page.properties["Short Description"]?.type=="rich_text"? page.properties["Short Description"]?.rich_text?.[0]?.plain_text : undefined;
+        const cover = page?.cover?.type=="external" ? page?.cover?.external?.url : undefined;
+        const published = page.properties["Publish Date"]?.type == "date" ? page.properties["Publish Date"].date?.start: undefined;
+        const author = page.properties["Authors"]?.type=="people" && page.properties["Authors"]?.people?.[0] ? isFullUser(page.properties["Authors"]?.people?.[0])? page.properties["Authors"]?.people?.[0] : undefined: undefined;
+        
+        if(!page?.id){
+            return {
+                error: {
+                    code: 500,
+                    message: "Invalid or missing page!"
+                }
+            }
+        }
+
+        const blockResponse = await getBlocks(notionCLient , page.id);
+        
+        if(blockResponse.isOk()){
+            //console.log("result", JSON.stringify(blockResponse.value));
+            const blocks = blockResponse.value;
+            const faqsTableId =  blocks?.filter((f) => f.type=="table")?.[0]?.id;
+            let faqs = null;
+            
+            if(faqsTableId){
+                const faqsResponse =  await getFAQs(notionCLient , faqsTableId);
+                
+                if(faqsResponse.isOk()){
+                    faqs = faqsResponse.value;
+                }
+            }
+
+            return {
+                blocks,
+                title,
+                description,
+                cover,
+                slug,
+                published,
+                author,
+                faqs
+            }
+        }
+
+        if(blockResponse.isErr()){
+            return {
+                error: {
+                    code: blockResponse.error.code,
+                    message: blockResponse.error.message
+                }
+            }
+        }
+    }else{
+        return {
+            error: {
+                code: 500,
+                message: "Some error ocurred"
+            }
+        }
+    }
+    
+    if(response.isErr()){
+        return {
+            error: {
+                code: response.error.code,
+                message: response.error.message
+            }
+        }
+    }
+}
+
+export { BlogPost, PostsList }