docyard 0.9.0 → 1.0.0

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

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

@@ -0,0 +1,22 @@
+---
+title: Welcome
+description: Welcome to {{PROJECT_NAME}}
+landing:
+  hero:
+    title: "{{PROJECT_NAME}}"
+    tagline: "Beautiful documentation, built with Docyard"
+    actions:
+      - text: Get Started
+        link: /getting-started
+        variant: primary
+  features:
+    - title: Fast & Simple
+      description: Write in Markdown, get a beautiful site. No configuration required.
+      icon: rocket-launch
+    - title: Dark Mode
+      description: Automatic dark mode that respects system preferences.
+      icon: moon
+    - title: Full-Text Search
+      description: Built-in search powered by Pagefind. Works offline.
+      icon: magnifying-glass
+---

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

@@ -30,6 +30,12 @@
         <%= render_partial('_breadcrumbs') %>
         <%= @content %>
 
+        <div class="page-actions-mobile">
+          <%= render_partial('_page_actions') %>
+        </div>
+
+        <%= render_partial('_feedback') %>
+
         <%= @prev_next_html %>
 
         <div class="doc-footer-mobile">
@@ -41,11 +47,15 @@
     <aside class="doc-aside">
       <%= render_partial('_table_of_contents') %>
       <div class="doc-footer-desktop">
+        <%= render_partial('_page_actions') %>
         <%= render_partial('_doc_footer') %>
       </div>
     </aside>
   </div>
 
+  <% if @raw_markdown %>
+  <script id="page-markdown" type="application/json"><%= @raw_markdown.to_json %></script>
+  <% end %>
   <%= render_partial('_scripts') %>
 </body>
 </html>

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

@@ -30,7 +30,10 @@
   <main id="main-content" class="splash-content">
     <% if @hero %>
     <%
-      hero_class = @hero[:image] ? 'hero hero--with-image' : 'hero hero--centered'
+      has_side_visual = @hero[:image] || (@hero[:custom_visual] && @hero[:custom_visual][:placement] == 'side')
+      has_bottom_visual = @hero[:custom_visual] && @hero[:custom_visual][:placement] == 'bottom'
+      hero_class = has_side_visual ? 'hero hero--with-image' : 'hero hero--centered'
+      hero_class += ' hero--with-bottom-visual' if has_bottom_visual
       bg_style = @hero[:background] || 'grid'
     %>
     <section class="<%= hero_class %>">
@@ -100,8 +103,18 @@
         <% end %>
       </div>
       <% end %>
+      <% if @hero[:custom_visual] && @hero[:custom_visual][:placement] == 'side' %>
+      <div class="hero-custom-visual hero-custom-visual--side">
+        <%= render_custom_visual(@hero[:custom_visual][:html]) %>
+      </div>
+      <% end %>
 
     </section>
+    <% if @hero[:custom_visual] && @hero[:custom_visual][:placement] == 'bottom' %>
+    <div class="hero-custom-visual hero-custom-visual--bottom">
+      <%= render_custom_visual(@hero[:custom_visual][:html]) %>
+    </div>
+    <% end %>
     <% end %>
 
     <% if @features&.any? %>

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

@@ -0,0 +1,24 @@
+<% if @has_analytics %>
+<% if @analytics_google %>
+<link rel="preconnect" href="https://www.googletagmanager.com" crossorigin>
+<link rel="preconnect" href="https://www.google-analytics.com" crossorigin>
+<script async src="https://www.googletagmanager.com/gtag/js?id=<%= @analytics_google %>"></script>
+<script>
+  window.dataLayer = window.dataLayer || [];
+  function gtag(){dataLayer.push(arguments);}
+  gtag('js', new Date());
+  gtag('config', '<%= @analytics_google %>');
+</script>
+<% end %>
+<% if @analytics_plausible %>
+<link rel="preconnect" href="https://plausible.io" crossorigin>
+<script defer data-domain="<%= @analytics_plausible %>" src="https://plausible.io/js/script.js"></script>
+<% end %>
+<% if @analytics_fathom %>
+<link rel="preconnect" href="https://cdn.usefathom.com" crossorigin>
+<script src="https://cdn.usefathom.com/script.js" data-site="<%= @analytics_fathom %>" defer></script>
+<% end %>
+<% if @analytics_script %>
+<script defer src="<%= asset_path(@analytics_script) %>"></script>
+<% end %>
+<% end %>

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

