docyard 0.2.0 → 0.4.0

data/lib/docyard/templates/markdown/guides/markdown-features.md.erb

@@ -0,0 +1,247 @@
+# Markdown Features
+
+Docyard supports GitHub Flavored Markdown (GFM) plus powerful custom components.
+
+## Basic Formatting
+
+Use standard markdown syntax for formatting:
+
+**Bold text** with `**bold**` or `__bold__`
+
+*Italic text* with `*italic*` or `_italic_`
+
+`Inline code` with \`backticks\`
+
+~~Strikethrough~~ with `~~text~~`
+
+## Headings
+
+```markdown
+# H1 Heading
+## H2 Heading
+### H3 Heading
+#### H4 Heading
+```
+
+## Lists
+
+Unordered lists:
+
+- Item one
+- Item two
+  - Nested item
+  - Another nested item
+- Item three
+
+Ordered lists:
+
+1. First step
+2. Second step
+3. Third step
+
+Task lists:
+
+- [x] Completed task
+- [ ] Pending task
+- [ ] Another pending task
+
+## Code Blocks
+
+Syntax highlighting for 100+ languages powered by Rouge:
+
+```javascript
+function greet(name) {
+  return `Hello, ${name}!`;
+}
+
+console.log(greet('World'));
+```
+
+```python
+def greet(name):
+    return f"Hello, {name}!"
+
+print(greet('World'))
+```
+
+```ruby
+def greet(name)
+  "Hello, #{name}!"
+end
+
+puts greet('World')
+```
+
+Each code block includes a copy button for easy copying.
+
+## Tables
+
+Create responsive tables with GFM syntax:
+
+| Feature | Supported | Notes |
+|---------|-----------|-------|
+| Syntax highlighting | ✓ | 100+ languages |
+| Hot reload | ✓ | Instant updates |
+| Dark mode | ✓ | Auto-switching |
+| Mobile responsive | ✓ | Works everywhere |
+
+Tables automatically wrap on mobile devices.
+
+## Blockquotes
+
+> Standard blockquote for citations or highlights.
+>
+> Supports multiple paragraphs.
+
+## Links
+
+[Link to a page](../getting-started/installation)
+
+[External link](https://github.com)
+
+## Callouts
+
+Use callouts to highlight important information:
+
+::: note
+Informational content that provides additional context.
+:::
+
+::: tip Best Practice
+Helpful advice or recommendations for users.
+:::
+
+::: important
+Critical information that requires special attention.
+:::
+
+::: warning
+Caution about potential issues or things to watch out for.
+:::
+
+::: danger
+Severe warnings about dangerous operations or critical issues.
+:::
+
+### Custom Titles
+
+::: tip Performance Optimization
+You can customize the title of any callout type.
+:::
+
+### Rich Content
+
+::: important Key Requirements
+Callouts support all markdown features:
+
+- **Lists** and formatting
+- `Code snippets`
+- [Links](/)
+- Code blocks with syntax highlighting
+
+```ruby
+def example
+  puts "Code works inside callouts!"
+end
+```
+:::
+
+## Tabs
+
+Display multiple code examples or options in tabs:
+
+:::tabs
+== JavaScript
+```javascript
+const config = {
+  apiUrl: 'https://api.example.com',
+  timeout: 5000
+};
+```
+
+== TypeScript
+```typescript
+interface Config {
+  apiUrl: string;
+  timeout: number;
+}
+
+const config: Config = {
+  apiUrl: 'https://api.example.com',
+  timeout: 5000
+};
+```
+
+== Ruby
+```ruby
+config = {
+  api_url: 'https://api.example.com',
+  timeout: 5000
+}
+```
+:::
+
+### Package Manager Tabs
+
+Perfect for installation instructions:
+
+:::tabs
+== npm
+```bash
+npm install your-package
+```
+
+== yarn
+```bash
+yarn add your-package
+```
+
+== pnpm
+```bash
+pnpm add your-package
+```
+
+== bun
+```bash
+bun add your-package
+```
+:::
+
+Tabs automatically detect package managers and display appropriate icons.
+
+## Icons
+
+Use inline icons from [Phosphor Icons](https://phosphoricons.com):
+
+:rocket-launch: :check: :warning: :heart: :star: :code: :book-open: :gear:
+
+Just wrap the icon name in colons:
+
+```markdown
+:rocket-launch: :check: :warning:
+```
+
+Browse all available icons at [phosphoricons.com](https://phosphoricons.com).
+
+## Horizontal Rules
+
+Use three or more dashes, asterisks, or underscores:
+
+---
+
+## Best Practices
+
+::: tip Writing Great Documentation
+1. **Use headings hierarchically** - Don't skip levels (H1 → H3)
+2. **Add code examples** - Show, don't just tell
+3. **Use callouts sparingly** - Highlight only important information
+4. **Keep it concise** - Respect your readers' time
+5. **Link related pages** - Help users navigate your docs
+:::
+
+## Next Steps
+
+::: note
+- Learn how to [customize your site](configuration)
+- Explore the [installation guide](../getting-started/installation)
+:::

data/lib/docyard/templates/markdown/index.md.erb

@@ -1,86 +1,82 @@
-# Welcome to Docyard
+# Welcome to Your Documentation
 
-A modern, zero-config documentation generator for Ruby developers.
+This is your documentation homepage. Docyard transforms your Markdown files into beautiful, searchable documentation.
 
-## Features
+## Quick Example
 
-- **Auto-generated Navigation** - Sidebar built from your folder structure
-- **Hot Reload** - Changes appear instantly while you write
-- **GitHub Flavored Markdown** - Full GFM support with tables and task lists
-- **Syntax Highlighting** - 100+ languages powered by Rouge
-- **Zero Configuration** - Works out of the box with sensible defaults
-- **Mobile Responsive** - Beautiful on desktop, tablet, and mobile
+Here's what you can do with Docyard:
 
-## Quick Start
+### Code Blocks with Syntax Highlighting
 
-Get up and running in under a minute:
-
-```bash
-# Install
-gem install docyard
+```ruby
+class User
+  attr_reader :name, :email
 
-# Initialize
-docyard init
+  def initialize(name, email)
+    @name = name
+    @email = email
+  end
 
-# Start dev server
-docyard serve
+  def greet
+    "Hello, #{name}!"
+  end
+end
 ```
 
