My Journey with Component Shadowing in Gatsby

Introduction

This feature opens up a world of possibilities for customizing FlexiBlog or any other Gatsby theme. You can copy any component directly from the theme and modify it, or create your own component to replace the theme’s components entirely.

How to Shadow a Component

To use Component Shadowing, you need to manually locate the paths in a theme and create the correct shadowing paths in your site. Here’s a basic guide to help you get started:

1. Locate the Original Component Path: Identify the component you want to shadow in the theme’s package directory.
2. Create the Shadow Path: Use the structure site/src/[YOUR-THEME-NAME]/[PACKAGE-NAME]/[FILE-PATH].

Here are some examples to illustrate the correct shadow paths:

Contact Form Component

Original Path: packages/flow-ui/flow-ui-components/src/ContactForm/ContactForm.jsx Shadow Path: site/src/@elegantstack/flow-ui-components/ContactForm/ContactForm.jsx

useForm Hook

Original Path: packages/common/gatsby-common-helpers/src/useForm.jsx Shadow Path: site/src/@elegantstack/gatsby-common-helpers/useForm.jsx

Theme Colors

Original Path: packages/flow-ui/flow-ui-theme/src/theme/colors.js Shadow Path: site/src/@elegantstack/flow-ui-theme/theme/colors.js

Footer Component

Original Path: packages/flow-ui/flow-ui-layout/src/Footer/Footer.jsx Shadow Path: site/src/@elegantstack/flow-ui-layout/Footer/Footer.jsx

Additional Examples

Here are more examples of shadow paths for various components:

• Powered By Gatsby Component:

  • Original: packages/flow-ui/flow-ui-components/src/PoweredByGatsby/PoweredByGatsby.jsx
  • Shadow: site/src/@elegantstack/flow-ui-components/PoweredByGatsby/PoweredByGatsby.jsx

• Author Compact Widget:

  • Original: packages/flow-ui/flow-ui-widgets/src/AuthorCompact/AuthorCompact.jsx
  • Shadow: site/src/@elegantstack/flow-ui-widgets/AuthorCompact/AuthorCompact.jsx

• Personal Theme Hero Content:

  • Original: packages/themes/gatsby-theme-flexiblog-personal/src/components/Hero/Hero.Content.jsx
  • Shadow: site/src/@elegantstack/gatsby-theme-flexiblog-personal/components/Hero/Hero.Content.jsx

• Personal Theme Posts Page:

  • Original: packages/themes/gatsby-theme-flexiblog-personal/src/containers/Posts.jsx
  • Shadow: site/src/@elegantstack/gatsby-theme-flexiblog-personal/containers/Posts.jsx

Learn More

If you want to dive deeper into Component Shadowing, you can read more about it on the Gatsby blog.

Feedback and Questions

Your insights drive us! For any questions, feedback, or thoughts, feel free to connect:

1. Email: shady@shadynagy.com
2. Twitter: @ShadyNagy_
3. LinkedIn: Shady Nagy
4. GitHub: ShadyNagy

If you found this guide beneficial, don’t hesitate to share it with your network. Until the next guide, happy coding!