From 55b9d941de78026f2ae18b1fa1addae72b4df0cf Mon Sep 17 00:00:00 2001
From: Nate Moore <nate@natemoo.re>
Date: Mon, 7 Apr 2025 22:32:03 -0500
Subject: [PATCH] feat: add aside

---
 src/components/Aside.astro | 301 +++++++++++++++++++++++++++++++++++++
 1 file changed, 301 insertions(+)
 create mode 100644 src/components/Aside.astro

diff --git a/src/components/Aside.astro b/src/components/Aside.astro
new file mode 100644
index 0000000..593b1a9
--- /dev/null
+++ b/src/components/Aside.astro
@@ -0,0 +1,301 @@
+---
+import type { Aside as BaseProps } from "@astrojs/starlight/components";
+
+type Props = Parameters<typeof BaseProps>[0];
+
+const { type = "note" } = Astro.props;
+
+const symbols = {
+  note: "●",
+  tip: "◆",
+  caution: "▲",
+  danger: "■",
+};
+---
+
+<box-gleam>
+  <aside class:list={["aside", `type-${type}`]}>
+    <h2 class="label font-mono">
+      <span class="symbol">{symbols[type]}</span>
+      {type}
+    </h2>
+    <slot />
+  </aside>
+</box-gleam>
+
+<style>
+  :root {
+    --c-space: srgb;
+    --c-blue: var(--c-space) 0 90% 1;
+    --c-green: var(--c-space) 0 1 25%;
+    --c-yellow: var(--c-space) 1 90% 15%;
+    --c-red: var(--c-space) 1 25% 25%;
+    @media (dynamic-range: high) {
+      @supports (color: color(display-p3 1 1 1)) {
+        --c-space: display-p3;
+      }
+    }
+  }
+  .label,
+  .aside :global(code) {
+    --_mod: 0.67;
+    --text: color(
+      from color(var(--color)) srgb calc(r + var(--_mod)) calc(g + var(--_mod))
+        calc(b + var(--_mod)) / 100%
+    );
+    font-size: 1rem;
+    color: var(--text);
+    margin: 0;
+    text-box: trim-both cap alphabetic;
+    position: relative;
+  }
+  .aside :global(code) {
+    --text-10: color(from var(--text) srgb r g b / 10%);
+    --text-50: color(from var(--text) srgb r g b / 50%);
+    border-top: 2px solid var(--text-10);
+    /* border-bottom: 1px solid var(--text-10); */
+    padding: 0.05ch 0.33ch;
+    border-radius: 4px;
+    background: var(--text-10);
+    /* https://smoothshadows.com/#djEsMiw1LDAuMDcsMjQsMzIsMCwjMDMwNzEyLCNmM2Y0ZjYsI2ZmZmZmZiwy */
+    box-shadow:
+      0px 1px 1px rgba(3, 7, 18, 0.07),
+      0px 5px 4px rgba(3, 7, 18, 0.06),
+      0px 12px 9px rgba(3, 7, 18, 0.04),
+      0px 20px 15px rgba(3, 7, 18, 0.03),
+      0px 32px 24px rgba(3, 7, 18, 0.01);
+  }
+  .label {
+    text-transform: uppercase;
+  }
+  .label::after {
+    --_s-line: 1px;
+    --_s-gap: 2px;
+
+    content: "";
+    position: absolute;
+    inset: 0;
+    left: var(--inset, 0);
+    background: repeating-linear-gradient(
+      to right,
+      transparent 0,
+      var(--text) var(--_s-line),
+      transparent var(--_s-line),
+      transparent calc(var(--_s-line) + var(--_s-gap))
+    );
+    mask-image: linear-gradient(
+      in lab to right,
+      rgb(0 0 0 / 0%),
+      rgb(0 0 0 / 90%)
+    );
+  }
+  .type-note {
+    --color: var(--c-blue);
+    --inset: 8ch;
+  }
+  .type-tip {
+    --color: var(--c-green);
+    --inset: 6ch;
+  }
+  .type-caution {
+    --color: var(--c-yellow);
+    --inset: 10ch;
+  }
+  .type-danger {
+    --color: var(--c-red);
+    --inset: 9ch;
+  }
+  .aside {
+    display: flex;
+    flex-direction: column;
+    padding: 24px 16px;
+    gap: 8px;
+
+    position: relative;
+    aspect-ratio: 3 / 1;
+    width: 320px;
+
+    --_border-width: 2px;
+    --_corner: 12px;
+
+    background: linear-gradient(
+      to bottom,
+      color(var(--color) / 90%),
+      color(var(--color) / 50%)
+    );
+    isolation: isolate;
+    box-shadow:
+      0px 1px 1px color(var(--color) / 0.07),
+      0px 5px 4px color(var(--color) / 0.06),
+      0px 12px 9px color(var(--color) / 0.04),
+      0px 20px 15px color(var(--color) / 0.03),
+      0px 32px 24px color(var(--color) / 0.01);
+  }
+  .aside::before {
+    content: "";
+    inset: var(--_border-width);
+    clip-path: polygon(
+      var(--_corner) 0,
+      calc(100% - var(--_corner)) 0,
+      100% var(--_corner),
+      100% calc(100% - var(--_corner)),
+      calc(100% - var(--_corner)) 100%,
+      var(--_corner) 100%,
+      0 calc(100% - var(--_corner)),
+      0 var(--_corner)
+    );
+    pointer-events: none;
+
+    background: var(--c-background)
+      radial-gradient(
+        400% 200% at center top,
+        color(var(--color) / 50%),
+        color(var(--color) / 10%)
+      );
+
+    position: absolute;
+    z-index: -1;
+  }
+  .aside::after {
+    content: "";
+    inset: 0;
+    position: absolute;
+    z-index: 1;
+    pointer-events: none;
+  }
+</style>
+
+<style>
+  @property --angle {
+    syntax: "<angle>";
+    initial-value: 0deg;
+    inherits: false;
+  }
+
+  @property --x {
+    syntax: "<percentage>";
+    initial-value: 35%;
+    inherits: false;
+  }
+
+  @property --shine {
+    syntax: "<color>";
+    initial-value: transparent;
+    inherits: false;
+  }
+
+  @property --shadow-strength {
+    syntax: "<percentage>";
+    initial-value: 0%;
+    inherits: false;
+  }
+
+  :root {
+    --h: 240;
+    --s: 0%;
+    --l: 100%;
+    --surface-1: hsl(var(--h) var(--s) calc(var(--l) + 4%) / 0);
+    --surface-2: hsl(var(--h) var(--s) calc(var(--l) + 8%) / 0);
+    --surface-3: hsl(var(--h) var(--s) calc(var(--l) + 15%) / 1);
+    --shadow-color: var(--h) var(--s) 15%;
+    --shadow-strength: 1%;
+    --shadow: 0 -2px 5px 0 hsl(var(--shadow-color) /
+            calc(var(--shadow-strength) + 2%)),
+      0 1px 1px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 3%)),
+      0 2px 2px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 3%)),
+      0 5px 5px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 4%)),
+      0 9px 9px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 5%)),
+      0 16px 16px -2px hsl(var(--shadow-color) /
+            calc(var(--shadow-strength) + 6%));
+    --space: 1rem;
+  }
+
+  .aside::after {
+    --_gleam: linear-gradient(
+        60deg,
+        transparent 40%,
+        var(--surface-3),
+        transparent 70%
+      )
+      var(--x) 0 / 600% 100% padding-box;
+    --_gleam-cover: radial-gradient(
+        circle at center,
+        var(--surface-1),
+        transparent
+      )
+      padding-box;
+    --_cover: linear-gradient(var(--surface-1), var(--surface-1)) padding-box;
+    --_shine: conic-gradient(
+        from var(--angle) at 20px 32px,
+        var(--shine),
+        transparent 20% 80%,
+        var(--shine)
+      )
+      border-box;
+    --_edges: linear-gradient(
+        30deg,
+        var(--surface-3),
+        var(--surface-2) 20% 80%,
+        var(--surface-3)
+      )
+      border-box;
+
+    display: grid;
+    position: relative;
+    border: 2px solid transparent;
+    background: var(--_gleam-cover), var(--_gleam), var(--_cover), var(--_shine),
+      var(--_edges);
+    mix-blend-mode: overlay;
+    opacity: 33%;
+  }
+
+  @supports (animation-timeline: view()) {
+    .aside::after {
+      animation: linear both;
+      animation-name: gleam, shine, shadow;
+      animation-timeline: view();
+      animation-range:
+        cover -10% cover 100%,
+        entry 0% cover 65%,
+        entry 0% exit 150%;
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .aside::after {
+      animation: none !important;
+    }
+  }
+
+  @keyframes gleam {
+    from {
+      --angle: -1turn;
+      --x: 0%;
+    }
+    to {
+      --angle: 1turn;
+      --x: 100%;
+    }
+  }
+
+  @keyframes shadow {
+    from,
+    to {
+      box-shadow: none;
+    }
+    50%,
+    65% {
+      box-shadow: var(--shadow);
+    }
+  }
+
+  @keyframes shine {
+    0%,
+    45% {
+      --shine: transparent;
+    }
+    80% {
+      --shine: hsl(var(--h) var(--s) calc(var(--l) + 38%));
+    }
+  }
+</style>