Adam Janiš
98 lines
3.0 KiB
JavaScript
98 lines
3.0 KiB
JavaScript
import { Store } from 'laco'
|
|
import { useStore } from 'laco-react'
|
|
import Head from 'flareact/head'
|
|
|
|
import { loadData, useKeyPress } from '../src/functions/helpers'
|
|
import config from '../config.yaml'
|
|
import MonitorCard from '../src/components/monitorCard'
|
|
import MonitorStatusHeader from '../src/components/monitorStatusHeader'
|
|
import ThemeSwitcher from '../src/components/themeSwitcher'
|
|
|
|
export async function getEdgeProps() {
|
|
const { monitors, checks } = await loadData()
|
|
|
|
console.log(monitors, checks)
|
|
|
|
return {
|
|
props: {
|
|
config,
|
|
monitors: monitors || {},
|
|
checks,
|
|
},
|
|
// Revalidate these props once every x seconds
|
|
revalidate: 5,
|
|
}
|
|
}
|
|
|
|
export default function Index({ config, monitors, checks }) {
|
|
return (
|
|
<div className="min-h-screen">
|
|
<Head>
|
|
<title>{config.settings.title}</title>
|
|
<link rel="stylesheet" href="./style.css" />
|
|
<script>
|
|
{`
|
|
function setTheme(theme) {
|
|
document.documentElement.classList.remove("dark", "light")
|
|
document.documentElement.classList.add(theme)
|
|
localStorage.theme = theme
|
|
}
|
|
(() => {
|
|
const query = window.matchMedia("(prefers-color-scheme: dark)")
|
|
query.addListener(() => {
|
|
setTheme(query.matches ? "dark" : "light")
|
|
})
|
|
if (["dark", "light"].includes(localStorage.theme)) {
|
|
setTheme(localStorage.theme)
|
|
} else {
|
|
setTheme(query.matches ? "dark" : "light")
|
|
}
|
|
})()
|
|
`}
|
|
</script>
|
|
</Head>
|
|
<div className="container mx-auto px-4">
|
|
<div className="flex flex-row justify-between items-center p-4">
|
|
<div className="flex flex-row items-center">
|
|
<img className="h-8 w-auto" src={config.settings.logo} />
|
|
<h1 className="ml-4 text-3xl">{config.settings.title}</h1>
|
|
</div>
|
|
<div className="flex flex-row items-center">
|
|
{typeof window !== 'undefined' && <ThemeSwitcher />}
|
|
</div>
|
|
</div>
|
|
<MonitorStatusHeader monitors={monitors} />
|
|
{monitors.map((monitor, key) => {
|
|
return (
|
|
<MonitorCard
|
|
key={key}
|
|
monitor={monitor}
|
|
checks={checks.filter(x => x.monitor_id === monitor.id )}
|
|
/>
|
|
)
|
|
})}
|
|
<div className="flex flex-row justify-between mt-4 text-sm">
|
|
<div>
|
|
Powered by{' '}
|
|
<a href="https://workers.cloudflare.com/" target="_blank">
|
|
Cloudflare Workers{' '}
|
|
</a>
|
|
&{' '}
|
|
<a href="https://flareact.com/" target="_blank">
|
|
Flareact{' '}
|
|
</a>
|
|
</div>
|
|
<div>
|
|
<a
|
|
href="https://github.com/eidam/cf-workers-status-page"
|
|
target="_blank"
|
|
>
|
|
Get Your Status Page
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|