@marlinjai/clearify 1.5.0

package/src/theme/Header.tsx

@@ -0,0 +1,177 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+import { useTheme } from './ThemeProvider.js';
+import { Search } from './Search.js';
+
+interface HeaderProps {
+  name: string;
+  links?: { github?: string; [key: string]: string | undefined };
+  logo?: { light?: string; dark?: string };
+  onMenuToggle: () => void;
+}
+
+export function Header({ name, links, logo, onMenuToggle }: HeaderProps) {
+  const { theme, toggleTheme } = useTheme();
+
+  return (
+    <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%)',
+      }}
+    >
+      <button
+        onClick={onMenuToggle}
+        aria-label="Toggle menu"
+        style={{
+          display: 'none',
+          background: 'none',
+          border: 'none',
+          cursor: 'pointer',
+          padding: '0.5rem',
+          color: 'var(--clearify-text)',
+          borderRadius: 'var(--clearify-radius-sm)',
+          transition: 'background-color 0.15s',
+        }}
+        className="clearify-menu-btn"
+        onMouseEnter={(e) => (e.currentTarget.style.backgroundColor = 'var(--clearify-bg-secondary)')}
+        onMouseLeave={(e) => (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">
+          <line x1="4" y1="6" x2="20" y2="6" />
+          <line x1="4" y1="12" x2="20" y2="12" />
+          <line x1="4" y1="18" x2="20" y2="18" />
+        </svg>
+      </button>
+
+      <Link
+        to="/"
+        style={{
+          fontWeight: 700,
+          fontSize: '1rem',
+          color: 'var(--clearify-text)',
+          textDecoration: 'none',
+          marginRight: 'auto',
+          letterSpacing: '-0.02em',
+          display: 'flex',
+          alignItems: 'center',
+          gap: '0.5rem',
+        }}
+      >
+        {logo && (logo.light || logo.dark) ? (
+          <img
+            src={theme === 'dark' && logo.dark ? logo.dark : logo.light || logo.dark}
+            alt={name}
+            style={{ maxHeight: 28, width: 'auto', display: 'block' }}
+          />
+        ) : (
+          <span
+            style={{
+              display: 'inline-flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              width: 24,
+              height: 24,
+              borderRadius: 'var(--clearify-radius-sm)',
+              background: 'var(--clearify-gradient)',
+              color: '#fff',
+              fontSize: '0.6875rem',
+              fontWeight: 800,
+            }}
+          >
+            {name.charAt(0).toUpperCase()}
+          </span>
+        )}
+        {name}
+      </Link>
+
+      <div style={{ display: 'flex', alignItems: 'center', gap: '0.375rem' }}>
+        <Search />
+
+        {links?.github && (
+          <a
+            href={links.github}
+            target="_blank"
+            rel="noopener noreferrer"
+            aria-label="GitHub"
+            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="currentColor">
+              <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z" />
+            </svg>
+          </a>
+        )}
+
+        <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>
+  );
+}

package/src/theme/Layout.tsx

@@ -0,0 +1,44 @@
+import React, { useState } from 'react';
+import { Header } from './Header.js';
+import { Sidebar } from './Sidebar.js';
+import { Content } from './Content.js';
+import { TableOfContents } from './TableOfContents.js';
+import { Footer } from './Footer.js';
+import { ThemeProvider } from './ThemeProvider.js';
+import type { ClearifyConfig, SectionNavigation } from '../types/index.js';
+
+interface LayoutProps {
+  config: ClearifyConfig;
+  sections: SectionNavigation[];
+  children: React.ReactNode;
+}
+
+export function Layout({ config, sections, children }: LayoutProps) {
+  const [sidebarOpen, setSidebarOpen] = useState(false);
+
+  return (
+    <ThemeProvider mode={config.theme.mode}>
+      {/* Subtle gradient mesh background */}
+      <div className="clearify-bg-mesh" aria-hidden="true" />
+
+      <div style={{ display: 'flex', flexDirection: 'column', minHeight: '100vh' }}>
+        <Header
+          name={config.name}
+          links={config.links}
+          logo={config.logo}
+          onMenuToggle={() => setSidebarOpen(!sidebarOpen)}
+        />
+        <div style={{ display: 'flex', flex: 1 }}>
+          <Sidebar
+            sections={sections}
+            open={sidebarOpen}
+            onClose={() => setSidebarOpen(false)}
+          />
+          <Content>{children}</Content>
+          <TableOfContents />
+        </div>
+        <Footer name={config.name} links={config.links} />
+      </div>
+    </ThemeProvider>
+  );
+}

