@geenius/seo 0.1.0

package/packages/solidjs/src/components/BreadcrumbsJsonLd.tsx

@@ -0,0 +1,24 @@
+import { createEffect } from 'solid-js'
+import { breadcrumbSchema } from '@geenius-seo/shared'
+
+interface BreadcrumbsJsonLdProps {
+  items: {
+    name: string
+    url: string
+  }[]
+}
+
+export function BreadcrumbsJsonLd(props: BreadcrumbsJsonLdProps) {
+  createEffect(() => {
+    const script = document.createElement('script')
+    script.type = 'application/ld+json'
+    script.textContent = JSON.stringify(breadcrumbSchema(props.items))
+    document.head.appendChild(script)
+
+    return () => {
+      document.head.removeChild(script)
+    }
+  })
+
+  return null
+}

package/packages/solidjs/src/components/MetaEditor.tsx

@@ -0,0 +1,155 @@
+import { createSignal } from 'solid-js'
+import type { SEOMeta } from '@geenius-seo/shared'
+
+interface MetaEditorProps {
+  meta: SEOMeta
+  onChange: (meta: SEOMeta) => void
+}
+
+export function MetaEditor(props: MetaEditorProps) {
+  const [localMeta, setLocalMeta] = createSignal(props.meta)
+
+  const handleChange = (updates: Partial<SEOMeta>) => {
+    const updated = { ...localMeta(), ...updates }
+    setLocalMeta(updated)
+    props.onChange(updated)
+  }
+
+  return (
+    <div class="space-y-6 p-4 border border-gray-200 rounded">
+      {/* Title */}
+      <div>
+        <label class="block text-sm font-semibold text-gray-900 mb-1">
+          Title {localMeta().title.length}/60
+        </label>
+        <input
+          type="text"
+          value={localMeta().title}
+          onInput={(e) =>
+            handleChange({
+              title: e.currentTarget.value.slice(0, 60),
+            })
+          }
+          class="w-full px-3 py-2 border border-gray-300 rounded text-sm"
+          placeholder="Page title"
+        />
+        <p class="text-xs text-gray-500 mt-1">
+          {localMeta().title.length < 30
+            ? 'Too short'
+            : localMeta().title.length > 60
+              ? 'Too long'
+              : 'Good length'}
+        </p>
+      </div>
+
+      {/* Description */}
+      <div>
+        <label class="block text-sm font-semibold text-gray-900 mb-1">
+          Description {localMeta().description.length}/160
+        </label>
+        <textarea
+          value={localMeta().description}
+          onInput={(e) =>
+            handleChange({
+              description: e.currentTarget.value.slice(0, 160),
+            })
+          }
+          class="w-full px-3 py-2 border border-gray-300 rounded text-sm"
+          rows={3}
+          placeholder="Page description"
+        />
+        <p class="text-xs text-gray-500 mt-1">
+          {localMeta().description.length < 50
+            ? 'Too short'
+            : localMeta().description.length > 160
+              ? 'Too long'
+              : 'Good length'}
+        </p>
+      </div>
+
+      {/* Keywords */}
+      <div>
+        <label class="block text-sm font-semibold text-gray-900 mb-1">Keywords</label>
+        <input
+          type="text"
+          value={localMeta().keywords.join(', ')}
+          onInput={(e) =>
+            handleChange({
+              keywords: e.currentTarget.value.split(',').map((k) => k.trim()),
+            })
+          }
+          class="w-full px-3 py-2 border border-gray-300 rounded text-sm"
+          placeholder="keyword1, keyword2, keyword3"
+        />
+      </div>
+
+      {/* Canonical */}
+      <div>
+        <label class="block text-sm font-semibold text-gray-900 mb-1">Canonical URL</label>
+        <input
+          type="url"
+          value={localMeta().canonical || ''}
+          onInput={(e) =>
+            handleChange({
+              canonical: e.currentTarget.value,
+            })
+          }
+          class="w-full px-3 py-2 border border-gray-300 rounded text-sm"
+          placeholder="https://example.com/page"
+        />
+      </div>
+
+      {/* OG Image */}
+      <div>
+        <label class="block text-sm font-semibold text-gray-900 mb-1">OG Image URL</label>
+        <input
+          type="url"
+          value={localMeta().og.image || ''}
+          onInput={(e) =>
+            handleChange({
+              og: { ...localMeta().og, image: e.currentTarget.value },
+            })
+          }
+          class="w-full px-3 py-2 border border-gray-300 rounded text-sm"
+          placeholder="https://example.com/image.jpg"
+        />
+      </div>
+
+      {/* Twitter Card */}
+      <div>
+        <label class="block text-sm font-semibold text-gray-900 mb-1">Twitter Card Type</label>
+        <select
+          value={localMeta().twitter.card}
+          onChange={(e) =>
+            handleChange({
+              twitter: {
+                ...localMeta().twitter,
+                card: e.currentTarget.value as 'summary' | 'summary_large_image',
+              },
+            })
+          }
+          class="w-full px-3 py-2 border border-gray-300 rounded text-sm"
+        >
+          <option value="summary">Summary</option>
+          <option value="summary_large_image">Summary Large Image</option>
+        </select>
+      </div>
+
+      {/* Robots */}
+      <div>
+        <label class="block text-sm font-semibold text-gray-900 mb-1">Robots Directive</label>
+        <input
+          type="text"
+          value={localMeta().robots || ''}
+          onInput={(e) =>
+            handleChange({
+              robots: e.currentTarget.value,
+            })
+          }
+          class="w-full px-3 py-2 border border-gray-300 rounded text-sm"
+          placeholder="index, follow"
+        />
+      </div>
+    </div>
+  )
+}

