@morphika/andami 0.5.11 → 0.8.1

package/components/admin/SERPPreview.tsx

@@ -0,0 +1,85 @@
+"use client";
+
+import { getSiteConfig } from "../../lib/config";
+
+interface SERPPreviewProps {
+  /** Page or site title — what shows as the SERP heading. */
+  title: string;
+  /** Description / meta description — what shows below the URL. */
+  description: string;
+  /** Optional path portion of the URL after the domain (e.g. "about" or "work/project-x"). */
+  path?: string;
+  /** Optional fallback title when `title` is empty (e.g. site config default). */
+  fallbackTitle?: string;
+  /** Optional fallback description when `description` is empty. */
+  fallbackDescription?: string;
+}
+
+const TITLE_LIMIT = 60;
+const DESCRIPTION_LIMIT = 160;
+
+/**
+ * Google SERP preview — renders an approximation of how a result will look in
+ * search results. Truncates title at 60 chars and description at 160 chars
+ * (Google's typical display limits). Falls back to site-config defaults when
+ * the page-level field is empty.
+ */
+export default function SERPPreview({
+  title,
+  description,
+  path = "",
+  fallbackTitle,
+  fallbackDescription,
+}: SERPPreviewProps) {
+  const cfg = getSiteConfig();
+  const effectiveTitle = title.trim() || fallbackTitle?.trim() || cfg.defaults.metaTitle || cfg.name;
+  const effectiveDescription =
+    description.trim() ||
+    fallbackDescription?.trim() ||
+    cfg.defaults.metaDescription ||
+    "";
+
+  const displayTitle =
+    effectiveTitle.length > TITLE_LIMIT
+      ? effectiveTitle.slice(0, TITLE_LIMIT - 1).trimEnd() + "…"
+      : effectiveTitle;
+
+  const displayDescription =
+    effectiveDescription.length > DESCRIPTION_LIMIT
+      ? effectiveDescription.slice(0, DESCRIPTION_LIMIT - 1).trimEnd() + "…"
+      : effectiveDescription;
+
+  // Format URL like Google does: domain › breadcrumb
+  const domain = cfg.domain.replace(/^https?:\/\//, "").replace(/\/$/, "");
+  const segments = path.split("/").filter(Boolean);
+  const breadcrumb = segments.length > 0 ? ` › ${segments.join(" › ")}` : "";
+
+  return (
+    <div className="space-y-1.5">
+      <label className="text-xs font-medium text-neutral-500">
+        Google Search Preview
+      </label>
+      <div className="rounded-xl border border-neutral-200 bg-white px-4 py-3 font-[system-ui]">
+        <div className="text-xs text-neutral-600 truncate">
+          {domain}
+          <span className="text-neutral-400">{breadcrumb}</span>
+        </div>
+        <div className="mt-1 text-[18px] leading-snug text-[#1a0dab] hover:underline cursor-default truncate">
+          {displayTitle || (
+            <span className="italic text-neutral-400">No title set</span>
+          )}
+        </div>
+        <div className="mt-1 text-[13px] leading-snug text-neutral-700 line-clamp-2">
+          {displayDescription || (
+            <span className="italic text-neutral-400">
+              No description set — search engines may auto-generate one from page content.
+            </span>
+          )}
+        </div>
+      </div>
+      <p className="text-[11px] text-neutral-400">
+        Approximation of how this page will look in Google search results. Actual rendering varies by device and Google&apos;s display rules.
+      </p>
+    </div>
+  );
+}

package/components/builder/settings-panel/PageSettings.tsx

@@ -21,9 +21,14 @@ import {
   SettingsField,
   SettingsSection,
   INPUT_CLASS,
+  AssetPathInput,
 } from "../editors/shared";
 import ColorSwatchPicker, { usePaletteSwatches } from "../ColorSwatchPicker";
 import { serializeColorField, parseColorField } from "../../../lib/color-utils";
+import SERPPreview from "../../admin/SERPPreview";
+
+const SEO_TITLE_LIMIT = 60;
+const SEO_DESCRIPTION_LIMIT = 160;
 
 /** Convert a title to a URL-safe slug. Handles unicode (é, ñ, ü, etc.). */
 function slugify(text: string): string {
@@ -174,39 +179,90 @@ export default function PageSettings() {
 export function PageSeoSettings() {
   const metadata = useBuilderStore((s) => s.metadata);
   const setMetadata = useBuilderStore((s) => s.setMetadata);
+  const pageSlug = useBuilderStore((s) => s.pageSlug);
+  const pageType = useBuilderStore((s) => s.pageType);
+  const pageTitle = useBuilderStore((s) => s.pageTitle);
+
+  const seoTitle = metadata.seo_title || "";
+  const seoDescription = metadata.seo_description || "";
+  const titleOver = seoTitle.length > SEO_TITLE_LIMIT;
+  const descOver = seoDescription.length > SEO_DESCRIPTION_LIMIT;
+
+  // Build the path portion of the URL for SERP preview
+  const previewPath = pageType === "project" ? `work/${pageSlug}` : pageSlug;
 
   return (
     <>
       <SettingsSection title="SEO" defaultOpen icon={<SEOIcon />}>
         <SettingsField label="SEO Title">
-          <input
-            type="text"
-            value={metadata.seo_title || ""}
-            onChange={(e) => setMetadata({ seo_title: e.target.value })}
-            className={INPUT_CLASS}
-            placeholder="Page title for search engines"
-          />
+          <div className="space-y-1">
+            <input
+              type="text"
+              value={seoTitle}
+              onChange={(e) => setMetadata({ seo_title: e.target.value })}
+              className={INPUT_CLASS}
+              placeholder={pageTitle || "Page title for search engines"}
+            />
+            <div className="flex justify-end">
+              <span
+                className={`text-[10px] ${titleOver ? "text-red-400" : "text-neutral-400"}`}
+              >
+                {seoTitle.length}/{SEO_TITLE_LIMIT}
+              </span>
+            </div>
+          </div>
         </SettingsField>
         <SettingsField label="Description">
-          <textarea
-            value={metadata.seo_description || ""}
-            onChange={(e) =>
-              setMetadata({ seo_description: e.target.value })
-            }
-            rows={2}
-            className={`${INPUT_CLASS} resize-y`}
-            placeholder="Brief description for search results"
-          />
+          <div className="space-y-1">
+            <textarea
+              value={seoDescription}
+              onChange={(e) => setMetadata({ seo_description: e.target.value })}
+              rows={2}
+              className={`${INPUT_CLASS} resize-y`}
+              placeholder="Brief description for search results"
+            />
+            <div className="flex justify-end">
+              <span
+                className={`text-[10px] ${descOver ? "text-red-400" : "text-neutral-400"}`}
+              >
+                {seoDescription.length}/{SEO_DESCRIPTION_LIMIT}
+              </span>
+            </div>
+          </div>
         </SettingsField>
-        <SettingsField label="OG Image" hint="Social sharing image path">
-          <input
-            type="text"
+        <SettingsField label="OG Image" hint="Social sharing image (1200×630 recommended)">
+          <AssetPathInput
             value={metadata.og_image_path || ""}
-            onChange={(e) =>
-              setMetadata({ og_image_path: e.target.value })
-            }
-            className={INPUT_CLASS}
+            onChange={(v) => setMetadata({ og_image_path: v })}
             placeholder="og/page-image.jpg"
+            filterType="image"
+          />
+        </SettingsField>
+        <SettingsField
+          label="Hide from Search"
+          hint="Excludes this page from sitemap.xml and emits robots: noindex,nofollow. Useful for thank-you pages, drafts, internal routes."
+        >
+          <button
+            type="button"
+            onClick={() => setMetadata({ noindex: !metadata.noindex })}
+            className={`relative inline-flex h-5 w-9 items-center rounded-full transition-colors ${
+              metadata.noindex ? "bg-[#3580f9]" : "bg-neutral-300"
+            }`}
+            aria-label={metadata.noindex ? "Disable noindex" : "Enable noindex"}
+          >
+            <span
+              className={`inline-block h-3.5 w-3.5 transform rounded-full bg-white transition-transform ${
+                metadata.noindex ? "translate-x-[18px]" : "translate-x-[3px]"
+              }`}
+            />
+          </button>
+        </SettingsField>
+        <SettingsField>
+          <SERPPreview
+            title={seoTitle}
+            description={seoDescription}
+            path={previewPath}
+            fallbackTitle={pageTitle}
           />
         </SettingsField>
       </SettingsSection>

package/components/seo/JsonLd.tsx

@@ -0,0 +1,50 @@
+/**
+ * JsonLd — Inject one or more JSON-LD structured-data objects as
+ * <script type="application/ld+json"> tags.
+ *
+ * Accepts either a single object or an array. Null/undefined entries are
+ * filtered out, so callers can pass build results directly:
+ *
+ *   <JsonLd data={[
+ *     buildOrganizationJsonLd({ ... }),
+ *     buildWebSiteJsonLd({ ... }),
+ *   ]} />
+ *
+ * Server-rendered safely — uses `dangerouslySetInnerHTML` with a
+ * JSON.stringify that guards against XSS via `</script>` injection.
+ */
+
+type LdRecord = Record<string, unknown>;
+
+interface JsonLdProps {
+  data: LdRecord | null | undefined | Array<LdRecord | null | undefined>;
+}
+
+/**
+ * Escape `</` sequences inside JSON to prevent breaking out of the
+ * <script> tag. Standard hardening per OWASP recommendation.
+ */
+function safeStringify(obj: LdRecord): string {
+  return JSON.stringify(obj).replace(/<\/(script)/gi, "<\\/$1");
+}
+
+export default function JsonLd({ data }: JsonLdProps) {
+  const items = (Array.isArray(data) ? data : [data]).filter(
+    (item): item is LdRecord => item != null && typeof item === "object"
+  );
+
+  if (items.length === 0) return null;
+
+  return (
+    <>
+      {items.map((item, i) => (
+        <script
+          key={i}
+          type="application/ld+json"
+          // eslint-disable-next-line react/no-danger
+          dangerouslySetInnerHTML={{ __html: safeStringify(item) }}
+        />
+      ))}
+    </>
+  );
+}

package/components/seo/ProjectJsonLd.tsx

@@ -0,0 +1,44 @@
+/**
+ * ProjectJsonLd — Server component that emits a `CreativeWork` JSON-LD
+ * record for a project page (`/work/[slug]`). Rendered inline at the top
+ * of the project page so search engines see the structured data alongside
+ * the HTML body.
+ *
+ * Falls back to siteSettings.default_author for the author field when the
+ * page doesn't specify one. Returns null when the page has insufficient
+ * data — search engines tolerate partial schemas, but emitting an empty
+ * CreativeWork would be noise.
+ */
+
+import JsonLd from "./JsonLd";
+import { buildCreativeWorkJsonLd } from "../../lib/seo/jsonld";
+import { getCachedSiteSettings, toAbsoluteUrl } from "../../lib/seo/site-settings";
+import { getSiteConfig } from "../../lib/config";
+import { assetUrl } from "../../lib/assets";
+import type { Page } from "../../lib/sanity/types";
+
+interface ProjectJsonLdProps {
+  page: Page;
+}
+
+export default async function ProjectJsonLd({ page }: ProjectJsonLdProps) {
+  const settings = await getCachedSiteSettings();
+  const cfg = getSiteConfig();
+
+  const url = `${cfg.domain.replace(/\/$/, "")}/work/${page.slug?.current || ""}`;
+  const imageAbsolute = page.thumbnail_path
+    ? toAbsoluteUrl(assetUrl(page.thumbnail_path), cfg.domain)
+    : undefined;
+  const authorName = settings?.default_author || cfg.name;
+
+  const ld = buildCreativeWorkJsonLd({
+    name: page.title,
+    url,
+    image: imageAbsolute,
+    datePublished: page.published_at,
+    description: page.metadata?.seo_description,
+    authorName,
+  });
+
+  return <JsonLd data={ld} />;
+}

package/components/seo/SiteSeoHead.tsx

@@ -0,0 +1,66 @@
+/**
+ * SiteSeoHead — Server component that emits site-wide SEO surfaces:
+ *
+ *   - JSON-LD `Organization` (logo + sameAs profiles → Google Knowledge Panel)
+ *   - JSON-LD `WebSite` (basic site identity)
+ *   - `<meta name="google-site-verification">` (when configured)
+ *   - `<meta name="msvalidate.01">` for Bing Webmaster (when configured)
+ *
+ * Rendered inside the public site layout so every public page emits these.
+ * Admin and Studio routes are excluded (different layout subtree).
+ *
+ * Data source: siteSettings document in Sanity (cached via React `cache()`).
+ * Empty fields are omitted — partial schemas are tolerated by search engines.
+ */
+
+import JsonLd from "./JsonLd";
+import { buildOrganizationJsonLd, buildWebSiteJsonLd } from "../../lib/seo/jsonld";
+import { getCachedSiteSettings, toAbsoluteUrl } from "../../lib/seo/site-settings";
+import { getSiteConfig } from "../../lib/config";
+import { assetUrl } from "../../lib/assets";
+
+export default async function SiteSeoHead() {
+  const settings = await getCachedSiteSettings();
+  const cfg = getSiteConfig();
+
+  const logoAbsolute = settings?.org_logo
+    ? toAbsoluteUrl(assetUrl(settings.org_logo), cfg.domain)
+    : undefined;
+
+  const description =
+    settings?.default_description || cfg.defaults.metaDescription || undefined;
+
+  const orgLd = buildOrganizationJsonLd({
+    name: cfg.name,
+    url: cfg.domain,
+    logo: logoAbsolute,
+    socialLinks: settings?.social_links,
+    description,
+    foundingYear: settings?.founding_year,
+    addressLocality: settings?.address_locality,
+    addressCountry: settings?.address_country,
+    contactEmail: settings?.contact_email,
+    keywords: settings?.keywords,
+  });
+
+  const siteLd = buildWebSiteJsonLd({
+    name: cfg.name,
+    url: cfg.domain,
+    description,
+  });
+
+  return (
+    <>
+      <JsonLd data={[orgLd, siteLd]} />
+      {settings?.verification_google && (
+        <meta
+          name="google-site-verification"
+          content={settings.verification_google}
+        />
+      )}
+      {settings?.verification_bing && (
+        <meta name="msvalidate.01" content={settings.verification_bing} />
+      )}
+    </>
+  );
+}

package/lib/builder/serializer/serializers.ts

@@ -368,6 +368,7 @@ export function stateToDocument(
       seo_title: state.metadata.seo_title,
       seo_description: state.metadata.seo_description,
       og_image_path: state.metadata.og_image_path,
+      noindex: state.metadata.noindex,
     }),
     page_settings: hasPageSettings
       ? {

package/lib/sanity/queries.ts

@@ -227,6 +227,18 @@ export const allPageSlugsQuery = groq`
   *[_type == "page" && page_type != "project" && draft_mode != true && defined(slug.current)].slug.current
 `;
 
+// All non-project pages for sitemap.xml + llms.txt — includes _updatedAt for
+// accurate <lastmod>, plus title and description for llms.txt entries.
+// Respects metadata.noindex to exclude hidden pages.
+export const allPagesForSitemapQuery = groq`
+  *[_type == "page" && page_type != "project" && draft_mode != true && defined(slug.current) && metadata.noindex != true] | order(is_home desc, title asc) {
+    "slug": slug.current,
+    "updatedAt": _updatedAt,
+    title,
+    "description": metadata.seo_description
+  }
+`;
+
 // Get a published project page by slug (for public /work/[slug] route)
 export const publishedProjectBySlugQuery = groq`
   *[_type == "page" && slug.current == $slug && page_type == "project" && draft_mode != true][0] {
@@ -249,6 +261,19 @@ export const allProjectSlugsQuery = groq`
   *[_type == "page" && page_type == "project" && draft_mode != true && defined(slug.current)].slug.current
 `;
 
+// All published projects for sitemap.xml — includes _updatedAt for accurate <lastmod>,
+// thumbnail_path for image sitemap, and respects metadata.noindex.
+export const allProjectsForSitemapQuery = groq`
+  *[_type == "page" && page_type == "project" && draft_mode != true && defined(slug.current) && metadata.noindex != true] {
+    "slug": slug.current,
+    "updatedAt": _updatedAt,
+    thumbnail_path,
+    title,
+    "description": metadata.seo_description,
+    published_at
+  }
+`;
+
 // ============================================
 // ASSET REGISTRY
 // ============================================
@@ -422,6 +447,16 @@ export const siteSettingsQuery = groq`
     default_og_image,
     favicon_path,
     analytics_id,
+    org_logo,
+    default_author,
+    social_links,
+    founding_year,
+    address_locality,
+    address_country,
+    contact_email,
+    keywords,
+    verification_google,
+    verification_bing,
     seed_url,
     last_scanned_at,
     asset_status

package/lib/sanity/types.ts

@@ -821,6 +821,8 @@ export interface PageMetadata {
   seo_title?: string;
   seo_description?: string;
   og_image_path?: string;
+  /** When true, page is excluded from sitemap.xml and emits robots: noindex,nofollow. */
+  noindex?: boolean;
 }
 
 export interface Page {
@@ -1029,6 +1031,14 @@ export interface AssetRegistry {
 // Site Settings
 // ============================================
 
+export interface SocialLink {
+  _key?: string;
+  /** Optional display label (e.g. "Instagram", "Behance"). For admin organization only. */
+  label?: string;
+  /** Profile URL — emitted as schema.org sameAs[]. */
+  url: string;
+}
+
 export interface SiteSettings {
   nav_items?: NavItem[];
   nav_design?: NavDesign;
@@ -1038,6 +1048,26 @@ export interface SiteSettings {
   default_og_image?: string;
   favicon_path?: string;
   analytics_id?: string;
+  /** Asset path to the organization logo used by JSON-LD `Organization.logo`. */
+  org_logo?: string;
+  /** Default author for project pages (used in `CreativeWork.author` when not overridden). */
+  default_author?: string;
+  /** Social profile URLs emitted as schema.org `sameAs[]`. */
+  social_links?: SocialLink[];
+  /** Year the organization was founded. Emitted as schema.org `foundingDate`. */
+  founding_year?: number;
+  /** City/town (schema.org `address.addressLocality`). */
+  address_locality?: string;
+  /** Country name or ISO code (schema.org `address.addressCountry`). */
+  address_country?: string;
+  /** Public contact email (schema.org `contactPoint.email`). */
+  contact_email?: string;
+  /** Areas of expertise — short tags emitted as schema.org `knowsAbout[]`. */
+  keywords?: string[];
+  /** Google Search Console verification code (HTML tag method). */
+  verification_google?: string;
+  /** Bing Webmaster Tools verification code. */
+  verification_bing?: string;
   seed_url?: string;
   last_scanned_at?: string;
   asset_status?: "ok" | "scanning" | "error";

package/lib/seo/jsonld.ts

@@ -0,0 +1,174 @@
+/**
+ * JSON-LD structured data builders for schema.org types.
+ *
+ * Pure functions — each takes input data and returns a plain JSON-LD object
+ * ready to be serialized into a <script type="application/ld+json"> tag.
+ *
+ * Empty/missing fields are simply omitted from the output (search engines
+ * tolerate partial schemas). All builders return `null` when the minimum
+ * required fields aren't present, so callers can skip emission entirely.
+ *
+ * Schema reference: https://schema.org/
+ * Google guidance: https://developers.google.com/search/docs/appearance/structured-data
+ */
+
+import type { SocialLink } from "../sanity/types";
+
+// ============================================
+// Types
+// ============================================
+
+export interface OrganizationInput {
+  name: string;
+  url: string;
+  /** Absolute URL to the organization logo (NOT a relative asset path). */
+  logo?: string;
+  /** Profile URLs (filtered & trimmed). */
+  socialLinks?: SocialLink[];
+  /** Optional descriptive tagline for the organization. */
+  description?: string;
+  /** Year the org was founded (emitted as ISO date `YYYY`). */
+  foundingYear?: number;
+  /** City/town of the org's primary address. */
+  addressLocality?: string;
+  /** Country name or ISO code. */
+  addressCountry?: string;
+  /** Public contact email (creates a `contactPoint`). */
+  contactEmail?: string;
+  /** Tags / areas of expertise emitted as `knowsAbout[]`. */
+  keywords?: string[];
+}
+
+export interface WebSiteInput {
+  name: string;
+  url: string;
+  description?: string;
+}
+
+export interface CreativeWorkInput {
+  /** Title of the work. */
+  name: string;
+  /** Absolute URL of the work's page. */
+  url: string;
+  /** Absolute URL to the work's primary image (thumbnail / hero). */
+  image?: string;
+  /** ISO 8601 publication date. */
+  datePublished?: string;
+  /** Short descriptive text. */
+  description?: string;
+  /** Name of the creating organization or person (falls back to org name). */
+  authorName?: string;
+}
+
+// ============================================
+// Builders
+// ============================================
+
+/**
+ * Organization — emitted site-wide. Powers Google Knowledge Panel for brand
+ * searches when combined with verified profiles via `sameAs`.
+ */
+export function buildOrganizationJsonLd(
+  input: OrganizationInput
+): Record<string, unknown> | null {
+  if (!input.name || !input.url) return null;
+
+  const ld: Record<string, unknown> = {
+    "@context": "https://schema.org",
+    "@type": "Organization",
+    name: input.name,
+    url: input.url,
+  };
+
+  if (input.logo) ld.logo = input.logo;
+  if (input.description) ld.description = input.description;
+
+  // foundingDate — schema.org expects ISO date; year-only is valid per spec
+  if (input.foundingYear && Number.isFinite(input.foundingYear)) {
+    ld.foundingDate = String(Math.round(input.foundingYear));
+  }
+
+  // Address — PostalAddress with locality/country
+  if (input.addressLocality || input.addressCountry) {
+    const address: Record<string, unknown> = {
+      "@type": "PostalAddress",
+    };
+    if (input.addressLocality) address.addressLocality = input.addressLocality;
+    if (input.addressCountry) address.addressCountry = input.addressCountry;
+    ld.address = address;
+  }
+
+  // ContactPoint — only emit if email present (schema.org requires contactType)
+  if (input.contactEmail) {
+    ld.contactPoint = {
+      "@type": "ContactPoint",
+      contactType: "customer service",
+      email: input.contactEmail,
+    };
+  }
+
+  // knowsAbout — array of strings (or schema.org Things)
+  const knowsAbout = (input.keywords || [])
+    .map((k) => k?.trim())
+    .filter((k): k is string => Boolean(k));
+  if (knowsAbout.length > 0) ld.knowsAbout = knowsAbout;
+
+  // sameAs — social profile URLs
+  const sameAs = (input.socialLinks || [])
+    .map((l) => l?.url?.trim())
+    .filter((u): u is string => Boolean(u));
+  if (sameAs.length > 0) ld.sameAs = sameAs;
+
+  return ld;
+}
+
+/**
+ * WebSite — emitted site-wide. Helps Google identify the site as a coherent
+ * web property (separate from individual pages).
+ */
+export function buildWebSiteJsonLd(
+  input: WebSiteInput
+): Record<string, unknown> | null {
+  if (!input.name || !input.url) return null;
+
+  const ld: Record<string, unknown> = {
+    "@context": "https://schema.org",
+    "@type": "WebSite",
+    name: input.name,
+    url: input.url,
+  };
+
+  if (input.description) ld.description = input.description;
+
+  return ld;
+}
+
+/**
+ * CreativeWork — emitted on project pages. Tells Google the page represents a
+ * specific creative work (motion graphic, illustration, photograph, etc.) and
+ * unlocks richer result presentation.
+ */
+export function buildCreativeWorkJsonLd(
+  input: CreativeWorkInput
+): Record<string, unknown> | null {
+  if (!input.name || !input.url) return null;
+
+  const ld: Record<string, unknown> = {
+    "@context": "https://schema.org",
+    "@type": "CreativeWork",
+    name: input.name,
+    url: input.url,
+  };
+
+  if (input.image) ld.image = input.image;
+  if (input.datePublished) ld.datePublished = input.datePublished;
+  if (input.description) ld.description = input.description;
+  if (input.authorName) {
+    ld.author = {
+      "@type": "Organization",
+      name: input.authorName,
+    };
+  }
+
+  return ld;
+}