Documentation update for v2-mst-aptd-at-lcz-sty

.github/workflows/deploy-vercel-production.yml

@@ -36,6 +36,7 @@ on:
   push: # Triggers on each pushed commit
     branches:
       - 'master'
+      - 'main'
 
   # Allow manual trigger via a button in github or a HTTP call - See https://docs.github.com/en/actions/configuring-and-managing-workflows/configuring-a-workflow#manually-running-a-workflow
   # XXX Read more about how to use it with NRN in .github/WORKFLOW_DISPATCH.md

.github/workflows/deploy-vercel-staging.yml

@@ -36,6 +36,7 @@ on:
   push: # Triggers on each pushed commit
     branches-ignore:
       - 'master'
+      - 'main'
 
   # Allow manual trigger via a button in github or a HTTP call - See https://docs.github.com/en/actions/configuring-and-managing-workflows/configuring-a-workflow#manually-running-a-workflow
   # XXX Read more about how to use it with NRN in .github/WORKFLOW_DISPATCH.md

.github/workflows/update-codeclimate-coverage.yml

@@ -1,6 +1,7 @@
 # Summary:
-# Run Unit and coverage tests, then upload it to Code Climate dashboard
-# Read ./README.md for extensive documentation
+# Runs unit and coverage tests, then uploads the coverage results to the Code Climate dashboard.
+#
+# LEARN MORE AT https://unlyed.github.io/next-right-now/guides/ci-cd/
 #
 # Dependencies overview:
 # - https://github.com/paambaati/codeclimate-action https://github.com/paambaati/codeclimate-action/tree/v2.6.0
@@ -10,7 +11,7 @@ name: Update Code Climate test coverage
 on:
   push:
     branches:
-      - 'v2-mst-aptd-at-lcz-sty' # Change this branch name by your CodeClimate "main" branch use
+      - 'v2-mst-aptd-at-lcz-sty' # Change this branch name by your CodeClimate "main" branch
 
 jobs:
   # Configures the deployment environment, install dependencies (like node, npm, etc.) that are requirements for the upcoming jobs

docs/_sass/custom/custom.scss

