Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/joe-bell/marmalade

Another opinionated JAMstack static site starter (powered by Next.js) 🍊
https://github.com/joe-bell/marmalade

jamstack nextjs nextjs-starter preact react theme-ui typescript

Last synced: 3 months ago
JSON representation

Another opinionated JAMstack static site starter (powered by Next.js) 🍊

Awesome Lists containing this project

README 

        
> ⚠️ **Update 21/06/2020:** I've left this project on the backburner for a bit whilst revamping [joebell.co.uk](https://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](#to-do)**



# marmalade 🍊



Another opinionated **JAM**stack starter with static optimization.



Powered by [**Next.js**](https://nextjs.org) and friends:



## Features



- 🎨 [**Theme UI**](https://theme-ui.com/) (with a default theme)

- 📝 [**MDX**](https://mdxjs.com/) (via [next-mdx-enhanced](https://github.com/hashicorp/next-mdx-enhanced))

- ⚡️ [**Preact**](https://preactjs.com/)

- 🔍 [**TypeScript**](https://typescriptlang.org/)

- 🗂 Multiple "posts" directories (with index pages)

- 🏷 Tagging (with index pages)

- 📡 RSS feed generation

- ⚙️ Manifest generation

- 🍒 Extended front matter

- 🚢 Deploy to [Netlify](https://netlify.com/) or your platform of choice

- ⌨️ [ESLint](https://eslint.org/), [Prettier](https://prettier.io/) and [Commitizen](https://github.com/commitizen/cz-cli)



### 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](https://marmalade.joebell.co.uk/blog/getting-started) 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**](https://github.com/mxstbr) - _["mxstbr.com"](https://github.com/mxstbr/mxstbr.com)'s architecture was a fundamental resource for the start of this template. I owe Max massively for this._

- [**@robertcoopercode**](https://github.com/robertcoopercode) - [_"Using ESLint and Prettier in a TypeScript Project"_](https://www.robertcooper.me/using-eslint-and-prettier-in-a-typescript-project)