This article has been imported from and is not necessarily up to date!


Last updated:Β 

This website exposes window.GaiAma accessible via the console. It's not really anything useful (yet πŸ€”) but I kinda liked the idea to share some internals/meta data.

Most interesting right now, I think, is the ThemeUI object, containing data from useThemeUI hook, it even let's you change the color mode via window.GaiAma.ThemeUI.setColorMode() 😁 and perf providing some performance metrics.

By the way, the console is worth a look anyway 😎

I used to define almost all of those via gatsby-browser.js until I came across the SSR hook onRenderBody which lets me predefine window.GaiAma at build time so I don't have to always

window.GaiAma = {
  foo: "bar",

Now I can just attach whatever data from wherever I want to the already existing object like in the layout file

Now I just spoiled my little easter egg πŸ˜…

I think I'll add more data to it, now that I'm writing about it, why isn't it already sharing stuff like Gatsby and other dependency versions etc πŸ§πŸ˜… Couldn't help myself, so this paragraph is already obsolete 😎.

Uh and if you've wondered what that weird mess at the top of gatsby-browser.js is all about, check out babel-plugin-preval by Kent C. Dodds. It's a nifty little babel plugin which "Pre-evaluate code at build-time" as the the repo description states correctly.

Can Rau
Can Rau

Doing web-development since around 2000, building my digital garden with a mix of back-to-the-roots-use-the-platform and modern edge-rendered-client-side-magic tech πŸ“»πŸš€

Living and working in Cusco, PerΓΊ πŸ¦™