From 12fbaa58f62947a288e58627ae00c623d00ea12e Mon Sep 17 00:00:00 2001 From: Julien Bouquillon Date: Wed, 16 Jan 2019 17:17:53 +0100 Subject: [PATCH] fix(frontend): update next config to support IE10 - IE11 * fix(ie11): add P3P header * fix(ie11): fix some CSS issues * fix(ie11): force non ES6 module transpilation * fix(frontend): add IE10 support :hell: fix #229 fix #88 --- .../code-du-travail-api/src/server/index.js | 14 +- .../docs/css/components/_categories.css | 171 +++++++++--------- .../docs/css/components/_search.css | 2 + packages/code-du-travail-frontend/.babelrc.js | 18 +- .../code-du-travail-frontend/next.config.js | 54 +++--- .../code-du-travail-frontend/package.json | 1 + .../code-du-travail-frontend/pages/_app.js | 11 +- .../pages/_document.js | 5 +- yarn.lock | 5 + 9 files changed, 161 insertions(+), 120 deletions(-) diff --git a/packages/code-du-travail-api/src/server/index.js b/packages/code-du-travail-api/src/server/index.js index 18153ae909..3a8465787e 100644 --- a/packages/code-du-travail-api/src/server/index.js +++ b/packages/code-du-travail-api/src/server/index.js @@ -8,12 +8,14 @@ require("elastic-apm-node").start({ require("dotenv").config(); const path = require("path"); +const Koa = require("koa"); const bodyParser = require("koa-bodyparser"); const mount = require("koa-mount"); const send = require("koa-send"); const cors = require("@koa/cors"); + const DOCS_DIR = "../../../code-du-travail-data/dataset/courrier-type/docx"; -const Koa = require("koa"); + // const corsConf = require('./conf/cors') const apiRoutes = require("./routes/api"); const API_BASE_URL = require("./routes/api").BASE_URL; @@ -37,6 +39,16 @@ app.use(async (ctx, next) => { ctx.app.emit("error", err, ctx); } }); + +/** + * use a middleware for IE 10+ http xmlhttp requests + * https://blogs.msdn.microsoft.com/ieinternals/2013/09/17/a-quick-look-at-p3p/ + */ +app.use(async (ctx, next) => { + ctx.set("P3P", "NOI ADM DEV PSAi OUR OTRo STP IND COM NAV DEM"); + await next(); +}); + app.use(cors()); app.use(bodyParser()); app.use(apiRoutes.routes()); diff --git a/packages/code-du-travail-css/docs/css/components/_categories.css b/packages/code-du-travail-css/docs/css/components/_categories.css index bf763708c3..734c425abe 100755 --- a/packages/code-du-travail-css/docs/css/components/_categories.css +++ b/packages/code-du-travail-css/docs/css/components/_categories.css @@ -1,101 +1,100 @@ .categories { - /* Gutters between items. */ - /* https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Mastering_Wrapping_of_Flex_Items */ - --flex-gutter-size: 10px; + /* Gutters between items. */ + /* https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Mastering_Wrapping_of_Flex_Items */ + --flex-gutter-size: 10px; } .categories header { - margin-bottom: var(--spacing-large); + margin-bottom: var(--spacing-large); } .categories__list { - display: flex; /* Flex layout so items have equal height. */ - flex-wrap: wrap; - justify-content: flex-start; - align-content: flex-start; - list-style-type: none; - padding: 0; - /* Use negative margins on sides to create gutters that do not also + display: flex; /* Flex layout so items have equal height. */ + flex-wrap: wrap; + justify-content: flex-start; + align-content: flex-start; + list-style-type: none; + padding: 0; + /* Use negative margins on sides to create gutters that do not also create a gutter at the edges of the container. */ - margin: calc(var(--flex-gutter-size) * -1); + margin: calc(var(--flex-gutter-size) * -1); } .categories__list-item { - - /*width:calc(100%/4 - 2 * var(--flex-gutter-size)) ;*/ - /*flex: 0 0 250px;*/ - /*margin: var(--flex-gutter-size);*/ /* Gutters between items. */ - width: media( - calc(100%/4 - 2 * var(--flex-gutter-size)), - (--bp-tablet) calc(100%/3 - 2 * var(--flex-gutter-size)), - (--bp-mobile) calc(100% - 2 * var(--flex-gutter-size)), - ); - - margin: var(--flex-gutter-size); - text-align: center; - - & a, - & a:link, - & a:visited { - display: block; - height: 100%; - padding: var(--spacing-small) var(--spacing-base); - border: 1px solid var(--color-element-border); - border-radius: var(--border-radius-base); - background: var(--color-white); - color: var(--color-light-text); - text-decoration: none; - transition: all .2s ease; - } - - & a:focus, - & a:hover, - & a:active { - transform: scale(1.1); - border: 1px solid var(--color-focus); - box-shadow: 0 0 2px 2px var(--color-focus-shadow); - } - - & a:focus h3, - & a:hover h3, - & a:active h3 { - /*text-decoration: underline;*/ - - } - - & h3, & p { - font-size: 0.9375rem; - } - - & a img { - display: inline-block; - width: 2.5rem; - margin: var(--spacing-small) 0; - } + /*width:calc(100%/4 - 2 * var(--flex-gutter-size)) ;*/ + /*flex: 0 0 250px;*/ + /*margin: var(--flex-gutter-size);*/ /* Gutters between items. */ + width: media( + calc(100% / 4 - 2 * var(--flex-gutter-size)), + (--bp-tablet) calc(100% / 3 - 2 * var(--flex-gutter-size)), + (--bp-mobile) calc(100% - 2 * var(--flex-gutter-size)) + ); + + margin: var(--flex-gutter-size); + text-align: center; + + & a, + & a:link, + & a:visited { + display: block; + height: 100%; + padding: var(--spacing-small) var(--spacing-base); + border: 1px solid var(--color-element-border); + border-radius: var(--border-radius-base); + background: var(--color-white); + color: var(--color-light-text); + text-decoration: none; + transition: all 0.2s ease; + } + + & a:focus, + & a:hover, + & a:active { + transform: scale(1.1); + border: 1px solid var(--color-focus); + box-shadow: 0 0 2px 2px var(--color-focus-shadow); + } + + & a:focus h3, + & a:hover h3, + & a:active h3 { + /*text-decoration: underline;*/ + } + + & h3, + & p { + font-size: 0.9375rem; + } + + & a img { + display: inline-block; + width: 2.5rem; + margin: var(--spacing-small) 0; + } } .categories__list-item--small { - - & a, - & a:link, - & a:visited { - display: flex; - flex-direction: row; - justify-content: space-around; - text-align: left; - } - - & figure { - margin: .5rem; - } - - & img { - width: 2.5rem; - margin: .2rem auto; - } - - & h3, & p { - font-size: .8125rem; - margin: .5rem - } + & a, + & a:link, + & a:visited { + display: flex; + flex-direction: row; + justify-content: space-around; + text-align: left; + } + + & figure { + margin: 0.5rem; + } + + & img { + width: 2.5rem; + margin: 0.2rem auto; + } + + & h3, + & p { + font-size: 0.8125rem; + margin: 0.5rem; + } } diff --git a/packages/code-du-travail-css/docs/css/components/_search.css b/packages/code-du-travail-css/docs/css/components/_search.css index 64a636b910..b88a95f6c9 100755 --- a/packages/code-du-travail-css/docs/css/components/_search.css +++ b/packages/code-du-travail-css/docs/css/components/_search.css @@ -29,6 +29,7 @@ align-items: center; margin: 0.8rem; border: none; + max-width: 200px; border-radius: var(--border-radius-base); background-color: var(--color-lighter-grey); } @@ -76,6 +77,7 @@ input[type="search"].search__input { background: var(--color-white); + height: 100%; margin: 0; max-width: 100%; width: 100%; diff --git a/packages/code-du-travail-frontend/.babelrc.js b/packages/code-du-travail-frontend/.babelrc.js index 7fe26771d6..08169056d5 100644 --- a/packages/code-du-travail-frontend/.babelrc.js +++ b/packages/code-du-travail-frontend/.babelrc.js @@ -1,8 +1,14 @@ module.exports = { - presets: ["next/babel"], - env: { - test: { - presets: [["next/babel", { "preset-env": { modules: "commonjs" } }]] - } - } + presets: [ + [ + "next/babel", + { + "preset-env": { + targets: { + browsers: ["last 5 version", "IE>=10"] + } + } + } + ] + ] }; diff --git a/packages/code-du-travail-frontend/next.config.js b/packages/code-du-travail-frontend/next.config.js index 4d5273f1a4..fca2a0d1ca 100644 --- a/packages/code-du-travail-frontend/next.config.js +++ b/packages/code-du-travail-frontend/next.config.js @@ -1,27 +1,31 @@ const withCSS = require("@zeit/next-css"); +const withTM = require("next-plugin-transpile-modules"); -module.exports = withCSS({ - // https://github.com/zeit/next.js/#disabling-file-system-routing - useFileSystemPublicRoutes: false, - webpack(config, options) { - config.module.rules.push({ - test: /\.(png|woff|woff2|eot|ttf|svg|gif|jpg)$/, - loader: "file-loader", - options: { - publicPath: "/_next/static/", - outputPath: "static/" - } - }); - return config; - }, - publicRuntimeConfig: { - API_URL: process.env.API_URL || "http://127.0.0.1:1337/api/v1", - API_ADDRESS: "https://api-adresse.data.gouv.fr/search", - PACKAGE_VERSION: require('./package.json').version, - SENTRY_PUBLIC_DSN: process.env.SENTRY_PUBLIC_DSN, - PIWIK_URL: process.env.PIWIK_URL, - PIWIK_SITE_ID: process.env.PIWIK_SITE_ID, - FRONTEND_PORT: process.env.FRONTEND_PORT, - NODE_ENV: process.env.NODE_ENV - } -}); +module.exports = withTM( + withCSS({ + // https://github.com/zeit/next.js/#disabling-file-system-routing + useFileSystemPublicRoutes: false, + transpileModules: ["p-debounce"], + webpack(config, options) { + config.module.rules.push({ + test: /\.(png|woff|woff2|eot|ttf|svg|gif|jpg)$/, + loader: "file-loader", + options: { + publicPath: "/_next/static/", + outputPath: "static/" + } + }); + return config; + }, + publicRuntimeConfig: { + API_URL: process.env.API_URL || "http://127.0.0.1:1337/api/v1", + API_ADDRESS: "https://api-adresse.data.gouv.fr/search", + PACKAGE_VERSION: require("./package.json").version, + SENTRY_PUBLIC_DSN: process.env.SENTRY_PUBLIC_DSN, + PIWIK_URL: process.env.PIWIK_URL, + PIWIK_SITE_ID: process.env.PIWIK_SITE_ID, + FRONTEND_PORT: process.env.FRONTEND_PORT, + NODE_ENV: process.env.NODE_ENV + } + }) +); diff --git a/packages/code-du-travail-frontend/package.json b/packages/code-du-travail-frontend/package.json index 7537ecd9f8..4b1d0026b7 100755 --- a/packages/code-du-travail-frontend/package.json +++ b/packages/code-du-travail-frontend/package.json @@ -47,6 +47,7 @@ "css-loader": "^1.0.0", "eslint": "^5.7.0", "jest": "^23.6.0", + "next-plugin-transpile-modules": "^1.0.0", "prettier": "^1.14.3", "react-testing-library": "^5.2.3" }, diff --git a/packages/code-du-travail-frontend/pages/_app.js b/packages/code-du-travail-frontend/pages/_app.js index 1f413d5bb7..a990e91adb 100644 --- a/packages/code-du-travail-frontend/pages/_app.js +++ b/packages/code-du-travail-frontend/pages/_app.js @@ -1,5 +1,6 @@ -import App, { Container } from "next/app"; import React from "react"; +import PropTypes from "prop-types"; +import App, { Container } from "next/app"; import GitHubForkRibbon from "react-github-fork-ribbon"; import "@cdt/css"; import "@reach/dialog/styles.css"; @@ -9,6 +10,14 @@ import Header from "../src/layout/Header.js"; import Footer from "../src/layout/Footer.js"; export default class MyApp extends App { + // HACK @lionelb from https://github.com/zeit/next.js/issues/4687#issuecomment-432608667 + // This is to fix withRouter() from next/router + // IE10 static props hoisting doesn't work + static childContextTypes = { + headManager: PropTypes.object, + router: PropTypes.object + }; + static async getInitialProps({ Component, ctx }) { let pageProps = {}; diff --git a/packages/code-du-travail-frontend/pages/_document.js b/packages/code-du-travail-frontend/pages/_document.js index 888bcc6e00..b2c6809d5b 100644 --- a/packages/code-du-travail-frontend/pages/_document.js +++ b/packages/code-du-travail-frontend/pages/_document.js @@ -32,7 +32,10 @@ export default class MyDocument extends Document { href="/static/print.css" media="print" /> -