Creating a headless blog

This assumes you have an existing Svelte project you wish to add a blog to. If not, see here.

Pullnote can power an area of your site (say /blog and all of the folders underneath) or individual folders / pages.

1. +layout.server.js

In your blog folder (or whatever your content directory is) create a +layout.server.js file to retrieve data from the pullnote API:

export async function load({url, params}) {
  var res = await fetch("https://pullnote.com/pull/note" + url.pathname, {
    headers: {
      "Content-Type": "application/json; charset=utf-8",
      "pn_authorization": "Bearer YOUR_API_KEY"
    }
  });
  var note = await res.json();
  return {note}
}

Replace YOUR_API_KEY with the free key in Pullnote project settings.

2. /routes/blog/[...slug] folder

Create a folder called [...slug] and add an empty +page.svelte file to it (yes, completely empty) so that the Svelte router will pick the folder up. This will catch all of the sub-folder content too.

3. +layout.svelte

Drop this +layout.svelte file into your content root:

<script>
  export let data;
  // Make the note reactive so that the layout refreshes on url change
  $: note = data.note;
</script>

<svelte:head>
  {@html note.head_html}
</svelte:head>

<a href={data.note.category.pathname}>
  {data.note.category.title}
</a>

<h1>{note.title}</h1>

{#if note.picture}
  <img src={note.img.src} alt={note.img.alt} />
{/if}

{@html note.content_html}

<slot />

{#if note.is_category}
  <hr />
  <ul>
    {#each note.links as link}
      <li>
        <a class="link" href={link.pathname}>
          {link.title}
        </a>
      </li>
    {/each}
  </ul>
{/if}

That's it

• Run npm run dev and you should see any content you've entered in the pullnote console.
• If you have a root layout and CSS, your site's stylings should automatically be adopted but you can also obviously customise the above +layout.svelte to suit.