@marlinjai/clearify 1.11.2 → 1.13.0

package/src/theme/Header.tsx

@@ -2,6 +2,8 @@ import React from 'react';
 import { Link } from 'react-router-dom';
 import { useTheme } from './ThemeProvider.js';
 import { Search } from './Search.js';
+// @ts-expect-error virtual module
+import adminEnabled from 'virtual:clearify/admin-enabled';
 
 interface HeaderProps {
   name: string;
@@ -158,6 +160,36 @@ export function Header({ name, links, logo, onMenuToggle }: HeaderProps) {
           </a>
         )}
 
+        {adminEnabled && (
+          <Link
+            to="/admin"
+            aria-label="Admin panel"
+            style={{
+              display: 'inline-flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              width: 36,
+              height: 36,
+              borderRadius: 'var(--clearify-radius-sm)',
+              color: 'var(--clearify-text-secondary)',
+              transition: 'color 0.15s, background-color 0.15s',
+            }}
+            onMouseEnter={(e) => {
+              e.currentTarget.style.color = 'var(--clearify-text)';
+              e.currentTarget.style.backgroundColor = 'var(--clearify-bg-secondary)';
+            }}
+            onMouseLeave={(e) => {
+              e.currentTarget.style.color = 'var(--clearify-text-secondary)';
+              e.currentTarget.style.backgroundColor = 'transparent';
+            }}
+          >
+            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+              <circle cx="12" cy="12" r="3" />
+              <path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z" />
+            </svg>
+          </Link>
+        )}
+
         <button
           onClick={toggleTheme}
           style={{

package/src/theme/admin/AdminDashboard.tsx

@@ -0,0 +1,129 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+
+const cardStyle: React.CSSProperties = {
+  backgroundColor: 'var(--clearify-surface-elevated)',
+  border: '1px solid var(--clearify-border)',
+  borderRadius: 'var(--clearify-radius)',
+  padding: '1.5rem',
+  boxShadow: 'var(--clearify-shadow)',
+  textDecoration: 'none',
+  color: 'inherit',
+  transition: 'box-shadow 0.15s, border-color 0.15s',
+};
+
+interface DashboardCardProps {
+  title: string;
+  description: string;
+  to: string;
+  icon: React.ReactNode;
+}
+
+function DashboardCard({ title, description, to, icon }: DashboardCardProps) {
+  return (
+    <Link
+      to={to}
+      style={cardStyle}
+      onMouseEnter={(e) => {
+        e.currentTarget.style.boxShadow = 'var(--clearify-shadow-glow)';
+        e.currentTarget.style.borderColor = 'var(--clearify-primary)';
+      }}
+      onMouseLeave={(e) => {
+        e.currentTarget.style.boxShadow = 'var(--clearify-shadow)';
+        e.currentTarget.style.borderColor = 'var(--clearify-border)';
+      }}
+    >
+      <div style={{ display: 'flex', alignItems: 'center', gap: '0.75rem', marginBottom: '0.75rem' }}>
+        <div
+          style={{
+            width: 40,
+            height: 40,
+            borderRadius: 'var(--clearify-radius-sm)',
+            background: 'var(--clearify-primary-soft)',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            color: 'var(--clearify-primary)',
+          }}
+        >
+          {icon}
+        </div>
+        <h3 style={{ fontSize: '1.125rem', fontWeight: 650, color: 'var(--clearify-text)' }}>
+          {title}
+        </h3>
+      </div>
+      <p style={{ fontSize: '0.875rem', color: 'var(--clearify-text-secondary)', lineHeight: 1.5 }}>
+        {description}
+      </p>
+    </Link>
+  );
+}
+
+export function AdminDashboard() {
+  return (
+    <div style={{ padding: '2rem', maxWidth: '64rem', margin: '0 auto' }}>
+      <h1
+        style={{
+          fontSize: '2rem',
+          fontWeight: 800,
+          letterSpacing: '-0.035em',
+          color: 'var(--clearify-text)',
+          marginBottom: '0.5rem',
+        }}
+      >
+        Admin Dashboard
+      </h1>
+      <p style={{ color: 'var(--clearify-text-secondary)', marginBottom: '2rem' }}>
+        Manage your Clearify documentation site.
+      </p>
+
+      <div
+        style={{
+          display: 'grid',
+          gridTemplateColumns: 'repeat(auto-fill, minmax(280px, 1fr))',
+          gap: '1.25rem',
+        }}
+      >
+        <DashboardCard
+          title="Projects"
+          description="Manage hub projects, add or remove project entries."
+          to="/admin/projects"
+          icon={
+            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+              <path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z" />
+              <path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z" />
+            </svg>
+          }
+        />
+        <DashboardCard
+          title="Sections"
+          description="Organize documentation sections and navigation structure."
+          to="/admin/sections"
+          icon={
+            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+              <line x1="8" y1="6" x2="21" y2="6" />
+              <line x1="8" y1="12" x2="21" y2="12" />
+              <line x1="8" y1="18" x2="21" y2="18" />
+              <line x1="3" y1="6" x2="3.01" y2="6" />
+              <line x1="3" y1="12" x2="3.01" y2="12" />
+              <line x1="3" y1="18" x2="3.01" y2="18" />
+            </svg>
+          }
+        />
+        <DashboardCard
+          title="Site Settings"
+          description="Configure site name, colors, links, and other settings."
+          to="/admin/settings"
+          icon={
+            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+              <circle cx="12" cy="12" r="3" />
+              <path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z" />
+            </svg>
+          }
+        />
+      </div>
+    </div>
+  );
+}
+
+export default AdminDashboard;

package/src/theme/admin/AdminLayout.tsx

@@ -0,0 +1,240 @@
+import React from 'react';
+import { Link, Outlet, useLocation } from 'react-router-dom';
+import { ThemeProvider } from '../ThemeProvider.js';
+import { useTheme } from '../ThemeProvider.js';
+
+const navItems = [
+  {
+    label: 'Projects',
+    to: '/admin/projects',
+    icon: (
+      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+        <path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z" />
+        <path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z" />
+      </svg>
+    ),
+  },
+  {
+    label: 'Sections',
+    to: '/admin/sections',
+    icon: (
+      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+        <line x1="8" y1="6" x2="21" y2="6" />
+        <line x1="8" y1="12" x2="21" y2="12" />
+        <line x1="8" y1="18" x2="21" y2="18" />
+        <line x1="3" y1="6" x2="3.01" y2="6" />
+        <line x1="3" y1="12" x2="3.01" y2="12" />
+        <line x1="3" y1="18" x2="3.01" y2="18" />
+      </svg>
+    ),
+  },
+  {
+    label: 'Settings',
+    to: '/admin/settings',
+    icon: (
+      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+        <circle cx="12" cy="12" r="3" />
+        <path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z" />
+      </svg>
+    ),
+  },
+];
+
+function AdminLayoutInner() {
+  const location = useLocation();
+  const { theme, toggleTheme } = useTheme();
+
+  return (
+    <>
+      <div className="clearify-bg-mesh" aria-hidden="true" />
+      <div style={{ display: 'flex', flexDirection: 'column', minHeight: '100vh' }}>
+        {/* Admin Header */}
+        <header
+          style={{
+            height: 'var(--clearify-header-height)',
+            borderBottom: '1px solid var(--clearify-border)',
+            backgroundColor: 'var(--clearify-surface)',
+            display: 'flex',
+            alignItems: 'center',
+            padding: '0 1.5rem',
+            position: 'sticky',
+            top: 0,
+            zIndex: 50,
+            backdropFilter: 'blur(16px) saturate(180%)',
+            WebkitBackdropFilter: 'blur(16px) saturate(180%)',
+          }}
+        >
+          <div style={{ display: 'flex', alignItems: 'center', gap: '0.75rem', marginRight: 'auto' }}>
+            <div
+              style={{
+                width: 28,
+                height: 28,
+                borderRadius: 'var(--clearify-radius-sm)',
+                background: 'var(--clearify-gradient)',
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                color: '#fff',
+              }}
+            >
+              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
+                <circle cx="12" cy="12" r="3" />
+                <path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z" />
+              </svg>
+            </div>
+            <span style={{ fontWeight: 700, fontSize: '1rem', color: 'var(--clearify-text)', letterSpacing: '-0.02em' }}>
+              Clearify Admin
+            </span>
+          </div>
+
+          <div style={{ display: 'flex', alignItems: 'center', gap: '0.375rem' }}>
+            <Link
+              to="/"
+              style={{
+                display: 'inline-flex',
+                alignItems: 'center',
+                gap: '0.375rem',
+                padding: '0.375rem 0.75rem',
+                borderRadius: 'var(--clearify-radius-sm)',
+                fontSize: '0.8125rem',
+                fontWeight: 500,
+                color: 'var(--clearify-text-secondary)',
+                textDecoration: 'none',
+                transition: 'color 0.15s, background-color 0.15s',
+              }}
+              onMouseEnter={(e) => {
+                e.currentTarget.style.color = 'var(--clearify-text)';
+                e.currentTarget.style.backgroundColor = 'var(--clearify-bg-secondary)';
+              }}
+              onMouseLeave={(e) => {
+                e.currentTarget.style.color = 'var(--clearify-text-secondary)';
+                e.currentTarget.style.backgroundColor = 'transparent';
+              }}
+            >
+              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+                <line x1="19" y1="12" x2="5" y2="12" />
+                <polyline points="12 19 5 12 12 5" />
+              </svg>
+              Back to docs
+            </Link>
+
+            <button
+              onClick={toggleTheme}
+              style={{
+                display: 'inline-flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                width: 36,
+                height: 36,
+                background: 'none',
+                border: 'none',
+                cursor: 'pointer',
+                borderRadius: 'var(--clearify-radius-sm)',
+                color: 'var(--clearify-text-secondary)',
+                transition: 'color 0.15s, background-color 0.15s',
+              }}
+              aria-label={`Switch to ${theme === 'light' ? 'dark' : 'light'} mode`}
+              onMouseEnter={(e) => {
+                e.currentTarget.style.color = 'var(--clearify-text)';
+                e.currentTarget.style.backgroundColor = 'var(--clearify-bg-secondary)';
+              }}
+              onMouseLeave={(e) => {
+                e.currentTarget.style.color = 'var(--clearify-text-secondary)';
+                e.currentTarget.style.backgroundColor = 'transparent';
+              }}
+            >
+              {theme === 'light' ? (
+                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+                  <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" />
+                </svg>
+              ) : (
+                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+                  <circle cx="12" cy="12" r="5" />
+                  <line x1="12" y1="1" x2="12" y2="3" />
+                  <line x1="12" y1="21" x2="12" y2="23" />
+                  <line x1="4.22" y1="4.22" x2="5.64" y2="5.64" />
+                  <line x1="18.36" y1="18.36" x2="19.78" y2="19.78" />
+                  <line x1="1" y1="12" x2="3" y2="12" />
+                  <line x1="21" y1="12" x2="23" y2="12" />
+                  <line x1="4.22" y1="19.78" x2="5.64" y2="18.36" />
+                  <line x1="18.36" y1="5.64" x2="19.78" y2="4.22" />
+                </svg>
+              )}
+            </button>
+          </div>
+        </header>
+
+        {/* Body: sidebar + content */}
+        <div style={{ display: 'flex', flex: 1 }}>
+          {/* Sidebar */}
+          <nav
+            style={{
+              width: 'var(--clearify-sidebar-width)',
+              borderRight: '1px solid var(--clearify-border)',
+              padding: '1rem 0.75rem',
+              flexShrink: 0,
+              backgroundColor: 'var(--clearify-bg)',
+            }}
+          >
+            <div style={{ fontSize: '0.6875rem', fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.05em', color: 'var(--clearify-text-tertiary)', padding: '0.5rem 0.75rem', marginBottom: '0.25rem' }}>
+              Navigation
+            </div>
+            {navItems.map((item) => {
+              const isActive = location.pathname === item.to;
+              return (
+                <Link
+                  key={item.to}
+                  to={item.to}
+                  style={{
+                    display: 'flex',
+                    alignItems: 'center',
+                    gap: '0.625rem',
+                    padding: '0.5rem 0.75rem',
+                    borderRadius: 'var(--clearify-radius-sm)',
+                    fontSize: '0.875rem',
+                    fontWeight: isActive ? 600 : 450,
+                    color: isActive ? 'var(--clearify-primary)' : 'var(--clearify-text-secondary)',
+                    backgroundColor: isActive ? 'var(--clearify-primary-soft)' : 'transparent',
+                    textDecoration: 'none',
+                    transition: 'background-color 0.15s, color 0.15s',
+                    marginBottom: '2px',
+                  }}
+                  onMouseEnter={(e) => {
+                    if (!isActive) {
+                      e.currentTarget.style.backgroundColor = 'var(--clearify-bg-secondary)';
+                      e.currentTarget.style.color = 'var(--clearify-text)';
+                    }
+                  }}
+                  onMouseLeave={(e) => {
+                    if (!isActive) {
+                      e.currentTarget.style.backgroundColor = 'transparent';
+                      e.currentTarget.style.color = 'var(--clearify-text-secondary)';
+                    }
+                  }}
+                >
+                  {item.icon}
+                  {item.label}
+                </Link>
+              );
+            })}
+          </nav>
+
+          {/* Main content */}
+          <main style={{ flex: 1, overflow: 'auto' }}>
+            <Outlet />
+          </main>
+        </div>
+      </div>
+    </>
+  );
+}
+
+export function AdminLayout() {
+  return (
+    <ThemeProvider mode="auto">
+      <AdminLayoutInner />
+    </ThemeProvider>
+  );
+}
+
+export default AdminLayout;