Upgrading gatsby site

02.10.2020 — web-development, gatsbyjs — 1 min read

Today, when trying to make some posts and test via gatsby develop, saw few warnings and decided to do npm update. I think, that was the worst decision, i made this week. npm update failed in-between due to some deprecated packages and out-of-support stuff and after few failed attempts to correct things. Only option i was left with is to re-deploy @lekoarts/gatsby-theme-minimal-blog and manually redo all the customizations again. Good thing i did last time is i had documented all the changes i had done, so, it was bit easy but even so, it took a day.

# Upgrading site ( codename : bdv32 )

Create new site gatsby new bdv32 https://github.com/LekoArts/gatsby-starter-minimal-blog
Update gatsby-config.js basically siteMetadata, plugins:options:navigation, externalLinks, google-analytics, gatsby-plugin-manifest(favicons)
Replace all the favicons images in bdv32\static

Setup customizations - In gatsby, certain files you can override by shadowing technique and certain files you cannot override( get error while executing gatsby develop), so have to make update to files in node_modules.

Using shadow technique

Create new folder src\@lekoarts\gatsby-theme-minimal-blog. This is overriding/shadowing in gatsby themes.
Copy folders components, hooks, styles, texts, utils from node_modules\@lekoarts\gatsby-theme-minimal-blog\src
Update hero.mdx & bottom.mdx in src\@lekoarts\gatsby-theme-minimal-blog\texts

Updating site theme colors. Below is the mapping based on experimenting

1background: page background
2primary: post links / selected text(this not working in this version)
3secondary: tags, header links
4heading: headings
5toggleIcon: light/dark mode

Below are the updates and add-ins, i had made,

bdv32\src\gatsby-plugin-theme-ui\index.js(diff)

1modes: {
2+    light:{
3+      background: `#d0e1f9`, /* Background */        
4+      primary: `#30157d`,
5+      secondary: `#ee4035`   /* Alink color */
6+    },      
7    dark: {
8+-    background: `#1e172c`,
9+-    primary: `#fad141`,
10+-    secondary: `#2ab7ca`,
11+-    heading: `#ff0080`,
12+-    toggleIcon: `#fdf498`,  
13      text: tailwind.colors.gray[4],
14      divide: tailwind.colors.gray[8],
15      muted: tailwind.colors.gray[8],
16    },
17  },

Spacing updates ( thought there were big gap between content & texts )

Blog post : Increasing space between H4 and previous element

bdv32\src\gatsby-plugin-theme-ui\index.js

1h4: {
2  variant: `text.heading`,
3  fontSize: [2, 3, 4],
4  mt: 4,
5},

Home page : Reducing the space between Latest posts and Home projects

bdv32\src\@lekoarts\gatsby-theme-minimal-blog\components\listing.tsx(diff)

1const Listing = ({ posts, className = ``, showTags = true }: ListingProps) => (
2-   <section sx={{ mb: [5, 6, 7] }} className={className}>
3+   <section sx={{ mb: [3, 4, 5] }} className={className}>
4      {posts.map((post) => (
5        <BlogListItem key={post.slug} post={post} showTags={showTags} />
6      ))}
7    </section>
8  )

Home page : Enabling tags in Latest posts

bdv32\src\@lekoarts\gatsby-theme-minimal-blog\components\homepage.tsx(diff)

1<Layout>
2  <section sx={{ mb: [5, 6, 7], p: { fontSize: [1, 2, 3], mt: 2 } }}>
3    <Hero />
4  </section>
5  <Title text="Latest Posts">
6    <Link to={replaceSlashes(`/${basePath}/${blogPath}`)}>Read all posts</Link>
7  </Title>
8- <Listing posts={posts} showTags={false} />
9+ <Listing posts={posts} showTags={true} />
10  <List>
11    <Bottom />
12  </List>
13</Layout>

Home page : More space between multiple sections in the bottom

bdv32\src\@lekoarts\gatsby-theme-minimal-blog\components\list.tsx(diff)

1const List = ({ children }: ListProps) => (
2    <section
3      sx={{
4        mb: [5, 5, 6],
5 -      ul: { margin: 0, padding: 0 },
6 +      ul: { margin: 0, padding: 0, mb: 4 },       
7 -      li: { listStyle: `none`, mb: 3 },
8 +      li: { listStyle: `none`, mb: 2 },
9        a: { variant: `links.listItem` },
10      }}
11    >
12      {children}
13    </section>
14  )

Blog page : Reducing the space between Header and Blog title

bdv32\src\@lekoarts\gatsby-theme-minimal-blog\components\list.tsx(diff)

