search

Richie78321 / Vaccinate-PA

https://vaccinatepa.org/
11 stars 4 forks source link

Add google translate functionality #43

Closed GideonShils closed 3 years ago

GideonShils commented 3 years ago

Description

Adds basic google translate functionality with a few notable caveats mentioned below.

Includes the top 3 languages in PA (english, spansish, chinese) on every page, as well as an all language dropdown in certain situations.

TODO: Should we make these available further up the page or are we ok with it just in the footer?

Caveats:

  1. The google translate widget is pretty old (and was only un-deprecated because of covid), and does not work well with React. I've implemented a patch from the below link to make this work for now. The potential tradeoff is making react slightly slower, but in my testing I haven't noticed any slowdown, and I think the value added by this functionality > any tiny performance hits. This is documented extensively here: https://github.com/facebook/react/issues/11538#issuecomment-417504600
  2. The widget wasn't really built for modern web apps. The javascript loaded in the head targets a div we can place anywhere, and renders the dropdown button in the div on page load. This is an issue when switching between pages because the footer div often reloads itself, but the script doesn't re-run to replace the dropdown, causing it to sometimes be missing in the footer. As a workaround, the specific language links are always visible, and the dropdown is always visible on initial page load. We could probably fix this by actively retriggering the JS on page change, but I haven't had time to implement this. For what it's worth, I've noticed this is also an issue in a few other vaccine sites using this widget, notably https://nycvaccinelist.com

Tests

Screenshots

Screen Shot 2021-03-01 at 4 45 02 PM
vercel[bot] commented 3 years ago

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://vercel.com/zmwang622/vaccinate-pa/9A4GL8vGQLqRQE5cN2j9PdJ9dvC8
✅ Preview: https://vaccinate-pa-git-translation-zmwang622.vercel.app

Richie78321 commented 3 years ago

This looks great. Thanks so much! I'll look over this after class and get this deployed asap.

Richie78321 commented 3 years ago

Oops my b. I messed up the diff when I pushed just now. No prob tho.

Richie78321 commented 3 years ago

@GideonShils Could you add the caveats (or maybe just the second one) to an issue or two?

GideonShils commented 3 years ago

@Richie78321 sure thing, good idea