Try deploy

src/components/content/Sidenote.astro

@@ -0,0 +1,114 @@
+---
+interface Props {
+  id: string;
+  marker: string;
+  type: string;
+  content: string;
+  title: string;
+}
+
+const {id, marker, type, content, title} = Astro.props
+---
+
+<div class="note" id={id} style={`position-anchor: --note-${id}; --marker: "${marker}"`}>
+  <div class="container content">
+    {title && <header class="title">{title}</header>}
+    <span class="badge">{type.toUpperCase()}</span>
+    <p class="body">{content}</p>
+    <footer class="backref">
+      <a href={`#ref-${id}`}>↩</a>
+    </footer>
+  </div>
+</div>
+
+<style>
+  .note {
+    scroll-margin-top: calc(var(--layout-header-height) + var(--size-8));
+    font-size: clamp(1rem, 2.5vw, 1.25rem);
+
+    @supports (anchor-name: --test) {
+      @media (--bp-desktop) {
+        position: absolute;
+        top: calc(anchor(top) - var(--size-10));
+      }
+    }
+  }
+
+  .container {
+    position: relative;
+    padding: var(--space-10) var(--space-8) var(--space-6) var(--space-14);
+    border: var(--space-1) solid var(--color-surface-inverse);
+    box-shadow: var(--color-shadow);
+
+    &::before {
+      content: var(--marker);
+
+      position: absolute;
+      top: 0;
+      left: 0;
+
+      display: flex;
+      align-items: flex-start;
+      justify-content: center;
+
+      width: var(--space-10);
+      height: 100%;
+
+      font-family: var(--font-mono);
+      font-size: var(--type-4);
+      line-height: 1.875;
+      color: var(--color-primary);
+
+      background: var(--color-surface-inverse);
+    }
+
+    & .title {
+      @mixin typo_body-alt;
+      @mixin my var(--size-0);
+
+      font-family: var(--font-header);
+      font-weight: 900;
+      text-transform: uppercase;
+    }
+
+    & .badge {
+      @mixin px var(--size-4);
+      @mixin py var(--size-2);
+      @mixin typo_code;
+
+      position: absolute;
+      top: 0;
+      right: 0;
+
+      color: var(--color-text-inverse);
+
+      background: var(--color-surface-inverse);
+    }
+
+    & .body {
+      @mixin typo_body-small;
+    }
+
+    & .backref {
+      @mixin mt var(--size-4);
+
+      text-align: right;
+
+       & a {
+         @mixin pa var(--size-2);
+
+         font-weight: 700;
+         color: var(--text-color-tertiary);
+         transition:
+           color var(--motion-normal) var(--ease-out),
+           background var(--motion-normal) var(--ease-out);
+
+         &:hover {
+           color: var(--color-text-inverse);
+           text-decoration: none;
+           background: var(--color-primary);
+       }
+      }
+    }
+  }
+</style>