Skip to content
bobby_dreamer
GithubLinkedIn

GatsbyJS - Shadowing

— web-development, gatsbyjs — 2 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
  • From src\@lekoarts\gatsby-theme-minimal-blog, copy folders components, hooks, styles, texts, gatsby-plugin-theme-ui and utils from gatsby-starter-minimal-blog\node_modules\@lekoarts\gatsby-theme-minimal-blog\src
  • src\pages should contain two files seo.js and 404.js otherwise there will be an error.

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>

  5. Themes

    Path : gatsby-starter-minimal-blog\src\@lekoarts\gatsby-theme-minimal-blog\gatsby-plugin-theme-ui\index.js

    Under colors:{ /** Add this ** / }

    1modes: {
    2    light:{
    3      background: `#bddccc`, /* Background */        
    4      primary: `#7400b8`,    /* Alink posted color */
    5      secondary: `#ee4035`,   /* Alink top menu color */
    6      divide: tailwind.colors.purple[6], /* HR color */
    7    },      
    8    dark: {
    9      background: `#1e172c`,
    10      primary: `#fad141`,
    11      secondary: `#2ab7ca`,
    12      heading: `#ff0080`,
    13      toggleIcon: `#fdf498`,  
    14      text: tailwind.colors.gray[4],        
    15      divide: tailwind.colors.gray[6],
    16      muted: tailwind.colors.gray[8], /* HR color */
    17    },

  6. HR(horizontal rule) or dividers

    Path : gatsby-starter-minimal-blog\src\@lekoarts\gatsby-theme-minimal-blog\gatsby-plugin-theme-ui\index.js

    Under styles

    1From : 
    2  hr: {
    3    mx: 0,
    4  },
    5

    6To   : 
    7  hr: {
    8    mx: 0,
    9    height: `2px`, /* initially it was 1px. Increased it to 2px */
    10    backgroundColor: 'divide', /* to reflect the color of the theme */
    11  },

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

# Next Steps