@pagebridge/sanity 0.0.1

package/src/components/RefreshQueueTool.tsx

@@ -0,0 +1,196 @@
+import { useClient } from "sanity";
+import {
+  Card,
+  Stack,
+  Text,
+  Button,
+  Flex,
+  Badge,
+  Menu,
+  MenuButton,
+  MenuItem,
+  type BadgeTone,
+} from "@sanity/ui";
+import {
+  EllipsisVerticalIcon,
+  CheckmarkIcon,
+  ClockIcon,
+  CloseIcon,
+} from "@sanity/icons";
+import { useEffect, useState, useCallback } from "react";
+
+interface RefreshTask {
+  _id: string;
+  reason: "position_decay" | "low_ctr" | "impressions_drop" | "manual";
+  severity: "low" | "medium" | "high";
+  status: string;
+  snoozedUntil?: string;
+  metrics?: {
+    positionBefore?: number;
+    positionNow?: number;
+    positionDelta?: number;
+  };
+  documentTitle?: string;
+  documentSlug?: string;
+  createdAt: string;
+}
+
+type FilterType = "open" | "snoozed" | "all";
+
+const severityTone: Record<string, BadgeTone> = {
+  high: "critical",
+  medium: "caution",
+  low: "default",
+};
+
+const reasonLabels: Record<string, string> = {
+  position_decay: "Position Drop",
+  low_ctr: "Low CTR",
+  impressions_drop: "Traffic Drop",
+  manual: "Manual",
+};
+
+export function RefreshQueueTool() {
+  const client = useClient({ apiVersion: "2024-01-01" });
+  const [tasks, setTasks] = useState<RefreshTask[]>([]);
+  const [filter, setFilter] = useState<FilterType>("open");
+
+  const fetchTasks = useCallback(async () => {
+    const query =
+      filter === "all"
+        ? `*[_type == "gscRefreshTask" && status != "done" && status != "dismissed"]`
+        : `*[_type == "gscRefreshTask" && status == $status]`;
+
+    const results = await client.fetch<RefreshTask[]>(
+      `${query} | order(severity desc, createdAt desc) {
+        _id,
+        reason,
+        severity,
+        status,
+        snoozedUntil,
+        metrics,
+        "documentTitle": linkedDocument->title,
+        "documentSlug": linkedDocument->slug.current,
+        createdAt
+      }`,
+      { status: filter },
+    );
+    setTasks(results);
+  }, [filter, client]);
+
+  useEffect(() => {
+    fetchTasks();
+  }, [fetchTasks]);
+
+  const updateStatus = async (
+    taskId: string,
+    status: string,
+    snoozeDays?: number,
+  ) => {
+    const patch: Record<string, unknown> = { status };
+
+    if (status === "snoozed" && snoozeDays) {
+      const until = new Date();
+      until.setDate(until.getDate() + snoozeDays);
+      patch.snoozedUntil = until.toISOString();
+    }
+
+    if (status === "done") {
+      patch.resolvedAt = new Date().toISOString();
+    }
+
+    await client.patch(taskId).set(patch).commit();
+    setTasks((prev) =>
+      prev.filter((t) => t._id !== taskId || status === filter),
+    );
+  };
+
+  return (
+    <Card padding={4}>
+      <Stack space={4}>
+        <Flex justify="space-between" align="center">
+          <Text size={3} weight="semibold">
+            Content Refresh Queue
+          </Text>
+          <Flex gap={2}>
+            {(["open", "snoozed", "all"] as const).map((f) => (
+              <Button
+                key={f}
+                mode={filter === f ? "default" : "ghost"}
+                text={f.charAt(0).toUpperCase() + f.slice(1)}
+                onClick={() => setFilter(f)}
+                fontSize={1}
+              />
+            ))}
+          </Flex>
+        </Flex>
+
+        {tasks.length === 0 ? (
+          <Card padding={5} tone="positive" radius={2}>
+            <Text align="center">🎉 No pending refresh tasks!</Text>
+          </Card>
+        ) : (
+          <Stack space={2}>
+            {tasks.map((task) => (
+              <Card key={task._id} padding={3} radius={2} shadow={1}>
+                <Flex justify="space-between" align="flex-start">
+                  <Stack space={2} style={{ flex: 1 }}>
+                    <Flex gap={2} align="center">
+                      <Badge tone={severityTone[task.severity]}>
+                        {task.severity}
+                      </Badge>
+                      <Badge>{reasonLabels[task.reason]}</Badge>
+                    </Flex>
+                    <Text weight="semibold">
+                      {task.documentTitle || "Untitled"}
+                    </Text>
+                    <Text size={1} muted>
+                      /{task.documentSlug}
+                    </Text>
+                    {task.metrics && (
+                      <Text size={1} muted>
+                        Position: {task.metrics.positionBefore?.toFixed(1)} →{" "}
+                        {task.metrics.positionNow?.toFixed(1)} (
+                        {(task.metrics.positionDelta ?? 0) > 0 ? "+" : ""}
+                        {task.metrics.positionDelta?.toFixed(1)})
+                      </Text>
+                    )}
+                  </Stack>
+                  <MenuButton
+                    button={<Button icon={EllipsisVerticalIcon} mode="ghost" />}
+                    id={`menu-${task._id}`}
+                    menu={
+                      <Menu>
+                        <MenuItem
+                          icon={CheckmarkIcon}
+                          text="Mark as Done"
+                          onClick={() => updateStatus(task._id, "done")}
+                        />
+                        <MenuItem
+                          icon={ClockIcon}
+                          text="Snooze 7 days"
+                          onClick={() => updateStatus(task._id, "snoozed", 7)}
+                        />
+                        <MenuItem
+                          icon={ClockIcon}
+                          text="Snooze 30 days"
+                          onClick={() => updateStatus(task._id, "snoozed", 30)}
+                        />
+                        <MenuItem
+                          icon={CloseIcon}
+                          text="Dismiss"
+                          tone="critical"
+                          onClick={() => updateStatus(task._id, "dismissed")}
+                        />
+                      </Menu>
+                    }
+                  />
+                </Flex>
+              </Card>
+            ))}
+          </Stack>
+        )}
+      </Stack>
+    </Card>
+  );
+}

