docyard 0.1.0 → 0.2.0

data/lib/docyard/templates/assets/css/variables.css

@@ -0,0 +1,114 @@
+/* Design Tokens */
+
+:root {
+  /* Colors - Light Theme */
+  --color-bg: #ffffff;
+  --color-bg-secondary: #f9fafb;
+  --color-bg-tertiary: #f3f4f6;
+  --color-sidebar-bg: #f8fafc;
+  --color-text: #0d1117;
+  --color-text-secondary: #57606a;
+  --color-text-tertiary: #8c959f;
+  --color-border: #e4e7eb;
+  --color-border-secondary: #f3f4f6;
+  --color-primary: #2563eb;
+  --color-primary-hover: #1d4ed8;
+  --color-primary-light: #eff6ff;
+  --color-link: #0969da;
+  --color-link-hover: #0550ae;
+
+  /* Code colors */
+  --color-code-bg: #f4f4f5;
+  --color-code-text: #18181b;
+  --color-code-border: transparent;
+
+  /* Semantic colors */
+  --color-success: #116329;
+  --color-success-bg: #dafbe1;
+  --color-warning: #7d4e00;
+  --color-warning-bg: #fff8c5;
+  --color-error: #cf222e;
+  --color-error-bg: #ffebe9;
+  --color-info: #0969da;
+  --color-info-bg: #ddf4ff;
+
+  /* Typography */
+  --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
+  --font-mono: ui-monospace, 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Menlo, Consolas, 'Courier New', monospace;
+
+  /* Font sizes */
+  --font-size-xs: 0.75rem;    /* 12px */
+  --font-size-sm: 0.875rem;   /* 14px */
+  --font-size-base: 1rem;     /* 16px */
+  --font-size-lg: 1.125rem;   /* 18px */
+  --font-size-xl: 1.25rem;    /* 20px */
+  --font-size-2xl: 1.5rem;    /* 24px */
+  --font-size-3xl: 1.875rem;  /* 30px */
+  --font-size-4xl: 2.25rem;   /* 36px */
+
+  /* Font weights */
+  --font-weight-normal: 400;
+  --font-weight-medium: 500;
+  --font-weight-semibold: 600;
+  --font-weight-bold: 700;
+
+  /* Line heights */
+  --line-height-tight: 1.25;
+  --line-height-normal: 1.5;
+  --line-height-relaxed: 1.75;
+
+  /* Spacing scale */
+  --space-1: 0.25rem;   /* 4px */
+  --space-2: 0.5rem;    /* 8px */
+  --space-3: 0.75rem;   /* 12px */
+  --space-4: 1rem;      /* 16px */
+  --space-5: 1.25rem;   /* 20px */
+  --space-6: 1.5rem;    /* 24px */
+  --space-8: 2rem;      /* 32px */
+  --space-10: 2.5rem;   /* 40px */
+  --space-12: 3rem;     /* 48px */
+  --space-16: 4rem;     /* 64px */
+  --space-20: 5rem;     /* 80px */
+
+  /* Layout */
+  --sidebar-width: 288px;
+  --header-height: 64px;
+  --content-max-width: 800px;
+  --layout-max-width: 1440px;
+
+  /* Border radius */
+  --radius-sm: 0.25rem;   /* 4px */
+  --radius-md: 0.375rem;  /* 6px */
+  --radius-lg: 0.5rem;    /* 8px */
+  --radius-xl: 0.75rem;   /* 12px */
+
+  /* Shadows */
+  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1);
+  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1);
+
+  /* Transitions */
+  --transition-fast: 200ms cubic-bezier(0.4, 0, 0.2, 1);
+  --transition-base: 250ms cubic-bezier(0.4, 0, 0.2, 1);
+  --transition-slow: 350ms cubic-bezier(0.4, 0, 0.2, 1);
+
+  /* Z-index scale */
+  --z-base: 0;
+  --z-header: 20;
+  --z-secondary-header: 25;
+  --z-overlay: 28;
+  --z-sidebar: 30;
+  --z-dropdown: 40;
+  --z-modal: 50;
+  --z-tooltip: 60;
+}
+
+/* Mobile breakpoint adjustments */
+@media (max-width: 1024px) {
+  :root {
+    --sidebar-width: 100%;
+    --header-height: 56px;
+    --font-size-3xl: 1.5rem;   /* Smaller on mobile */
+    --font-size-4xl: 1.875rem; /* Smaller on mobile */
+  }
+}

