Jonobase

Jonobase serves as my custom, headless CMS framework-on-a-framework, built on top of a Sanity back-end with a Next.js (React) front-end!

Motivation

WordPress (that infamous blogging platform) did its job well in the late 2000s and early 2010s, having a very straightforward "developer experience". However, things eventually "enshittified" when WordPress developers made things more complicated than necessary!

So, I spent copious amounts of time looking for a new CMS (on the order of perhaps years). In 2020, I settled on Sanity (an apt name!) for a headless (no front-end) solution. I wanted someone to take care of the back-end (all the data storage) in a simple way, while I could build a front-end on my own. Also, I wanted to start with something simple (a list of entries and a page for each individual entry), but build up into whatever I could imagine!

Despite the name, Sanity did have its share of roadblocks. I almost gave up on this project many times since 2020, in the days before AI. Luckily, coding agents came about later that decade and here we are!

Features

• accessible hotkeys
  • command+K for search
  • command+/ for menu
• light-to-dark mode theme toggle
• fully-functional search (known as "finds")
• full-screen modal menu
• home page with full-width sections (known as "lists")
  • include only text
  • ...or a list of posts sorted by date or title or randomly
  • ...add text before and after the list
• summary pages that allow stacked lists (known as "heaps")
  • great for arranging content in a variety of ways!
• heading-based "table of contents" post menus
  • both for desktop and mobile
• category-based routing of posts
  • clean URLs like /code/snippets/post-page
• tagging system for posts (known as "nooks")
• posts with embeddable content
  • YouTube videos
  • Google maps
  • code snippets (that you can copy-and-paste with a click!)
  • tables
• follow-up link optional on each page
• previous-and-next post navigation
• footer modifiable via back-end with rich text editor
• responsive in desktop and mobile
• multi-site capability (more on this later!)

^ joncoded.com search results in dark mode (accessible via the menu!)

Frameworks

• front-end:
  • next.js
  • tailwind
• back-end:
  • sanity
• deployment:
  • vercel

Demo

• this site serves as a demo!
• run the demo also on jonchius.com
  • also mirrored on jonchius.vercel.app

Code

• on GitHub