botdocs 0.1.0

package/src/styles/main.css

@@ -0,0 +1,532 @@
+/* Reset and base styles */
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+:root {
+  /* Colors - Light theme */
+  --bg-primary: #ffffff;
+  --bg-secondary: #f8f9fa;
+  --bg-tertiary: #e9ecef;
+  --text-primary: #212529;
+  --text-secondary: #6c757d;
+  --border-color: #dee2e6;
+  --link-color: #3b82f6;
+  --link-hover: #2563eb;
+  --code-bg: #f8f9fa;
+  --sidebar-width: 280px;
+  --content-max-width: 800px;
+}
+
+body {
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
+    Ubuntu, Cantarell, sans-serif;
+  line-height: 1.6;
+  color: var(--text-primary);
+  background: var(--bg-primary);
+}
+
+/* Layout */
+.layout {
+  display: flex;
+  min-height: 100vh;
+}
+
+/* Sidebar */
+.sidebar {
+  width: var(--sidebar-width);
+  background: var(--bg-secondary);
+  border-right: 1px solid var(--border-color);
+  padding: 2rem;
+  overflow-y: auto;
+  position: fixed;
+  height: 100vh;
+  left: 0;
+  top: 0;
+}
+
+.sidebar-header {
+  margin-bottom: 2rem;
+}
+
+.site-title {
+  font-size: 1.5rem;
+  font-weight: 700;
+  color: var(--text-primary);
+  margin-bottom: 0.5rem;
+}
+
+.site-description {
+  font-size: 0.875rem;
+  color: var(--text-secondary);
+}
+
+.sidebar-nav {
+  margin-top: 1.5rem;
+}
+
+.nav-list {
+  list-style: none;
+}
+
+.nav-list li {
+  margin-bottom: 0.5rem;
+}
+
+.nav-list a {
+  color: var(--text-primary);
+  text-decoration: none;
+  display: block;
+  padding: 0.5rem 0.75rem;
+  border-radius: 0.375rem;
+  transition: background-color 0.2s;
+}
+
+.nav-list a:hover {
+  background: var(--bg-tertiary);
+}
+
+.nav-list a.active {
+  background: var(--link-color);
+  color: white;
+  font-weight: 500;
+}
+
+/* Main Content */
+.main-content {
+  margin-left: var(--sidebar-width);
+  flex: 1;
+  padding: 3rem;
+}
+
+.content-wrapper {
+  max-width: var(--content-max-width);
+  margin: 0 auto;
+}
+
+/* Typography */
+h1, h2, h3, h4, h5, h6 {
+  margin-top: 2rem;
+  margin-bottom: 1rem;
+  font-weight: 600;
+  line-height: 1.3;
+  color: var(--text-primary);
+}
+
+h1 {
+  font-size: 2.5rem;
+  margin-top: 0;
+}
+
+h2 {
+  font-size: 2rem;
+  padding-bottom: 0.5rem;
+  border-bottom: 1px solid var(--border-color);
+}
+
+h3 {
+  font-size: 1.5rem;
+}
+
+h4 {
+  font-size: 1.25rem;
+}
+
+p {
+  margin-bottom: 1rem;
+}
+
+a {
+  color: var(--link-color);
+  text-decoration: none;
+}
+
+a:hover {
+  color: var(--link-hover);
+  text-decoration: underline;
+}
+
+/* Code */
+code {
+  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
+  font-size: 0.875rem;
+  background: var(--code-bg);
+  padding: 0.2rem 0.4rem;
+  border-radius: 0.25rem;
+}
+
+pre {
+  background: var(--code-bg);
+  padding: 1rem;
+  border-radius: 0.5rem;
+  overflow-x: auto;
+  margin: 1.5rem 0;
+  border: 1px solid var(--border-color);
+}
+
+pre code {
+  background: none;
+  padding: 0;
+}
+
+/* Blockquotes */
+blockquote {
+  border-left: 4px solid var(--link-color);
+  padding-left: 1rem;
+  margin: 1.5rem 0;
+  color: var(--text-secondary);
+  font-style: italic;
+}
+
+/* GitHub-style Alerts/Callouts */
+.markdown-alert {
+  padding: 1rem;
+  margin: 1.5rem 0;
+  border-left: 4px solid;
+  border-radius: 0.25rem;
+  background: var(--bg-secondary);
+}
+
+.markdown-alert-title {
+  font-weight: 600;
+  margin-bottom: 0.5rem;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+/* Hide the GitHub SVG icons */
+.markdown-alert-title svg {
+  display: none;
+}
+
+.markdown-alert-title::before {
+  font-size: 1.2rem;
+}
+
+.markdown-alert > *:last-child {
+  margin-bottom: 0;
+}
+
+/* Note - Blue */
+.markdown-alert-note {
+  border-left-color: #3b82f6;
+  background: rgba(59, 130, 246, 0.1);
+}
+
+.markdown-alert-note .markdown-alert-title {
+  color: #3b82f6;
+}
+
+.markdown-alert-note .markdown-alert-title::before {
+  content: 'ℹ️';
+}
+
+/* Tip - Green */
+.markdown-alert-tip {
+  border-left-color: #10b981;
+  background: rgba(16, 185, 129, 0.1);
+}
+
+.markdown-alert-tip .markdown-alert-title {
+  color: #10b981;
+}
+
+.markdown-alert-tip .markdown-alert-title::before {
+  content: '💡';
+}
+
+/* Important - Purple */
+.markdown-alert-important {
+  border-left-color: #8b5cf6;
+  background: rgba(139, 92, 246, 0.1);
+}
+
+.markdown-alert-important .markdown-alert-title {
+  color: #8b5cf6;
+}
+
+.markdown-alert-important .markdown-alert-title::before {
+  content: '❗';
+}
+
+/* Warning - Orange */
+.markdown-alert-warning {
+  border-left-color: #f59e0b;
+  background: rgba(245, 158, 11, 0.1);
+}
+
+.markdown-alert-warning .markdown-alert-title {
+  color: #f59e0b;
+}
+
+.markdown-alert-warning .markdown-alert-title::before {
+  content: '⚠️';
+}
+
+/* Caution - Red */
+.markdown-alert-caution {
+  border-left-color: #ef4444;
+  background: rgba(239, 68, 68, 0.1);
+}
+
+.markdown-alert-caution .markdown-alert-title {
+  color: #ef4444;
+}
+
+.markdown-alert-caution .markdown-alert-title::before {
+  content: '🔥';
+}
+
+/* Lists */
+ul, ol {
+  margin-left: 1.5rem;
+  margin-bottom: 1rem;
+}
+
+li {
+  margin-bottom: 0.5rem;
+}
+
+/* Task Lists */
+.task-list-item {
+  list-style: none;
+  margin-left: -1.5rem;
+}
+
+.task-list-item-checkbox {
+  margin-right: 0.5rem;
+  margin-left: 0.25rem;
+  cursor: pointer;
+}
+
+.task-list-item-checkbox[checked] {
+  accent-color: var(--link-color);
+}
+
+/* Footnotes */
+.footnotes {
+  margin-top: 3rem;
+  padding-top: 2rem;
+  border-top: 1px solid var(--border-color);
+  font-size: 0.875rem;
+  color: var(--text-secondary);
+}
+
+.footnotes-sep {
+  display: none;
+}
+
+.footnotes ol {
+  padding-left: 1.5rem;
+}
+
+.footnote-ref {
+  text-decoration: none;
+  font-weight: 600;
+}
+
+.footnote-ref a {
+  color: var(--link-color);
+  text-decoration: none;
+}
+
+.footnote-ref a:hover {
+  text-decoration: underline;
+}
+
+.footnote-backref {
+  text-decoration: none;
+  margin-left: 0.25rem;
+}
+
+sup.footnote-ref {
+  margin-left: 0.125rem;
+}
+
+/* Tables */
+table {
+  width: 100%;
+  border-collapse: collapse;
+  margin: 1.5rem 0;
+}
+
+th, td {
+  padding: 0.75rem;
+  text-align: left;
+  border: 1px solid var(--border-color);
+}
+
+th {
+  background: var(--bg-secondary);
+  font-weight: 600;
+}
+
+/* Images */
+img {
+  max-width: 100%;
+  height: auto;
+  border-radius: 0.5rem;
+  margin: 1rem 0;
+}
+
+/* Table of Contents */
+.toc {
+  background: var(--bg-secondary);
+  padding: 1.5rem;
+  border-radius: 0.5rem;
+  margin: 2rem 0;
+}
+
+.toc ul {
+  margin-left: 1rem;
+}
+
+/* Theme Toggle */
+.theme-toggle {
+  position: fixed;
+  top: 1rem;
+  right: 1rem;
+  width: 3rem;
+  height: 3rem;
+  border-radius: 50%;
+  background: var(--bg-secondary);
+  border: 1px solid var(--border-color);
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.2s;
+  z-index: 100;
+}
+
+.theme-toggle:hover {
+  background: var(--bg-tertiary);
+  transform: scale(1.1);
+}
+
+.theme-icon::before {
+  content: '☀️';
+  font-size: 1.5rem;
+}
+
+[data-theme='dark'] .theme-icon::before {
+  content: '🌙';
+}
+
+/* Doc metadata */
+.doc-meta {
+  color: var(--text-secondary);
+  font-size: 0.875rem;
+  margin-bottom: 2rem;
+  padding-bottom: 1rem;
+  border-bottom: 1px solid var(--border-color);
+}
+
+.doc-author {
+  margin-left: 1rem;
+}
+
+/* Doc navigation (prev/next) */
+.doc-navigation {
+  display: flex;
+  justify-content: space-between;
+  margin-top: 3rem;
+  padding-top: 2rem;
+  border-top: 1px solid var(--border-color);
+}
+
+.nav-prev,
+.nav-next {
+  padding: 0.75rem 1rem;
+  background: var(--bg-secondary);
+  border-radius: 0.5rem;
+  text-decoration: none;
+  color: var(--text-primary);
+  transition: background-color 0.2s;
+}
+
+.nav-prev:hover,
+.nav-next:hover {
+  background: var(--bg-tertiary);
+}
+
+.nav-next {
+  margin-left: auto;
+}
+
+/* Home page */
+.home-header {
+  text-align: center;
+  margin-bottom: 3rem;
+}
+
+.lead {
+  font-size: 1.25rem;
+  color: var(--text-secondary);
+  margin-top: 1rem;
+}
+
+.link-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+  gap: 1.5rem;
+  margin-top: 2rem;
+}
+
+.link-card {
+  padding: 1.5rem;
+  background: var(--bg-secondary);
+  border-radius: 0.5rem;
+  border: 1px solid var(--border-color);
+  text-decoration: none;
+  transition: all 0.2s;
+}
+
+.link-card:hover {
+  border-color: var(--link-color);
+  transform: translateY(-2px);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+}
+
+.link-card h3 {
+  margin: 0 0 0.5rem 0;
+  color: var(--text-primary);
+  font-size: 1.25rem;
+}
+
+.link-card p {
+  margin: 0;
+  color: var(--text-secondary);
+  font-size: 0.875rem;
+}
+
+/* Responsive */
+@media (max-width: 768px) {
+  .sidebar {
+    position: static;
+    width: 100%;
+    height: auto;
+    border-right: none;
+    border-bottom: 1px solid var(--border-color);
+  }
+
+  .main-content {
+    margin-left: 0;
+    padding: 1.5rem;
+  }
+
+  .layout {
+    flex-direction: column;
+  }
+
+  h1 {
+    font-size: 2rem;
+  }
+
+  h2 {
+    font-size: 1.5rem;
+  }
+}

