@morphika/andami 0.5.11 → 0.8.1

package/components/admin/MetadataEditor.tsx

@@ -1,173 +1,487 @@
-"use client";
-
-import { useState, useEffect } from "react";
-import { getSiteConfig } from "../../lib/config";
-
-interface MetadataData {
-  default_title: string;
-  default_description: string;
-  default_og_image: string;
-  favicon_path: string;
-  analytics_id: string;
-}
-
-interface MetadataEditorProps {
-  initialData: MetadataData;
-  onSave: (data: MetadataData) => Promise<void>;
-  saving: boolean;
-}
-
-export default function MetadataEditor({
-  initialData,
-  onSave,
-  saving,
-}: MetadataEditorProps) {
-  const [title, setTitle] = useState(initialData.default_title);
-  const [description, setDescription] = useState(
-    initialData.default_description
-  );
-  const [ogImage, setOgImage] = useState(initialData.default_og_image);
-  const [favicon, setFavicon] = useState(initialData.favicon_path);
-  const [analyticsId, setAnalyticsId] = useState(initialData.analytics_id);
-
-  useEffect(() => {
-    setTitle(initialData.default_title);
-    setDescription(initialData.default_description);
-    setOgImage(initialData.default_og_image);
-    setFavicon(initialData.favicon_path);
-    setAnalyticsId(initialData.analytics_id);
-  }, [initialData]);
-
-  const handleSave = () => {
-    onSave({
-      default_title: title,
-      default_description: description,
-      default_og_image: ogImage,
-      favicon_path: favicon,
-      analytics_id: analyticsId,
-    });
-  };
-
-  return (
-    <section className="space-y-4">
-      <div className="flex items-center justify-between border-b border-neutral-200 pb-2">
-        <h2 className="text-base font-semibold text-neutral-800">
-          Site Metadata
-        </h2>
-      </div>
-
-      <p className="text-xs text-neutral-400">
-        Default SEO metadata used when pages don&apos;t specify their own.
-        Affects search results and social sharing.
-      </p>
-
-      {/* Title */}
-      <div className="space-y-1">
-        <label className="text-xs font-medium text-neutral-500">
-          Default Page Title
-        </label>
-        <input
-          type="text"
-          value={title}
-          onChange={(e) => setTitle(e.target.value)}
-          placeholder={getSiteConfig().defaults.metaTitle}
-          className="w-full rounded-lg border border-neutral-200 bg-white px-3 py-2.5 text-sm text-neutral-900 focus:border-[#3580f9] focus:outline-none"
-        />
-        <p className="text-xs text-neutral-400">
-          Shown in browser tabs and search results when no page-specific title is
-          set.
-        </p>
-      </div>
-
-      {/* Description */}
-      <div className="space-y-1">
-        <label className="text-xs font-medium text-neutral-500">
-          Default Description
-        </label>
-        <textarea
-          value={description}
-          onChange={(e) => setDescription(e.target.value)}
-          placeholder="Motion graphics studio based in Barcelona..."
-          rows={3}
-          className="w-full rounded-lg border border-neutral-200 bg-white px-3 py-2.5 text-sm text-neutral-900 focus:border-[#3580f9] focus:outline-none resize-none"
-        />
-        <div className="flex justify-between">
-          <p className="text-xs text-neutral-400">
-            Used in search results and social media previews.
-          </p>
-          <span
-            className={`text-xs ${
-              description.length > 160 ? "text-red-400" : "text-neutral-400"
-            }`}
-          >
-            {description.length}/160
-          </span>
-        </div>
-      </div>
-
-      {/* OG Image */}
-      <div className="space-y-1">
-        <label className="text-xs font-medium text-neutral-500">
-          Default OG Image Path
-        </label>
-        <input
-          type="text"
-          value={ogImage}
-          onChange={(e) => setOgImage(e.target.value)}
-          placeholder="meta/og-image.jpg"
-          className="w-full rounded-lg border border-neutral-200 bg-white px-3 py-2.5 text-sm text-neutral-900 focus:border-[#3580f9] focus:outline-none"
-        />
-        <p className="text-xs text-neutral-400">
-          Relative path to the default image shown when sharing on social media.
-          Resolved via the asset seed URL.
-        </p>
-      </div>
-
-      {/* Favicon */}
-      <div className="space-y-1">
-        <label className="text-xs font-medium text-neutral-500">
-          Favicon Path
-        </label>
-        <input
-          type="text"
-          value={favicon}
-          onChange={(e) => setFavicon(e.target.value)}
-          placeholder="meta/favicon.ico"
-          className="w-full rounded-lg border border-neutral-200 bg-white px-3 py-2.5 text-sm text-neutral-900 focus:border-[#3580f9] focus:outline-none"
-        />
-        <p className="text-xs text-neutral-400">
-          Relative path to the favicon. Resolved via the asset seed URL.
-        </p>
-      </div>
-
-      {/* Analytics ID */}
-      <div className="space-y-1">
-        <label className="text-xs font-medium text-neutral-500">
-          Analytics ID (optional)
-        </label>
-        <input
-          type="text"
-          value={analyticsId}
-          onChange={(e) => setAnalyticsId(e.target.value)}
-          placeholder="G-XXXXXXXXXX or plausible domain"
-          className="w-full rounded-lg border border-neutral-200 bg-white px-3 py-2.5 text-sm text-neutral-900 focus:border-[#3580f9] focus:outline-none"
-        />
-        <p className="text-xs text-neutral-400">
-          Google Analytics measurement ID or Plausible domain. Leave empty to
-          disable analytics.
-        </p>
-      </div>
-
-      {/* Save */}
-      <div className="flex justify-end">
-        <button
-          onClick={handleSave}
-          disabled={saving}
-          className="rounded-lg bg-[#3580f9] px-5 py-2.5 text-sm font-medium text-white hover:bg-[#2d6dd4] transition-colors disabled:opacity-50"
-        >
-          {saving ? "Saving..." : "Save Metadata"}
-        </button>
-      </div>
-    </section>
-  );
-}
+"use client";
+
+import { useState, useEffect } from "react";
+import { getSiteConfig } from "../../lib/config";
+import { AssetPathInput } from "../builder/editors/shared";
+import SERPPreview from "./SERPPreview";
+
+const TITLE_LIMIT = 60;
+const DESCRIPTION_LIMIT = 160;
+
+export interface SocialLinkInput {
+  _key?: string;
+  label?: string;
+  url: string;
+}
+
+export interface MetadataData {
+  default_title: string;
+  default_description: string;
+  default_og_image: string;
+  favicon_path: string;
+  analytics_id: string;
+  org_logo: string;
+  default_author: string;
+  social_links: SocialLinkInput[];
+  founding_year: number | undefined;
+  address_locality: string;
+  address_country: string;
+  contact_email: string;
+  keywords: string[];
+  verification_google: string;
+  verification_bing: string;
+}
+
+interface MetadataEditorProps {
+  initialData: MetadataData;
+  onSave: (data: MetadataData) => Promise<void>;
+  saving: boolean;
+}
+
+const INPUT_CLASS =
+  "w-full rounded-lg border border-neutral-200 bg-white px-3 py-2.5 text-sm text-neutral-900 focus:border-[#3580f9] focus:outline-none";
+
+const SECTION_TITLE_CLASS =
+  "text-sm font-semibold text-neutral-800 pt-6 border-t border-neutral-200";
+
+export default function MetadataEditor({
+  initialData,
+  onSave,
+  saving,
+}: MetadataEditorProps) {
+  const [title, setTitle] = useState(initialData.default_title);
+  const [description, setDescription] = useState(initialData.default_description);
+  const [ogImage, setOgImage] = useState(initialData.default_og_image);
+  const [favicon, setFavicon] = useState(initialData.favicon_path);
+  const [analyticsId, setAnalyticsId] = useState(initialData.analytics_id);
+  const [orgLogo, setOrgLogo] = useState(initialData.org_logo);
+  const [defaultAuthor, setDefaultAuthor] = useState(initialData.default_author);
+  const [socialLinks, setSocialLinks] = useState<SocialLinkInput[]>(
+    initialData.social_links || []
+  );
+  const [foundingYear, setFoundingYear] = useState<number | undefined>(
+    initialData.founding_year
+  );
+  const [addressLocality, setAddressLocality] = useState(initialData.address_locality);
+  const [addressCountry, setAddressCountry] = useState(initialData.address_country);
+  const [contactEmail, setContactEmail] = useState(initialData.contact_email);
+  const [keywordsText, setKeywordsText] = useState(
+    (initialData.keywords || []).join(", ")
+  );
+  const [verGoogle, setVerGoogle] = useState(initialData.verification_google);
+  const [verBing, setVerBing] = useState(initialData.verification_bing);
+
+  useEffect(() => {
+    setTitle(initialData.default_title);
+    setDescription(initialData.default_description);
+    setOgImage(initialData.default_og_image);
+    setFavicon(initialData.favicon_path);
+    setAnalyticsId(initialData.analytics_id);
+    setOrgLogo(initialData.org_logo);
+    setDefaultAuthor(initialData.default_author);
+    setSocialLinks(initialData.social_links || []);
+    setFoundingYear(initialData.founding_year);
+    setAddressLocality(initialData.address_locality);
+    setAddressCountry(initialData.address_country);
+    setContactEmail(initialData.contact_email);
+    setKeywordsText((initialData.keywords || []).join(", "));
+    setVerGoogle(initialData.verification_google);
+    setVerBing(initialData.verification_bing);
+  }, [initialData]);
+
+  const handleSave = () => {
+    // Parse keywords from comma-separated input, trim + dedupe
+    const keywords = Array.from(
+      new Set(
+        keywordsText
+          .split(",")
+          .map((k) => k.trim())
+          .filter(Boolean)
+      )
+    );
+    onSave({
+      default_title: title,
+      default_description: description,
+      default_og_image: ogImage,
+      favicon_path: favicon,
+      analytics_id: analyticsId,
+      org_logo: orgLogo,
+      default_author: defaultAuthor,
+      social_links: socialLinks.filter((l) => l.url?.trim()),
+      founding_year: foundingYear,
+      address_locality: addressLocality,
+      address_country: addressCountry,
+      contact_email: contactEmail,
+      keywords,
+      verification_google: verGoogle,
+      verification_bing: verBing,
+    });
+  };
+
+  const updateSocialLink = (i: number, patch: Partial<SocialLinkInput>) => {
+    setSocialLinks((arr) =>
+      arr.map((l, idx) => (idx === i ? { ...l, ...patch } : l))
+    );
+  };
+  const removeSocialLink = (i: number) =>
+    setSocialLinks((arr) => arr.filter((_, idx) => idx !== i));
+  const addSocialLink = () =>
+    setSocialLinks((arr) => [...arr, { url: "", label: "" }]);
+
+  const titleOver = title.length > TITLE_LIMIT;
+  const descOver = description.length > DESCRIPTION_LIMIT;
+
+  return (
+    <section className="space-y-4">
+      <div className="flex items-center justify-between border-b border-neutral-200 pb-2">
+        <h2 className="text-base font-semibold text-neutral-800">
+          Site Metadata
+        </h2>
+      </div>
+
+      <p className="text-xs text-neutral-400">
+        Default SEO metadata used when pages don&apos;t specify their own.
+        Affects search results and social sharing.
+      </p>
+
+      {/* ============================================================
+          DEFAULTS
+          ============================================================ */}
+
+      <div className="space-y-1">
+        <label className="text-xs font-medium text-neutral-500">
+          Default Page Title
+        </label>
+        <input
+          type="text"
+          value={title}
+          onChange={(e) => setTitle(e.target.value)}
+          placeholder={getSiteConfig().defaults.metaTitle}
+          className={INPUT_CLASS}
+        />
+        <div className="flex justify-between">
+          <p className="text-xs text-neutral-400">
+            Shown in browser tabs and search results when no page-specific title is set.
+          </p>
+          <span className={`text-xs ${titleOver ? "text-red-400" : "text-neutral-400"}`}>
+            {title.length}/{TITLE_LIMIT}
+          </span>
+        </div>
+      </div>
+
+      <div className="space-y-1">
+        <label className="text-xs font-medium text-neutral-500">
+          Default Description
+        </label>
+        <textarea
+          value={description}
+          onChange={(e) => setDescription(e.target.value)}
+          placeholder="Motion graphics studio based in Barcelona..."
+          rows={3}
+          className={`${INPUT_CLASS} resize-none`}
+        />
+        <div className="flex justify-between">
+          <p className="text-xs text-neutral-400">
+            Used in search results and social media previews.
+          </p>
+          <span className={`text-xs ${descOver ? "text-red-400" : "text-neutral-400"}`}>
+            {description.length}/{DESCRIPTION_LIMIT}
+          </span>
+        </div>
+      </div>
+
+      <SERPPreview title={title} description={description} />
+
+      <div className="space-y-1">
+        <label className="text-xs font-medium text-neutral-500">
+          Default OG Image
+        </label>
+        <AssetPathInput
+          value={ogImage}
+          onChange={setOgImage}
+          placeholder="meta/og-image.jpg"
+          filterType="image"
+        />
+        <p className="text-xs text-neutral-400">
+          Default image used when sharing on social media (Facebook, Twitter, LinkedIn). Recommended size: 1200×630px. Pages can override per-page.
+        </p>
+      </div>
+
+      <div className="space-y-1">
+        <label className="text-xs font-medium text-neutral-500">Favicon</label>
+        <AssetPathInput
+          value={favicon}
+          onChange={setFavicon}
+          placeholder="meta/favicon.ico"
+          filterType="image"
+        />
+        <p className="text-xs text-neutral-400">
+          Icon shown in browser tabs and bookmarks. Square images recommended (16×16 .ico or 32×32+ .png/.svg).
+        </p>
+      </div>
+
+      <div className="space-y-1">
+        <label className="text-xs font-medium text-neutral-500">
+          Analytics ID (optional)
+        </label>
+        <input
+          type="text"
+          value={analyticsId}
+          onChange={(e) => setAnalyticsId(e.target.value)}
+          placeholder="G-XXXXXXXXXX or plausible domain"
+          className={INPUT_CLASS}
+        />
+        <p className="text-xs text-neutral-400">
+          Google Analytics measurement ID or Plausible domain. Leave empty to disable analytics.
+        </p>
+      </div>
+
+      {/* ============================================================
+          SOCIAL & BRANDING
+          ============================================================ */}
+
+      <h3 className={SECTION_TITLE_CLASS}>Social & Branding</h3>
+      <p className="text-xs text-neutral-400">
+        Used by structured data (schema.org) so Google can show your brand in
+        Knowledge Panels and link your social profiles.
+      </p>
+
+      <div className="space-y-1">
+        <label className="text-xs font-medium text-neutral-500">
+          Organization Logo
+        </label>
+        <AssetPathInput
+          value={orgLogo}
+          onChange={setOrgLogo}
+          placeholder="meta/logo.png"
+          filterType="image"
+        />
+        <p className="text-xs text-neutral-400">
+          Logo for Google&apos;s Knowledge Panel and rich results. Square (min 112×112, ideal 500×500).
+        </p>
+      </div>
+
+      <div className="space-y-1">
+        <label className="text-xs font-medium text-neutral-500">
+          Default Author
+        </label>
+        <input
+          type="text"
+          value={defaultAuthor}
+          onChange={(e) => setDefaultAuthor(e.target.value)}
+          placeholder={getSiteConfig().name}
+          className={INPUT_CLASS}
+        />
+        <p className="text-xs text-neutral-400">
+          Author name used on project pages when not overridden. Typically your studio name.
+        </p>
+      </div>
+
+      <div className="space-y-2">
+        <label className="text-xs font-medium text-neutral-500">
+          Social Profiles
+        </label>
+        <p className="text-xs text-neutral-400">
+          Profile URLs (Instagram, LinkedIn, Behance, Vimeo, etc.). Emitted as schema.org sameAs[] — helps Google link your organization to its social presence.
+        </p>
+        <div className="space-y-2">
+          {socialLinks.map((link, i) => (
+            <div key={link._key || i} className="flex gap-1.5 items-start">
+              <input
+                type="text"
+                value={link.label || ""}
+                onChange={(e) => updateSocialLink(i, { label: e.target.value })}
+                placeholder="Label (e.g. Instagram)"
+                className={`${INPUT_CLASS} flex-[1]`}
+              />
+              <input
+                type="url"
+                value={link.url || ""}
+                onChange={(e) => updateSocialLink(i, { url: e.target.value })}
+                placeholder="https://instagram.com/yourhandle"
+                className={`${INPUT_CLASS} flex-[2]`}
+              />
+              <button
+                type="button"
+                onClick={() => removeSocialLink(i)}
+                className="shrink-0 rounded-lg px-2.5 py-2.5 text-xs text-neutral-400 hover:text-red-500 hover:bg-red-50 transition-colors"
+                aria-label="Remove social link"
+              >
+                ✕
+              </button>
+            </div>
+          ))}
+        </div>
+        <button
+          type="button"
+          onClick={addSocialLink}
+          className="text-xs text-[#3580f9] hover:underline"
+        >
+          + Add Profile
+        </button>
+      </div>
+
+      {/* ============================================================
+          ORGANIZATION INFO (citation-friendly facts for LLMs + JSON-LD)
+          ============================================================ */}
+
+      <h3 className={SECTION_TITLE_CLASS}>Organization Info</h3>
+      <p className="text-xs text-neutral-400">
+        Citation-friendly facts emitted as schema.org structured data and in
+        the <code>/llms.txt</code> summary. AI assistants quote these directly
+        when answering questions about your organization.
+      </p>
+
+      <div className="grid grid-cols-2 gap-4">
+        <div className="space-y-1">
+          <label className="text-xs font-medium text-neutral-500">
+            Founded (year)
+          </label>
+          <input
+            type="number"
+            value={foundingYear ?? ""}
+            onChange={(e) => {
+              const v = e.target.value;
+              setFoundingYear(v === "" ? undefined : Number(v));
+            }}
+            min={1800}
+            max={new Date().getFullYear()}
+            placeholder="2018"
+            className={INPUT_CLASS}
+          />
+        </div>
+        <div className="space-y-1">
+          <label className="text-xs font-medium text-neutral-500">
+            Contact Email
+          </label>
+          <input
+            type="email"
+            value={contactEmail}
+            onChange={(e) => setContactEmail(e.target.value)}
+            placeholder="hello@example.com"
+            className={INPUT_CLASS}
+          />
+        </div>
+      </div>
+
+      <div className="grid grid-cols-2 gap-4">
+        <div className="space-y-1">
+          <label className="text-xs font-medium text-neutral-500">
+            City
+          </label>
+          <input
+            type="text"
+            value={addressLocality}
+            onChange={(e) => setAddressLocality(e.target.value)}
+            placeholder="Barcelona"
+            className={INPUT_CLASS}
+          />
+        </div>
+        <div className="space-y-1">
+          <label className="text-xs font-medium text-neutral-500">
+            Country
+          </label>
+          <input
+            type="text"
+            value={addressCountry}
+            onChange={(e) => setAddressCountry(e.target.value)}
+            placeholder="Spain"
+            className={INPUT_CLASS}
+          />
+        </div>
+      </div>
+
+      <div className="space-y-1">
+        <label className="text-xs font-medium text-neutral-500">
+          Areas of Expertise
+        </label>
+        <input
+          type="text"
+          value={keywordsText}
+          onChange={(e) => setKeywordsText(e.target.value)}
+          placeholder="CGI, Motion Graphics, 3D Animation"
+          className={INPUT_CLASS}
+        />
+        <p className="text-xs text-neutral-400">
+          Comma-separated list of services / specialties. Emitted as
+          schema.org knowsAbout — helps LLMs cite you for related queries.
+        </p>
+      </div>
+
+      {/* ============================================================
+          SEARCH ENGINE VERIFICATION
+          ============================================================ */}
+
+      <h3 className={SECTION_TITLE_CLASS}>Search Engine Verification</h3>
+      <p className="text-xs text-neutral-400">
+        Connect your site to free webmaster tools to see how it performs in
+        search. Paste the verification code from each tool below (just the
+        code, not the full <code>&lt;meta&gt;</code> tag).
+      </p>
+
+      <div className="space-y-1">
+        <label className="text-xs font-medium text-neutral-500">
+          Google Search Console
+        </label>
+        <input
+          type="text"
+          value={verGoogle}
+          onChange={(e) => setVerGoogle(e.target.value)}
+          placeholder="abc123-verification-code-from-google"
+          className={INPUT_CLASS}
+        />
+        <p className="text-xs text-neutral-400">
+          From{" "}
+          <a
+            href="https://search.google.com/search-console"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="text-[#3580f9] hover:underline"
+          >
+            Search Console
+          </a>{" "}
+          → Settings → Ownership verification → HTML tag method.
+        </p>
+      </div>
+
+      <div className="space-y-1">
+        <label className="text-xs font-medium text-neutral-500">
+          Bing Webmaster
+        </label>
+        <input
+          type="text"
+          value={verBing}
+          onChange={(e) => setVerBing(e.target.value)}
+          placeholder="abc123-verification-code-from-bing"
+          className={INPUT_CLASS}
+        />
+        <p className="text-xs text-neutral-400">
+          From{" "}
+          <a
+            href="https://www.bing.com/webmasters"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="text-[#3580f9] hover:underline"
+          >
+            Bing Webmaster Tools
+          </a>{" "}
+          → Site verification → Meta tag method.
+        </p>
+      </div>
+
+      {/* ============================================================
+          SAVE
+          ============================================================ */}
+
+      <div className="flex justify-end pt-4">
+        <button
+          onClick={handleSave}
+          disabled={saving}
+          className="rounded-lg bg-[#3580f9] px-5 py-2.5 text-sm font-medium text-white hover:bg-[#2d6dd4] transition-colors disabled:opacity-50"
+        >
+          {saving ? "Saving..." : "Save Metadata"}
+        </button>
+      </div>
+    </section>
+  );
+}