@actuate-media/cms-admin 0.19.0 → 0.21.0

package/src/views/seo/TechnicalTab.tsx

@@ -0,0 +1,315 @@
+'use client'
+
+import { useEffect, useId, useState } from 'react'
+import { RefreshCw, Map, AlertTriangle, CheckCircle2, ExternalLink } from 'lucide-react'
+import * as Switch from '@radix-ui/react-switch'
+import { toast } from 'sonner'
+import {
+  fetchSitemapStatus,
+  regenerateSitemap,
+  fetchCrawlSettings,
+  updateCrawlSettings,
+  fetchRobotsTxt,
+  updateRobotsTxt,
+  validateRobotsTxt,
+  type CrawlSettings,
+} from '../../lib/seo-service.js'
+import {
+  SectionCard,
+  SeoLoading,
+  SeoErrorState,
+  btnPrimary,
+  btnSecondary,
+} from '../../components/seo/primitives.js'
+import { useSeoResource } from './useSeoResource.js'
+
+const CRAWL_TOGGLES: { key: keyof CrawlSettings; label: string; help: string }[] = [
+  {
+    key: 'indexEntireSite',
+    label: 'Index entire site',
+    help: 'Allow search engines to index all public pages.',
+  },
+  {
+    key: 'includeImagesInSitemap',
+    label: 'Include images in sitemap',
+    help: 'Add image entries to the XML sitemap.',
+  },
+  {
+    key: 'includePostsInSitemap',
+    label: 'Include posts in sitemap',
+    help: 'Add published posts to the sitemap.',
+  },
+  {
+    key: 'noindexPaginatedArchives',
+    label: 'No-index paginated archives',
+    help: 'Avoid duplicate-content penalties on page 2+.',
+  },
+  {
+    key: 'noindexTagPages',
+    label: 'No-index tag pages',
+    help: 'Keep thin tag archives out of the index.',
+  },
+]
+
+function Toggle({
+  checked,
+  onChange,
+  label,
+  help,
+  disabled,
+}: {
+  checked: boolean
+  onChange: (v: boolean) => void
+  label: string
+  help: string
+  disabled?: boolean
+}) {
+  const labelId = useId()
+  const helpId = useId()
+  return (
+    <div className="flex items-center justify-between gap-3 py-2.5">
+      <span className="min-w-0">
+        <span id={labelId} className="text-foreground block text-sm font-medium">
+          {label}
+        </span>
+        <span id={helpId} className="text-muted-foreground block text-sm">
+          {help}
+        </span>
+      </span>
+      <Switch.Root
+        checked={checked}
+        onCheckedChange={onChange}
+        disabled={disabled}
+        aria-labelledby={labelId}
+        aria-describedby={helpId}
+        className="bg-input-background data-[state=checked]:bg-primary focus-visible:ring-ring relative h-[18px] w-8 shrink-0 rounded-full transition-colors focus-visible:ring-2 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50"
+      >
+        <Switch.Thumb className="bg-background block h-3.5 w-3.5 translate-x-0.5 rounded-full shadow-sm transition-transform data-[state=checked]:translate-x-[14px]" />
+      </Switch.Root>
+    </div>
+  )
+}
+
+function SitemapCard() {
+  const { data, loading, error, refetch } = useSeoResource(fetchSitemapStatus, [])
+  const [busy, setBusy] = useState(false)
+
+  async function handleRegenerate() {
+    setBusy(true)
+    const res = await regenerateSitemap()
+    setBusy(false)
+    if (res.error) {
+      toast.error(res.error)
+      return
+    }
+    toast.success('Sitemap regenerated.')
+    refetch()
+  }
+
+  return (
+    <SectionCard
+      title="Sitemap"
+      action={
+        <button className={btnSecondary} onClick={handleRegenerate} disabled={busy || loading}>
+          <RefreshCw className={`h-4 w-4 ${busy ? 'animate-spin' : ''}`} aria-hidden />
+          Regenerate
+        </button>
+      }
+    >
+      {loading ? (
+        <SeoLoading label="Loading sitemap status…" />
+      ) : error ? (
+        <SeoErrorState message={error} onRetry={refetch} />
+      ) : !data ? (
+        <p className="text-muted-foreground text-sm">Sitemap status unavailable.</p>
+      ) : (
+        <div className="space-y-3">
+          <a
+            href={data.sitemapUrl}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="text-primary inline-flex items-center gap-1 text-sm hover:underline"
+          >
+            <Map className="h-4 w-4" aria-hidden />
+            {data.sitemapUrl}
+            <ExternalLink className="h-3.5 w-3.5" aria-hidden />
+          </a>
+          <dl className="grid grid-cols-2 gap-3 text-sm">
+            <div>
+              <dt className="text-muted-foreground">Pages included</dt>
+              <dd className="text-foreground font-medium tabular-nums">{data.pagesIncluded}</dd>
+            </div>
+            <div>
+              <dt className="text-muted-foreground">Pages excluded</dt>
+              <dd className="text-foreground font-medium tabular-nums">{data.pagesExcluded}</dd>
+            </div>
+            <div className="col-span-2">
+              <dt className="text-muted-foreground">Last generated</dt>
+              <dd className="text-foreground">
+                {data.lastGeneratedAt ? new Date(data.lastGeneratedAt).toLocaleString() : 'Never'}
+              </dd>
+            </div>
+          </dl>
+          {data.warnings.length > 0 && (
+            <ul className="space-y-1">
+              {data.warnings.map((w, i) => (
+                <li key={i} className="text-warning flex items-center gap-1.5 text-sm">
+                  <AlertTriangle className="h-3.5 w-3.5" aria-hidden /> {w}
+                </li>
+              ))}
+            </ul>
+          )}
+        </div>
+      )}
+    </SectionCard>
+  )
+}
+
+function CrawlCard() {
+  const { data, loading, error, refetch } = useSeoResource(fetchCrawlSettings, [])
+  const [settings, setSettings] = useState<CrawlSettings | null>(null)
+  const [saving, setSaving] = useState(false)
+
+  useEffect(() => {
+    if (data) setSettings(data)
+  }, [data])
+
+  async function save(next: CrawlSettings, changed: keyof CrawlSettings) {
+    setSettings(next)
+    setSaving(true)
+    const res = await updateCrawlSettings({ [changed]: next[changed] })
+    setSaving(false)
+    if (res.error) {
+      toast.error(res.error)
+      refetch()
+    }
+  }
+
+  return (
+    <SectionCard title="Crawl Settings">
+      {loading ? (
+        <SeoLoading label="Loading crawl settings…" />
+      ) : error ? (
+        <SeoErrorState message={error} onRetry={refetch} />
+      ) : !settings ? (
+        <p className="text-muted-foreground text-sm">Crawl settings unavailable.</p>
+      ) : (
+        <div className="divide-border divide-y" aria-busy={saving}>
+          {CRAWL_TOGGLES.map((t) => (
+            <Toggle
+              key={t.key}
+              label={t.label}
+              help={t.help}
+              checked={settings[t.key]}
+              disabled={saving}
+              onChange={(v) => save({ ...settings, [t.key]: v }, t.key)}
+            />
+          ))}
+        </div>
+      )}
+    </SectionCard>
+  )
+}
+
+function RobotsCard() {
+  const { data, loading, error, refetch } = useSeoResource(fetchRobotsTxt, [])
+  const [body, setBody] = useState('')
+  const [saving, setSaving] = useState(false)
+
+  useEffect(() => {
+    if (data) setBody(data.body)
+  }, [data])
+
+  const validation = validateRobotsTxt(body)
+
+  async function handleSave() {
+    setSaving(true)
+    const res = await updateRobotsTxt(body)
+    setSaving(false)
+    if (res.error) {
+      toast.error(res.error)
+      return
+    }
+    toast.success('robots.txt saved.')
+    refetch()
+  }
+
+  return (
+    <SectionCard
+      title="robots.txt"
+      description="Controls which crawlers can access your site."
+      action={
+        <button
+          className={btnPrimary}
+          onClick={handleSave}
+          disabled={saving || loading || !validation.valid}
+        >
+          {saving ? 'Saving…' : 'Save'}
+        </button>
+      }
+    >
+      {loading ? (
+        <SeoLoading label="Loading robots.txt…" />
+      ) : error ? (
+        <SeoErrorState message={error} onRetry={refetch} />
+      ) : (
+        <div className="space-y-3">
+          {validation.blocksEntireSite && (
+            <div
+              className="border-destructive/30 bg-destructive/10 flex items-start gap-2 rounded-md border p-3"
+              role="alert"
+            >
+              <AlertTriangle className="text-destructive mt-0.5 h-4 w-4 shrink-0" aria-hidden />
+              <p className="text-destructive text-sm">
+                This configuration blocks your entire site from all search engines. Pages will be
+                removed from search results.
+              </p>
+            </div>
+          )}
+          <label className="sr-only" htmlFor="robots-editor">
+            robots.txt contents
+          </label>
+          <textarea
+            id="robots-editor"
+            value={body}
+            onChange={(e) => setBody(e.target.value)}
+            spellCheck={false}
+            className="border-border bg-input-background text-foreground focus-visible:ring-ring min-h-48 w-full rounded-md border p-3 font-mono text-sm focus-visible:ring-2 focus-visible:outline-none"
+          />
+          {validation.errors.length > 0 ? (
+            <ul className="space-y-1">
+              {validation.errors.map((e, i) => (
+                <li key={i} className="text-destructive flex items-center gap-1.5 text-sm">
+                  <AlertTriangle className="h-3.5 w-3.5" aria-hidden /> {e}
+                </li>
+              ))}
+            </ul>
+          ) : (
+            <p className="text-success flex items-center gap-1.5 text-sm">
+              <CheckCircle2 className="h-3.5 w-3.5" aria-hidden /> Valid robots.txt
+            </p>
+          )}
+          {validation.warnings
+            .filter((w) => !validation.blocksEntireSite || !w.includes('blocks the entire site'))
+            .map((w, i) => (
+              <p key={i} className="text-warning flex items-center gap-1.5 text-sm">
+                <AlertTriangle className="h-3.5 w-3.5" aria-hidden /> {w}
+              </p>
+            ))}
+        </div>
+      )}
+    </SectionCard>
+  )
+}
+
+export function TechnicalTab() {
+  return (
+    <div className="space-y-4">
+      <div className="grid grid-cols-1 gap-4 lg:grid-cols-2">
+        <SitemapCard />
+        <CrawlCard />
+      </div>
+      <RobotsCard />
+    </div>
+  )
+}

