betagouv
/
mon-entreprise
mirror of https://github.com/betagouv/mon-entreprise
1
0
Fork 0
Code Releases Activity

🎨 Affichage immédiat de la couleur personnalisée dans les intégrations

pull/1805/head
Maxime Quandalle 2021-11-02 18:00:44 +01:00
parent d166df2423
commit 4c728b0609
6 changed files with 72 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

72
mon-entreprise/index.html
View File

@ -66,9 +66,7 @@
<!-- data-helmet pour que React Helmet puisse écraser ce meta par défaut -->
<link rel="manifest" href="/manifest.webmanifest" />
<title>
<%= htmlWebpackPlugin.options.title %>
</title>
<title><%= htmlWebpackPlugin.options.title %></title>
<% for (var css in htmlWebpackPlugin.files.css) { %>
<link href="<%= htmlWebpackPlugin.files.css[css] %>" rel="stylesheet" />
@ -193,7 +191,12 @@
<img
src="<%= htmlWebpackPlugin.options.logo %>"
alt="Un service de l'État français"
style="width: 300px; margin: auto; margin-bottom: 0.6rem; display:block"
style="
width: 300px;
margin: auto;
margin-bottom: 0.6rem;
display: block;
"
/>
<div id="lds-ellipsis">
<div></div>
@ -212,36 +215,70 @@
// Hack to force styled components to render styles during prerender
if (window.__PRERENDER_INJECTED) {
window.onload = () => {
var el = document.createElement('style');
var el = document.createElement('style')
document.head.appendChild(el)
var styles = document.querySelectorAll('style[data-styled]')
for (style of styles.values()) {
for (rule of style.sheet.rules) {
el.appendChild(document.createTextNode(rule.cssText))
}
for (rule of style.sheet.rules) {
el.appendChild(document.createTextNode(rule.cssText))
}
}
}
}
};
</script>
<!-- APP -->
<div id="js"></div>
<script>
// Set the main colors from the provided customization in the URL We do it
// before loading the whole JS bundle to avoid a UI flash. cf. #1786
try {
let iframeColor = new URLSearchParams(
document.location.search.substring(1)
).get('couleur')
if (iframeColor) {
;[
document.documentElement,
...document.querySelectorAll('.js-color-element'),
].forEach((element) => {
element.style.setProperty('--color', iframeColor)
element.style.setProperty('--lightColor', iframeColor)
element.style.setProperty('--darkColor', iframeColor)
})
}
} catch (e) {
console.error(e)
}
</script>
<!-- OUTDATED BROWSER WARNING -->
<div
id="outdated-browser"
style="position: fixed; top: 0; left: 0; bottom: 0; right: 0; display: none; background-color: white"
style="
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
display: none;
background-color: white;
"
>
<div
style="margin: 100px auto; max-width: 800px; text-align: center; font-family: 'Montserrat', sans-serif; font-weight: 300;"
style="
margin: 100px auto;
max-width: 800px;
text-align: center;
font-family: 'Montserrat', sans-serif;
font-weight: 300;
"
>
<img
src="images/logo.svg"
alt="Logo mon-entreprise.fr"
style="width: 200px; margin-bottom: 2rem;"
style="width: 200px; margin-bottom: 2rem"
/>
<h1>
Votre navigateur n'est plus supporté.
</h1>
<h1>Votre navigateur n'est plus supporté.</h1>
<h2>
Nous vous invitons à réessayer avec un autre, ou depuis un mobile
récent.
@ -267,15 +304,12 @@
</div>
</div>
<% for (var chunk in htmlWebpackPlugin.files.chunks) { %>
<script
type="module"
src="<%= htmlWebpackPlugin.files.chunks[chunk].entry %>"
></script>
<% } %>
<% for (var chunk in htmlWebpackPlugin.files.chunks) { %>
<% } %> <% for (var chunk in htmlWebpackPlugin.files.chunks) { %>
<script nomodule src="<%= chunk %>.legacy.bundle.js"></script>
<% } %>
</body>

12
mon-entreprise/source/Provider.tsx
View File

