1
0
Fork 0
mirror of https://github.com/betagouv/mon-entreprise synced 2025-02-09 05:15:02 +00:00
mon-entreprise/site/source/template.html
Maxime Quandalle 3e1bb91279 Configuration du Rendu coté serveur (SSR)
Désormais nous utilisons un script NodeJS natif pour générer le code
HTML pour le pré-rendu des pages. Cela est plus rapide et plus fiable
que la méthode précédente qui consistait un instrumentaliser un
navigateur (pupetter)
https://github.com/chrisvfritz/prerender-spa-plugin

Cela implique toutefois de faire attention à ne plus utiliser des
variables gloables du navigateur, comme `window`, `document` ou
`location` dans nos scripts. C'est plutôt une bonne pratique, mais il
faudrait sans doute configurer du typage pour détecter ces usages le
plus tôt possible et éviter de créer des erreurs inopinées avec le SSR.
2022-01-31 13:33:07 +01:00

175 lines
4.4 KiB
HTML

<!DOCTYPE html>
<html lang="{{lang}}">
<head>
<meta charset="utf-8" />
<base href="/" />
<meta name="viewport" content="initial-scale=1" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<link
rel="apple-touch-icon"
sizes="180x180"
href="/favicon/apple-touch-icon.png"
/>
<link
rel="icon"
type="image/png"
sizes="32x32"
href="/favicon/favicon-32x32.png"
/>
<link
rel="icon"
type="image/png"
sizes="16x16"
href="/favicon/favicon-16x16.png"
/>
<link rel="shortcut icon" href="/favicon/favicon.ico" />
<meta name="msapplication-TileColor" content="#da532c" />
<meta name="msapplication-config" content="/favicon/browserconfig.xml" />
<meta
name="google-site-verification"
content="lO4OheVzHWfvwcoUC-1VKN_GTWtA5vEM-uPZqb2PORs"
/>
<!-- data-helmet pour que React Helmet puisse écraser ce meta par défaut -->
<meta
name="description"
content="{{ description }}"
data-react-helmet="true"
/>
<meta property="og:type" content="website" />
<meta property="og:title" data-react-helmet="true" content="{{ title }}" />
<meta
property="og:description"
data-react-helmet="true"
content="{{ description }}"
/>
<meta
property="og:image"
data-react-helmet="true"
content="{{ shareImage }}"
/>
<link rel="manifest" href="/manifest.webmanifest" />
<style>
html[data-useragent*='MSIE'] #outdated-browser,
html[data-useragent*='Safari'][data-useragent*='Version/8']
#outdated-browser,
html[data-useragent*='Safari'][data-useragent*='Version/7']
#outdated-browser,
html[data-useragent*='Trident'] #outdated-browser {
display: block !important;
}
html[data-useragent*='MSIE'] #loading,
html[data-useragent*='Safari'][data-useragent*='Version/8'] #loading,
html[data-useragent*='Safari'][data-useragent*='Version/7'] #loading,
html[data-useragent*='Trident'] #loading {
display: none !important;
}
html[data-useragent*='MSIE'] #js,
html[data-useragent*='Safari'][data-useragent*='Version/8'] #js,
html[data-useragent*='Safari'][data-useragent*='Version/7'] #js,
html[data-useragent*='Trident'] #js {
display: none !important;
}
</style>
<meta name="theme-color" content="#2975d1" />
<!--app-style-->
</head>
<body>
<div id="js"><!--app-html--></div>
<script type="module" src="{{ entry }}"></script>
<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 rawColor = new URLSearchParams(
document.location.search.substring(1)
).get('couleur')
let iframeColor = rawColor && JSON.parse(decodeURIComponent(rawColor))
if (iframeColor) {
;[
document.documentElement,
...document.querySelectorAll('.js-color-element'),
].forEach((element) => {
element.style.setProperty('--COLOR_HUE', iframeColor[0])
element.style.setProperty(
'--COLOR_SATURATION',
iframeColor[1] + '%'
)
})
}
} 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;
"
>
<div
style="
margin: 100px auto;
max-width: 800px;
text-align: center;
font-family: 'Montserrat', sans-serif;
font-weight: 300;
"
>
<img
src="images/logo-monentreprise.svg"
alt="Logo service mon-entreprise urssaf"
style="width: 200px; margin-bottom: 2rem"
/>
<h1>Votre navigateur n'est plus supporté.</h1>
<h2>
Nous vous invitons à réessayer avec un autre, ou depuis un mobile
récent.
</h2>
<br />
<br />
<h3>
Si besoin, vous pouvez en installer un nouveau depuis
<a style="color: #2975d1" href="https://outdatedbrowser.com/fr"
>cette page</a
>
</h3>
<h3>
<a
href="javascript:void(0);"
onclick="
var b = document.documentElement;
b.setAttribute('data-useragent', 'force-navigation-anyway');
"
>Continuer quand même vers le site</a
>
</h3>
</div>
</div>
<script
crossorigin="anonymous"
src="/polyfill.io/v3/polyfill.min.js?features=ResizeObserver%2CIntl.~locale.en%2CIntl.~locale.fr"
></script>
<script type="module" src="/source/entry.fr.tsx"></script>
</body>
</html>