web/src/index.ejs
<!doctype html>
<!-- Nginx Server Side Include template for dynamic social media previews -->
<!--# if expr="$render_title = yes" -->
<!--# include virtual="/proxy/socialmeta/$request_uri" -->
<!--# else -->
<html lang="">
<head>
<title><%= config.appName %></title>
<meta name="apple-mobile-web-app-title" content="<%= config.appName %>">
<meta property="og:title" content="<%= config.appName %>" data-react-helmet="true">
<meta property="og:site_name" content="<%= config.hostName %>">
<meta name="twitter:title" content="<%= config.appName %>">
<!--# endif -->
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<% if (config.manifestUrl) { %>
<link rel="manifest" href="<%= config.manifestUrl %>">
<% } %>
<!-- Prevent index.html to be cached at all for code splitting issues -->
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="cache-control" content="no-cache, no-store, must-revalidate" />
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="application-name" content="<%= config.appName %>">
<% if (config.apps) { %>
<meta name="apple-itunes-app" content="app-id=<%= config.apps.ios.appStoreId %>">
<% } %>
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="mobile-web-app-capable" content="yes">
<meta name="theme-color" content="<%= config.lightTheme.colors.themeColor %>">
<meta name="msapplication-navbutton-color" content="<%= config.lightTheme.colors.themeColor %>">
<meta name="msapplication-starturl" content="/">
<meta name="msapplication-TileColor" content="<%= config.lightTheme.colors.themeColor %>">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Default tags for a prettier social media preview, will be overwritten in Helmet.tsx for most pages. -->
<!-- data-react-helmet="true" is needed to allow overwriting in Helmet.tsx -->
<!-- https://github.com/nfl/react-helmet/issues/430#issuecomment-520364492 -->
<meta property="og:image" content="<%= config.icons.socialMediaPreview %>" data-react-helmet="true" />
<meta property="og:image:width" content="1200" data-react-helmet="true" />
<meta property="og:image:height" content="630" data-react-helmet="true" />
<meta property="og:type" content="website" data-react-helmet="true" />
<meta name="twitter:image" content="<%= config.icons.socialMediaPreview %>">
<!-- Disable phone number auto detection in mobile safari in order to have consistent behavior -->
<!-- https://developers.google.com/web/fundamentals/native-hardware/click-to-call#disable_auto-detection_when_necessary -->
<meta name="format-detection" content="telephone=no">
<link rel="dns-prefetch" href="<%= config.cmsUrl %>" />
<link rel="preconnect" href="<%= config.cmsUrl %>" />
<!-- Noto Sans -->
<link rel="preload"
href="/fonts/noto-sans/noto-sans-v14-vietnamese_latin-ext_latin_greek-ext_greek_devanagari_cyrillic-ext_cyrillic-regular.woff2"
as="font" type="font/woff2"
crossorigin />
<link rel="preload"
href="/fonts/noto-sans/noto-sans-v14-vietnamese_latin-ext_latin_greek-ext_greek_devanagari_cyrillic-ext_cyrillic-700.woff2"
as="font" type="font/woff2"
crossorigin />
<link href='/fonts/noto-sans/noto-sans.css' rel='stylesheet' />
<% if (config.lightTheme.fonts.web.decorativeFont.includes('Raleway')) { %>
<!-- Raleway -->
<link rel="preload" href="/fonts/raleway/raleway-v12-latin_latin-ext-700.woff2" as="font" type="font/woff2"
crossorigin />
<link rel="preload" href="/fonts/raleway/raleway-v12-latin_latin-ext-regular.woff2" as="font" type="font/woff2"
crossorigin />
<link href='/fonts/raleway/raleway.css' rel='stylesheet' />
<% } %>
<% if (config.lightTheme.fonts.web.decorativeFont.includes('Varela Round')) { %>
<!-- Varela Round -->
<link rel="preload" href="/fonts/varela-round/varela-round.woff2" as="font" type="font/woff2"
crossorigin />
<link rel="preload" href="/fonts/varela-round/varela-round.woff2" as="font" type="font/woff2"
crossorigin />
<link href='/fonts/varela-round/varela-round.css' rel='stylesheet' />
<% } %>
<link rel="icon" type="image/png" sizes="16x16" href="<%= config.icons.favicons %>favicon-16x16.png">
<link rel="icon" type="image/png" sizes="48x48" href="<%= config.icons.favicons %>favicon-48x48.png">
<link rel="icon" type="image/png" sizes="96x96" href="<%= config.icons.favicons %>favicon-96x96.png">
<link rel="icon" type="image/png" sizes="192x192" href="<%= config.icons.favicons %>favicon-192x192.png">
<link rel="icon" type="image/png" sizes="512x512" href="<%= config.icons.favicons %>favicon-512x512.png">
<link rel="apple-touch-icon" type="image/png" sizes="180x180" href="<%= config.icons.appleTouchIcon %>">
<link rel="shortcut icon" href="<%= config.icons.favicons %>favicon.ico">
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="<%= config.lightTheme.colors.themeColor %>">
<style><% if (config.splashScreen) { %>
@keyframes show {
0% {
opacity: 0;
}
86% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#splash {
position: fixed;
top: 0;
left: 0;
z-index: 1;
height: 100vh;
width: 100vw;
animation: show 1.5s forwards;
pointer-events: none;
transition: height 0s 0.2s;
}
#splash > div {
background-color: <%= config.splashScreen.backgroundColor %>;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
transition: opacity 0.2s ease-in;
}
#splash.splash-hidden {
animation-play-state: paused;
height: 0;
}
.splash-hidden > div {
opacity: 0;
}
#splash img {
height: 50%;
width: 50%;
max-width: 100%;
object-fit: contain;
}
<% } %>
.no-js {
position: fixed;
z-index: 2;
text-align: center;
padding: 20px;
top: 0;
left: 0;
right: 0;
}
</style>
</head>
<body>
<noscript>
<div class="no-js">
<p>Please enable JavaScript to use this page!</p>
<p>
If you don't know how to activate JavaScript, click
<a href="https://www.enable-javascript.com/">here</a>
or ask your administrator for help.
</p>
</div>
</noscript>
<div id="container"></div>
<script type="text/javascript" src="/iframe.js" defer></script>
</body>
</html>