Rebuilding my Site in JungleJS

With Notion as a CMS!

2020-08-04

Recently I rebuilt this site in JungleJS. It's a new web framework (yes, I know, another) that I put together recently. For awhile this site was built in Flutter Web, because I had loved using it so much for mobile apps. And, while I'll still say Flutter is great for building mobile apps, the web is a powerful thing.

I write and plan my blog posts in Notion. After coming across Ben Borger's How to use Notion as your blog's CMS I realized it'd be beautifully easy to build my personal site in Jungle and have it automatically pull my blog posts from Notion whenever I rebuild it. Ben wrote a beautiful little API called Potion that, when combined with the build process of Jungle, makes it simple to fetch my blog posts at build time of my site.

const fetch = require('node-fetch');

...

module.exports = async () => {
    const postsRes = await (await fetch('https://potion-api.now.sh/table?id=mytableid')).json();
    let posts = [];

    /*Some data reformatting 🙄*/
    for (post of postsRes) {
        let modifiedPost = post;
        Object.keys(post.fields).forEach(fieldKey => {
            if (fieldKey == "publish_date") {
                modifiedPost.fields[fieldKey] = modifiedPost.fields[fieldKey]["start_date"];
            }
        });
        modifiedPost.fields.html = await (await fetch(`https://potion-api.now.sh/html?id=${post.id}`)).text();
        posts.push(modifiedPost.fields);
    }
    /*-------------------------*/

    return {
        ...
        dataSources: [
            {
                format: "json", name: "post", items: posts, queryArgs: { slug: 'String!' },
            },
            ...
        ]
    }
};

Then, because the compiler handles everything in the middle, I can query these posts on my Writing page with just

<script>
  const QUERY = `
    query {
      posts {
        title
        slug
      }
    }
  `;
  const QUERYRES = {};
</script>

{#each QUERYRES.posts as post}
  <a
    href="/blog/{post.slug}/"
    class="title mb-2 hover:text-primary hover:underline">
    {post.title}
  </a>
{/each}

I hate to toot my own horn here, but this is great! Compared to many other static site generators this can save a lot of time and let developers write better blog posts. From now on whenever I write a new post I can simply rebuild my site on Netlify to update my site with the new post automatically pulled from Notion.

Check out https://junglejs.org to get started building great sites like this one with Svelte and GraphQL!