The site is getting a new look in Gatsbyjs. Send me your feedbacks.

Defining components in Gatsbyjs inspired by holy grail layout

May 19, 2019 by Azadeh, 3 min

Building websites with Gatsbyjs started as such an interesting and inspiring experience for me. As a matter of fact what I found exciting is how holy grail layout has made me understand components. Surprisingly in a better and deeper way in React land here in Gatsby. Here is a summary.

Holy grail components

No matter what you use to build a site, you will need a structure. And the most simple and yet important one is the holy grail layout:

Simple Holy Grial Layout
Simple Holy Grial Layout

Basically in the first glance we see our major components here:

<Layout>
    <Header/>
    <Content>
      <Nav/>
      <Main/>
      <Sidebar/>
    </Content>
    <Footer/>
</Layout>

As a result we named them capitalised just as components in react to better understand the application. Layout is the main component of the application and Content includes the main content of the site. Including Navigation, Sidebar and Main.

Generally these are the building blocks of any web application. And understanding this basic concept is the key for more complex structures. Lets talk about each main component in depth.

Header

Preferably we will move navigation inside header as it is more suited there for most use cases. Most likely we will have a logo or brand on top of the application as well. As a result we will have a complete Header component like this:

<Header/>
    <Brand>
    <Nav/>
<Header/>

Main Content, main component tree

Speaking of the main component always mean the man content. It could be built of a massive component tree that is hard to maintain. But a good structure never fails even if it looks complex. Our main component here is the Content component:

<Content>
    <Main/>
    <Sidebar/>
</Content>

Surely we could break it down to inner components as we build the structure. Usually the Main component is the main article or story in the website. Alternatively it could be the loop of your blog posts. Either way it is content and needs a structure of content:

<Main>
    <Image/>
    <Title/>
    <Text/>
</Main>

Absolutely no surprise that everything including image is a component. This is how Gatsby structures the applications and it is how it should be. Links are also components in gatsby. We could extend our content further:

<Main>
    <Image/>
    <Title/>
    <Article>
    <SubTitle/>
        <Paragraph/>
        <Link/>
        <Paragraph/>
        <Image/>
        <Paragraph/>
    </Article>
</Main>
Component blocks
Component blocks

Therefore it goes on and on. But we know it is maintainable and easy to understand. And here is a simplified Image component in React:

// Part of an Image component
const Image = props => (
  <img src={props.src} alt={props.alt}/>
)

Practically we use it like below. Simple but powerful:

<Image src="http://link.com" alt ="some text"/>

And this is applicable for all other components as building blocks of the application.

Everything is a component

Truely every block of content or every piece of the structure is a component. Holy grail layout is the best presenter of a highly structured layout in its own scale.

What I learnt is if we make our layouts based on right concept and structure the blocks wisely, then we will end up in a readable, sustainable and elegant application. Therefore we can build it on any tech that we are interested in as it really doesn’t matter.

The most important take on is that HTML is the core of application no matter what technology we use to build our sites and application. We need to make the components right. And components are built of HTML elements and markup.The starting point to build great applications.