package/packages/solidjs/src/components/SEOHead.tsx

@@ -0,0 +1,109 @@
+import { createEffect } from 'solid-js'
+import type { SEOMeta } from '@geenius-seo/shared'
+
+interface SEOHeadProps {
+  meta: SEOMeta
+}
+
+export function SEOHead(props: SEOHeadProps) {
+  createEffect(() => {
+    const meta = props.meta
+
+    // Set title
+    document.title = meta.title
+
+    // Set meta tags
+    const setMetaTag = (name: string, content: string, isProperty = false) => {
+      let tag = document.querySelector(
+        `meta[${isProperty ? 'property' : 'name'}="${name}"]`,
+      ) as HTMLMetaElement
+      if (!tag) {
+        tag = document.createElement('meta')
+        isProperty ? tag.setAttribute('property', name) : tag.setAttribute('name', name)
+        document.head.appendChild(tag)
+      }
+      tag.content = content
+    }
+
+    // Description
+    setMetaTag('description', meta.description)
+
+    // Keywords
+    if (meta.keywords.length > 0) {
+      setMetaTag('keywords', meta.keywords.join(', '))
+    }
+
+    // Robots
+    if (meta.robots) {
+      setMetaTag('robots', meta.robots)
+    }
+
+    // OG tags
+    setMetaTag('og:title', meta.og.title, true)
+    setMetaTag('og:description', meta.og.description, true)
+    if (meta.og.image) {
+      setMetaTag('og:image', meta.og.image, true)
+      if (meta.og.imageAlt) {
+        setMetaTag('og:image:alt', meta.og.imageAlt, true)
+      }
+    }
+    setMetaTag('og:type', meta.og.type, true)
+    setMetaTag('og:url', meta.og.url, true)
+    if (meta.og.siteName) {
+      setMetaTag('og:site_name', meta.og.siteName, true)
+    }
+
+    // Twitter tags
+    setMetaTag('twitter:card', meta.twitter.card)
+    setMetaTag('twitter:title', meta.twitter.title)
+    setMetaTag('twitter:description', meta.twitter.description)
+    if (meta.twitter.image) {
+      setMetaTag('twitter:image', meta.twitter.image)
+    }
+    if (meta.twitter.creator) {
+      setMetaTag('twitter:creator', meta.twitter.creator)
+    }
+
+    // Canonical
+    if (meta.canonical) {
+      let canonicalLink = document.querySelector('link[rel="canonical"]') as HTMLLinkElement
+      if (!canonicalLink) {
+        canonicalLink = document.createElement('link')
+        canonicalLink.rel = 'canonical'
+        document.head.appendChild(canonicalLink)
+      }
+      canonicalLink.href = meta.canonical
+    }
+
+    // Alternates
+    if (meta.alternates) {
+      Object.entries(meta.alternates).forEach(([lang, url]) => {
+        let altLink = document.querySelector(
+          `link[rel="alternate"][hreflang="${lang}"]`,
+        ) as HTMLLinkElement
+        if (!altLink) {
+          altLink = document.createElement('link')
+          altLink.rel = 'alternate'
+          altLink.hrefLang = lang
+          document.head.appendChild(altLink)
+        }
+        altLink.href = url
+      })
+    }
+
+    // JSON-LD
+    if (meta.jsonLd && meta.jsonLd.length > 0) {
+      meta.jsonLd.forEach((schema) => {
+        let script = document.querySelector('script[type="application/ld+json"]') as HTMLScriptElement
+        if (!script) {
+          script = document.createElement('script')
+          script.type = 'application/ld+json'
+          document.head.appendChild(script)
+        }
+        script.textContent = JSON.stringify(schema)
+      })
+    }
+  })
+
+  return null
+}

