@mgks/docmd 0.1.0

package/src/assets/css/theme-sky.css

@@ -0,0 +1,499 @@
+/* theme-sky.css - Sky theme for docmd inspired by Mintlify */
+
+:root [data-theme="light"] {
+    /* Font family */
+    --font-family-sans: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+    --font-family-mono: 'JetBrains Mono', 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
+    
+    /* Color palette */
+    --sky-primary: #0097ff;
+    --sky-primary-light: #e5f4ff;
+    --sky-primary-dark: #0078cc;
+    --sky-text: #1a1f36;
+    --sky-text-light: #4a5568;
+    --sky-text-lightest: #718096;
+    --sky-background: #ffffff;
+    --sky-background-alt: #f9fafb;
+    --sky-border: #e2e8f0;
+    --sky-border-light: #edf2f7;
+    
+    /* Apply colors to CSS variables */
+    --bg-color: var(--sky-background);
+    --text-color: var(--sky-text);
+    --sidebar-bg: #f7fafc;
+    --sidebar-text: var(--sky-text-light);
+    --sidebar-link-active-bg: #e5f4ff;
+    --sidebar-link-active-text: var(--sky-primary);
+    --link-color: var(--sky-primary);
+    --border-color: var(--sky-border);
+    --code-bg: var(--sky-primary-light);
+    --code-text: var(--sky-primary-dark);
+    --header-bg: var(--sky-background);
+    --header-border: var(--sky-border);
+    
+    /* Box shadows */
+    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+  }
+  
+  /* Dark mode */
+  :root [data-theme="dark"] {
+    /* Color palette dark */
+    --sky-primary: #3b82f6;
+    --sky-primary-light: #1e293b;
+    --sky-primary-dark: #60a5fa;
+    --sky-text: #f1f5f9;
+    --sky-text-light: #cbd5e1;
+    --sky-text-lightest: #94a3b8;
+    --sky-background: #0f172a;
+    --sky-background-alt: #1e293b;
+    --sky-border: #334155;
+    --sky-border-light: #1e293b;
+    
+    /* Apply colors to CSS variables */
+    --bg-color: var(--sky-background);
+    --text-color: var(--sky-text);
+    --sidebar-bg: #0f172a;
+    --sidebar-text: var(--sky-text-light);
+    --sidebar-link-active-bg: #1e293b;
+    --sidebar-link-active-text: var(--sky-primary);
+    --link-color: var(--sky-primary);
+    --border-color: var(--sky-border);
+    --code-bg: var(--sky-primary-light);
+    --code-text: var(--sky-text);
+    --header-bg: var(--sky-background);
+    --header-border: var(--sky-border);
+    
+    /* Box shadows for dark mode */
+    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
+    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
+    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -2px rgba(0, 0, 0, 0.2);
+  }
+  
+  /* Apply theme styles */
+  
+  /* Typography improvements */
+  body {
+    font-feature-settings: "salt", "ss01", "ss02";
+    letter-spacing: -0.01em;
+  }
+  
+  h1, h2, h3, h4, h5, h6 {
+    font-weight: 600;
+    line-height: 1.3;
+    margin-top: 2em;
+    margin-bottom: 0.5em;
+    color: var(--sky-text);
+  }
+  
+  h1 {
+    font-size: 2.25rem;
+    font-weight: 700;
+    margin-top: 0;
+  }
+  
+  h2 {
+    font-size: 1.75rem;
+    border-bottom: 1px solid var(--sky-border-light);
+    padding-bottom: 0.5rem;
+  }
+  
+  h3 {
+    font-size: 1.5rem;
+  }
+  
+  h4 {
+    font-size: 1.25rem;
+  }
+  
+  a {
+    color: var(--link-color);
+    text-decoration: none;
+    transition: color 0.2s ease;
+  }
+  
+  a:hover {
+    text-decoration: underline;
+  }
+  
+  p {
+      margin: .5em 0;
+      padding: .5em 0;
+      line-height: 1.7;
+  
+  }
+  
+  /* Sidebar refinements */
+  .sidebar {
+    box-shadow: var(--shadow-sm);
+  }
+  
+  .sidebar nav li a {
+    border-radius: 6px;
+    margin-bottom: 2px;
+    transition: all 0.2s ease;
+  }
+  
+  .sidebar nav li a:hover {
+    background-color: var(--sidebar-link-active-bg);
+    color: var(--sidebar-link-active-text);
+  }
+  
+  .sidebar nav li a.active {
+    background-color: var(--sidebar-link-active-bg);
+    color: var(--sidebar-link-active-text);
+    font-weight: 500;
+  }
+  
+  /* Content area */
+  .content-area {
+      padding: 2.5rem 5%;
+  
+  }
+  
+  /* Code blocks */
+  pre {
+    background-color: var(--code-bg);
+    border-radius: 8px;
+    margin: 1.5em 0;
+    padding: 1.25em;
+    box-shadow: var(--shadow-sm);
+  }
+  
+  code {
+    font-size: 0.9em;
+    border-radius: 4px;
+    padding: 0.2em 0.4em;
+  }
+  
+  /* Tables */
+  table {
+    width: 100%;
+    border-collapse: separate;
+    border-spacing: 0;
+    margin: 1.5em 0;
+    border-radius: 8px;
+    overflow: hidden;
+    box-shadow: var(--shadow-sm);
+  }
+  
+  th {
+    background-color: var(--sky-background-alt);
+    text-align: left;
+    font-weight: 600;
+    padding: 0.75rem 1rem;
+  }
+  
+  td {
+    padding: 0.75rem 1rem;
+    border-top: 1px solid var(--sky-border-light);
+  }
+  
+  tr:hover {
+    background-color: var(--sky-background-alt);
+  }
+  
+  /* Custom container styling for Sky theme */
+  .docmd-container {
+      padding: .5rem 1.5rem;
+      margin: 1.75rem 0;
+      border-radius: 10px;
+      border: 1px solid var(--sky-border-light);
+      background-color: var(--sky-background);
+      box-shadow: var(--shadow-sm);
+  
+  }
+  
+  /* Callouts */
+  .callout {
+      position: relative;
+      border: none;
+      border-left: 5px solid;
+      background-color: var(--card-bg);
+  
+  }
+  
+  .callout-title {
+    font-weight: 600;
+    margin-bottom: 0.75em;
+    display: flex;
+    align-items: center;
+  }
+  
+  .callout-title::before {
+    margin-right: 0.5rem;
+    font-size: 1.1em;
+  }
+  
+  .callout-info {
+    border-left-color: var(--sky-primary);
+  }
+  
+  .callout-info .callout-title::before {
+    content: "ℹ️";
+  }
+  
+  .callout-warning {
+    border-left-color: #f59e0b;
+  }
+  
+  .callout-warning .callout-title::before {
+    content: "⚠️";
+  }
+  
+  .callout-tip {
+    border-left-color: #10b981;
+  }
+  
+  .callout-tip .callout-title::before {
+    content: "💡";
+  }
+  
+  .callout-danger {
+    border-left-color: #ef4444;
+  }
+  
+  .callout-danger .callout-title::before {
+    content: "🚨";
+  }
+  
+  .callout-success {
+    border-left-color: #10b981;
+  }
+  
+  .callout-success .callout-title::before {
+    content: "✅";
+  }
+  
+  /* Cards */
+  .card {
+      border: 1px solid var(--sky-border);
+      background-color: var(--card-bg);
+      box-shadow: var(--text-color);
+      transition: transform 0.2s ease, box-shadow 0.2s ease;
+      overflow: hidden;
+      display: flex;
+      flex-direction: column;
+  
+  }
+  
+  .card:hover {
+    transform: translateY(-2px);
+    box-shadow: var(--shadow-lg);
+  }
+  
+  .card .card-title {
+      padding: .5rem 1.5rem 1rem;
+      border-bottom: 1px solid var(--sky-border);
+      font-weight: 600;
+      margin-top: 0;
+  
+  }
+  
+  .card .card-content {
+      flex: 1;
+      padding: .25rem;
+  
+  }
+  
+  .card .card-content > *:first-child {
+    margin-top: 0;
+  }
+  
+  .card .card-content > *:last-child {
+    margin-bottom: 0;
+  }
+  
+  /* Steps - Mintlify-inspired connected style */
+  .steps {
+    counter-reset: step-counter;
+    border: none;
+    background-color: transparent;
+    box-shadow: none;
+    padding: 0;
+    position: relative;
+    margin-left: 1rem;
+  }
+  
+  /* The vertical line connecting steps */
+  .steps::before {
+      content: '';
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      left: .5rem;
+      width: 2px;
+      background-color: var(--sky-border);
+      transform: translateX(-50%);
+      z-index: 0;
+  
+  }
+  
+  .steps .step {
+      position: relative;
+      padding: .5rem 2.5em;
+      border-radius: 10px;
+      margin-bottom: 1em;
+      display: block;
+      background-color: var(--card-bg);
+  
+  }
+  
+  .steps .step:last-child {
+    padding-bottom: 0;
+  }
+  
+  /* Fix step headers */
+  .steps h4,
+  .steps ol li:first-child, 
+  .steps ol li strong:first-child {
+      position: relative;
+      counter-increment: step-counter;
+      margin-bottom: 1rem;
+      font-weight: 600;
+      font-size: 1.1rem;
+      display: block;
+  
+  }
+  
+  .steps h4::before,
+  .steps ol li::before {
+    content: counter(step-counter);
+    position: absolute;
+    left: -2.5rem;
+    top: 0;
+    width: 2rem;
+    height: 2rem;
+    background-color: var(--sky-primary);
+    color: white;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 0.9rem;
+    font-weight: 600;
+    z-index: 1;
+  }
+  
+  /* Step content container */
+  .step-content {
+    display: block;
+    margin-top: 0.5rem;
+    margin-bottom: 1rem;
+  }
+  
+  .step-content > p,
+  .step-content > div,
+  .step-content > pre {
+    display: block;
+    margin-top: 0.5rem;
+    margin-bottom: 1rem;
+  }
+  
+  /* Additional styling for ordered lists in steps */
+  .steps ol {
+    list-style: none;
+    padding-left: 0;
+    margin-left: 0;
+    display: block;
+  }
+  
+  .steps ol li {
+    position: relative;
+    margin-bottom: 1rem;
+    display: block;
+  }
+  
+  /* Ensure the step number appears correctly */
+  .steps .step h4 {
+    display: block;
+    font-weight: 600;
+    margin-bottom: 1rem;
+  }
+  
+  /* Ensure content after the heading appears properly */
+  .steps .step > p,
+  .steps .step > div,
+  .steps .step > pre {
+      display: block;
+  
+  }
+  
+  /* Fix for numerical steps in ordered lists */
+  .steps .step ol {
+    counter-reset: none;
+    list-style: decimal;
+    padding-left: 1.5rem;
+    margin-top: 0.5rem;
+    display: block;
+  }
+  
+  .steps .step ol li {
+    padding-left: 0;
+    margin-bottom: 0.5rem;
+    display: list-item;
+  }
+  
+  /* Remove the pseudo-element from nested list items */
+  .steps .step ol li::before {
+    display: none;
+  }
+  
+  .steps pre {
+      margin-top: 1rem;
+      margin-bottom: 1rem;
+  
+  }
+  
+  .steps ol + * {
+      margin-top: 1rem;
+  
+  }
+  
+  /* Buttons */
+  button, .button {
+    padding: 0.5rem 1rem;
+    background-color: var(--sky-primary);
+    color: white;
+    border: none;
+    border-radius: 6px;
+    font-weight: 500;
+    cursor: pointer;
+    transition: background-color 0.2s ease;
+  }
+  
+  button:hover, .button:hover {
+    background-color: var(--sky-primary-dark);
+  }
+  
+  /* Theme toggle improvements */
+  .theme-toggle-button {
+    background-color: var(--sky-background-alt);
+    border-color: var(--sky-border-light);
+    border-radius: 6px;
+    transition: all 0.2s ease;
+  }
+  
+  .theme-toggle-button:hover {
+    background-color: var(--sky-primary-light);
+  }
+  
+  /* Mobile responsiveness improvements */
+  @media (max-width: 768px) {
+    .content-area {
+      padding: 1.5rem 1rem;
+    }
+    
+    h1 {
+      font-size: 1.75rem;
+    }
+    
+    h2 {
+      font-size: 1.5rem;
+    }
+    
+    h3 {
+      font-size: 1.25rem;
+    }
+  }  