@@ -23,5 +23,5 @@
     </button>
   <% end %>
 </div>
-<script>document.body.classList.add('has-announcement');</script>
+<script>if(!document.documentElement.classList.contains('banner-dismissed'))document.body.classList.add('has-announcement');</script>
 <% end %>

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

@@ -2,7 +2,7 @@
   <% if has_title %>
   <div class="docyard-code-block__header">
     <% if @icon %>
-    <span class="docyard-code-block__icon"><% if @icon_source == "file-extension" %><%= icon_file_extension(@icon) %><% elsif @icon_source == "phosphor" %><%= icon(@icon) %><% end %></span>
+    <span class="docyard-code-block__icon"><% if @icon_source == "language" %><%= icon_for_language(@icon) %><% elsif @icon_source == "file-extension" %><%= icon_file_extension(@icon) %><% elsif @icon_source == "phosphor" %><%= icon(@icon) %><% end %></span>
     <% end %>
     <span class="docyard-code-block__title" title="<%= @title %>"><%= @title %></span>
     <button class="docyard-code-block__copy" aria-label="Copy code to clipboard" data-code="<%= @code_text %>">

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

@@ -0,0 +1,14 @@
+<% if @feedback_enabled %>
+<div class="feedback" data-pagefind-ignore>
+  <p class="feedback__question"><%= @feedback_question %></p>
+  <div class="feedback__buttons">
+    <button type="button" class="feedback__btn" data-feedback="yes" aria-label="Yes, this page was helpful">
+      <%= icon(:thumbs_up) %>
+    </button>
+    <button type="button" class="feedback__btn" data-feedback="no" aria-label="No, this page was not helpful">
+      <%= icon(:thumbs_down) %>
+    </button>
+  </div>
+  <p class="feedback__thanks" aria-live="polite" hidden>Thanks for your feedback!</p>
+</div>
+<% end %>

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

@@ -17,7 +17,7 @@
   %>
   <div class="<%= footer_class %>">
     <% if @credits %>
-    <a href="https://docyard.org" target="_blank" rel="noopener noreferrer" class="footer-attribution">Built with Docyard</a>
+    <a href="https://docyard.dev" target="_blank" rel="noopener noreferrer" class="footer-attribution">Built with Docyard</a>
     <% end %>
 
     <% if has_footer_links %>

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

@@ -5,18 +5,93 @@
 <title><%= @page_title %> | <%= @site_title %></title>
 <link rel="icon" href="<%= asset_path(@favicon) %>" type="image/svg+xml">
 
+<% if @og_enabled %>
+<link rel="canonical" href="<%= @og_url %>">
+
+<meta property="og:type" content="website">
+<meta property="og:site_name" content="<%= @site_title %>">
+<meta property="og:title" content="<%= @page_title %>">
+<meta property="og:url" content="<%= @og_url %>">
+<% if @og_description && !@og_description.empty? %>
+<meta property="og:description" content="<%= @og_description %>">
+<% end %>
+<% if @og_image %>
+<meta property="og:image" content="<%= @og_image %>">
+<% end %>
+
+<meta name="twitter:card" content="<%= @og_image ? 'summary_large_image' : 'summary' %>">
+<meta name="twitter:title" content="<%= @page_title %>">
+<% if @og_description && !@og_description.empty? %>
+<meta name="twitter:description" content="<%= @og_description %>">
+<% end %>
+<% if @og_image %>
+<meta name="twitter:image" content="<%= @og_image %>">
+<% end %>
+<% if @og_twitter %>
+<meta name="twitter:site" content="@<%= @og_twitter.delete_prefix('@') %>">
+<% end %>
+<% end %>
+
 <link rel="preload" href="/_docyard/fonts/Inter-Variable.ttf" as="font" type="font/ttf" crossorigin>
 
