@eldrforge/kodrdriv 0.0.7 → 0.0.10

package/docs/src/App.css

@@ -0,0 +1,387 @@
+/* Reset and base styles */
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+        'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+        sans-serif;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    line-height: 1.6;
+    color: #333;
+    background: #ffffff;
+}
+
+.app {
+    min-height: 100vh;
+    display: flex;
+    flex-direction: column;
+}
+
+/* Header styles */
+.header {
+    background: #000000;
+    color: white;
+    padding: 4rem 2rem;
+    text-align: center;
+    position: relative;
+    overflow: hidden;
+    border-bottom: 3px solid #333333;
+}
+
+.header::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") repeat;
+    opacity: 0.05;
+    z-index: 1;
+}
+
+.header-content {
+    position: relative;
+    z-index: 2;
+    max-width: 800px;
+    margin: 0 auto;
+}
+
+.header-main {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 1rem;
+    margin-bottom: 1rem;
+}
+
+.icon {
+    font-size: 3rem;
+    filter: drop-shadow(0 2px 4px rgba(255, 255, 255, 0.2));
+}
+
+.header h1 {
+    font-size: 3.5rem;
+    font-weight: 700;
+    margin: 0;
+    color: #ffffff;
+    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+}
+
+.subtitle {
+    font-size: 1.25rem;
+    margin-bottom: 2rem;
+    opacity: 0.9;
+    font-weight: 300;
+    color: #cccccc;
+}
+
+.header-links {
+    display: flex;
+    gap: 2rem;
+    justify-content: center;
+    flex-wrap: wrap;
+}
+
+.header-links a {
+    color: white;
+    text-decoration: none;
+    font-weight: 500;
+    padding: 0.75rem 2rem;
+    border: 2px solid rgba(255, 255, 255, 0.3);
+    border-radius: 50px;
+    transition: all 0.3s ease;
+    backdrop-filter: blur(10px);
+    background: rgba(255, 255, 255, 0.1);
+}
+
+.header-links a:hover {
+    background: rgba(255, 255, 255, 0.2);
+    border-color: rgba(255, 255, 255, 0.6);
+    transform: translateY(-2px);
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
+}
+
+/* Main content */
+.main {
+    flex: 1;
+    padding: 0;
+    background: #ffffff;
+}
+
+.container {
+    width: 100%;
+    max-width: none;
+    margin: 0;
+    background: white;
+    border-radius: 0;
+    box-shadow: none;
+    overflow: visible;
+}
+
+/* Markdown content styling */
+.markdown-content {
+    padding: 3rem 4rem;
+    font-size: 1rem;
+    line-height: 1.7;
+    color: #374151;
+    width: 100%;
+}
+
+.markdown-content h1,
+.markdown-content h2,
+.markdown-content h3,
+.markdown-content h4,
+.markdown-content h5,
+.markdown-content h6 {
+    color: #1f2937;
+    font-weight: 600;
+    margin-top: 2rem;
+    margin-bottom: 1rem;
+    line-height: 1.4;
+}
+
+.markdown-content h1 {
+    font-size: 2.5rem;
+    border-bottom: 3px solid #e5e7eb;
+    padding-bottom: 0.5rem;
+    margin-top: 0;
+}
+
+.markdown-content h2 {
+    font-size: 2rem;
+    border-bottom: 2px solid #e5e7eb;
+    padding-bottom: 0.3rem;
+}
+
+.markdown-content h3 {
+    font-size: 1.5rem;
+}
+
+.markdown-content h4 {
+    font-size: 1.25rem;
+}
+
+.markdown-content p {
+    margin-bottom: 1.5rem;
+}
+
+.markdown-content ul,
+.markdown-content ol {
+    margin: 1rem 0;
+    padding-left: 2rem;
+}
+
+.markdown-content li {
+    margin-bottom: 0.5rem;
+}
+
+.markdown-content blockquote {
+    border-left: 4px solid #333333;
+    background: #f8fafc;
+    padding: 1rem 1.5rem;
+    margin: 1.5rem 0;
+    font-style: italic;
+    color: #4b5563;
+}
+
+.markdown-content code {
+    background: #f3f4f6;
+    padding: 0.2rem 0.4rem;
+    border-radius: 4px;
+    font-family: 'Fira Code', 'Monaco', 'Menlo', monospace;
+    font-size: 0.875rem;
+    color: #000000;
+}
+
+.markdown-content pre {
+    margin: 1.5rem 0;
+    border-radius: 8px;
+    overflow: hidden;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+}
+
+.markdown-content pre code {
+    background: none;
+    padding: 0;
+    color: inherit;
+    font-size: 0.875rem;
+}
+
+.markdown-content table {
+    width: 100%;
+    border-collapse: collapse;
+    margin: 1.5rem 0;
+    border: 1px solid #e5e7eb;
+    border-radius: 8px;
+    overflow: hidden;
+}
+
+.markdown-content th,
+.markdown-content td {
+    padding: 0.75rem 1rem;
+    text-align: left;
+    border-bottom: 1px solid #e5e7eb;
+}
+
+.markdown-content th {
+    background: #f9fafb;
+    font-weight: 600;
+    color: #374151;
+}
+
+.markdown-content a {
+    color: #000000;
+    text-decoration: none;
+    font-weight: 500;
+    border-bottom: 1px solid transparent;
+    transition: all 0.2s ease;
+}
+
+.markdown-content a:hover {
+    color: #333333;
+    border-bottom-color: #333333;
+}
+
+.markdown-content img {
+    max-width: 100%;
+    height: auto;
+    border-radius: 8px;
+    margin: 1rem 0;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+}
+
+.markdown-content hr {
+    border: none;
+    height: 2px;
+    background: linear-gradient(90deg, transparent, #e5e7eb, transparent);
+    margin: 3rem 0;
+}
+
+/* Footer */
+.footer {
+    background: #f8f9fa;
+    color: #6c757d;
+    padding: 2rem;
+    text-align: center;
+    border-top: 1px solid #e9ecef;
+}
+
+.footer p {
+    margin-bottom: 0.5rem;
+}
+
+.footer a {
+    color: #000000;
+    text-decoration: none;
+    font-weight: 500;
+}
+
+.footer a:hover {
+    color: #333333;
+    text-decoration: underline;
+}
+
+.license {
+    font-size: 0.875rem;
+    opacity: 0.7;
+}
+
+/* Loading and error states */
+.loading-spinner {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    min-height: 50vh;
+    gap: 2rem;
+}
+
+.spinner {
+    width: 50px;
+    height: 50px;
+    border: 4px solid #f3f3f3;
+    border-top: 4px solid #000000;
+    border-radius: 50%;
+    animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+    0% {
+        transform: rotate(0deg);
+    }
+
+    100% {
+        transform: rotate(360deg);
+    }
+}
+
+.error-message {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    min-height: 50vh;
+    gap: 1rem;
+    text-align: center;
+    padding: 2rem;
+}
+
+.error-message h2 {
+    color: #e53e3e;
+    font-size: 1.5rem;
+}
+
+.error-message p {
+    color: #718096;
+    max-width: 400px;
+}
+
+/* Responsive design */
+@media (max-width: 768px) {
+    .header {
+        padding: 3rem 1rem;
+    }
+
+    .header h1 {
+        font-size: 2.5rem;
+    }
+
+    .header-main {
+        flex-direction: column;
+        gap: 0.5rem;
+    }
+
+    .icon {
+        font-size: 2rem;
+    }
+
+    .subtitle {
+        font-size: 1.1rem;
+    }
+
+    .header-links {
+        gap: 1rem;
+    }
+
+    .header-links a {
+        padding: 0.5rem 1.5rem;
+    }
+
+    .markdown-content {
+        padding: 1.5rem;
+    }
+
+    .markdown-content h1 {
+        font-size: 2rem;
+    }
+
+    .markdown-content h2 {
+        font-size: 1.5rem;
+    }
+}

package/docs/src/App.tsx

@@ -0,0 +1,60 @@
+import { BrowserRouter as Router, Routes, Route } from 'react-router-dom'
+import Navigation from './components/Navigation'
+import DocumentPage from './components/DocumentPage'
+import './App.css'
+
+function App() {
+    return (
+        <Router>
+            <div className="app">
+                <header className="header">
+                    <div className="header-content">
+                        <div className="header-main">
+                            <img
+                                src="./kodrdriv-logo.svg"
+                                alt="KodrDriv Logo"
+                                width="64"
+                                height="64"
+                                style={{ filter: 'invert(1)' }}
+                            />
+                            <h1>KodrDriv</h1>
+                        </div>
+                        <p className="subtitle">Intelligent Git Release Notes & Change Logs</p>
+                        <div className="header-links">
+                            <a href="https://github.com/calenvarek/kodrdriv" target="_blank" rel="noopener noreferrer">
+                                GitHub
+                            </a>
+                            <a href="https://www.npmjs.com/package/@eldrforge/kodrdriv" target="_blank" rel="noopener noreferrer">
+                                NPM
+                            </a>
+                        </div>
+                    </div>
+                </header>
+
+                <Navigation />
+
+                <main className="main">
+                    <div className="container">
+                        <Routes>
+                            <Route path="/*" element={<DocumentPage />} />
+                        </Routes>
+                    </div>
+                </main>
+
+                <footer className="footer">
+                    <div className="container">
+                        <p>
+                            Built with ❤️ by{' '}
+                            <a href="https://github.com/calenvarek" target="_blank" rel="noopener noreferrer">
+                                Calen Varek
+                            </a>
+                        </p>
+                        <p className="license">Licensed under Apache-2.0</p>
+                    </div>
+                </footer>
+            </div>
+        </Router>
+    )
+}
+
+export default App 

package/docs/src/components/DocumentPage.tsx

@@ -0,0 +1,56 @@
+import { useState, useEffect } from 'react'
+import { useParams } from 'react-router-dom'
+import LoadingSpinner from './LoadingSpinner'
+import ErrorMessage from './ErrorMessage'
+import MarkdownRenderer from './MarkdownRenderer'
+import { navigationItems } from './Navigation'
+
+function DocumentPage() {
+    const { '*': splat } = useParams()
+    const [content, setContent] = useState<string>('')
+    const [loading, setLoading] = useState(true)
+    const [error, setError] = useState<string | null>(null)
+
+    // Determine which file to load based on the current path
+    const currentPath = splat ? `/${splat}` : '/'
+    const currentItem = navigationItems.find(item => item.path === currentPath)
+    const fileName = currentItem?.file || 'README.md'
+
+    useEffect(() => {
+        setLoading(true)
+        setError(null)
+
+        // Get the base path from the current URL or use the import.meta.env.BASE_URL
+        const basePath = import.meta.env.BASE_URL || '/'
+        const fileUrl = `${basePath}${fileName}`
+
+        // Fetch the markdown file from the public directory
+        fetch(fileUrl)
+            .then(response => {
+                if (!response.ok) {
+                    throw new Error(`Failed to fetch ${fileName}: ${response.status}`)
+                }
+                return response.text()
+            })
+            .then(text => {
+                setContent(text)
+                setLoading(false)
+            })
+            .catch(err => {
+                setError(err.message)
+                setLoading(false)
+            })
+    }, [fileName])
+
+    if (loading) {
+        return <LoadingSpinner />
+    }
+
+    if (error) {
+        return <ErrorMessage message={error} />
+    }
+
+    return <MarkdownRenderer content={content} />
+}
+
+export default DocumentPage 

package/docs/src/components/ErrorMessage.tsx

@@ -0,0 +1,15 @@
+interface ErrorMessageProps {
+    message: string
+}
+
+function ErrorMessage({ message }: ErrorMessageProps) {
+    return (
+        <div className="error-message">
+            <h2>⚠️ Error Loading Documentation</h2>
+            <p>{message}</p>
+            <p>Please try refreshing the page or check back later.</p>
+        </div>
+    )
+}
+
+export default ErrorMessage 

package/docs/src/components/LoadingSpinner.tsx

@@ -0,0 +1,14 @@
+interface LoadingSpinnerProps {
+    message?: string
+}
+
+function LoadingSpinner({ message = "Loading documentation..." }: LoadingSpinnerProps) {
+    return (
+        <div className="loading-spinner">
+            <div className="spinner"></div>
+            <p>{message}</p>
+        </div>
+    )
+}
+
+export default LoadingSpinner 

package/docs/src/components/MarkdownRenderer.tsx

@@ -0,0 +1,56 @@
+import ReactMarkdown from 'react-markdown'
+import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter'
+import { tomorrow } from 'react-syntax-highlighter/dist/esm/styles/prism'
+import remarkGfm from 'remark-gfm'
+
+interface MarkdownRendererProps {
+    content: string
+}
+
+function MarkdownRenderer({ content }: MarkdownRendererProps) {
+    return (
+        <div className="markdown-content">
+            <ReactMarkdown
+                remarkPlugins={[remarkGfm]}
+                components={{
+                    code({ node, className, children, ...props }: any) {
+                        const match = /language-(\w+)/.exec(className || '')
+                        const inline = !match
+                        return !inline && match ? (
+                            <SyntaxHighlighter
+                                style={tomorrow as any}
+                                language={match[1]}
+                                PreTag="div"
+                                {...props}
+                            >
+                                {String(children).replace(/\n$/, '')}
+                            </SyntaxHighlighter>
+                        ) : (
+                            <code className={className} {...props}>
+                                {children}
+                            </code>
+                        )
+                    },
+                    // Customize link behavior to open external links in new tabs
+                    a({ href, children, ...props }) {
+                        const isExternal = href?.startsWith('http') || href?.startsWith('//')
+                        return (
+                            <a
+                                href={href}
+                                target={isExternal ? '_blank' : undefined}
+                                rel={isExternal ? 'noopener noreferrer' : undefined}
+                                {...props}
+                            >
+                                {children}
+                            </a>
+                        )
+                    },
+                }}
+            >
+                {content}
+            </ReactMarkdown>
+        </div>
+    )
+}
+
+export default MarkdownRenderer 

package/docs/src/components/Navigation.css

@@ -0,0 +1,73 @@
+.navigation {
+    background: #000000;
+    padding: 0;
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+    position: sticky;
+    top: 0;
+    z-index: 100;
+    border-bottom: 1px solid #333333;
+}
+
+.nav-container {
+    width: 100%;
+    max-width: none;
+    margin: 0;
+    padding: 0 2rem;
+}
+
+.nav-list {
+    display: flex;
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    gap: 0;
+    overflow-x: auto;
+    scrollbar-width: none;
+    -ms-overflow-style: none;
+}
+
+.nav-list::-webkit-scrollbar {
+    display: none;
+}
+
+.nav-item {
+    flex-shrink: 0;
+}
+
+.nav-link {
+    display: block;
+    padding: 1rem 1.5rem;
+    color: rgba(255, 255, 255, 0.9);
+    text-decoration: none;
+    font-weight: 500;
+    font-size: 0.95rem;
+    border-radius: 0;
+    transition: all 0.2s ease;
+    position: relative;
+    white-space: nowrap;
+    border-bottom: 3px solid transparent;
+}
+
+.nav-link:hover {
+    color: white;
+    background: #333333;
+    border-bottom-color: #666666;
+}
+
+.nav-link.active {
+    color: white;
+    background: #333333;
+    font-weight: 600;
+    border-bottom-color: white;
+}
+
+@media (max-width: 768px) {
+    .nav-container {
+        padding: 0 1rem;
+    }
+
+    .nav-link {
+        padding: 0.75rem 1rem;
+        font-size: 0.9rem;
+    }
+}

package/docs/src/components/Navigation.tsx

@@ -0,0 +1,36 @@
+import { Link, useLocation } from 'react-router-dom'
+import './Navigation.css'
+
+const navigationItems = [
+    { path: '/', label: 'Getting Started', file: 'README.md' },
+    { path: '/commands', label: 'Commands', file: 'commands.md' },
+    { path: '/configuration', label: 'Configuration', file: 'configuration.md' },
+    { path: '/advanced-usage', label: 'Advanced Usage', file: 'advanced-usage.md' },
+    { path: '/examples', label: 'Examples', file: 'examples.md' },
+]
+
+function Navigation() {
+    const location = useLocation()
+
+    return (
+        <nav className="navigation">
+            <div className="nav-container">
+                <ul className="nav-list">
+                    {navigationItems.map((item) => (
+                        <li key={item.path} className="nav-item">
+                            <Link
+                                to={item.path}
+                                className={`nav-link ${location.pathname === item.path ? 'active' : ''}`}
+                            >
+                                {item.label}
+                            </Link>
+                        </li>
+                    ))}
+                </ul>
+            </div>
+        </nav>
+    )
+}
+
+export default Navigation
+export { navigationItems }