@zvndev/darkmown 0.20.0 → 1.0.0

package/site/pages/pulse/index.skin

@@ -0,0 +1,434 @@
+/* ===================================================================
+   Pulse — a dark, glassy observability dashboard.
+   Layers on /base.wd (tokens, type, components). Everything here is
+   scoped under `.app-pulse` so the dashboard owns its own dark surface
+   and cyan/mint accent without leaking into the rest of the site.
+   Dark-first by design, but legible in light mode too.
+   =================================================================== */
+
+/* ── Accent + local dark surface (scoped, never global) ─────────────
+   The dashboard paints its own deep panels so it reads "premium
+   observability tool" even in OS light mode. Numbers go mono. */
+
+.app-pulse
+  --brand #18b89a
+  --brand-dim #0e8d77
+  --ok #2bd4a8
+  --warn #f0b429
+  --down #ff6b6b
+  --surface #0d1117
+  --surface-2 #131a23
+  --surface-3 #1a232e
+  --hair #243140
+  --hair-soft #1b2531
+  --txt #e7eef5
+  --txt-soft #aab7c4
+  --txt-mute #6b7a89
+  --mono ui-monospace, "SF Mono", SFMono-Regular, "JetBrains Mono", Menlo, Consolas, monospace
+  color $txt
+
+@media (prefers-color-scheme: dark)
+  .app-pulse
+    --brand #2fe0c0
+    --surface #0a0e14
+    --surface-2 #10161f
+    --surface-3 #161f2a
+
+/* The wrapper itself becomes the dark canvas with a faint radial glow. */
+.app-pulse
+  background radial-gradient(1200px 600px at 80% -10%, rgba(47,224,192,.08), transparent 60%), $surface
+  border 1px solid $hair
+  border-radius 18px
+  padding 1.75rem 1.9rem 2.1rem
+  margin-top 1.5rem
+  box-shadow 0 30px 80px -40px rgba(0,0,0,.7)
+
+.app-pulse h1
+  color $txt
+  letter-spacing -.02em
+  margin 0
+
+.app-pulse a
+  color $brand
+
+.app-pulse strong
+  color $txt
+
+.app-pulse code
+  background $surface-3
+  color $brand
+  border 1px solid $hair
+
+/* ── Masthead ───────────────────────────────────────────────────── */
+
+.pulse-head
+  display flex
+  flex-wrap wrap
+  align-items center
+  justify-content space-between
+  gap 1rem
+  padding-bottom 1.25rem
+  border-bottom 1px solid $hair
+
+.pulse-id
+  display flex
+  align-items center
+  gap .85rem
+
+.pulse-mark
+  width 2.4rem
+  height 2.4rem
+  border-radius 12px
+  background linear-gradient(145deg, $brand, $brand-dim)
+  display inline-flex
+  align-items center
+  justify-content center
+  font-size 1.3rem
+  box-shadow 0 0 0 1px rgba(47,224,192,.4), 0 8px 24px -8px rgba(47,224,192,.5)
+  flex-shrink 0
+
+.pulse-name
+  font-size 1.7rem
+  font-weight 700
+  letter-spacing -.03em
+  line-height 1
+  color $txt
+
+.pulse-sub
+  margin .35rem 0 0
+  font-size .82rem
+  color $txt-soft
+  font-family $mono
+
+.pulse-actions
+  display flex
+  align-items center
+  gap .75rem
+
+/* The live status line: a pulsing dot + monospace label. */
+.pulse-live
+  display inline-flex
+  align-items center
+  gap .5rem
+  font-family $mono
+  font-size .78rem
+  letter-spacing .1em
+  text-transform uppercase
+  color $txt-soft
+  padding .45rem .8rem
+  background $surface-2
+  border 1px solid $hair
+  border-radius 999px
+
+.pulse-live .dot
+  width .5rem
+  height .5rem
+  border-radius 50%
+  background $ok
+  box-shadow 0 0 0 0 rgba(43,212,168,.55)
+  animation pulse-beat 2s infinite
+
+/* ── Toolbar (summary line + refresh) ───────────────────────────── */
+
+.pulse-bar
+  display flex
+  flex-wrap wrap
+  align-items center
+  justify-content space-between
+  gap .75rem
+  margin 1.25rem 0 .25rem
+
+.pulse-summary
+  font-family $mono
+  font-size .85rem
+  color $txt-soft
+
+.pulse-summary p
+  margin 0
+
+.app-pulse .btn
+  background $surface-2
+  color $txt
+  border 1px solid $hair
+  font-size .85rem
+  padding .5rem 1rem
+  box-shadow none
+
+.app-pulse .btn:hover
+  border-color $brand
+  color $txt
+  transform translateY(-1px)
+  box-shadow 0 6px 18px -10px rgba(47,224,192,.6)
+
+/* ── Stat cards (rollups) — one tidy row ────────────────────────── */
+
+.pulse-stats
+  display grid
+  grid-template-columns repeat(4, 1fr)
+  gap .85rem
+  margin 1rem 0 1.5rem
+
+@media (max-width: 720px)
+  .pulse-stats
+    grid-template-columns 1fr 1fr
+
+.stat
+  background linear-gradient(180deg, $surface-2, $surface)
+  border 1px solid $hair
+  border-radius 12px
+  padding .9rem 1rem
+  position relative
+  overflow hidden
+
+.stat::after
+  content ""
+  position absolute
+  inset 0 auto 0 0
+  width 3px
+  background $brand
+  opacity .55
+
+/* Label = the first <p><strong> the directive emits for `**Label**`. */
+.stat > p
+  margin 0
+
+.stat > p:first-child
+  font-size .68rem
+  text-transform uppercase
+  letter-spacing .1em
+  color $txt-mute
+  margin-bottom .4rem
+
+.stat > p:first-child strong
+  font-weight 600
+  color $txt-mute
+
+.stat .stat-value
+  font-family $mono
+  font-size 1.6rem
+  font-weight 600
+  letter-spacing -.02em
+  color $txt
+  line-height 1
+
+.stat .stat-value p
+  margin 0
+
+/* Foot = the trailing caption paragraph after the value block. */
+.stat > p:last-child
+  margin-top .4rem
+  font-size .72rem
+  color $txt-soft
+  font-family $mono
+  line-height 1.4
+
+.stat.is-ok::after
+  background $ok
+.stat.is-warn::after
+  background $warn
+.stat.is-down::after
+  background $down
+
+.stat.is-ok .stat-value
+  color $ok
+.stat.is-warn .stat-value
+  color $warn
+.stat.is-down .stat-value
+  color $down
+
+/* ── Lifecycle states (loading / error / empty) — one quiet line ── */
+
+.pulse-state
+  display flex
+  align-items center
+  gap .65rem
+  padding .7rem 1rem
+  border-radius 10px
+  border 1px solid $hair
+  background $surface-2
+  font-family $mono
+  font-size .82rem
+  color $txt-soft
+  margin .75rem 0 0
+
+.pulse-state p
+  margin 0
+
+.pulse-state.is-error
+  border-color rgba(255,107,107,.5)
+  background rgba(255,107,107,.08)
+  color $down
+
+.pulse-state.is-empty
+  border-style dashed
+  color $txt-mute
+
+.pulse-spin
+  width 1rem
+  height 1rem
+  border-radius 50%
+  border 2px solid $hair
+  border-top-color $brand
+  animation pulse-spin .8s linear infinite
+  flex-shrink 0
+  display inline-block
+
+/* ── Services table — aligned rows, monospace numerics ──────────── */
+
+.svc-table
+  border 1px solid $hair
+  border-radius 14px
+  overflow hidden
+  background $surface-2
+
+/* Shared column grid: status · name · latency · uptime · region.
+   Applied to BOTH the header and every loop row so columns line up. */
+.svc-row
+  display grid
+  grid-template-columns 7.5rem minmax(8rem, 1fr) 6.5rem 6rem 5rem
+  align-items center
+  gap 1rem
+  padding .7rem 1.1rem
+  border-top 1px solid $hair-soft
+
+.svc-head
+  border-top none
+  background $surface-3
+  font-family $mono
+  font-size .68rem
+  text-transform uppercase
+  letter-spacing .1em
+  color $txt-mute
+
+.svc-head .c-num
+  text-align right
+
+/* Each loop row arrives wrapped in <div data-wd-loop-piece>; reset that
+   wrapper so rows stack flush and the grid lives on .svc-row itself. */
+.app-pulse [data-wd-loop-out]
+  display block
+
+.app-pulse [data-wd-loop-piece]
+  display block
+
+.app-pulse .svc-row:not(.svc-head)
+  transition background .15s ease
+
+.app-pulse [data-wd-loop-piece]:first-child .svc-row
+  border-top none
+
+.app-pulse .svc-row:not(.svc-head):hover
+  background $surface-3
+
+.app-pulse .svc-row p
+  margin 0
+
+/* Status cell: a colored dot + a small pill, both driven by `.class when`. */
+.c-status
+  display flex
+  align-items center
+  gap .55rem
+
+.c-status .dot
+  width .6rem
+  height .6rem
+  border-radius 50%
+  background $txt-mute
+  flex-shrink 0
+
+.app-pulse .svc-ok .c-status .dot
+  background $ok
+.app-pulse .svc-warn .c-status .dot
+  background $warn
+.app-pulse .svc-down .c-status .dot
+  background $down
+  box-shadow 0 0 10px $down
+
+.app-pulse .svc-row .pill
+  font-family $mono
+  font-size .68rem
+  letter-spacing .06em
+  padding .12rem .5rem
+  border-radius 999px
+  background $surface-3
+  color $txt-soft
+  border 1px solid $hair
+
+.app-pulse .svc-ok .pill
+  background rgba(43,212,168,.14)
+  color $ok
+  border-color rgba(43,212,168,.4)
+
+.app-pulse .svc-warn .pill
+  background rgba(240,180,41,.14)
+  color $warn
+  border-color rgba(240,180,41,.4)
+
+.app-pulse .svc-down .pill
+  background rgba(255,107,107,.16)
+  color $down
+  border-color rgba(255,107,107,.45)
+
+/* Name column. */
+.c-name strong
+  font-size .95rem
+  color $txt
+
+/* Numeric columns — monospace, right-aligned. */
+.c-num
+  font-family $mono
+  font-size .9rem
+  color $txt
+  text-align right
+  font-variant-numeric tabular-nums
+
+.app-pulse .svc-warn .c-num.is-latency
+  color $warn
+.app-pulse .svc-down .c-num.is-latency
+  color $down
+
+/* Region column. */
+.c-region
+  font-family $mono
+  font-size .76rem
+  letter-spacing .08em
+  text-transform uppercase
+  color $txt-mute
+  text-align right
+
+/* An empty feed renders the @empty branch instead of rows. */
+.svc-table .pulse-state
+  margin 0
+  border none
+  border-radius 0
+
+/* ── Source reveal (dark variant) ───────────────────────────────── */
+
+.app-pulse .source-reveal
+  background $surface-2
+  border 1px solid $hair
+  margin-top 1.75rem
+
+.app-pulse .source-reveal summary
+  color $brand
+
+.app-pulse .source-reveal pre
+  background #060a0f
+  box-shadow inset 0 0 0 1px $hair
+
+/* Animations (@keyframes pulse-beat / pulse-spin) and the
+   prefers-reduced-motion guard live in an inline <style> in index.wd,
+   because the .skin compiler emits one rule per declaration — which
+   would split a multi-stop @keyframes into separate (last-wins) blocks. */
+
+/* ── Responsive ─────────────────────────────────────────────────── */
+
+@media (max-width: 600px)
+  .app-pulse
+    padding 1.4rem 1.1rem 1.8rem
+  .svc-row
+    grid-template-columns 5rem minmax(6rem, 1fr) 5rem 5rem
+    gap .6rem
+    padding .65rem .8rem
+  .c-region
+    display none