data/lib/docyard/templates/assets/js/theme.js

@@ -1 +1,193 @@
-console.log('Docyard loaded');
+// Docyard Theme JavaScript
+
+(function() {
+  'use strict';
+
+  function initMobileMenu() {
+    const toggle = document.querySelector('.secondary-header-menu');
+    const sidebar = document.querySelector('.sidebar');
+    const overlay = document.querySelector('.mobile-overlay');
+
+    if (!toggle || !sidebar || !overlay) return;
+
+    function openMenu() {
+      sidebar.classList.add('is-open');
+      overlay.classList.add('is-visible');
+      toggle.setAttribute('aria-expanded', 'true');
+      document.body.style.overflow = 'hidden';
+    }
+
+    function closeMenu() {
+      sidebar.classList.remove('is-open');
+      overlay.classList.remove('is-visible');
+      toggle.setAttribute('aria-expanded', 'false');
+      document.body.style.overflow = '';
+    }
+
+    function toggleMenu() {
+      if (sidebar.classList.contains('is-open')) {
+        closeMenu();
+      } else {
+        openMenu();
+      }
+    }
+
+    toggle.addEventListener('click', toggleMenu);
+    overlay.addEventListener('click', closeMenu);
+
+    document.addEventListener('keydown', function(e) {
+      if (e.key === 'Escape' && sidebar.classList.contains('is-open')) {
+        closeMenu();
+      }
+    });
+
+    sidebar.querySelectorAll('a').forEach(function(link) {
+      link.addEventListener('click', closeMenu);
+    });
+  }
+
+  function initAccordion() {
+    const toggles = document.querySelectorAll('.nav-group-toggle');
+
+    toggles.forEach(function(toggle) {
+      toggle.addEventListener('click', function() {
+        const expanded = toggle.getAttribute('aria-expanded') === 'true';
+        const children = toggle.nextElementSibling;
+
+        if (!children || !children.classList.contains('nav-group-children')) {
+          return;
+        }
+
+        toggle.setAttribute('aria-expanded', !expanded);
+        children.classList.toggle('collapsed');
+
+        if (expanded) {
+          children.style.maxHeight = '0';
+        } else {
+          children.style.maxHeight = children.scrollHeight + 'px';
+        }
+      });
+    });
+
+    document.querySelectorAll('.nav-group-children.collapsed').forEach(function(el) {
+      el.style.maxHeight = '0';
+    });
+  }
+
+  function initSidebarScroll() {
+    const scrollContainer = document.querySelector('.sidebar nav');
+    if (!scrollContainer) return;
+
+    const STORAGE_KEY = 'docyard_sidebar_scroll';
+    const savedPosition = sessionStorage.getItem(STORAGE_KEY);
+
+    if (savedPosition) {
+      const position = parseInt(savedPosition, 10);
+      scrollContainer.scrollTop = position;
+
+      setTimeout(function() {
+        scrollContainer.scrollTop = position;
+      }, 100);
+    } else {
+      const activeLink = scrollContainer.querySelector('a.active');
+      if (activeLink) {
+        setTimeout(function() {
+          activeLink.scrollIntoView({
+            behavior: 'instant',
+            block: 'center'
+          });
+        }, 50);
+      }
+    }
+
+    scrollContainer.querySelectorAll('a').forEach(function(link) {
+      link.addEventListener('click', function() {
+        sessionStorage.setItem(STORAGE_KEY, scrollContainer.scrollTop);
+      });
+    });
+
+    let scrollTimeout;
+    scrollContainer.addEventListener('scroll', function() {
+      clearTimeout(scrollTimeout);
+      scrollTimeout = setTimeout(function() {
+        sessionStorage.setItem(STORAGE_KEY, scrollContainer.scrollTop);
+      }, 150);
+    });
+
+    const logo = document.querySelector('.header-logo');
+    if (logo) {
+      logo.addEventListener('click', function() {
+        sessionStorage.removeItem(STORAGE_KEY);
+        scrollContainer.scrollTop = 0;
+      });
+    }
+  }
+
+  function initScrollBehavior() {
+    const header = document.querySelector('.header');
+    const secondaryHeader = document.querySelector('.secondary-header');
+
+    if (!header || !secondaryHeader) return;
+
+    let lastScrollTop = 0;
+    let ticking = false;
+
+    function isMobile() {
+      return window.innerWidth <= 1024;
+    }
+
+    function updateHeaders() {
+      if (!isMobile()) {
+        header.classList.remove('hide-on-scroll');
+        secondaryHeader.classList.remove('shift-up');
+        ticking = false;
+        return;
+      }
+
+      const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
+
+      if (scrollTop > lastScrollTop && scrollTop > 100) {
+        header.classList.add('hide-on-scroll');
+        secondaryHeader.classList.add('shift-up');
+      } else if (scrollTop < lastScrollTop) {
+        header.classList.remove('hide-on-scroll');
+        secondaryHeader.classList.remove('shift-up');
+      }
+
+      lastScrollTop = scrollTop <= 0 ? 0 : scrollTop;
+      ticking = false;
+    }
+
+    window.addEventListener('scroll', function() {
+      if (!ticking) {
+        window.requestAnimationFrame(updateHeaders);
+        ticking = true;
+      }
+    });
+
+    window.addEventListener('resize', function() {
+      if (!isMobile()) {
+        header.classList.remove('hide-on-scroll');
+        secondaryHeader.classList.remove('shift-up');
+      }
+    });
+  }
+
+  if ('scrollRestoration' in history) {
+    history.scrollRestoration = 'manual';
+  }
+
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', function() {
+      initMobileMenu();
+      initAccordion();
+      initSidebarScroll();
+      initScrollBehavior();
+    });
+  } else {
+    initMobileMenu();
+    initAccordion();
+    initSidebarScroll();
+    initScrollBehavior();
+  }
+})();

