mirror of
https://github.com/rajnandan1/kener.git
synced 2026-06-23 04:10:22 +00:00
chore: remove redundant code blocks from the repository
This commit is contained in:
Raj Nandan Sharma
@@ -19,10 +19,3 @@
|
||||
<main>
|
||||
{@render children()}
|
||||
</main>
|
||||
|
||||
<style>
|
||||
/* Apply the global font family using the CSS variable */
|
||||
* {
|
||||
font-family: var(--font-family);
|
||||
}
|
||||
</style>
|
||||
|
||||
+518
-719
File diff suppressed because it is too large
Load Diff
@@ -223,9 +223,7 @@
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
class="rounded-none border-0 {tab.key === getActiveTabKey()
|
||||
? 'border-b-accent-foreground! border-b!'
|
||||
: ''}"
|
||||
class="rounded-none border-0 {tab.key === getActiveTabKey() ? 'border-b-primary! border-b!' : ''}"
|
||||
onclick={() => selectTab(tab)}
|
||||
>
|
||||
{tab.name}
|
||||
|
||||
@@ -192,7 +192,7 @@
|
||||
|
||||
<style>
|
||||
.active {
|
||||
color: var(--accent-foreground);
|
||||
color: var(--primary);
|
||||
font-weight: 500;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -0,0 +1,252 @@
|
||||
<script lang="ts">
|
||||
import { onMount } from "svelte";
|
||||
|
||||
type TickStatus = "up" | "degraded";
|
||||
|
||||
interface Tick {
|
||||
id: number;
|
||||
status: TickStatus;
|
||||
}
|
||||
|
||||
const WINDOW = 64;
|
||||
/** A degraded check still serves most requests; mirrors how Kener scores a degraded bucket. */
|
||||
const DEGRADED_VALUE = 97;
|
||||
/** Every CYCLE seconds the demo dips for two ticks, then recovers. */
|
||||
const CYCLE = 22;
|
||||
const DIP_AT = 14;
|
||||
|
||||
let nextId = 0;
|
||||
|
||||
function seedTicks(): Tick[] {
|
||||
// Seed with one healed dip mid-history so the bar tells its story at first paint.
|
||||
return Array.from({ length: WINDOW }, (_, i) => ({
|
||||
id: nextId++,
|
||||
status: i === 22 || i === 23 ? "degraded" : "up"
|
||||
}));
|
||||
}
|
||||
|
||||
let ticks = $state<Tick[]>(seedTicks());
|
||||
let clock = $state(0);
|
||||
|
||||
const isDegraded = $derived(ticks[ticks.length - 1]?.status === "degraded");
|
||||
const uptime = $derived(
|
||||
(ticks.reduce((sum, t) => sum + (t.status === "up" ? 100 : DEGRADED_VALUE), 0) / ticks.length).toFixed(3)
|
||||
);
|
||||
|
||||
onMount(() => {
|
||||
const reduceMotion = window.matchMedia("(prefers-reduced-motion: reduce)");
|
||||
if (reduceMotion.matches) return; // static seeded bar, no live march
|
||||
|
||||
let timer: ReturnType<typeof setInterval> | undefined;
|
||||
|
||||
const tick = () => {
|
||||
clock += 1;
|
||||
const phase = clock % CYCLE;
|
||||
const status: TickStatus = phase === DIP_AT || phase === DIP_AT + 1 ? "degraded" : "up";
|
||||
ticks = [...ticks.slice(1), { id: nextId++, status }];
|
||||
};
|
||||
|
||||
const start = () => {
|
||||
if (timer === undefined) timer = setInterval(tick, 1000);
|
||||
};
|
||||
const stop = () => {
|
||||
if (timer !== undefined) {
|
||||
clearInterval(timer);
|
||||
timer = undefined;
|
||||
}
|
||||
};
|
||||
|
||||
// Run only while visible: on-screen and tab focused.
|
||||
const observer = new IntersectionObserver(
|
||||
([entry]) => (entry.isIntersecting && !document.hidden ? start() : stop()),
|
||||
{ threshold: 0.1 }
|
||||
);
|
||||
observer.observe(strip);
|
||||
|
||||
const onVisibility = () => (document.hidden ? stop() : start());
|
||||
document.addEventListener("visibilitychange", onVisibility);
|
||||
|
||||
return () => {
|
||||
stop();
|
||||
observer.disconnect();
|
||||
document.removeEventListener("visibilitychange", onVisibility);
|
||||
};
|
||||
});
|
||||
|
||||
let strip: HTMLElement;
|
||||
</script>
|
||||
|
||||
<div class="demo-strip" bind:this={strip}>
|
||||
<div class="demo-head">
|
||||
<div class="demo-state" class:degraded={isDegraded}>
|
||||
<span class="demo-dot" aria-hidden="true"></span>
|
||||
<span class="demo-label">
|
||||
{isDegraded ? "Degraded performance" : "All systems operational"}
|
||||
</span>
|
||||
</div>
|
||||
<div class="demo-uptime">
|
||||
<span class="demo-uptime-value">{uptime}%</span>
|
||||
<span class="demo-uptime-meta">uptime</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="demo-bar" aria-hidden="true">
|
||||
{#each ticks as tick (tick.id)}
|
||||
<span class="demo-tick" class:degraded={tick.status === "degraded"}></span>
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
<div class="demo-meta" aria-hidden="true">
|
||||
<span>demo monitor · HTTP</span>
|
||||
<span>last {WINDOW} checks</span>
|
||||
</div>
|
||||
<p class="sr-only">Demo of a Kener monitor: a rolling uptime bar that records a check every second.</p>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.demo-strip {
|
||||
border: 1px solid color-mix(in oklch, var(--foreground) 10%, transparent);
|
||||
border-radius: calc(var(--radius) + 4px);
|
||||
background: var(--card);
|
||||
padding: 1.125rem 1.25rem 1rem;
|
||||
}
|
||||
|
||||
.demo-head {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
justify-content: space-between;
|
||||
gap: 1rem;
|
||||
margin-bottom: 0.875rem;
|
||||
}
|
||||
|
||||
.demo-state {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.625rem;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.demo-dot {
|
||||
width: 0.5rem;
|
||||
height: 0.5rem;
|
||||
border-radius: 9999px;
|
||||
background: var(--demo-up);
|
||||
flex: none;
|
||||
transition: background 0.4s cubic-bezier(0.32, 0.72, 0, 1);
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: no-preference) {
|
||||
.demo-dot {
|
||||
animation: demoPing 2.4s cubic-bezier(0.32, 0.72, 0, 1) infinite;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes demoPing {
|
||||
0% {
|
||||
box-shadow: 0 0 0 0 color-mix(in oklch, var(--demo-up) 45%, transparent);
|
||||
}
|
||||
70%,
|
||||
100% {
|
||||
box-shadow: 0 0 0 7px transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.demo-state.degraded .demo-dot {
|
||||
background: var(--primary);
|
||||
animation: none;
|
||||
}
|
||||
|
||||
.demo-label {
|
||||
font-family: "Geist Mono", ui-monospace, monospace;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.08em;
|
||||
text-transform: uppercase;
|
||||
color: var(--foreground);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
@media (max-width: 520px) {
|
||||
.demo-head {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 0.375rem;
|
||||
}
|
||||
}
|
||||
|
||||
.demo-state.degraded .demo-label {
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
.demo-uptime {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
gap: 0.375rem;
|
||||
flex: none;
|
||||
}
|
||||
|
||||
.demo-uptime-value {
|
||||
font-family: "Geist Mono", ui-monospace, monospace;
|
||||
font-variant-numeric: tabular-nums;
|
||||
font-size: 0.9375rem;
|
||||
font-weight: 600;
|
||||
color: var(--foreground);
|
||||
}
|
||||
|
||||
.demo-uptime-meta {
|
||||
font-size: 0.75rem;
|
||||
color: var(--muted-foreground);
|
||||
}
|
||||
|
||||
.demo-bar {
|
||||
display: flex;
|
||||
gap: 3px;
|
||||
height: 2rem;
|
||||
}
|
||||
|
||||
.demo-tick {
|
||||
flex: 1 1 0;
|
||||
min-width: 0;
|
||||
border-radius: 2px;
|
||||
background: var(--demo-up);
|
||||
}
|
||||
|
||||
.demo-tick.degraded {
|
||||
background: var(--primary);
|
||||
}
|
||||
|
||||
/* Newest tick announces itself, then settles. */
|
||||
@media (prefers-reduced-motion: no-preference) {
|
||||
.demo-tick:last-child {
|
||||
animation: tickIn 0.5s cubic-bezier(0.32, 0.72, 0, 1);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes tickIn {
|
||||
from {
|
||||
transform: scaleY(0.4);
|
||||
opacity: 0.4;
|
||||
}
|
||||
to {
|
||||
transform: scaleY(1);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.demo-meta {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 1rem;
|
||||
margin-top: 0.75rem;
|
||||
font-family: "Geist Mono", ui-monospace, monospace;
|
||||
font-size: 0.6875rem;
|
||||
color: var(--muted-foreground);
|
||||
}
|
||||
|
||||
/* Hide a third of the ticks on narrow screens so each tick keeps presence. */
|
||||
@media (max-width: 480px) {
|
||||
.demo-tick:nth-child(3n) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
+24
-96
@@ -1,110 +1,38 @@
|
||||
@import url("https://fonts.bunny.net/css?family=bodoni-moda:400,400i,500,500i,600,600i,700,700i,800,800i,900,900i&family=plus-jakarta-sans:300,400,500,600,700,800");
|
||||
@import url("https://fonts.bunny.net/css?family=geist:400,500,600,700|geist-mono:400,500");
|
||||
|
||||
/* Prose/Content Body Styles - needed for markdown rendering */
|
||||
.docs-content-body {
|
||||
font-size: 1rem;
|
||||
line-height: 1.75;
|
||||
/* Docs typography + brand accent.
|
||||
Single family (Geist) with weight contrast; Geist Mono for code and labels.
|
||||
Brand accent is the Kener logo orange (#ff6600 = oklch(0.696 0.204 43.5)),
|
||||
deepened in light mode so it passes AA as text on white (4.6:1) and
|
||||
brightened in dark mode (6.9:1 on the dark background).
|
||||
Tokens live on body so portaled dialogs inherit them too. */
|
||||
body {
|
||||
font-family:
|
||||
"Geist",
|
||||
ui-sans-serif,
|
||||
system-ui,
|
||||
-apple-system,
|
||||
sans-serif;
|
||||
--primary: oklch(0.58 0.175 43);
|
||||
--primary-foreground: oklch(0.985 0.005 43);
|
||||
--ring: oklch(0.58 0.175 43);
|
||||
}
|
||||
|
||||
.docs-content-body h2 {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 600;
|
||||
margin-top: 2.5rem;
|
||||
margin-bottom: 1rem;
|
||||
padding-bottom: 0.5rem;
|
||||
border-bottom: 1px solid var(--border);
|
||||
.dark body {
|
||||
--primary: oklch(0.7 0.18 43);
|
||||
--primary-foreground: oklch(0.18 0.035 43);
|
||||
--ring: oklch(0.7 0.18 43);
|
||||
}
|
||||
|
||||
.docs-content-body h3 {
|
||||
font-size: 1.25rem;
|
||||
font-weight: 600;
|
||||
margin-top: 2rem;
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.docs-content-body h4 {
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
margin-top: 1.5rem;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.docs-content-body p {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.docs-content-body a {
|
||||
color: var(--accent-foreground);
|
||||
text-decoration: underline;
|
||||
text-underline-offset: 2px;
|
||||
}
|
||||
|
||||
.docs-content-body a:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.docs-content-body code:not(pre code) {
|
||||
padding: 0.2rem 0.4rem;
|
||||
font-size: 0.875em;
|
||||
background-color: var(--muted);
|
||||
border-radius: var(--radius-sm);
|
||||
}
|
||||
|
||||
.docs-content-body pre {
|
||||
padding: 1rem;
|
||||
border-radius: var(--radius);
|
||||
background-color: var(--muted) !important;
|
||||
overflow-x: auto;
|
||||
margin: 1rem 0;
|
||||
}
|
||||
|
||||
.docs-content-body pre code {
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.docs-content-body ul,
|
||||
.docs-content-body ol {
|
||||
padding-left: 1.5rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.docs-content-body li {
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.docs-content-body table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
margin: 1rem 0;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.docs-content-body th,
|
||||
.docs-content-body td {
|
||||
padding: 0.75rem 1rem;
|
||||
text-align: left;
|
||||
border: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.docs-content-body th {
|
||||
background-color: var(--muted);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.docs-content-body blockquote {
|
||||
border-left: 4px solid var(--accent-foreground);
|
||||
padding-left: 1rem;
|
||||
margin: 1rem 0;
|
||||
color: var(--muted-foreground);
|
||||
font-style: italic;
|
||||
::selection {
|
||||
background: color-mix(in oklch, var(--primary) 25%, transparent);
|
||||
}
|
||||
|
||||
/* Prose dark mode fixes */
|
||||
.dark .prose {
|
||||
--tw-prose-body: var(--foreground);
|
||||
--tw-prose-headings: var(--foreground);
|
||||
--tw-prose-links: var(--accent-foreground);
|
||||
--tw-prose-links: var(--primary);
|
||||
--tw-prose-bold: var(--foreground);
|
||||
--tw-prose-code: var(--foreground);
|
||||
--tw-prose-pre-bg: var(--muted);
|
||||
|
||||
+27
-5
@@ -18,7 +18,13 @@
|
||||
}
|
||||
|
||||
.prose :where(a):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
|
||||
@apply text-foreground hover:underline;
|
||||
@apply text-primary hover:underline;
|
||||
}
|
||||
|
||||
.prose code,
|
||||
.prose pre,
|
||||
.prose .code-block {
|
||||
font-family: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
|
||||
}
|
||||
|
||||
.prose code {
|
||||
@@ -30,8 +36,6 @@
|
||||
word-break: keep-all;
|
||||
display: inline-block;
|
||||
opacity: 0.85;
|
||||
font-family:
|
||||
"SF Mono", Monaco, "Cascadia Code", "Roboto Mono", Consolas, "Courier New", monospace;
|
||||
}
|
||||
|
||||
.prose pre code,
|
||||
@@ -81,8 +85,8 @@
|
||||
|
||||
.prose p,
|
||||
.prose li {
|
||||
@apply text-foreground/70;
|
||||
font-weight: 300;
|
||||
@apply text-foreground/75;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.prose.user-message p,
|
||||
@@ -100,6 +104,24 @@
|
||||
@apply border-border border-t;
|
||||
}
|
||||
|
||||
/* Blockquotes: full hairline border + brand tint (replaces the typography
|
||||
plugin's thick border-left stripe and its quote marks) */
|
||||
.prose blockquote {
|
||||
border: 1px solid color-mix(in oklch, var(--primary) 25%, transparent);
|
||||
border-inline-start-width: 1px;
|
||||
background: color-mix(in oklch, var(--primary) 5%, transparent);
|
||||
border-radius: var(--radius);
|
||||
padding: 0.5rem 1rem;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
color: var(--muted-foreground);
|
||||
}
|
||||
|
||||
.prose blockquote p:first-of-type::before,
|
||||
.prose blockquote p:last-of-type::after {
|
||||
content: none;
|
||||
}
|
||||
|
||||
.prose {
|
||||
:where(code):not(:where([class~="not-prose"], [class~="not-prose"] *))::before {
|
||||
content: "";
|
||||
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 79 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 77 KiB |
Reference in New Issue
Block a user