docyard 0.9.0 → 1.0.1

data/lib/docyard/templates/assets/js/hot-reload.js

@@ -0,0 +1,44 @@
+(function() {
+  var ssePort = window.__DOCYARD_SSE_PORT__;
+  if (!ssePort) return;
+
+  var url = 'http://127.0.0.1:' + ssePort + '/';
+  var eventSource = new EventSource(url);
+
+  eventSource.addEventListener('reload', function(event) {
+    var data = JSON.parse(event.data);
+    if (data.type === 'content') {
+      console.log('[Docyard] Content updated');
+      reloadContent();
+    } else {
+      console.log('[Docyard] Full reload');
+      location.reload();
+    }
+  });
+
+  eventSource.onerror = function() {
+    eventSource.close();
+  };
+
+  function reloadContent() {
+    fetch(location.href)
+      .then(function(response) { return response.text(); })
+      .then(function(html) {
+        var parser = new DOMParser();
+        var newDoc = parser.parseFromString(html, 'text/html');
+        var newContent = newDoc.querySelector('.content');
+        var currentContent = document.querySelector('.content');
+
+        if (newContent && currentContent) {
+          currentContent.innerHTML = newContent.innerHTML;
+          if (window.Prism) window.Prism.highlightAll();
+          if (window.docyardTOC) window.docyardTOC.init();
+        } else {
+          location.reload();
+        }
+      })
+      .catch(function() {
+        location.reload();
+      });
+  }
+})();

data/lib/docyard/templates/errors/404.html.erb

