Go back to the homepage to view all of our projects & sign up for the newsletter to receive new ones directly to your inbox!
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!
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.iStocks.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 “React Themes by iStocks”. Small bonus here: If you’re interested in implementing RSS feeds with MDX, you can look at the source here and here.
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!
Inspired by Chris Biscardi’s work on React-theme-blog-core I also split React-theme-emma into React-theme-emma and React-theme-emma-core. Sounds fancy, but what does it actually mean?
React-theme-emma-core is now a parent theme to React-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 React-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.
The newly created React theme @iStocks/React-theme-specimens offers you React components you can use in your React 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 React-remark-design-system. Last but not least I wrote a short blogpost about it: Specimens for React powered Design Systems.
If you’re interested in the setup of my React-themes monorepo I’d highly recommend reading my article “Setting up a React 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.
Here are some noteworthy news/links from the community:
- Congratulations to the winners of the Theme Jam: Vojtěch Holík and Allan Pooley! They both created beautiful React themes
- How to Turn an Existing React Site Into a Theme by Laurie Barth
- Cool themes: React-theme-firebase & React Shopify Theme
- GitHub also uses React themes now: Doctocat 🎉
Thanks for reading this month’s issue and see you in a month 👏 iStock Team