package/src/components/SearchPerformancePane.tsx

@@ -0,0 +1,237 @@
+import { useEffect, useState } from "react";
+import { useClient } from "sanity";
+import { Card, Stack, Text, Badge, Flex, Box, Spinner, Tooltip } from "@sanity/ui";
+import { ArrowUpIcon, ArrowDownIcon, ArrowRightIcon, CheckmarkCircleIcon, CloseCircleIcon, WarningOutlineIcon } from "@sanity/icons";
+
+interface IndexStatus {
+  verdict: "indexed" | "not_indexed" | "excluded";
+  coverageState: string | null;
+  lastCrawlTime: string | null;
+}
+
+interface PerformanceData {
+  clicks: number;
+  impressions: number;
+  ctr: number;
+  position: number;
+  positionDelta: number;
+  topQueries: { query: string; clicks: number; position: number }[];
+  lastUpdated: string;
+  indexStatus?: IndexStatus;
+}
+
+interface SearchPerformancePaneProps {
+  documentId: string;
+}
+
+export function SearchPerformancePane({
+  documentId,
+}: SearchPerformancePaneProps) {
+  const client = useClient({ apiVersion: "2024-01-01" });
+  const [data, setData] = useState<PerformanceData | undefined>(undefined);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    async function fetchData() {
+      const snapshot = await client.fetch(
+        `*[_type == "gscSnapshot" && linkedDocument._ref == $id && period == "last28"][0]{
+          clicks,
+          impressions,
+          ctr,
+          position,
+          topQueries,
+          fetchedAt,
+          indexStatus
+        }`,
+        { id: documentId },
+      );
+
+      const previousSnapshot = await client.fetch(
+        `*[_type == "gscSnapshot" && linkedDocument._ref == $id && period == "last28"] | order(fetchedAt desc)[1]{
+          position
+        }`,
+        { id: documentId },
+      );
+
+      if (snapshot) {
+        setData({
+          ...snapshot,
+          positionDelta: previousSnapshot
+            ? snapshot.position - previousSnapshot.position
+            : 0,
+          lastUpdated: snapshot.fetchedAt,
+          indexStatus: snapshot.indexStatus,
+        });
+      }
+      setLoading(false);
+    }
+
+    fetchData();
+  }, [documentId, client]);
+
+  if (loading) {
+    return (
+      <Card padding={4}>
+        <Flex justify="center">
+          <Spinner />
+        </Flex>
+      </Card>
+    );
+  }
+
+  if (!data) {
+    return (
+      <Card padding={4} tone="caution">
+        <Text>No search data available for this document.</Text>
+      </Card>
+    );
+  }
+
+  return (
+    <Card padding={4}>
+      <Stack space={4}>
+        <Flex justify="space-between" align="center">
+          <Text weight="semibold" size={2}>
+            Search Performance (Last 28 Days)
+          </Text>
+          {data.indexStatus && <IndexStatusBadge status={data.indexStatus} />}
+        </Flex>
+
+        <Flex gap={3} wrap="wrap">
+          <MetricCard label="Clicks" value={data.clicks.toLocaleString()} />
+          <MetricCard
+            label="Impressions"
+            value={data.impressions.toLocaleString()}
+          />
+          <MetricCard label="CTR" value={`${(data.ctr * 100).toFixed(1)}%`} />
+          <MetricCard
+            label="Avg. Position"
+            value={data.position.toFixed(1)}
+            trend={data.positionDelta}
+            invertTrend
+          />
+        </Flex>
+
+        {data.topQueries?.length > 0 && (
+          <Box>
+            <Text size={1} weight="semibold" muted style={{ marginBottom: 8 }}>
+              Top Queries
+            </Text>
+            <Stack space={2}>
+              {data.topQueries.slice(0, 5).map((q, i) => (
+                <Flex key={i} justify="space-between" align="center">
+                  <Text size={1} style={{ flex: 1 }}>
+                    {q.query}
+                  </Text>
+                  <Text size={1} muted>
+                    {q.clicks} clicks · pos {q.position.toFixed(1)}
+                  </Text>
+                </Flex>
+              ))}
+            </Stack>
+          </Box>
+        )}
+
+        <Text size={0} muted>
+          Last updated: {new Date(data.lastUpdated).toLocaleDateString()}
+        </Text>
+      </Stack>
+    </Card>
+  );
+}
+
+interface MetricCardProps {
+  label: string;
+  value: string;
+  trend?: number;
+  invertTrend?: boolean;
+}
+
+function MetricCard({ label, value, trend, invertTrend }: MetricCardProps) {
+  const TrendIcon =
+    trend === undefined || trend === 0
+      ? ArrowRightIcon
+      : (invertTrend ? trend < 0 : trend > 0)
+        ? ArrowUpIcon
+        : ArrowDownIcon;
+
+  const trendTone =
+    trend === undefined || trend === 0
+      ? "default"
+      : (invertTrend ? trend < 0 : trend > 0)
+        ? "positive"
+        : "critical";
+
+  return (
+    <Card padding={3} radius={2} shadow={1} style={{ minWidth: 100 }}>
+      <Stack space={2}>
+        <Text size={0} muted>
+          {label}
+        </Text>
+        <Flex align="center" gap={2}>
+          <Text size={3} weight="semibold">
+            {value}
+          </Text>
+          {trend !== undefined && trend !== 0 && (
+            <Badge tone={trendTone} fontSize={0}>
+              <TrendIcon />
+              {Math.abs(trend).toFixed(1)}
+            </Badge>
+          )}
+        </Flex>
+      </Stack>
+    </Card>
+  );
+}
+
+interface IndexStatusBadgeProps {
+  status: IndexStatus;
+}
+
+function IndexStatusBadge({ status }: IndexStatusBadgeProps) {
+  const config = {
+    indexed: {
+      tone: "positive" as const,
+      icon: CheckmarkCircleIcon,
+      label: "Indexed",
+    },
+    not_indexed: {
+      tone: "critical" as const,
+      icon: CloseCircleIcon,
+      label: "Not Indexed",
+    },
+    excluded: {
+      tone: "caution" as const,
+      icon: WarningOutlineIcon,
+      label: "Excluded",
+    },
+  };
+
+  const { tone, icon: Icon, label } = config[status.verdict];
+  const tooltipContent = status.coverageState || label;
+
+  return (
+    <Tooltip
+      content={
+        <Box padding={2}>
+          <Stack space={2}>
+            <Text size={1}>{tooltipContent}</Text>
+            {status.lastCrawlTime && (
+              <Text size={0} muted>
+                Last crawled: {new Date(status.lastCrawlTime).toLocaleDateString()}
+              </Text>
+            )}
+          </Stack>
+        </Box>
+      }
+      placement="top"
+    >
+      <Badge tone={tone} fontSize={1} style={{ cursor: "help" }}>
+        <Flex align="center" gap={1}>
+          <Icon />
+          {label}
+        </Flex>
+      </Badge>
+    </Tooltip>
+  );
+}