-Visit `http://localhost:4200` to see your docs.
+### Callouts for Important Information
 
+::: tip Pro Tip
+Use callouts to highlight important information. Available types: `note`, `tip`, `important`, `warning`, and `danger`.
+:::
 
-## Example Code
+::: warning
+Make sure to read the [Configuration Guide](guides/configuration) before deploying to production.
+:::
 
-Ruby with syntax highlighting:
+### Tabs for Multiple Options
 
-```ruby
-class DocumentationSite
-  attr_reader :title, :pages
+Show installation instructions for different package managers:
 
-  def initialize(title)
-    @title = title
-    @pages = []
-  end
+:::tabs
+== npm
+```bash
+npm install your-package
+```
 
-  def add_page(path, content)
-    pages << { path: path, content: content }
-  end
+== yarn
+```bash
+yarn add your-package
+```
 
-  def build
-    pages.each { |page| render_page(page) }
-  end
-end
+== pnpm
+```bash
+pnpm add your-package
 ```
+:::
 
+### Icons
 
-JavaScript example:
+Use inline icons from [Phosphor Icons](https://phosphoricons.com): :rocket-launch: :check: :warning: :heart:
 
-```javascript
-function buildDocs(config) {
-  const { title, theme } = config;
-  console.log(`Building ${title} with ${theme} theme`);
-  return { success: true };
-}
-```
+## Getting Started
+
+::: note Next Steps
+1. Edit the files in `docs/` to create your documentation
+2. Run `docyard serve` to preview changes in real-time
+3. Customize `docyard.yml` to configure branding and navigation
+4. Run `docyard build` when ready to deploy
+:::
 
 ## Documentation Structure
 
 | Section | Description |
 |---------|-------------|
-| Getting Started | Installation and quick start guide |
-| Core Concepts | Learn about file structure and markdown |
-
-## What's Next?
-
-> Get started by exploring the documentation in the sidebar, or jump straight to the [Quick Start Guide](getting-started/quick-start).
-
-### Learn the Basics
-
-1. [Introduction](getting-started/introduction) - Learn what Docyard can do
-2. [Installation](getting-started/installation) - Install Docyard on your system
-3. [Quick Start](getting-started/quick-start) - Create your first site
+| [Installation](getting-started/installation) | Get up and running quickly |
+| [Markdown Features](guides/markdown-features) | Learn about all supported features |
+| [Configuration](guides/configuration) | Customize appearance and navigation |
 
-### Understand Core Concepts
+## Need Help?
 
-- [File Structure](core-concepts/file-structure) - How to organize your docs
-- [Markdown](core-concepts/markdown) - Supported markdown features
+- Check out the [Markdown Features](guides/markdown-features) guide
+- Learn about [customization options](guides/configuration)
+- Explore the sidebar to see all available pages

data/lib/docyard/templates/partials/_callout.html.erb

@@ -0,0 +1,11 @@
+<div class="docyard-callout docyard-callout--<%= @type %>" role="<%= %w[danger warning].include?(@type) ? 'alert' : 'note' %>">
+  <div class="docyard-callout__icon" aria-hidden="true">
+    <%= @icon_svg %>
+  </div>
+  <div class="docyard-callout__content">
+    <div class="docyard-callout__title"><%= @title %></div>
+    <div class="docyard-callout__body">
+      <%= @content_html %>
+    </div>
+  </div>
+</div>

data/lib/docyard/templates/partials/_code_block.html.erb

@@ -0,0 +1,6 @@
+<div class="docyard-code-block">
+  <%= @code_block_html %>
+  <button class="docyard-code-block__copy" aria-label="Copy code to clipboard" data-code="<%= @code_text %>">
+    <%= @copy_icon %>
+  </button>
+</div>

data/lib/docyard/templates/partials/_icon.html.erb

@@ -0,0 +1 @@
+<span class="docyard-icon docyard-icon-<%= @name %>" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor"><%= @icon_data %></svg></span>

data/lib/docyard/templates/partials/_icon_file_extension.html.erb

@@ -0,0 +1 @@
+<span class="docyard-icon docyard-icon-file-<%= @extension %>" aria-hidden="true"><%= @svg_content %></span>

data/lib/docyard/templates/partials/_nav_group.html.erb

@@ -1,7 +1,13 @@
-<button class="nav-group-toggle" aria-expanded="true" type="button">
-  <span><%= @title %></span>
-  <%= icon(:chevron) %>
+<% collapsed = @collapsed || false %>
+<button class="nav-group-toggle" aria-expanded="<%= collapsed ? 'false' : 'true' %>" type="button">
+  <span class="nav-group-title">
+    <% if @icon %>
+      <span class="nav-item-icon"><%= icon(@icon) %></span>
+    <% end %>
+    <span class="nav-item-text"><%= @title %></span>
+  </span>
+  <span class="nav-group-icon"><%= icon(:caret_right) %></span>
 </button>
-<div class="nav-group-children">
+<div class="nav-group-children<%= ' collapsed' if collapsed %>">
   <%= @children_html %>
 </div>

data/lib/docyard/templates/partials/_nav_leaf.html.erb

@@ -1 +1,9 @@
-<a href="<%= @path %>"<%= ' class="active"' if @active %>><%= @title %></a>
+<a href="<%= link_path(@path) %>"<%= ' class="active"' if @active %><%= " target=\"#{@target}\" rel=\"noopener noreferrer\"" if @target && @target != "_self" %>>
+  <% if @icon %>
+    <span class="nav-item-icon"><%= icon(@icon) %></span>
+  <% end %>
+  <span class="nav-item-text"><%= @title %></span>
+  <% if @target == "_blank" %>
+    <span class="nav-item-external"><%= icon(:link_external) %></span>
+  <% end %>
+</a>

data/lib/docyard/templates/partials/_tabs.html.erb

@@ -0,0 +1,40 @@
+<div class="docyard-tabs" data-tabs="<%= @group_id %>">
+  <div class="docyard-tabs__list-wrapper">
+    <div role="tablist" aria-label="Code examples" class="docyard-tabs__list">
+      <% @tabs.each_with_index do |tab, index| %>
+        <button
+          role="tab"
+          aria-selected="<%= index == 0 ? 'true' : 'false' %>"
+          aria-controls="tabpanel-<%= @group_id %>-<%= index %>"
+          id="tab-<%= @group_id %>-<%= index %>"
+          class="docyard-tabs__tab"
+          tabindex="<%= index == 0 ? '0' : '-1' %>"
+        >
+          <% if tab[:icon] %>
+            <span class="docyard-tabs__icon">
+              <% if tab[:icon_source] == "file-extension" %>
+                <%= Docyard::Icons.render_file_extension(tab[:icon]) %>
+              <% elsif tab[:icon_source] == "phosphor" %>
+                <%= Docyard::Icons.render(tab[:icon]) %>
+              <% end %>
+            </span>
+          <% end %>
+          <%= tab[:name] %>
+        </button>
+      <% end %>
+      <div class="docyard-tabs__indicator" aria-hidden="true"></div>
+    </div>
+  </div>
+  <% @tabs.each_with_index do |tab, index| %>
+    <div
+      role="tabpanel"
+      id="tabpanel-<%= @group_id %>-<%= index %>"
+      aria-labelledby="tab-<%= @group_id %>-<%= index %>"
+      aria-hidden="<%= index == 0 ? 'false' : 'true' %>"
+      class="docyard-tabs__panel"
+      tabindex="0"
+    >
+      <%= tab[:content] %>
+    </div>
+  <% end %>
+</div>

data/lib/docyard/templates/partials/_theme_toggle.html.erb

@@ -0,0 +1,13 @@
+<button class="theme-toggle" aria-label="Toggle theme" title="Toggle theme">
+  <span class="theme-toggle-track">
+    <!-- Sun icon -->
+    <svg class="theme-toggle-icon theme-toggle-sun-icon" xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 256 256" fill="currentColor">
+      <path d="M120,40V16a8,8,0,0,1,16,0V40a8,8,0,0,1-16,0Zm72,88a64,64,0,1,1-64-64A64.07,64.07,0,0,1,192,128Zm-16,0a48,48,0,1,0-48,48A48.05,48.05,0,0,0,176,128ZM58.34,69.66A8,8,0,0,0,69.66,58.34l-16-16A8,8,0,0,0,42.34,53.66Zm0,116.68-16,16a8,8,0,0,0,11.32,11.32l16-16a8,8,0,0,0-11.32-11.32ZM192,72a8,8,0,0,0,5.66-2.34l16-16a8,8,0,0,0-11.32-11.32l-16,16A8,8,0,0,0,192,72Zm5.66,114.34a8,8,0,0,0-11.32,11.32l16,16a8,8,0,0,0,11.32-11.32ZM48,128a8,8,0,0,0-8-8H16a8,8,0,0,0,0,16H40A8,8,0,0,0,48,128Zm80,80a8,8,0,0,0-8,8v24a8,8,0,0,0,16,0V216A8,8,0,0,0,128,208Zm112-88H216a8,8,0,0,0,0,16h24a8,8,0,0,0,0-16Z"></path>
+    </svg>
+    <!-- Moon stars icon -->
+    <svg class="theme-toggle-icon theme-toggle-moon-icon" xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 256 256" fill="currentColor">
+      <path d="M240,96a8,8,0,0,1-8,8H216v16a8,8,0,0,1-16,0V104H184a8,8,0,0,1,0-16h16V72a8,8,0,0,1,16,0V88h16A8,8,0,0,1,240,96ZM144,56h8v8a8,8,0,0,0,16,0V56h8a8,8,0,0,0,0-16h-8V32a8,8,0,0,0-16,0v8h-8a8,8,0,0,0,0,16Zm72.77,97a8,8,0,0,1,1.43,8A96,96,0,1,1,95.07,37.8a8,8,0,0,1,10.6,9.06A88.07,88.07,0,0,0,209.14,150.33,8,8,0,0,1,216.77,153Zm-19.39,14.88c-1.79.09-3.59.14-5.38.14A104.11,104.11,0,0,1,88,64c0-1.79,0-3.59.14-5.38A80,80,0,1,0,197.38,167.86Z"></path>
+    </svg>
+    <span class="theme-toggle-thumb"></span>
+  </span>
+</button>

data/lib/docyard/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module Docyard
-  VERSION = "0.2.0"
+  VERSION = "0.4.0"
 end

data/lib/docyard.rb

@@ -22,5 +22,13 @@ require_relative "docyard/initializer"
 require_relative "docyard/server"
 require_relative "docyard/cli"
 
+# Build components
+require_relative "docyard/builder"
+require_relative "docyard/build/static_generator"
+require_relative "docyard/build/asset_bundler"
+require_relative "docyard/build/file_copier"
+require_relative "docyard/build/sitemap_generator"
+require_relative "docyard/preview_server"
+
 module Docyard
 end