package/src/views/seo/useSeoResource.ts

@@ -0,0 +1,66 @@
+'use client'
+
+/**
+ * Small async-resource hook for the SEO tabs: wraps a service fetcher with
+ * loading / error / data / refetch and abort-on-unmount safety. Keeps each
+ * tab declarative without re-implementing fetch plumbing.
+ */
+import { useCallback, useEffect, useRef, useState } from 'react'
+
+export interface SeoResource<T> {
+  data: T | null
+  loading: boolean
+  error: string | null
+  refetch: () => void
+}
+
+export function useSeoResource<T>(
+  fetcher: () => Promise<T>,
+  deps: ReadonlyArray<unknown> = [],
+): SeoResource<T> {
+  const [data, setData] = useState<T | null>(null)
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState<string | null>(null)
+  // Tracks whether the component is still mounted (guards setState after
+  // unmount). Set once on mount; never toggled by dependency-driven reloads.
+  const mountedRef = useRef(true)
+  // Monotonic id of the most recently *started* request. A response is only
+  // applied when its id still matches — otherwise a slow earlier request that
+  // resolves after a faster later one (rapid filter switches) would clobber
+  // the newer, correct data.
+  const requestIdRef = useRef(0)
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  const stableFetcher = useCallback(fetcher, deps)
+
+  const load = useCallback(async () => {
+    const requestId = ++requestIdRef.current
+    const isCurrent = () => mountedRef.current && requestId === requestIdRef.current
+    setLoading(true)
+    setError(null)
+    try {
+      const result = await stableFetcher()
+      if (isCurrent()) setData(result)
+    } catch (err) {
+      if (isCurrent()) {
+        setError(err instanceof Error ? err.message : 'Failed to load data')
+      }
+    } finally {
+      if (isCurrent()) setLoading(false)
+    }
+  }, [stableFetcher])
+
+  // Mount/unmount guard only — independent of `load` so a dependency change
+  // (which recreates `load`) never flips `mountedRef` to false mid-flight.
+  useEffect(() => {
+    mountedRef.current = true
+    return () => {
+      mountedRef.current = false
+    }
+  }, [])
+
+  useEffect(() => {
+    load()
+  }, [load])
+
+  return { data, loading, error, refetch: load }
+}