package/site/pages/pulse/index.wd

@@ -0,0 +1,178 @@
+---
+title: Pulse — service status
+description: A calm, dark observability panel built in one Markdown file — a live :fetch board, build-time rollups, and a keyed services table, all with zero hand-written JavaScript.
+image: https://darkmown.com/__wd/media/og-pulse.png
+transitions: true
+---
+
+@include /nav.wd
+@include /base.wd
+
+<main class="wide app-pulse">
+
+<style>
+  @keyframes pulse-beat {
+    0%   { box-shadow: 0 0 0 0 rgba(43, 212, 168, .5); }
+    70%  { box-shadow: 0 0 0 6px rgba(43, 212, 168, 0); }
+    100% { box-shadow: 0 0 0 0 rgba(43, 212, 168, 0); }
+  }
+  @keyframes pulse-spin { to { transform: rotate(360deg); } }
+  @media (prefers-reduced-motion: reduce) {
+    .app-pulse .pulse-live .dot,
+    .app-pulse .pulse-spin { animation: none; }
+  }
+</style>
+
+:fetch board from "/__wd/data/metrics.json"
+:every 10s -> board refetch
+
+:computed totalServices = board.services.length
+
+<header class="pulse-head">
+  <div class="pulse-id">
+    <span class="pulse-mark">◐</span>
+    <div>
+      <h1 class="pulse-name">Pulse</h1>
+      <p class="pulse-sub">Infrastructure status · all regions</p>
+    </div>
+  </div>
+  <div class="pulse-actions">
+    <span class="pulse-live"><span class="dot"></span>live</span>
+  </div>
+</header>
+
+<div class="pulse-bar">
+
+::: div .pulse-summary
+{ totalServices } services · sorted slowest first
+:::
+
+:button "↻ Refresh" -> board refetch
+
+</div>
+
+:if board_loading
+::: div .pulse-state .is-loading
+<span class="pulse-spin"></span> Refreshing…
+:::
+:else if board_error
+::: div .pulse-state .is-error
+✕ Feed unreachable — { board_error }
+:::
+:endif
+
+<div class="pulse-stats">
+
+::: stat .is-ok
+**Services tracked**
+
+::: div .stat-value
+{ totalServices }
+:::
+
+iad · sfo · fra · global
+:::
+
+::: stat .is-ok
+**Snapshot**
+
+::: div .stat-value
+06:05
+:::
+
+Sampled UTC, this morning
+:::
+
+::: stat .is-warn
+**Source**
+
+::: div .stat-value
+:fetch
+:::
+
+Live JSON endpoint
+:::
+
+::: stat
+**Framework JS**
+
+::: div .stat-value
+0 KB
+:::
+
+Until this page fetched
+:::
+
+</div>
+
+<div class="svc-table">
+
+<div class="svc-row svc-head">
+  <span class="c-status">status</span>
+  <span class="c-name">service</span>
+  <span class="c-num">latency</span>
+  <span class="c-num">uptime</span>
+  <span class="c-region">region</span>
+</div>
+
+@loop board.services into s sort by s.latency desc
+::: div .svc-row .svc-ok when s.status == "ok" .svc-warn when s.status == "warn" .svc-down when s.status == "down"
+::: div .c-status
+::: span .dot
+:::
+::: span .pill
+{ s.status }
+:::
+:::
+::: div .c-name
+**{ s.name }**
+:::
+::: div .c-num .is-latency
+{ s.latency }ms
+:::
+::: div .c-num
+{ s.uptime }%
+:::
+::: div .c-region
+{ s.region }
+:::
+:::
+@empty
+::: div .pulse-state .is-empty
+○ No services in the feed.
+:::
+@endloop
+
+</div>
+
+<details class="source-reveal"><summary>Built with <code>:fetch</code> — view source</summary>
+
+```wd
+:fetch board from "/__wd/data/metrics.json"
+:every 10s -> board refetch
+
+:computed totalServices = board.services.length
+
+:if board_loading
+Refreshing…
+:else if board_error
+Feed unreachable — { board_error }
+:endif
+
+:button "↻ Refresh" -> board refetch
+
+@loop board.services into s sort by s.latency desc
+::: div .svc-row .svc-ok when s.status == "ok" .svc-warn when s.status == "warn" .svc-down when s.status == "down"
+**{ s.name }** · { s.region }
+{ s.latency }ms · { s.uptime }%
+:::
+@empty
+No services in the feed.
+@endloop
+```
+
+</details>
+
+</main>
+
+@include /footer.wd