@geenius/seo 0.1.0

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

@@ -0,0 +1,101 @@
+import { useState } from 'react'
+import { useSEOAdmin } from '../hooks/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] = useState<string | null>(null)
+  const [editingMeta, setEditingMeta] = useState<SEOMeta | null>(null)
+
+  const currentPage = pages.find((p) => p.path === selectedPath)
+
+  const handleSave = async () => {
+    if (selectedPath && editingMeta) {
+      await upsertMeta(selectedPath, editingMeta)
+      setEditingMeta(null)
+    }
+  }
+
+  const handleDelete = async () => {
+    if (selectedPath) {
+      await deleteMeta(selectedPath)
+      setSelectedPath(null)
+      setEditingMeta(null)
+    }
+  }
+
+  if (isLoading) return <div className="p-4">Loading...</div>
+
+  return (
+    <div className="max-w-6xl mx-auto p-6">
+      <h1 className="text-3xl font-bold mb-6">SEO Admin</h1>
+
+      <div className="grid grid-cols-1 lg:grid-cols-4 gap-6">
+        {/* Pages List */}
+        <div className="lg:col-span-1 border border-gray-200 rounded p-4">
+          <h2 className="font-semibold mb-4">Pages</h2>
+          <div className="space-y-2">
+            {pages.map((page) => (
+              <button
+                key={page.path}
+                onClick={() => {
+                  setSelectedPath(page.path)
+                  setEditingMeta(page.meta)
+                }}
+                className={`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>
+            ))}
+          </div>
+        </div>
+
+        {/* Editor and Preview */}
+        {currentPage && editingMeta && (
+          <div className="lg:col-span-3 space-y-6">
+            <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+              <div>
+                <h2 className="font-semibold mb-4">Edit Metadata</h2>
+                <MetaEditor
+                  meta={editingMeta}
+                  onChange={setEditingMeta}
+                />
+              </div>
+
+              <div className="space-y-6">
+                <div>
+                  <h2 className="font-semibold mb-4">Preview</h2>
+                  <SEOPreview meta={editingMeta} />
+                </div>
+
+                <SEOScoreCard meta={editingMeta} />
+              </div>
+            </div>
+
+            <div className="flex gap-2">
+              <button
+                onClick={handleSave}
+                className="px-4 py-2 bg-green-600 text-white rounded hover:bg-green-700"
+              >
+                Save
+              </button>
+              <button
+                onClick={handleDelete}
+                className="px-4 py-2 bg-red-600 text-white rounded hover:bg-red-700"
+              >
+                Delete
+              </button>
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}

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

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

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

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

package/packages/react/tsconfig.json

@@ -0,0 +1,19 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "dist",
+    "rootDir": "src",
+    "jsx": "react-jsx",
+    "strict": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "target": "ES2022",
+    "module": "ESNext",
+    "moduleResolution": "bundler"
+  },
+  "include": [
+    "src"
+  ]
+}

package/packages/react/tsup.config.ts

@@ -0,0 +1,12 @@
+import { defineConfig } from 'tsup'
+
+export default defineConfig({
+    entry: { index: 'src/index.ts' },
+    outDir: 'dist',
+    format: ['esm'],
+    dts: true,
+    sourcemap: true,
+    clean: true,
+    treeshake: true,
+    external: ['react', 'react-dom'],
+})

package/packages/react-css/README.md

@@ -0,0 +1 @@
+# ✦ @geenius-seo/react-css\n\n> A premium module for the Geenius Boilerplate Ecosystem.\n\n---\n\n## Overview\nBuilt with Steve Jobs-level minimalism and Jony Ive-level craftsmanship, this package is designed to deliver unparalleled developer experience (DX) and rock-solid performance.\n\n## Installation\n\n```bash\npnpm add @geenius-seo/react-css\n```\n\n## Usage\n\n```typescript\nimport { init } from '@geenius-seo/react-css';\n\n// Initialize the module with absolute precision\ninit({\n  mode: 'premium',\n});\n```\n\n## Architecture\n- **Zero-config**: It just works.\n- **Strictly Typed**: Fully written in TypeScript for flawless IntelliSense.\n- **Framework Agnostic**: seamlessly integrates into the Geenius ecosystem.\n\n---\n\n*Designed by Antigravity HQ*\n

package/packages/react-css/package.json

@@ -0,0 +1,36 @@
+{
+  "name": "@geenius-seo/react-css",
+  "version": "0.1.0",
+  "description": "Geenius SEO — react components with vanilla CSS",
+  "type": "module",
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    }
+  },
+  "scripts": {
+    "build": "tsup",
+    "lint": "tsc --noEmit",
+    "clean": "rm -rf dist"
+  },
+  "files": ["dist"],
+  "publishConfig": { "access": "public" },
+  "peerDependencies": { "react": ">=18.0.0" },
+  "dependencies": {
+    "@geenius-seo/shared": "workspace:*"
+  },
+  "devDependencies": {
+    "@types/react": "^19.0.0",
+    "react": "^19.2.4",
+    "tsup": "^8.5.1",
+    "typescript": "~6.0.2"
+  },
+  "author": "Antigravity HQ",
+  "license": "MIT",
+  "engines": { "node": ">=20.0.0" }
+}

package/packages/react-css/src/components/ArticleJsonLd.tsx

@@ -0,0 +1,42 @@
+import { useEffect } from 'react'
+import { articleSchema } from '@geenius-seo/shared'
+
+interface ArticleJsonLdProps {
+  title: string
+  description: string
+  author: string
+  datePublished: string
+  url: string
+  image?: string
+}
+
+export function ArticleJsonLd({
+  title,
+  description,
+  author,
+  datePublished,
+  url,
+  image,
+}: ArticleJsonLdProps) {
+  useEffect(() => {
+    const script = document.createElement('script')
+    script.type = 'application/ld+json'
+    script.textContent = JSON.stringify(
+      articleSchema({
+        title,
+        description,
+        author,
+        datePublished,
+        url,
+        image,
+      }),
+    )
+    document.head.appendChild(script)
+
+    return () => {
+      document.head.removeChild(script)
+    }
+  }, [title, description, author, datePublished, url, image])
+
+  return <div className="seo__article-jsonld" />
+}

package/packages/react-css/src/components/BreadcrumbsJsonLd.tsx

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

package/packages/react-css/src/components/MetaEditor.tsx

@@ -0,0 +1,147 @@
+import { useState } from 'react'
+import type { SEOMeta } from '@geenius-seo/shared'
+
+interface MetaEditorProps {
+  meta: SEOMeta
+  onChange: (meta: SEOMeta) => void
+}
+
+export function MetaEditor({ meta, onChange }: MetaEditorProps) {
+  const [localMeta, setLocalMeta] = useState(meta)
+
+  const handleChange = (updates: Partial<SEOMeta>) => {
+    const updated = { ...localMeta, ...updates }
+    setLocalMeta(updated)
+    onChange(updated)
+  }
+
+  return (
+    <div className="seo__meta-editor">
+      <div className="seo__meta-field">
+        <label className="seo__meta-field-label">
+          Title ({localMeta.title.length}/60)
+        </label>
+        <input
+          type="text"
+          value={localMeta.title}
+          onChange={(e) =>
+            handleChange({
+              title: e.target.value.slice(0, 60),
+            })
+          }
+          className="seo__meta-field-input"
+          placeholder="Page title"
+        />
+        <div className="seo__meta-char-count">
+          {localMeta.title.length < 30
+            ? 'Too short'
+            : localMeta.title.length > 60
+              ? 'Too long'
+              : 'Good length'}
+        </div>
+      </div>
+
+      <div className="seo__meta-field">
+        <label className="seo__meta-field-label">
+          Description ({localMeta.description.length}/160)
+        </label>
+        <textarea
+          value={localMeta.description}
+          onChange={(e) =>
+            handleChange({
+              description: e.target.value.slice(0, 160),
+            })
+          }
+          className="seo__meta-field-textarea"
+          placeholder="Page description"
+        />
+        <div className="seo__meta-char-count">
+          {localMeta.description.length < 50
+            ? 'Too short'
+            : localMeta.description.length > 160
+              ? 'Too long'
+              : 'Good length'}
+        </div>
+      </div>
+
+      <div className="seo__meta-field">
+        <label className="seo__meta-field-label">Keywords</label>
+        <input
+          type="text"
+          value={localMeta.keywords.join(', ')}
+          onChange={(e) =>
+            handleChange({
+              keywords: e.target.value.split(',').map((k) => k.trim()),
+            })
+          }
+          className="seo__meta-field-input"
+          placeholder="keyword1, keyword2, keyword3"
+        />
+      </div>
+
+      <div className="seo__meta-field">
+        <label className="seo__meta-field-label">Canonical URL</label>
+        <input
+          type="url"
+          value={localMeta.canonical || ''}
+          onChange={(e) =>
+            handleChange({
+              canonical: e.target.value,
+            })
+          }
+          className="seo__meta-field-input"
+          placeholder="https://example.com/page"
+        />
+      </div>
+
+      <div className="seo__meta-field">
+        <label className="seo__meta-field-label">OG Image URL</label>
+        <input
+          type="url"
+          value={localMeta.og.image || ''}
+          onChange={(e) =>
+            handleChange({
+              og: { ...localMeta.og, image: e.target.value },
+            })
+          }
+          className="seo__meta-field-input"
+          placeholder="https://example.com/image.jpg"
+        />
+      </div>
+
+      <div className="seo__meta-field">
+        <label className="seo__meta-field-label">Twitter Card Type</label>
+        <select
+          value={localMeta.twitter.card}
+          onChange={(e) =>
+            handleChange({
+              twitter: {
+                ...localMeta.twitter,
+                card: e.target.value as 'summary' | 'summary_large_image',
+              },
+            })
+          }
+          className="seo__meta-field-select"
+        >
+          <option value="summary">Summary</option>
+          <option value="summary_large_image">Summary Large Image</option>
+        </select>
+      </div>
+
+      <div className="seo__meta-field">
+        <label className="seo__meta-field-label">Robots Directive</label>
+        <input
+          type="text"
+          value={localMeta.robots || ''}
+          onChange={(e) =>
+            handleChange({
+              robots: e.target.value,
+            })
+          }
+          className="seo__meta-field-input"
+          placeholder="index, follow"
+        />
+      </div>
+    </div>
+  )
+}

package/packages/react-css/src/components/SEOHead.tsx

@@ -0,0 +1,95 @@
+import { useEffect } from 'react'
+import type { SEOMeta } from '@geenius-seo/shared'
+
+interface SEOHeadProps {
+  meta: SEOMeta
+}
+
+export function SEOHead({ meta }: SEOHeadProps) {
+  useEffect(() => {
+    document.title = meta.title
+
+    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
+    }
+
+    setMetaTag('description', meta.description)
+    if (meta.keywords.length > 0) {
+      setMetaTag('keywords', meta.keywords.join(', '))
+    }
+    if (meta.robots) {
+      setMetaTag('robots', meta.robots)
+    }
+
+    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)
+    }
+
+    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)
+    }
+
+    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
+    }
+
+    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
+      })
+    }
+
+    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)
+      })
+    }
+  }, [meta])
+
+  return <div className="seo__head" />
+}

