@geenius/seo 0.1.0

package/packages/react-css/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>
+      <table className="seo__sitemap-table">
+        <thead className="seo__sitemap-table-head">
+          <tr>
+            <th className="seo__sitemap-table-header">URL</th>
+            <th className="seo__sitemap-table-header">Last Modified</th>
+            <th className="seo__sitemap-table-header">Change Frequency</th>
+            <th className="seo__sitemap-table-header">Priority</th>
+          </tr>
+        </thead>
+        <tbody>
+          {entries.map((entry, i) => (
+            <tr key={i} className="seo__sitemap-row">
+              <td className="seo__sitemap-cell">
+                <a href={entry.url} target="_blank" rel="noopener noreferrer" className="seo__sitemap-url">
+                  {entry.url}
+                </a>
+              </td>
+              <td className="seo__sitemap-cell seo__sitemap-cell-muted">{entry.lastmod || '-'}</td>
+              <td className="seo__sitemap-cell seo__sitemap-cell-muted">{entry.changefreq || '-'}</td>
+              <td className="seo__sitemap-cell seo__sitemap-cell-muted">{entry.priority || '-'}</td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  )
+}

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

@@ -0,0 +1,9 @@
+// Re-export all React hooks and types
+export * from '@geenius-seo/react'
+
+// CSS Components
+export * from './components'
+export * from './pages'
+
+// CSS Styles
+import './seo.css'

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

@@ -0,0 +1,88 @@
+import { useState } from 'react'
+import { useSEOAdmin } from '@geenius-seo/react'
+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 style={{ padding: '1rem' }}>Loading...</div>
+
+  return (
+    <div className="seo__admin-container">
+      <h1 className="seo__admin-title">SEO Admin</h1>
+
+      <div className="seo__admin-grid">
+        <div className="seo__admin-sidebar">
+          <div className="seo__admin-sidebar-title">Pages</div>
+          <div className="seo__admin-page-list">
+            {pages.map((page) => (
+              <button
+                key={page.path}
+                onClick={() => {
+                  setSelectedPath(page.path)
+                  setEditingMeta(page.meta)
+                }}
+                className={`seo__admin-page-button ${
+                  selectedPath === page.path ? 'seo__admin-page-button--active' : ''
+                }`}
+              >
+                {page.path || '/'}
+              </button>
+            ))}
+          </div>
+        </div>
+
+        {currentPage && editingMeta && (
+          <div className="seo__admin-editor">
+            <div>
+              <h2 style={{ fontWeight: 600, marginBottom: '1rem' }}>Edit Metadata</h2>
+              <MetaEditor meta={editingMeta} onChange={setEditingMeta} />
+            </div>
+
+            <div className="seo__space-y">
+              <div>
+                <h2 style={{ fontWeight: 600, marginBottom: '1rem' }}>Preview</h2>
+                <SEOPreview meta={editingMeta} />
+              </div>
+
+              <SEOScoreCard meta={editingMeta} />
+            </div>
+          </div>
+        )}
+      </div>
+
+      {currentPage && editingMeta && (
+        <div className="seo__admin-actions">
+          <button onClick={handleSave} className="seo__button seo__button--success">
+            Save
+          </button>
+          <button onClick={handleDelete} className="seo__button seo__button--danger">
+            Delete
+          </button>
+        </div>
+      )}
+    </div>
+  )
+}

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

@@ -0,0 +1,82 @@
+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)
+    setIsLoading(false)
+  }, [])
+
+  const totalViews = topPages.reduce((sum, p) => sum + p.views, 0)
+  const avgTimeOnPage =
+    topPages.length > 0
+      ? topPages.reduce((sum, p) => sum + p.avgTimeOnPage, 0) / topPages.length
+      : 0
+  const avgBounceRate =
+    topPages.length > 0
+      ? (topPages.reduce((sum, p) => sum + p.bounceRate, 0) / topPages.length) * 100
+      : 0
+
+  if (isLoading) return <div style={{ padding: '1rem' }}>Loading...</div>
+
+  return (
+    <div className="seo__analytics-container">
+      <h1 className="seo__analytics-title">SEO Analytics</h1>
+
+      <div className="seo__analytics-table-wrapper">
+        <table className="seo__sitemap-table">
+          <thead className="seo__sitemap-table-head">
+            <tr>
+              <th className="seo__sitemap-table-header">Page</th>
+              <th className="seo__sitemap-table-header">Views</th>
+              <th className="seo__sitemap-table-header">Avg Time (s)</th>
+              <th className="seo__sitemap-table-header">Bounce Rate</th>
+            </tr>
+          </thead>
+          <tbody>
+            {topPages.map((page, i) => (
+              <tr key={i} className="seo__sitemap-row">
+                <td className="seo__sitemap-cell">{page.path}</td>
+                <td className="seo__sitemap-cell">{page.views.toLocaleString()}</td>
+                <td className="seo__sitemap-cell">{page.avgTimeOnPage.toFixed(1)}</td>
+                <td className="seo__sitemap-cell">{(page.bounceRate * 100).toFixed(1)}%</td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+
+      {topPages.length === 0 && (
+        <p style={{ textAlign: 'center', color: 'var(--seo-text-muted)', padding: '2rem' }}>
+          No analytics data available
+        </p>
+      )}
+
+      <div className="seo__analytics-summary">
+        <div className="seo__analytics-card">
+          <div className="seo__analytics-card-label">Total Views</div>
+          <div className="seo__analytics-card-value">{totalViews.toLocaleString()}</div>
+        </div>
+
+        <div className="seo__analytics-card">
+          <div className="seo__analytics-card-label">Average Time on Page</div>
+          <div className="seo__analytics-card-value">{avgTimeOnPage.toFixed(1)}s</div>
+        </div>
+
+        <div className="seo__analytics-card">
+          <div className="seo__analytics-card-label">Average Bounce Rate</div>
+          <div className="seo__analytics-card-value">{avgBounceRate.toFixed(1)}%</div>
+        </div>
+      </div>
+    </div>
+  )
+}

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

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