@wildo-ai/saas-website 1.1.1

package/src/astro/__tests__/blog-post-bridge.test.tsx

@@ -0,0 +1,288 @@
+import '@testing-library/jest-dom/vitest';
+import { render, screen } from '@testing-library/react';
+import { useMDXComponents } from '@mdx-js/react';
+import React, { type ComponentType } from 'react';
+import { describe, expect, it } from 'vitest';
+
+import { BUILTIN_PROVIDER_CAPABILITY } from '@wildo-ai/saas-models/public-runtime';
+import type { FrontendProvidersBlock } from '@wildo-ai/saas-models/public-runtime';
+import { AvailableLanguage } from '@wildo-ai/saas-models/public-runtime';
+
+import { WebsiteLabelKeySchema } from '../../schemas/label-keys/website-label-key.schemas';
+import type { WebsiteNavigationConfig } from '../../schemas/manifests/website-root-config.shared.schemas';
+import { useWebsiteRuntime } from '../../core/contexts/useWebsiteRuntime';
+import {
+  createWebsiteBlogPostBridgeIsland,
+  type WebsiteBlogPostBridgeIslandProps,
+} from '../blog-post-bridge';
+
+const COLORS = {
+  background: '#fff',
+  foreground: '#111',
+  primary: '#0070f3',
+  primaryForeground: '#fff',
+  accent: '#ff5e5b',
+  accentForeground: '#fff',
+  surface: '#fafafa',
+  surfaceForeground: '#111',
+  border: '#e5e5e5',
+  muted: '#f5f5f5',
+  mutedForeground: '#737373',
+};
+const RADII = {
+  none: '0',
+  sm: '0.125rem',
+  md: '0.375rem',
+  lg: '0.75rem',
+  xl: '1.5rem',
+  full: '9999px',
+};
+const DESIGN_TOKENS = { colors: COLORS, radii: RADII };
+
+function NoopComponent(): React.ReactElement | null {
+  return null;
+}
+
+function buildNavigation(): WebsiteNavigationConfig {
+  return { headerComponent: NoopComponent, footerComponent: NoopComponent };
+}
+
+const SKIP_KEY = WebsiteLabelKeySchema.parse(
+  'website.chrome.layout.skip-to-main-content',
+);
+const SKIP_LABEL_PACK = {
+  'website.chrome.layout.skip-to-main-content': 'Skip to main content',
+} as const;
+// Typed as the real block rather than `as const`: the prop takes `FrontendProvidersBlock`,
+// whose `providerCapabilities` / `protocols` are mutable `string[]`, so a `readonly` tuple
+// fixture is not assignable to the surface under test.
+const FRONTEND_PROVIDERS: FrontendProvidersBlock = {
+  providers: {
+    sentry: {
+      metadata: { ref: 'sentry' },
+      providerCapabilities: [BUILTIN_PROVIDER_CAPABILITY.FRONTEND_ERROR_MONITORING],
+      protocols: ['FRONTEND_SDK'],
+      publicConfig: {
+        integrationKind: 'browser-error-monitoring',
+        websiteRuntime: true,
+      },
+    },
+  },
+};
+
+const VALID_FRONTMATTER = {
+  title: 'Why Context Beats Content',
+  summary: 'Compress the loop your team actually runs every week.',
+  slug: 'why-context-beats-content',
+  locale: AvailableLanguage.EN,
+  publishedAt: '2026-04-17T09:00:00.000Z',
+  authorRef: 'paul-cayon',
+  tags: ['context', 'product-strategy'],
+};
+
+function MdxBodyA(): React.ReactElement {
+  return <p data-testid="mdx-body-a">Body A prose</p>;
+}
+function MdxBodyB(): React.ReactElement {
+  return <p data-testid="mdx-body-b">Body B prose</p>;
+}
+function ProviderAwareMdxBody(): React.ReactElement {
+  const runtime = useWebsiteRuntime();
+  const sentryProvider = runtime.frontendProviderRegistry
+    ?.findProviderByProviderCapability(BUILTIN_PROVIDER_CAPABILITY.FRONTEND_ERROR_MONITORING);
+  return <p data-testid="provider-ref">{sentryProvider?.metadata.ref ?? '<missing>'}</p>;
+}
+
+describe('createWebsiteBlogPostBridgeIsland', () => {
+  it('returns a React component (closes over deps; never crosses prop boundary)', () => {
+    const Island = createWebsiteBlogPostBridgeIsland({
+      slugToMdxBody: { 'why-context-beats-content': MdxBodyA },
+      navigation: buildNavigation(),
+    });
+    expect(typeof Island).toBe('function');
+    expect(Island.displayName).toBe('WebsiteBlogPostBridgeIsland');
+  });
+
+  it('renders the MDX body matched by `slug` inside <BlogPost> + runtime context', () => {
+    const Island = createWebsiteBlogPostBridgeIsland({
+      slugToMdxBody: {
+        'why-context-beats-content': MdxBodyA,
+        'a-different-post': MdxBodyB,
+      },
+      navigation: buildNavigation(),
+    });
+    render(
+      <Island
+        slug="why-context-beats-content"
+        rawFrontmatter={VALID_FRONTMATTER}
+        source="en/why-context-beats-content.mdx"
+        locale={AvailableLanguage.EN}
+        defaultLocale={AvailableLanguage.EN}
+        labelPack={SKIP_LABEL_PACK}
+        designTokens={DESIGN_TOKENS}
+        skipToMainContentLabelKey={SKIP_KEY}
+      />,
+    );
+    expect(screen.getByTestId('mdx-body-a').textContent).toBe('Body A prose');
+    expect(screen.queryByTestId('mdx-body-b')).toBeNull();
+    expect(
+      screen.getByRole('heading', { level: 1, name: 'Why Context Beats Content' }),
+    ).toBeInTheDocument();
+  });
+
+  it('hydrates the website frontend provider registry inside the blog runtime context', () => {
+    const Island = createWebsiteBlogPostBridgeIsland({
+      slugToMdxBody: {
+        'why-context-beats-content': ProviderAwareMdxBody,
+      },
+      navigation: buildNavigation(),
+    });
+    render(
+      <Island
+        slug="why-context-beats-content"
+        rawFrontmatter={VALID_FRONTMATTER}
+        source="en/why-context-beats-content.mdx"
+        locale={AvailableLanguage.EN}
+        defaultLocale={AvailableLanguage.EN}
+        labelPack={SKIP_LABEL_PACK}
+        designTokens={DESIGN_TOKENS}
+        skipToMainContentLabelKey={SKIP_KEY}
+        frontendProviders={FRONTEND_PROVIDERS}
+      />,
+    );
+
+    expect(screen.getByTestId('provider-ref').textContent).toBe('sentry');
+  });
+
+  it('emits the BLOG_POST_PAGE_REF on the layout root data attribute', () => {
+    const Island = createWebsiteBlogPostBridgeIsland({
+      slugToMdxBody: { 'why-context-beats-content': MdxBodyA },
+      navigation: buildNavigation(),
+    });
+    const { container } = render(
+      <Island
+        slug="why-context-beats-content"
+        rawFrontmatter={VALID_FRONTMATTER}
+        locale={AvailableLanguage.EN}
+        defaultLocale={AvailableLanguage.EN}
+        labelPack={SKIP_LABEL_PACK}
+        designTokens={DESIGN_TOKENS}
+        skipToMainContentLabelKey={SKIP_KEY}
+        frontendProviders={FRONTEND_PROVIDERS}
+      />,
+    );
+    expect(
+      container.querySelector('[data-website-page-ref="blog-post"]'),
+    ).not.toBeNull();
+    expect(
+      container.querySelector('[data-website-error-monitoring-provider-ref="sentry"]'),
+    ).not.toBeNull();
+  });
+
+  it('forwards mdxComponents into <WebsiteMdxProvider>; embedded sections resolve through the provider context (NOT via direct imports inside the MDX body)', () => {
+    /**
+     * Strong test of the provider scope: the MDX body MUST reach the
+     * `CTASection` component THROUGH the `@mdx-js/react` provider's
+     * `useMDXComponents` lookup hook — the same lookup mechanism MDX
+     * compilation generates for tag references in `.mdx` source. If
+     * the bridge factory failed to forward `mdxComponents` into
+     * `<WebsiteMdxProvider>`, the lookup would return an empty
+     * components map and the assertion below would fail.
+     *
+     * (The earlier weaker version of this test imported `StubCtaSection`
+     * directly into the MDX body, which bypassed the provider entirely
+     * and would have passed even with the provider wiring removed.)
+     */
+    function StubCtaSection(): React.ReactElement {
+      return <div data-testid="stub-cta">CTA SECTION</div>;
+    }
+    function MdxBodySimulatingTagLookup(): React.ReactElement {
+      const components = useMDXComponents({});
+      const Resolved = components['CTASection'] as
+        | ComponentType<Record<string, never>>
+        | undefined;
+      if (Resolved === undefined) {
+        return <div data-testid="provider-miss">PROVIDER MISS</div>;
+      }
+      return (
+        <div>
+          <p>Pre-CTA prose.</p>
+          <Resolved />
+        </div>
+      );
+    }
+    const Island = createWebsiteBlogPostBridgeIsland({
+      slugToMdxBody: { 'with-cta': MdxBodySimulatingTagLookup },
+      navigation: buildNavigation(),
+      mdxComponents: { CTASection: StubCtaSection },
+    });
+    render(
+      <Island
+        slug="with-cta"
+        rawFrontmatter={{ ...VALID_FRONTMATTER, slug: 'with-cta' }}
+        locale={AvailableLanguage.EN}
+        defaultLocale={AvailableLanguage.EN}
+        labelPack={SKIP_LABEL_PACK}
+        designTokens={DESIGN_TOKENS}
+        skipToMainContentLabelKey={SKIP_KEY}
+        frontendProviders={FRONTEND_PROVIDERS}
+      />,
+    );
+    expect(screen.queryByTestId('provider-miss')).toBeNull();
+    expect(screen.getByTestId('stub-cta').textContent).toBe('CTA SECTION');
+  });
+
+  it('throws an actionable error when the slug has no entry in slugToMdxBody', () => {
+    const Island = createWebsiteBlogPostBridgeIsland({
+      slugToMdxBody: { 'a-real-post': MdxBodyA },
+      navigation: buildNavigation(),
+    });
+    /**
+     * Render a wrapper in a try/catch — `render` swallows the throw
+     * into React's reconciler error path, but the message is what we
+     * care about. We assert the error message via `console.error` spy
+     * patterns elsewhere in the suite; here, the simplest reliable
+     * assertion is to call the island as a plain function and observe
+     * the synchronous throw from inside the body of
+     * `WebsiteBlogPostBridgeIsland`.
+     */
+    expect(() => {
+      Island({
+        slug: 'unknown-slug',
+        rawFrontmatter: { ...VALID_FRONTMATTER, slug: 'unknown-slug' },
+        locale: AvailableLanguage.EN,
+        defaultLocale: AvailableLanguage.EN,
+        labelPack: SKIP_LABEL_PACK,
+        designTokens: DESIGN_TOKENS,
+        skipToMainContentLabelKey: SKIP_KEY,
+        frontendProviders: FRONTEND_PROVIDERS,
+      });
+    }).toThrowError(/No MDX body registered for slug="unknown-slug"/);
+  });
+
+  /**
+   * Mirrors the regression guard in `bridge-runtime.test.tsx` — island
+   * props MUST stay JSON-serializable so they can survive Astro's
+   * `devalue`-style hydration boundary. ComponentType refs (the MDX
+   * body, the navigation header/footer, the embedded section
+   * components) MUST stay closure-trapped, never on the prop signature.
+   */
+  it('island props are JSON-serializable (no ComponentType on the prop boundary)', () => {
+    const props: WebsiteBlogPostBridgeIslandProps = {
+      slug: 'why-context-beats-content',
+      rawFrontmatter: VALID_FRONTMATTER,
+      source: 'en/why-context-beats-content.mdx',
+      locale: AvailableLanguage.EN,
+      defaultLocale: AvailableLanguage.EN,
+      labelPack: SKIP_LABEL_PACK,
+      designTokens: DESIGN_TOKENS,
+      skipToMainContentLabelKey: SKIP_KEY,
+      frontendProviders: FRONTEND_PROVIDERS,
+    };
+    expect(() => structuredClone(props)).not.toThrow();
+    const cloned = structuredClone(props);
+    expect(cloned.slug).toBe('why-context-beats-content');
+    expect(cloned.locale).toBe(AvailableLanguage.EN);
+    expect(cloned.frontendProviders?.providers.sentry.metadata.ref).toBe('sentry');
+  });
+});

