@geenius/seo 0.1.0

package/packages/react/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 null
+}

package/packages/react/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 null
+}

package/packages/react/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="space-y-6 p-4 border border-gray-200 rounded">
+      {/* Title */}
+      <div>
+        <label className="block text-sm font-semibold text-gray-900 mb-1">
+          Title {localMeta.title.length}/60
+        </label>
+        <input
+          type="text"
+          value={localMeta.title}
+          onChange={(e) =>
+            handleChange({
+              title: e.target.value.slice(0, 60),
+            })
+          }
+          className="w-full px-3 py-2 border border-gray-300 rounded text-sm"
+          placeholder="Page title"
+        />
+        <p className="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 className="block text-sm font-semibold text-gray-900 mb-1">
+          Description {localMeta.description.length}/160
+        </label>
+        <textarea
+          value={localMeta.description}
+          onChange={(e) =>
+            handleChange({
+              description: e.target.value.slice(0, 160),
+            })
+          }
+          className="w-full px-3 py-2 border border-gray-300 rounded text-sm"
+          rows={3}
+          placeholder="Page description"
+        />
+        <p className="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 className="block text-sm font-semibold text-gray-900 mb-1">Keywords</label>
+        <input
+          type="text"
+          value={localMeta.keywords.join(', ')}
+          onChange={(e) =>
+            handleChange({
+              keywords: e.target.value.split(',').map((k) => k.trim()),
+            })
+          }
+          className="w-full px-3 py-2 border border-gray-300 rounded text-sm"
+          placeholder="keyword1, keyword2, keyword3"
+        />
+      </div>
+
+      {/* Canonical */}
+      <div>
+        <label className="block text-sm font-semibold text-gray-900 mb-1">Canonical URL</label>
+        <input
+          type="url"
+          value={localMeta.canonical || ''}
+          onChange={(e) =>
+            handleChange({
+              canonical: e.target.value,
+            })
+          }
+          className="w-full px-3 py-2 border border-gray-300 rounded text-sm"
+          placeholder="https://example.com/page"
+        />
+      </div>
+
+      {/* OG Image */}
+      <div>
+        <label className="block text-sm font-semibold text-gray-900 mb-1">OG Image URL</label>
+        <input
+          type="url"
+          value={localMeta.og.image || ''}
+          onChange={(e) =>
+            handleChange({
+              og: { ...localMeta.og, image: e.target.value },
+            })
+          }
+          className="w-full px-3 py-2 border border-gray-300 rounded text-sm"
+          placeholder="https://example.com/image.jpg"
+        />
+      </div>
+
+      {/* Twitter Card */}
+      <div>
+        <label className="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.target.value as 'summary' | 'summary_large_image',
+              },
+            })
+          }
+          className="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 className="block text-sm font-semibold text-gray-900 mb-1">Robots Directive</label>
+        <input
+          type="text"
+          value={localMeta.robots || ''}
+          onChange={(e) =>
+            handleChange({
+              robots: e.target.value,
+            })
+          }
+          className="w-full px-3 py-2 border border-gray-300 rounded text-sm"
+          placeholder="index, follow"
+        />
+      </div>
+    </div>
+  )
+}

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

@@ -0,0 +1,107 @@
+import { useEffect } from 'react'
+import type { SEOMeta } from '@geenius-seo/shared'
+
+interface SEOHeadProps {
+  meta: SEOMeta
+}
+
+export function SEOHead({ meta }: SEOHeadProps) {
+  useEffect(() => {
+    // 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)
+      })
+    }
+  }, [meta])
+
+  return null
+}