data/lib/docyard/templates/layouts/default.html.erb

@@ -1,29 +1,51 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-<meta charset="UTF-8">
-<meta name="viewport" content="width=device-width, initial-scale=1.0">
-<title><%= @page_title || 'Documentation' %></title>
-<link rel="stylesheet" href="/assets/css/main.css">
-<link rel="stylesheet" href="/assets/css/syntax.css">
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta name="description" content="<%= @page_description || 'Documentation' %>">
+  <title><%= @page_title || 'Documentation' %></title>
+  <link rel="stylesheet" href="/assets/css/main.css">
 </head>
 <body>
-<header>
-    <h1>Documentation</h1>
-</header>
+  <!-- Skip to main content for accessibility -->
+  <a href="#main-content" class="skip-link">Skip to main content</a>
 
-<nav>
-    <!-- Sidebar will go here -->
-</nav>
+  <!-- Primary Header -->
+  <header class="header">
+    <div class="header-content">
+      <a href="/" class="header-logo">
+        <span class="header-title"><%= @site_title || 'Documentation' %></span>
+      </a>
+    </div>
+  </header>
 
-<main>
-    <%= @content %>
-</main>
+  <!-- Secondary Header (Mobile Navigation) -->
+  <div class="secondary-header">
+    <button class="secondary-header-menu" aria-label="Toggle navigation menu" aria-expanded="false">
+      <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" width="18" height="18">
+        <path d="M32,64a8,8,0,0,1,8-8H216a8,8,0,0,1,0,16H40A8,8,0,0,1,32,64Zm8,48H168a8,8,0,0,0,0-16H40a8,8,0,0,0,0,16Zm176,24H40a8,8,0,0,0,0,16H216a8,8,0,0,0,0-16Zm-48,40H40a8,8,0,0,0,0,16H168a8,8,0,0,0,0-16Z"></path>
+      </svg>
+      <span>Menu</span>
+    </button>
+  </div>
 
