o11y/frontend/index.html

<!doctype html>
<html lang="en">
	<head>
		<meta charset="utf-8" />
		<base href="[[.BaseHref]]" />
		<meta
			http-equiv="Cache-Control"
			content="no-cache, no-store, must-revalidate, max-age: 0"
		/>
		<meta http-equiv="Pragma" content="no-cache" />
		<meta http-equiv="Expires" content="0" />

		<link rel="preconnect" href="https://cdn.vercel.com" crossorigin />
		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/fonts/geist-sans/style.css" />
		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/fonts/geist-mono/style.css" />

		<title data-react-helmet="true">
			Hanzo O11y
		</title>
		<meta
			data-react-helmet="true"
			property="og:title"
			content="Hanzo O11y"
		/>
		<meta
			data-react-helmet="true"
			name="description"
			content="Hanzo O11y is a unified observability platform for metrics, traces, and logs with deep filtering and aggregation to find and resolve issues quickly."
		/>
		<meta
			data-react-helmet="true"
			property="og:description"
			content="Hanzo O11y is a unified observability platform for metrics, traces, and logs with deep filtering and aggregation to find and resolve issues quickly."
		/>
		<meta
			data-react-helmet="true"
			property="og:image"
			content="/Logos/hanzo-icon.svg"
		/>
		<meta
			data-react-helmet="true"
			name="twitter:image"
			content="/Logos/hanzo-icon.svg"
		/>
		<meta
			data-react-helmet="true"
			name="twitter:image:alt"
			content="Hanzo O11y"
		/>
		<meta
			data-react-helmet="true"
			name="twitter:card"
			content="summary_large_image"
		/>
		<meta data-react-helmet="true" name="docusaurus_locale" content="en" />
		<meta data-react-helmet="true" name="docusaurus_tag" content="default" />
		<meta name="robots" content="noindex" />
		<link data-react-helmet="true" rel="shortcut icon" href="favicon.ico" />
	</head>
	<body data-theme="default">
		<script>
			// Apply theme class synchronously before React renders to prevent flash.
			// Mirrors the logic in ThemeProvider (hooks/useDarkMode/index.tsx).
			(function () {
				try {
					// When served under a URL prefix (e.g. /o11y/), storage keys are scoped
					// to that prefix by the React app (see utils/storage.ts getScopedKey).
					// Read the <base> tag — already populated by the Go template — to derive
					// the same prefix here, before any JS module has loaded.
					var basePath =
						(document.querySelector('base') || {}).getAttribute('href') || '/';
					var prefix = basePath === '/' ? '' : basePath;
					var theme = localStorage.getItem(prefix + 'THEME');
					var autoSwitch =
						localStorage.getItem(prefix + 'THEME_AUTO_SWITCH') === 'true';
					if (autoSwitch) {
						theme = window.matchMedia('(prefers-color-scheme: dark)').matches
							? 'dark'
							: 'light';
					}
					if (theme === 'light') {
						document.body.classList.add('lightMode');
					} else {
						// Default to dark when no preference is stored
						document.body.classList.add('dark', 'darkMode');
					}
				} catch (e) {
					document.body.classList.add('dark', 'darkMode');
				}
			})();
		</script>
		<script type="application/json" id="o11y-boot-settings">
			[[.Settings]]
		</script>
		<script>
			try {
				var _el = document.getElementById('o11y-boot-settings');
				window.o11yBootData = {
					settings: _el ? JSON.parse(_el.textContent) : null,
				};
			} catch (e) {
				window.o11yBootData = { settings: null };
			}
		</script>
		<noscript>You need to enable JavaScript to run this app.</noscript>
		<div id="root"></div>

		<script>
			var PYLON_APP_ID = '<%- PYLON_APP_ID %>';
			var pylonSettings =
				((window.o11yBootData || {}).settings || {}).pylon || {};
			var pylonEnabled = pylonSettings.enabled !== false;
			if (PYLON_APP_ID && pylonEnabled) {
				(function () {
					var e = window;
					var t = document;
					var n = function () {
						n.e(arguments);
					};
					n.q = [];
					n.e = function (e) {
						n.q.push(e);
					};
					e.Pylon = n;
					var r = function () {
						var e = t.createElement('script');
						e.setAttribute('type', 'text/javascript');
						e.setAttribute('async', 'true');
						e.setAttribute(
							'src',
							'https://widget.usepylon.com/widget/' + PYLON_APP_ID,
						);
						var n = t.getElementsByTagName('script')[0];
						n.parentNode.insertBefore(e, n);
					};
					if (t.readyState === 'complete') {
						r();
					} else if (e.addEventListener) {
						e.addEventListener('load', r, false);
					}
				})();
			}
		</script>
		<script type="text/javascript">
			window.AppcuesSettings = { enableURLDetection: true };
		</script>
		<script>
			var APPCUES_APP_ID = '<%- APPCUES_APP_ID %>';
			var appcuesSettings =
				((window.o11yBootData || {}).settings || {}).appcues || {};
			var appcuesEnabled = appcuesSettings.enabled !== false;
			if (APPCUES_APP_ID && appcuesEnabled) {
				(function (d, t) {
					var a = d.createElement(t);
					a.async = 1;
					a.src = '//fast.appcues.com/' + APPCUES_APP_ID + '.js';
					var s = d.getElementsByTagName(t)[0];
					s.parentNode.insertBefore(a, s);
				})(document, 'script');
			}
		</script>
		<link rel="stylesheet" href="css/uPlot.min.css" />
		<script type="module" src="./src/index.tsx"></script>
	</body>
</html>