Gatsby Theme Shadowing Lekoarts

06 December, 2021 — gatsby — 1 min read

This site is powered by Lekoarts theme, while it has a lot of features, I wanted to change styling and some text contents that the theme defaults to.

To this I figured I have to change the Home layout in Lekoart. I copied homepage.tsx from node_modules/@lekoarts/gatsby-theme-minimal-blog/src/components/ to project src folder.

Gatsby official documentation does cite how to do this, but the chances are that one might miss it out. Following is what the Gatsby documentation says about shadowing

Gatsby themes introduce a concept called “shadowing”. This feature allows users to replace a file in the src directory that is included in the webpack bundle with their own implementation. This works for React components, pages in src/pages, JSON files, TypeScript files, as well as any other imported file (such as .css) in your site.
https://www.gatsbyjs.com/docs/how-to/plugins-and-themes/shadowing/

Lekoarts Gatsby theme shadowing

After copying the file from node_modules to apt src folder, the references needs to be updated for example to something below

homepage.tsx

1import Layout from "@lekoarts/gatsby-theme-minimal-blog/src/components/layout";
2import Title from "@lekoarts/gatsby-theme-minimal-blog/src/components/title";
3import Listing from "@lekoarts/gatsby-theme-minimal-blog/src/components/listing";
4import List from "@lekoarts/gatsby-theme-minimal-blog/src/components/list";

Refer to https://github.com/ch4nd4n/chandankumar.com/blob/45e8fcb2625023d2683d6d9c9464411b774ba700/src/%40lekoarts/gatsby-theme-minimal-blog/components/homepage.tsx

Effective path for this file is /src/@lekoarts/gatsby-theme-minimal-blog/components/homepage.tsx

To change the footer of this site, I did something like

footer.tsx

1/** @jsx jsx */
2import { jsx, Link } from "theme-ui";
3import useSiteMetadata from "@lekoarts/gatsby-theme-minimal-blog/src/hooks/use-site-metadata";
4
5const Footer = () => {
6  const { siteTitle } = useSiteMetadata();
7
8  return (
9    <footer
10      sx={{
11        boxSizing: `border-box`,
12        display: `flex`,
13        justifyContent: `space-between`,
14        mt: [6],
15        color: `secondary`,
16        a: {
17          variant: `links.secondary`,
18        },
19        flexDirection: [`column`, `column`, `row`],
20        variant: `dividers.top`,
21      }}
22    >
23      <div>
24        <span
25          sx={{ width: "10px", display: "inline-block", marginRight: "2px" }}
26        >
27          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 980 980">
28            <circle
29              cx="490"
30              cy="490"
31              r="440"
32              fill="none"
33              stroke="#000"
34              strokeWidth="100"
35            />
36            <path d="M219,428H350a150,150 0 1 1 0,125H219a275,275 0 1 0 0-125z" />
37          </svg>
38        </span>
39        Copyleft. WTH
40      </div>
41      <div>
42        Theme
43        {` `}
44        by
45        {` `}
46        LekoArts
47      </div>
48    </footer>
49  );
50};
51
52export default Footer;

Gatsby Theme Shadowing Lekoarts

Lekoarts Gatsby theme shadowing

Comments