@@ -1,8 +1,28 @@
 // XXX Overrides CSS styles - See https://pmarsceill.github.io/just-the-docs/docs/customization/#override-and-completely-custom-styles
 
 blockquote {
-  border-left: #f4f1fa 1px solid;
-  padding-left: 25px;
+  background: #f9f9f9;
+  border-left: 3px solid #a493f2;
+  margin: 1.5em 10px;
+  padding: 0.5em 10px;
+
+  &:before,
+  &:after {
+    color: #a493f2;
+  }
+
+  &:before {
+    content: '"';
+  }
+
+  &:after {
+    content: '"';
+  }
+
+  p:first-child,
+  p:last-child {
+    display: inline;
+  }
 }
 
 .pagination-section {

package.json

@@ -4,8 +4,8 @@
   "scripts": {
     "start": ". ./scripts/populate-git-env.sh && next dev --port 8888",
     "start:tunnel": "ngrok http 8888",
-    "build": "yarn test:once && next build",
-    "build:profiler": "next build --profile",
+    "build": "yarn test:once:group:no-integration && next build",
+    "build:profiler": ". ./scripts/populate-git-env.sh && next build --profile --debug",
     "analyse:bundle": "yarn analyse:bundle:production",
     "analyse:bundle:development": "ANALYZE_BUNDLE=true yarn start",
     "analyse:bundle:production": "ANALYZE_BUNDLE=true next build",
@@ -23,12 +23,12 @@
     "deploy:customer1:production": "yarn deploy:customer1:production:simple && yarn e2e:customer1:production",
     "deploy:customer1:production:simple": "yarn vercel:cleanup && yarn vercel:deploy --local-config=vercel.customer1.production.json --prod",
     "deploy:customer2:all": "yarn deploy:customer2 && yarn deploy:customer2:production",
-    "deploy:customer2": "yarn vercel:cleanup && yarn vercel:deploy --local-config=vercel.customer2.staging.json --debug",
+    "deploy:customer2": "yarn vercel:cleanup && yarn vercel:deploy --local-config=vercel.customer2.staging.json",
     "deploy:customer2:production": "yarn deploy:customer2:production:simple && yarn e2e:customer2:production",
     "deploy:customer2:production:simple": "yarn vercel:cleanup && yarn vercel:deploy --local-config=vercel.customer2.production.json --prod",
     "deploy:fake": "git commit --allow-empty -m \"Fake empty commit (force CI trigger)\"",
-    "vercel:cleanup": "npx del-cli .vercel/ && npx del-cli .vercel/",
-    "vercel:deploy": ". ./scripts/populate-git-env.sh && vercel -b GIT_COMMIT_TAGS=$GIT_COMMIT_TAGS -b GIT_COMMIT_REF=$GIT_COMMIT_REF -b GIT_COMMIT_SHA=$GIT_COMMIT_SHA --confirm --debug --force",
+    "vercel:cleanup": "npx del-cli .vercel/",
+    "vercel:deploy": ". ./scripts/populate-git-env.sh && vercel --build-env GIT_COMMIT_TAGS=$GIT_COMMIT_TAGS --build-env GIT_COMMIT_REF=$GIT_COMMIT_REF --build-env GIT_COMMIT_SHA=$GIT_COMMIT_SHA --confirm --debug --force",
     "script:populate-git-env:print": ". ./scripts/populate-git-env.sh && echo 'SHA: '${GIT_COMMIT_SHA} && echo 'REF (current branch/tag): '${GIT_COMMIT_REF} && echo 'TAGS: '${GIT_COMMIT_TAGS}",
     "git:getReleasesAndTags": "git tag --points-at HEAD | tr '\\r\\n' ' '",
     "git:getCommitSHA": "git rev-parse HEAD",
@@ -45,11 +45,12 @@
     "e2e:run": "CYPRESS_STAGE=${CYPRESS_STAGE:-development}; cypress run --config-file cypress/config-$CYPRESS_STAGE.json",
     "e2e:run:spec:common": "CYPRESS_STAGE=${CYPRESS_STAGE:-development}; cypress run --config-file cypress/config-$CYPRESS_STAGE.json --spec 'cypress/integration/app/common/*.js'",
     "e2e:ci": "yarn e2e:install && cypress run --record",
-    "preversion": "yarn lint:once && yarn test:once",
-    "release": "yarn bump --commit --tag && git add CHANGELOG.md README.md && git commit --amend --no-edit && git push && git push --tags",
     "doc:start": "cd docs/ && bundle exec jekyll serve --config _config-development.yml",
     "doc:start:fast": "cd docs/ && bundle exec jekyll serve --config _config-development.yml --incremental",
     "doc:gem:install": "cd docs/ && bundle install",
+    "doc": "yarn doc:online",
+    "doc:online": "open-cli https://unlyed.github.io/next-right-now/",
+    "doc:online:scripts": "open-cli https://unlyed.github.io/next-right-now/guides/scripts-and-utilities",
     "bump:major": "git commit --allow-empty -m \"(MAJOR) Empty commit, bumps MAJOR version\"",
     "bump:minor": "git commit --allow-empty -m \"(MINOR) Empty commit, bumps MINOR version\"",
     "lint": "esw src/ -w --ext .ts --ext .tsx",
@@ -217,10 +218,10 @@
     "next-unused": "0.0.3",
     "ngrok": "3.3.0",
     "node-mocks-http": "1.9.0",
+    "open-cli": "6.0.1",
     "react-test-renderer": "16.13.1",
     "ts-jest": "26.3.0",
     "typescript": "4.0.2",
-    "vercel": "21.0.0",
-    "version-bump-prompt": "6.1.0"
+    "vercel": "21.0.0"
   }
 }

src/components/pageLayouts/Footer.tsx

@@ -5,7 +5,6 @@ import { useTranslation } from 'react-i18next';
 
 import { NRN_CO_BRANDING_LOGO_URL } from '../../constants';
 import useCustomer from '../../hooks/useCustomer';
-import useUserSession, { UserSession } from '../../hooks/useUserSession';
 import { CSSStyles } from '../../types/CSSStyles';
 import { AirtableRecord } from '../../types/data/AirtableRecord';
 import { Asset } from '../../types/data/Asset';
@@ -16,7 +15,6 @@ import AirtableAsset from '../assets/AirtableAsset';
 import Logo from '../assets/Logo';
 import I18nBtnChangeLocale from '../i18n/I18nBtnChangeLocale';
 import I18nLink from '../i18n/I18nLink';
