SvelteKit with Notion CMS

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

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.