video-gallery, map and link-effects

package.json

@@ -12,7 +12,7 @@
     "preview": "astro preview",
     "astro": "astro",
     "build:icon-data": "node scripts/build-icon-data.mjs",
-    "check": "node --experimental-strip-types --disable-warning=ExperimentalWarning scripts/check-catalog.mjs && node --disable-warning=ExperimentalWarning scripts/check-business-hours.mjs && node scripts/check-news-ticker.mjs && node --disable-warning=ExperimentalWarning scripts/check-flip-box.mjs && node scripts/check-social-grid.mjs && node --experimental-strip-types --disable-warning=ExperimentalWarning scripts/check-four.mjs && node --disable-warning=ExperimentalWarning scripts/check-video-player.mjs && node scripts/check-cookie-consent.mjs && node --experimental-strip-types --disable-warning=ExperimentalWarning scripts/check-icon.mjs && node --experimental-strip-types --disable-warning=ExperimentalWarning scripts/check-animated-background.mjs && node --disable-warning=ExperimentalWarning scripts/check-modal-and-bar.mjs"
+    "check": "node --experimental-strip-types --disable-warning=ExperimentalWarning scripts/check-catalog.mjs && node --disable-warning=ExperimentalWarning scripts/check-business-hours.mjs && node scripts/check-news-ticker.mjs && node --disable-warning=ExperimentalWarning scripts/check-flip-box.mjs && node scripts/check-social-grid.mjs && node --experimental-strip-types --disable-warning=ExperimentalWarning scripts/check-four.mjs && node --disable-warning=ExperimentalWarning scripts/check-video-player.mjs && node scripts/check-cookie-consent.mjs && node --experimental-strip-types --disable-warning=ExperimentalWarning scripts/check-icon.mjs && node --experimental-strip-types --disable-warning=ExperimentalWarning scripts/check-animated-background.mjs && node --disable-warning=ExperimentalWarning scripts/check-modal-and-bar.mjs && node --disable-warning=ExperimentalWarning scripts/check-media-and-links.mjs"
   },
   "dependencies": {
     "astro": "^7.2.1"

src/components/demos/LinkEffectsDemo.astro

@@ -0,0 +1,98 @@
+---
+/**
+ * Demo for `link-effects`. The website renders this too (see README, "Consumed by
+ * superherotech.ai"); it has no assets, and every host token has a fallback.
+ *
+ * All eleven effects, each with its class name, through the `<Link>` wrapper (the same file as
+ * `<LinkEffects>`). Hover one, or Tab to it: focus shows the same effect. The links point at
+ * this demo, so following one goes nowhere.
+ */
+import LinkEffects from '../../library/link-effects/LinkEffects.astro';
+import Link from '../../library/link-effects/LinkEffects.astro';
+interface Props {
+  /** Where public/demo/ is served. The gallery uses /demo/; the website passes /elements-demo/. */
+  assetBase?: string;
+}
+const href = '#link-effects-demo';
+const effects = [
+  { effect: 'underline-slide', label: 'About us', note: 'In from the left, out to the right.' },
+  { effect: 'underline-grow', label: 'Read the guide', note: 'Underlined at rest, so it works in a paragraph.' },
+  { effect: 'brackets', label: 'Services', note: 'Brackets close in.' },
+  { effect: 'highlight', label: 'Book a visit', note: 'A marker sweeps behind the words.' },
+  { effect: 'box', label: 'Contact', note: 'A frame draws itself.' },
+  { effect: 'strike-to-underline', label: 'Old menu', note: 'Strikes through, then drops to an underline.' },
+  { effect: 'arrow', label: 'Next step', note: 'The arrow’s room is kept, so nothing moves.' },
+  { effect: 'circle', label: 'Sale', note: 'Ringed by hand.' },
+  { effect: 'peek', label: 'Pricing', peek: '$49/mo', note: 'Ours: the answer peeks in. data-peek="$49/mo".' },
+  { effect: 'swash', label: 'Our story', note: 'Ours: a hand-drawn line draws itself.' },
+  { effect: 'tag', label: 'New season', note: 'Ours: a pill fills, the text turning with it.' },
+] as const;
+---
+<LinkEffects />
+<div class="demo-lk" id="link-effects-demo">
+  <ul class="demo-lk__grid" role="list">
+    {
+      effects.map((e) => (
+        <li class="demo-lk__cell">
+          <p class="demo-lk__link">
+            {e.effect === 'peek' ? (
+              <Link effect="peek" peek={e.peek} href={href}>
+                {e.label}
+              </Link>
+            ) : (
+              <Link effect={e.effect} href={href}>
+                {e.label}
+              </Link>
+            )}
+          </p>
+          <code class="demo-lk__class">lk-{e.effect}</code>
+          <p class="demo-lk__note">{e.note}</p>
+        </li>
+      ))
+    }
+  </ul>
+  <p class="demo-lk__prose">
+    In running text, keep an underline at rest: this sentence links to <Link effect="underline-grow" href={href}>the
+    planting guide</Link>, which thickens on hover and on focus and wraps across lines like any other link.
+  </p>
+</div>
+<style>
+  .demo-lk {
+    --lk-accent: var(--purple, #5933d8);
+    --lk-ink: var(--ink, #1e283c);
+    --lk-bg: var(--white, #fff);
+  }
+  .demo-lk__grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr));
+    gap: 1rem;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+  .demo-lk__cell {
+    min-width: 0;
+    padding: 1.4rem 1.25rem 1rem;
+    border: 1px solid var(--line, #d5dae6);
+    border-radius: var(--radius, 14px);
+    background: var(--white, #fff);
+  }
+  .demo-lk__link {
+    margin: 0 0 1rem;
+    color: var(--ink, #1e283c);
+    font-size: 1.25rem;
+    font-weight: 600;
+  }
+  .demo-lk__class {
+    font-size: 0.85rem;
+  }
+  .demo-lk__note {
+    margin: 0.4rem 0 0;
+    font-size: 0.9rem;
+  }
+  .demo-lk__prose {
+    max-width: 38rem;
+    margin: 1.5rem 0 0;
+    color: var(--ink, #1e283c);
+  }
+</style>

src/components/demos/MapDemo.astro

@@ -0,0 +1,80 @@
+---
+/**
+ * Demo for `map`. The website renders this too (see README, "Consumed by superherotech.ai"),
+ * so assets go through `asset()` and every host token has a fallback.
+ *
+ * The places are public landmarks in Chicago, not anyone's business, so the map has something
+ * real to show. The one phone number is a 555-01xx number, a range reserved for fiction; the
+ * hours are the park's own. Nothing is fetched from Google until a "Show the map" button is
+ * pressed; the links only navigate.
+ */
+import LocationMap from '../../library/map/LocationMap.astro';
+interface Props {
+  /** Where public/demo/ is served. The gallery uses /demo/; the website passes /elements-demo/. */
+  assetBase?: string;
+}
+const { assetBase = '/demo/' } = Astro.props;
+const asset = (name: string) => assetBase + name;
+---
+<div class="demo-map">
+  <p class="demo-map__label">One location, map beside the details</p>
+  <LocationMap
+    layout="split"
+    embed
+    zoom={15}
+    locations={[
+      {
+        name: 'Millennium Park',
+        address: ['201 E Randolph St', 'Chicago, IL 60602'],
+        hours: 'Open daily, 6 AM to 11 PM',
+        query: 'Millennium Park, 201 E Randolph St, Chicago, IL 60602',
+      },
+    ]}
+  />
+
+  <p class="demo-map__label">Several locations, one card each</p>
+  <LocationMap
+    embed
+    locations={[
+      {
+        name: 'Navy Pier',
+        address: ['600 E Grand Ave', 'Chicago, IL 60611'],
+        phone: '(312) 555-0142',
+        photo: asset('hills.svg'),
+      },
+      {
+        name: 'Garfield Park Conservatory',
+        address: ['300 N Central Park Ave', 'Chicago, IL 60624'],
+        embed: false,
+      },
+    ]}
+  />
+  <p class="demo-map__note">
+    The second card has no map, just the links. The phone number is a 555 number, reserved for
+    fiction.
+  </p>
+</div>
+<style>
+  .demo-map {
+    --map-accent: var(--purple, #5933d8);
+    --map-focus: var(--purple, #5933d8);
+    --map-pin: var(--purple, #5933d8);
+    --map-link: var(--purple-dark, #4a2bb8);
+    --map-text: var(--ink, #1e283c);
+    --map-border: var(--line, #d5dae6);
+    --map-radius: var(--radius, 14px);
+    display: grid;
+    gap: 0.75rem;
+  }
+  .demo-map__label {
+    margin: 0.5rem 0 0;
+    font-weight: 700;
+  }
+  .demo-map__label:not(:first-child) {
+    margin-top: 2rem;
+  }
+  .demo-map__note {
+    margin: 0;
+    font-size: 0.9em;
+  }
+</style>

src/components/demos/VideoGalleryDemo.astro

@@ -0,0 +1,97 @@
+---
+/**
+ * Demo for `video-gallery`. The website renders this too (see README, "Consumed by
+ * superherotech.ai"), so assets go through `asset()` and every host token has a fallback.
+ *
+ * The same public videos video-player's demo uses and names: the Blender Foundation's open
+ * films Big Buck Bunny (2008) and Sintel (2010), CC BY 3.0 (the credit is in each caption, as
+ * the licence asks), on Blender's YouTube channel, plus Big Buck Bunny's copy on Vimeo to show
+ * a Vimeo tile, and the neutral three-second "drift" loop served from public/demo/ with its
+ * captions file. The posters are our own neutral SVGs, not frames from the films. Nothing is
+ * fetched from YouTube or Vimeo until a tile is pressed.
+ */
+import VideoGallery from '../../library/video-gallery/VideoGallery.astro';
+interface Props {
+  /** Where public/demo/ is served. The gallery uses /demo/; the website passes /elements-demo/. */
+  assetBase?: string;
+}
+const { assetBase = '/demo/' } = Astro.props;
+const asset = (name: string) => assetBase + name;
+const drift = {
+  url: [
+    { src: asset('drift.webm'), type: 'video/webm' },
+    { src: asset('drift.mp4'), type: 'video/mp4' },
+  ],
+  title: 'Drift, a three-second loop',
+  poster: asset('drift-poster.jpg'),
+  tracks: [{ src: asset('drift.vtt'), srclang: 'en', label: 'English' }],
+};
+---
+<div class="demo-vg">
+  <p class="demo-vg__label">Lightbox, filtered by category, with counts</p>
+  <VideoGallery
+    columns={2}
+    counts
+    videos={[
+      {
+        url: 'https://www.youtube.com/watch?v=aqz-KE-bpKQ',
+        title: 'Big Buck Bunny',
+        poster: asset('film-poster.svg'),
+        caption: '© Blender Foundation, peach.blender.org, CC BY 3.0. On YouTube.',
+        category: 'Open films',
+      },
+      {
+        url: 'https://youtu.be/eRsGyueVLvQ',
+        title: 'Sintel',
+        poster: asset('film-poster-dusk.svg'),
+        caption: '© Blender Foundation, durian.blender.org, CC BY 3.0. On YouTube.',
+        category: 'Open films',
+      },
+      {
+        url: 'https://vimeo.com/1084537',
+        title: 'Big Buck Bunny, on Vimeo',
+        poster: asset('hills.svg'),
+        caption: 'The same film, CC BY 3.0, played from Vimeo with Do Not Track on.',
+        category: ['Open films', 'Vimeo'],
+      },
+      { ...drift, caption: 'Self-hosted, with a captions track.', category: 'Loops' },
+    ]}
+  />
+
+  <p class="demo-vg__label">Inline: the tile becomes the player</p>
+  <VideoGallery
+    mode="inline"
+    columns={2}
+    titleTag="p"
+    videos={[
+      {
+        url: 'aqz-KE-bpKQ',
+        title: 'Big Buck Bunny, without a poster',
+        caption: 'No poster given: a neutral panel, never YouTube’s thumbnail.',
+      },
+      { ...drift, caption: 'Pressing the other tile puts this one back.' },
+    ]}
+  />
+</div>
+<style>
+  .demo-vg {
+    --vg-radius: var(--radius, 14px);
+    --vg-play-bg: var(--purple, #5933d8);
+    --vg-play-fg: var(--white, #fff);
+    --vg-bg: var(--navy, #1e283c);
+    --vg-focus: var(--purple, #5933d8);
+    --vg-chip-on-bg: var(--purple, #5933d8);
+    --vg-chip-fg: var(--ink, #1e283c);
+    --vg-chip-border: var(--line, #c9cedb);
+    --vg-title: var(--ink, #1e283c);
+    display: grid;
+    gap: 0.75rem;
+  }
+  .demo-vg__label {
+    margin: 0.5rem 0 0;
+    font-weight: 700;
+  }
+  .demo-vg__label:not(:first-child) {
+    margin-top: 2rem;
+  }
+</style>

src/components/demos/index.ts

@@ -30,6 +30,9 @@ import IconDemo from './IconDemo.astro';
 import AnimatedBackgroundDemo from './AnimatedBackgroundDemo.astro';
 import ModalDemo from './ModalDemo.astro';
 import AnnouncementBarDemo from './AnnouncementBarDemo.astro';
+import VideoGalleryDemo from './VideoGalleryDemo.astro';
+import MapDemo from './MapDemo.astro';
+import LinkEffectsDemo from './LinkEffectsDemo.astro';
 
 // Astro components have no exported public type; this is the shape both callers need.
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -58,4 +61,7 @@ export const demos: Record<string, AstroComponent> = {
   'animated-background': AnimatedBackgroundDemo,
   modal: ModalDemo,
   'announcement-bar': AnnouncementBarDemo,
+  'video-gallery': VideoGalleryDemo,
+  map: MapDemo,
+  'link-effects': LinkEffectsDemo,
 };