Shadowing Gatsby Theme Blog 2.0 Components

January 13, 2021

How to change bio content in the gatsby-theme-blog? Gatsby implement something called “component shadowing”

Visit gatsby theme blog component in Github to see all components we can shadow.

Click bio-content.js and found the following code:-

import React, { Fragment } from "react"
import { Styled } from "theme-ui"
/**
 * Shadow me to add your own bio content
 */
const BioContent = () => (
  <Fragment>
    Words by <Styled.a href="http://example.com/">Jane Doe</Styled.a>.
    <br />
    Change me. This is all quite default.
  </Fragment>
)
export default BioContent

It’s similar to the bio content we see in our project.

Create /src/gatsby-theme-blog/components/bio-content.js (the path must be same with the gatsby theme blog module)
Copy the code and paste into the bio-content.js file we just created.
change to the code as following:-

import React from "react"
const BioContent = () => (
  <>I'm Anson Low, A Self Taught Developer Documenting Learning To Code</>
)
export default BioContent