package/src/theme/MDXComponents.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import { Breadcrumbs } from './components/Breadcrumbs.js';
+import { Callout } from './components/Callout.js';
+import { Tabs, Tab } from './components/Tabs.js';
+import { Steps, Step } from './components/Steps.js';
+import { Card, CardGroup } from './components/Card.js';
+import { CodeGroup } from './components/CodeGroup.js';
+import { Mermaid } from './components/Mermaid.js';
+import { MermaidStatic } from './components/MermaidStatic.js';
+import { OpenAPI } from './components/OpenAPI.js';
+import { Accordion, AccordionGroup } from './components/Accordion.js';
+import { Badge } from './components/Badge.js';
+import { Tooltip } from './components/Tooltip.js';
+import { Columns, Column } from './components/Columns.js';
+import { Frame } from './components/Frame.js';
+import { CodeBlock } from './CodeBlock.js';
+
+export const mdxComponents = {
+  Breadcrumbs,
+  Callout,
+  Tabs,
+  Tab,
+  Steps,
+  Step,
+  Card,
+  CardGroup,
+  CodeGroup,
+  Mermaid,
+  MermaidStatic,
+  OpenAPI,
+  Accordion,
+  AccordionGroup,
+  Badge,
+  Tooltip,
+  Columns,
+  Column,
+  Frame,
+  // Override default pre element with CodeBlock
+  pre: (props: React.HTMLAttributes<HTMLPreElement>) => <CodeBlock {...props} />,
+};

package/src/theme/NotFound.tsx