package/packages/react/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="space-y-6">
+      {/* Google SERP Preview */}
+      <div className="space-y-2">
+        <h3 className="text-sm font-semibold text-gray-700">Google Search Preview</h3>
+        <div className="bg-white p-4 rounded border border-gray-200">
+          <div className="text-xs text-green-700">{new URL(meta.og.url).hostname}</div>
+          <div className="text-lg text-blue-600 hover:underline cursor-pointer truncate">
+            {meta.title}
+          </div>
+          <div className="text-sm text-gray-600 line-clamp-2">{meta.description}</div>
+        </div>
+      </div>
+
+      {/* Social Media Preview */}
+      <div className="space-y-2">
+        <h3 className="text-sm font-semibold text-gray-700">Social Media Preview</h3>
+        <div className="bg-gray-900 rounded overflow-hidden max-w-sm">
+          {meta.og.image && (
+            <img
+              src={meta.og.image}
+              alt={meta.og.imageAlt || meta.og.title}
+              className="w-full h-48 object-cover"
+            />
+          )}
+          <div className="p-3 text-white">
+            <div className="font-semibold text-sm truncate">{meta.og.title}</div>
+            <div className="text-xs text-gray-400 line-clamp-2">{meta.og.description}</div>
+            <div className="text-xs text-gray-500 mt-1 truncate">{meta.og.url}</div>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}

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

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

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