-<footer>
-    <p>Built with Docyard</p>
-</footer>
+  <!-- Mobile overlay -->
+  <div class="mobile-overlay" aria-hidden="true"></div>
 
-<script src="/assets/js/reload.js"></script>
+  <div class="layout">
+    <!-- Sidebar navigation -->
+    <%= @sidebar_html %>
+
+    <!-- Main content area -->
+    <div class="layout-main">
+      <main id="main-content" class="content">
+        <%= @content %>
+      </main>
+    </div>
+  </div>
+
+  <script src="/assets/js/theme.js"></script>
+  <script src="/assets/js/reload.js"></script>
 </body>
-</html>
+</html>

data/lib/docyard/templates/markdown/core-concepts/file-structure.md.erb

@@ -0,0 +1,61 @@
+# File Structure
+
+Understanding how Docyard organizes your documentation.
+
+## Basic Structure
+
+```bash
+docs/
+├── index.md              # Home page
+├── getting-started/      # Section folder
+│   ├── introduction.md
+│   └── quick-start.md
+└── guides/              # Another section
+    └── tutorial.md
+```
+
+## Navigation Rules
+
+- **Folders become sections** in the sidebar navigation
+- **Files become pages** within those sections
+- Files are sorted alphabetically
+- `index.md` in the root is your home page
+
+## File Naming
+
+File names are automatically converted to page titles:
+
+- `quick-start.md` → "Quick Start"
+- `api-reference.md` → "Api Reference"
+- `getting_started.md` → "Getting Started"
+
+## Custom Titles
+
+Override the auto-generated title using an H1 heading:
+
+```markdown
+# Custom Page Title
+
+Your content here...
+```
+
+## Hidden Files
+
+Files and folders starting with `_` or `.` are ignored:
+
+- `_draft.md` - Not included
+- `.notes.md` - Not included
+- `published.md` - Included
+
+## Nested Sections
+
+You can nest folders to create sub-sections:
+
+```bash
+docs/
+└── api/
+    ├── classes/
+    │   └── generator.md
+    └── modules/
+        └── utils.md
+```

data/lib/docyard/templates/markdown/core-concepts/markdown.md.erb

