@407dev/cms-astro 0.1.0

package/src/CmsVideo.astro

@@ -0,0 +1,185 @@
+---
+import type { CmsAsset } from '@407dev/blocks';
+
+interface Props {
+  src: CmsAsset | string | { kind?: string; id?: string; src?: string; [key: string]: unknown };
+  variant?: 'hero' | 'feed';
+  poster?: string | CmsAsset;
+  autoplay?: boolean;
+  muted?: boolean;
+  loop?: boolean;
+  controls?: boolean;
+  preload?: 'none' | 'metadata' | 'auto';
+  class?: string;
+  style?: string;
+  width?: number;
+  height?: number;
+  [key: string]: unknown;
+}
+
+const {
+  src,
+  variant = 'hero',
+  poster: explicitPoster,
+  autoplay: userAutoplay,
+  muted: userMuted,
+  loop: userLoop,
+  controls: userControls,
+  preload: explicitPreload,
+  class: className,
+  style = '',
+  width: explicitWidth,
+  height: explicitHeight,
+  ...rest
+} = Astro.props;
+
+// 1. Resolve source URL and poster URL from asset or plain inputs
+const isObject = typeof src === 'object' && src !== null;
+const isUrlObject = isObject && (src as { kind?: string }).kind === 'url';
+const asset = isObject && !isUrlObject ? (src as CmsAsset) : null;
+
+// Determine video URL
+let videoUrl = '';
+let autoPosterUrl = '';
+
+if (asset) {
+  const renditions = asset.renditions || {};
+  if (variant === 'hero') {
+    videoUrl = renditions.hero?.url || renditions['video-hero']?.url || asset.url || '';
+    autoPosterUrl =
+      renditions.hero?.poster?.url ||
+      renditions['video-hero']?.poster?.url ||
+      renditions.poster?.url ||
+      '';
+  } else {
+    // feed variant
+    videoUrl = renditions.feed?.url || renditions['video-feed']?.url || asset.url || '';
+    autoPosterUrl =
+      renditions.feed?.poster?.url ||
+      renditions['video-feed']?.poster?.url ||
+      renditions.poster?.url ||
+      '';
+  }
+} else if (isUrlObject) {
+  videoUrl = (src as { src?: string }).src || '';
+} else if (typeof src === 'string') {
+  videoUrl = src;
+}
+
+// Determine Poster URL
+let finalPosterUrl: string | undefined = undefined;
+if (typeof explicitPoster === 'string') {
+  finalPosterUrl = explicitPoster;
+} else if (typeof explicitPoster === 'object' && explicitPoster !== null) {
+  finalPosterUrl = (explicitPoster as CmsAsset).url;
+} else if (autoPosterUrl) {
+  finalPosterUrl = autoPosterUrl;
+}
+
+// 2. Variant configurations
+const isHero = variant === 'hero';
+const isFeed = variant === 'feed';
+
+const defaultPreload = isHero ? 'none' : 'metadata';
+const preload = explicitPreload ?? defaultPreload;
+
+const muted = userMuted ?? (isHero ? true : isFeed ? true : undefined);
+const loop = userLoop ?? (isHero ? true : undefined);
+const playsinline = true;
+const controls = userControls ?? (isFeed ? false : undefined);
+
+const intrinsicWidth = explicitWidth ?? asset?.width ?? undefined;
+const intrinsicHeight = explicitHeight ?? asset?.height ?? undefined;
+---
+
+<video
+  src={videoUrl}
+  poster={finalPosterUrl || undefined}
+  preload={preload}
+  muted={muted}
+  loop={loop}
+  playsinline={playsinline}
+  controls={controls}
+  width={intrinsicWidth}
+  height={intrinsicHeight}
+  class:list={['cms-video', `cms-video-${variant}`, className]}
+  style={style || undefined}
+  data-cms-video-variant={variant}
+  {...rest}
+>
+  <slot />
+</video>
+
+{isHero && (
+  <script is:inline>
+    (() => {
+      const initHeroVideos = () => {
+        const videos = document.querySelectorAll('video[data-cms-video-variant="hero"]');
+        if (!('IntersectionObserver' in window)) {
+          videos.forEach((v) => {
+            if (v instanceof HTMLVideoElement && v.paused) v.play().catch(() => {});
+          });
+          return;
+        }
+
+        const observer = new IntersectionObserver(
+          (entries) => {
+            entries.forEach((entry) => {
+              const vid = entry.target;
+              if (!(vid instanceof HTMLVideoElement)) return;
+              if (entry.isIntersecting) {
+                if (vid.preload === 'none') vid.preload = 'auto';
+                vid.play().catch(() => {});
+              } else {
+                vid.pause();
+              }
+            });
+          },
+          { threshold: 0.15 }
+        );
+
+        videos.forEach((v) => observer.observe(v));
+      };
+
+      if (document.readyState === 'loading') {
+        document.addEventListener('DOMContentLoaded', initHeroVideos, { once: true });
+      } else {
+        initHeroVideos();
+      }
+    })();
+  </script>
+)}
+
+{isFeed && (
+  <script is:inline>
+    (() => {
+      const initFeedVideos = () => {
+        const videos = document.querySelectorAll('video[data-cms-video-variant="feed"]');
+        if (!('IntersectionObserver' in window)) return;
+
+        const observer = new IntersectionObserver(
+          (entries) => {
+            entries.forEach((entry) => {
+              const vid = entry.target;
+              if (!(vid instanceof HTMLVideoElement)) return;
+              if (entry.isIntersecting && entry.intersectionRatio >= 0.5) {
+                vid.play().catch(() => {});
+              } else {
+                vid.pause();
+              }
+            });
+          },
+          { threshold: [0, 0.5, 1.0] }
+        );
+
+        videos.forEach((v) => observer.observe(v));
+      };
+
+      if (document.readyState === 'loading') {
+        document.addEventListener('DOMContentLoaded', initFeedVideos, { once: true });
+      } else {
+        initFeedVideos();
+      }
+    })();
+  </script>
+)}

