How it works

How to use SvelteKit to pull content from a headless CMS and display for arbitrary urls

A dynamic svelte folder called [..slug] passes all traffic via 2 files. First is the server-side +layout.server.js which grabs the content for whatever url is requested from the Pullnote REST API.

export async function load({url, params}) {

  const PULLNOTE_KEY = "your_api_key";

  // Page slug e.g. "productivity/how-to-concentrate"
  var slug = params.slug || "";

  // Get content from pullnote
  var apiUrl = "https://pullnote.com/pull/note/" + slug;
  var res = await fetch(apiUrl, {
    headers: {
      "Content-Type": "application/json; charset=utf-8",
      "pn_authorization": "Bearer " + PULLNOTE_KEY
    }
  });
  var data = await res.json();
  return data;
}

+page.svelte then picks up that data via $page.data and renders the content returned.

<script>
  import { page } from '$app/stores';
  $: note = $page.data;
</script>

<div class="flex flex-col gap-5 md:w-2/3 mx-auto content">

  {@html note.content_html}

</div>

A simple +layout.svelte with Header and Footer components lays everything out with app.css providing the tailwind formatting.

See the Pullnote documentation for more details.

Related docs

Svelte 5 Runes explained (for Svelte 4 developers)

OpenAI ChatGPT API 429 "Too Many Requests" error - SOLVED

What's so good about Tailwind?

SQL vs MongoDB

Most Annoying MongoDB Atlas Gotcha

Tailwind x Svelte: Colours not Appearing

clog() / slog() - console log functions with infinite depth

How it works

Creating a Headless Blog with Svelte