+<%= render_partial('_icon_library') %>
+
 <script>
   (function() {
-    const theme = localStorage.getItem('theme') ||
-                 (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');
-    document.documentElement.classList.toggle('dark', theme === 'dark');
+    var html = document.documentElement;
+
+    html.classList.add('no-transition');
+
+    var theme = localStorage.getItem('theme') ||
+                (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');
+    html.classList.toggle('dark', theme === 'dark');
 
     if (localStorage.getItem('docyard_sidebar_collapsed') === 'true') {
-      document.documentElement.classList.add('sidebar-collapsed');
+      html.classList.add('sidebar-collapsed');
     }
+
+    var BANNER_KEY = 'docyard-announcement-dismissed';
+    try {
+      var dismissed = localStorage.getItem(BANNER_KEY);
+      if (dismissed) {
+        var dismissedAt = parseInt(dismissed, 10);
+        var sevenDaysAgo = Date.now() - (7 * 24 * 60 * 60 * 1000);
+        if (dismissedAt > sevenDaysAgo) {
+          html.classList.add('banner-dismissed');
+        }
+      }
+    } catch (e) {}
+
+    requestAnimationFrame(function() {
+      requestAnimationFrame(function() {
+        html.classList.remove('no-transition');
+      });
+    });
   })();
 </script>
 
 <link rel="stylesheet" href="/_docyard/css/main.css">
+
+<% if @primary_color && (@primary_color[:light] || @primary_color[:dark]) %>
+<style>
+<% light_color = @primary_color[:light] %>
+<% dark_color = @primary_color[:dark] || light_color %>
+<% if light_color %>
+:root {
+  --primary: <%= light_color %>;
+  --sidebar-primary: <%= light_color %>;
+}
+.dark {
+  --primary: <%= dark_color %>;
+  --sidebar-primary: <%= dark_color %>;
+}
+<% elsif dark_color %>
+.dark {
+  --primary: <%= dark_color %>;
+  --sidebar-primary: <%= dark_color %>;
+}
+<% end %>
+</style>
+<% end %>
+
+<%= render_partial('_analytics') %>

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

@@ -0,0 +1,8 @@
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@phosphor-icons/web@2.1.2/src/regular/style.css">
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@phosphor-icons/web@2.1.2/src/bold/style.css">
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@phosphor-icons/web@2.1.2/src/fill/style.css">
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@phosphor-icons/web@2.1.2/src/light/style.css">
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@phosphor-icons/web@2.1.2/src/thin/style.css">
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@phosphor-icons/web@2.1.2/src/duotone/style.css">
+
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/devicon.min.css">

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

@@ -0,0 +1,21 @@
+<% if @raw_markdown || @show_edit_link || @show_last_updated %>
+<div class="page-actions">
+  <% if @raw_markdown %>
+  <button type="button" class="page-actions__copy-btn" data-copy-page>
+    <%= icon(:copy) %>
+    <span class="page-actions__copy-text">Copy page</span>
+  </button>
+  <% end %>
+  <% if @show_edit_link && @edit_url %>
+  <a href="<%= @edit_url %>" class="page-actions__edit-link" target="_blank" rel="noopener noreferrer">
+    <%= icon(:pencil_simple_line) %>
+    Edit this page
+  </a>
+  <% end %>
+  <% if @show_last_updated && @last_updated %>
+  <div class="page-actions__last-updated">
+    Last updated <time datetime="<%= @last_updated[:iso] %>" title="<%= @last_updated[:formatted] %>"><%= @last_updated[:relative] %></time>
+  </div>
+  <% end %>
+</div>
+<% end %>

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

@@ -2,6 +2,9 @@
 <%= render_partial('_search_modal') %>
 <% end %>
 
-<script src="/_docyard/js/theme.js"></script>
-<script src="/_docyard/js/components.js"></script>
-<script src="/_docyard/js/reload.js"></script>
+<script src="/_docyard/js/theme.js" defer></script>
+<script src="/_docyard/js/components.js" defer></script>
+<% if @dev_mode %>
+<script>window.__DOCYARD_SSE_PORT__ = <%= @sse_port %>;</script>
+<script src="/_docyard/js/hot-reload.js" defer></script>
+<% end %>

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

@@ -9,10 +9,13 @@
           id="tab-<%= @group_id %>-<%= index %>"
           class="docyard-tabs__tab"
           tabindex="<%= index == 0 ? '0' : '-1' %>"
+          data-tab-name="<%= tab[:name].downcase %>"
         >
           <% if tab[:icon] %>
             <span class="docyard-tabs__icon">
-              <% if tab[:icon_source] == "file-extension" %>
+              <% if tab[:icon_source] == "language" %>
+                <%= icon_for_language(tab[:icon]) %>
+              <% elsif tab[:icon_source] == "file-extension" %>
                 <%= icon_file_extension(tab[:icon]) %>
               <% elsif tab[:icon_source] == "phosphor" %>
                 <%= icon(tab[:icon]) %>