@hagicode/hagilight 0.1.0 → 0.1.2-dev.10.1.aebe89d

package/Analytics51LA.astro

@@ -0,0 +1,17 @@
+---
+interface Props {
+  siteId: string;
+}
+
+const { siteId } = Astro.props;
+if (!siteId?.trim()) throw new Error('Analytics51LA requires a siteId prop.');
+---
+
+{import.meta.env.PROD && (
+  <>
+    <script is:inline charset="UTF-8" id="LA_COLLECT" src="https://sdk.51.la/js-sdk-pro.min.js"></script>
+    <script is:inline define:vars={{ siteId }}>
+      LA.init({ id: siteId, ck: siteId, autoTrack: true, hashMode: true, screenRecord: true });
+    </script>
+  </>
+)}

package/GoogleAnalytics.astro

@@ -0,0 +1,21 @@
+---
+interface Props {
+  measurementId: string;
+}
+
+const { measurementId } = Astro.props;
+if (!measurementId?.trim()) throw new Error('GoogleAnalytics requires a measurementId prop.');
+const scriptUrl = `https://www.googletagmanager.com/gtag/js?id=${encodeURIComponent(measurementId)}`;
+---
+
+{import.meta.env.PROD && (
+  <>
+    <script async src={scriptUrl}></script>
+    <script is:inline define:vars={{ measurementId }}>
+      window.dataLayer = window.dataLayer || [];
+      function gtag(){dataLayer.push(arguments);}
+      gtag('js', new Date());
+      gtag('config', measurementId);
+    </script>
+  </>
+)}

package/PromotoBanner.astro