package/src/assets/css/toc.css

@@ -0,0 +1,76 @@
+/* TOC Styles - Simplified Hyperlink Style */
+.toc-container {
+    margin: 0;
+    padding: 0;
+    border: none;
+    background-color: transparent;
+  }
+  
+  .toc-title {
+      margin-top: 0;
+      margin-bottom: 0.5rem;
+      font-size: 1rem;
+      font-weight: bold;
+      color: var(--text-muted);
+  
+  }
+  
+  .toc-list {
+    list-style: none;
+    padding-left: 0;
+    margin: 0;
+  }
+  
+  .toc-item {
+    margin-bottom: 0.25rem;
+    line-height: 1.4;
+  }
+  
+  .toc-link {
+      text-decoration: none;
+      color: var(--link-color);
+      display: inline-block;
+      padding: 0.1rem 0;
+      font-size: 0.9rem;
+      font-weight: 500;
+  
+  }
+  
+  .toc-link:hover {
+    text-decoration: underline;
+  }
+  
+  /* Indentation for different heading levels */
+  .toc-level-2 {
+    margin-left: 0;
+  }
+  
+  .toc-level-3 {
+    margin-left: 0.75rem;
+    font-size: 0.85rem;
+  }
+  
+  .toc-level-4 {
+    margin-left: 1.5rem;
+    font-size: 0.8rem;
+  }
+  
+  /* TOC sidebar should only display on active pages */
+  .toc-sidebar {
+      width: 180px;
+      position: sticky;
+      top: 2rem;
+      max-height: calc(100vh - 4rem);
+      overflow-y: auto;
+      align-self: flex-start;
+  
+  }
+  
+  /* Hide TOC on mobile */
+  @media (max-width: 1024px) {
+    .toc-sidebar {
+      width: 100%;
+      position: static;
+      margin-bottom: 1rem;
+    }
+  } 