-import DisplayOnBrowserMount from '../rehydration/DisplayOnBrowserMount';
 
 type Props = {
   style?: CSSStyles;
@@ -27,12 +25,15 @@ const Footer: React.FunctionComponent<Props> = (props) => {
     style,
   } = props;
   const { t } = useTranslation();
-  const { deviceId }: UserSession = useUserSession();
   const customer: Customer = useCustomer();
   const { availableLanguages } = customer;
   const shouldDisplayI18nButton = availableLanguages?.length > 1;
   const theme = useTheme<CustomerTheme>();
-  const { backgroundColor, onBackgroundColor, logo } = theme;
+  const {
+    backgroundColor,
+    onBackgroundColor,
+    logo,
+  } = theme;
   const logoSizesMultipliers = [
     {
       size: SIZE_XS,
@@ -137,33 +138,6 @@ const Footer: React.FunctionComponent<Props> = (props) => {
             {t('footer.privacy.link', 'Politique de confidentialité')}
           </div>
         </I18nLink>
-        <div
-          css={css`
-            margin-top: 10px;
-
-            i {
-              cursor: help;
-            }
-          `}
-        >
-          <i
-            title={'This is only informational, your activity on this website is being tracked for analytics purposes and demonstration on how to perform analytics with Next.js and Amplitude (this uses userSessionContext store provider)'}
-          >
-            Device id (analytics):<br />
-            <DisplayOnBrowserMount
-              // When using SSR, we want to render the deviceId immediately because we have access to it through server cookies
-              // When using SSG, we need to wait for the browser render because we don't have access to the cookies when generating the static page
-              // To test the different behaviours, refresh the both /examples and /products page with JS disabled
-              // and notice how the deviceId is properly included in the HTML with SSR (/products), unlike SSG (/examples) where it's empty
-
-              // XXX This example showcase this complex behaviour. You may want to do something similar for a "Profile" section in <Nav>,
-              //  that can be rendered using both SSG/SSR depending on the page, where SSR should render the component but SSG should wait for browser re-render
-              deps={[deviceId]}
-            >
-              <code>{deviceId}</code>
-            </DisplayOnBrowserMount>
-          </i>
-        </div>
       </section>
       {
         shouldDisplayI18nButton && (

src/pages/[locale]/examples/built-in-features/analytics.tsx

@@ -1,4 +1,5 @@
 import { Amplitude } from '@amplitude/react-amplitude';
+import { css } from '@emotion/core';
 import { createLogger } from '@unly/utils-simple-logger';
 import {
   GetStaticPaths,
@@ -19,6 +20,7 @@ import DisplayOnBrowserMount from '../../../../components/rehydration/DisplayOnB
 import Code from '../../../../components/utils/Code';
 import ExternalLink from '../../../../components/utils/ExternalLink';
 import useUserConsent from '../../../../hooks/useUserConsent';
+import useUserSession, { UserSession } from '../../../../hooks/useUserSession';
 import { LogEvent } from '../../../../types/Amplitude';
 import { CommonServerSideParams } from '../../../../types/nextjs/CommonServerSideParams';
 import { OnlyBrowserPageProps } from '../../../../types/pageProps/OnlyBrowserPageProps';
@@ -60,7 +62,11 @@ export const getStaticProps: GetStaticProps<SSGPageProps, CommonServerSideParams
 type Props = {} & SSGPageProps<Partial<OnlyBrowserPageProps>>;
 
 const ExampleAnalyticsPage: NextPage<Props> = (props): JSX.Element => {
-  const { isUserOptedOutOfAnalytics, hasUserGivenAnyCookieConsent } = useUserConsent();
+  const {
+    isUserOptedOutOfAnalytics,
+    hasUserGivenAnyCookieConsent,
+  } = useUserConsent();
+  const { deviceId }: UserSession = useUserSession();
 
   return (
     <DefaultLayout
@@ -261,6 +267,59 @@ const ExampleAnalyticsPage: NextPage<Props> = (props): JSX.Element => {
               `}
             />
 
+            <hr />
+
+            <div
+              css={css`
+                margin-top: 10px;
+
+                i {
+                  cursor: help;
+                }
+              `}
+            >
+              <h2>
+                Your Amplitude <code>Device ID</code>
+              </h2>
+
+              <Alert color={'info'}>
+                This is only informational, your activity on this website is being tracked for analytics purposes and demonstration on how to perform analytics with Next.js and Amplitude (this uses userSessionContext store provider).
+              </Alert>
+
+              <DisplayOnBrowserMount
+                // When using SSR, we want to render the deviceId immediately because we have access to it through server cookies
+                // When using SSG, we need to wait for the browser render because we don't have access to the cookies when generating the static page
+                // To test the different behaviours, refresh the both /examples and /products page with JS disabled
+                // and notice how the deviceId is properly included in the HTML with SSR (/products), unlike SSG (/examples) where it's empty
+
+                // XXX This example showcase this complex behaviour. You may want to do something similar for a "Profile" section in <Nav>,
+                //  that can be rendered using both SSG/SSR depending on the page, where SSR should render the component but SSG should wait for browser re-render
+                deps={[deviceId]}
+              >
+                <code>{deviceId}</code>
+              </DisplayOnBrowserMount>
+
+              <br />
+              <br />
+
+              <Code
+                text={`
+                  <DisplayOnBrowserMount
+                    // When using SSR, we want to render the deviceId immediately because we have access to it through server cookies
+                    // When using SSG, we need to wait for the browser render because we don't have access to the cookies when generating the static page
+                    // To test the different behaviours, refresh the both /examples and /products page with JS disabled
+                    // and notice how the deviceId is properly included in the HTML with SSR (/products), unlike SSG (/examples) where it's empty
+
+                    // XXX This example showcase this complex behaviour. You may want to do something similar for a "Profile" section in <Nav>,
+                    //  that can be rendered using both SSG/SSR depending on the page, where SSR should render the component but SSG should wait for browser re-render
+                    deps={[deviceId]}
+                  >
+                    <code>{deviceId}</code>
+                  </DisplayOnBrowserMount>
+                `}
+              />
+            </div>
+
           </DocPage>
         )}
       </Amplitude>

src/pages/api/preview.ts

@@ -22,32 +22,34 @@ const logger = createLogger({
  */
 export const NO_AUTO_PREVIEW_MODE_KEY = 'noAutoPreviewMode';
 
-type EndpointRequest = NextApiRequest & {
-  query: {
-    /**
-     * Whether to start/stop the Preview Mode.
-     *
-     * @example ?stop=true Will stop the preview mode.
-     * @example ?stop=false Will start the preview mode.
-     * @default ?stop=false
-     */
-    stop: string;
+type EndpointRequestQuery = {
+  /**
+   * Whether to start/stop the Preview Mode.
+   *
+   * @example ?stop=true Will stop the preview mode.
+   * @example ?stop=false Will start the preview mode.
+   * @default ?stop=false
+   */
+  stop: string;
 
-    /**
-     * Url to redirect to once the preview mode has been started/stopped.
-     *
-     * @example ?redirectTo=/en
-     * @example ?redirectTo=/fr/solutions
-     * @default ?redirectTo=/
-     */
-    redirectTo: string;
-  }
+  /**
+   * Url to redirect to once the preview mode has been started/stopped.
+   *
+   * @example ?redirectTo=/en
+   * @example ?redirectTo=/fr/solutions
+   * @default ?redirectTo=/
+   */
+  redirectTo: string;
+}
+
+type EndpointRequest = NextApiRequest & {
+  query: EndpointRequestQuery;
 };
 
 /**
- * Preview Mode API
+ * Preview Mode API.
  *
- * Enables and disables preview mode
+ * Enables and disables preview mode.
  *
  * The official example uses a security token to enable the preview mode, we don't.
  * This is a choice, as we don't need/want to protect our preview mode.
@@ -56,6 +58,7 @@ type EndpointRequest = NextApiRequest & {
  *
  * @param req
  * @param res
+ * @method GET
  *
  * @see https://nextjs.org/docs/advanced-features/preview-mode#step-1-create-and-access-a-preview-api-route
  * @see https://nextjs.org/docs/advanced-features/preview-mode#clear-the-preview-mode-cookies
@@ -67,7 +70,7 @@ export const preview = async (req: EndpointRequest, res: NextApiResponse): Promi
     const {
       stop = 'false',
       redirectTo = '/',
-    } = req.query;
+    }: EndpointRequestQuery = req.query;
     // Add NO_AUTO_PREVIEW_MODE_KEY parameter to query, to avoid running into infinite loops if the Preview mode couldn't start
     // Useful when the cookie created by Next.js cannot be written (Incognito mode)
     const safeRedirectUrl = appendQueryParameter(filterExternalAbsoluteUrl(redirectTo as string), `${NO_AUTO_PREVIEW_MODE_KEY}=true`);