@ -116,10 +116,12 @@ export default function Provider({
display: none !important;
}`
document.body.appendChild(css)
const iframeCouleur =
new URLSearchParams(document?.location.search.substring(1)).get(
'couleur'
) ?? undefined
// Note that the iframeColor is first set in the index.html file, but without
// the full palette generation that happen here. This is to prevent a UI
// flash, cf. #1786.
const iframeCouleur = new URLSearchParams(
document.location.search.substring(1)
).get('couleur')
return (
<ErrorBoundary
@ -149,7 +151,7 @@ export default function Provider({
>
<ReduxProvider store={store}>
<ThemeColorsProvider
color={iframeCouleur && decodeURIComponent(iframeCouleur)}
color={iframeCouleur ? decodeURIComponent(iframeCouleur) : undefined}
>
<TrackingContext.Provider
value={

1
mon-entreprise/source/components/utils/colors.tsx
View File

@ -117,6 +117,7 @@ export function ThemeColorsProvider({ color, children }: ProviderProps) {
{/* This div is only used to set the CSS variables */}
<div
ref={divRef}
className="js-color-element"
css={`
height: 100%;
display: flex;

3
mon-entreprise/source/iframe-integration-script.js
View File

@ -7,7 +7,8 @@ let script =
document.getElementById('script-monentreprise') ||
document.getElementById('script-simulateur-embauche'),
moduleName = script.dataset.module || 'simulateur-embauche',
couleur = encodeURIComponent(script.dataset.couleur),
couleur =
script.dataset.couleur && encodeURIComponent(script.dataset.couleur),
lang = script.dataset.lang || 'fr',
fr = lang === 'fr',
baseUrl =

14
mon-entreprise/webpack.prod.js
View File

@ -17,7 +17,7 @@ const cheerio = require('cheerio')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const TerserPlugin = require('terser-webpack-plugin')
const prerenderConfig = () => ({
const prerenderConfig = {
staticDir: path.resolve('dist'),
renderer: new Renderer({
renderAfterTime: 5000,
@ -26,10 +26,6 @@ const prerenderConfig = () => ({
}),
postProcess: (context) => {
const $ = cheerio.load(context.html)
// force https on twitter emoji cdn
$('img[src^="http://twemoji.maxcdn.com"]').each((i, el) => {
$(el).attr('src', (_, path) => path.replace('http://', 'https://'))
})
// Remove loader
$('#outdated-browser').after(`
<style>
@ -42,13 +38,11 @@ const prerenderConfig = () => ({
}
</style>
`)
// Remove piwik script
$('script[src$="stats.data.gouv.fr/piwik.js"]').remove()
context.html = $.html()
return context
},
})
}
module.exports = {
...common,
@ -86,14 +80,14 @@ module.exports = {
}),
process.env.ANALYZE_BUNDLE !== '1' &&
new PrerenderSPAPlugin({
...prerenderConfig(),
...prerenderConfig,
outputDir: path.resolve('dist', 'prerender', 'infrance'),
routes: ['/', '/calculators/salary', '/iframes/simulateur-embauche'],
indexPath: path.resolve('dist', 'infrance.html'),
}),
process.env.ANALYZE_BUNDLE !== '1' &&
new PrerenderSPAPlugin({
...prerenderConfig(),
...prerenderConfig,
outputDir: path.resolve('dist', 'prerender', 'mon-entreprise'),
routes: [
'/',

5
yarn.lock
View File

@ -5917,6 +5917,11 @@ classnames@^2.2.5:
resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.2.6.tgz#43935bffdd291f326dad0a205309b38d00f650ce"
integrity sha512-JR/iSQOSt+LQIWwrwEzJ9uk0xfN3mTVYMwt1Ir5mUcSN6pU+V4zQFFaJsclJbPuAUQH+yfWef6tm7l1quW3C8Q==
classnames@^2.2.6:
version "2.3.1"
resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.3.1.tgz#dfcfa3891e306ec1dad105d0e88f4417b8535e8e"
integrity sha512-OlQdbZ7gLfGarSqxesMesDa5uz7KFbID8Kpq/SxIoNGDqY8lSYs0D+hhtBXhcdB3rcbXArFr7vlHheLk1voeNA==
clean-css@4.2.x:
version "4.2.3"
resolved "https://registry.yarnpkg.com/clean-css/-/clean-css-4.2.3.tgz#507b5de7d97b48ee53d84adb0160ff6216380f78"