Shadowing example for beta demo

[s1monj]

• Quick and easy customization of the front-end is the main advantage of using Gatsby jamstack
• We need to provide a demo so the user can easily override the top menu with their own links and branding

For example:

To view an example of customizing the Whitebrick client branding, run the following command: mv custom-example src/user-site

See shadowing: https://www.gatsbyjs.com/docs/how-to/plugins-and-themes/shadowing/ https://dev.to/ekafyi/gatsby-theme-shadowing-for-beginners-how-i-built-a-starter-for-lekoarts-minimal-blog-theme-1lfm

• Simon has added example logo here: https://github.com/whitebrick/whitebrick/tree/main/custom-example/
• Update custom-example/header.tsx to display something like below (this is just a rough example)
  • when the user clicks on Link Example it takes them to google.com with target="_blank"
  • when the user clicks on Dropdown Example they get a dropdown of links, all go to google.com with target="_blank"

[s1monj]

depends on https://github.com/whitebrick/whitebrick/issues/111

[VSevagen]

Once the theme has been published, shadowing can be demonstrated using the updated custom-example. There are a few additional steps to handle it. The following steps are to be done in the gatsby-site where the theme will be installed.

1. In gatsby-browser.js, we need to import bootstrap and bootstrap/dist/css/bootstrap.min.css. Both of them need to be imported or else the visual's and the dropdown wouldn't work.
2. Since the header menu has been moved to a seperate file, the headerMenu component need to be imported from the published theme as shown in the custom-example.
3. Need to use bootstrap 5.1.3 and @popperjs/core 2.10.2 in gatsby site. Earlier versions of bootstrap will cause errors since they require jquery and popperjs.

[s1monj]

@VSevagen the Bootstrap upgrade caused some styling issues with buttons and alignment (see below) so for now I reverted/downgraded and we wont include dropdown with the demo - we can re-visit after Beta launch

[s1monj]

@VSevagen How do I activate the shadowing - I tried mv custom-example src/user-site and restarted gatsby develop but it didn't apply the changes? Does it need to be moved/named somewhere/something particular?

[VSevagen]

@VSevagen How do I activate the shadowing - I tried mv custom-example src/user-site and restarted gatsby develop but it didn't apply the changes? Does it need to be moved/named somewhere/something particular?

Shadowing works by overwriting the files from the node-modules/ once the theme has been installed. Since we did not publish the theme, I simulated the use of the theme using yarn workspaces and setup shadowing on it.

[s1monj]

Right gotcha now this makes sense to me thanks