feat(site): when the sun, its pillar and the moon next show, and refraction

apps/site/package.json

@@ -10,7 +10,7 @@
     "preview": "wrangler dev"
   },
   "dependencies": {
-    "@northguild/gmt": "^1.19.0",
+    "@northguild/gmt": "^1.20.0",
     "@northguild/theme": "workspace:*",
     "astro": "7.2.7"
   },

apps/site/src/components/Aurora.astro

@@ -5,6 +5,10 @@ import {
   compass,
   coords,
 } from "../scripts/aurora.sites";
+// The installed @northguild/gmt's version, read at build time so the footer
+// follows every upgrade. The package does not export its package.json, so
+// it is read by path; only the version string reaches the page.
+import { version as gmtVersion } from "../../node_modules/@northguild/gmt/package.json";
 ---
 
 <div class="aurora" aria-hidden="true">
@@ -63,6 +67,55 @@ import {
           Looking {compass(site.heading)} from {site.spot}.{" "}
           {coords(site.lat, site.lon)}, eye height {site.eye}&nbsp;m.
         </p>
+        <ul class="sky-times" aria-label="Sun and moon in this window">
+          <li data-body="sun">
+            <svg viewBox="0 0 24 24" aria-hidden="true">
+              <circle cx="12" cy="12" r="4.25" fill="currentColor"></circle>
+              <path
+                d="M12 2.5v3M12 18.5v3M2.5 12h3M18.5 12h3M5.3 5.3l2.1 2.1M16.6 16.6l2.1 2.1M5.3 18.7l2.1-2.1M16.6 7.4l2.1-2.1"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="1.6"
+                stroke-linecap="round"></path>
+            </svg>
+            <span class="body">Sun</span>
+            <span class="when">Looking ahead…</span>
+          </li>
+          <li data-body="halo">
+            <svg viewBox="0 0 24 24" aria-hidden="true">
+              <circle cx="12" cy="13" r="2.6" fill="currentColor"></circle>
+              <circle
+                cx="12"
+                cy="13"
+                r="7.6"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="1.3"
+                stroke-dasharray="3.2 1.6"
+                opacity="0.8"></circle>
+              <path
+                d="M12 1.5v7.2"
+                stroke="currentColor"
+                stroke-width="1.6"
+                stroke-linecap="round"></path>
+            </svg>
+            <span class="body">Solar halo / pillar</span>
+            <span class="when">Looking ahead…</span>
+          </li>
+          <li data-body="moon">
+            <svg viewBox="0 0 24 24" aria-hidden="true">
+              <circle class="dark" cx="12" cy="12" r="8"></circle>
+              <path class="lit" fill="currentColor"></path>
+            </svg>
+            <span class="body">Moon</span>
+            <span class="when">Looking ahead…</span>
+            <span class="phase"></span>
+          </li>
+          <li class="note">
+            When each shows in this window, in your time zone<span class="zone"
+            ></span>.
+          </li>
+        </ul>
         <p>
           It is always night here, but the stars, planets, moon and sun are
           where they really are right now, above the real {site.ground}. The
@@ -89,9 +142,13 @@ import {
       ))
     }
   </dl>
+  <p class="sky-footer">
+    Site runs on <a href="/gmt/">@northguild/gmt</a> v{gmtVersion}
+  </p>
 </div>
 
 <script>