@@ -0,0 +1,36 @@
+import type { SitemapEntry } from '@geenius-seo/shared'
+
+interface SitemapViewerProps {
+  entries: SitemapEntry[]
+}
+
+export function SitemapViewer({ entries }: SitemapViewerProps) {
+  return (
+    <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">URL</th>
+            <th className="text-left p-3">Last Modified</th>
+            <th className="text-left p-3">Change Frequency</th>
+            <th className="text-left p-3">Priority</th>
+          </tr>
+        </thead>
+        <tbody>
+          {entries.map((entry, i) => (
+            <tr key={i} className="border-b hover:bg-gray-50">
+              <td className="p-3 font-mono text-xs text-blue-600 break-all">
+                <a href={entry.url} target="_blank" rel="noopener noreferrer" className="hover:underline">
+                  {entry.url}
+                </a>
+              </td>
+              <td className="p-3 text-gray-600">{entry.lastmod || '-'}</td>
+              <td className="p-3 text-gray-600">{entry.changefreq || '-'}</td>
+              <td className="p-3 text-gray-600">{entry.priority || '-'}</td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  )
+}

package/packages/react/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/react/src/hooks/index.ts

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

package/packages/react/src/hooks/useSEO.ts

@@ -0,0 +1,27 @@
+import { useState, useEffect } from 'react'
+import type { SEOMeta } from '@geenius-seo/shared'
+
+interface UseSEOOptions {
+  path?: string
+}
+
+export function useSEO(options?: UseSEOOptions) {
+  const [meta, setMeta] = useState<SEOMeta | null>(null)
+  const [isLoading, setIsLoading] = useState(false)
+
+  const updateMeta = (newMeta: SEOMeta) => {
+    setMeta(newMeta)
+  }
+
+  useEffect(() => {
+    if (!options?.path) return
+
+    setIsLoading(true)
+    // Placeholder for Convex query integration
+    // const meta = await client.query(api.queries.getSEOMeta, { path: options.path })
+    // setMeta(meta)
+    setIsLoading(false)
+  }, [options?.path])
+
+  return { meta, updateMeta, isLoading }
+}

package/packages/react/src/hooks/useSEOAdmin.ts

@@ -0,0 +1,42 @@
+import { useState, useEffect } from 'react'
+import type { SEOMeta } from '@geenius-seo/shared'
+
+interface PageEntry {
+  path: string
+  meta: SEOMeta
+}
+
+export function useSEOAdmin() {
+  const [pages, setPages] = useState<PageEntry[]>([])
+  const [isLoading, setIsLoading] = useState(false)
+
+  const upsertMeta = async (path: string, meta: SEOMeta) => {
+    // Placeholder for Convex mutation integration
+    // await client.mutation(api.mutations.upsertSEOMeta, { path, meta })
+    setPages((prev) => {
+      const existing = prev.findIndex((p) => p.path === path)
+      if (existing >= 0) {
+        const next = [...prev]
+        next[existing] = { path, meta }
+        return next
+      }
+      return [...prev, { path, meta }]
+    })
+  }
+
+  const deleteMeta = async (path: string) => {
+    // Placeholder for Convex mutation integration
+    // await client.mutation(api.mutations.deleteSEOMeta, { path })
+    setPages((prev) => prev.filter((p) => p.path !== path))
+  }
+
+  useEffect(() => {
+    setIsLoading(true)
+    // Placeholder for Convex query integration
+    // const result = await client.query(api.queries.listPages, { limit: 100 })
+    // setPages(result)
+    setIsLoading(false)
+  }, [])
+
+  return { pages, upsertMeta, deleteMeta, isLoading }
+}

package/packages/react/src/hooks/useSEOScore.ts

@@ -0,0 +1,7 @@
+import { useMemo } from 'react'
+import { calcSEOScore } from '@geenius-seo/shared'
+import type { SEOMeta } from '@geenius-seo/shared'
+
+export function useSEOScore(meta: SEOMeta) {
+  return useMemo(() => calcSEOScore(meta), [meta])
+}

package/packages/react/src/hooks/useSitemap.ts

@@ -0,0 +1,8 @@
+import { useMemo } from 'react'
+import { generateSitemapXml } from '@geenius-seo/shared'
+import type { SitemapEntry } from '@geenius-seo/shared'
+
+export function useSitemap(entries: SitemapEntry[]) {
+  const xml = useMemo(() => generateSitemapXml(entries), [entries])
+  return { xml }
+}

package/packages/react/src/index.ts

@@ -0,0 +1,51 @@
+import { useMemo } from 'react'
+import type { SEOMeta, SEOConfig, SitemapEntry } from '@geenius-seo/shared'
+import { buildTitle } from '@geenius-seo/shared'
+
+export type { SEOMeta, SEOConfig, SitemapEntry } from '@geenius-seo/shared'
+export { buildTitle, generateSitemapXml, generateRobotsTxt, generateJsonLd, defaultSeoConfig } from '@geenius-seo/shared'
+
+export interface UseSEOOptions {
+    meta: SEOMeta
+    config: SEOConfig
+}
+
+export function useSEO(options: UseSEOOptions) {
+    const { meta, config } = options
+
+    const fullTitle = useMemo(() => buildTitle(meta.title, config), [meta.title, config])
+
+    const tags = useMemo(() => ({
+        title: fullTitle,
+        meta: [
+            { name: 'description', content: meta.description },
+            meta.noIndex && { name: 'robots', content: `${meta.noIndex ? 'noindex' : 'index'},${meta.noFollow ? 'nofollow' : 'follow'}` },
+            { property: 'og:title', content: meta.ogTitle ?? fullTitle },
+            { property: 'og:description', content: meta.ogDescription ?? meta.description },
+            meta.ogImage && { property: 'og:image', content: meta.ogImage },
+            { property: 'og:type', content: meta.ogType ?? 'website' },
+            { property: 'og:site_name', content: config.siteName },
+            { name: 'twitter:card', content: meta.twitterCard ?? 'summary_large_image' },
+            meta.twitterSite && { name: 'twitter:site', content: meta.twitterSite },
+            meta.twitterCreator && { name: 'twitter:creator', content: meta.twitterCreator },
+        ].filter(Boolean),
+        link: [
+            meta.canonical && { rel: 'canonical', href: meta.canonical },
+        ].filter(Boolean),
+        jsonLd: meta.jsonLd,
+    }), [meta, fullTitle, config])
+
+    return tags
+}
+
+export interface SEOHeadProps {
+    meta: SEOMeta
+    config: SEOConfig
+}
+
+/** Note: For full SSR support, integrate with your meta framework (TanStack Start, Next.js, etc.) */
+export function SEOHead(props: SEOHeadProps) {
+    const seo = useSEO(props)
+    // This renders nothing — consumers should use the hook with their framework's head management
+    return null
+}

package/packages/react/src/index.tsx

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