@@ -0,0 +1,246 @@
+import React, { useMemo } from 'react';
+import { Link, useLocation } from 'react-router-dom';
+import routes from 'virtual:clearify/routes';
+
+function levenshtein(a: string, b: string): number {
+  const m = a.length;
+  const n = b.length;
+  const dp: number[][] = Array.from({ length: m + 1 }, () => Array(n + 1).fill(0));
+  for (let i = 0; i <= m; i++) dp[i][0] = i;
+  for (let j = 0; j <= n; j++) dp[0][j] = j;
+  for (let i = 1; i <= m; i++) {
+    for (let j = 1; j <= n; j++) {
+      dp[i][j] =
+        a[i - 1] === b[j - 1]
+          ? dp[i - 1][j - 1]
+          : 1 + Math.min(dp[i - 1][j], dp[i][j - 1], dp[i - 1][j - 1]);
+    }
+  }
+  return dp[m][n];
+}
+
+function findSimilarRoutes(currentPath: string, maxResults = 5) {
+  const normalizedCurrent = currentPath.toLowerCase().replace(/\/+$/, '') || '/';
+
+  const scored = routes
+    .filter((r) => r.path !== normalizedCurrent)
+    .map((r) => {
+      const normalizedRoute = r.path.toLowerCase().replace(/\/+$/, '') || '/';
+      const distance = levenshtein(normalizedCurrent, normalizedRoute);
+      // Also check segment overlap for better relevance
+      const currentSegments = normalizedCurrent.split('/').filter(Boolean);
+      const routeSegments = normalizedRoute.split('/').filter(Boolean);
+      const commonSegments = currentSegments.filter((s) => routeSegments.includes(s)).length;
+      // Lower score = better match. Weight segment overlap heavily.
+      const score = distance - commonSegments * 3;
+      return { route: r, score, distance };
+    })
+    .sort((a, b) => a.score - b.score)
+    .slice(0, maxResults);
+
+  return scored;
+}
+
+function formatTitle(route: { path: string; frontmatter: { title?: string } }): string {
+  if (route.frontmatter.title) return route.frontmatter.title;
+  // Derive a title from the path
+  const segments = route.path.split('/').filter(Boolean);
+  if (segments.length === 0) return 'Home';
+  const last = segments[segments.length - 1];
+  return last
+    .replace(/[-_]/g, ' ')
+    .replace(/\b\w/g, (c) => c.toUpperCase());
+}
+
+export function NotFound() {
+  const location = useLocation();
+  const suggestions = useMemo(() => findSimilarRoutes(location.pathname), [location.pathname]);
+
+  return (
+    <div
+      style={{
+        textAlign: 'center',
+        padding: '6rem 1.5rem',
+        animation: 'clearify-fade-in 0.4s ease-out',
+      }}
+    >
+      <div
+        style={{
+          fontSize: '6rem',
+          fontWeight: 800,
+          letterSpacing: '-0.05em',
+          lineHeight: 1,
+          marginBottom: '0.75rem',
+          background: 'var(--clearify-gradient)',
+          WebkitBackgroundClip: 'text',
+          WebkitTextFillColor: 'transparent',
+          backgroundClip: 'text',
+        }}
+      >
+        404
+      </div>
+      <p
+        style={{
+          fontSize: '1.125rem',
+          color: 'var(--clearify-text-secondary)',
+          marginBottom: '1rem',
+          fontWeight: 400,
+        }}
+      >
+        This page could not be found.
+      </p>
+      <p
+        style={{
+          fontSize: '0.875rem',
+          color: 'var(--clearify-text-tertiary, var(--clearify-text-secondary))',
+          marginBottom: '2rem',
+          fontFamily: 'var(--font-mono)',
+          opacity: 0.7,
+        }}
+      >
+        {location.pathname}
+      </p>
+
+      {suggestions.length > 0 && (
+        <div
+          style={{
+            maxWidth: '28rem',
+            margin: '0 auto 2.5rem',
+            textAlign: 'left',
+          }}
+        >
+          <p
+            style={{
+              fontSize: '0.8125rem',
+              fontWeight: 600,
+              color: 'var(--clearify-text-secondary)',
+              marginBottom: '0.75rem',
+              textTransform: 'uppercase',
+              letterSpacing: '0.05em',
+            }}
+          >
+            Did you mean?
+          </p>
+          <div
+            style={{
+              display: 'flex',
+              flexDirection: 'column',
+              gap: '0.375rem',
+            }}
+          >
+            {suggestions.map(({ route }) => (
+              <Link
+                key={route.path}
+                to={route.path}
+                style={{
+                  display: 'flex',
+                  alignItems: 'center',
+                  gap: '0.625rem',
+                  padding: '0.625rem 0.875rem',
+                  borderRadius: 'var(--clearify-radius)',
+                  border: '1px solid var(--clearify-border)',
+                  background: 'var(--clearify-bg-secondary)',
+                  color: 'var(--clearify-text)',
+                  textDecoration: 'none',
+                  fontSize: '0.875rem',
+                  transition: 'border-color 0.2s, background 0.2s',
+                }}
+                className="clearify-404-suggestion"
+              >
+                <svg
+                  width="14"
+                  height="14"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="var(--clearify-primary)"
+                  strokeWidth="2"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  style={{ flexShrink: 0 }}
+                >
+                  <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" />
+                  <polyline points="14 2 14 8 20 8" />
+                  <line x1="16" y1="13" x2="8" y2="13" />
+                  <line x1="16" y1="17" x2="8" y2="17" />
+                </svg>
+                <span style={{ flex: 1 }}>
+                  <span style={{ fontWeight: 500 }}>{formatTitle(route)}</span>
+                  <span
+                    style={{
+                      display: 'block',
+                      fontSize: '0.75rem',
+                      color: 'var(--clearify-text-secondary)',
+                      marginTop: '0.125rem',
+                      fontFamily: 'var(--font-mono)',
+                    }}
+                  >
+                    {route.path}
+                  </span>
+                </span>
+                <svg
+                  width="14"
+                  height="14"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  strokeWidth="2"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  style={{ opacity: 0.4, flexShrink: 0 }}
+                >
+                  <polyline points="9 18 15 12 9 6" />
+                </svg>
+              </Link>
+            ))}
+          </div>
+        </div>
+      )}
+
+      <p
+        style={{
+          fontSize: '0.8125rem',
+          color: 'var(--clearify-text-secondary)',
+          marginBottom: '1.5rem',
+        }}
+      >
+        Try using the search to find what you are looking for.
+      </p>
+
+      <Link
+        to="/"
+        style={{
+          display: 'inline-flex',
+          alignItems: 'center',
+          gap: '0.5rem',
+          padding: '0.625rem 1.5rem',
+          borderRadius: 'var(--clearify-radius)',
+          background: 'var(--clearify-gradient)',
+          color: '#fff',
+          textDecoration: 'none',
+          fontWeight: 600,
+          fontSize: '0.875rem',
+          boxShadow: '0 2px 8px rgba(99, 102, 241, 0.25)',
+          transition: 'box-shadow 0.2s, transform 0.2s',
+        }}
+        className="clearify-404-btn"
+      >
+        <svg width="16" height="16" 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 home
+
+        <style>{`
+          .clearify-404-btn:hover {
+            box-shadow: 0 4px 16px rgba(99, 102, 241, 0.3) !important;
+            transform: translateY(-1px);
+          }
+          .clearify-404-suggestion:hover {
+            border-color: var(--clearify-primary) !important;
+            background: var(--clearify-bg-tertiary) !important;
+          }
+        `}</style>
+      </Link>
+    </div>
+  );
+}