diff --git a/packages/web/README.md b/packages/web/README.md index 2536ed01456..3f9d053ebf9 100644 --- a/packages/web/README.md +++ b/packages/web/README.md @@ -14,6 +14,16 @@ and then running which will start a server accessible at [http://localhost:3000](http://localhost:3000) +## Testing + +run tests with `yarn test` + +tools: `jest`, `@testing-library/react` + +#### Testing Strategy + +Each page should have a snapshot test found in `src/_page-tests` more interactive components should have an additional tests for various states/ interactions. + ## Architecture The website uses [React.js](https://reactjs.org/), [Next.js](https://nextjs.org/), and [React Native Web](https://github.com/necolas/react-native-web). React is a great library for building user interfaces. Next.js takes care of server-rendering React apps in a simple way and preloading/transitioning pages quickly. React Native web allows us to use the same code in the application on the website, specifically the way we do CSS. @@ -35,7 +45,3 @@ Now you can run `yarn run deploy:dev` to deploy to the `dev` environment, with similar commands for `staging` and `prod` - -## Add your picture - -Take a look at the files in [this folder](https://github.com/celo-org/celo-monorepo/tree/master/packages/web/src/about/team) and see if you can figure out how to add your picture to the `/about` page :) diff --git a/packages/web/package.json b/packages/web/package.json index f8dff3a3a1b..97805ece0c8 100644 --- a/packages/web/package.json +++ b/packages/web/package.json @@ -53,7 +53,7 @@ "net": "^1.0.2", "network-speed": "^2.0.4", "next": "^9.1.5", - "next-i18next": "^2.1.1", + "next-i18next": "^4.0.1", "next-images": "^1.2.0", "next-plugin-transpile-modules": "^2.0.0", "node-cache": "^5.0.2", diff --git a/packages/web/static/assets/CeloColorLogo.zip b/packages/web/public/assets/CeloColorLogo.zip similarity index 100% rename from packages/web/static/assets/CeloColorLogo.zip rename to packages/web/public/assets/CeloColorLogo.zip diff --git a/packages/web/static/assets/CeloColorLogoReverse.zip b/packages/web/public/assets/CeloColorLogoReverse.zip similarity index 100% rename from packages/web/static/assets/CeloColorLogoReverse.zip rename to packages/web/public/assets/CeloColorLogoReverse.zip diff --git a/packages/web/static/assets/CeloGlyphs.zip b/packages/web/public/assets/CeloGlyphs.zip similarity index 100% rename from packages/web/static/assets/CeloGlyphs.zip rename to packages/web/public/assets/CeloGlyphs.zip diff --git a/packages/web/static/assets/CeloLogoPackage.zip b/packages/web/public/assets/CeloLogoPackage.zip similarity index 100% rename from packages/web/static/assets/CeloLogoPackage.zip rename to packages/web/public/assets/CeloLogoPackage.zip diff --git a/packages/web/static/assets/CeloMonochromeLogo.zip b/packages/web/public/assets/CeloMonochromeLogo.zip similarity index 100% rename from packages/web/static/assets/CeloMonochromeLogo.zip rename to packages/web/public/assets/CeloMonochromeLogo.zip diff --git a/packages/web/static/assets/CeloMonochromeLogoReverse.zip b/packages/web/public/assets/CeloMonochromeLogoReverse.zip similarity index 100% rename from packages/web/static/assets/CeloMonochromeLogoReverse.zip rename to packages/web/public/assets/CeloMonochromeLogoReverse.zip diff --git a/packages/web/static/AboutPreview.jpg b/packages/web/public/images/AboutPreview.jpg similarity index 100% rename from packages/web/static/AboutPreview.jpg rename to packages/web/public/images/AboutPreview.jpg diff --git a/packages/web/static/favicon.ico b/packages/web/public/static/favicon.ico similarity index 100% rename from packages/web/static/favicon.ico rename to packages/web/public/static/favicon.ico diff --git a/packages/web/static/locales/en/about.json b/packages/web/public/static/locales/en/about.json similarity index 100% rename from packages/web/static/locales/en/about.json rename to packages/web/public/static/locales/en/about.json diff --git a/packages/web/static/locales/en/applications.json b/packages/web/public/static/locales/en/applications.json similarity index 100% rename from packages/web/static/locales/en/applications.json rename to packages/web/public/static/locales/en/applications.json diff --git a/packages/web/static/locales/en/brand.json b/packages/web/public/static/locales/en/brand.json similarity index 100% rename from packages/web/static/locales/en/brand.json rename to packages/web/public/static/locales/en/brand.json diff --git a/packages/web/static/locales/en/codeofconduct.json b/packages/web/public/static/locales/en/codeofconduct.json similarity index 100% rename from packages/web/static/locales/en/codeofconduct.json rename to packages/web/public/static/locales/en/codeofconduct.json diff --git a/packages/web/static/locales/en/common.json b/packages/web/public/static/locales/en/common.json similarity index 100% rename from packages/web/static/locales/en/common.json rename to packages/web/public/static/locales/en/common.json diff --git a/packages/web/static/locales/en/community.json b/packages/web/public/static/locales/en/community.json similarity index 100% rename from packages/web/static/locales/en/community.json rename to packages/web/public/static/locales/en/community.json diff --git a/packages/web/static/locales/en/dev.json b/packages/web/public/static/locales/en/dev.json similarity index 100% rename from packages/web/static/locales/en/dev.json rename to packages/web/public/static/locales/en/dev.json diff --git a/packages/web/static/locales/en/download.json b/packages/web/public/static/locales/en/download.json similarity index 100% rename from packages/web/static/locales/en/download.json rename to packages/web/public/static/locales/en/download.json diff --git a/packages/web/static/locales/en/faq.json b/packages/web/public/static/locales/en/faq.json similarity index 100% rename from packages/web/static/locales/en/faq.json rename to packages/web/public/static/locales/en/faq.json diff --git a/packages/web/static/locales/en/faucet.json b/packages/web/public/static/locales/en/faucet.json similarity index 100% rename from packages/web/static/locales/en/faucet.json rename to packages/web/public/static/locales/en/faucet.json diff --git a/packages/web/static/locales/en/home.json b/packages/web/public/static/locales/en/home.json similarity index 100% rename from packages/web/static/locales/en/home.json rename to packages/web/public/static/locales/en/home.json diff --git a/packages/web/static/locales/en/jobs.json b/packages/web/public/static/locales/en/jobs.json similarity index 100% rename from packages/web/static/locales/en/jobs.json rename to packages/web/public/static/locales/en/jobs.json diff --git a/packages/web/static/locales/en/technology.json b/packages/web/public/static/locales/en/technology.json similarity index 100% rename from packages/web/static/locales/en/technology.json rename to packages/web/public/static/locales/en/technology.json diff --git a/packages/web/static/locales/en/terms.json b/packages/web/public/static/locales/en/terms.json similarity index 100% rename from packages/web/static/locales/en/terms.json rename to packages/web/public/static/locales/en/terms.json diff --git a/packages/web/static/normalize.css b/packages/web/public/static/normalize.css similarity index 100% rename from packages/web/static/normalize.css rename to packages/web/public/static/normalize.css diff --git a/packages/web/src/_page-tests/__snapshots__/about.test.tsx.snap b/packages/web/src/_page-tests/__snapshots__/about.test.tsx.snap index d27f5e0d4d0..4f890aa3ff5 100644 --- a/packages/web/src/_page-tests/__snapshots__/about.test.tsx.snap +++ b/packages/web/src/_page-tests/__snapshots__/about.test.tsx.snap @@ -27,7 +27,7 @@ exports[`About renders 1`] = ` autoPlay={true} loop={true} muted={true} - poster="/static/AboutPreview.jpg" + poster="/images/AboutPreview.jpg" style={ Object { "MozTransitionProperty": "filter", @@ -63,7 +63,7 @@ exports[`About renders 1`] = ` style={ Object { "backgroundColor": "rgba(0,0,0,0.00)", - "backgroundImage": "url(\\"/static/AboutPreview.jpg\\")", + "backgroundImage": "url(\\"/images/AboutPreview.jpg\\")", "backgroundPosition": "center", "backgroundRepeat": "no-repeat", "backgroundSize": "cover", @@ -82,7 +82,7 @@ exports[`About renders 1`] = ` alt="" className="css-accessibilityImage-9pa8cd" draggable={false} - src="/static/AboutPreview.jpg" + src="/images/AboutPreview.jpg" /> diff --git a/packages/web/src/_page-tests/experience/__snapshots__/logo.test.tsx.snap b/packages/web/src/_page-tests/experience/__snapshots__/logo.test.tsx.snap index 73eeade8153..5561cfff1b2 100644 --- a/packages/web/src/_page-tests/experience/__snapshots__/logo.test.tsx.snap +++ b/packages/web/src/_page-tests/experience/__snapshots__/logo.test.tsx.snap @@ -1041,7 +1041,7 @@ exports[`Experience/Logo renders 1`] = ` className="css-reset-4rbku5 css-cursor-18t94o4 css-text-901oao" data-focusable={true} dir="auto" - href="/static/assets/CeloLogoPackage.zip" + href="/assets/CeloLogoPackage.zip" role="link" style={ Object { @@ -1365,7 +1365,7 @@ exports[`Experience/Logo renders 1`] = ` className="css-reset-4rbku5 css-cursor-18t94o4 css-text-901oao" data-focusable={true} dir="auto" - href="/static/assets/CeloColorLogo.zip" + href="/assets/CeloColorLogo.zip" role="link" style={ Object { @@ -1544,7 +1544,7 @@ exports[`Experience/Logo renders 1`] = ` className="css-reset-4rbku5 css-cursor-18t94o4 css-text-901oao" data-focusable={true} dir="auto" - href="/static/assets/CeloColorLogoReverse.zip" + href="/assets/CeloColorLogoReverse.zip" role="link" style={ Object { @@ -1731,7 +1731,7 @@ exports[`Experience/Logo renders 1`] = ` className="css-reset-4rbku5 css-cursor-18t94o4 css-text-901oao" data-focusable={true} dir="auto" - href="/static/assets/CeloMonochromeLogo.zip" + href="/assets/CeloMonochromeLogo.zip" role="link" style={ Object { @@ -1910,7 +1910,7 @@ exports[`Experience/Logo renders 1`] = ` className="css-reset-4rbku5 css-cursor-18t94o4 css-text-901oao" data-focusable={true} dir="auto" - href="/static/assets/CeloMonochromeLogoReverse.zip" + href="/assets/CeloMonochromeLogoReverse.zip" role="link" style={ Object { @@ -2048,7 +2048,7 @@ exports[`Experience/Logo renders 1`] = ` className="css-reset-4rbku5 css-cursor-18t94o4 css-text-901oao" data-focusable={true} dir="auto" - href="/static/assets/CeloGlyphs.zip" + href="/assets/CeloGlyphs.zip" role="link" style={ Object { diff --git a/packages/web/src/about/VideoCover.tsx b/packages/web/src/about/VideoCover.tsx index 795a0ade3a5..e7d28be6069 100644 --- a/packages/web/src/about/VideoCover.tsx +++ b/packages/web/src/about/VideoCover.tsx @@ -7,8 +7,8 @@ import Hoverable from 'src/shared/Hoverable' import { PlayCircle2 } from 'src/shared/PlayCircle' import VideoModal from 'src/shared/VideoModal' import { standardStyles, textStyles } from 'src/styles' - import { hasGoodConnection } from 'src/utils/utils' + interface State { isHovering: boolean supportsVideo: boolean @@ -56,7 +56,7 @@ class VideoCover extends React.PureComponent { muted={true} autoPlay={true} loop={true} - poster="/static/AboutPreview.jpg" + poster="/images/AboutPreview.jpg" > {this.state.supportsVideo && ( { } diff --git a/packages/web/src/brandkit/Logo.tsx b/packages/web/src/brandkit/Logo.tsx index cf5bf1ed9a3..b3a9d53fe28 100644 --- a/packages/web/src/brandkit/Logo.tsx +++ b/packages/web/src/brandkit/Logo.tsx @@ -50,7 +50,7 @@ const Overview = withNamespaces(NameSpaces.brand)(