package/packages/react-css/src/components/SEOPreview.tsx

@@ -0,0 +1,42 @@
+import type { SEOMeta } from '@geenius-seo/shared'
+
+interface SEOPreviewProps {
+  meta: SEOMeta
+}
+
+export function SEOPreview({ meta }: SEOPreviewProps) {
+  return (
+    <div className="seo__preview">
+      <div>
+        <h3 style={{ fontSize: '0.875rem', fontWeight: 600, marginBottom: '0.5rem' }}>
+          Google Search Preview
+        </h3>
+        <div className="seo__preview-google">
+          <div className="seo__preview-google-url">{new URL(meta.og.url).hostname}</div>
+          <div className="seo__preview-google-title">{meta.title}</div>
+          <div className="seo__preview-google-desc">{meta.description}</div>
+        </div>
+      </div>
+
+      <div>
+        <h3 style={{ fontSize: '0.875rem', fontWeight: 600, marginBottom: '0.5rem' }}>
+          Social Media Preview
+        </h3>
+        <div className="seo__preview-social">
+          {meta.og.image && (
+            <img
+              src={meta.og.image}
+              alt={meta.og.imageAlt || meta.og.title}
+              className="seo__preview-social-image"
+            />
+          )}
+          <div className="seo__preview-social-info">
+            <div className="seo__preview-social-title">{meta.og.title}</div>
+            <div className="seo__preview-social-desc">{meta.og.description}</div>
+            <div className="seo__preview-social-url">{meta.og.url}</div>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}

package/packages/react-css/src/components/SEOScoreCard.tsx

@@ -0,0 +1,42 @@
+import { useSEOScore } from '@geenius-seo/react'
+import type { SEOMeta } from '@geenius-seo/shared'
+
+interface SEOScoreCardProps {
+  meta: SEOMeta
+}
+
+export function SEOScoreCard({ meta }: SEOScoreCardProps) {
+  const { score, issues } = useSEOScore(meta)
+
+  const scoreClass =
+    score >= 80 ? 'seo__score-number--good' : score >= 50 ? 'seo__score-number--fair' : 'seo__score-number--poor'
+  const barClass =
+    score >= 80 ? 'seo__score-bar-fill--good' : score >= 50 ? 'seo__score-bar-fill--fair' : 'seo__score-bar-fill--poor'
+
+  return (
+    <div className="seo__score-card">
+      <div className="seo__score-card-header">
+        <div className="seo__score-card-title">SEO Score</div>
+        <span className={`seo__score-number ${scoreClass}`}>{score}/100</span>
+      </div>
+
+      <div className="seo__score-bar">
+        <div className={`seo__score-bar-fill ${barClass}`} style={{ width: `${score}%` }} />
+      </div>
+
+      {issues.length > 0 && (
+        <div>
+          <div className="seo__issue-list-title">Issues Found</div>
+          <ul className="seo__issue-list">
+            {issues.map((issue, i) => (
+              <li key={i} className="seo__issue-item">
+                <span className="seo__issue-item-bullet">•</span>
+                {issue}
+              </li>
+            ))}
+          </ul>
+        </div>
+      )}
+    </div>
+  )
+}