ogthing 0.0.0-alpha.1

package/src/App.tsx

@@ -0,0 +1,311 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+import type { MetaData, UaMode } from "../server/types";
+import { ArrowIcon, BatIcon, CloseIcon, MoonIcon, RefreshIcon, SunIcon } from "./icons";
+import { PreviewsTab } from "./previews";
+import { BasicTab, ImagesTab, OpenGraphTab, RawTab, ScoreTab, TwitterTab, Tabs } from "./tabs";
+
+const HISTORY_KEY = "ogthing_history";
+const THEME_KEY = "ogthing_theme";
+const HISTORY_MAX = 5;
+
+const mainTabs = [
+  { id: "score", label: "Score" },
+  { id: "previews", label: "Previews" },
+  { id: "basic", label: "Basic" },
+  { id: "opengraph", label: "Open Graph" },
+  { id: "twitter", label: "X" },
+  { id: "images", label: "Images" },
+  { id: "raw", label: "Raw" },
+];
+
+const uaOptions: { id: UaMode; label: string }[] = [
+  { id: "browser", label: "browser" },
+  { id: "facebook", label: "facebookbot" },
+  { id: "twitter", label: "twitterbot" },
+  { id: "slack", label: "slackbot" },
+  { id: "discord", label: "discordbot" },
+  { id: "telegram", label: "telegrambot" },
+  { id: "whatsapp", label: "whatsapp" },
+  { id: "linkedin", label: "linkedinbot" },
+];
+
+const suggestions = ["localhost:3000", "localhost:4321", "localhost:8080", "example.com"];
+
+const addHistory = (url: string) => {
+  const history = getHistory().filter((entry) => entry !== url);
+  localStorage.setItem(HISTORY_KEY, JSON.stringify([url, ...history].slice(0, HISTORY_MAX)));
+};
+
+const getHistory = (): string[] => {
+  try {
+    const stored = localStorage.getItem(HISTORY_KEY);
+    return stored ? (JSON.parse(stored) as string[]) : [];
+  } catch {
+    return [];
+  }
+};
+
+export default function App() {
+  const [url, setUrl] = useState("");
+  const [metadata, setMetadata] = useState<MetaData | null>(null);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState("");
+  const [activeTab, setActiveTab] = useState("score");
+  const [uaMode, setUaMode] = useState<UaMode>("browser");
+  const [history, setHistory] = useState<string[]>([]);
+  const [theme, setTheme] = useState<"dark" | "light">(() => {
+    const stored = localStorage.getItem(THEME_KEY);
+    if (stored === "light" || stored === "dark") return stored;
+    return window.matchMedia("(prefers-color-scheme: light)").matches ? "light" : "dark";
+  });
+  const fetchToken = useRef(0);
+
+  useEffect(() => {
+    document.documentElement.classList.toggle("light", theme === "light");
+    localStorage.setItem(THEME_KEY, theme);
+  }, [theme]);
+
+  useEffect(() => setHistory(getHistory()), []);
+
+  useEffect(() => {
+    const param = new URLSearchParams(window.location.search).get("url");
+    if (param) {
+      setUrl(param);
+      void fetchMetadata(param, "browser");
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  const fetchMetadata = useCallback(async (target: string, mode: UaMode) => {
+    if (!target.trim()) return;
+    const token = ++fetchToken.current;
+    setLoading(true);
+    setError("");
+    setMetadata(null);
+    try {
+      const response = await fetch(
+        `/api/metadata?url=${encodeURIComponent(target)}&full=true&ua=${mode}`,
+      );
+      const data = (await response.json()) as MetaData & { error?: string };
+      if (token !== fetchToken.current) return;
+      if (!response.ok || data.error) {
+        setError(data.error || `the request failed with ${response.status}`);
+        return;
+      }
+      setMetadata(data);
+      setActiveTab("score");
+    } catch {
+      if (token === fetchToken.current) setError("could not reach the ogthing server");
+    } finally {
+      if (token === fetchToken.current) setLoading(false);
+    }
+  }, []);
+
+  const inspect = (value: string) => {
+    let formatted = value.trim();
+    if (!formatted) return;
+    if (!/^https?:\/\//i.test(formatted) && !/^localhost[:/]/i.test(formatted))
+      formatted = `https://${formatted}`;
+    else if (/^localhost[:/]/i.test(formatted)) formatted = `http://${formatted}`;
+
+    setUrl(formatted);
+    window.history.replaceState(null, "", `?url=${encodeURIComponent(formatted)}`);
+    void fetchMetadata(formatted, uaMode);
+    addHistory(formatted);
+    setHistory(getHistory());
+  };
+
+  const clear = () => {
+    setUrl("");
+    setMetadata(null);
+    setError("");
+    window.history.replaceState(null, "", "/");
+  };
+
+  useEffect(() => {
+    const handler = (event: KeyboardEvent) => {
+      if (event.target instanceof HTMLInputElement) return;
+      if (!metadata) return;
+      const index = Number(event.key) - 1;
+      if (index >= 0 && index < mainTabs.length) {
+        event.preventDefault();
+        setActiveTab(mainTabs[index].id);
+      }
+    };
+    window.addEventListener("keydown", handler);
+    return () => window.removeEventListener("keydown", handler);
+  }, [metadata]);
+
+  const showLanding = !metadata && !loading;
+
+  return (
+    <div className="page">
+      <header className="topbar">
+        <div className="brand">
+          <BatIcon size={16} />
+          <span>ogthing</span>
+        </div>
+        <div className="topbar-right">
+          <span className="local-badge">runs on your device · localhost just works</span>
+          <button
+            type="button"
+            className="icon-button"
+            aria-label="Toggle theme"
+            onClick={() => setTheme(theme === "dark" ? "light" : "dark")}
+          >
+            {theme === "dark" ? <SunIcon /> : <MoonIcon />}
+          </button>
+        </div>
+      </header>
+
+      <main className="content">
+        <div className={`landing ${showLanding ? "" : "collapsed"}`}>
+          <div>
+            <h1 className="hero">metadata</h1>
+            <p className="subline">
+              see how a link previews on social platforms. it runs on your machine, so localhost
+              urls work with no tunnel.
+            </p>
+          </div>
+        </div>
+
+        <form
+          className="url-form"
+          onSubmit={(event) => {
+            event.preventDefault();
+            inspect(url);
+          }}
+        >
+          <select
+            className="ua-select"
+            value={uaMode}
+            aria-label="User agent"
+            onChange={(event) => {
+              const mode = event.target.value as UaMode;
+              setUaMode(mode);
+              if (url && metadata) void fetchMetadata(url, mode);
+            }}
+          >
+            {uaOptions.map((option) => (
+              <option key={option.id} value={option.id}>
+                {option.label}
+              </option>
+            ))}
+          </select>
+          <input
+            className="url-input"
+            placeholder="Enter URL"
+            value={url}
+            autoComplete="off"
+            spellCheck={false}
+            onChange={(event) => setUrl(event.target.value)}
+          />
+          <div className="url-actions">
+            {loading ? (
+              <span className="spinner" />
+            ) : (
+              <>
+                {(url || metadata) && (
+                  <button
+                    type="button"
+                    className="icon-button"
+                    onMouseDown={clear}
+                    aria-label="Clear"
+                  >
+                    <CloseIcon />
+                  </button>
+                )}
+                {metadata && (
+                  <button
+                    type="button"
+                    className="icon-button"
+                    onMouseDown={() => void fetchMetadata(url, uaMode)}
+                    aria-label="Refresh"
+                  >
+                    <RefreshIcon />
+                  </button>
+                )}
+                {url && !metadata && (
+                  <button type="submit" className="icon-button accent" aria-label="Inspect">
+                    <ArrowIcon />
+                  </button>
+                )}
+              </>
+            )}
+          </div>
+        </form>
+
+        {error && <div className="error">{error}</div>}
+        {loading && !metadata && <div className="status-line">fetching…</div>}
+
+        <div className={`landing ${showLanding ? "" : "collapsed"}`}>
+          <div>
+            <div className="try-row">
+              <div className="section-label">Try these</div>
+              <div className="chip-row">
+                {suggestions.map((suggestion) => (
+                  <button
+                    type="button"
+                    key={suggestion}
+                    className="chip"
+                    onMouseDown={() => inspect(suggestion)}
+                  >
+                    ↘ {suggestion}
+                  </button>
+                ))}
+              </div>
+            </div>
+            {history.length > 0 && (
+              <div className="try-row">
+                <div className="section-label-row">
+                  <span className="section-label">Recent</span>
+                  <button
+                    type="button"
+                    className="link-button"
+                    onMouseDown={() => {
+                      localStorage.removeItem(HISTORY_KEY);
+                      setHistory([]);
+                    }}
+                  >
+                    clear
+                  </button>
+                </div>
+                <div className="chip-row">
+                  {history.map((entry) => (
+                    <button
+                      type="button"
+                      key={entry}
+                      className="chip"
+                      onMouseDown={() => inspect(entry)}
+                    >
+                      ↘ {entry}
+                    </button>
+                  ))}
+                </div>
+              </div>
+            )}
+          </div>
+        </div>
+
+        {metadata && (
+          <div className="results">
+            <Tabs tabs={mainTabs} active={activeTab} onChange={setActiveTab} />
+            <div className="tab-body">
+              {mainTabs.map((tab) => (
+                <div key={tab.id} className={activeTab === tab.id ? "" : "hidden"}>
+                  {tab.id === "score" && <ScoreTab metadata={metadata} />}
+                  {tab.id === "previews" && <PreviewsTab metadata={metadata} url={url} />}
+                  {tab.id === "basic" && <BasicTab metadata={metadata} url={url} />}
+                  {tab.id === "opengraph" && <OpenGraphTab metadata={metadata} />}
+                  {tab.id === "twitter" && <TwitterTab metadata={metadata} />}
+                  {tab.id === "images" && <ImagesTab metadata={metadata} />}
+                  {tab.id === "raw" && <RawTab metadata={metadata} />}
+                </div>
+              ))}
+            </div>
+          </div>
+        )}
+      </main>
+    </div>
+  );
+}

package/src/icons.tsx

@@ -0,0 +1,84 @@
+interface IconProps {
+  size?: number;
+}
+
+const base = (size?: number) => ({
+  width: size ?? 14,
+  height: size ?? 14,
+  viewBox: "0 0 24 24",
+  fill: "none",
+  stroke: "currentColor",
+  strokeWidth: 2,
+  strokeLinecap: "round" as const,
+  strokeLinejoin: "round" as const,
+  "aria-hidden": true,
+});
+
+export const CloseIcon = ({ size }: IconProps) => (
+  <svg {...base(size)}>
+    <path d="M18 6 6 18M6 6l12 12" />
+  </svg>
+);
+
+export const RefreshIcon = ({ size }: IconProps) => (
+  <svg {...base(size)}>
+    <path d="M21 12a9 9 0 1 1-2.64-6.36" />
+    <path d="M21 3v6h-6" />
+  </svg>
+);
+
+export const ArrowIcon = ({ size }: IconProps) => (
+  <svg {...base(size)}>
+    <path d="M5 12h14M12 5l7 7-7 7" />
+  </svg>
+);
+
+export const CopyIcon = ({ size }: IconProps) => (
+  <svg {...base(size)}>
+    <rect x="9" y="9" width="13" height="13" rx="2" />
+    <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" />
+  </svg>
+);
+
+export const CheckIcon = ({ size }: IconProps) => (
+  <svg {...base(size)}>
+    <path d="m20 6-11 11-5-5" />
+  </svg>
+);
+
+export const ExternalIcon = ({ size }: IconProps) => (
+  <svg {...base(size)}>
+    <path d="M15 3h6v6" />
+    <path d="M10 14 21 3" />
+    <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" />
+  </svg>
+);
+
+export const SunIcon = ({ size }: IconProps) => (
+  <svg {...base(size)}>
+    <circle cx="12" cy="12" r="4" />
+    <path d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M6.34 17.66l-1.41 1.41M19.07 4.93l-1.41 1.41" />
+  </svg>
+);
+
+export const MoonIcon = ({ size }: IconProps) => (
+  <svg {...base(size)}>
+    <path d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z" />
+  </svg>
+);
+
+export const ChevronIcon = ({ size }: IconProps) => (
+  <svg {...base(size)}>
+    <path d="m6 9 6 6 6-6" />
+  </svg>
+);
+
+export const BatIcon = ({ size }: IconProps) => (
+  <svg {...base(size)} viewBox="0 0 24 24">
+    <path
+      d="M12 3c.5 2 1.8 3.4 4 4-1 1.2-1.3 2.4-1 4 1.5-.8 3.4-.7 5 .5-1.6.4-2.6 1.3-3 3-1.2-1-2.5-1.3-4-.8L12 16l-1-2.3c-1.5-.5-2.8-.2-4 .8-.4-1.7-1.4-2.6-3-3 1.6-1.2 3.5-1.3 5-.5.3-1.6 0-2.8-1-4 2.2-.6 3.5-2 4-4Z"
+      fill="currentColor"
+      stroke="none"
+    />
+  </svg>
+);

package/src/main.tsx

@@ -0,0 +1,10 @@
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import App from "./App";
+import "./styles.css";
+
+createRoot(document.getElementById("root")!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+);

package/src/previews.tsx

@@ -0,0 +1,242 @@
+import { useState } from "react";
+import type { MetaData } from "../server/types";
+import { ExternalIcon } from "./icons";
+import { Tabs } from "./tabs";
+
+interface PreviewProps {
+  metadata: MetaData;
+  url: string;
+}
+
+const hostOf = (url: string) => {
+  try {
+    return new URL(url).host;
+  } catch {
+    return url.replace(/^https?:\/\//, "").split("/")[0];
+  }
+};
+
+const nocache = (url: string) =>
+  url ? `${url}${url.includes("?") ? "&" : "?"}_t=${Date.now()}` : url;
+
+const hideOnError = (event: React.SyntheticEvent<HTMLImageElement>) => {
+  event.currentTarget.style.display = "none";
+};
+
+const TelegramPreview = ({ metadata, url }: PreviewProps) => {
+  const title = metadata.ogTitle || metadata.title || url;
+  const description = metadata.ogDescription || metadata.description || "";
+  const image = metadata.ogImage || metadata.twitterImage || "";
+  const truncated = description.length > 120 ? `${description.slice(0, 120)}…` : description;
+
+  return (
+    <div className="pv pv-telegram">
+      <div className="pv-telegram-url">{url}</div>
+      <div className="pv-telegram-body">
+        <div className="pv-title-sm">{title}</div>
+        <div className="pv-desc-xs">{truncated}</div>
+      </div>
+      {image && (
+        <img src={nocache(image)} alt={title} className="pv-img-cover tall" onError={hideOnError} />
+      )}
+    </div>
+  );
+};
+
+const DiscordPreview = ({ metadata, url }: PreviewProps) => {
+  const title = metadata.ogTitle || metadata.title || url;
+  const description = metadata.ogDescription || metadata.description || "";
+  const image = metadata.ogImage || metadata.twitterImage || "";
+
+  return (
+    <div className="pv pv-discord">
+      <div className="pv-accent">
+        {image && (
+          <img src={nocache(image)} alt={title} className="pv-img-rounded" onError={hideOnError} />
+        )}
+        <div className="pv-title">{title}</div>
+        <div className="pv-desc-clamp">{description}</div>
+        <div className="pv-host">
+          {hostOf(url)}
+          <ExternalIcon size={12} />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+const SlackPreview = ({ metadata, url }: PreviewProps) => {
+  const title = metadata.ogTitle || metadata.title || url;
+  const description = metadata.ogDescription || metadata.description || "";
+  const image = metadata.ogImage || metadata.twitterImage || "";
+
+  return (
+    <div className="pv pv-slack">
+      <div className="pv-accent slack">
+        <div className="pv-title-sm">{title}</div>
+        <div className="pv-desc-clamp xs">{description}</div>
+        {image && (
+          <img src={nocache(image)} alt={title} className="pv-img-inline" onError={hideOnError} />
+        )}
+        <div className="pv-host">
+          {hostOf(url)}
+          <ExternalIcon size={12} />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+const WhatsAppPreview = ({ metadata, url }: PreviewProps) => {
+  const title = metadata.ogTitle || metadata.title || url;
+  const description = metadata.ogDescription || metadata.description || "";
+  const image = metadata.ogImage || metadata.twitterImage || "";
+
+  return (
+    <div className="pv pv-whatsapp">
+      <div className="pv-bordered">
+        {image && (
+          <img
+            src={nocache(image)}
+            alt={title}
+            className="pv-img-cover medium"
+            onError={hideOnError}
+          />
+        )}
+        <div className="pv-padded">
+          <div className="pv-title clamp1">{title}</div>
+          <div className="pv-desc-xs clamp2">{description}</div>
+          <div className="pv-host-dim">{hostOf(url)}</div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+const FacebookPreview = ({ metadata, url }: PreviewProps) => {
+  const title = metadata.ogTitle || metadata.title || url;
+  const description = metadata.ogDescription || metadata.description || "";
+  const image = metadata.ogImage || metadata.twitterImage || "";
+
+  return (
+    <div className="pv pv-facebook">
+      <div className="pv-bordered shadowed">
+        {image && (
+          <img
+            src={nocache(image)}
+            alt={title}
+            className="pv-img-cover medium"
+            onError={hideOnError}
+          />
+        )}
+        <div className="pv-padded">
+          <div className="pv-host-caps">{hostOf(url)}</div>
+          <div className="pv-title-sm clamp1">{title}</div>
+          <div className="pv-desc-xs clamp2">{description}</div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+const LinkedInPreview = ({ metadata, url }: PreviewProps) => {
+  const title = metadata.ogTitle || metadata.title || url;
+  const description = metadata.ogDescription || metadata.description || "";
+  const image = metadata.ogImage || metadata.twitterImage || "";
+
+  return (
+    <div className="pv pv-linkedin">
+      <div className="pv-bordered">
+        {image && (
+          <img
+            src={nocache(image)}
+            alt={title}
+            className="pv-img-cover medium"
+            onError={hideOnError}
+          />
+        )}
+        <div className="pv-padded">
+          <div className="pv-host-caps">{hostOf(url)}</div>
+          <div className="pv-title-sm clamp1">{title}</div>
+          <div className="pv-desc-xs clamp2">{description}</div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+const XPreview = ({ metadata, url }: PreviewProps) => {
+  const title = metadata.twitterTitle || metadata.ogTitle || metadata.title || url;
+  const description =
+    metadata.twitterDescription || metadata.ogDescription || metadata.description || "";
+  const image = metadata.twitterImage || metadata.ogImage || "";
+  const largeCard =
+    metadata.twitterCard !== "summary" &&
+    (metadata.twitterCard === "summary_large_image" || !!image);
+
+  if (!largeCard) {
+    return (
+      <div className="pv-x small">
+        {image ? (
+          <img src={nocache(image)} alt={title} onError={hideOnError} />
+        ) : (
+          <div className="x-fallback">no image</div>
+        )}
+        <div className="x-body">
+          <div className="x-host">{hostOf(url)}</div>
+          <div className="x-title clamp1">{title}</div>
+          <div className="x-desc clamp2">{description}</div>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="pv-x large">
+      {image && (
+        <div className="x-hero">
+          <img src={nocache(image)} alt={title} onError={hideOnError} />
+          <span className="x-overlay clamp1">{title}</span>
+        </div>
+      )}
+      {!image && (
+        <div className="x-body padded">
+          <div className="x-host">{hostOf(url)}</div>
+          <div className="x-title">{title}</div>
+          <div className="x-desc clamp2">{description}</div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+const platforms = [
+  { id: "telegram", label: "Telegram", Component: TelegramPreview },
+  { id: "discord", label: "Discord", Component: DiscordPreview },
+  { id: "slack", label: "Slack", Component: SlackPreview },
+  { id: "twitter", label: "X", Component: XPreview },
+  { id: "facebook", label: "Facebook", Component: FacebookPreview },
+  { id: "linkedin", label: "LinkedIn", Component: LinkedInPreview },
+  { id: "whatsapp", label: "WhatsApp", Component: WhatsAppPreview },
+];
+
+export function PreviewsTab({ metadata, url }: PreviewProps) {
+  const [platform, setPlatform] = useState("telegram");
+
+  return (
+    <div>
+      <Tabs
+        tabs={platforms.map((p) => ({ id: p.id, label: p.label }))}
+        active={platform}
+        onChange={setPlatform}
+      />
+      <div className="preview-stage">
+        {platforms.map(({ id, Component }) => (
+          <div key={id} className={platform === id ? "" : "hidden"}>
+            <Component metadata={metadata} url={url} />
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}