package/packages/solidjs/src/components/SEOPreview.tsx

@@ -0,0 +1,42 @@
+import type { SEOMeta } from '@geenius-seo/shared'
+
+interface SEOPreviewProps {
+  meta: SEOMeta
+}
+
+export function SEOPreview(props: SEOPreviewProps) {
+  return (
+    <div class="space-y-6">
+      {/* Google SERP Preview */}
+      <div class="space-y-2">
+        <h3 class="text-sm font-semibold text-gray-700">Google Search Preview</h3>
+        <div class="bg-white p-4 rounded border border-gray-200">
+          <div class="text-xs text-green-700">{new URL(props.meta.og.url).hostname}</div>
+          <div class="text-lg text-blue-600 hover:underline cursor-pointer truncate">
+            {props.meta.title}
+          </div>
+          <div class="text-sm text-gray-600 line-clamp-2">{props.meta.description}</div>
+        </div>
+      </div>
+
+      {/* Social Media Preview */}
+      <div class="space-y-2">
+        <h3 class="text-sm font-semibold text-gray-700">Social Media Preview</h3>
+        <div class="bg-gray-900 rounded overflow-hidden max-w-sm">
+          {props.meta.og.image && (
+            <img
+              src={props.meta.og.image}
+              alt={props.meta.og.imageAlt || props.meta.og.title}
+              class="w-full h-48 object-cover"
+            />
+          )}
+          <div class="p-3 text-white">
+            <div class="font-semibold text-sm truncate">{props.meta.og.title}</div>
+            <div class="text-xs text-gray-400 line-clamp-2">{props.meta.og.description}</div>
+            <div class="text-xs text-gray-500 mt-1 truncate">{props.meta.og.url}</div>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}

package/packages/solidjs/src/components/SEOScoreCard.tsx

@@ -0,0 +1,57 @@
+import { createMemo } from 'solid-js'
+import { useSEOScore } from '../primitives/useSEOScore'
+import type { SEOMeta } from '@geenius-seo/shared'
+
+interface SEOScoreCardProps {
+  meta: SEOMeta
+}
+
+export function SEOScoreCard(props: SEOScoreCardProps) {
+  const scoreResult = useSEOScore(() => props.meta)
+
+  const getScoreColor = createMemo(() => {
+    const score = scoreResult().score
+    if (score >= 80) return 'text-green-600'
+    if (score >= 50) return 'text-yellow-600'
+    return 'text-red-600'
+  })
+
+  const getBarColor = createMemo(() => {
+    const score = scoreResult().score
+    if (score >= 80) return 'bg-green-500'
+    if (score >= 50) return 'bg-yellow-500'
+    return 'bg-red-500'
+  })
+
+  return (
+    <div class="space-y-4 p-4 border border-gray-200 rounded">
+      <div class="flex items-center justify-between">
+        <h3 class="font-semibold text-gray-900">SEO Score</h3>
+        <span class={`text-2xl font-bold ${getScoreColor()}`}>{scoreResult().score}/100</span>
+      </div>
+
+      <div class="space-y-2">
+        <div class="h-2 bg-gray-200 rounded overflow-hidden">
+          <div
+            class={`h-full ${getBarColor()} transition-all`}
+            style={{ width: `${scoreResult().score}%` }}
+          />
+        </div>
+      </div>
+
+      {scoreResult().issues.length > 0 && (
+        <div class="space-y-2">
+          <h4 class="text-sm font-semibold text-gray-700">Issues Found</h4>
+          <ul class="space-y-1">
+            {scoreResult().issues.map((issue, i) => (
+              <li key={i} class="text-sm text-red-600 flex items-start">
+                <span class="mr-2">•</span>
+                {issue}
+              </li>
+            ))}
+          </ul>
+        </div>
+      )}
+    </div>
+  )
+}

package/packages/solidjs/src/components/SitemapViewer.tsx

@@ -0,0 +1,44 @@
+import { For } from 'solid-js'
+import type { SitemapEntry } from '@geenius-seo/shared'
+
+interface SitemapViewerProps {
+  entries: SitemapEntry[]
+}
+
+export function SitemapViewer(props: SitemapViewerProps) {
+  return (
+    <div class="overflow-x-auto">
+      <table class="w-full text-sm">
+        <thead class="bg-gray-100 border-b">
+          <tr>
+            <th class="text-left p-3">URL</th>
+            <th class="text-left p-3">Last Modified</th>
+            <th class="text-left p-3">Change Frequency</th>
+            <th class="text-left p-3">Priority</th>
+          </tr>
+        </thead>
+        <tbody>
+          <For each={props.entries}>
+            {(entry, i) => (
+              <tr class="border-b hover:bg-gray-50">
+                <td class="p-3 font-mono text-xs text-blue-600 break-all">
+                  <a
+                    href={entry.url}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    class="hover:underline"
+                  >
+                    {entry.url}
+                  </a>
+                </td>
+                <td class="p-3 text-gray-600">{entry.lastmod || '-'}</td>
+                <td class="p-3 text-gray-600">{entry.changefreq || '-'}</td>
+                <td class="p-3 text-gray-600">{entry.priority || '-'}</td>
+              </tr>
+            )}
+          </For>
+        </tbody>
+      </table>
+    </div>
+  )
+}

package/packages/solidjs/src/components/index.ts

@@ -0,0 +1,7 @@
+export * from './SEOHead'
+export * from './SEOPreview'
+export * from './SEOScoreCard'
+export * from './MetaEditor'
+export * from './SitemapViewer'
+export * from './BreadcrumbsJsonLd'
+export * from './ArticleJsonLd'

package/packages/solidjs/src/index.ts

@@ -0,0 +1,11 @@
+// Shared types and utilities
+export * from '@geenius-seo/shared'
+
+// Primitives
+export * from './primitives'
+
+// Components
+export * from './components'
+
+// Pages
+export * from './pages'

package/packages/solidjs/src/pages/SEOAdminPage.tsx

@@ -0,0 +1,104 @@
+import { createSignal, For, Show } from 'solid-js'
+import { useSEOAdmin } from '../primitives/useSEOAdmin'
+import { MetaEditor } from '../components/MetaEditor'
+import { SEOPreview } from '../components/SEOPreview'
+import { SEOScoreCard } from '../components/SEOScoreCard'
+import type { SEOMeta } from '@geenius-seo/shared'
+
+export function SEOAdminPage() {
+  const { pages, upsertMeta, deleteMeta, isLoading } = useSEOAdmin()
+  const [selectedPath, setSelectedPath] = createSignal<string | null>(null)
+  const [editingMeta, setEditingMeta] = createSignal<SEOMeta | null>(null)
+
+  const currentPage = () => pages().find((p) => p.path === selectedPath())
+
+  const handleSave = async () => {
+    const path = selectedPath()
+    const meta = editingMeta()
+    if (path && meta) {
+      await upsertMeta(path, meta)
+      setEditingMeta(null)
+    }
+  }
+
+  const handleDelete = async () => {
+    const path = selectedPath()
+    if (path) {
+      await deleteMeta(path)
+      setSelectedPath(null)
+      setEditingMeta(null)
+    }
+  }
+
+  return (
+    <Show fallback={<div class="p-4">Loading...</div>} when={!isLoading()}>
+      <div class="max-w-6xl mx-auto p-6">
+        <h1 class="text-3xl font-bold mb-6">SEO Admin</h1>
+
+        <div class="grid grid-cols-1 lg:grid-cols-4 gap-6">
+          {/* Pages List */}
+          <div class="lg:col-span-1 border border-gray-200 rounded p-4">
+            <h2 class="font-semibold mb-4">Pages</h2>
+            <div class="space-y-2">
+              <For each={pages()}>
+                {(page) => (
+                  <button
+                    onClick={() => {
+                      setSelectedPath(page.path)
+                      setEditingMeta(page.meta)
+                    }}
+                    class={`w-full text-left p-2 rounded text-sm transition ${
+                      selectedPath() === page.path
+                        ? 'bg-blue-100 text-blue-900'
+                        : 'hover:bg-gray-100'
+                    }`}
+                  >
+                    {page.path || '/'}
+                  </button>
+                )}
+              </For>
+            </div>
+          </div>
+
+          {/* Editor and Preview */}
+          <Show when={currentPage() && editingMeta()}>
+            {(page) => (
+              <div class="lg:col-span-3 space-y-6">
+                <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
+                  <div>
+                    <h2 class="font-semibold mb-4">Edit Metadata</h2>
+                    <MetaEditor meta={editingMeta()!} onChange={setEditingMeta} />
+                  </div>
+
+                  <div class="space-y-6">
+                    <div>
+                      <h2 class="font-semibold mb-4">Preview</h2>
+                      <SEOPreview meta={editingMeta()!} />
+                    </div>
+
+                    <SEOScoreCard meta={editingMeta()!} />
+                  </div>
+                </div>
+
+                <div class="flex gap-2">
+                  <button
+                    onClick={handleSave}
+                    class="px-4 py-2 bg-green-600 text-white rounded hover:bg-green-700"
+                  >
+                    Save
+                  </button>
+                  <button
+                    onClick={handleDelete}
+                    class="px-4 py-2 bg-red-600 text-white rounded hover:bg-red-700"
+                  >
+                    Delete
+                  </button>
+                </div>
+              </div>
+            )}
+          </Show>
+        </div>
+      </div>
+    </Show>
+  )
+}

package/packages/solidjs/src/pages/SEOAnalyticsPage.tsx

@@ -0,0 +1,102 @@
+import { createSignal, createEffect, For, Show } from 'solid-js'
+
+interface AnalyticsSummary {
+  path: string
+  views: number
+  avgTimeOnPage: number
+  bounceRate: number
+}
+
+export function SEOAnalyticsPage() {
+  const [topPages, setTopPages] = createSignal<AnalyticsSummary[]>([])
+  const [isLoading, setIsLoading] = createSignal(false)
+
+  createEffect(() => {
+    setIsLoading(true)
+    // Placeholder for Convex query integration
+    // const result = await client.query(api.queries.getTopPages, { limit: 10 })
+    // setTopPages(result)
+    setIsLoading(false)
+  })
+
+  return (
+    <Show fallback={<div class="p-4">Loading...</div>} when={!isLoading()}>
+      <div class="max-w-6xl mx-auto p-6">
+        <h1 class="text-3xl font-bold mb-6">SEO Analytics</h1>
+
+        <div class="space-y-6">
+          {/* Top Pages */}
+          <div class="border border-gray-200 rounded p-4">
+            <h2 class="font-semibold mb-4">Top Pages by Views</h2>
+
+            <div class="overflow-x-auto">
+              <table class="w-full text-sm">
+                <thead class="bg-gray-100 border-b">
+                  <tr>
+                    <th class="text-left p-3">Page</th>
+                    <th class="text-right p-3">Views</th>
+                    <th class="text-right p-3">Avg Time (s)</th>
+                    <th class="text-right p-3">Bounce Rate</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  <For each={topPages()}>
+                    {(page, i) => (
+                      <tr class="border-b hover:bg-gray-50">
+                        <td class="p-3 font-mono text-xs">{page.path}</td>
+                        <td class="p-3 text-right">{page.views.toLocaleString()}</td>
+                        <td class="p-3 text-right">{page.avgTimeOnPage.toFixed(1)}</td>
+                        <td class="p-3 text-right">{(page.bounceRate * 100).toFixed(1)}%</td>
+                      </tr>
+                    )}
+                  </For>
+                </tbody>
+              </table>
+            </div>
+
+            <Show when={topPages().length === 0}>
+              <p class="text-center text-gray-500 py-8">No analytics data available</p>
+            </Show>
+          </div>
+
+          {/* Analytics Summary */}
+          <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
+            <div class="border border-gray-200 rounded p-4">
+              <h3 class="text-sm text-gray-600 mb-1">Total Views</h3>
+              <p class="text-2xl font-bold">
+                {topPages()
+                  .reduce((sum, p) => sum + p.views, 0)
+                  .toLocaleString()}
+              </p>
+            </div>
+
+            <div class="border border-gray-200 rounded p-4">
+              <h3 class="text-sm text-gray-600 mb-1">Average Time on Page</h3>
+              <p class="text-2xl font-bold">
+                {topPages().length > 0
+                  ? (
+                      topPages().reduce((sum, p) => sum + p.avgTimeOnPage, 0) / topPages().length
+                    ).toFixed(1)
+                  : '0'}
+                s
+              </p>
+            </div>
+
+            <div class="border border-gray-200 rounded p-4">
+              <h3 class="text-sm text-gray-600 mb-1">Average Bounce Rate</h3>
+              <p class="text-2xl font-bold">
+                {topPages().length > 0
+                  ? (
+                      (topPages().reduce((sum, p) => sum + p.bounceRate, 0) / topPages().length) *
+                      100
+                    ).toFixed(1)
+                  : '0'}
+                %
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </Show>
+  )
+}

package/packages/solidjs/src/pages/index.ts

@@ -0,0 +1,2 @@
+export * from './SEOAdminPage'
+export * from './SEOAnalyticsPage'

package/packages/solidjs/src/primitives/index.ts

@@ -0,0 +1,4 @@
+export * from './useSEO'
+export * from './useSEOAdmin'
+export * from './useSEOScore'
+export * from './useSitemap'