package/src/assets/js/theme-toggle.js

@@ -0,0 +1,59 @@
+// src/assets/js/theme-toggle.js
+function applyTheme(theme, isInitialLoad = false) {
+  document.body.setAttribute('data-theme', theme);
+  if (!isInitialLoad) {
+    localStorage.setItem('docmd-theme', theme);
+  }
+
+  // Change highlight.js theme dynamically (if separate themes are loaded)
+  const highlightThemeLink = document.getElementById('highlight-theme');
+  if (highlightThemeLink) {
+    const isDark = theme.includes('dark');
+    const isLight = theme.includes('light');
+    const currentHref = highlightThemeLink.href;
+    
+    if (isDark && currentHref.includes('highlight-light.css')) {
+      highlightThemeLink.href = currentHref.replace('highlight-light.css', 'highlight-dark.css');
+    } else if (isLight && currentHref.includes('highlight-dark.css')) {
+      highlightThemeLink.href = currentHref.replace('highlight-dark.css', 'highlight-light.css');
+    }
+  }
+}
+
+function getInitialTheme() {
+  const storedTheme = localStorage.getItem('docmd-theme');
+  if (storedTheme) {
+    return storedTheme;
+  }
+  // The server sets the initial data-theme based on config.theme.defaultMode.
+  // We respect localStorage first, then what the server provided.
+  // Optionally, could check prefers-color-scheme if neither is set, but defaultMode covers this.
+  return document.body.getAttribute('data-theme') || 'light';
+}
+
+document.addEventListener('DOMContentLoaded', () => {
+  // Apply initial theme (respecting localStorage over server-rendered if set)
+  const initialTheme = getInitialTheme();
+  applyTheme(initialTheme, true); // true indicates it's the initial load
+
+  const themeToggleButton = document.getElementById('theme-toggle-button');
+  if (themeToggleButton) {
+    themeToggleButton.addEventListener('click', () => {
+      let currentTheme = document.body.getAttribute('data-theme');
+      
+      // Handle both regular themes and sky theme variants
+      let newTheme;
+      if (currentTheme === 'light') {
+        newTheme = 'dark';
+      } else if (currentTheme === 'dark') {
+        newTheme = 'light';
+      } else if (currentTheme === 'sky-light') {
+        newTheme = 'sky-dark';
+      } else if (currentTheme === 'sky-dark') {
+        newTheme = 'sky-light';
+      }
+      
+      applyTheme(newTheme); // isInitialLoad is false here, so it saves to localStorage
+    });
+  }
+});