⚠️ Update 21/06/2020: I've left this project on the backburner for a bit whilst revamping joebell.co.uk.
I've changed strategy on a few things, but once I find the time I'll add them back.
This project is still a work in progress

marmalade 🍊

Another opinionated JAMstack starter with static optimization.

Features

🎨 Theme UI (with a default theme)
📝 MDX (via next-mdx-enhanced)
⚡️ Preact
🔍 TypeScript
🗂 Multiple "posts" directories (with index pages)
🏷 Tagging (with index pages)
📡 RSS feed generation
⚙️ Manifest generation
🍒 Extended front matter
🚢 Deploy to Netlify or your platform of choice
⌨️ ESLint, Prettier and Commitizen

To do

ℹ️ Favicon generation (including updating the repo's meta info)
🏗 Customisable layouts
🧱 Customisable components (including a nicer dark mode button and less B&Q-esque theme)
👷‍♀ GitHub Actions
🧪 Tests (I know I'm sorry)
🏆 Performance audits and optimisation
♿️ Accessibility testing and optimisation

Feature candidates

💬 Webmentions
💧 Mimic 11ty cascading data? (e.g. .json file in folder to configure layouts for all pages)
🚇 Offline support
📝 Netlify CMS

Getting started

Head over to the "Getting started" guide on the demo site.

Q&A

Why does this project exist?

It's how I like to build things right now. You might like it too or you might not; and that's totally fine.

This project was born out of a polarization on "how things should be built" in the current Front End climate. Specifically, a comment stating "stop wasting time perfecting your personal site's tech stack". Tweaking my tech stack pushes me to leave my comfort zone and broaden my knowledge; I'd actively encourage others to try new tools where possible.

Build what you love and don't feel disheartened to try something new or go down a different route.

Why not just use Gatsby?

I love Gatsby, I use it for my personal site. I like the fact I can install a plugin and let it magically solve my problems, but I equally think it's important to understand what goes on behind the scenes. I heard about Next.js' static export feature just after finishing my personal site and felt like it was worth an explore.

Why do you use CSS-in-JS (specifically Theme-UI)?

It feels right. I was a SASS advocate, but now it just feels cumbersome and outdated. With CSS-in-JS I can make the most of a theme schema to reinforce design tokens.

Why not use Chakra-UI?

Chakra-UI is bound to the Styled System Theme Specification and Emotion, so unfortunately not an option for this project 💔

Acknowledgements

@mxstbr - "mxstbr.com"'s architecture was a fundamental resource for the start of this template. I owe Max massively for this.
@robertcoopercode - "Using ESLint and Prettier in a TypeScript Project"