SvelteKit with Notion CMS

SvelteKit with Notion CMS

We start to build CodingCat.dev by using Notion as our CMS.

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

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.

Did you find this article valuable?

Support Alex Patterson by becoming a sponsor. Any amount is appreciated!