@@ -0,0 +1,90 @@
+# Markdown Support
+
+Docyard supports GitHub Flavored Markdown with syntax highlighting.
+
+## Headings
+
+```markdown
+# H1 Heading
+## H2 Heading
+### H3 Heading
+```
+
+
+## Text Formatting
+
+**Bold text** with `**bold**`
+*Italic text* with `*italic*`
+~~Strikethrough~~ with `~~strikethrough~~`
+
+## Lists
+
+Unordered lists:
+
+- Item 1
+- Item 2
+  - Nested item
+  - Another nested
+
+Ordered lists:
+
+1. First step
+2. Second step
+3. Third step
+
+## Code
+
+Inline code: `const x = 42`
+
+Code blocks with syntax highlighting:
+
+```ruby
+class DocumentationGenerator
+  def initialize(title)
+    @title = title
+  end
+
+  def build
+    puts "Building #{@title}..."
+  end
+end
+```
+
+```javascript
+function generateDocs(title) {
+  console.log(`Building ${title}...`);
+  return { success: true };
+}
+```
+
+
+## Tables
+
+| Feature | Status | Priority |
+|---------|--------|----------|
+| Sidebar | Done | High |
+| Search | Planned | Medium |
+| Dark Mode | Planned | High |
+
+## Links
+
+[External link](https://github.com)
+[Internal link](file-structure)
+[Link to section](../getting-started/installation)
+
+## Blockquotes
+
+> This is a blockquote. Use it to highlight important information or callouts.
+
+## Images
+
+```markdown
+![Alt text](/path/to/image.png)
+```
+
+
+## Task Lists
+
+- [x] Completed task
+- [ ] Incomplete task
+- [ ] Another task

data/lib/docyard/templates/markdown/getting-started/installation.md.erb

@@ -0,0 +1,43 @@
+# Installation
+
+Learn how to install Docyard on your system.
+
+## Prerequisites
+
+- Ruby 3.2 or higher
+- Bundler (recommended)
+
+## Install via RubyGems
+
+```bash
+gem install docyard
+```
+
+
+## Install via Bundler
+
+Add to your Gemfile:
+
+```ruby
+gem 'docyard'
+```
+
+
+Then run:
+
+```bash
+bundle install
+```
+
+## Verify Installation
+
+```bash
+docyard --version
+```
+
+
+You should see the version number printed to your terminal.
+
+## Next Steps
+
+Now that Docyard is installed, head over to the [Quick Start Guide](quick-start) to create your first documentation site.

data/lib/docyard/templates/markdown/getting-started/introduction.md.erb

@@ -0,0 +1,30 @@
+# Introduction
+
+Welcome to Docyard - a modern, zero-config documentation generator for Ruby developers.
+
+## What is Docyard?
+
+Docyard turns your Markdown files into beautiful, searchable documentation sites. Write docs in Markdown, and Docyard handles the rest.
+
+## Key Features
+
+- **Auto-generated Navigation** - Sidebar navigation built from your folder structure
+- **Hot Reload** - See changes instantly as you write
+- **GitHub Flavored Markdown** - Full GFM support including tables and task lists
+- **Syntax Highlighting** - 100+ languages powered by Rouge
+- **Zero Configuration** - Works out of the box with sensible defaults
+- **Mobile Responsive** - Looks great on all devices
+
+## Philosophy
+
+Docyard follows these principles:
+
+1. **Simple by default** - No configuration needed to get started
+2. **Markdown-first** - Focus on writing, not tooling
+3. **Beautiful out of the box** - Production-ready styling included
+4. **Developer friendly** - Built by developers, for developers
+
+## Next Steps
+
+- [Install Docyard](installation) to get started
+- Check out the [Quick Start Guide](quick-start) for a 5-minute tutorial

data/lib/docyard/templates/markdown/getting-started/quick-start.md.erb

@@ -0,0 +1,56 @@
+# Quick Start
+
+Get up and running with Docyard in under 5 minutes.
+
+## 1. Install Docyard
+
+```bash
+gem install docyard
+```
+
+## 2. Initialize Your Project
+
+Create a new documentation project:
+
+```bash
+docyard init
+```
+
+
+This creates a `docs/` folder with sample documentation files.
+
+## 3. Start the Dev Server
+
+```bash
+docyard serve
+```
+
+
+Your documentation will be available at `http://localhost:4200`.
+
+## 4. Edit Your Docs
+
+Open `docs/index.md` and make some changes. The browser will automatically reload to show your changes.
+
+## 5. Organize Your Content
+
+Create folders to organize your documentation:
+
+```bash
+docs/
+├── index.md
+├── getting-started/
+│   ├── introduction.md
+│   └── installation.md
+└── guides/
+    ├── basic-usage.md
+    └── advanced-features.md
+```
+
+
+The sidebar navigation will automatically reflect your folder structure.
+
+## What's Next?
+
+- Learn about [File Structure](../core-concepts/file-structure) conventions
+- Explore [Markdown](../core-concepts/markdown) syntax and features