Implement background image with gatsby-plugin-image #533

Brenosalv · 2024-10-11T13:49:55Z

#440

Changes

Migrate background images to use gatsby-plugin-image instead of gatsby-background-image

Tests / Screenshots

Docs

Reference:
https://www.gatsbyjs.com/docs/how-to/images-and-media/using-gatsby-plugin-image/#background-images

…their image

…le-web-app-capable"

…ad of gatsby-background-image

Brenosalv · 2024-10-11T13:55:41Z

src/components/BackgroundImages/BigImageBackground.tsx

Main change is here.

github-actions · 2024-10-11T15:08:13Z

Visit the preview URL for this PR (updated for commit 66e4dcb):

https://estuary-marketing--pr533-brenosalv-tech-debt-zo36fz6y.web.app

_{(expires Thu, 14 Nov 2024 19:15:48 GMT)}

_{🔥 via Firebase Hosting GitHub Action 🌎}

_{Sign: 76f6b095a0752e5d9c6c890267f9fdc3e392161e}

travjenkins · 2024-10-14T21:53:58Z

src/components/BackgroundImages/DarkSwoopingLinesLeftDirectionBackground.tsx

+                className={clsx(backgroundImage, swoopingLines)}
+                placeholder="blurred"
+                quality={100}
+                backgroundColor="#04192b"


Can we move the background colors into a shared file? That way we only have one spot we need to update color.

It's a good point. I created a separate shared object for the colors.

travjenkins

one small change that I honestly think can probably wait.

Brenosalv · 2024-10-15T00:30:52Z

@travjenkins If it was added only for gatsby-background-image, can we remove this code from gatsby-browser.tsx?

export const onClientEntry = () => {
    // IntersectionObserver polyfill for gatsby-background-image (Safari, IE)
    if (!('IntersectionObserver' in window)) {
        import('intersection-observer');
        console.log('# IntersectionObserver is polyfilled!!');
    }
};

…ackground image

travjenkins · 2024-10-15T17:04:26Z

src/components/BackgroundImages/CirclesBackground.tsx

+        <div className={fullWidth}>
+            <StaticImage
+                alt=""
+                src="../../images/circles-background.png"
+                className={clsx(backgroundImage, fullHeight)}
+                placeholder="blurred"
+                quality={100}
+            />
+            <div className={className}>{children}</div>
+        </div>


All of the BackgroundImages/* components should probably share a single root component since they are all the same except for the src setting.

The StaticImage component does not accept to receive prop values as variables. They should be constants. So we can't create a separate component for it, but I created a separate component for the wrapper div element.

yarn.lock

travjenkins

lgtm

Brenosalv · 2024-10-15T20:15:21Z

PageSpeed Insights:

Home page:

Mobile prod:

Mobile preview:

Desktop prod:

Desktop preview:

Blog post page:

Mobile prod:

Mobile preview:

Desktop prod:

Desktop preview:

Connector template page:

Mobile prod:

Mobile preview:

Desktop prod:

Desktop preview:

Breno added 3 commits October 10, 2024 23:09

Solve warning caused by some blog posts missing alternative text for …

cebe537

…their image

"apple-mobile-web-app-capable" is deprecated, now we should use "mobi…

1b1cd43

…le-web-app-capable"

Migrate BigImageBackground component to use gatsby-plugin-image inste…

e5d2436

…ad of gatsby-background-image

Brenosalv added the tech debt This is a task that really only the engineers notice label Oct 11, 2024

Brenosalv self-assigned this Oct 11, 2024

Brenosalv linked an issue Oct 11, 2024 that may be closed by this pull request

Implement background image with gatsby-background-image #440

Closed

1 task

Brenosalv changed the title ~~Brenosalv/tech debt/440 implement background image with gatsby background image~~ Implement background image with gatsby-plugin-image Oct 11, 2024

Brenosalv commented Oct 11, 2024

View reviewed changes

src/components/BackgroundImages/BigImageBackground.tsx Outdated

Copy link

Collaborator Author

Brenosalv Oct 11, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Main change is here.

Breno added 2 commits October 11, 2024 11:55

Create separate consts for the stylings

b119db3

Remove unused class

fec42ec

Breno added 2 commits October 14, 2024 14:09

Add new background image for light swooping lines right

2329c87

Only one styling file for both background components

679d56f

Brenosalv marked this pull request as ready for review October 14, 2024 18:05

Brenosalv requested a review from travjenkins October 14, 2024 18:05

Breno added 3 commits October 14, 2024 15:27

Add new background image for dark swooping lines left

65dbe17

Add new background image for straight lines

82f2ceb

Remove non-essential background image to enhance performance

f908ad4

travjenkins reviewed Oct 14, 2024

View reviewed changes

travjenkins previously approved these changes Oct 14, 2024

View reviewed changes

Breno added 2 commits October 14, 2024 19:06

Add back some vertical paddings

fcd4d6c

Create a separate shared constant for the background colors

f9b81c6

Brenosalv dismissed travjenkins’s stale review via f9b81c6 October 14, 2024 23:56

Breno added 6 commits October 15, 2024 02:45

Add new background image for /why page background images

6f893b6

Add new background image for CDC background image

d10d3e5

Add new background image for connector page > take a tour section > b…

67c3649

…ackground image

Create a component for the background wrapper

35bc8a1

Remove unused types

de806d7

Remove unused IntersectionObserver

72f536c

travjenkins reviewed Oct 15, 2024

View reviewed changes

yarn.lock Outdated Show resolved Hide resolved

Breno added 2 commits October 15, 2024 14:59

Fix banner border radius

216c708

Remove the gatsby-background-image library

66e4dcb

travjenkins approved these changes Oct 15, 2024

View reviewed changes

travjenkins merged commit b4c73d7 into master Oct 15, 2024
15 checks passed

travjenkins deleted the Brenosalv/tech-debt/440-implement-background-image-with-gatsby-background-image branch October 15, 2024 20:19

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Implement background image with gatsby-plugin-image #533

Implement background image with gatsby-plugin-image #533

Brenosalv commented Oct 11, 2024 •

edited

Loading

Brenosalv Oct 11, 2024

github-actions bot commented Oct 11, 2024 •

edited

Loading

travjenkins Oct 14, 2024

Brenosalv Oct 14, 2024

travjenkins left a comment

Brenosalv commented Oct 15, 2024

travjenkins Oct 15, 2024

Brenosalv Oct 15, 2024

travjenkins left a comment

Brenosalv commented Oct 15, 2024 •

edited

Loading

Implement background image with gatsby-plugin-image #533

Implement background image with gatsby-plugin-image #533

Conversation

Brenosalv commented Oct 11, 2024 • edited Loading

Changes

Tests / Screenshots

Docs

Brenosalv Oct 11, 2024

Choose a reason for hiding this comment

github-actions bot commented Oct 11, 2024 • edited Loading

travjenkins Oct 14, 2024

Choose a reason for hiding this comment

Brenosalv Oct 14, 2024

Choose a reason for hiding this comment

travjenkins left a comment

Choose a reason for hiding this comment

Brenosalv commented Oct 15, 2024

travjenkins Oct 15, 2024

Choose a reason for hiding this comment

Brenosalv Oct 15, 2024

Choose a reason for hiding this comment

travjenkins left a comment

Choose a reason for hiding this comment

Brenosalv commented Oct 15, 2024 • edited Loading

Home page:

Blog post page:

Connector template page:

Brenosalv commented Oct 11, 2024 •

edited

Loading

github-actions bot commented Oct 11, 2024 •

edited

Loading

Brenosalv commented Oct 15, 2024 •

edited

Loading