sveltekit-notion-blog v0.1.16

Introduction

This is a plug and play library for Sveltekit projects to create blogs quickly in your website's subdirectory using Notion as a CMS.

Getting started

Notion Setup

1. Duplicate this Notion template into your workspace.
2. Create an internal Notion connection from the settings (Link), Notion's documentation on how to create an internal connection (link)
3. Connect the newly created connection with the blogs template duplicated in step 1 by clicking on the 3 dots on top-right. Then click on Add Connections and search for the connection you created in the step 3. Done!
4. New blogs will be added in the Blogs page of the template.

Get database id of your blogs from Notion

1. Click on the Copy link to view option and copy the URL
2. In the link bash https://www.notion.so/[this-is-your-database-id]?v=8f9bdbecf08d4ec9bc35c990860c780d

Initialize the library in the root +layout.ts

    import { PUBLIC_NOTION_DATABASE_ID, PUBLIC_NOTION_TOKEN } from "$env/static/public";
    import { initNotionBlog } from "sveltekit-notion-blog";

    export const prerender = true;

    initNotionBlog({
        tokens: {
            databaseId: PUBLIC_NOTION_DATABASE_ID, //from .env
            notionToken: PUBLIC_NOTION_TOKEN, //from .env
        },
        settings: {
            blogTitle: "Notion Blog",
            blogDescription: "A blog powered by Notion"
        }
    });

Code Setup

Add this to your vite.config.ts

    import { sveltekit } from '@sveltejs/kit/vite';
    import { defineConfig } from 'vite';
    
    export default defineConfig({
    	plugins: [sveltekit()],
    	ssr: {
    		noExternal: ['@fontsource-variable/inter']
    	}
    });

1. Install the package

    npm i sveltekit-notion-blog

2. In your existing project, create a subdirectory names blog and create +page.svelte and +page.server.ts files in this directory and call the getAllPosts method in the +page.server.ts

    import type { PageServerLoad } from './$types';
    import { getAllPosts } from "sveltekit-notion-blog";
    export const load: PageServerLoad = () => getAllPosts();

3. In the +page.svelte, import the `PostsList component

    <script lang="ts">
        import type { PageData } from './$types';
        import { PostsList } from "sveltekit-notion-blog";
        export let data: PageData;
    </script>

    <div class="max-w-4xl m-auto">
        <PostsList {data} />
    </div>

4. Create a new directory inside the blog directory named slug and create +page.svelte and +page.server.ts files in this directory.

5. In the +page.server.ts call the getBlogPageBySlug method

    import type { ServerLoadEvent } from '@sveltejs/kit';
    import { getBlogPageBySlug } from 'sveltekit-notion-blog';

    export const load = (event: ServerLoadEvent) => getBlogPageBySlug(event);

6. In the +page.svelte

<script lang="ts">
    import { BlogPost } from 'sveltekit-notion-blog';
    import type { PageData } from './$types';
    
    export let data: PageData;
</script>

<BlogPost {data} />