SvelteKit with Notion CMS
Ads
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@nextand 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
sourceand 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
.envfile.
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.