package/src/RichText.astro

@@ -0,0 +1,32 @@
+---
+import RichTextNode from './richtext/RichTextNode.astro';
+import type { RichTextComponents } from './richtext/RichTextNode.astro';
+import { parseRichTextDoc, renderRichTextHtml } from './richtext/render';
+
+interface Props {
+  value: unknown;
+  components?: RichTextComponents;
+  class?: string;
+  tag?: string;
+  [key: string]: unknown;
+}
+
+const { value, components, class: className, tag = 'div', ...rest } = Astro.props;
+const Tag = tag;
+
+// Only walk the doc through the component-aware renderer when overrides are actually supplied;
+// otherwise use the plain string renderer, which also handles the non-JSON-string fallback.
+const hasComponents = Boolean(components && Object.keys(components).length > 0);
+const doc = hasComponents ? parseRichTextDoc(value) : null;
+const fallbackHtml = doc ? '' : renderRichTextHtml(value);
+---
+
+{doc ? (
+  <Tag class={className} {...rest}>
+    <RichTextNode node={doc} components={components} />
+  </Tag>
+) : fallbackHtml && Tag ? (
+  <Tag class={className} set:html={fallbackHtml} {...rest} />
+) : fallbackHtml ? (
+  <Fragment set:html={fallbackHtml} />
+) : null}

package/src/client.test.ts

