From 8917b5dd431089a5360fedf9842be7ebaa0a5106 Mon Sep 17 00:00:00 2001 From: Michael Novotny Date: Fri, 5 Aug 2022 14:38:30 -0500 Subject: [PATCH 01/48] Installs Next.js, removes Babel, configures Emotion (what Simorgh uses), and adds Next.js `/news` base route. --- .babelrc.js | 77 ------------------ .gitignore | 3 +- next-env.d.ts | 5 ++ next.config.js | 8 ++ package.json | 6 +- pages/_app.tsx | 12 +++ pages/news.jsx | 14 ++++ tsconfig.json | 17 +++- yarn.lock | 207 +++++++++++++++++++++++++++++++++++++++++++++++++ 9 files changed, 266 insertions(+), 83 deletions(-) delete mode 100644 .babelrc.js create mode 100644 next-env.d.ts create mode 100644 next.config.js create mode 100644 pages/_app.tsx create mode 100644 pages/news.jsx diff --git a/.babelrc.js b/.babelrc.js deleted file mode 100644 index 357b1a704fb..00000000000 --- a/.babelrc.js +++ /dev/null @@ -1,77 +0,0 @@ -var plugins = [ - '@emotion', - '@babel/plugin-proposal-object-rest-spread', // allows ...spread notation - '@babel/plugin-syntax-dynamic-import', // allows `await import()` syntax - '@babel/plugin-proposal-export-default-from', - '@babel/plugin-transform-runtime', - '@loadable/babel-plugin', -]; - -// allows dynamic `import()` in Node tests. -if (process.env.NODE_ENV === 'test') { - plugins.push('dynamic-import-node'); - plugins.push('@babel/plugin-proposal-throw-expressions'); // allows `throw new Error();` -} - -if (process.env.NODE_ENV === 'production') { - plugins.push([ - 'transform-react-remove-prop-types', - { - mode: 'remove', - removeImport: true, - }, - ]); -} - -const overrides = [ - { - test: /.*logger\..*/, - sourceType: 'script', - }, -]; - -module.exports = api => { - const env = api.env(); - const useModern = env === 'modern'; - - const presets = [ - [ - '@babel/preset-env', - { - targets: { - ...(useModern - ? { - browsers: ['safari > 9', 'supports es6-module'], - } - : { - browsers: [ - 'chrome >= 53', - 'firefox >= 45.0', - 'ie >= 11', - 'edge >= 37', - 'safari >= 9', - 'opera >= 40', - 'op_mini >= 18', - 'Android >= 7', - 'and_chr >= 53', - 'and_ff >= 49', - 'ios_saf >= 10', - ], - }), - node: 'current', - }, - // analyses code & polyfills only the features that are used, only for the targeted browsers - useBuiltIns: 'usage', - corejs: '3', - }, - ], - '@babel/preset-react', // transform JSX to JS - '@babel/preset-typescript', - ]; - - return { - presets, - plugins, - overrides, - }; -}; diff --git a/.gitignore b/.gitignore index 55103354c23..69e224021b1 100644 --- a/.gitignore +++ b/.gitignore @@ -25,4 +25,5 @@ yarn-error.log !.yarn/sdks !.yarn/versions secret.env -tsconfig.tsbuildinfo \ No newline at end of file +tsconfig.tsbuildinfo +.next diff --git a/next-env.d.ts b/next-env.d.ts new file mode 100644 index 00000000000..4f11a03dc6c --- /dev/null +++ b/next-env.d.ts @@ -0,0 +1,5 @@ +/// +/// + +// NOTE: This file should not be edited +// see https://nextjs.org/docs/basic-features/typescript for more information. diff --git a/next.config.js b/next.config.js new file mode 100644 index 00000000000..3d978989cc3 --- /dev/null +++ b/next.config.js @@ -0,0 +1,8 @@ +const nextConfig = { + reactStrictMode: true, + compiler: { + emotion: true, + }, +}; + +module.exports = nextConfig; diff --git a/package.json b/package.json index f309a8504fc..bbaf711d8d9 100644 --- a/package.json +++ b/package.json @@ -75,7 +75,10 @@ "test:linkey:cleanup": "find src/app/lib/config/services -type f -name '*.test.js' -delete", "updateMinorPatch": "rm -rf node_modules/ && yarn install && npm update && yarn install", "webpack:dev:client": "NODE_ENV=development webpack serve --config-name='modern' --hot --env config='client'", - "webpack:dev:server": "wait-on ./build/public/modern-loadable-stats-local.json && NODE_ENV=development webpack --watch --progress --env config='server'" + "webpack:dev:server": "wait-on ./build/public/modern-loadable-stats-local.json && NODE_ENV=development webpack --watch --progress --env config='server'", + "next:build": "next build", + "next:dev": "next", + "next:start": "next start" }, "repository": { "type": "git", @@ -124,6 +127,7 @@ "moment": "2.29.4", "moment-timezone": "0.5.26", "morgan": "1.10.0", + "next": "^12.2.3", "path-to-regexp": "6.2.0", "polyfill-crypto.getrandomvalues": "1.0.0", "ramda": "0.28.0", diff --git a/pages/_app.tsx b/pages/_app.tsx new file mode 100644 index 00000000000..d50f8d74ce9 --- /dev/null +++ b/pages/_app.tsx @@ -0,0 +1,12 @@ +import createCache from '@emotion/cache'; +import { CacheProvider } from '@emotion/react'; + +const cache = createCache({ key: 'next' }); + +const App = ({ Component, pageProps }) => ( + + + +); + +export default App; diff --git a/pages/news.jsx b/pages/news.jsx new file mode 100644 index 00000000000..3e7af1248b8 --- /dev/null +++ b/pages/news.jsx @@ -0,0 +1,14 @@ +import styled from '@emotion/styled'; + +const P = styled.p` + color: black; + font-weight: bold; + &:hover { + background-color: black; + color: white; + } +`; + +const News = () =>

{'News'}

; + +export default News; diff --git a/tsconfig.json b/tsconfig.json index 01f66b337be..bab3d4606aa 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -1,7 +1,11 @@ { "compilerOptions": { "target": "es6", - "lib": ["dom", "dom.iterable", "esnext"], // List of library files to be included in the compilation + "lib": [ + "dom", + "dom.iterable", + "esnext" + ], // List of library files to be included in the compilation "allowJs": true, // Allow JavaScript files to be compiled "skipLibCheck": true, // Skip type checking of all declaration files "esModuleInterop": true, // Disables namespace imports (import * as fs from "fs") and enables CJS/AMD/UMD style imports (import fs from "fs") @@ -13,7 +17,7 @@ "isolatedModules": true, // Unconditionally emit imports for unresolved files "resolveJsonModule": true, // Include modules imported with .json extension "noEmit": true, // Do not emit output (meaning do not compile code, only perform type checkin - "jsx": "react", // Support JSX in .tsx files + "jsx": "preserve", // Support JSX in .tsx files "sourceMap": true, // Generate corrresponding .map file "declaration": true, // Generate corresponding .d.ts file "noUnusedLocals": true, // Report errors on unused locals @@ -21,6 +25,11 @@ "incremental": true, // Enable incremental compilation by reading/writing information from prior compilations to a file on disk "noFallthroughCasesInSwitch": true // Report errors for fallthrough cases in switch statement }, - "include": ["src/app/components/**/*"], - "exclude": ["node_modules", "build"] + "include": [ + "src/app/components/**/*" + ], + "exclude": [ + "node_modules", + "build" + ] } diff --git a/yarn.lock b/yarn.lock index a0c7b897c58..4b57c773659 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2951,6 +2951,104 @@ __metadata: languageName: node linkType: hard +"@next/env@npm:12.2.3": + version: 12.2.3 + resolution: "@next/env@npm:12.2.3" + checksum: e96dcbea3fbb3d6b6a0799fe2e41c4929ded383659709f5bd00b6479b0711b89891b72fb28753b428933871d5fd91792fa54bc64a74a038c704b5862d40821ec + languageName: node + linkType: hard + +"@next/swc-android-arm-eabi@npm:12.2.3": + version: 12.2.3 + resolution: "@next/swc-android-arm-eabi@npm:12.2.3" + conditions: os=android & cpu=arm + languageName: node + linkType: hard + +"@next/swc-android-arm64@npm:12.2.3": + version: 12.2.3 + resolution: "@next/swc-android-arm64@npm:12.2.3" + conditions: os=android & cpu=arm64 + languageName: node + linkType: hard + +"@next/swc-darwin-arm64@npm:12.2.3": + version: 12.2.3 + resolution: "@next/swc-darwin-arm64@npm:12.2.3" + conditions: os=darwin & cpu=arm64 + languageName: node + linkType: hard + +"@next/swc-darwin-x64@npm:12.2.3": + version: 12.2.3 + resolution: "@next/swc-darwin-x64@npm:12.2.3" + conditions: os=darwin & cpu=x64 + languageName: node + linkType: hard + +"@next/swc-freebsd-x64@npm:12.2.3": + version: 12.2.3 + resolution: "@next/swc-freebsd-x64@npm:12.2.3" + conditions: os=freebsd & cpu=x64 + languageName: node + linkType: hard + +"@next/swc-linux-arm-gnueabihf@npm:12.2.3": + version: 12.2.3 + resolution: "@next/swc-linux-arm-gnueabihf@npm:12.2.3" + conditions: os=linux & cpu=arm + languageName: node + linkType: hard + +"@next/swc-linux-arm64-gnu@npm:12.2.3": + version: 12.2.3 + resolution: "@next/swc-linux-arm64-gnu@npm:12.2.3" + conditions: os=linux & cpu=arm64 & libc=glibc + languageName: node + linkType: hard + +"@next/swc-linux-arm64-musl@npm:12.2.3": + version: 12.2.3 + resolution: "@next/swc-linux-arm64-musl@npm:12.2.3" + conditions: os=linux & cpu=arm64 & libc=musl + languageName: node + linkType: hard + +"@next/swc-linux-x64-gnu@npm:12.2.3": + version: 12.2.3 + resolution: "@next/swc-linux-x64-gnu@npm:12.2.3" + conditions: os=linux & cpu=x64 & libc=glibc + languageName: node + linkType: hard + +"@next/swc-linux-x64-musl@npm:12.2.3": + version: 12.2.3 + resolution: "@next/swc-linux-x64-musl@npm:12.2.3" + conditions: os=linux & cpu=x64 & libc=musl + languageName: node + linkType: hard + +"@next/swc-win32-arm64-msvc@npm:12.2.3": + version: 12.2.3 + resolution: "@next/swc-win32-arm64-msvc@npm:12.2.3" + conditions: os=win32 & cpu=arm64 + languageName: node + linkType: hard + +"@next/swc-win32-ia32-msvc@npm:12.2.3": + version: 12.2.3 + resolution: "@next/swc-win32-ia32-msvc@npm:12.2.3" + conditions: os=win32 & cpu=ia32 + languageName: node + linkType: hard + +"@next/swc-win32-x64-msvc@npm:12.2.3": + version: 12.2.3 + resolution: "@next/swc-win32-x64-msvc@npm:12.2.3" + conditions: os=win32 & cpu=x64 + languageName: node + linkType: hard + "@nodelib/fs.scandir@npm:2.1.5": version: 2.1.5 resolution: "@nodelib/fs.scandir@npm:2.1.5" @@ -4893,6 +4991,15 @@ __metadata: languageName: node linkType: hard +"@swc/helpers@npm:0.4.3": + version: 0.4.3 + resolution: "@swc/helpers@npm:0.4.3" + dependencies: + tslib: ^2.4.0 + checksum: 5c2f173e950dd3929d84ae48b3586a274d5a874e7cf2013b3d8081e4f8c723fa3a4d4e63b263e84bb7f06431f87b640e91a12655410463c81a3dc2bbc15eceda + languageName: node + linkType: hard + "@testing-library/dom@npm:8.13.0": version: 8.13.0 resolution: "@testing-library/dom@npm:8.13.0" @@ -16152,6 +16259,75 @@ __metadata: languageName: node linkType: hard +"next@npm:^12.2.3": + version: 12.2.3 + resolution: "next@npm:12.2.3" + dependencies: + "@next/env": 12.2.3 + "@next/swc-android-arm-eabi": 12.2.3 + "@next/swc-android-arm64": 12.2.3 + "@next/swc-darwin-arm64": 12.2.3 + "@next/swc-darwin-x64": 12.2.3 + "@next/swc-freebsd-x64": 12.2.3 + "@next/swc-linux-arm-gnueabihf": 12.2.3 + "@next/swc-linux-arm64-gnu": 12.2.3 + "@next/swc-linux-arm64-musl": 12.2.3 + "@next/swc-linux-x64-gnu": 12.2.3 + "@next/swc-linux-x64-musl": 12.2.3 + "@next/swc-win32-arm64-msvc": 12.2.3 + "@next/swc-win32-ia32-msvc": 12.2.3 + "@next/swc-win32-x64-msvc": 12.2.3 + "@swc/helpers": 0.4.3 + caniuse-lite: ^1.0.30001332 + postcss: 8.4.14 + styled-jsx: 5.0.2 + use-sync-external-store: 1.2.0 + peerDependencies: + fibers: ">= 3.1.0" + node-sass: ^6.0.0 || ^7.0.0 + react: ^17.0.2 || ^18.0.0-0 + react-dom: ^17.0.2 || ^18.0.0-0 + sass: ^1.3.0 + dependenciesMeta: + "@next/swc-android-arm-eabi": + optional: true + "@next/swc-android-arm64": + optional: true + "@next/swc-darwin-arm64": + optional: true + "@next/swc-darwin-x64": + optional: true + "@next/swc-freebsd-x64": + optional: true + "@next/swc-linux-arm-gnueabihf": + optional: true + "@next/swc-linux-arm64-gnu": + optional: true + "@next/swc-linux-arm64-musl": + optional: true + "@next/swc-linux-x64-gnu": + optional: true + "@next/swc-linux-x64-musl": + optional: true + "@next/swc-win32-arm64-msvc": + optional: true + "@next/swc-win32-ia32-msvc": + optional: true + "@next/swc-win32-x64-msvc": + optional: true + peerDependenciesMeta: + fibers: + optional: true + node-sass: + optional: true + sass: + optional: true + bin: + next: dist/bin/next + checksum: b13b42fbb327adca51abeef68aca4b31c82297f07eb3a12d31a3bf2c1aa9ca34cf1ab41bc2b9f4d3162623e70a1ddf230da39fd3ce241b1eea113a4a010a11fd + languageName: node + linkType: hard + "nice-try@npm:^1.0.4": version: 1.0.5 resolution: "nice-try@npm:1.0.5" @@ -19775,6 +19951,7 @@ __metadata: moment: 2.29.4 moment-timezone: 0.5.26 morgan: 1.10.0 + next: ^12.2.3 node-fetch: 2.6.7 npm-run-all: 4.1.5 ora: 5.4.1 @@ -20604,6 +20781,20 @@ __metadata: languageName: node linkType: hard +"styled-jsx@npm:5.0.2": + version: 5.0.2 + resolution: "styled-jsx@npm:5.0.2" + peerDependencies: + react: ">= 16.8.0 || 17.x.x || ^18.0.0-0" + peerDependenciesMeta: + "@babel/core": + optional: true + babel-plugin-macros: + optional: true + checksum: 86d55819ebeabd283a574d2f44f7d3f8fa6b8c28fa41687ece161bf1e910e04965611618921d8f5cd33dc6dae1033b926a70421ae5ea045440a9861edc3e0d87 + languageName: node + linkType: hard + "stylelint-config-recommended@npm:7.0.0": version: 7.0.0 resolution: "stylelint-config-recommended@npm:7.0.0" @@ -21347,6 +21538,13 @@ __metadata: languageName: node linkType: hard +"tslib@npm:^2.4.0": + version: 2.4.0 + resolution: "tslib@npm:2.4.0" + checksum: 8c4aa6a3c5a754bf76aefc38026134180c053b7bd2f81338cb5e5ebf96fefa0f417bff221592bf801077f5bf990562f6264fecbc42cd3309b33872cb6fc3b113 + languageName: node + linkType: hard + "tsutils@npm:^3.21.0": version: 3.21.0 resolution: "tsutils@npm:3.21.0" @@ -21858,6 +22056,15 @@ __metadata: languageName: node linkType: hard +"use-sync-external-store@npm:1.2.0": + version: 1.2.0 + resolution: "use-sync-external-store@npm:1.2.0" + peerDependencies: + react: ^16.8.0 || ^17.0.0 || ^18.0.0 + checksum: 5c639e0f8da3521d605f59ce5be9e094ca772bd44a4ce7322b055a6f58eeed8dda3c94cabd90c7a41fb6fa852210092008afe48f7038792fd47501f33299116a + languageName: node + linkType: hard + "use@npm:^3.1.0": version: 3.1.1 resolution: "use@npm:3.1.1" From b918444b1cced649835aeafce2939c065f574a5a Mon Sep 17 00:00:00 2001 From: Michael Novotny Date: Fri, 5 Aug 2022 15:06:29 -0500 Subject: [PATCH 02/48] Fixes lint errors. --- pages/_app.tsx | 11 +++++++++++ pages/news.jsx | 3 ++- 2 files changed, 13 insertions(+), 1 deletion(-) diff --git a/pages/_app.tsx b/pages/_app.tsx index d50f8d74ce9..14924d91538 100644 --- a/pages/_app.tsx +++ b/pages/_app.tsx @@ -1,5 +1,7 @@ import createCache from '@emotion/cache'; import { CacheProvider } from '@emotion/react'; +import React from 'react'; +import PropTypes from 'prop-types'; const cache = createCache({ key: 'next' }); @@ -9,4 +11,13 @@ const App = ({ Component, pageProps }) => ( ); +App.propTypes = { + Component: PropTypes.element.isRequired, + pageProps: PropTypes.oneOfType([PropTypes.object]), +}; + +App.defaultProps = { + pageProps: {}, +}; + export default App; diff --git a/pages/news.jsx b/pages/news.jsx index 3e7af1248b8..9ae94253dd7 100644 --- a/pages/news.jsx +++ b/pages/news.jsx @@ -1,4 +1,5 @@ import styled from '@emotion/styled'; +import React from 'react'; const P = styled.p` color: black; @@ -9,6 +10,6 @@ const P = styled.p` } `; -const News = () =>

{'News'}

; +const News = () =>

News

; export default News; From 245e395b56360e911803c107992abef722d8dd07 Mon Sep 17 00:00:00 2001 From: Michael Novotny Date: Fri, 5 Aug 2022 15:24:44 -0500 Subject: [PATCH 03/48] Attempting to fix import aliases. --- tsconfig.json | 29 +++++++++++++++++------------ 1 file changed, 17 insertions(+), 12 deletions(-) diff --git a/tsconfig.json b/tsconfig.json index bab3d4606aa..d585dd8dfdf 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -1,11 +1,7 @@ { "compilerOptions": { "target": "es6", - "lib": [ - "dom", - "dom.iterable", - "esnext" - ], // List of library files to be included in the compilation + "lib": ["dom", "dom.iterable", "esnext"], // List of library files to be included in the compilation "allowJs": true, // Allow JavaScript files to be compiled "skipLibCheck": true, // Skip type checking of all declaration files "esModuleInterop": true, // Disables namespace imports (import * as fs from "fs") and enables CJS/AMD/UMD style imports (import fs from "fs") @@ -25,11 +21,20 @@ "incremental": true, // Enable incremental compilation by reading/writing information from prior compilations to a file on disk "noFallthroughCasesInSwitch": true // Report errors for fallthrough cases in switch statement }, - "include": [ - "src/app/components/**/*" - ], - "exclude": [ - "node_modules", - "build" - ] + "include": ["src/app/components/**/*"], + "exclude": ["node_modules", "build"], + "paths": { + "#app": ["src/app/*"], + "#contexts": ["src/app/contexts/*"], + "#components": ["src/app/legacy/components/*"], + "#containers": ["src/app/legacy/containers/*"], + "#data": ["data/*"], + "#hooks": ["src/app/hooks/*"], + "#lib": ["src/app/lib/*"], + "#psammead": ["src/app/legacy/psammead/*"], + "#models": ["src/app/models/*"], + "#pages": ["src/app/pages/*"], + "#testHelpers": ["src/testHelpers/*"], + "#server": ["src/server/*"] + } } From 2d906078035036ff205e21bdaadfdf14d0d0ad84 Mon Sep 17 00:00:00 2001 From: Michael Novotny Date: Fri, 5 Aug 2022 16:09:10 -0500 Subject: [PATCH 04/48] Adds custom webpack moment timezone config. --- next.config.js | 13 ++++++++++--- 1 file changed, 10 insertions(+), 3 deletions(-) diff --git a/next.config.js b/next.config.js index 3d978989cc3..e1cacb5d3ce 100644 --- a/next.config.js +++ b/next.config.js @@ -1,8 +1,15 @@ -const nextConfig = { +const MomentTimezoneInclude = require('./src/app/legacy/psammead/moment-timezone-include/src'); + +module.exports = { reactStrictMode: true, compiler: { emotion: true, }, -}; + webpack: config => { + config.plugins.push( + new MomentTimezoneInclude({ startYear: 2010, endYear: 2025 }), + ); -module.exports = nextConfig; + return config; + }, +}; From c9ff0a9265cd238a0cd0358be131780171ab1b43 Mon Sep 17 00:00:00 2001 From: Michael Novotny Date: Fri, 5 Aug 2022 17:50:28 -0500 Subject: [PATCH 05/48] =?UTF-8?q?Missed=20asterisks.=20=F0=9F=A4=A6?= =?UTF-8?q?=E2=80=8D=E2=99=82=EF=B8=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- tsconfig.json | 24 ++++++++++++------------ 1 file changed, 12 insertions(+), 12 deletions(-) diff --git a/tsconfig.json b/tsconfig.json index d585dd8dfdf..aa3b2cf1d86 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -24,17 +24,17 @@ "include": ["src/app/components/**/*"], "exclude": ["node_modules", "build"], "paths": { - "#app": ["src/app/*"], - "#contexts": ["src/app/contexts/*"], - "#components": ["src/app/legacy/components/*"], - "#containers": ["src/app/legacy/containers/*"], - "#data": ["data/*"], - "#hooks": ["src/app/hooks/*"], - "#lib": ["src/app/lib/*"], - "#psammead": ["src/app/legacy/psammead/*"], - "#models": ["src/app/models/*"], - "#pages": ["src/app/pages/*"], - "#testHelpers": ["src/testHelpers/*"], - "#server": ["src/server/*"] + "#app/*": ["./src/app/*"], + "#contexts/*": ["./src/app/contexts/*"], + "#components/*": ["./src/app/legacy/components/*"], + "#containers/*": ["./src/app/legacy/containers/*"], + "#data/*": ["./data/*"], + "#hooks/*": [".src/app/hooks/*"], + "#psammead/*": ["./src/app/legacy/psammead/*"], + "#lib/*": ["./src/app/lib/*"], + "#models/*": ["./src/app/models/*"], + "#pages/*": ["./src/app/pages/*"], + "#testHelpers/*": ["./src/testHelpers/*"], + "#server/*": ["./src/server/*"] } } From 6eba7bb21ac50d2a99c7e3e744e79580f5d293ac Mon Sep 17 00:00:00 2001 From: Michael Novotny Date: Fri, 5 Aug 2022 18:22:51 -0500 Subject: [PATCH 06/48] Ignoring lint on build (at least for now). --- next.config.js | 10 ++-------- 1 file changed, 2 insertions(+), 8 deletions(-) diff --git a/next.config.js b/next.config.js index e1cacb5d3ce..40a25352024 100644 --- a/next.config.js +++ b/next.config.js @@ -1,15 +1,9 @@ -const MomentTimezoneInclude = require('./src/app/legacy/psammead/moment-timezone-include/src'); - module.exports = { reactStrictMode: true, compiler: { emotion: true, }, - webpack: config => { - config.plugins.push( - new MomentTimezoneInclude({ startYear: 2010, endYear: 2025 }), - ); - - return config; + eslint: { + ignoreDuringBuilds: true, }, }; From 877528583347231b35f90a74d623f2c8e22e1d77 Mon Sep 17 00:00:00 2001 From: Michael Novotny Date: Tue, 9 Aug 2022 16:50:40 -0500 Subject: [PATCH 07/48] Starts to wire things up, largely based on setting up React Context in a Next.js way. --- .nvmrc | 2 +- next.config.js | 10 ++ package.json | 1 + pages/_app.jsx | 73 ++++++++ pages/_app.tsx | 23 --- pages/api/news.js | 15 ++ pages/news.jsx | 29 +-- .../containers/ATIAnalytics/amp/index.jsx | 9 +- .../ATIAnalytics/canonical/index.jsx | 3 +- .../Ad/Canonical/CanonicalAdBootstrapJs.jsx | 43 ++--- .../containers/ComscoreAnalytics/index.jsx | 3 +- src/app/legacy/containers/Metadata/index.jsx | 17 +- .../gel-foundations/src/prop-types/index.js | 2 +- .../psammead/psammead-assets/src/svgs.jsx | 110 ++++++------ src/app/lib/logger.node.js | 169 +++++++++--------- src/app/pages/FrontPage/FrontPage.jsx | 5 +- yarn.lock | 10 ++ 17 files changed, 296 insertions(+), 228 deletions(-) create mode 100644 pages/_app.jsx delete mode 100644 pages/_app.tsx create mode 100644 pages/api/news.js diff --git a/.nvmrc b/.nvmrc index 82f87fa0a57..8351c19397f 100644 --- a/.nvmrc +++ b/.nvmrc @@ -1 +1 @@ -v12.18.4 +14 diff --git a/next.config.js b/next.config.js index 40a25352024..835a3feda74 100644 --- a/next.config.js +++ b/next.config.js @@ -1,3 +1,5 @@ +const { webpackDirAlias } = require('./dirAlias'); + module.exports = { reactStrictMode: true, compiler: { @@ -6,4 +8,12 @@ module.exports = { eslint: { ignoreDuringBuilds: true, }, + webpack: config => { + config.resolve.alias = { + ...webpackDirAlias, + ...config.resolve.alias, + }; + + return config; + }, }; diff --git a/package.json b/package.json index bbaf711d8d9..046466f6861 100644 --- a/package.json +++ b/package.json @@ -138,6 +138,7 @@ "react-router": "5.3.1", "react-router-config": "5.1.1", "react-router-dom": "5.3.1", + "swr": "^1.3.0", "url-parse": "1.5.10", "uuid": "8.3.2", "winston": "3.7.2", diff --git a/pages/_app.jsx b/pages/_app.jsx new file mode 100644 index 00000000000..9cc10538ee5 --- /dev/null +++ b/pages/_app.jsx @@ -0,0 +1,73 @@ +import { SWRConfig } from 'swr'; +import createCache from '@emotion/cache'; +import { CacheProvider } from '@emotion/react'; +import React from 'react'; +import PropTypes from 'prop-types'; +import Head from 'next/head'; +import { ToggleContextProvider } from '#contexts/ToggleContext'; +import { ServiceContextProvider } from '#contexts/ServiceContext'; +import getToggles from '#lib/config/toggles'; + +const cache = createCache({ key: 'next' }); + +const App = props => { + const { Component, pageProps, router } = props; + const { route } = router; + const service = route.split('/')?.[1]; + const language = + pageProps?.fallback?.['/api/news']?.metadata?.language || 'en-gb'; + + // Purposely not using `getToggles` from `#lib/utilities/getToggles` + // because it does a bunch of async logging, which means we'd need to use + // `useEffect` or `getInitialProps` and that would disable SSR. The benefit + // is not *that* important to warrant turning that off. + // + // import getToggles from '#lib/utilities/getToggles'; + // const toggles = await getToggles(service); + + const environment = process.env.SIMORGH_APP_ENV || 'local'; + const toggles = getToggles[environment]; + + return ( + + + fetch(resource, init).then(res => res.json()), + }} + > + + + + + + + + + + + + + + + + + ); +}; + +App.propTypes = { + Component: PropTypes.func.isRequired, + pageProps: PropTypes.oneOfType([PropTypes.object]), +}; + +App.defaultProps = { + pageProps: {}, +}; + +export default App; diff --git a/pages/_app.tsx b/pages/_app.tsx deleted file mode 100644 index 14924d91538..00000000000 --- a/pages/_app.tsx +++ /dev/null @@ -1,23 +0,0 @@ -import createCache from '@emotion/cache'; -import { CacheProvider } from '@emotion/react'; -import React from 'react'; -import PropTypes from 'prop-types'; - -const cache = createCache({ key: 'next' }); - -const App = ({ Component, pageProps }) => ( - - - -); - -App.propTypes = { - Component: PropTypes.element.isRequired, - pageProps: PropTypes.oneOfType([PropTypes.object]), -}; - -App.defaultProps = { - pageProps: {}, -}; - -export default App; diff --git a/pages/api/news.js b/pages/api/news.js new file mode 100644 index 00000000000..f0de717dc5e --- /dev/null +++ b/pages/api/news.js @@ -0,0 +1,15 @@ +import news from '#data/news/frontPage/index.json'; +import ms from 'ms'; + +const handler = async (request, response) => { + response.setHeader( + 'Cache-Control', + `public, s-maxage=${ms('1h')}, stale-while-revalidate=${ms('15m')}`, + ); + response.status(200); + response.json(news); + + return response; +}; + +export default handler; diff --git a/pages/news.jsx b/pages/news.jsx index 9ae94253dd7..738189887d5 100644 --- a/pages/news.jsx +++ b/pages/news.jsx @@ -1,15 +1,22 @@ -import styled from '@emotion/styled'; -import React from 'react'; +import useSWR from 'swr'; +import news from '#data/news/frontPage/index.json'; +import FrontPage from '#pages/FrontPage/FrontPage'; -const P = styled.p` - color: black; - font-weight: bold; - &:hover { - background-color: black; - color: white; - } -`; +const News = () => { + const { data } = useSWR('/api/news'); -const News = () =>

News

; + // MNTODO: Turn this into [service].jsx? + return ; +}; export default News; + +export async function getStaticProps() { + return { + props: { + fallback: { + '/api/news': news, + }, + }, + }; +} diff --git a/src/app/legacy/containers/ATIAnalytics/amp/index.jsx b/src/app/legacy/containers/ATIAnalytics/amp/index.jsx index dd4dc156e95..7faba0bde3b 100644 --- a/src/app/legacy/containers/ATIAnalytics/amp/index.jsx +++ b/src/app/legacy/containers/ATIAnalytics/amp/index.jsx @@ -1,13 +1,12 @@ import React from 'react'; import { string } from 'prop-types'; import getAmpAnalyticsJson from './ampAnalyticsJson'; +import Script from 'next/script'; const JsonInlinedScript = data => ( - ); const AmpATIAnalytics = ({ pageviewParams }) => { diff --git a/src/app/legacy/containers/ATIAnalytics/canonical/index.jsx b/src/app/legacy/containers/ATIAnalytics/canonical/index.jsx index df5d720a334..3eb28c2d075 100644 --- a/src/app/legacy/containers/ATIAnalytics/canonical/index.jsx +++ b/src/app/legacy/containers/ATIAnalytics/canonical/index.jsx @@ -1,6 +1,7 @@ import React, { useEffect, useState } from 'react'; import { string } from 'prop-types'; import sendBeacon from '#lib/analyticsUtils/sendBeacon'; +import Image from 'next/image'; const getNoJsATIPageViewUrl = atiPageViewUrl => atiPageViewUrl.includes('x8=[simorgh]') @@ -9,7 +10,7 @@ const getNoJsATIPageViewUrl = atiPageViewUrl => const renderNoScriptTrackingPixel = atiPageViewUrl => (