 Okay, so Gatsby, in popular culture, is known as a static site generator. In Gatsby's marketing collateral moment, all references of static site generators have been removed. So they don't see it as a static site generator, more as a single page app. And we're going to see how that's going to work later on. So if you talk with a static site generator, often it means that you're talking about a small website or you're talking about something that's not ambitious or you're talking about something that maybe doesn't have dynamic content such as a commenting system or such as an e-commerce store. But Gatsby can handle all of this. Like them. Excuse me, I'll get my train of thought back. Okay, so we're calling it a live demo of how to use a Drupal to create a decoupled website. It's not exactly live because what it actually is, you're going to see me cheating, is I've got five Git branches and each Git branch has the exact code that I want. So it can't go around. So we hope. So what we're going to use in Drupal is this Umami demo. So I'm one of Drupal Core maintainers for the Out of the Box initiative. So this is what we built. So this is the home page of it. And then we've got an articles listing page. And then we've got an individual article. And to get the data from this, we're going to use a JSON API module. So this is what JSON API gives us back in terms of all of the articles that are available on the website. And then we're going to use JSON API to get an individual article. Again, this is what Drupal gives us back from that. So I'm not going to get into any detail at all about kind of how to get Gatsby, how to install Gatsby. I'm going to presume you can read the intro page on Gatsby.org and see what happens. When you install Gatsby, this is what you get out of the box. You've got a header at the top. You've got a main body area here. And you've got a footer down here. And you've got a link to page two, which brings us to the second page. And that's it. So that's your initial introduction to Gatsby. So if we check out part one, and we're going to run a command over here called Gatsby develop. Gatsby develop starts a development server for us with a development version of React and all the debugging and hot reloading and things like that for us. We've got a second command that's called Gatsby build, which will build a production version of the website for us, which has production ready and compressed CSS and minified JavaScript and things like that. So if we run Gatsby develop here, this is going to go off and do some things and start running for us. And then we've come back to our website and refresh the page. And like that was it. OK. So I've done nothing here except change some of the content. And what I'm trying to do here is to show some of the things we get with Gatsby out of the box. So some of the interesting things we have are a component called link component. Now, this is using React under the hood to create this. What a link component is, it's like an anchor tag. Except if you use an anchor tag, an anchor tag will refresh the page for you. And the whole page will reload. If you use a link component, React will convert this into an anchor tag for us. It will only reload the part of the page that it needs to reload. So for example, if this was a commenting system and you click on something that has a link component, it will just reload that one little small div that has the new comment in it. And that allows it to have a very fast website. And when we look at this, for example, when I click on this link component link, you'll notice that the header up here won't change and won't move. The footer will because the footer is hard-cored into the body at the moment. So when we click here, you can see that the only thing that changed was the main body area here. We go back to the home page. Again, if we click on the layout component, you'll see that the only thing changing is the main body area. That allows it to have a very fast website out of the box with Gatsby. The only thing better about it is that any component on your page that uses the link component, when you load up that page, all of those items that are linked to Gatsby will go and get a kind of a low-level cache version of that. And then when you hover over the link, it will actually go and start rendering the page for you. So by the time you actually click on the link, that page will have loaded in the background. And again, that gives us great performance. So on top of that then, I'll show you the image component in a moment. If I click on it now, it's going to break. Except it's not. We've got a layout component. The layout component for us is basically the same as page.html.wig in Drupal. That's where we render the header region, let's call it, and the footer region and whatever blocks are going into the main content. We can see those here. So we've got layout, and here it renders a header. We've got some inline style. It renders a main content area, and then it renders a footer. As well as these, though, so we've also got an SEO component. So what the SEO component does is it puts a page title into our meta tags. And we can also add in all our open graph tags for Facebook or our meta descriptions for Twitter and those kinds of things as well. And then on a page by page basis, we can override it. So by default, if we look at SEO.js, we pull the information from the metadata component that's inside our Gatsby config.js down here. So here's our site metadata. Here's our title. Here's our description. Here's our author. And then on a page by page basis, we can override those. So if I look at my SEO component.js page, which is this page here, we can see that I'm overriding the title with Gatsby SEO. I'm putting in some keywords here, and I've changed the description to say this is all about SEO, and then I render my actual SEO page itself. You can see then the link component here. This is what I was talking about a moment ago. It's quite like a general anchor tag, but instead of putting an A tag here and instead of putting a href here, we call it link to rather than a href. Like so. And that's what we need to do for that. Images in general are very tricky to work with in web design because now we've got responsive images. We've got the picture element. We've got different croppings depending on the device you're on or depending on the screen weight and things like that. Gatsby has an image plugin which will do two things. Number one, it will load a very, very low resolution version of the image so it'll be kind of blurred out until you actually scroll down so you get lazy loading by default. But also it will take the image and crop it and whatever kind of what we call image styles in Drupal, whatever you want to add to it like that, Gatsby can do that for us out of the box. So for example, if you look at this image here, it's 192 megabytes in Drupal and it's 134 megabytes in Gatsby. So if I come over to my images directory here and I try to look at this image of Athens, I was going to say it doesn't even open up, but I thought it was too big, it's not supposed to. But one issue I kind of have with it is that, and again it's like the scale and crop in Drupal, it will find the point of most interest for the image itself and in this image here, for example, it's decided that this apartment complex is the point of most interest, not me, and not the acropolis in Athens behind us. So we might have a little bit of work still to do on that. When it came to the Berlin Wall, it decided that the Berlin Wall was the important thing. Okay, so that's kind of what Gatsby looks like out of the box and explaining some of the components. Let's go to the next step now where we're going to change some things for ourselves. So we get checkout part two, and I need to stop my development server, and then I need to start it again. So things have changed a little bit now. If you look at my GitHub account, you can see this repo. So if you want to kind of go back to seed decoded, I've written. It's not necessarily best practice code some of this because I am trying to show kind of, this is how you can use, for example, SAS in Gatsby, even though kind of everyone is using style components or CSS and JS, but it's just kind of showing different approaches. So looking here at part two, what we've done here is we've created a menu component. There was no menu component originally. We just had a link back to the homepage in the bottom of our body. We've also created a footer component and a header component has been edited. So now the header component will render the menu component. We've edited the layout component. I'll show you the code in a moment to now render a header and a main body and a footer, whereas a few moments ago it was just hard coding the footer into it. And then we've added support for SAS in case somebody wants to use it. And that's as simple as adding npm install load SAS and Gatsby plug-in SAS. And all of the kind of plug-ins that you might need, like the image plug-in or the SAS plug-in or style components, it's all really as simple as just this kind of a command here to get the item you want and then you add this plug-in in your Gatsby config. So if we look at Gatsby config down here, we just have to add this line here, Gatsby plug-in SAS to allow us to use SAS. And to use SAS then in our Gatsby, what we get out of the box is a CSS file. So for example, beside layout.js, we get layout.css. To use SAS, all we have to do is change this from CSS to SCSS. And if we worked after that, there was no changing in the compiling, there was no changing in the workflow. So looking now at the menu component. So this is a new directory we've got here called components. And we've got our menu component here. In menu.js, we create a variable called menu. We allowed to have some props, and the only props we're going to allow to have is a menu class. And what we're going to do with that menu class is adding background, dark or background light into it. So that allows it to have a light background menu at the top and a dark background menu at the bottom. But it kind of like throughput, it lets us see that we can create a component in one place, and we can reuse it somewhere else. And by giving it another proper changing state, we can change its variables. Also then we can see that, and this is very bad, let's say, as a mobile menu, but we can see that we've got a mobile menu on the top, and we don't on the bottom. So again, by just adding or changing our props, we can get that. So the menu then is kind of standard enough HTML. We've got a UL here, we've got an LI here, and then we've got lots of link to components. Now, what's tricky with menus is getting an active class. So if you're reading a blog, and so forward slash blog, forward slash no title, you want the blog item in the menu to have an active class. With Gatsby and this setup, all you've got to do is say that the active class name is whatever you want to call it, and then you style that appropriately. And then whenever you are on that active class, so we're on part two. You can see part two now is highlighted. So the routing system built into Gatsby allows to have this very easy, that you can't often get if you're going to kind of stare from scratch yourself and write HTML, let's say, for a site. The footer then, again, it's fairly simple. It's just what was in the footer is just now inside a footer component. And that means then that when we want to call the footer, we render just a footer component here on its own. Now, what's nice about this is that it then means we can render different footers on different pages if we wanted that. We could have either different classes for background properties, or else we could have different content in each of these footers. Sorry. The header then we can see here has changed slightly. So where we had this much of a header earlier on, we now have a menu component rendered as well. And we've given it some classes here that we said for the props that the menu was allowed to have. So we said it gets a class of menu, it gets a class of menu like BG, and it gets a class of menu is mobile. And that's what allows us to have the button to have mobile navigation. Okay, so that's kind of what's part two. Let's move on slightly now to part three where we will look at adding style components and typography.js. Okay. We've added two new things here. Number one, we've added a new plugin called typography.js. Typography.js was created by the Gatsby folk, but it's a standalone plugin which allows us to set up our fonts and our vertical rhythms and our line heights very, very easily and in one file. So when you see what's changed here, for example, we've got a new font for our title and we've got a new font for our body. To do that, we've got our typography.js file. So where we added first to our Gatsby config here. And we've told Gatsby config then that you'll find a configuration for typography.js in a directory called source slash utils slash typography. So that's utils here and typography.js. Now with typography.js, there's lots of presets. So if you want your website to look like, say, WordPress 2020, you can just import typography from typography and then set const typography equals new WordPress 2020. And that's all you got to do. If you want then to overwrite parts of that, you can. So what we've done here is we're setting up our own system for typography. We're going to say that our base font is 24 pixels and we're going to see our baseline height is 1.5 and we're going to see our scale ratio is 3. Scale ratio means the difference between our base font, so say our body font, our paragraph font and our h1. So we can see over here that this h1 will be 72 pixels because it's 24 pixels multiplied by 3 and then h2, h3, h4, h5, h6 will be kind of representative of that. So if we change very quickly, say the scale ratio from 3 to let's go with maybe 7, just to see the extreme change and click save. This page will refresh. We can see we've got a much bigger font here. We can see that this is still 24 pixels down here. So we can build up very, very nice vertical rhythms and typography scale systems by just changing one line of code or two lines of code. If you want to use any Google Fonts, so for example here we're using Roboto and we're also using Alpha Slab 1. To do that you just add a parameter called Google Font and you put in the name of the font you want and the weights you want and that's it. So if we want to change this we'll say from Alpha Slab 1 to let's just go with Georgia only and refresh. And that's how you do your typography, that's how you do your virtual rhythm. I think that's an amazing plugin. It's something I'd love for us to use internally in AnarTech even for non-Gatsby projects. I seem to get hit command Z if you tend to make sure nothing changes or my light demo might not be so light. Okay, after that then we've got a new component called styled components. Styled components is a CSS in JS solution. I'm not saying CSS in JS is the correct solution. I'm not saying it's the incorrect solution, I'm just saying it is a solution. I haven't made up my mind yet if I like it or I don't. I'm kind of thinking that what does it matter if the extension says .js or .css? One of the really good things in fairness about CSS in JS is that you get all the benefits of JavaScript which are CSS as well. So any maths that you can do or any formulas or any fur loops or if statements you can do all of this now in your CSS because it's inside a JavaScript file and I think that's a nice benefit. So with styled components there's two things you can do. One is you can import a component as itself or you can import a component with a different element. So for example if you have a button down here say a link and the link says sign up to our newsletter. And when you click on that link it brings you to a newsletter page and on the newsletter page you've got a form and you want the sign up button on the form to look the exact same as the link. Using styled components you can say import button as A and that means it will import the button component but instead of using a button element it would use the A element. So it means you can have two components or one component, let's say one design item let's call it that are exactly identical even though there are different elements. So we can see here where we've got this is the heading one, this is heading two with the top and the same with the bottom. Well these ones here are just directly hard-coded H1, H2, H3, etc. Whereas down here I'm importing a heading component that I created and I'm importing a heading component as H1 and then I can give it a class of large or small or whatever. So we can be concerned about the semantics only for semantic sake and then we can be concerned about the layout and the design for design sake and we have a kind of separation of concerns so the accessibility should still be perfect and the designers should still be able to design the way that they want to. These two buttons down here I'll show you the code for those in a minute I think these are perfect and beautiful not least because I just copied and pasted the code from stylecomponents.org. Thank you very much people. So we've got a button component here so to create the style component button what we've said is that we create a variable here it comes to here called button and this gets capital B for its react name rather than the element in the top mode and we're saying that this button is what's called a styled button the style comes from the style components part up here and then we've given it some properties in CSS and then we've said that the button can have a prop and if it has a prop called primary we're going to change the background color to this and we're going to change the text color to this so we can see down here we've got a normal button and a primary button and the only difference between one and the other is it's got a primary somewhere in the background okay so if you want to create a new component then so if we want to create a const we call it Drupal so we'll say Drupal is going to be a paragraph so we'll say it is a styly style.p okay so this creates the component for us but then we put in two backticks and these tentative literals is what actually gives us the properties for itself so it can be kind of hard to see when you're looking at it up here you might not realize that there's a backtick here and another one down here and the same then for this section so it's when you put in the backticks here that then you can start writing your color and whatever properties you want to write and then so we've got this button element where we want to use that somewhere then so for example if we come across here to our where are we going? style components pages how's that? we want to use our button component we just render the button here and what we can do then is we can render the button here then with a proper primary or whatever you can see this repeating over and over again like in layout we render the header then in the header we render the header element and also the menu component in the layout then we render the main with the children and we render the footer and it's the same here we're just kind of you create the component in one place and then you reuse it where you want to okay so that gets us up as far as we'll say basically how to use Gatsby to create a standard site we're going to look next at how to use Gatsby to get data from Drupal actually maybe one other thing we could look at quickly is how to create a new page so to create a new page you've got a pages directory here and all you've got to do is create one new JavaScript file and that creates the page for you including all the routing and caching and everything else so if we take for example this style component page here we'll go with this one here the page three page and we'll save this and we'll call it Drupal.js and we come back to our website and we go to ford slash Drupal this is the new page that we created a second ago now if we edit the content what's changed here and we put in Marky we'll come back so we see there's a new page I think that's really good it's a great way to see how quickly we can add pages to our website so looking next in we'll talk about Drupal so for Drupal we need to install check out we've installed the JSON API module once you install the JSON API module every entity on your website is now following JSON API format and standards for every node, for every user for every commerce entity and it's quite safe I try to expose passwords and things like that in it and I couldn't so we enable while Gatsby developers are running here what we're going to do is there's a Gatsby plugin Drupal plugin and that's what's going to connect Drupal to Gatsby when that runs and we'll see it here in a moment now it'll say fetching data from Drupal hopefully that will then be the connector for us so what this means is that you could have a Drupal website and it could be just on your local computer and not available on Internet anywhere and you can take the data from that you can use Gatsby to create static version of all of your pages and then you can host those pages on Netlify or on GitHub pages and your website isn't in effect unhackable one issue that you might have is that if you want to create a new page you do have to go rebuild your Gatsby again now if you've got 100,000 pages that could be 10 or 15 minutes of a build Gatsby is working on what they're calling incremental builds so it will only rebuild the part of the website that it needs to build so if you create a new page it will render or re-create one new page for you that's not live just yet but it's in the works I don't see anything here where it says getting out here so it's starting to fetch data from Drupal so it gets all the nodes so in our website that took a 0.9 of a second to get all of the information from us this should work here okay now we've got an article that's listing page here now ignoring this being ugly because we can figure out to see us ourselves later on what we have over here in our Out of the Box demonstration is an article that's listing page and we've got give it a grow, grow your own herbs dairy-free, delicious in the chocolate and they even do it for supermarket savvy shopping and the same over here we've got give it a go, grow your own herbs dairy-free, delicious in the chocolate dairy-free supermarket savvy shopping and so on so we've got the listing page and we've also got an individual article and you'll note then as well that we've got URLs as well so this means that we can even though Gatsby develops a single page application and every time we click on anything nothing changes except the component that we want to render we can still get URLs in our URL bar so we can hot link or deep link directly to a page within our website to do this so we've added Gatsby Drupal plugin we then come to our Gatsby config and we tell Gatsby config that we want to use Gatsby source Drupal and then we give the URL of the website where it's going to find a JSON API field so this is umami.local yours can be example.com or anatech.com whatever it is you don't need to put in the forward slash JSON API and things like that because Gatsby plugin Drupal knows that you're going to use JSON API and it knows the endpoint that it's going to need to look if it doesn't you've done something wrong not Gatsby so when we get to here we've created a new page called articles.js you can just drop a page okay and in articles.js what we do then is we're importing our layout so we get a structure, we get page.js and we import our SEO component and that gives us our metadata we create a new const here called articles page which can pull some data we then render our layout component render our SEO component we put in our title here in our H1 tag and we give it an unordered list now what Gatsby is going to do is it's going to use this parameter here called all know what article you can't change this this is what the people who wrote the Gatsby plugin decided to call it so it gets all the nodes on our website that are of type article if we've got a basic page content type you can also use all know what page if you've got a blog you'll have all know what blog then we use the edges parameter here those edges and nodes in react or Gatsby or yes six not sure which and if you want to know which one to use your edges or nodes you try edges first and if it doesn't work you try nodes and you don't ask the question at the end what's the difference so we're going to map each of these this is using standard ESX syntax now we're going to map each of these article nodes using the new parameter here we're going to call edge so for items in item let's say and we're going to put in an li tag and we're going to put in some line CSS here now I don't like inline CSS but again it's just an example of how you can you can write inline CSS if you want or you can use style components for CSS and JS or you can use SAS if you want to use a more kind of standard CSS or you can write just standard CSS if you want and then we're going to put a h3 here and not sure why because it should be h2 if it's inside h1 we're going to put a h3 here and we're going to link this so this is going to get us the node title so we're going to look at the parameter of node and this is the drupal node here and we're going to get the title from it and that title is going to be wrapped up inside a link component and it's going to link to the pat alias so if we look over here and down in the bottom left corner you can see that this is linking to give it a grow and grow your own herbs and this will link to argon slash dairy-free delicious milk chocolate then we put in the parameter here for when the node was created some more CSS inline and with this we're going to render the image component and we've got a fairly deep nested item here to get down to where the image is and we pop that out and then dangerously set in our html like this is dangerously set in our html Facebook called it this on purpose so that people know that be careful if you're doing this so whatever can go into your input field can come out here now using drupal and the form api we can be fairly confident that the data coming back out is fairly safe from our filters but potentially someone could put JavaScript in here or some malicious tracking cookies or code and that can come back out so if you're using it's to kind of the react version of that inner html just be careful that you trust the data that's coming into it and then we're going to get the body and we're going to put out the body but we're going to split it at 25 words so this is not the 25 characters so on the 25th word our teaser is going to get cut so it rather than characters it means then we're not going to cut a word in half and then we're going to put three ellipses on to the end of it and we can see that here then so we've got 25 words here and then we've got our three ellipses to get this to work then at the bottom of the page we create the graphql query so the query we're going to create is it's going to look up the all node parameter created by Gatsby plug in Drupal it's going to get the edges not the nodes the reason I'm not going to use edges here is because graphql told me and then we're going to look up the Drupal node itself and the things we want to find back from this are the node id, the title the alias of the path and then the body field and then we pop down here to this relationships section which will have things like taxonomy terms or other entity references this is where you find your say paragraphs and things like that to get this then in graphql in a more kind of visual manner we can use this graphql interface here so if we hit control and space it gives us all the possibilities of what we can search in this lookup so we're going to search with a query and then we're going to hit control and space again and then it tells us that we can look for all site and what happened at frontend united I was giving this talk and I was doing the live demo and I was showing this and I couldn't find my all node articles and somebody in the audience told me afterwards I needed to refresh my page because I had this on before and I said thank you very much for telling me afterwards so if I'm wrong please interrupt me and benefit from the knowledge so we should now be able to see our all node articles so there's all node page all node recipe, all node article and control space and we are looking here at edges I think it was thank you very much there we go and from there we're going to look for the node and from here we're going to look for the id and the title and that's enough just for now so we'll run this query and this gives us back here so we get each node as an id and a title and we can go on from there to get the body field and the value and that's it so this is the GraphQL query that we saw in our articles.js here so what you can do then you don't need to know GraphQL off the top of your head you can come back to here then and we can copy and paste this query directly into here and that's the GraphQL query that we're going to need. Now we saw a moment ago with pages to create a new page we just copy and paste a file and we start editing it if we've got 100,000 blogs nodes on our website we don't want to create 100,000 pages inside this directory and if Gatsby creates it for us well that's great but then we've still got 106 100,000 and 6 files to try to get through to find our articles.js or to find our 404 page so instead what we do is in Gatsby node here we use an API that's part of Gatsby called create pages API and what we're going to tell Gatsby here is to create a page on our website for every item you can find that matches a certain criteria so in this one here what we've said is using the all node article search get the node id and get the path and with the result of that then for each of them we're going to create a page the path we're going to create is going to be whatever the node path alias is and then the context is the node id so in another component we'll see here where we create this we pass it in id parameter and the id we pass it is the node id and we say to create that then you'll find a new directory in source called templates and article.js this is where you have article.js this is where you have page.js this is where you have commerce product.js or whatever and this is our kind of our node template so if we look up here at our components sorry source we've got a new directory called templates I've got an article.js here and this is quite like what we've seen before so we're saying that use the layout component put in the article title when it was published an image and some inline CSS and then the article body here and we repeat a small GraphQL query and in this one here we pass in the id we saw a moment ago so that's what allows us then to create one page in our website per node but not to pollute let's say our pages directory and this all then goes up here in our public directory and we should have them you can see all the different pages we've got created then they can go here and they can be as open as the one because they're not going to be seen by us and that should give us then a H yep I think that's it any questions yep how well does Gatsby's report deal with authentication I'd say if you want to say that Gatsby Drupal itself doesn't deal with authentication as far as I know I'm not sure but as far as I know it doesn't I think you have to use a third party a lot provider or something like that but that's not a problem that can be done with Gatsby if that's the question that's it yep that's what it's all about right can you tell me a little bit how to deal with a search that you wouldn't be able to yeah with a search say you wouldn't create a views page for a listing page because what you're going to get is something like you're only dealing with JSON API so instead of creating a view you create a graph QL query and that's exactly the graph QL query we saw here created on the articles page now you can expose these as say inputs and buttons on your front end if you want and as you would type into those your search would be completing but it would all be powered by graph QL queries rather than SQL queries okay thank you