@@ -4,13 +4,133 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>404 - Page Not Found</title>
-  <link rel="stylesheet" href="/_docyard/css/main.css">
+  <style>
+    @font-face {
+      font-family: 'Inter';
+      src: url('<%= base_url %>_docyard/fonts/Inter-Variable.ttf') format('truetype');
+      font-weight: 100 900;
+      font-style: normal;
+    }
+
+    :root {
+      --background: #ffffff;
+      --foreground: #0f0f10;
+      --muted-foreground: #71717a;
+      --border: #e4e4e7;
+      --primary: oklch(0.61 0.11 222);
+      --primary-foreground: oklch(0.98 0.02 201);
+      --radius: 0.5rem;
+    }
+
+    .dark {
+      --background: #09090b;
+      --foreground: #fafafa;
+      --muted-foreground: #a1a1aa;
+      --border: #27272a;
+      --primary: oklch(0.71 0.13 215);
+      --primary-foreground: oklch(0.30 0.05 230);
+    }
+
+    <% if @primary_color && (@primary_color[:light] || @primary_color[:dark]) %>
+    <% light_color = @primary_color[:light] %>
+    <% dark_color = @primary_color[:dark] || light_color %>
+    <% if light_color %>
+    :root { --primary: <%= light_color %>; }
+    .dark { --primary: <%= dark_color %>; }
+    <% elsif dark_color %>
+    .dark { --primary: <%= dark_color %>; }
+    <% end %>
+    <% end %>
+
+    * {
+      margin: 0;
+      padding: 0;
+      box-sizing: border-box;
+    }
+
+    body {
+      font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+      background: var(--background);
+      color: var(--foreground);
+      min-height: 100vh;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding: 2rem;
+    }
+
+    .error-page {
+      text-align: center;
+      max-width: 450px;
+    }
+
+    .error-code {
+      font-size: 8rem;
+      font-weight: 700;
+      color: transparent;
+      -webkit-text-stroke: 2px var(--border);
+      line-height: 1;
+    }
+
+    .error-title {
+      font-size: 1.25rem;
+      font-weight: 600;
+      margin: 1rem 0 0.5rem;
+    }
+
+    .error-message {
+      color: var(--muted-foreground);
+      font-size: 0.9375rem;
+      margin-bottom: 1.5rem;
+    }
+
+    .btn {
+      display: inline-flex;
+      align-items: center;
+      gap: 0.5rem;
+      padding: 0.5rem 1rem;
+      font-size: 0.875rem;
+      font-weight: 500;
+      text-decoration: none;
+      border-radius: var(--radius);
+      background: var(--primary);
+      color: var(--primary-foreground);
+      transition: opacity 0.15s;
+      font-family: inherit;
+    }
+
+    .btn:hover {
+      opacity: 0.9;
+    }
+
+    .btn svg {
+      width: 16px;
+      height: 16px;
+    }
+
+    @media (max-width: 480px) {
+      .error-code {
+        font-size: 5rem;
+      }
+    }
+  </style>
+  <script>
+    (function() {
+      const theme = localStorage.getItem('theme') ||
+                   (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');
+      document.documentElement.classList.toggle('dark', theme === 'dark');
+    })();
+  </script>
 </head>
 <body>
-  <main>
-    <h1>404 - Page Not Found</h1>
-    <p>The page you're looking for doesn't exist.</p>
-    <p><a href="/">Go back home</a></p>
+  <main class="error-page">
+    <p class="error-code">404</p>
+    <h1 class="error-title">Page not found</h1>
+    <p class="error-message">This page doesn't exist or has been moved.</p>
+    <a href="<%= base_url %>" class="btn">
+      <%= icon(:house_line) %>
+      Back to home
+    </a>
   </main>
 </body>
 </html>

data/lib/docyard/templates/errors/500.html.erb

@@ -4,21 +4,195 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>500 - Server Error</title>
-  <link rel="stylesheet" href="/_docyard/css/main.css">
+  <style>
+    @font-face {
+      font-family: 'Inter';
+      src: url('<%= base_url %>_docyard/fonts/Inter-Variable.ttf') format('truetype');
+      font-weight: 100 900;
+      font-style: normal;
+    }
+
+    :root {
+      --background: #ffffff;
+      --foreground: #0f0f10;
+      --muted: #f5f5f6;
+      --muted-foreground: #71717a;
+      --border: #e4e4e7;
+      --primary: oklch(0.61 0.11 222);
+      --primary-foreground: oklch(0.98 0.02 201);
+      --destructive: #dc2626;
+      --radius: 0.5rem;
+    }
+
+    .dark {
+      --background: #09090b;
+      --foreground: #fafafa;
+      --muted: #18181b;
+      --muted-foreground: #a1a1aa;
+      --border: #27272a;
+      --primary: oklch(0.71 0.13 215);
+      --primary-foreground: oklch(0.30 0.05 230);
+      --destructive: #f87171;
+    }
+
+    <% if @primary_color && (@primary_color[:light] || @primary_color[:dark]) %>
+    <% light_color = @primary_color[:light] %>
+    <% dark_color = @primary_color[:dark] || light_color %>
+    <% if light_color %>
+    :root { --primary: <%= light_color %>; }
+    .dark { --primary: <%= dark_color %>; }
+    <% elsif dark_color %>
+    .dark { --primary: <%= dark_color %>; }
+    <% end %>
+    <% end %>
+
+    * {
+      margin: 0;
+      padding: 0;
+      box-sizing: border-box;
+    }
+
+    body {
+      font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+      background: var(--background);
+      color: var(--foreground);
+      min-height: 100vh;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding: 2rem;
+    }
+
+    .error-page {
+      text-align: center;
+      max-width: 500px;
+    }
+
+    .error-code {
+      font-size: 8rem;
+      font-weight: 700;
+      color: transparent;
+      -webkit-text-stroke: 2px var(--border);
+      line-height: 1;
+    }
+
+    .error-title {
+      font-size: 1.25rem;
+      font-weight: 600;
+      margin: 1rem 0 0.5rem;
+    }
+
+    .error-message {
+      color: var(--muted-foreground);
+      font-size: 0.9375rem;
+      margin-bottom: 1.5rem;
+    }
+
+    .btn {
+      display: inline-flex;
+      align-items: center;
+      gap: 0.5rem;
+      padding: 0.5rem 1rem;
+      font-size: 0.875rem;
+      font-weight: 500;
+      text-decoration: none;
+      border-radius: var(--radius);
+      background: var(--primary);
+      color: var(--primary-foreground);
+      transition: opacity 0.15s;
+      font-family: inherit;
+    }
+
+    .btn:hover {
+      opacity: 0.9;
+    }
+
+    .btn svg {
+      width: 16px;
+      height: 16px;
+    }
+
+    .error-details {
+      margin-top: 2rem;
+      text-align: left;
+      background: var(--muted);
+      border: 1px solid var(--border);
+      border-radius: var(--radius);
+      overflow: hidden;
+    }
+
+    .error-details summary {
+      cursor: pointer;
+      padding: 0.75rem 1rem;
+      font-size: 0.8125rem;
+      font-weight: 500;
+      color: var(--muted-foreground);
+      display: flex;
+      align-items: center;
+      gap: 0.5rem;
+    }
+
+    .error-details summary svg {
+      width: 14px;
+      height: 14px;
+    }
+
+    .error-details[open] summary {
+      border-bottom: 1px solid var(--border);
+    }
+
+    .error-details pre {
+      margin: 0;
+      padding: 1rem;
+      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+      font-size: 0.75rem;
+      line-height: 1.5;
+      color: var(--destructive);
+      white-space: pre-wrap;
+      word-break: break-word;
+      overflow-x: auto;
+    }
+
+    .error-details .backtrace {
+      border-top: 1px solid var(--border);
+      color: var(--muted-foreground);
+    }
+
+    @media (max-width: 480px) {
+      .error-code {
+        font-size: 5rem;
+      }
+    }
+  </style>
+  <script>
+    (function() {
+      const theme = localStorage.getItem('theme') ||
+                   (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');
+      document.documentElement.classList.toggle('dark', theme === 'dark');
+    })();
+  </script>
 </head>
 <body>
-  <main>
-    <h1>500 - Internal Server Error</h1>
-    <p>Something went wrong.</p>
+  <main class="error-page">
+    <p class="error-code">500</p>
+    <h1 class="error-title">Something went wrong</h1>
+    <p class="error-message">We encountered an unexpected error. Please try again.</p>
+    <a href="<%= base_url %>" class="btn">
+      <%= icon(:house_line) %>
+      Back to home
+    </a>
 
     <% if @error_message %>
-      <h3>Error Details:</h3>
+    <details class="error-details">
+      <summary>
+        <%= icon(:warning_circle) %>
+        Error details
+      </summary>
       <pre><%= @error_message %></pre>
-    <% end %>
-
-    <% if @backtrace %>
-      <h3>Backtrace:</h3>
-      <pre><%= @backtrace %></pre>
+      <% if @backtrace %>
+      <pre class="backtrace"><%= @backtrace %></pre>
+      <% end %>
+    </details>
     <% end %>
   </main>
 </body>

data/lib/docyard/templates/errors/redirect.html.erb

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta http-equiv="refresh" content="0;url=<%= @target_url %>">
+  <title>Redirecting...</title>
+  <script>window.location.href = "<%= @target_url %>";</script>
+</head>
+<body>
+  <p>Redirecting to <a href="<%= @target_url %>"><%= @target_url %></a>...</p>
+</body>
+</html>

data/lib/docyard/templates/init/_sidebar.yml

@@ -0,0 +1,36 @@
+# =============================================================================
+# Sidebar Navigation
+# =============================================================================
+# This file controls the sidebar navigation for your documentation.
+#
+# Basic syntax:
+#   - page-name              # Links to docs/page-name.md
+#   - page-name: { text: "Custom Title", icon: rocket-launch }
+#
+# Sections with nested pages:
+#   - section-name:
+#       text: "Section Title"
+#       icon: folder
+#       items:
+#         - page-one
+#         - page-two
+#
+# External links:
+#   - link: "https://github.com/your-org"
+#     text: "GitHub"
+#     icon: github
+#
+# Available icons: https://phosphoricons.com (use kebab-case names)
+# =============================================================================
+
+- index:
+    text: Welcome
+    icon: house
+
+- getting-started:
+    text: Getting Started
+    icon: rocket-launch
+
+- components:
+    text: Components
+    icon: package

data/lib/docyard/templates/init/docyard.yml

@@ -0,0 +1,36 @@
+# Docyard Configuration
+# Full documentation: https://docyard.dev/configuration
+
+title: "{{PROJECT_NAME}}"
+description: "Documentation for {{PROJECT_NAME}}"
+
+# Your production URL (for SEO and sitemaps)
+# url: "https://docs.example.com"
+
+# Branding customization
+# branding:
+#   color: "#3b82f6"              # Primary color (or use light/dark below)
+#   # color:
+#   #   light: "#3b82f6"
+#   #   dark: "#60a5fa"
+
+# Social links (shown in footer)
+# socials:
+#   github: "https://github.com/your-org/your-repo"
+#   twitter: "https://twitter.com/your-handle"
+
+# Repository settings (enables "Edit this page" links)
+# repo:
+#   url: "https://github.com/your-org/your-repo"
+#   branch: "main"
+#   edit_link: true
+
+# Search (enabled by default)
+search:
+  enabled: true
+  placeholder: "Search..."
+
+# Build output
+build:
+  output: "dist"
+  base: "/"

data/lib/docyard/templates/init/pages/components.md

@@ -0,0 +1,146 @@
+---
+title: Components
+description: Available documentation components
+---
+
+# Components
+
+Docyard comes with a rich set of components to make your documentation shine.
+
+## Callouts
+
+Use callouts to highlight important information:
+
+:::note
+This is a note callout for general information.
+:::
+
+:::tip
+This is a tip callout for helpful suggestions.
+:::
+
+:::warning
+This is a warning callout for things to watch out for.
+:::
+
+:::danger
+This is a danger callout for critical warnings.
+:::
+
+## Code Blocks
+
+Syntax highlighting with copy button:
+
+```javascript
+function greet(name) {
+  console.log(`Hello, ${name}!`);
+}
+
+greet('World');
+```
+
+Code blocks can have titles:
+
+```ruby [config/routes.rb]
+Rails.application.routes.draw do
+  root 'pages#home'
+end
+```
+
+And line highlighting:
+
+```python {2-3}
+def calculate(x, y):
+    result = x + y  # This line is highlighted
+    return result   # This one too
+```
+
+## Code Groups
+
+Group related code blocks with tabs:
+
+:::code-group
+```bash [npm]
+npm install my-package
+```
+
+```bash [yarn]
+yarn add my-package
+```
+
+```bash [pnpm]
+pnpm add my-package
+```
+:::
+
+## Steps
+
+Create step-by-step guides:
+
+:::steps
+### Create a file
+
+Create a new file called `example.md`.
+
+### Add content
+
+Write your documentation content.
+
+### Preview
+
+Run `docyard serve` to preview.
+:::
+
+## Cards
+
+Link to other pages with cards:
+
+:::cards
+::card{title="Getting Started" icon="rocket-launch" href="/getting-started"}
+Learn the basics
+::
+
+::card{title="Configuration" icon="code" href="/getting-started"}
+Customize your site
+::
+:::
+
+## Accordion
+
+Collapsible content sections:
+
+:::details{title="Click to expand"}
+This content is hidden by default. Click the title to reveal it.
+
+You can put any content here, including code blocks and other components.
+:::
+
+## Badges
+
+Inline status indicators: :badge[New]{type="success"} :badge[Beta]{type="warning"} :badge[Deprecated]{type="danger"}
+
+## File Tree
+
+Display directory structures:
+
+```filetree
+src/
+  components/
+    Button.jsx
+    Card.jsx
+  utils/
+    helpers.js
+  index.js
+```
+
+## Tables
+
+| Feature | Status | Notes |
+|---------|--------|-------|
+| Markdown | Supported | Full GFM support |
+| Dark Mode | Supported | Automatic |
+| Search | Supported | Powered by Pagefind |
+
+## More Components
+
+Docyard supports many more components. Visit the [documentation](https://docyard.dev) for the complete list.

data/lib/docyard/templates/init/pages/getting-started.md

@@ -0,0 +1,94 @@
+---
+title: Getting Started
+description: Get up and running with {{PROJECT_NAME}}
+---
+
+# Getting Started
+
+This guide will help you get started with {{PROJECT_NAME}}.
+
+## Prerequisites
+
+Before you begin, make sure you have:
+
+- Basic knowledge of Markdown
+- A text editor
+
+## Installation
+
+:::steps
+### Step 1: Install Docyard
+
+```bash
+gem install docyard
+```
+
+### Step 2: Create a new project
+
+```bash
+docyard init my-docs
+cd my-docs
+```
+
+### Step 3: Start the development server
+
+```bash
+docyard serve
+```
+
+Open http://localhost:4200 in your browser.
+:::
+
+## Project Structure
+
+After initialization, your project will look like this:
+
+```filetree
+my-docs/
+  docyard.yml        # Configuration file
+  docs/
+    _sidebar.yml     # Sidebar navigation
+    index.md         # Home page
+    getting-started.md
+    components.md
+    public/          # Static assets (images, etc.)
+```
+
+## Writing Content
+
+Create new pages by adding `.md` files to the `docs/` folder:
+
+```markdown
+---
+title: My New Page
+description: A brief description
+---
+
+# My New Page
+
+Your content here...
+```
+
+Then add it to `_sidebar.yml`:
+
+```yaml
+- my-new-page:
+    text: My New Page
+    icon: file
+```
+
+## Building for Production
+
+When you're ready to deploy:
+
+```bash
+docyard build
+```
+
+This creates a `dist/` folder with static HTML files ready to deploy anywhere.
+
+## Next Steps
+
+- Explore the [Components](/components) page to see what's available
+- Configure your site in `docyard.yml`
+- Deploy to GitHub Pages, Vercel, or Netlify