Merge pull request #4 from WickyNilliams/feature/seo

docs: SEO

docs/src/components/BrandedCalendar.astro

@@ -0,0 +1,133 @@
+---
+interface Props {
+  class?: string;
+  value?: string;
+}
+
+const { class: className, value } = Astro.props;
+---
+
+<div class:list={["card", className]}>
+  <calendar-range months="2" value={value}>
+    <svg
+      aria-label="Previous"
+      slot="button-previous"
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+    >
+      <path d="M15.75 19.5 8.25 12l7.5-7.5"></path>
+    </svg>
+    <svg
+      aria-label="Next"
+      slot="button-next"
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+    >
+      <path d="m8.25 4.5 7.5 7.5-7.5 7.5"></path>
+    </svg>
+
+    <div class="grid">
+      <calendar-month></calendar-month>
+      <calendar-month offset="1"></calendar-month>
+    </div>
+  </calendar-range>
+</div>
+
+<style is:global>
+  .card {
+    --border: #dcdfe5;
+    --radius: 4px;
+    --icon-color: #666;
+    --accent: var(--color-accent);
+
+    padding: var(--space-m-l);
+    border-radius: 5px;
+    border: 1px solid var(--border);
+    background: white;
+    box-shadow:
+      0 1px 5px rgba(0, 0, 0, 0.05),
+      0 0 30px rgba(0, 0, 0, 0.01);
+    inline-size: fit-content;
+    margin-inline: auto;
+    block-size: fit-content;
+
+    .grid {
+      display: flex;
+      gap: 1em;
+      justify-content: center;
+      flex-wrap: wrap;
+    }
+
+    calendar-range {
+      svg {
+        height: 16px;
+        width: 16px;
+        fill: none;
+        stroke: var(--icon-color);
+        stroke-width: 1.5;
+      }
+
+      path {
+        stroke-linecap: round;
+        stroke-linejoin: round;
+      }
+
+      &::part(button) {
+        width: 30px;
+        height: 30px;
+        border: 1px solid var(--border);
+        background: white;
+        color: var(--icon-color);
+        border-radius: var(--radius);
+      }
+
+      &::part(button):is(:hover, :focus-visible) {
+        --icon-color: black;
+      }
+
+      &::part(button):hover {
+        background: rgba(0, 0, 0, 0.02);
+      }
+
+      &::part(button):focus-visible {
+        outline: 2px solid var(--accent);
+        outline-offset: -1px;
+      }
+    }
+
+    calendar-month {
+      --color-accent: var(--accent);
+
+      &::part(button) {
+        border-radius: var(--radius);
+      }
+
+      &::part(today) {
+        color: var(--color-accent);
+      }
+
+      &::part(today selected),
+      &::part(today):focus-visible {
+        color: white;
+      }
+
+      &::part(range-inner) {
+        border-radius: 0;
+      }
+
+      &::part(range-start) {
+        border-start-end-radius: 0;
+        border-end-end-radius: 0;
+      }
+
+      &::part(range-end) {
+        border-start-start-radius: 0;
+        border-end-start-radius: 0;
+      }
+
+      &::part(range-start range-end) {
+        border-radius: var(--radius);
+      }
+    }
+  }
+</style>

docs/src/components/FeatureExample.astro

@@ -0,0 +1,55 @@
+---
+import BrandedCalendar from "./BrandedCalendar.astro";
+import Example from "./Example.astro";
+---
+
+<Example class="feature">
+  <BrandedCalendar />
+</Example>
+
+<script is:inline type="module">
+  const toISO = (date) => date.toISOString().split("T")[0];
+
+  // pick some dates mid-month
+  const today = new Date();
+  const start = new Date(today.getUTCFullYear(), today.getUTCMonth(), 8);
+  const end = new Date(today.getUTCFullYear(), today.getUTCMonth(), 16);
+
+  document
+    .querySelector("calendar-range")
+    ?.setAttribute("value", `${toISO(start)}/${toISO(end)}`);
+
+  await Promise.all([
+    customElements.whenDefined("calendar-range"),
+    customElements.whenDefined("calendar-month"),
+  ]);
+
+  document.querySelector(".card")?.classList.add("reveal");
+</script>
+
+<style is:global>
+  .feature {
+    container-type: inline-size;
+  }
+
+  .card {
+    transition:
+      opacity 0.6s ease-in,
+      transform 0.4s ease-out;
+
+    /* avoid reflow */
+    min-block-size: 631px;
+    @container (inline-size > 562px) {
+      min-block-size: 385px;
+    }
+
+    /* animate card in when ready */
+    &:not(.reveal) {
+      opacity: 0;
+
+      @media (prefers-reduced-motion: no-preference) {
+        transform: translateY(-3em);
+      }
+    }
+  }
+</style>

docs/src/components/PageTitle.astro

@@ -25,14 +25,10 @@ interface Props {
     font-size: var(--step-4);
     text-decoration: none;
     border-block-end: var(--space-3xs) solid var(--color-accent);
-    /* text-decoration: underline;
-    text-decoration-thickness: var(--space-3xs);
-    text-decoration-color: var(--color-accent);
-    text-decoration-skip-ink: none; */
   }
 
   .title:focus-visible {
-    outline-offset: 0px;
+    outline-offset: 3px;
     outline-width: 3px;
   }
 </style>

docs/src/layouts/ApiLayout.astro

@@ -1,14 +1,15 @@
 ---
+import type { ComponentProps } from "astro/types";
 import Layout from "./Layout.astro";
 
-interface Props {
-  title: string;
+interface Props extends ComponentProps<typeof Layout> {
+  heading: string;
 }
-const { title } = Astro.props;
+const { meta, heading } = Astro.props;
 ---
 
-<Layout title={title}>
-  <h1 slot="intro"><code>{title}</code></h1>
+<Layout meta={meta}>
+  <h1 slot="intro"><code>{heading}</code></h1>
   <slot />
 </Layout>