package/src/astro/__tests__/blog-post-head.renderer.test.ts

@@ -0,0 +1,249 @@
+import { describe, expect, it } from 'vitest';
+
+import { AvailableLanguage } from '@wildo-ai/saas-models/public-runtime';
+
+import { WildoMarketingWebsiteConfigSchema } from '../../config/wildo-website-config.schemas';
+import {
+  BlogPostFrontmatterSchema,
+  type BlogPostFrontmatter,
+} from '../../schemas/blog/blog-post-frontmatter.shared.schemas';
+import { WebsiteLabelKeySchema } from '../../schemas/label-keys/website-label-key.schemas';
+import {
+  WebsitePageManifestSchema,
+  type WebsitePageManifest,
+} from '../../schemas/manifests/website-page-manifest.shared.schemas';
+import {
+  WebsiteRootConfigSchema,
+  type WebsiteRootConfig,
+} from '../../schemas/manifests/website-root-config.shared.schemas';
+import { WebsitePageRefSchema } from '../../schemas/refs/page-ref.schemas';
+import { WebsiteSectionRefSchema } from '../../schemas/refs/section-ref.schemas';
+import { renderBlogPostHeadHtml } from '../blog-post-head.renderer';
+import {
+  composeWebsiteSiteContext,
+  type WebsiteSiteContext,
+} from '../website-site-context';
+
+const NoopComponent = () => null;
+
+const DESIGN_TOKENS = {
+  colors: {
+    background: '#fff',
+    foreground: '#111',
+    primary: '#0070f3',
+    primaryForeground: '#fff',
+    accent: '#ff5e5b',
+    accentForeground: '#fff',
+    surface: '#fafafa',
+    surfaceForeground: '#111',
+    border: '#e5e5e5',
+    muted: '#f5f5f5',
+    mutedForeground: '#737373',
+  },
+  radii: {
+    none: '0',
+    sm: '0.125rem',
+    md: '0.375rem',
+    lg: '0.75rem',
+    xl: '1.5rem',
+    full: '9999px',
+  },
+};
+
+const FILLER_MANIFEST: WebsitePageManifest = WebsitePageManifestSchema.parse({
+  ref: WebsitePageRefSchema.parse('blog-post'),
+  routePath: '/blog/[slug]',
+  pageComponent: NoopComponent,
+  sectionRefs: [WebsiteSectionRefSchema.parse('post-cta')],
+  metaLabelKeys: {
+    titleKey: WebsiteLabelKeySchema.parse('website.blog-post.meta.title'),
+    descriptionKey: WebsiteLabelKeySchema.parse('website.blog-post.meta.description'),
+  },
+}) as WebsitePageManifest;
+
+function buildSiteContext(
+  locales: AvailableLanguage[],
+  defaultLocale: AvailableLanguage,
+  publicOrigin = 'https://example.com',
+  siteName = 'Example Site',
+): WebsiteSiteContext {
+  const rootConfig = WebsiteRootConfigSchema.parse({
+    pageManifests: [FILLER_MANIFEST],
+    designTokens: DESIGN_TOKENS,
+    navigation: { headerComponent: NoopComponent, footerComponent: NoopComponent },
+    seo: { siteName },
+    skipToMainContentLabelKey: WebsiteLabelKeySchema.parse(
+      'website.chrome.layout.skip-to-main-content',
+    ),
+  }) as WebsiteRootConfig;
+
+  const websiteConfig = WildoMarketingWebsiteConfigSchema.parse({
+    publicOrigin,
+    appOrigin: 'https://app.example.com',
+    defaultLocale,
+    locales: locales.map((locale) => ({ locale, path: String(locale) })),
+  });
+
+  return composeWebsiteSiteContext({ rootConfig, websiteConfig });
+}
+
+const VALID_FRONTMATTER: BlogPostFrontmatter = BlogPostFrontmatterSchema.parse({
+  title: 'Why Context Beats Content',
+  summary: 'Compress the loop your team actually runs every week.',
+  slug: 'why-context-beats-content',
+  locale: AvailableLanguage.EN,
+  publishedAt: '2026-04-17T09:00:00.000Z',
+  authorRef: 'paul-cayon',
+  tags: ['context', 'product-strategy'],
+  coverImageUrl: 'https://cdn.wildo.ai/blog/why-context-cover.png',
+});
+
+describe('renderBlogPostHeadHtml', () => {
+  it('emits title, description, og:type=article, and canonical from frontmatter + site context', () => {
+    const html = renderBlogPostHeadHtml({
+      siteContext: buildSiteContext(
+        [AvailableLanguage.EN, AvailableLanguage.FR],
+        AvailableLanguage.EN,
+      ),
+      locale: AvailableLanguage.EN,
+      routePath: '/blog/why-context-beats-content',
+      frontmatter: VALID_FRONTMATTER,
+    });
+    expect(html).toContain('<title>Why Context Beats Content</title>');
+    expect(html).toContain(
+      '<meta name="description" content="Compress the loop your team actually runs every week." />',
+    );
+    expect(html).toContain('<meta property="og:type" content="article" />');
+    expect(html).toContain(
+      '<link rel="canonical" href="https://example.com/blog/why-context-beats-content" />',
+    );
+  });
+
+  it('emits article:published_time, article:author, and one article:tag per tag', () => {
+    const html = renderBlogPostHeadHtml({
+      siteContext: buildSiteContext([AvailableLanguage.EN], AvailableLanguage.EN),
+      locale: AvailableLanguage.EN,
+      routePath: '/blog/why-context-beats-content',
+      frontmatter: VALID_FRONTMATTER,
+    });
+    expect(html).toContain(
+      '<meta property="article:published_time" content="2026-04-17T09:00:00.000Z" />',
+    );
+    expect(html).toContain(
+      '<meta property="article:author" content="paul-cayon" />',
+    );
+    expect(html).toContain('<meta property="article:tag" content="context" />');
+    expect(html).toContain(
+      '<meta property="article:tag" content="product-strategy" />',
+    );
+  });
+
+  it('emits BlogPosting JSON-LD alongside the OG article metadata', () => {
+    const html = renderBlogPostHeadHtml({
+      siteContext: buildSiteContext([AvailableLanguage.EN], AvailableLanguage.EN),
+      locale: AvailableLanguage.EN,
+      routePath: '/blog/why-context-beats-content',
+      frontmatter: VALID_FRONTMATTER,
+    });
+    expect(html).toContain('<script type="application/ld+json">');
+    expect(html).toContain('"@type":"BlogPosting"');
+    expect(html).toContain('"headline":"Why Context Beats Content"');
+    expect(html).toContain('"mainEntityOfPage":"https://example.com/blog/why-context-beats-content"');
+    expect(html).toContain('"inLanguage":"en"');
+  });
+
+  it('emits og:image and twitter:card=summary_large_image when coverImageUrl is set', () => {
+    const html = renderBlogPostHeadHtml({
+      siteContext: buildSiteContext([AvailableLanguage.EN], AvailableLanguage.EN),
+      locale: AvailableLanguage.EN,
+      routePath: '/blog/why-context-beats-content',
+      frontmatter: VALID_FRONTMATTER,
+    });
+    expect(html).toContain(
+      '<meta property="og:image" content="https://cdn.wildo.ai/blog/why-context-cover.png" />',
+    );
+    expect(html).toContain('<meta name="twitter:card" content="summary_large_image" />');
+  });
+
+  it('omits og:image and downgrades twitter card to summary when coverImageUrl is absent', () => {
+    const noCover = BlogPostFrontmatterSchema.parse({
+      ...VALID_FRONTMATTER,
+      coverImageUrl: undefined,
+    });
+    const html = renderBlogPostHeadHtml({
+      siteContext: buildSiteContext([AvailableLanguage.EN], AvailableLanguage.EN),
+      locale: AvailableLanguage.EN,
+      routePath: '/blog/why-context-beats-content',
+      frontmatter: noCover,
+    });
+    expect(html).not.toContain('og:image');
+    expect(html).toContain('<meta name="twitter:card" content="summary" />');
+  });
+
+  it('emits one hreflang per declared locale + an x-default pointing at the default-locale URL', () => {
+    const html = renderBlogPostHeadHtml({
+      siteContext: buildSiteContext(
+        [AvailableLanguage.EN, AvailableLanguage.FR],
+        AvailableLanguage.EN,
+      ),
+      locale: AvailableLanguage.EN,
+      routePath: '/blog/why-context-beats-content',
+      frontmatter: VALID_FRONTMATTER,
+    });
+    expect(html).toContain(
+      '<link rel="alternate" hreflang="en" href="https://example.com/blog/why-context-beats-content" />',
+    );
+    expect(html).toContain(
+      '<link rel="alternate" hreflang="fr" href="https://example.com/fr/blog/why-context-beats-content" />',
+    );
+    expect(html).toContain(
+      '<link rel="alternate" hreflang="x-default" href="https://example.com/blog/why-context-beats-content" />',
+    );
+  });
+
+  it('locale-prefixes the canonical URL when the current locale is not the default locale', () => {
+    const html = renderBlogPostHeadHtml({
+      siteContext: buildSiteContext(
+        [AvailableLanguage.EN, AvailableLanguage.FR],
+        AvailableLanguage.EN,
+      ),
+      locale: AvailableLanguage.FR,
+      routePath: '/blog/why-context-beats-content',
+      frontmatter: VALID_FRONTMATTER,
+    });
+    expect(html).toContain(
+      '<link rel="canonical" href="https://example.com/fr/blog/why-context-beats-content" />',
+    );
+    expect(html).toContain(
+      '<meta property="og:url" content="https://example.com/fr/blog/why-context-beats-content" />',
+    );
+    expect(html).toContain('"url":"https://example.com/fr/blog/why-context-beats-content"');
+  });
+
+  it('emits noai robots meta when the blog post opts out of AI training', () => {
+    const html = renderBlogPostHeadHtml({
+      siteContext: buildSiteContext([AvailableLanguage.EN], AvailableLanguage.EN),
+      locale: AvailableLanguage.EN,
+      routePath: '/blog/why-context-beats-content',
+      frontmatter: VALID_FRONTMATTER,
+      noaiOptOut: true,
+    });
+    expect(html).toContain('<meta name="robots" content="noai, noimageai" />');
+  });
+
+  it('escapes HTML-unsafe characters in title and summary', () => {
+    const tricky = BlogPostFrontmatterSchema.parse({
+      ...VALID_FRONTMATTER,
+      title: 'Quotes "and" <angle> brackets',
+      summary: "Apostrophe's & ampersands break HTML.",
+    });
+    const html = renderBlogPostHeadHtml({
+      siteContext: buildSiteContext([AvailableLanguage.EN], AvailableLanguage.EN),
+      locale: AvailableLanguage.EN,
+      routePath: '/blog/quotes-and-angles',
+      frontmatter: tricky,
+    });
+    expect(html).toContain('<title>Quotes &quot;and&quot; &lt;angle&gt; brackets</title>');
+    expect(html).toContain('Apostrophe&#39;s &amp; ampersands break HTML.');
+  });
+});