@@ -0,0 +1,346 @@
+---
+import type { PromotionCard } from './promotions';
+
+interface Props {
+  fallback?: PromotionCard;
+  locale?: string;
+}
+
+const { fallback, locale = Astro.currentLocale ?? 'en' } = Astro.props;
+---
+
+<hagilight-promoto-banner
+  class="hagilight-promoto"
+  data-locale={locale}
+  data-fallback={fallback ? JSON.stringify(fallback) : undefined}
+  hidden
+>
+  <section class="hagilight-promoto__shell" data-promoto-shell hidden aria-label="Featured promotion">
+    <button
+      type="button"
+      class="hagilight-promoto__dismiss"
+      data-promoto-dismiss
+      aria-label="Dismiss promotion"
+    >&times;</button>
+    <div class="hagilight-promoto__viewport">
+      <div class="hagilight-promoto__track" data-promoto-track></div>
+    </div>
+    <nav class="hagilight-promoto__controls" data-promoto-controls aria-label="Promotion controls" hidden>
+      <button type="button" class="hagilight-promoto__control" data-promoto-previous aria-label="Previous promotion">‹</button>
+      <span class="hagilight-promoto__count" data-promoto-count aria-label="Promotion progress"></span>
+      <button type="button" class="hagilight-promoto__control" data-promoto-next aria-label="Next promotion">›</button>
+      <button type="button" class="hagilight-promoto__control" data-promoto-pause aria-pressed="false">Pause</button>
+    </nav>
+    <span class="hagilight-promoto__status" data-promoto-status aria-live="polite"></span>
+  </section>
+</hagilight-promoto-banner>
+
+<script>
+  import { definePromotoBannerElement } from './promoto-banner';
+
+  definePromotoBannerElement();
+</script>
+
+<style is:global>
+  .hagilight-promoto {
+    display: block;
+  }
+
+  .hagilight-promoto[hidden],
+  .hagilight-promoto__shell[hidden],
+  .hagilight-promoto__controls[hidden] {
+    display: none !important;
+  }
+
+  .hagilight-promoto__shell {
+    position: fixed;
+    z-index: 40;
+    inset-inline: 0;
+    bottom: max(1rem, env(safe-area-inset-bottom));
+    width: min(72rem, calc(100vw - 1rem));
+    margin-inline: auto;
+    overflow: hidden;
+    border: 1px solid color-mix(in srgb, var(--sl-color-accent, #2563eb) 24%, var(--sl-color-gray-5, #cbd5e1));
+    border-radius: 1.25rem;
+    background: color-mix(in srgb, var(--sl-color-bg, #fff) 96%, var(--sl-color-accent-low, #dbeafe) 4%);
+    box-shadow: 0 18px 48px color-mix(in srgb, var(--sl-color-black, #000) 16%, transparent);
+    color: var(--sl-color-text, #1f2937);
+    opacity: 1;
+    visibility: visible;
+    transition: opacity 0.24s ease, visibility 0s linear;
+  }
+
+  .hagilight-promoto[data-state='footer-hidden'] .hagilight-promoto__shell {
+    opacity: 0;
+    visibility: hidden;
+    pointer-events: none;
+    transition: opacity 0.24s ease, visibility 0s linear 0.24s;
+  }
+
+  .hagilight-promoto__viewport {
+    overflow: hidden;
+  }
+
+  .hagilight-promoto__track {
+    display: flex;
+    align-items: stretch;
+    width: 100%;
+    transition: transform 0.34s ease;
+  }
+
+  .hagilight-promoto__slide {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) auto auto;
+    align-items: center;
+    gap: 1.25rem;
+    width: 100%;
+    min-width: 100%;
+    padding: 1.25rem 4rem 1.25rem 1.25rem;
+  }
+
+  .hagilight-promoto__slide[aria-hidden='true'] {
+    pointer-events: none;
+  }
+
+  .hagilight-promoto__copy {
+    display: grid;
+    grid-template-columns: minmax(12rem, 0.8fr) minmax(16rem, 1.2fr);
+    align-items: center;
+    gap: 1rem;
+    min-width: 0;
+  }
+
+  .hagilight-promoto__title,
+  .hagilight-promoto__description {
+    display: -webkit-box;
+    overflow: hidden;
+    margin: 0;
+    color: var(--sl-color-text-high, var(--sl-color-gray-1, #111827));
+    font-size: var(--sl-text-sm);
+    font-weight: 600;
+    line-height: 1.35;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+  }
+
+  .hagilight-promoto__description {
+    color: var(--sl-color-text, #1f2937);
+  }
+
+  .hagilight-promoto__media {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: clamp(4.5rem, 8vw, 6.25rem);
+    min-width: clamp(4.5rem, 8vw, 6.25rem);
+    aspect-ratio: 1;
+    overflow: hidden;
+    border: 1px solid color-mix(in srgb, var(--sl-color-accent-high, #1d4ed8) 18%, var(--sl-color-gray-5, #cbd5e1));
+    border-radius: 0.8rem;
+    background: color-mix(in srgb, var(--sl-color-bg-sidebar, #f8fafc) 82%, transparent);
+  }
+
+  .hagilight-promoto__image {
+    display: block;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+
+  .hagilight-promoto__cta {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 7.5rem;
+    min-height: 2.6rem;
+    border: 1px solid color-mix(in srgb, var(--sl-color-accent-high, #1d4ed8) 30%, transparent);
+    border-radius: 999px;
+    background: var(--sl-color-accent, #2563eb);
+    color: #fff;
+    font-size: var(--sl-text-xs);
+    font-weight: 700;
+    padding-inline: 1rem;
+    text-align: center;
+    text-decoration: none;
+  }
+
+  .hagilight-promoto__cta:hover,
+  .hagilight-promoto__cta:focus-visible {
+    background: var(--sl-color-accent-high, #1d4ed8);
+  }
+
+  .hagilight-promoto__dismiss,
+  .hagilight-promoto__control {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 2.5rem;
+    min-height: 2.5rem;
+    border: 1px solid color-mix(in srgb, var(--sl-color-accent-high, #1d4ed8) 20%, var(--sl-color-gray-5, #cbd5e1));
+    border-radius: 999px;
+    background: var(--sl-color-bg-nav, #f8fafc);
+    color: var(--sl-color-text-high, #111827);
+    cursor: pointer;
+  }
+
+  .hagilight-promoto__dismiss {
+    position: absolute;
+    z-index: 1;
+    inset-block-start: 0.6rem;
+    inset-inline-end: 0.6rem;
+  }
+
+  .hagilight-promoto__controls {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    gap: 0.5rem;
+    padding: 0 1.25rem 1rem;
+  }
+
+  .hagilight-promoto__count {
+    min-width: 3.5rem;
+    text-align: center;
+    font-size: var(--sl-text-xs);
+    font-variant-numeric: tabular-nums;
+  }
+
+  .hagilight-promoto__control:disabled {
+    cursor: default;
+    opacity: 0.6;
+  }
+
+  .hagilight-promoto__status {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+  }
+
+  .hagilight-promoto__dismiss:focus-visible,
+  .hagilight-promoto__control:focus-visible,
+  .hagilight-promoto__cta:focus-visible {
+    outline: 3px solid var(--sl-color-accent-high, #1d4ed8);
+    outline-offset: 3px;
+  }
+
+  @media (max-width: 960px) {
+    .hagilight-promoto__slide {
+      grid-template-columns: 1fr;
+      gap: 0.75rem;
+      padding-inline-end: 3.7rem;
+    }
+
+    .hagilight-promoto__slide[data-has-image='true'] {
+      grid-template-columns: 1fr;
+    }
+
+    .hagilight-promoto__copy {
+      grid-template-columns: 1fr;
+      gap: 0.45rem;
+    }
+
+    .hagilight-promoto__media {
+      width: min(100%, 8rem);
+      min-width: 0;
+    }
+
+    .hagilight-promoto__cta {
+      justify-self: start;
+      white-space: normal;
+    }
+
+    .hagilight-promoto__controls {
+      justify-content: flex-start;
+      padding-top: 0;
+    }
+  }
+
+  @media (max-width: 720px) {
+    .hagilight-promoto__shell {
+      bottom: calc(env(safe-area-inset-bottom) + 0.5rem);
+      width: min(calc(100vw - 1rem), 24rem);
+      border-radius: 1rem;
+    }
+
+    .hagilight-promoto__slide {
+      grid-template-columns: 1fr;
+      gap: 0.7rem;
+      padding: 0.85rem 4.8rem 0.85rem 0.85rem;
+    }
+
+    .hagilight-promoto__slide[data-has-image='true'] {
+      grid-template-columns: minmax(0, 1fr) 4.5rem;
+      align-items: start;
+    }
+
+    .hagilight-promoto__copy {
+      grid-column: 1;
+      grid-row: 1;
+      gap: 0.45rem;
+    }
+
+    .hagilight-promoto__title {
+      font-size: 0.92rem;
+    }
+
+    .hagilight-promoto__description {
+      font-size: 0.84rem;
+      font-weight: 500;
+      line-height: 1.3;
+    }
+
+    .hagilight-promoto__media {
+      width: 4.5rem;
+      min-width: 4.5rem;
+      align-self: start;
+      grid-column: 2;
+      grid-row: 1;
+    }
+
+    .hagilight-promoto__cta {
+      grid-column: 1 / -1;
+      justify-self: stretch;
+      min-width: 0;
+      min-height: 2.35rem;
+      width: 100%;
+      font-size: 0.82rem;
+      white-space: normal;
+    }
+
+    .hagilight-promoto__control {
+      min-width: 2.2rem;
+      min-height: 2.2rem;
+    }
+
+    .hagilight-promoto__count {
+      min-width: 2.75rem;
+      font-size: 0.75rem;
+    }
+
+    .hagilight-promoto__dismiss {
+      inset-block-start: 0.55rem;
+      inset-inline-end: 0.55rem;
+      width: auto;
+      min-width: 2rem;
+      height: 2rem;
+      gap: 0.25rem;
+      padding-inline: 0.55rem;
+    }
+
+    .hagilight-promoto__controls {
+      flex-wrap: wrap;
+      gap: 0.35rem;
+      padding: 0 0.85rem 0.9rem;
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .hagilight-promoto__shell,
+    .hagilight-promoto__track {
+      transition: none;
+    }
+  }
+</style>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hagicode/hagilight",
-  "version": "0.1.0",
+  "version": "0.1.2-dev.10.1.aebe89d",
   "type": "module",
   "description": "Shared Astro components for HagiCode sites",
   "repository": {
@@ -13,10 +13,18 @@
     "provenance": true
   },
   "exports": {
-    "./Copyright": "./Copyright.astro"
+    "./Copyright": "./Copyright.astro",
+    "./PromotoBanner": "./PromotoBanner.astro",
+    "./logo.png": "./logo.png",
+    "./site-links": "./site-links.ts",
+    "./GoogleAnalytics": "./GoogleAnalytics.astro",
+    "./Analytics51LA": "./Analytics51LA.astro"
   },
   "files": [
-    "*.astro"
+    "*.astro",
+    "*.png",
+    "*.ts",
+    "*.json"
   ],
   "peerDependencies": {
     "astro": "^7.3.5"

package/promotions.ts

@@ -0,0 +1,263 @@
+const INDEX_ORIGIN = 'https://index.hagicode.com';
+const CATALOG_URL = `${INDEX_ORIGIN}/index-catalog.json`;
+const FLAGS_URL = `${INDEX_ORIGIN}/promote.json`;
+const CONTENT_URL = `${INDEX_ORIGIN}/promote_content.json`;
+
+type JsonRecord = Record<string, unknown>;
+type FetchLike = typeof fetch;
+
+export interface PromotionImage {
+  src: string;
+  alt: string;
+  variant?: string;
+  width?: number;
+  height?: number;
+}
+
+export interface PromotionCard {
+  id: string;
+  title: string;
+  description: string;
+  ctaLabel: string;
+  link: string;
+  image?: PromotionImage;
+}
+
+interface PromotionFlag {
+  id: string;
+  on: boolean;
+  startTime?: string;
+  endTime?: string;
+}
+
+interface PromotionContent {
+  id: string;
+  title: Record<string, string>;
+  description: Record<string, string>;
+  cta?: Record<string, string>;
+  link: string;
+  image?: PromotionImage;
+}
+
+function isRecord(value: unknown): value is JsonRecord {
+  return typeof value === 'object' && value !== null && !Array.isArray(value);
+}
+
+function nonEmptyString(value: unknown): value is string {
+  return typeof value === 'string' && value.trim().length > 0;
+}
+
+function parseLocalizedMap(value: unknown): Record<string, string> | null {
+  if (!isRecord(value)) return null;
+  const entries = Object.entries(value).filter(
+    (entry): entry is [string, string] => nonEmptyString(entry[0]) && nonEmptyString(entry[1]),
+  );
+  return entries.length ? Object.fromEntries(entries.map(([key, text]) => [key.trim(), text.trim()])) : null;
+}
+
+function parseImage(value: unknown, record: JsonRecord): PromotionImage | undefined {
+  const image = isRecord(value) ? value : {};
+  const src = nonEmptyString(value)
+    ? value.trim()
+    : nonEmptyString(image.src)
+      ? image.src.trim()
+      : nonEmptyString(image.url)
+        ? image.url.trim()
+        : nonEmptyString(record.imageUrl)
+          ? record.imageUrl.trim()
+          : nonEmptyString(record.imageURL)
+            ? record.imageURL.trim()
+            : '';
+  if (!src) return undefined;
+
+  const width = typeof image.width === 'number' && Number.isFinite(image.width) && image.width > 0
+    ? Math.round(image.width)
+    : undefined;
+  const height = typeof image.height === 'number' && Number.isFinite(image.height) && image.height > 0
+    ? Math.round(image.height)
+    : undefined;
+
+  let normalizedSrc: string;
+  try {
+    const url = new URL(src, INDEX_ORIGIN);
+    if (!['http:', 'https:'].includes(url.protocol)) return undefined;
+    normalizedSrc = url.toString();
+  } catch {
+    return undefined;
+  }
+
+  return {
+    src: normalizedSrc,
+    alt: nonEmptyString(image.alt)
+      ? image.alt.trim()
+      : nonEmptyString(record.imageAlt)
+        ? record.imageAlt.trim()
+        : '',
+    variant: nonEmptyString(image.variant) ? image.variant.trim() : undefined,
+    width,
+    height,
+  };
+}
+
+function isSafeLink(value: string): boolean {
+  try {
+    return ['http:', 'https:'].includes(new URL(value, INDEX_ORIGIN).protocol);
+  } catch {
+    return false;
+  }
+}
+
+export function parsePromotionFlags(payload: unknown): PromotionFlag[] {
+  if (!isRecord(payload) || !Array.isArray(payload.promotes)) return [];
+  return payload.promotes.flatMap((item): PromotionFlag[] => {
+    if (!isRecord(item) || !nonEmptyString(item.id) || typeof item.on !== 'boolean') return [];
+    return [{
+      id: item.id.trim(),
+      on: item.on,
+      startTime: nonEmptyString(item.startTime) ? item.startTime.trim() : undefined,
+      endTime: nonEmptyString(item.endTime) ? item.endTime.trim() : undefined,
+    }];
+  });
+}
+
+export function parsePromotionContent(payload: unknown): PromotionContent[] {
+  if (!isRecord(payload) || !Array.isArray(payload.contents)) return [];
+  return payload.contents.flatMap((item): PromotionContent[] => {
+    if (!isRecord(item) || !nonEmptyString(item.id) || !nonEmptyString(item.link) || !isSafeLink(item.link)) {
+      return [];
+    }
+    const title = parseLocalizedMap(item.title);
+    const description = parseLocalizedMap(item.description);
+    if (!title || !description) return [];
+    const cta = parseLocalizedMap(item.cta);
+    const image = parseImage(item.image, item);
+    return [{
+      id: item.id.trim(),
+      title,
+      description,
+      cta: cta ?? undefined,
+      link: item.link.trim(),
+      image,
+    }];
+  });
+}
+
+function localeCandidates(locale: string | null | undefined): string[] {
+  let canonical = 'en-US';
+  if (locale?.trim()) {
+    try {
+      canonical = Intl.getCanonicalLocales(locale.trim().replace(/_/g, '-'))[0] ?? 'en-US';
+    } catch {
+      canonical = 'en-US';
+    }
+  }
+  const normalized = canonical.toLowerCase();
+  const candidates = [normalized, normalized.split('-')[0] ?? normalized];
+  if (normalized.startsWith('zh-hant') || ['zh-tw', 'zh-hk', 'zh-mo'].includes(normalized)) {
+    candidates.push('zh-hant', 'zh');
+  } else if (normalized.startsWith('zh')) {
+    candidates.push('zh-cn', 'zh');
+  }
+  candidates.push('en-us', 'en');
+  return [...new Set(candidates)];
+}
+
+function localized(value: Record<string, string>, locale: string | null | undefined): string | null {
+  const values = new Map(Object.entries(value).map(([key, text]) => [key.toLowerCase(), text]));
+  for (const candidate of localeCandidates(locale)) {
+    const result = values.get(candidate);
+    if (result) return result;
+  }
+  return Object.values(value)[0] ?? null;
+}
+
+function isActive(flag: PromotionFlag, now: number): boolean {
+  if (!flag.on) return false;
+  const start = flag.startTime ? Date.parse(flag.startTime) : null;
+  const end = flag.endTime ? Date.parse(flag.endTime) : null;
+  if ((start !== null && !Number.isFinite(start)) || (end !== null && !Number.isFinite(end))) return false;
+  if (start !== null && end !== null && start >= end) return false;
+  return (start === null || now >= start) && (end === null || now < end);
+}
+
+export function normalizeActivePromotions(
+  flags: PromotionFlag[],
+  content: PromotionContent[],
+  locale?: string | null,
+  now = Date.now(),
+): PromotionCard[] {
+  const contentById = new Map(content.map((item) => [item.id, item]));
+  return flags.flatMap((flag): PromotionCard[] => {
+    const item = contentById.get(flag.id);
+    if (!isActive(flag, now) || !item) return [];
+    const title = localized(item.title, locale);
+    const description = localized(item.description, locale);
+    if (!title || !description) return [];
+    return [{
+      id: item.id,
+      title,
+      description,
+      ctaLabel: (item.cta && localized(item.cta, locale)) || 'Learn more',
+      link: item.link,
+      image: item.image ? { ...item.image, alt: item.image.alt || title } : undefined,
+    }];
+  });
+}
+
+async function readJson(fetchImpl: FetchLike, url: string): Promise<unknown> {
+  const response = await fetchImpl(url, { headers: { accept: 'application/json' }, cache: 'no-store' });
+  if (!response.ok) throw new Error(`Failed to load promotion data (${response.status})`);
+  const contentType = response.headers.get('content-type')?.toLowerCase() ?? '';
+  if (!contentType.includes('json')) throw new Error(`Expected JSON promotion data, received ${contentType || 'no content type'}`);
+  return response.json();
+}
+
+export async function resolvePromotionDocumentUrls(fetchImpl: FetchLike = fetch): Promise<{
+  flagsUrl: string;
+  contentUrl: string;
+  source: 'catalog' | 'fallback';
+}> {
+  try {
+    const catalog = await readJson(fetchImpl, CATALOG_URL);
+    if (isRecord(catalog) && Array.isArray(catalog.entries)) {
+      const entries = catalog.entries.filter(isRecord);
+      const flags = entries.find((entry) => entry.id === 'promotion-flags' && nonEmptyString(entry.path));
+      const content = entries.find((entry) => entry.id === 'promotion-content' && nonEmptyString(entry.path));
+      const flagsPath = flags?.path;
+      const contentPath = content?.path;
+      if (nonEmptyString(flagsPath) && nonEmptyString(contentPath)) {
+        const flagsUrl = new URL(flagsPath, INDEX_ORIGIN);
+        const contentUrl = new URL(contentPath, INDEX_ORIGIN);
+        if (flagsUrl.origin !== INDEX_ORIGIN || contentUrl.origin !== INDEX_ORIGIN) {
+          return { flagsUrl: FLAGS_URL, contentUrl: CONTENT_URL, source: 'fallback' };
+        }
+        return {
+          flagsUrl: flagsUrl.toString(),
+          contentUrl: contentUrl.toString(),
+          source: 'catalog',
+        };
+      }
+    }
+  } catch {
+    // The stable canonical endpoints remain available when catalog discovery fails.
+  }
+  return { flagsUrl: FLAGS_URL, contentUrl: CONTENT_URL, source: 'fallback' };
+}
+
+export async function loadActivePromotions(options: {
+  locale?: string | null;
+  fetchImpl?: FetchLike;
+  now?: number;
+} = {}): Promise<PromotionCard[]> {
+  const { locale, fetchImpl = fetch, now = Date.now() } = options;
+  try {
+    const urls = await resolvePromotionDocumentUrls(fetchImpl);
+    const [flags, content] = await Promise.all([
+      readJson(fetchImpl, urls.flagsUrl),
+      readJson(fetchImpl, urls.contentUrl),
+    ]);
+    return normalizeActivePromotions(parsePromotionFlags(flags), parsePromotionContent(content), locale, now);
+  } catch {
+    return [];
+  }
+}