sveltekit-notion-blog
v0.1.16
Published
A plug and play library for setting up blogs in subdirectory or main directory in Sveltekit projects using Notion as CMS.
Downloads
36
Maintainers
Readme
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
- Duplicate this
Notion template
into your workspace. - Create an internal Notion connection from the settings
(Link)
, Notion's documentation on how to create an internal connection [(link)
] (https://developers.notion.com/docs/create-a-notion-integration) - 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!
- New blogs will be added in the Blogs page of the template.
Get database id of your blogs from Notion
- Click on the Copy link to view option and copy the URL
- 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']
}
});
- Install the package
npm i sveltekit-notion-blog
- 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();
- 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>
Create a new directory inside the blog directory named [slug] and create
+page.svelte
and+page.server.ts
files in this directory.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);
- 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} />