Skip to content
bobby_dreamer

GatsbyJS - Shadowing and Non-shadowing

web-development, gatsbyjs1 min read

To make your site stand out from the default, you have to make some custom changes.
Just to let the world know, "You have started"

After migration, these are the first set of custom changes, i had made to the gatsby-starter-minimal-blog. In GatsbyJS, there are two types of custom changes shadowing and non-shadowing. Non-Shadowing is the NOT recommended one as it involves making changes to files in node_modules folder. So if you ugrade say like npm install. It will get overwritten. Lets see both of them one by one.

Non-shadowing

Shadowing is a neat concept in Gatsby. Here there are some rules, but they are not GatsbyJS rules but they are rules by LekoArts(theme makers). Basically you are allowed to override only certain folders and files.

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.

Note : You cannot override gatsby-theme-minimal-blog-core folder
gatsby-starter-minimal-blog\node_modules\@lekoarts\gatsby-theme-minimal-blog-core\src

  1. Increasing number of posts list in home page
bdv3g3\gatsby-starter-minimal-blog\node_modules\@lekoarts\gatsby-theme-minimal-blog-core\src\templates\homepage-query.tsx
1# Changed from default 3 to 7
2export const query = graphql`
3 query ($formatString: String!) {
4 allPost(sort: { fields: date, order: DESC }, limit: 7) {
5 nodes {
6 slug
7 title
8 date(formatString: $formatString)
9 excerpt
10 timeToRead
11 description
12 tags {
13 name
14 slug
15 }
16 }
17 }
18 }
19`

Shadowing

All this starts with creating a folder called 'src' and after that create the below sub-folders.

1src
2├───@lekoarts
3│ └───gatsby-theme-minimal-blog
4└───pages
  • src\@lekoarts\gatsby-theme-minimal-blog : Copy folders components, hooks, styles, texts and utils from gatsby-starter-minimal-blog\node_modules\@lekoarts\gatsby-theme-minimal-blog\src
  • src\pages : Contains two files seo.js and 404.js

Here are the first set of updates,

  1. Spacing updates ( reducing space between two elements )

    • Home page : Reducing the space between Latest posts and Home projects
      gatsby-starter-minimal-blog\src\@lekoarts\gatsby-theme-minimal-blog\components\listing.tsx

      1From = <section sx={{ mb: [5, 6, 7] }} className={className}>
      2To = <section sx={{ mb: [3, 4, 5] }} className={className}>
    • Home page : Reduce space between Hi and the message below it
      gatsby-starter-minimal-blog\src\@lekoarts\gatsby-theme-minimal-blog\components\homepage.tsx

      1From = <section sx={{ mb: [5, 6, 7], p: { fontSize: [1, 2, 3], mt: 2 }, variant: `section_hero` }}>
      2To = <section sx={{ mb: [4, 5, 6], p: { fontSize: [1, 2, 3], mt: 2 }, variant: `section_hero` }}>
    • Home page : Enabling tags in Latest posts

      1From = <Listing posts={posts} showTags={false} />
      2To = <Listing posts={posts} showTags={true} />
    • Home page : More space between multiple sections in the bottom
      gatsby-starter-minimal-blog\src\@lekoarts\gatsby-theme-minimal-blog\components\list.tsx

      1#FROM
      2 ul: { margin: 0, padding: 0},
      3 li: { listStyle: `none`, mb: 3 },
      4
      5#TO
      6 ul: { margin: 0, padding: 0, mb: 4 },
      7 li: { listStyle: `none`, mb: 2 },
    • Blog page : Reducing the space between Header and "Blog" title
      gatsby-starter-minimal-blog\src\@lekoarts\gatsby-theme-minimal-blog\components\header.tsx

      1From = <header sx={{ mb: [5, 6] }}>
      2To = <header sx={{ mb: [4, 5] }}>
    • Blog page : "Blog" heading size gatsby-starter-minimal-blog\src\@lekoarts\gatsby-theme-minimal-blog\components\blog.tsx

      1From : <Heading as="h1" variant="styles.h1" sx={{ marginY: 2 }}>
      2To : <Heading as="h2" variant="styles.h2" sx={{ marginY: 2 }}>
    • Blog page : Updated space between "Blog" title and list items

      1From : <Listing posts={posts} sx={{ mt: [4, 5] }} />
      2To : <Listing posts={posts} sx={{ mt: [3, 4] }} />
  2. Code block font size updates

    Path : src\@lekoarts\gatsby-theme-minimal-blog\styles\code.ts
    From : Default size

    1".prism-code": {
    2 fontSize: [1, 1, 2],

    To : Bit smaller. There is no decimal sizes like .7 or 1.5

    1".prism-code": {
    2 fontSize: [1, 1, 1],

    From : Inline code tag background, orginally it was almost white color

    1"p > code, li > code": {
    2 bg: `gray.2`,
    3 color: `gray.8`,

    To : Now a bit darker color

    1"p > code, li > code": {
    2 bg: `gray.5`,
    3 color: `gray.8`,
  3. Blog page title sizes

    Path : gatsby-starter-minimal-blog\src\@lekoarts\gatsby-theme-minimal-blog\components\post.tsx

    1From : <Heading as="h1" variant="styles.h1"> {post.title} </Heading>
    2To : <Heading as="h2" variant="styles.h2"> {post.title} </Heading>
  4. About_me, T.I.L, music, iRevere title sizes

    Path : gatsby-starter-minimal-blog\src\@lekoarts\gatsby-theme-minimal-blog\components\page.tsx

    1From : <Heading as="h1" variant="styles.h1"> {post.title} </Heading>
    2To : <Heading as="h2" variant="styles.h2"> {page.title} </Heading>

All the above changes will get the primary look get better. Atleast to me.

# Next Steps