tfwm-travel-updates-widget
Version:
A shareable travel updates (disruptions) widget which is shown on the TfWM homepage
122 lines (114 loc) • 4.06 kB
HTML
<html lang="en" class="wmnds-html">
<head>
<meta charset="utf-8" />
<!-- CHANGE ME -->
<title>%REACT_APP_NAME% - West Midlands Network preview</title>
<meta name="description" content="%REACT_APP_DESCRIPTION%" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!-- Favicons -->
<link
rel="apple-touch-icon"
sizes="180x180"
href="//unpkg.com/wmn-design-system@%REACT_APP_WMNDS_VERSION%/build/config/favicons/apple-touch-icon.png"
/>
<link
rel="icon"
type="image/png"
sizes="32x32"
href="//unpkg.com/wmn-design-system@%REACT_APP_WMNDS_VERSION%/build/config/favicons/favicon-32x32.png"
/>
<link
rel="icon"
type="image/png"
sizes="16x16"
href="//unpkg.com/wmn-design-system@%REACT_APP_WMNDS_VERSION%/build/config/favicons/favicon-16x16.png"
/>
<link
rel="manifest"
href="//unpkg.com/wmn-design-system@%REACT_APP_WMNDS_VERSION%/build/config/favicons/site.webmanifest"
/>
<link
rel="mask-icon"
href="//unpkg.com/wmn-design-system@%REACT_APP_WMNDS_VERSION%/build/config/favicons/safari-pinned-tab.svg"
color="#3c1053"
/>
<link
rel="shortcut icon"
href="//unpkg.com/wmn-design-system@%REACT_APP_WMNDS_VERSION%/build/config/favicons/favicon.ico"
/>
<meta name="msapplication-TileColor" content="#3c1053" />
<meta
name="msapplication-config"
content="//unpkg.com/wmn-design-system@%REACT_APP_WMNDS_VERSION%/build/config/favicons/browserconfig.xml"
/>
<meta name="theme-color" content="#3c1053" />
<!-- SEO Metadata -->
<meta name="title" content="%REACT_APP_NAME%" />
<meta name="description" content="%REACT_APP_DESCRIPTION%" />
<!-- Open Graph / Facebook -->
<meta property="og:type" content="website" />
<meta property="og:url" content="%PUBLIC_URL%" />
<meta property="og:title" content="%REACT_APP_NAME%" />
<meta property="og:description" content="%REACT_APP_DESCRIPTION%" />
<meta
property="og:image"
content="//unpkg.com/wmn-design-system@%REACT_APP_WMNDS_VERSION%/build/config/wmn-share.png"
/>
<!-- Twitter -->
<meta property="twitter:card" content="summary_large_image" />
<meta property="twitter:url" content="%PUBLIC_URL%" />
<meta property="twitter:title" content="%REACT_APP_NAME%" />
<meta property="twitter:description" content="%REACT_APP_DESCRIPTION%" />
<meta
property="twitter:image"
content="//unpkg.com/wmn-design-system@%REACT_APP_WMNDS_VERSION%/build/config/wmn-share.png"
/>
<!-- WMN design system CSS -->
<link
rel="stylesheet"
href="//unpkg.com/wmn-design-system@%REACT_APP_WMNDS_VERSION%/build/css/wmnds.min.css"
/>
<style>
.preview {
width: 100%;
max-width: 1100px;
min-width: 320px;
margin: 80px auto;
border: 1px dashed rgba(0, 0, 0, 0.2);
position: relative;
padding: 16px;
}
.preview::before {
content: 'TRAVEL UPDATES WIDGET PREVIEW';
position: absolute;
display: block;
top: -32px;
font-size: 16px;
color: rgba(0, 0, 0, 0.5);
}
</style>
</head>
<body>
<div data-widget-host="%REACT_APP_NAME%" class="preview"></div>
<script>
if (!document.querySelectorAll('.wmnds-hidden-icons').length) {
// Ajax SVG in, SVGS are referenced in app (Icon component)
const ajax = new XMLHttpRequest();
ajax.open(
'GET',
'https://unpkg.com/wmn-design-system@1.7.3/build/img/wmnds-icons.min.svg',
true
);
ajax.send();
ajax.onload = () => {
const div = document.createElement('div');
div.classList.add('wmnds-hidden-icons');
div.style.display = 'none';
div.innerHTML = ajax.responseText;
document.body.insertBefore(div, document.body.childNodes[0]);
};
}
</script>
</body>
</html>