package/src/styles/themes.css

@@ -0,0 +1,78 @@
+/* Dark theme colors */
+[data-theme='dark'] {
+  --bg-primary: #1a1a1a;
+  --bg-secondary: #2d2d2d;
+  --bg-tertiary: #404040;
+  --text-primary: #e4e4e7;
+  --text-secondary: #a1a1aa;
+  --border-color: #404040;
+  --link-color: #60a5fa;
+  --link-hover: #93c5fd;
+  --code-bg: #2d2d2d;
+}
+
+/* Dark theme alerts */
+[data-theme='dark'] .markdown-alert-note {
+  background: rgba(59, 130, 246, 0.15);
+}
+
+[data-theme='dark'] .markdown-alert-tip {
+  background: rgba(16, 185, 129, 0.15);
+}
+
+[data-theme='dark'] .markdown-alert-important {
+  background: rgba(139, 92, 246, 0.15);
+}
+
+[data-theme='dark'] .markdown-alert-warning {
+  background: rgba(245, 158, 11, 0.15);
+}
+
+[data-theme='dark'] .markdown-alert-caution {
+  background: rgba(239, 68, 68, 0.15);
+}
+
+/* Smooth theme transition */
+* {
+  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
+}
+
+/* Prevent transition on initial load */
+.no-transition * {
+  transition: none !important;
+}
+
+/* System preference detection */
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme='light']) {
+    --bg-primary: #1a1a1a;
+    --bg-secondary: #2d2d2d;
+    --bg-tertiary: #404040;
+    --text-primary: #e4e4e7;
+    --text-secondary: #a1a1aa;
+    --border-color: #404040;
+    --link-color: #60a5fa;
+    --link-hover: #93c5fd;
+    --code-bg: #2d2d2d;
+  }
+
+  :root:not([data-theme='light']) .markdown-alert-note {
+    background: rgba(59, 130, 246, 0.15);
+  }
+
+  :root:not([data-theme='light']) .markdown-alert-tip {
+    background: rgba(16, 185, 129, 0.15);
+  }
+
+  :root:not([data-theme='light']) .markdown-alert-important {
+    background: rgba(139, 92, 246, 0.15);
+  }
+
+  :root:not([data-theme='light']) .markdown-alert-warning {
+    background: rgba(245, 158, 11, 0.15);
+  }
+
+  :root:not([data-theme='light']) .markdown-alert-caution {
+    background: rgba(239, 68, 68, 0.15);
+  }
+}

