diff --git a/README.md b/README.md index e199e9457..06d00ca53 100644 --- a/README.md +++ b/README.md @@ -1,8 +1,8 @@ Unly logo [![Maintainability](https://api.codeclimate.com/v1/badges/3f3f2c0a4106abcb9a1d/maintainability)](https://codeclimate.com/github/UnlyEd/next-right-now/maintainability) [![Test Coverage](https://api.codeclimate.com/v1/badges/3f3f2c0a4106abcb9a1d/test_coverage)](https://codeclimate.com/github/UnlyEd/next-right-now/test_coverage) -[![Locize Latest version](https://img.shields.io/badge/dynamic/json.svg?style=plastic&color=2096F3&label=locize&query=%24.versions%5B%27latest%27%5D.translatedPercentage&url=https://api.locize.app/badgedata/658fc999-dfa8-4307-b9d7-b4870ad5b968&suffix=%+translated&link=https://www.locize.com&prefix=latest:+)](https://www.locize.io/p/w7jrmdie/statistics/badges) -[![Locize Production version](https://img.shields.io/badge/dynamic/json.svg?style=plastic&color=2096F3&label=locize&query=%24.versions%5B%27production%27%5D.translatedPercentage&url=https://api.locize.app/badgedata/658fc999-dfa8-4307-b9d7-b4870ad5b968&suffix=%+translated&link=https://www.locize.com&prefix=production:+)](https://www.locize.io/p/w7jrmdie/statistics/badges) +[![Locize Latest version](https://img.shields.io/badge/dynamic/json.svg?style=plastic&color=2096F3&label=locize&query=%24.versions%5B%27latest%27%5D.translatedPercentage&url=https://api.locize.app/badgedata/658fc999-dfa8-4307-b9d7-b4870ad5b968&suffix=%+translated&link=https://www.locize.com&prefix=latest:+)](https://www.locize.app/p/w7jrmdie/statistics/badges) +[![Locize Production version](https://img.shields.io/badge/dynamic/json.svg?style=plastic&color=2096F3&label=locize&query=%24.versions%5B%27production%27%5D.translatedPercentage&url=https://api.locize.app/badgedata/658fc999-dfa8-4307-b9d7-b4870ad5b968&suffix=%+translated&link=https://www.locize.com&prefix=production:+)](https://www.locize.app/p/w7jrmdie/statistics/badges) Next Right Now === @@ -340,7 +340,7 @@ See the [official documentation](https://graphcms.com/docs/api/content-api/?ref= > When the content we want to display doesn't come from GraphCMS API, then it's considered as a "static" content. > -> This means that the content is managed by [Locize](https://www.locize.io/p/w7jrmdie/v/latest) and must be updated manually there. +> This means that the content is managed by [Locize](https://www.locize.app/p/w7jrmdie/v/latest) and must be updated manually there. Check [this video](https://www.youtube.com/watch?v=9NOzJhgmyQE) to see Locize in action with react-i18next. @@ -361,13 +361,13 @@ Once you're ready to ship the content to production, the `production` version ca #### Locize additional services -Locize provides a few [additional services](https://www.locize.io/p/w7jrmdie/services). Some are free, some are paid. +Locize provides a few [additional services](https://www.locize.app/p/w7jrmdie/services). Some are free, some are paid. #### Other additional services -- One interesting thing is the ability to share part of the project to be translated by a third party using [`Crowdbased`](https://www.locize.io/p/w7jrmdie/services), without sharing the whole project. -- There are also several paid [Translation services](https://www.locize.io/p/w7jrmdie/services), where you can pay people to translate your content. -- It is also possible to enable [Audit](https://www.locize.io/p/w7jrmdie/services), which allows to audit every change to our translations, and keep changes up to 10 years. (_expensive_) +- One interesting thing is the ability to share part of the project to be translated by a third party using [`Crowdbased`](https://www.locize.app/p/w7jrmdie/services), without sharing the whole project. +- There are also several paid [Translation services](https://www.locize.app/p/w7jrmdie/services), where you can pay people to translate your content. +- It is also possible to enable [Audit](https://www.locize.app/p/w7jrmdie/services), which allows to audit every change to our translations, and keep changes up to 10 years. (_expensive_) --- @@ -438,7 +438,7 @@ Here is how the multiple steps are ordered: 1. A new Zeit deployment is triggered, which runs our tests first (`yarn test:once`) (Failing tests will stop the deployment) 1. Then, the deployment is deployed, and automatically linked to a custom domain which depends on the git branch name (xxx.now.sh) 1. Then, our 2E2 tests are triggered using Cypress - - If they fail, artifacts (screenshots, videos) recorded by Cypress are uploaded to Github to help further debug + - If they fail, artifacts (screenshots, videos) recorded by Cypress are uploaded to Github to help further debug (See [example](https://github.com/UnlyEd/next-right-now/runs/474607960)) ## In-depth project's dependencies diff --git a/cypress/integration/app/pages/index.js b/cypress/integration/app/pages/index.js index 9554c66b8..7ebfd4476 100644 --- a/cypress/integration/app/pages/index.js +++ b/cypress/integration/app/pages/index.js @@ -26,11 +26,11 @@ describe('Index page', () => { cy.get('#nav a.nav-link').should('have.length', 3); }); - it('should have a link in the navbar that redirects to the terms page', () => { + it('should have a link in the navbar that redirects to the examples page', () => { cy.url().should('eq', `${baseUrl}/`); cy.get('#nav-link-terms') - .should('have.text', 'Terms') + .should('have.text', 'Examples') .click(); - cy.url().should('eq', `${baseUrl}/terms`); + cy.url().should('eq', `${baseUrl}/examples`); }); }); diff --git a/src/components/Nav.tsx b/src/components/Nav.tsx index 25125f226..788da1195 100644 --- a/src/components/Nav.tsx +++ b/src/components/Nav.tsx @@ -196,18 +196,18 @@ const Nav: React.FunctionComponent = (props: Props) => { - + - {t('nav.termsPage.link', 'CGU')} + {t('nav.examplesPage.link', 'Exemples')} diff --git a/src/pages/examples.tsx b/src/pages/examples.tsx new file mode 100644 index 000000000..6c9914583 --- /dev/null +++ b/src/pages/examples.tsx @@ -0,0 +1,147 @@ +/** @jsx jsx */ +import { Amplitude, LogOnMount } from '@amplitude/react-amplitude'; +import { css, jsx } from '@emotion/core'; +import * as Sentry from '@sentry/node'; +import { isBrowser } from '@unly/utils'; +import { createLogger } from '@unly/utils-simple-logger'; +import { NextPage } from 'next'; +// eslint-disable-next-line @typescript-eslint/no-unused-vars,no-unused-vars +import React from 'react'; +import { Trans, useTranslation, UseTranslationResponse } from 'react-i18next'; +import { Alert, Container } from 'reactstrap'; +import uuid from 'uuid/v1'; + +import Head from '../components/Head'; +import { PageProps } from '../types/PageProps'; + +const fileLabel = 'pages/examples'; +const logger = createLogger({ // eslint-disable-line no-unused-vars,@typescript-eslint/no-unused-vars + label: fileLabel, +}); + +const Examples: NextPage = (props: PageProps): JSX.Element => { + const { t }: UseTranslationResponse = useTranslation(); + + Sentry.addBreadcrumb({ // See https://docs.sentry.io/enriching-error-data/breadcrumbs + category: fileLabel, + message: `Rendering examples page (${isBrowser() ? 'browser' : 'server'})`, + level: Sentry.Severity.Debug, + }); + + return ( + ({ + ...inheritedProps, + page: { + ...inheritedProps.page, + name: 'examples', + }, + })} + > + {({ logEvent }): JSX.Element => ( + <> + + +
+

Code snippet examples

+ +
+ +

i18n examples

+ +
+ Each example shows the rendered version and its code snippet.
+ The goal is to showcase real-world examples to help you get started faster and give a wider overview of what's possible.
+ + Check the official documentation + +
+ + + +
+ {t('examples.i18n.simpleTranslation', 'Traduction simple')}
+ {'{t(\'examples.i18n.simpleTranslation\', \'Traduction simple\')}'} +
+
+ +
+ {t('examples.i18n.pluralTranslation', 'Traduction avec gestion du pluriel', { count: 1 })}
+ {'{t(\'examples.i18n.pluralTranslation\', \'Traduction avec gestion du pluriel\', { count: 1 })}'} +
+
+ {t('examples.i18n.pluralTranslation', 'Traduction avec gestion du pluriel', { count: 2 })}
+ {'{t(\'examples.i18n.pluralTranslation\', \'Traduction avec gestion du pluriel\', { count: 2 })}'} +
+
+ +
+ + Contenu dynamique : {{ uuid: uuid() }} + +
+ + {'\n' + + ' Contenu dynamique : {{ uuid: uuid() }}\n' + + ''} + +
+
+ +
+ + Nous avons trouvé {{ count: 1 }} solution pour vous. + +
+ + {'\n' + + ' Nous avons trouvé {{ count: 1 }} solution pour vous.\n' + + ''} + +
+
+ + Nous avons trouvé {{ count: 2 }} solution pour vous. + +
+ + {'\n' + + ' Nous avons trouvé {{ count: 2 }} solution pour vous.\n' + + ''} + +
+
+ + +
+ + )} + + ); + +}; + +export default Examples; diff --git a/src/pages/index.tsx b/src/pages/index.tsx index d78d4abb5..c803c4ae1 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -104,10 +104,6 @@ const Home: NextPage = (props: PageProps): JSX.Element => { margin-left: auto; margin-right: auto; - a:hover{ - text-decoration: none; - } - .product-container { background-color: white; border-radius: 10px; @@ -131,7 +127,7 @@ const Home: NextPage = (props: PageProps): JSX.Element => {
We use a custom component GraphCMSAsset to display images.

- You can navigate between /terms and / to see CSR in action.
+ You can navigate between /examples and / to see CSR in action.
You can also disable JS on your browser to see how SSR works.

You can also use diff --git a/src/pages/terms.tsx b/src/pages/terms.tsx index 5dad5311d..4ed53476c 100644 --- a/src/pages/terms.tsx +++ b/src/pages/terms.tsx @@ -37,7 +37,7 @@ const Terms: NextPage = (props: PageProps): JSX.Element => { Sentry.addBreadcrumb({ // See https://docs.sentry.io/enriching-error-data/breadcrumbs category: fileLabel, - message: `Rendering index page (${isBrowser() ? 'browser' : 'server'})`, + message: `Rendering terms page (${isBrowser() ? 'browser' : 'server'})`, level: Sentry.Severity.Debug, }); diff --git a/src/utils/i18nextLocize.ts b/src/utils/i18nextLocize.ts index 9bf6b6504..4a8d2a62d 100644 --- a/src/utils/i18nextLocize.ts +++ b/src/utils/i18nextLocize.ts @@ -154,8 +154,7 @@ export const locizeBackendOptions = { ...locizeOptions, // XXX "build" is meant to automatically invalidate the browser cache when releasing a different version, // so that the end-users get the newest version immediately - loadPath: `https://api.locize.io/{{projectId}}/{{version}}/{{lng}}/{{ns}}?build=${process.env.BUILD_TIMESTAMP}`, - addPath: `https://api.locize.io/missing/{{projectId}}/{{version}}/{{lng}}/{{ns}}`, + loadPath: `https://api.locize.app/{{projectId}}/{{version}}/{{lng}}/{{ns}}?build=${process.env.BUILD_TIMESTAMP}`, private: false, // Should never be private /** @@ -207,7 +206,7 @@ export const locizeBackendOptions = { * - The browser's cache is completely disabled in development/staging, so that we may work/test with the latest translation * See the official recommendations https://docs.locize.com/more/caching * - Production stage: - * - When in production, the browser will also cache for 1h, because we configured a "Cache-control: Max-Age" at https://www.locize.io/p/w7jrmdie/settings + * - When in production, the browser will also cache for 1h, because we configured a "Cache-control: Max-Age" at https://www.locize.app/p/w7jrmdie/settings * We followed the official recommendations https://docs.locize.com/more/caching * 1h seems to be a good compromise between over-fetching (we don't expect our users to use the app for more than 1h straight) * and applying translation "hot-fix" (worst case: "hot-fix"" be applied 1h later, which is acceptable)