ogthing 0.0.0-alpha.1

package/src/tabs.tsx

@@ -0,0 +1,374 @@
+import { useState } from "react";
+import type { MetaData } from "../server/types";
+import { CheckIcon, CopyIcon, ExternalIcon } from "./icons";
+
+export interface TabItem {
+  id: string;
+  label: string;
+}
+
+export function Tabs({
+  tabs,
+  active,
+  onChange,
+}: {
+  tabs: TabItem[];
+  active: string;
+  onChange: (id: string) => void;
+}) {
+  return (
+    <div className="tabs">
+      {tabs.map((tab) => (
+        <button
+          type="button"
+          key={tab.id}
+          className={`tab ${active === tab.id ? "active" : ""}`}
+          onMouseDown={() => onChange(tab.id)}
+        >
+          {tab.label}
+        </button>
+      ))}
+    </div>
+  );
+}
+
+const Card = ({ title, children }: { title: string; children: React.ReactNode }) => (
+  <section className="card">
+    <div className="card-head">{title}</div>
+    <div className="card-body">{children}</div>
+  </section>
+);
+
+const lengthStatus = (length: number, limit?: number): "ok" | "warn" | "error" => {
+  if (!limit || length <= limit) return "ok";
+  if (length <= limit * 1.2) return "warn";
+  return "error";
+};
+
+const Field = ({
+  label,
+  value,
+  isImage,
+  limit,
+  characterCount,
+  missing,
+}: {
+  label: string;
+  value?: string;
+  isImage?: boolean;
+  limit?: number;
+  characterCount?: boolean;
+  missing?: boolean;
+}) => {
+  const status = value ? lengthStatus(value.length, limit) : "ok";
+  return (
+    <div className="field-row">
+      <div className="field-label">{label}</div>
+      <div className="field-value">
+        {isImage && value ? (
+          <a href={value} target="_blank" rel="noopener noreferrer" className="image-link">
+            <img
+              src={value}
+              alt={label}
+              loading="lazy"
+              onError={(event) => {
+                event.currentTarget.style.display = "none";
+                event.currentTarget.parentElement?.append("unavailable");
+              }}
+            />
+          </a>
+        ) : (
+          <>
+            {value ? <span className="field-text">{value}</span> : <span className="dim">—</span>}
+            {characterCount && value && (
+              <div className={`char-count ${status}`}>
+                {value.length}
+                {limit ? ` / ${limit}` : ""} chars
+              </div>
+            )}
+            {missing && !value && <span className="missing">missing</span>}
+          </>
+        )}
+      </div>
+    </div>
+  );
+};
+
+const LinkPresence = ({ label, url }: { label: string; url?: string }) => (
+  <div className="field-row">
+    <div className="field-label">{label}</div>
+    <div className="field-value">
+      {url ? (
+        <a href={url} target="_blank" rel="noopener noreferrer" className="found">
+          found <ExternalIcon size={10} />
+        </a>
+      ) : (
+        <span className="missing">not found</span>
+      )}
+    </div>
+  </div>
+);
+
+const scoreOf = (metadata: MetaData) => {
+  const checks = [
+    { label: "Title", ok: !!metadata.title },
+    { label: "Title Length", ok: !!metadata.title && metadata.title.length <= 60 },
+    { label: "Description", ok: !!metadata.description },
+    { label: "Desc Length", ok: !!metadata.description && metadata.description.length <= 160 },
+    { label: "OG Title", ok: !!metadata.ogTitle },
+    { label: "OG Description", ok: !!metadata.ogDescription },
+    { label: "OG Image", ok: !!metadata.ogImage },
+    { label: "Twitter Card", ok: !!metadata.twitterCard },
+    { label: "Twitter Image", ok: !!metadata.twitterImage || !!metadata.ogImage },
+    { label: "Canonical", ok: !!metadata.canonical },
+    { label: "Favicon", ok: !!metadata.favicon },
+    { label: "Viewport", ok: !!metadata.viewport },
+    { label: "robots.txt", ok: !!metadata.robotsFile },
+    { label: "sitemap.xml", ok: !!metadata.sitemap },
+  ];
+  return {
+    checks,
+    score: Math.round((checks.filter((check) => check.ok).length / checks.length) * 100),
+  };
+};
+
+export function ScoreTab({ metadata }: { metadata: MetaData }) {
+  const { score, checks } = scoreOf(metadata);
+  const tone = score >= 80 ? "good" : score >= 50 ? "mid" : "bad";
+  const circumference = 2 * Math.PI * 36;
+  const offset = circumference - (score / 100) * circumference;
+
+  return (
+    <div className="score-wrap">
+      <div className={`score-ring ${tone}`}>
+        <svg viewBox="0 0 80 80" aria-hidden="true">
+          <circle cx="40" cy="40" r="36" className="ring-bg" strokeWidth="4" fill="none" />
+          <circle
+            cx="40"
+            cy="40"
+            r="36"
+            className="ring-fg"
+            strokeWidth="4"
+            strokeLinecap="round"
+            fill="none"
+            strokeDasharray={circumference}
+            strokeDashoffset={offset}
+            transform="rotate(-90 40 40)"
+          />
+        </svg>
+        <span className="score-number">{score}</span>
+      </div>
+      <div className="checks-grid">
+        {checks.map((check) => (
+          <div key={check.label} className="check-item">
+            <span className={`dot ${check.ok ? "ok" : "bad"}`} />
+            {check.label}
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+export function BasicTab({ metadata, url }: { metadata: MetaData; url: string }) {
+  const fallbackFavicon =
+    metadata.favicon ||
+    (() => {
+      try {
+        return new URL("/favicon.ico", url).toString();
+      } catch {
+        return "";
+      }
+    })();
+
+  return (
+    <div className="stack">
+      <Card title="Essential">
+        <Field label="Favicon" value={fallbackFavicon} isImage />
+        <Field label="Title" value={metadata.title} characterCount limit={60} missing />
+        <Field
+          label="Description"
+          value={metadata.description}
+          characterCount
+          limit={160}
+          missing
+        />
+        <Field label="Canonical" value={metadata.canonical} />
+        <LinkPresence label="robots.txt" url={metadata.robotsFile} />
+        <LinkPresence label="sitemap.xml" url={metadata.sitemap} />
+      </Card>
+
+      <Card title="Technical">
+        <Field label="Language" value={metadata.language} />
+        <Field label="Charset" value={metadata.charset} />
+        <Field label="Viewport" value={metadata.viewport} />
+        <Field label="Robots" value={metadata.robots} />
+        <Field label="Generator" value={metadata.generator} />
+        <Field label="Theme Color" value={metadata.themeColor} />
+        {metadata.themeColor && (
+          <span
+            className="swatch"
+            style={{ backgroundColor: metadata.themeColor }}
+            aria-hidden="true"
+          />
+        )}
+        <Field
+          label="Status"
+          value={metadata.statusCode ? String(metadata.statusCode) : undefined}
+        />
+      </Card>
+    </div>
+  );
+}
+
+export function OpenGraphTab({ metadata }: { metadata: MetaData }) {
+  return (
+    <Card title="Open Graph">
+      <Field label="Title" value={metadata.ogTitle} characterCount limit={60} missing />
+      <Field
+        label="Description"
+        value={metadata.ogDescription}
+        characterCount
+        limit={160}
+        missing
+      />
+      <Field label="Image" value={metadata.ogImage} isImage missing />
+      {(metadata.ogImageAll?.length ?? 0) > 1 && (
+        <Field label="All Images" value={metadata.ogImageAll?.join("\n")} />
+      )}
+      <Field label="Type" value={metadata.ogType} />
+      <Field label="URL" value={metadata.ogUrl} />
+      <Field label="Site Name" value={metadata.ogSiteName} />
+      <Field label="Locale" value={metadata.ogLocale} />
+    </Card>
+  );
+}
+
+export function TwitterTab({ metadata }: { metadata: MetaData }) {
+  return (
+    <Card title="X Card">
+      <Field label="Card Type" value={metadata.twitterCard} missing />
+      <Field
+        label="Title"
+        value={metadata.twitterTitle || metadata.ogTitle}
+        characterCount
+        limit={70}
+      />
+      <Field
+        label="Description"
+        value={metadata.twitterDescription || metadata.ogDescription}
+        characterCount
+        limit={200}
+      />
+      <Field label="Image" value={metadata.twitterImage} isImage missing />
+      {(metadata.twitterImageAll?.length ?? 0) > 1 && (
+        <Field label="All Images" value={metadata.twitterImageAll?.join("\n")} />
+      )}
+      <Field label="Site" value={metadata.twitterSite} />
+      <Field label="Creator" value={metadata.twitterCreator} />
+    </Card>
+  );
+}
+
+const recommended = {
+  og: { width: 1200, height: 630 },
+  twitter: { width: 1200, height: 600 },
+};
+
+function PreviewImage({ title, url }: { title: string; url: string }) {
+  const [dimensions, setDimensions] = useState<{ width: number; height: number } | null>(null);
+  const [failed, setFailed] = useState(false);
+  const isFavicon = /favicon/i.test(title);
+  const isTwitter = /^x$/i.test(title);
+
+  return (
+    <div className="preview-image-card">
+      <div className="section-label">{title}</div>
+      {failed ? (
+        <span className="dim">unavailable</span>
+      ) : (
+        <>
+          <a href={url} target="_blank" rel="noopener noreferrer">
+            <img
+              src={url}
+              alt={title}
+              className={isFavicon ? "favicon-preview" : ""}
+              loading="lazy"
+              onLoad={(event) =>
+                setDimensions({
+                  width: event.currentTarget.naturalWidth,
+                  height: event.currentTarget.naturalHeight,
+                })
+              }
+              onError={() => setFailed(true)}
+            />
+          </a>
+          {dimensions && !isFavicon && (
+            <div className="dimension-line">
+              <span
+                className={`dot ${
+                  dimensions.width >= recommended.og.width &&
+                  dimensions.height >=
+                    (isTwitter ? recommended.twitter.height : recommended.og.height)
+                    ? "ok"
+                    : "warn"
+                }`}
+              />
+              {dimensions.width} × {dimensions.height}
+              {!isFavicon &&
+                dimensions.width < recommended.og.width &&
+                ` (recommended ${recommended.og.width}×${recommended.og.height})`}
+            </div>
+          )}
+        </>
+      )}
+    </div>
+  );
+}
+
+export function ImagesTab({ metadata }: { metadata: MetaData }) {
+  const hasImages = metadata.ogImage || metadata.twitterImage || metadata.favicon;
+  return (
+    <div className="stack">
+      {metadata.ogImage && <PreviewImage title="Open Graph" url={metadata.ogImage} />}
+      {metadata.twitterImage && metadata.twitterImage !== metadata.ogImage && (
+        <PreviewImage title="X" url={metadata.twitterImage} />
+      )}
+      {metadata.favicon && <PreviewImage title="Favicon" url={metadata.favicon} />}
+      {!hasImages && <div className="empty-note">no images found</div>}
+    </div>
+  );
+}
+
+export function RawTab({ metadata }: { metadata: MetaData }) {
+  const [format, setFormat] = useState<"json" | "html">("json");
+  const [copied, setCopied] = useState(false);
+  const json = JSON.stringify({ ...metadata, htmlTags: undefined }, null, 2);
+  const html = metadata.htmlTags ?? "";
+
+  const copy = () => {
+    navigator.clipboard.writeText(format === "json" ? json : html);
+    setCopied(true);
+    setTimeout(() => setCopied(false), 1500);
+  };
+
+  return (
+    <div>
+      <div className="raw-toolbar">
+        <Tabs
+          tabs={[
+            { id: "json", label: "JSON" },
+            { id: "html", label: "HTML" },
+          ]}
+          active={format}
+          onChange={(id) => setFormat(id as "json" | "html")}
+        />
+        <button type="button" className="copy-button" onClick={copy}>
+          {copied ? <CheckIcon /> : <CopyIcon />}
+          {copied ? "Copied" : "Copy"}
+        </button>
+      </div>
+      <pre className="code-block">{format === "json" ? json : html}</pre>
+    </div>
+  );
+}

package/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

package/tsconfig.json

@@ -0,0 +1,21 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "useDefineForClassFields": true,
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "allowJs": false,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "types": ["node", "bun-types"]
+  },
+  "include": ["src", "server", "vite.config.ts", "tests"]
+}

package/vite.config.ts

@@ -0,0 +1,16 @@
+import react from "@vitejs/plugin-react";
+import { defineConfig } from "vite";
+import { ogthingApi } from "./server/ogthing-api";
+
+export default defineConfig({
+  plugins: [react(), ogthingApi()],
+  server: {
+    host: "127.0.0.1",
+    allowedHosts: true,
+    strictPort: true,
+    watch:
+      process.env.CODEX_SANDBOX === "seatbelt"
+        ? { useFsEvents: false, usePolling: true }
+        : undefined,
+  },
+});