+  import type { SiteTimes } from "../scripts/aurora.ahead";
   import type {
     AuroraMessage,
     SkyLabel,
@@ -161,6 +218,8 @@ import {
         if (typeof data === "object") {
           if ("pick" in data) {
             label(data.pick);
+          } else if ("times" in data) {
+            showTimes(data.times, data.zone);
           } else {
             site = data.site;
             show();
@@ -199,6 +258,54 @@ import {
     }
   }
 
+  // Sun and moon times: the worker works them out while the popover is open
+  // (and from a hover or focus on its button, for a head start).
+  const R = 8;
+  /** The moon's lit part for its age (0 new, π full), lit on the right while
+   * waxing, as seen from the north. */
+  const litPath = (age: number) => {
+    const waxing = age < Math.PI;
+    const crescent = Math.cos(age) > 0;
+    const rx = (R * Math.abs(Math.cos(age))).toFixed(2);
+    const limb = waxing ? 1 : 0;
+    const terminator = waxing === crescent ? 0 : 1;
+    return `M12 ${12 - R}A${R} ${R} 0 0 ${limb} 12 ${12 + R}A${rx} ${R} 0 0 ${terminator} 12 ${12 - R}Z`;
+  };
+  const showTimes = (all: SiteTimes[], zone: string) => {
+    for (const el of document.querySelectorAll(".sky-times .zone")) {
+      el.textContent = zone ? ` (${zone})` : "";
+    }
+    all.forEach((times, i) => {
+      const section = sections[i];
+      if (!section) return;
+      for (const body of ["sun", "halo", "moon"] as const) {
+        const row = section.querySelector(`[data-body="${body}"]`);
+        const when = row?.querySelector(".when");
+        if (!row || !when) continue;
+        when.textContent = times[body].when;
+        row.classList.toggle("now", times[body].now);
+      }
+      const moon = section.querySelector('[data-body="moon"]');
+      moon?.querySelector(".phase")?.replaceChildren(times.moon.phase);
+      moon?.querySelector(".lit")?.setAttribute("d", litPath(times.moon.age));
+    });
+  };
+  const popover = document.querySelector<HTMLElement>("#sky-info");
+  const want = (yes: boolean) => post?.({ type: "times", want: yes });
+  popover?.addEventListener("toggle", (event) =>
+    want((event as ToggleEvent).newState === "open"),
+  );
+  for (const type of ["pointerenter", "focus"]) {
+    info?.addEventListener(type, () => want(true));
+  }
+  // Leaving the button without opening the popover stops the search. Focus
+  // moving into the open popover keeps it.
+  for (const type of ["pointerleave", "blur"]) {
+    info?.addEventListener(type, () => {
+      if (!popover?.matches(":popover-open")) want(false);
+    });
+  }
+
   // Tooltips: over bare sky the page asks the worker what is drawn under the
   // pointer (at most once a frame) and names it.
   const tip = document.querySelector<HTMLElement>(".sky-tip");
@@ -561,4 +668,70 @@ import {
   .sky-info dd {
     margin: 0;
   }
+
+  /* Sun and moon: icon, name, then when; the moon's phase on a line below.
+     A body in view now is lit in cyan. */
+  .sky-times {
+    display: grid;
+    gap: 0.5rem;
+    margin: 0 0 0.6rem;
+    padding: 0.5rem 0;
+    list-style: none;
+    border-block: 1px solid var(--gmt-hairline);
+  }
+  /* The icon beside the name, and the times (and phase) under the name. */
+  .sky-times li {
+    display: grid;
+    grid-template-columns: 1.1rem 1fr;
+    column-gap: 0.5rem;
+    align-items: start;
+  }
+  .sky-times .when {
+    grid-column: 2;
+  }
+  .sky-times svg {
+    width: 1.1rem;
+    height: 1.1rem;
+    margin-top: 0.05rem;
+    color: var(--gmt-ice);
+  }
+  .sky-times .dark {
+    fill: color(from var(--gmt-ice) srgb r g b / 0.08);
+    stroke: color(from var(--gmt-ice) srgb r g b / 0.35);
+    stroke-width: 1;
+  }
+  .sky-times .body {
+    color: var(--gmt-ice);
+  }
+  .sky-times .phase {
+    grid-column: 2;
+  }
+  .sky-times .phase:empty {
+    display: none;
+  }
+  .sky-times li.now svg,
+  .sky-times li.now .when {
+    color: var(--gmt-cyan);
+  }
+  /* A quiet footer under the credits. */
+  .sky-info .sky-footer {
+    margin: 0.6rem 0 0;
+    padding-top: 0.5rem;
+    border-top: 1px solid var(--gmt-hairline);
+  }
+  .sky-footer a {
+    color: var(--gmt-ice);
+    text-decoration-color: var(--gmt-hairline);
+    text-underline-offset: 0.2em;
+  }
+  .sky-footer a:hover,
+  .sky-footer a:focus-visible {
+    color: var(--gmt-cyan);
+  }
+
+  .sky-times li.note {
+    display: block;
+    margin-top: 0.1rem;
+    opacity: 0.7;
+  }
 </style>

apps/site/src/components/Header.astro

@@ -33,7 +33,10 @@ const links = [
 </header>
 
 <style>
+  /* A light frost: what is behind (stars, constellation lines) shows through
+     softened instead of vanishing. */
   .site-header {
+    --gmt-blur: 4px;
     position: sticky;
     top: 0;
     z-index: 10;

apps/site/src/components/RepoCard.astro

@@ -22,6 +22,8 @@ const { name, description, docsHref, githubHref } = Astro.props;
      soft glow fades in around the card, on the theme's enter timing. Going
      back is quicker, so moving between cards never leaves a trail. */
   .repo-card {
+    /* A light frost, as on the header: the sky shows through softened. */
+    --gmt-blur: 4px;
     border: 1px solid var(--gmt-border);
     display: flex;
     flex-direction: column;