File size: 2,403 Bytes
6afedde |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 |
---
import Seo from "../components/Seo.astro";
import ThemeToggle from "../components/ThemeToggle.astro";
import TrackioWrapper from "../components/trackio/TrackioWrapper.astro";
import * as ArticleMod from "../content/article.mdx";
import "katex/dist/katex.min.css";
import "../styles/global.css";
// Import article metadata
const articleFM = (ArticleMod as any).frontmatter ?? {};
const stripHtml = (text: string) => String(text || "").replace(/<[^>]*>/g, "");
const articleTitle = stripHtml(articleFM?.title ?? "Article")
.replace(/\\n/g, " ")
.replace(/\n/g, " ")
.replace(/\s+/g, " ")
.trim();
// Page metadata
const pageTitle = "TrackIO Demo";
const pageDesc = "Interactive training metrics visualization with TrackIO";
---
<html lang="en" data-theme="light">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<Seo title={pageTitle} description={pageDesc} />
<script is:inline>
(() => {
try {
const saved = localStorage.getItem("theme");
const prefersDark =
window.matchMedia &&
window.matchMedia("(prefers-color-scheme: dark)")
.matches;
const theme = saved || (prefersDark ? "dark" : "light");
document.documentElement.setAttribute("data-theme", theme);
} catch {}
})();
</script>
<script type="module" src="/scripts/color-palettes.js"></script>
<script src="https://cdn.jsdelivr.net/npm/d3@7/dist/d3.min.js"></script>
</head>
<body class="trackio-page">
<ThemeToggle />
<main class="trackio-main">
<div class="trackio-container">
<TrackioWrapper />
</div>
</main>
</body>
</html>
<style>
.trackio-page {
min-height: 100vh;
background: var(--bg-color);
color: var(--text-color);
}
.trackio-main {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
padding: 40px 20px;
}
.trackio-container {
width: 100%;
max-width: 760px;
}
@media (max-width: 900px) {
.trackio-main {
padding: 20px 16px;
}
}
</style>
|