package/src/templates/doc-page.html

@@ -0,0 +1,27 @@
+<article class="doc-page">
+  {{#if metadata.date}}
+  <div class="doc-meta">
+    <time datetime="{{metadata.date}}">{{metadata.date}}</time>
+    {{#if metadata.author}}
+    <span class="doc-author">by {{metadata.author}}</span>
+    {{/if}}
+  </div>
+  {{/if}}
+
+  <div class="doc-content">
+    {{html}}
+  </div>
+
+  <nav class="doc-navigation">
+    {{#if prevPage}}
+    <a href="{{prevPage.url}}" class="nav-prev">
+      ← {{prevPage.title}}
+    </a>
+    {{/if}}
+    {{#if nextPage}}
+    <a href="{{nextPage.url}}" class="nav-next">
+      {{nextPage.title}} →
+    </a>
+    {{/if}}
+  </nav>
+</article>

package/src/templates/index.html

@@ -0,0 +1,28 @@
+<div class="home-page">
+  <header class="home-header">
+    <h1>{{title}}</h1>
+    {{#if description}}
+    <p class="lead">{{description}}</p>
+    {{/if}}
+  </header>
+
+  <section class="home-content">
+    {{html}}
+  </section>
+
+  {{#if pages}}
+  <section class="quick-links">
+    <h2>Documentation</h2>
+    <div class="link-grid">
+      {{#each pages}}
+      <a href="{{url}}" class="link-card">
+        <h3>{{title}}</h3>
+        {{#if description}}
+        <p>{{description}}</p>
+        {{/if}}
+      </a>
+      {{/each}}
+    </div>
+  </section>
+  {{/if}}
+</div>

package/src/templates/layout.html

@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<html lang="en" data-theme="light">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta name="description" content="{{description}}">
+  <title>{{title}} - {{siteTitle}}</title>
+  <script>
+    // Apply theme immediately to prevent flash
+    (function() {
+      const savedTheme = localStorage.getItem('botdocs-theme');
+      const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+      const theme = savedTheme || (prefersDark ? 'dark' : 'light');
+      document.documentElement.setAttribute('data-theme', theme);
+    })();
+  </script>
+  <link rel="stylesheet" href="/assets/css/bundle.css">
+</head>
+<body>
+  <div class="layout">
+    <!-- Sidebar Navigation -->
+    <aside class="sidebar">
+      <div class="sidebar-header">
+        <h1 class="site-title">{{siteTitle}}</h1>
+        <p class="site-description">{{siteDescription}}</p>
+      </div>
+      <nav class="sidebar-nav">
+        {{navigation}}
+      </nav>
+    </aside>
+
+    <!-- Main Content -->
+    <main class="main-content">
+      <div class="content-wrapper">
+        {{content}}
+      </div>
+    </main>
+
+    <!-- Theme Toggle -->
+    <button class="theme-toggle" aria-label="Toggle dark mode">
+      <span class="theme-icon"></span>
+    </button>
+
+    {{#if chatEnabled}}
+    <!-- Chat Widget -->
+    <div class="chat-widget" id="chat-widget">
+      <button class="chat-toggle" id="chat-toggle" aria-label="Open chat">
+        <span class="chat-icon">💬</span>
+      </button>
+      <div class="chat-container" id="chat-container" style="display: none;">
+        <!-- Chat UI will be injected here -->
+      </div>
+    </div>
+    {{/if}}
+  </div>
+
+  <script type="module" src="/assets/js/bundle.js"></script>
+</body>
+</html>