News Articles gatsby

So here is a new Gatsby, Hugo & Jekyll theme (-.-) 🔥🔥

I’m posting this after a long time, I think a year maybe. So making the comeback with creating some themes and sharing FOSS side projects that I created for myself. So first one in the list is this Gatsby theme. Actually, I created this theme first for Jekyll then Hugo and then for Gatsby. How […]

Gatsby pagination problems

Hello I’m trying to build a paginated blog with gatsby and MDX, when I’m on the homepage my URL is ‘/’ and when I click on one of my posts then the URL will become ‘/slug’ and everything is ok but when I go to page 2 and the URL is ‘/2’ and I click […]

process is not defined | gatsby | elasticsearch

i am trying to connect my elastic search server to my gatsby project, but getting this weird problem of process is not defined ? Can anyone tell me what is the real issue ? import * as elasticsearch from "elasticsearch"; var client = new elasticsearch.Client({ host: "https://test:sdsdsdfcdr3dcdsdsd.test.cloud.es.io:9200" }); const test = client.search({ index: "test", type: […]

Why gatsby-plugin-material-ui has such a performance hit comparing to gatsby-plugin-emotion

My site is using Gatsby and MUI v5. Previously, I was using gatsby-plugin-emotion without realizing the existence of gatsby-plugin-material-ui. It causes layout shift on some components (e.g. those using :first-child), but most of them can be workaround by wrapping the components in a good old div. Then I gave gatsby-plugin-material-ui a try. The good thing […]

How to pass props to react component to change text color

I have a react component that when used in certain areas I need to change the text color. This is how the component was before I needed to change the text color in some circumstances: export default function Subheader(props) { return ( <Container> <h3 className={styles.h3}>{props.text}</h3> <div className={styles.headerUnderline}></div> </Container> ) } CSS: .h3 { font-family: var(–font-family); […]

how to remove base gatsby style from safari (purple bg)

cant change purple background to white background on iPhone and mac header in safari i make site using gatsby with react and when i test it in safari i see purple background an now i want make it white like in google chrome enter image description here need to change this color but don’t know […]

LocalStorage works in localhost but not in production

I am implementing a dark theme using Gatsby, React, Material-Ui and localStorage. I have setitem() in my handleThemeChange function. Which works fine both on localhost and in production. export const handleThemeChange = (State: stateProps, Dispatch: React.Dispatch<themeActionProps>) => { Dispatch( { type: themeActionTypes.CHANGE_THEME, payload: State.theme === ‘light’ ? ‘dark’ : ‘light’ } ) if (typeof window […]

A Web Developer's Guide to Making Your First Personal Website and Blog

I struggled for a really long time to create a website for myself and start writing online. I had a list of all the features my site just had to have before launch. I’d start working on it, but as a junior dev, I learned new things at a crazy pace. And whenever I learned […]

Another Gatsby cheat sheet

Concepts Gatsby is a phenomenal framework that abstracts cutting edge technologies. React hydration Gatsby uses React DOM server-side APIs to generate static HTML contents and those pages eventually get rehydrated into a React application. Some of the same JavaScript code used to generate Gatsby pages is reused in the browser where DOM APIs like window […]

simple repeated call of array in typescript of react doesnt work in 1 case of similar 3 cases

Hi there i’m coding simple todo apps with react.js/typescript. i’m stuck with calling repeatedly todos i could call todo at 1) and 3) but I COUDNT call 2) . whats the difference. maybe my interface type makes bad in todo.type.tsx ? <TodoListItem todo={todos[0]} /> {todos.map(todo=> { <TodoListItem todo={todo} /> })} {todos.map(todo => (<li>{todo.text} – {todo.email2}</li> […]

Issues with Gatsby Shadowing

I am using the @lekoarts gatsby-theme-minimal-blog. You can view my code here: https://github.com/CodyWMitchell/my-site I feel like I am losing hair because of how much time I have spent trying to get this working. I am running Gatsby locally, and I’ve somehow successfully shadowed the footer component. I want to shadow the header component, but for […]

How to edit Gatsby GraphQL data without modifying the original

I’m building a site with Gatsby and fetching data from WordPress. I can’t stand the Node hell so I wanted to sanitize the data. The problem occurs when revisiting the page again (Without browser refresh) it now throws an error that Node is undefined. Honestly, the Gatsby docs are a mess so I still have […]

Getting Started with Gatsby.js

What is Gatsby? Gatsby is a static site generator, which means that it produces static html files that we serve to the viewers of our application. Gatsby will not necessarily be running on our final application, however it will GENERATE that application that will be deployed! Just because it’s a “static” site, that does not […]

Gatsby site hosted on Microsoft IIS server giving 404 errors for static assets and other files

I am trying to host a Gatsby site on a remote Microsoft IIS server. I have copied the contents of the public folder of Gatsby to the folder of the IIS server. The site works but all my images in the static folder, web manifest file and some other files being referenced are not found. […]

Gatsby site hosted on Microsoft IIS server giving 404 errors for static assets and other files

I am trying to host a Gatsby site on a remote Microsoft IIS server. I have copied the contents of the public folder of Gatsby to the folder of the IIS server. The site works but all my images in the static folder, web manifest file and some other files being referenced are not found. […]

Gatsby V4 getNodesByType

I’m currently migrating my Gatsby V3 to Gatsby V4. I have a createNode using a function that retrieve some data from GraphQL using getNodesByType("myType"). function getSecteur(realisation) { const secteurs = getNodesByType(`StrapiSecteurs`); console.log(secteurs) if (realisation.client && realisation.client.secteur) { return secteurs.find( (secteur) => secteur.strapiId === realisation.client.secteur ); } But in V4 this function does not retrieve any […]

GatsbyJS – Relative img tag src that point to specific directory/source

I’m trying to create a static site with GatsbyJS and I need to resolve the img tags so that relative URLs point to a certain directory, while absolute ones (which start with http(s):// work normally). I’ve tried making a proper component, but since it’s not a page, Graphql won’t run: import React from "react" import […]

Gatsby WordPress Integration, how to set up local environment and configure the correct endpoint?

I am trying to integrate WordPress as a CMS, making graphQL queries in gatsby, but struggling to to find the correct way to construct a site to reference. INTRO: So far, I have followed this tutorial this is the point I am at, pasting the correct endpoint in the config. The method he outlines is […]

Sitemap | Terms | Privacy | Cookies | Advertising

Senior Software Developer

Creator of @LzoMedia I am a backend software developer based in London who likes beautiful code and has an adherence to standards & love's open-source.