Scope upgrading to gatsby

[kategreenUSDS]

What is the level of effort and plan to upgrade from gh pages to React + Gatsby?

Leads

• Lisa Chung

Questions

• why is there jQuery?
• how would gatsby work with the salesforce /apply iframe?
• what are the workarounds for conditional logic?

Definition of done

A plan to upgrade with a level of effort estimate

[SteveMattinglyUSDS]

jQuery in website repo

Interactive form behavior

form.html loads jQuery from jquery.com. Although it is live on the site, a search of the repo and a web crawler confirm that the site does not directly link to or use it. However, its main content (minus headers, footers, etc.) appears to match the externally hosted form that is iframe'ed into the site. It uses jQuery to conditionally show form elements based on user inputs. I'm no expert, but I see no great difficulty in converting it to straight JS/DOM if we wanted to.

Carousels

The default page template inserts application.js. The file is built from several inputs.

First, the build inserts the contents of two JS library files: one for jQuery itself and one for Slick. Slick is a carousel library that depends on jQuery.

Next, the build inserts the contents of carousel.js, which uses jQuery and Slick to configure carousels of content.

• The "projects" carousel is built into the home, how we work, projects, and project-charter pages.
• The "people" carousel is built into the home and people pages.

The next build step for application.js inserts the contents of instagram.js. This code manipulates an Instagram feed carousel inserted into many pages by the default page template's default footer. Due to a CORS error, the code's request to Instagram does not work. To observe this In dev or production, scroll to the bottom of a page with the "We need you" section (part of the default footer). The Instagram feed carousel is not visible, and the CORS error is in the network traffic details. 💣

Clearly, we can't continue using the current carousels without jQuery. But since there is a ticket to remove them for accessibility, it seems to be no problem.

[SteveMattinglyUSDS]

Re: the second question in the Description above. I discussed USDS Gatsby work on TechFAR Hub with Matt Bowen. There doesn't seem to be any reason that the iframe'ed form approach could not be replicated with Gatsby.

[SteveMattinglyUSDS]

Re: third question above. As I understand it, the logic in React components would be the mechanism to handle conditional logic currently handled by Liquid inside of Jekyll. @kategreenUSDS Not sure if that's addressing the question. If not, let me know please.

[kategreenUSDS]

Decision Criteria

We should upgrade if:

• It will be easier maintain long term
• More people who will be able to maintain
• The level of effort to make the switch is low enough

Based on these criteria, we've decided to stay with Jekyll and improve what we have.