@@ -0,0 +1,227 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { createCmsClient, signPreviewToken, verifyPreviewToken } from './index';
+import type { ContentBundle } from './types';
+
+describe('Astro SDK Client & Helpers', () => {
+  const secret = 'super-secret-preview-key-1234567890';
+  const siteId = 'test-site-407';
+  const contentUrl = 'https://cms-worker.test';
+
+  const mockBundle: ContentBundle = {
+    bundleVersion: 1,
+    site_id: siteId,
+    fields: {
+      site_title: 'My Awesome Site',
+      hero_headline: 'Welcome to our platform',
+    },
+    collections: {
+      posts: {
+        presentation: 'visual',
+        orderable: true,
+        route_pattern: '/posts/[slug]',
+        schema_version: 1,
+        title_field: 'title',
+        list_columns: ['title'],
+        body_field: 'body',
+      },
+    },
+    entries: {
+      posts: [
+        {
+          slug: 'first-post',
+          content: { title: 'First Post', body: 'Hello world' },
+          status: 'published',
+          published_at: '2026-08-22T00:00:00Z',
+        },
+      ],
+    },
+    routes: [
+      { path: '/', kind: 'static', collection: null },
+      { pattern: '/posts/[slug]', kind: 'collection', collection: 'posts' },
+    ],
+    settings: {
+      robots: { rules: [{ user_agent: '*', allow: ['/'] }] },
+      default_seo: { title: 'SEO Title' },
+      sitemap: { enabled: true },
+      not_found_path: '/404',
+    },
+    redirects: [
+      {
+        id: 'r1',
+        from_path: '/old',
+        to_path: '/new',
+        status_code: 301,
+        enabled: true,
+        order_key: 'a0',
+      },
+    ],
+  };
+
+  describe('JWT Verification', () => {
+    it('signs and verifies a valid preview token', async () => {
+      const now = Math.floor(Date.now() / 1000);
+      const token = await signPreviewToken(
+        {
+          site_id: siteId,
+          sub: 'preview-user',
+          iat: now,
+          exp: now + 3600,
+        },
+        secret,
+      );
+
+      const result = await verifyPreviewToken(token, secret, siteId);
+      expect(result.valid).toBe(true);
+      expect(result.payload?.site_id).toBe(siteId);
+    });
+
+    it('rejects an expired token', async () => {
+      const now = Math.floor(Date.now() / 1000);
+      const token = await signPreviewToken(
+        {
+          site_id: siteId,
+          sub: 'preview-user',
+          iat: now - 7200,
+          exp: now - 3600,
+        },
+        secret,
+      );
+
+      const result = await verifyPreviewToken(token, secret, siteId);
+      expect(result.valid).toBe(false);
+    });
+
+    it('rejects a token scoped to a different site', async () => {
+      const now = Math.floor(Date.now() / 1000);
+      const token = await signPreviewToken(
+        {
+          site_id: 'different-site',
+          sub: 'preview-user',
+          iat: now,
+          exp: now + 3600,
+        },
+        secret,
+      );
+
+      const result = await verifyPreviewToken(token, secret, siteId);
+      expect(result.valid).toBe(false);
+    });
+  });
+
+  describe('createCmsClient', () => {
+    let mockFetch: ReturnType<typeof vi.fn>;
+
+    beforeEach(() => {
+      mockFetch = vi.fn().mockImplementation(async (url: string, init?: RequestInit) => {
+        if (url.includes(`/content/${siteId}/bundle`)) {
+          return {
+            ok: true,
+            status: 200,
+            json: async () => mockBundle,
+          };
+        }
+        if (url.includes(`/draft/${siteId}/bundle`)) {
+          const draftBundle = {
+            ...mockBundle,
+            fields: {
+              ...mockBundle.fields,
+              site_title: 'Draft Site Title',
+            },
+          };
+          return {
+            ok: true,
+            status: 200,
+            json: async () => draftBundle,
+          };
+        }
+        return {
+          ok: false,
+          status: 404,
+          statusText: 'Not Found',
+        };
+      });
+    });
+
+    it('fetches published bundle and caches it', async () => {
+      const client = createCmsClient({
+        siteId,
+        contentUrl,
+        fetch: mockFetch,
+      });
+
+      const bundle1 = await client.getBundle();
+      expect(bundle1.site_id).toBe(siteId);
+      expect(mockFetch).toHaveBeenCalledTimes(1);
+      expect(mockFetch).toHaveBeenCalledWith(
+        `${contentUrl}/content/${siteId}/bundle`,
+        expect.objectContaining({
+          headers: expect.objectContaining({
+            'x-cms-sdk': expect.stringContaining('cms-astro@'),
+          }),
+        }),
+      );
+
+      // Second call uses cached bundle
+      const bundle2 = await client.getBundle();
+      expect(bundle2).toEqual(bundle1);
+      expect(mockFetch).toHaveBeenCalledTimes(1);
+    });
+
+    it('fetches draft bundle bypassing cache when previewToken is passed', async () => {
+      const client = createCmsClient({
+        siteId,
+        contentUrl,
+        fetch: mockFetch,
+      });
+
+      const draftBundle = await client.getBundle({ previewToken: 'preview-jwt-123' });
+      expect(draftBundle.fields.site_title).toBe('Draft Site Title');
+      expect(mockFetch).toHaveBeenCalledWith(
+        `${contentUrl}/draft/${siteId}/bundle`,
+        expect.objectContaining({
+          headers: expect.objectContaining({
+            'x-preview-token': 'preview-jwt-123',
+            'x-cms-sdk': expect.stringContaining('cms-astro@'),
+          }),
+        }),
+      );
+    });
+
+    it('provides helper accessors for fields, collections, and entries', async () => {
+      const client = createCmsClient({
+        siteId,
+        contentUrl,
+        fetch: mockFetch,
+      });
+
+      const fields = await client.getFields();
+      expect(fields.site_title).toBe('My Awesome Site');
+
+      const collections = await client.getCollections();
+      expect(collections.posts.title_field).toBe('title');
+
+      const entries = await client.getEntries('posts');
+      expect(entries).toHaveLength(1);
+      expect(entries[0].slug).toBe('first-post');
+
+      const entry = await client.getEntry('posts', 'first-post');
+      expect(entry?.slug).toBe('first-post');
+
+      const missing = await client.getEntry('posts', 'nonexistent');
+      expect(missing).toBeNull();
+    });
+
+    it('retrieves site config', async () => {
+      const client = createCmsClient({
+        siteId,
+        contentUrl,
+        fetch: mockFetch,
+      });
+
+      const config = await client.getSiteConfig();
+      expect(config.site_id).toBe(siteId);
+      expect(config.redirects).toHaveLength(1);
+      expect(config.not_found_path).toBe('/404');
+    });
+  });
+});

