Trusted answers to developer questions
Trusted Answers to Developer Questions

Related Tags

gatsby
shadowing
bio component

How to customize the `Bio` component in Gatsby

Educative Answers Team

Grokking Modern System Design Interview for Engineers & Managers

Ace your System Design Interview and take your career to the next level. Learn to handle the design of applications like Netflix, Quora, Facebook, Uber, and many more in a 45-min interview. Learn the RESHADED framework for architecting web-scale applications by determining requirements, constraints, and assumptions before diving into a step-by-step design process.

Gatsby is a React-based open-source framework for creating websites and apps – it is a #key# static site generator: Gatsby will produce static HTML files that can be loaded onto a server.#key#. Gatsby themes are plugins that include a gatsby-config.js file and add pre-configured functionality, data sourcing, and/or UI code to Gatsby sites.

Customizing the Bio component

Imagine a user has installed gatsby-theme-blog and wishes to customize the bio component to add the link to any blog or a website. This process would be done through component shadowing.

Component Shadowing allows users to make quick, one time changes that may not be supported by the theme itself. It also allows the user to replace the theme’s original file in the directory gatsby-theme-blog/src/components/bio.js with a user-defined file. This makes it easier to make quick, one time changes to the bio.js file.

How it’s done

Users are required to create a file named bio.js in the directory user-site/src/gatsby-theme-blog/components/ to customize the bio component. Component shadowing uses a specific naming convention to identify the file that needs to be rendered.

Any file that is a part of the src/gatsby-theme-blog directory is said to be “the new file” as it will be used instead of the file, with the same name, in the src directory of the gatsby-theme-blog/src theme.

This means that user-site/src/gatsby-theme-blog/components/bio.js will be rendered in place of gatsby-theme-blog/src/components/bio.js:

// apply this code in bio.js file.
import React from "react"
export default function Bio() {
  return <h1>My new bio component!</h1>
}

A a successful shadow of the bio component, it will result in the following directory tree:

user-site
└── src
    └── gatsby-theme-blog
        └── components
            └── bio.js

RELATED TAGS

gatsby
shadowing
bio component
Copyright ©2022 Educative, Inc. All rights reserved

Grokking Modern System Design Interview for Engineers & Managers

Ace your System Design Interview and take your career to the next level. Learn to handle the design of applications like Netflix, Quora, Facebook, Uber, and many more in a 45-min interview. Learn the RESHADED framework for architecting web-scale applications by determining requirements, constraints, and assumptions before diving into a step-by-step design process.

Keep Exploring