package/src/index.ts

@@ -0,0 +1,18 @@
+export { SearchPerformancePane } from "./components/SearchPerformancePane";
+export { RefreshQueueTool } from "./components/RefreshQueueTool";
+export {
+  gscPlugin,
+  createGscStructureResolver,
+  createPageBridgeStructure,
+  PAGEBRIDGE_TYPES,
+  type GscPluginConfig,
+} from "./plugin";
+export {
+  gscSite,
+  gscSnapshot,
+  gscRefreshTask,
+  createGscSnapshot,
+  createGscRefreshTask,
+  type GscSnapshotOptions,
+  type GscRefreshTaskOptions,
+} from "./schemas";

package/src/plugin.ts

@@ -0,0 +1,115 @@
+import { definePlugin } from "sanity";
+import type {
+  DefaultDocumentNodeResolver,
+  StructureBuilder,
+} from "sanity/structure";
+import { ChartUpwardIcon, EarthGlobeIcon } from "@sanity/icons";
+import { gscSite } from "./schemas/gscSite";
+import { createGscSnapshot } from "./schemas/gscSnapshot";
+import { createGscRefreshTask } from "./schemas/gscRefreshTask";
+import { RefreshQueueTool } from "./components/RefreshQueueTool";
+import { SearchPerformancePane } from "./components/SearchPerformancePane";
+
+export interface GscPluginConfig {
+  /**
+   * Array of Sanity document type names that represent your content.
+   * These will be available for linking in gscSnapshot and gscRefreshTask schemas.
+   * Example: ['post', 'article', 'page']
+   */
+  contentTypes?: string[];
+}
+
+/** Document type names registered by the PageBridge plugin */
+export const PAGEBRIDGE_TYPES = [
+  "gscSite",
+  "gscSnapshot",
+  "gscRefreshTask",
+] as const;
+
+/**
+ * Creates a "PageBridge" folder list item for the desk structure.
+ * Use with structureTool's `structure` option to group PageBridge
+ * documents into a single folder and filter them from the default list.
+ *
+ * @example
+ * ```ts
+ * structureTool({
+ *   structure: (S, context) =>
+ *     S.list()
+ *       .title("Content")
+ *       .items([
+ *         createPageBridgeStructure(S),
+ *         S.divider(),
+ *         ...S.documentTypeListItems().filter(
+ *           (item) => !PAGEBRIDGE_TYPES.includes(item.getId() as any),
+ *         ),
+ *       ]),
+ * })
+ * ```
+ */
+export const createPageBridgeStructure = (S: StructureBuilder) =>
+  S.listItem()
+    .title("PageBridge")
+    .icon(EarthGlobeIcon)
+    .child(
+      S.list()
+        .title("PageBridge")
+        .items([
+          S.listItem()
+            .title("GSC Sites")
+            .schemaType("gscSite")
+            .child(S.documentTypeList("gscSite").title("GSC Sites")),
+          S.listItem()
+            .title("Snapshots")
+            .schemaType("gscSnapshot")
+            .child(S.documentTypeList("gscSnapshot").title("Snapshots")),
+          S.listItem()
+            .title("Refresh Tasks")
+            .schemaType("gscRefreshTask")
+            .child(
+              S.documentTypeList("gscRefreshTask").title("Refresh Tasks"),
+            ),
+        ]),
+    );
+
+/**
+ * Creates a structure resolver that adds the Performance view to content types
+ * Use this with structureTool's defaultDocumentNode option
+ */
+export const createGscStructureResolver = (
+  contentTypes: string[] = [],
+): DefaultDocumentNodeResolver => {
+  return (S, { schemaType }) => {
+    if (contentTypes.includes(schemaType)) {
+      return S.document().views([
+        S.view.form(),
+        S.view
+          .component(SearchPerformancePane)
+          .title("Performance")
+          .icon(ChartUpwardIcon),
+      ]);
+    }
+    return S.document().views([S.view.form()]);
+  };
+};
+
+export const gscPlugin = definePlugin<GscPluginConfig | void>((config) => {
+  const contentTypes = config?.contentTypes ?? [];
+
+  const gscSnapshot = createGscSnapshot({ contentTypes });
+  const gscRefreshTask = createGscRefreshTask({ contentTypes });
+
+  return {
+    name: "pagebridge-sanity",
+    schema: {
+      types: [gscSite, gscSnapshot, gscRefreshTask],
+    },
+    tools: [
+      {
+        name: "gsc-refresh-queue",
+        title: "Refresh Queue",
+        component: RefreshQueueTool,
+      },
+    ],
+  };
+});