Gatsby Themes
by LekoArts
GitHub
You're reading a short post about Gatsby Themes.
Go back to the homepage to view all themes & give the project a star if you like the content!

Small improvements can make a huge difference!

Hi!

In this month’s edition I want to go into all the little changes I made to both my themes but also to the themes overview website and how they still made a huge impact nevertheless. You can certainly compare this to GitHub’s Project Paper Cuts and I want to inspire you to try to do the same on one ore more projects of yours 😊

Also a warm welcome to all new readers who signed up after my initial newsletter!

themes.lekoarts.de goes Stranger Things

As my website uses Theme UI it’s quite easy to implement other themes/modes + toggle for that. Since it seems everybody can’t live without a darkmode anymore (😜), I implemented that into the website, head over to themes.lekoarts.de and click the toggle button in the header (besides the GitHub button). At that time I also was watching the new season of Stranger Things, so it also got a theme for that, too!

Darkmode is obviously not only good because it’s cool right now, but also because some people might prefer it due to eye strain issues (so accessibility concerns). Small thing for me to implement, can be a huge help accessibility-wise.

Furthermore I also added a newsletter archive (+RSS feed) to the website. Just scroll down the website and you’ll see the entries, e.g. A successful launch to “Gatsby Themes by LekoArts”. Small bonus here: If you’re interested in implementing RSS feeds with MDX, you can look at the source here and here.

GitHub actions

Since my existing starters were and will be ported to themes (and the starter itself is using the theme) it’s only logical to use the examples in the themes monorepo as starters. However, it’s really tedious to copy/paste content, commit that and push it to the repository. Luckily John Otander built a GitHub action (tutorial here) to publish changes from the monorepo to the respective repositories. It works like a charm, was set up in no time and is a huge time-saver for me!

What have you used GitHub actions for? Let me know on Twitter!

Splitting the “Emma” theme into two themes

Inspired by Chris Biscardi’s work on gatsby-theme-blog-core I also split gatsby-theme-emma into gatsby-theme-emma and gatsby-theme-emma-core. Sounds fancy, but what does it actually mean?

gatsby-theme-emma-core is now a parent theme to gatsby-theme-emma (so the latter uses the former). The core theme implements two core types (Project and Page) which are meant to be re-used. The core theme implements this approach with MDX, however you (as a consumer of the theme) are now able to implement this with any data source you want. If you want to dig deeper into the how have a look at Chris’ excellent articles.

To the why: As the core theme contains all data structures, sources and processing, plus the page creation you are free to only use the core theme and create your own design. If you don’t like the overall design of the Emma theme, this change now enables you to only care about the styling.

That’s why gatsby-theme-emma shadows two components from the core theme and then implements Theme UI, styling etc.

The Pull Request also gives you some more information. I think I’ll write a more detailed blogpost about this, e.g. showing how to now use a CMS (instead of MDX) with this theme.

New theme “Specimens”, new articles

The newly created Gatsby theme @lekoarts/gatsby-theme-specimens offers you React components you can use in your Gatsby and/or MDX files to display design tokens like typography, colors, space, audio and video. Have a look at the interactive preview where you can change the props inside the code blocks. The theme is essentially a MDX port of my existing remark plugin gatsby-remark-design-system. Last but not least I wrote a short blogpost about it: Specimens for Gatsby powered Design Systems.

If you’re interested in the setup of my gatsby-themes monorepo I’d highly recommend reading my article “Setting up a Gatsby Themes workspace with TypeScript, ESLint & Cypress” as I go into detail how I set up my repository. Working with it for a month now, I can definitely say that it works out great! Especially the Cypress tests give me confidence when opening up PRs.

#Community

Here are some noteworthy news/links from the community:

Thanks for reading this month’s issue and see you in a month 👏 Lennart

Published on August 31, 2019
RSS Feed
Like what you're reading? Try out the available themes!
View all themes
© 2021 by LekoArts. All rights reserved. Legal Notice. Privacy Policy.
This website is open source on GitHub.