# SvelteKit with Notion CMS


Original: https://codingcat.dev/podcast/sveltekit-with-notion-cms

%[https://youtu.be/OiapPdbBrpY?si=hbHH8daKr3y4Zd3c]

## Introduction and Technical Setup

* **New Streaming Setup**: The live coding session is conducted through Streamyard with hosts adjusting to a new streaming setup. Brittany is teaching Alex about SvelteKit.
* **Initial Project Setup**: Steps through initializing a new SvelteKit project using `npm init svelte@next` and discusses the choices such as TypeScript, ESLint, Prettier, and Playwright.

## SvelteKit Overview

* **Project Structure**: Overview of SvelteKit's project structure, including the significance of folders like `source` and `routes`, and comparison to similar directories in other frameworks like Next.js.
* **Basic Routing**: Introduction to routing in SvelteKit, demonstrating how to create routes and nested layouts by setting up a basic skeleton project and the initial routes.

## Fetching Data with Notion API

* **API Setup**: Illustration of integrating SvelteKit with Notion's API, including the installation and configuration of required packages.
* **Server-side Fetching**: Walkthrough of creating an endpoint in SvelteKit to fetch data from the Notion API server-side and passing this data as props to Svelte components.

## Handling Environment Variables

* **Setup and Pitfalls**: Discussion on setting up environment variables to securely handle API keys using `dotenv`. Explanation of how it integrates within the server-side code.
* **Do's and Don'ts**: Highlight the common mistakes and troubleshooting steps for environments in SvelteKit, such as correctly naming the `.env` file.

## Rendering and Styling Content

* **Data Display**: Techniques to display fetched data on the frontend, including setting up the initial layout and styling within the Svelte components.
* **Conditional Rendering and Loops**: Demonstration of using Svelte's `{#each}` directive for loops and handling conditional rendering based on fetched data.

## Markdown and Rich Media Content

* **Markdown Rendering**: Steps to convert Notion pages to Markdown using specific packages and discussing the possibility of rendering Markdown in Svelte.
* **Inline HTML Integration**: Handling HTML content rendered from Notion data and incorporating it into Svelte components to preserve rich media formats like embedded YouTube videos.

## Final Integration and Summary

* **Dynamic Routing**: Setting up dynamic routes in SvelteKit to handle nested routes and fetching individual items based on slugs.
* **Live Debugging and Adjustments**: Addressing real-time bugs and adjusting code, with community input and troubleshooting on concepts like nested routes and API fetching.