Gatsby Layout Q&A

[00:00:00]
>> One I noticed in your VS Code, do you have an extension for your GraphQL to display the syntax highlighting?
>> Yes, I have, what's it called? I have the GraphQL extension from the GraphQL Foundation.
>> Is there any documentation within Gatsby for transferring an existing website that has nothing to do with Gatsby to Gatsby?

[00:00:28]
>> An existing React site or any site?
>> Just any site, any documentation on starting to integrate Gatsby into that?
>> That's a good question, I think they might have a migrating to Gatsby. Let's see, they've got, That's a blog post from somebody else on migrating. Here's one on WordPress.

[00:00:57]
I don't know that they have any docs on this actually, it looks like there are a lot of community resources on this that you can use that will allow you to pull the the RSS feed from a site. Or other ways of kind of importing data that you can then use to populate the site.

[00:01:18]
It depends on how the site is structured, what your data sources are and kind of what you're trying to preserve. If you wanna bring over the whole look just straight up, then you can do that, you would kinda copy/paste the site into a layout component and then punch holes in it where the custom content would need to be.

[00:01:40]
But again, there are a lot of, what does your current setup look like questions, before you can give a solid answer to how to migrate.
>> Cool, awesome, thank you.
>> Mark.
>> Yeah, how do you go about adding CSS reset?
>> If you wanted to add a CSS reset, I would add it right in the global, here.

[00:02:03]
So for me, to be completely honest, this is now my CSS reset, is to do like this. Sometimes what I'll do is I'll set margin 0, and then I'll do what's called the lobotomized owl selector where you set any element that is adjacent to another element gets a 1 rem top margin.

[00:02:29]
But as you can see, this can introduce some weirdness, so I don't do that anymore. But yeah, if you wanted to do a reset, you would just drop it right in here, if you wanted. You could create a reset.css and just import it in the same way, and these will, I believe, they get imported in order, so if you wanted to do a reset, you would just probably put it right up here, something like that.

[00:02:58]
>> Does Gatsby have a history call in React Router where you're able to trigger if I hit the Back button? There is an API in Gatsby. API doc, that's what we're looking for. So if you are using the navigate helper function, which is what we're looking for, there is a import {navigate} from "gatsby", and so you can do navigation.

[00:03:28]
You can add state to it and stuff so that you can push history on. And then if you wanted to, like changing your back button behavior, you can have your link replace. Where is the, I think if you wanted to do actual, implement your own back button, that's not in Gatsby but you can update the history the way that you would in React Router.

[00:04:03]
Under the hood Gatsby uses Reach Router. So if you look at the Reach Router docs, you can actually reach into that package and do a bunch of custom stuff there. But that's a little out of scope for today, if you have specific questions about that, you can hit me up on Twitter.

[00:04:23]
I'm always happy to have some questions, just send me a tweet.
>> Why wouldn't we set variables in the global.css and then use them in header.module.css for accessing those variables?
>> Why would we?
>> Or why wouldn't we, I guess?
>> So yeah, I like that pattern, that's what we're doing in the global.css here, is we set these variables and then we access those in the layout.

[00:04:53]
I like this pattern and it is a pattern that I am happy to use in my projects, if you look at my open source, you'll see that I do this a lot. There are always trade-offs when you get to the way you manage styles and one of the trade-offs of this one is that this looks a little bit like magic.

[00:05:13]
So a way that you can control this is you could potentially put together a variables.css. And that is a signal to the rest of the team that these configuration values are in there, they can go find them. But ultimately, there's not a downside/outside of the standard, downsides of organizing code in any way where there are upsides and downsides of all this.

[00:05:39]
I really like this versus some kind of JavaScript-based configuration because somebody who knows CSS can come in and work on this project without having to learn JavaScript. And to me, that's a benefit.
>> So the question there is essentially using the CSS variables instead of CSS module, setting it to a variable, I see.

[00:06:05]
>> Yeah, cuz the other way that we would have to do this, is we would need to duplicate these values all over the place or we would need to install something like Sass so that we could get variables. Or we'd have to introduce CSS and JS stuff so that we could put these variables somewhere.

[00:06:25]
For me, this is the path of least resistance. And the nice thing about this too is if you wanna read it clear or color, a better example of this would be if you were to set a font. Let's say that we set the text-size-base, and we call that 18 pixels.

[00:06:45]
And then down here, we know that that's what we wanna use. So we say text-size-base, but then later on, we wanna have an aside component and that aside component we know should be smaller, I can override this. I can say text-size-base and set it to 16 pixels. And then anything inside of this aside will automatically get a lower text-size-base if we base the values off of this variable.

[00:07:15]
So it gives you a lot of control without having to add tooling to manage it. It's just kinda built into the CSS language.