Skip to content

bobby_dreamer

Upgrading gatsby site

web-development, gatsbyjs1 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 )

  1. Create new site gatsby new bdv32 https://github.com/LekoArts/gatsby-starter-minimal-blog

  2. Update gatsby-config.js basically siteMetadata, plugins:options:navigation, externalLinks, google-analytics, gatsby-plugin-manifest(favicons)

  3. Replace all the favicons images in bdv32\static

  4. 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 {
  5. 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
  6. Setup Firebase hosting, instructions are in here

# Whats changed

  • Changing the the background color of the selected text

    • Previous version files in folder
    • Current version ( couldn't change the color, its coming as inverse) files in folder
  • 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"

# References