1const List = ({ children }: ListProps) => (
2    <section
3      sx={{
4        mb: [5, 5, 6],
5 -      ul: { margin: 0, padding: 0 },
6 +      ul: { margin: 0, padding: 0, mb: 4 },       
7 -      li: { listStyle: `none`, mb: 3 },
8 +      li: { listStyle: `none`, mb: 2 },
9        a: { variant: `links.listItem` },
10      }}
11    >
12      {children}
13    </section>
14  )

Blog page : Reducing the space between Header and Blog title

bdv32\src\@lekoarts\gatsby-theme-minimal-blog\components\list.tsx(diff)

1return (
2-   <header sx={{ mb: [5, 6] }}>
3+   <header sx={{ mb: [4, 5] }}>
4      <Flex sx={{ alignItems: `center`, justifyContent: `space-between` }}>
5        <HeaderTitle />
6        <ColorModeToggle isDark={isDark} toggle={toggleColorMode} />
7      </Flex>
8      <div
9        sx={{
10          boxSizing: `border-box`,
11          display: `flex`,
12          variant: `dividers.bottom`,
13          alignItems: `center`,
14          justifyContent: `space-between`,
15          mt: 3,
16          color: `secondary`,
17          a: { color: `secondary`, ":hover": { color: `heading` } },
18          flexFlow: `wrap`,
19        }}
20      >
21        <Navigation nav={nav} />
22        <HeaderExternalLinks />
23      </div>
24    </header>
25  )

Blog page : Updated space between "Blog" title and list items

bdv32\src\@lekoarts\gatsby-theme-minimal-blog\components\blog.tsx(diff)

1return (
2    <Layout>
3      <SEO title="Blog" />
4      <Flex sx={{ alignItems: `center`, justifyContent: `space-between`, flexFlow: `wrap` }}>
5        <Heading variant="styles.h2">Blog</Heading>
6        <TLink as={Link} sx={{ variant: `links.secondary` }} to={replaceSlashes(`/${basePath}/${tagsPath}`)}>
7          View all tags
8        </TLink>
9      </Flex>
10-     <Listing posts={posts} sx={{ mt: [4, 5] }} />
11+     <Listing posts={posts} sx={{ mt: [3, 4] }} />
12    </Layout>
13  )

Updating table border

bdv32\src\gatsby-plugin-theme-ui\index.js

1table: {
2    width: `100%`,
3    my: 4,
4    borderCollapse: `separate`,
5    borderSpacing: 0,
6    [[`th`, `td`]]: {
7      textAlign: `left`,
8      py: `4px`,
9      pr: `4px`,
10      pl: 0,
11      borderColor: `primary`,
12+     borderBottomStyle: `dotted`,
13-     borderBottomStyle: `solid`,          
14    },
15  }

Inline code block

bdv32\src\@lekoarts\gatsby-theme-minimal-blog\styles\code.ts(diff)

1"p > code, li > code": {
2-   bg: `gray.2`,
3-   color: `gray.8`,
4+   bg: `rgb(1, 22, 39)`,
5+   color: `rgb(214, 222, 235)`,
6    px: 2,
7    py: 1,
8    borderRadius: `2px`,
9  },

Using non-shadow technique

Increasing post-count in home page( default was 3, now increased to 7)

bdv32\node_modules\@lekoarts\gatsby-theme-minimal-blog-core\src\templates\homepage-query.tsx

1export const query = graphql`
2 query($formatString: String!) {
3  allPost(sort: { fields: date, order: DESC }, limit: 7) {
4   nodes {

Setup a new git repo for this version Github:bdv32

1git init
2git add .
3git commit -m "September 2020 Update 2 - New LekoArts theme version"
4git branch -M main
5git remote add origin https://github.com/bobbydreamer/bdv32.git
6git push -u origin main

Setup Firebase hosting, instructions are in here

# Whats changed

Changing the the background color of the selected text
- Previous version
- Current version ( couldn't change the color, its coming as inverse)
Font size in code block in the previous version it was bit smaller, now its bigger. Below are the differences found related to the size, decided to leave it as it is.
bdv32\src\@lekoarts\gatsby-theme-minimal-blog\styles\code.ts(diff)
```
1".prism-code": {
2-  fontSize: 1,
3-  padding: 3,
4+  fontSize: [1, 1, 2],
5+  padding: `2rem 1rem 1rem 1rem`,
```

I am seeing this new warning message

1warn Query takes too long:
2File path: D:/BigData/08. HTML/Gatsby/lupin/bdv32/node_modules/@lekoarts/gatsby-theme-minimal-blog-core/src/templates/post-query.tsx
3URL path: /gatsby-theme-features
4Context: {
5    "slug": "/gatsby-theme-features",
6    "formatString": "DD.MM.YYYY"