package/src/client.ts

@@ -0,0 +1,164 @@
+import { DEFAULT_DEV_CONTENT_URL } from '@407dev/config';
+import type {
+  CmsClient,
+  CmsClientConfig,
+  CmsSiteConfig,
+  ContentBundle,
+  GetBundleOptions,
+} from './types';
+import { CMS_ASTRO_VERSION } from './version.js';
+
+export function createCmsClient(config: CmsClientConfig): CmsClient {
+  const siteId = config.siteId;
+  const contentUrl = config.contentUrl.replace(/\/+$/, '');
+  const fetchFn = config.fetch || fetch;
+
+  // In-memory cache for published bundle to ensure build determinism
+  let cachedPublishedBundle: ContentBundle | null = null;
+
+  const client: CmsClient = {
+    siteId,
+    contentUrl,
+    previewSecret: config.previewSecret,
+
+    async getBundle(options?: GetBundleOptions): Promise<ContentBundle> {
+      const isDraft = Boolean(options?.previewToken);
+
+      if (!isDraft && cachedPublishedBundle) {
+        return cachedPublishedBundle;
+      }
+
+      const url = isDraft
+        ? `${contentUrl}/draft/${siteId}/bundle`
+        : `${contentUrl}/content/${siteId}/bundle`;
+
+      const headers: Record<string, string> = {
+        'x-cms-sdk': `cms-astro@${CMS_ASTRO_VERSION}`,
+      };
+      if (options?.previewToken) {
+        headers['x-preview-token'] = options.previewToken;
+      }
+
+      const res = await fetchFn(url, {
+        headers,
+        cache: 'no-store',
+      });
+      if (!res.ok) {
+        const error = new Error(
+          `CMS Client: Failed to fetch bundle from ${url} (status ${res.status}): ${res.statusText}`,
+        );
+        (error as unknown as { status?: number }).status = res.status;
+        throw error;
+      }
+
+      const bundle = (await res.json()) as ContentBundle;
+
+      if (!isDraft) {
+        cachedPublishedBundle = bundle;
+      }
+
+      return bundle;
+    },
+
+    async getFields(options?: GetBundleOptions): Promise<ContentBundle['fields']> {
+      const bundle = await this.getBundle(options);
+      return bundle.fields || {};
+    },
+
+    async getField<T = unknown>(key: string, options?: GetBundleOptions): Promise<T | null> {
+      const fields = await this.getFields(options);
+      return (fields[key] as T) ?? null;
+    },
+
+    async getCollections(options?: GetBundleOptions): Promise<ContentBundle['collections']> {
+      const bundle = await this.getBundle(options);
+      return bundle.collections || {};
+    },
+
+    async getEntries(
+      collectionKey: string,
+      options?: GetBundleOptions,
+    ): Promise<ContentBundle['entries'][string]> {
+      const bundle = await this.getBundle(options);
+      return bundle.entries?.[collectionKey] || [];
+    },
+
+    async getEntry(
+      collectionKey: string,
+      slug: string,
+      options?: GetBundleOptions,
+    ): Promise<ContentBundle['entries'][string][number] | null> {
+      const entries = await this.getEntries(collectionKey, options);
+      return entries.find((e) => e.slug === slug) || null;
+    },
+
+    async getRoutes(options?: GetBundleOptions): Promise<ContentBundle['routes']> {
+      const bundle = await this.getBundle(options);
+      return bundle.routes || [];
+    },
+
+    async getSiteConfig(options?: GetBundleOptions): Promise<CmsSiteConfig> {
+      const bundle = await this.getBundle(options);
+      return {
+        site_id: bundle.site_id,
+        redirects: bundle.redirects || [],
+        robots: bundle.settings?.robots || {},
+        default_seo: bundle.settings?.default_seo || {},
+        sitemap: bundle.settings?.sitemap || {},
+        not_found_path: bundle.settings?.not_found_path || null,
+      };
+    },
+
+    clearCache(): void {
+      cachedPublishedBundle = null;
+    },
+  };
+
+  return client;
+}
+
+const globalWithCms = globalThis as typeof globalThis & {
+  __CMS_CLIENT__?: CmsClient | null;
+};
+
+let globalClient: CmsClient | null =
+  (typeof globalThis !== 'undefined' && globalWithCms.__CMS_CLIENT__) || null;
+
+export function initCmsClient(options: {
+  siteId?: string;
+  contentUrl?: string;
+  previewSecret?: string;
+  client?: CmsClient;
+}): CmsClient {
+  if (options.client) {
+    globalClient = options.client;
+    if (typeof globalThis !== 'undefined') {
+      globalWithCms.__CMS_CLIENT__ = options.client;
+    }
+    return globalClient;
+  }
+
+  globalClient = createCmsClient({
+    siteId: options.siteId || process.env.CMS_SITE_ID || '',
+    contentUrl: options.contentUrl || process.env.CMS_CONTENT_URL || DEFAULT_DEV_CONTENT_URL,
+    previewSecret: options.previewSecret || process.env.CMS_PREVIEW_SECRET,
+  });
+  if (typeof globalThis !== 'undefined') {
+    globalWithCms.__CMS_CLIENT__ = globalClient;
+  }
+
+  return globalClient;
+}
+
+export function getClient(): CmsClient | null {
+  return (
+    globalClient || (typeof globalThis !== 'undefined' && globalWithCms.__CMS_CLIENT__) || null
+  );
+}
+
+export function setClient(client: CmsClient | null): void {
+  globalClient = client;
+  if (typeof globalThis !== 'undefined') {
+    globalWithCms.__CMS_CLIENT__ = client;
+  }
+}