infodocs 0.3.0

data/app/views/infodocs/_delete_button.html.erb

@@ -0,0 +1,6 @@
+<% if infodocs_deletable?(node) %>
+  <button type="button" title="Delete <%= node.title %>" aria-label="Delete <%= node.title %>" <%= tag.attributes(infodocs_delete_attributes(node)) %>
+          class="inline-flex size-8 shrink-0 items-center justify-center rounded text-gray-400 hover:bg-red-50 hover:text-red-600 dark:hover:bg-red-950">
+    <svg class="size-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 7h16M10 11v6M14 11v6M6 7l1 13h10l1-13M9 7V4h6v3"/></svg>
+  </button>
+<% end %>

data/app/views/infodocs/_handle.html.erb

@@ -0,0 +1,5 @@
+<% if infodocs_editable? %>
+  <span class="infodocs-handle hidden size-6 shrink-0 cursor-grab touch-none items-center justify-center text-gray-400 group-data-[reordering=true]/nav:inline-flex" aria-hidden="true">
+    <svg class="size-4" viewBox="0 0 16 16" fill="currentColor"><circle cx="5" cy="3" r="1.2"/><circle cx="11" cy="3" r="1.2"/><circle cx="5" cy="8" r="1.2"/><circle cx="11" cy="8" r="1.2"/><circle cx="5" cy="13" r="1.2"/><circle cx="11" cy="13" r="1.2"/></svg>
+  </span>
+<% end %>

data/app/views/infodocs/_tree.html.erb

@@ -0,0 +1,35 @@
+<% parent = local_assigns.fetch(:parent, "") %>
+<ul class="space-y-0.5" data-parent-slug="<%= parent %>" data-infodocs-tree-editor-target="list">
+  <% tag = infodocs_active_tag %>
+  <% infodocs_filter_nodes(nodes, tag).each do |node| %>
+    <% active = current == node.slug %>
+    <% link_classes = "flex min-h-11 min-w-0 flex-1 items-center rounded-md px-2 text-sm lg:min-h-8 #{active ? 'bg-blue-50 font-medium text-blue-700 dark:bg-blue-950 dark:text-blue-300' : 'text-gray-600 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-800'}" %>
+    <li data-slug="<%= node.slug %>">
+      <% if node.folder? %>
+        <details <%= "open" if current.to_s == node.slug || current.to_s.start_with?("#{node.slug}/") %> class="group/folder">
+          <summary class="flex min-h-11 cursor-pointer list-none items-center gap-2 rounded-md px-2 text-sm font-medium hover:bg-gray-100 lg:min-h-8 dark:hover:bg-gray-800">
+            <%= render "infodocs/handle" %>
+            <svg class="size-3 shrink-0 transition-transform group-open/folder:rotate-90" viewBox="0 0 12 12" fill="currentColor"><path d="M4 2l5 4-5 4z"/></svg>
+            <span class="min-w-0 flex-1 truncate"><%= node.title %></span>
+            <%= render "infodocs/delete_button", node: node %>
+          </summary>
+          <div class="ml-3 border-l border-gray-200 pl-2 dark:border-gray-800">
+            <% if node.page %>
+              <%= link_to "Overview", page_path(node.slug, tag: tag), class: link_classes %>
+            <% end %>
+            <%= render "infodocs/tree", nodes: node.children.reject(&:hidden), current: current, parent: node.slug %>
+          </div>
+        </details>
+      <% else %>
+        <div class="flex items-center gap-1">
+          <%= render "infodocs/handle" %>
+          <%= link_to page_path(node.slug, tag: tag), aria: { current: (active ? "page" : nil) }, class: link_classes do %>
+            <span class="truncate"><%= node.title %></span>
+            <% if node.page&.draft? %><span class="ml-2 shrink-0 rounded bg-amber-100 px-1.5 text-[10px] font-medium uppercase text-amber-800 dark:bg-amber-900 dark:text-amber-200">draft</span><% end %>
+          <% end %>
+          <%= render "infodocs/delete_button", node: node %>
+        </div>
+      <% end %>
+    </li>
+  <% end %>
+</ul>

data/app/views/infodocs/editor/edit.html.erb

@@ -0,0 +1,61 @@
+<% back = @page.slug.empty? ? root_path : page_path(@page.slug) %>
+<div data-controller="infodocs-editor"
+     data-infodocs-editor-save-url-value="<%= edit_page_path(@page.slug.presence) %>"
+     data-infodocs-editor-preview-url-value="<%= preview_page_path(@page.slug.presence) %>"
+     data-infodocs-editor-back-url-value="<%= back %>"
+     data-infodocs-editor-tags-url-value="<%= tag_tree_page_path %>"
+     data-infodocs-editor-slug-value="<%= @page.slug %>"
+     class="flex min-h-[calc(100dvh-7rem)] flex-col">
+  <div class="mb-3 flex flex-wrap items-center gap-2">
+    <div class="min-w-0 flex-1">
+      <h1 class="truncate text-lg font-semibold">Editing <%= @page.title %></h1>
+      <p class="truncate font-mono text-xs text-gray-500"><%= @page.relative_path %></p>
+    </div>
+    <span class="text-sm text-gray-500" role="status" data-infodocs-editor-target="status"></span>
+    <% page_node = docs_tree.node(@page.slug) %>
+    <% if page_node&.leaf? && infodocs_deletable?(page_node) %>
+      <button type="button" <%= tag.attributes(infodocs_delete_attributes(page_node)) %>
+              class="inline-flex min-h-11 items-center rounded-md px-3 text-sm font-medium text-red-600 hover:bg-red-50 dark:hover:bg-red-950">Delete</button>
+    <% end %>
+    <%= link_to "Close", back, class: "inline-flex min-h-11 items-center rounded-md px-3 text-sm font-medium text-gray-600 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-800" %>
+    <button type="button" data-action="infodocs-editor#save"
+            class="inline-flex min-h-11 items-center rounded-md bg-blue-600 px-4 text-sm font-medium text-white hover:bg-blue-500">Save <kbd class="ml-2 hidden text-xs opacity-70 sm:inline">⌘S</kbd></button>
+  </div>
+
+  <div class="mb-3 flex flex-wrap items-center gap-2 text-sm">
+    <label for="infodocs-tags" class="font-medium">Tags</label>
+    <input id="infodocs-tags" type="text" list="infodocs-tag-list" autocomplete="off" placeholder="guide, api"
+           value="<%= @page.manifest_tags.join(', ') %>" data-infodocs-editor-target="tags" data-action="input->infodocs-editor#changed"
+           class="min-w-48 flex-1 rounded-md border border-gray-300 bg-white px-2 py-1.5 text-base focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500 sm:text-sm dark:border-gray-700 dark:bg-gray-900">
+    <datalist id="infodocs-tag-list"><% visible_tags.each_key do |tag| %><option value="<%= tag %>"><% end %></datalist>
+    <% frontmatter_only = @page.tags - @page.manifest_tags %>
+    <% if frontmatter_only.any? %><span class="text-xs text-gray-500">also in frontmatter: <%= frontmatter_only.join(", ") %></span><% end %>
+  </div>
+
+  <div class="flex flex-wrap items-center gap-0.5 rounded-t-md border border-b-0 border-gray-300 bg-gray-50 px-1 py-1 dark:border-gray-700 dark:bg-gray-900" role="toolbar" aria-label="Formatting">
+    <% [["bold", "B", "Bold"], ["italic", "I", "Italic"], ["code", "<>", "Inline code"], ["link", "Link", "Link"], ["h1", "H1", "Heading 1"], ["h2", "H2", "Heading 2"], ["h3", "H3", "Heading 3"],
+        ["list", "• List", "Bullet list"], ["task", "☑ Task", "Task list"], ["quote", "❝", "Quote"], ["ruby", "Ruby", "Ruby code block"], ["js", "JS", "JavaScript code block"],
+        ["mermaid", "Mermaid", "Mermaid diagram"]].each do |action, label, title| %>
+      <button type="button" title="<%= title %>" data-action="infodocs-editor#format" data-infodocs-editor-kind-param="<%= action %>"
+              class="inline-flex min-h-9 min-w-9 items-center justify-center rounded px-2 text-sm font-medium text-gray-700 hover:bg-gray-200 dark:text-gray-200 dark:hover:bg-gray-800"><%= label %></button>
+    <% end %>
+    <div class="ml-auto flex gap-1 lg:hidden" role="tablist">
+      <button type="button" role="tab" aria-selected="true" data-infodocs-editor-target="tab" data-pane="write" data-action="infodocs-editor#show" data-infodocs-editor-pane-param="write"
+              class="min-h-9 rounded px-3 text-sm aria-selected:bg-white aria-selected:font-medium dark:aria-selected:bg-gray-800">Write</button>
+      <button type="button" role="tab" aria-selected="false" data-infodocs-editor-target="tab" data-pane="preview" data-action="infodocs-editor#show" data-infodocs-editor-pane-param="preview"
+              class="min-h-9 rounded px-3 text-sm aria-selected:bg-white aria-selected:font-medium dark:aria-selected:bg-gray-800">Preview</button>
+    </div>
+  </div>
+
+  <div class="grid min-h-0 flex-1 gap-0 rounded-b-md border border-gray-300 lg:grid-cols-2 dark:border-gray-700">
+    <textarea data-infodocs-editor-target="input" data-action="input->infodocs-editor#changed keydown->infodocs-editor#keydown"
+              spellcheck="false" aria-label="Markdown source"
+              class="min-h-[60dvh] w-full resize-none border-0 bg-white p-4 font-mono text-sm leading-6 focus:outline-none focus:ring-0 lg:border-r lg:border-gray-300 dark:bg-gray-950 dark:lg:border-gray-700"><%= @content %></textarea>
+    <div data-infodocs-editor-target="pane" data-pane="preview" class="hidden min-h-[60dvh] overflow-y-auto p-4 lg:block" data-controller="infodocs-mermaid">
+      <div data-infodocs-editor-target="preview"
+           class="prose prose-slate max-w-none dark:prose-invert prose-table:block prose-table:overflow-x-auto [&_:not(pre)>code]:rounded-md [&_:not(pre)>code]:bg-gray-100 [&_:not(pre)>code]:px-1.5 [&_:not(pre)>code]:py-0.5 [&_:not(pre)>code]:text-[0.875em] [&_:not(pre)>code]:font-normal [&_:not(pre)>code]:before:content-none [&_:not(pre)>code]:after:content-none dark:[&_:not(pre)>code]:bg-gray-800"></div>
+    </div>
+  </div>
+
+  <p class="mt-3 text-sm text-gray-500">Saving writes <code><%= @page.relative_path %></code> in your working tree — review and commit the change with git.</p>
+</div>

data/app/views/infodocs/pages/empty_folder.html.erb

@@ -0,0 +1,6 @@
+<h1 class="text-2xl font-bold"><%= @folder.title %></h1>
+<p class="mt-2 text-gray-600 dark:text-gray-400">This folder has no pages yet.</p>
+<% if infodocs_editable? %>
+  <p class="mt-2 text-sm text-gray-500">Use <strong>New page</strong> in the sidebar and pick this folder.</p>
+<% end %>
+<%= link_to "Back to docs", root_path, class: "mt-4 inline-block text-blue-600 underline" %>

data/app/views/infodocs/pages/not_found.html.erb

@@ -0,0 +1,11 @@
+<h1 class="text-2xl font-bold">Page not found</h1>
+<p class="mt-2 text-gray-600 dark:text-gray-400">There is no document at <code><%= params[:path] %></code>.</p>
+<%= link_to "Back to docs", root_path, class: "mt-4 inline-block text-blue-600 underline" %>
+<% if @suggestions.present? %>
+  <h2 class="mt-8 text-sm font-medium">Did you mean</h2>
+  <ul class="mt-2 space-y-1">
+    <% @suggestions.each do |result| %>
+      <li><%= link_to result.title, page_path(result.slug), class: "text-blue-600 hover:underline" %></li>
+    <% end %>
+  </ul>
+<% end %>

data/app/views/infodocs/pages/show.html.erb

@@ -0,0 +1,92 @@
+<div class="flex gap-10" data-controller="infodocs-mermaid">
+  <article class="min-w-0 flex-1">
+    <div class="mb-4 flex items-start justify-between gap-3">
+    <nav class="flex flex-wrap items-center gap-1 text-sm text-gray-500" aria-label="Breadcrumb">
+      <%= link_to Infodocs.config.title, root_path, class: "hover:underline" %>
+      <% @trail.each do |node| %>
+        <span aria-hidden="true">/</span>
+        <% if node.slug == @page.slug %>
+          <span class="text-gray-900 dark:text-gray-100"><%= node.title %></span>
+        <% else %>
+          <%= link_to node.title, page_path(node.slug), class: "hover:underline" %>
+        <% end %>
+      <% end %>
+    </nav>
+
+    <div class="flex shrink-0 items-center gap-2">
+      <button type="button" data-infodocs-copy-markdown="<%= raw_page_path(@page.slug.presence) %>" title="Copy this page as Markdown"
+              class="inline-flex min-h-9 shrink-0 items-center gap-1.5 rounded-md border border-gray-300 px-3 text-sm font-medium text-gray-700 hover:bg-gray-100 dark:border-gray-700 dark:text-gray-200 dark:hover:bg-gray-800">
+        <svg class="size-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="9" y="9" width="11" height="11" rx="2"/><path d="M5 15V6a2 2 0 012-2h9"/></svg>
+        <span data-label>Copy Markdown</span>
+      </button>
+    <% if infodocs_editable? %>
+      <%= link_to edit_page_path(@page.slug.presence), title: "Edit #{@page.relative_path}",
+            class: "inline-flex min-h-9 shrink-0 items-center gap-1.5 rounded-md border border-gray-300 px-3 text-sm font-medium text-gray-700 hover:bg-gray-100 dark:border-gray-700 dark:text-gray-200 dark:hover:bg-gray-800" do %>
+        <svg class="size-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 20h9M16.5 3.5a2.1 2.1 0 013 3L7 19l-4 1 1-4z"/></svg>
+        Edit
+      <% end %>
+      <% page_node = docs_tree.node(@page.slug) %>
+      <% if page_node&.leaf? && infodocs_deletable?(page_node) %>
+        <button type="button" <%= tag.attributes(infodocs_delete_attributes(page_node)) %> title="Delete this page"
+                class="inline-flex min-h-9 shrink-0 items-center gap-1.5 rounded-md border border-red-200 px-3 text-sm font-medium text-red-600 hover:bg-red-50 dark:border-red-900 dark:hover:bg-red-950">Delete</button>
+      <% end %>
+    <% end %>
+    </div>
+    </div>
+
+    <% if @rendered.toc.any? %>
+      <details class="mb-4 rounded-md border border-gray-200 text-sm xl:hidden dark:border-gray-800">
+        <summary class="flex min-h-11 cursor-pointer items-center px-3 font-medium">On this page</summary>
+        <ul class="space-y-1 border-t border-gray-200 px-3 py-2 dark:border-gray-800">
+          <% @rendered.toc.each do |heading| %>
+            <li class="<%= 'pl-4' if heading.level == 3 %>"><a href="#<%= heading.id %>" class="block py-1 text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-100"><%= heading.text %></a></li>
+          <% end %>
+        </ul>
+      </details>
+    <% end %>
+    <% if @page.tags.any? %>
+      <div class="mb-4 flex flex-wrap gap-1.5">
+        <% @page.tags.each do |tag| %>
+          <%= link_to tag, tags_path(tag), class: "rounded-full border border-gray-300 px-2.5 py-0.5 text-xs text-gray-600 hover:bg-gray-100 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-800" %>
+        <% end %>
+      </div>
+    <% end %>
+    <div data-controller="infodocs-highlight" class="prose prose-slate max-w-none dark:prose-invert prose-table:block prose-table:overflow-x-auto [&_:not(pre)>code]:rounded-md [&_:not(pre)>code]:bg-gray-100 [&_:not(pre)>code]:px-1.5 [&_:not(pre)>code]:py-0.5 [&_:not(pre)>code]:text-[0.875em] [&_:not(pre)>code]:font-normal [&_:not(pre)>code]:before:content-none [&_:not(pre)>code]:after:content-none dark:[&_:not(pre)>code]:bg-gray-800">
+      <%= @rendered.html.html_safe %>
+    </div>
+
+    <% repo_url = @page.repo_edit_url(Infodocs.config.repo_url, Infodocs.config.repo_branch, Rails.root) %>
+    <div class="mt-12 flex flex-wrap items-center justify-between gap-2 text-xs text-gray-500">
+      <span>Last updated <time datetime="<%= @page.updated_at.iso8601 %>"><%= @page.updated_at.strftime("%-d %b %Y") %></time></span>
+      <% if repo_url %><%= link_to "Edit on GitHub", repo_url, class: "hover:text-gray-900 hover:underline dark:hover:text-gray-100", target: "_blank", rel: "noopener" %><% end %>
+    </div>
+    <nav class="mt-4 grid gap-3 border-t border-gray-200 pt-6 sm:grid-cols-2 dark:border-gray-800" aria-label="Pagination">
+      <% if @previous %>
+        <%= link_to page_path(@previous.slug), class: "rounded-md border border-gray-200 p-4 hover:bg-gray-50 dark:border-gray-800 dark:hover:bg-gray-900" do %>
+          <span class="block text-xs text-gray-500">← Previous</span><%= @previous.title %>
+        <% end %>
+      <% else %><span></span><% end %>
+      <% if @next %>
+        <%= link_to page_path(@next.slug), class: "rounded-md border border-gray-200 p-4 text-right hover:bg-gray-50 dark:border-gray-800 dark:hover:bg-gray-900" do %>
+          <span class="block text-xs text-gray-500">Next →</span><%= @next.title %>
+        <% end %>
+      <% end %>
+    </nav>
+  </article>
+
+  <% if @rendered.toc.any? %>
+    <aside class="hidden w-56 shrink-0 xl:block" data-controller="infodocs-toc">
+      <div class="sticky top-20 text-sm">
+        <p class="mb-2 font-medium">On this page</p>
+        <ul class="space-y-1 border-l border-gray-200 dark:border-gray-800">
+          <% @rendered.toc.each do |heading| %>
+            <li class="<%= 'pl-6' if heading.level == 3 %> <%= 'pl-3' if heading.level == 2 %>">
+              <a href="#<%= heading.id %>" data-infodocs-toc-target="link"
+                 class="block py-0.5 text-gray-500 hover:text-gray-900 aria-[current]:font-medium aria-[current]:text-blue-600 dark:hover:text-gray-100"><%= heading.text %></a>
+            </li>
+          <% end %>
+        </ul>
+      </div>
+    </aside>
+  <% end %>
+</div>

data/app/views/infodocs/searches/index.html.erb

@@ -0,0 +1,20 @@
+<h1 class="text-2xl font-bold">Search</h1>
+<% if @query.empty? %>
+  <p class="mt-2 text-gray-600 dark:text-gray-400">
+    Syntax: <code>word word</code> (AND), <code>"exact phrase"</code>, <code>a OR b</code>, <code>-exclude</code>,
+    <code>pref*</code>, <code>title:setup</code>, <code>path:guides</code>, <code>heading:install</code>.
+  </p>
+<% elsif @results.empty? %>
+  <p class="mt-2 text-gray-600 dark:text-gray-400">No results for <strong><%= @query %></strong>.</p>
+<% else %>
+  <p class="mt-2 text-sm text-gray-500"><%= pluralize(@results.size, "result") %> for <strong><%= @query %></strong></p>
+  <ol class="mt-4 divide-y divide-gray-200 dark:divide-gray-800">
+    <% @results.each do |result| %>
+      <li class="py-4">
+        <%= link_to result.title, page_path(result.slug, q: @query), class: "text-lg font-medium text-blue-700 hover:underline dark:text-blue-300" %>
+        <p class="text-xs text-gray-500">/<%= result.slug %></p>
+        <p class="mt-1 text-sm text-gray-700 [&_mark]:rounded [&_mark]:bg-yellow-200 [&_mark]:px-0.5 dark:text-gray-300 dark:[&_mark]:bg-yellow-700"><%= result.snippet.html_safe %></p>
+      </li>
+    <% end %>
+  </ol>
+<% end %>

data/app/views/infodocs/tags/index.html.erb

@@ -0,0 +1,26 @@
+<h1 class="text-2xl font-bold"><%= @tag ? "Tag: #{@tag}" : "Tags" %></h1>
+<% if @tags.empty? %>
+  <p class="mt-2 text-gray-600 dark:text-gray-400">No tags yet. Add <code>tags: [guide, api]</code> to a page's frontmatter<%= " or use the tags field in the editor" if infodocs_editable? %>.</p>
+<% else %>
+  <div class="mt-4 flex flex-wrap gap-2">
+    <% @tags.each do |tag, count| %>
+      <%= link_to "#{tag} · #{count}", (tag == @tag ? tags_path : tags_path(tag)),
+            class: "rounded-full border px-3 py-1 text-sm #{tag == @tag ? 'border-blue-600 bg-blue-600 text-white' : 'border-gray-300 text-gray-700 hover:bg-gray-100 dark:border-gray-700 dark:text-gray-300 dark:hover:bg-gray-800'}" %>
+    <% end %>
+  </div>
+  <% if @tag %>
+    <% if @pages.empty? %>
+      <p class="mt-6 text-gray-600 dark:text-gray-400">No pages tagged <strong><%= @tag %></strong>.</p>
+    <% else %>
+      <ul class="mt-6 divide-y divide-gray-200 dark:divide-gray-800">
+        <% @pages.each do |page| %>
+          <li class="py-3">
+            <%= link_to page.title, page_path(page.slug), class: "font-medium text-blue-700 hover:underline dark:text-blue-300" %>
+            <p class="text-xs text-gray-500">/<%= page.slug %></p>
+            <% if page.description.present? %><p class="mt-1 text-sm text-gray-700 dark:text-gray-300"><%= page.description %></p><% end %>
+          </li>
+        <% end %>
+      </ul>
+    <% end %>
+  <% end %>
+<% end %>

data/app/views/layouts/infodocs/application.html.erb

@@ -0,0 +1,104 @@
+<!DOCTYPE html>
+<html lang="<%= I18n.locale %>" class="h-full">
+  <head>
+    <title><%= [@page&.title, Infodocs.config.title].compact.join(" · ") %></title>
+    <meta name="viewport" content="width=device-width,initial-scale=1,viewport-fit=cover">
+    <%= csrf_meta_tags %>
+    <%= csp_meta_tag %>
+    <% if Infodocs.config.mermaid_url.present? %><meta name="infodocs-mermaid-url" content="<%= Infodocs.config.mermaid_url %>"><% end %>
+    <% Infodocs.config.stylesheets.each do |sheet| %>
+      <%= stylesheet_link_tag sheet, "data-turbo-track": "reload" %>
+    <% end %>
+    <style <%= tag.attributes(nonce: content_security_policy_nonce) %>><%= raw infodocs_highlight_css %></style>
+    <%= javascript_importmap_tags "infodocs/application" %>
+    <% if (favicon = infodocs_option(:favicon)).present? %><link rel="icon" href="<%= favicon %>"><% end %>
+    <%= raw infodocs_option(:head_html) %>
+  </head>
+
+  <body class="h-full bg-white text-gray-900 antialiased dark:bg-gray-950 dark:text-gray-100"
+        data-controller="infodocs-sidebar infodocs-search">
+    <a href="#infodocs-main" class="sr-only focus:not-sr-only focus:absolute focus:left-2 focus:top-2 focus:z-50 focus:rounded focus:bg-white focus:px-3 focus:py-2 focus:text-sm focus:shadow dark:focus:bg-gray-900">Skip to content</a>
+    <header class="sticky top-0 z-30 flex h-14 items-center gap-3 border-b border-gray-200 bg-white/90 px-4 backdrop-blur dark:border-gray-800 dark:bg-gray-950/90">
+      <button type="button" class="-ml-2 inline-flex size-11 items-center justify-center rounded-md hover:bg-gray-100 dark:hover:bg-gray-800"
+              aria-label="Toggle navigation" aria-controls="infodocs-sidebar" data-action="infodocs-sidebar#toggle">
+        <svg class="size-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 6h16M4 12h16M4 18h16"/></svg>
+      </button>
+      <%= link_to root_path, class: "flex items-center gap-2 font-semibold" do %>
+        <% if (logo = infodocs_option(:logo)).present? %><img src="<%= logo %>" alt="" class="h-6 w-auto"><% end %>
+        <span><%= Infodocs.config.title %></span>
+      <% end %>
+      <nav aria-label="Site links" class="ml-2 hidden items-center gap-1 md:flex">
+        <% infodocs_header_links.each do |link| %>
+          <%= link_to link[:label], link[:url], class: "rounded-md px-2 py-1 text-sm text-gray-600 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-800" %>
+        <% end %>
+      </nav>
+
+      <%= form_with url: search_path, method: :get, class: "relative ml-auto w-full max-w-sm", data: { turbo: false, infodocs_search_url: search_path(format: :json) } do %>
+        <input type="search" name="q" value="<%= params[:q] %>" placeholder="Search…  ⌘K"
+               autocomplete="off" data-infodocs-search-target="input"
+               class="w-full rounded-md border border-gray-300 bg-white px-3 py-2 text-base focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500 sm:text-sm dark:border-gray-700 dark:bg-gray-900">
+        <ul hidden role="listbox" data-infodocs-search-target="results"
+            class="absolute inset-x-0 top-full z-40 mt-1 max-h-96 overflow-y-auto rounded-md border border-gray-200 bg-white py-1 shadow-lg dark:border-gray-700 dark:bg-gray-900"></ul>
+      <% end %>
+    </header>
+
+    <div class="flex w-full">
+      <div class="fixed inset-0 z-30 hidden bg-black/40 lg:hidden" data-infodocs-sidebar-target="backdrop" data-action="click->infodocs-sidebar#close"></div>
+
+      <aside id="infodocs-sidebar" data-infodocs-sidebar-target="panel" data-open="false" data-collapsed="false"
+             class="fixed inset-y-0 left-0 z-40 w-72 -translate-x-full overflow-y-auto border-r border-gray-200 bg-white px-3 pb-8 pt-16 transition-transform data-[open=true]:translate-x-0 lg:sticky lg:top-14 lg:z-0 lg:h-[calc(100dvh-3.5rem)] lg:shrink-0 lg:translate-x-0 lg:pt-4 lg:data-[collapsed=true]:hidden dark:border-gray-800 dark:bg-gray-950">
+        <div data-controller="infodocs-tree-editor" data-infodocs-tree-editor-url-value="<%= move_tree_path %>">
+        <% if infodocs_editable? %>
+          <div class="mb-2 flex items-center justify-between gap-2 px-2">
+            <span class="text-xs font-medium uppercase tracking-wide text-gray-400">Pages</span>
+            <button type="button" data-action="infodocs-tree-editor#toggle" data-infodocs-tree-editor-target="toggle" aria-pressed="false"
+                    class="min-h-8 rounded-md px-2 text-xs font-medium text-gray-600 hover:bg-gray-100 aria-pressed:bg-blue-600 aria-pressed:text-white dark:text-gray-300 dark:hover:bg-gray-800">Reorder</button>
+          </div>
+          <p class="mb-2 hidden px-2 text-xs text-gray-500" data-infodocs-tree-editor-target="status" role="status"></p>
+          <details class="mb-3 rounded-md border border-gray-200 dark:border-gray-800">
+            <summary class="flex min-h-9 cursor-pointer list-none items-center gap-1.5 px-2 text-sm font-medium text-gray-700 hover:bg-gray-100 dark:text-gray-200 dark:hover:bg-gray-800">
+              <svg class="size-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 5v14M5 12h14"/></svg> New page
+            </summary>
+            <%= form_with url: new_tree_page_path, class: "space-y-2 border-t border-gray-200 p-2 dark:border-gray-800", data: { turbo: false } do %>
+              <input type="text" name="title" required placeholder="Title" autocomplete="off" aria-label="Title"
+                     class="w-full rounded-md border border-gray-300 bg-white px-2 py-2 text-base focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500 sm:text-sm dark:border-gray-700 dark:bg-gray-900">
+              <select name="parent" aria-label="Folder" class="w-full rounded-md border border-gray-300 bg-white px-2 py-2 text-base sm:text-sm dark:border-gray-700 dark:bg-gray-900">
+                <%= options_for_select(infodocs_folder_options, @page&.directory_slug) %>
+              </select>
+              <select name="kind" aria-label="Type" class="w-full rounded-md border border-gray-300 bg-white px-2 py-2 text-base sm:text-sm dark:border-gray-700 dark:bg-gray-900">
+                <option value="page">Page (.md file)</option>
+                <option value="folder">Folder</option>
+              </select>
+              <button type="submit" class="min-h-9 w-full rounded-md bg-blue-600 px-3 text-sm font-medium text-white hover:bg-blue-500">Create &amp; edit</button>
+            <% end %>
+          </details>
+        <% end %>
+        <% if infodocs_header_links.any? %>
+          <nav aria-label="Site links" class="mb-3 flex flex-wrap gap-1 px-2 md:hidden">
+            <% infodocs_header_links.each do |link| %>
+              <%= link_to link[:label], link[:url], class: "rounded-md border border-gray-200 px-2 py-1 text-xs text-gray-600 dark:border-gray-700 dark:text-gray-400" %>
+            <% end %>
+          </nav>
+        <% end %>
+        <% if visible_tags.any? %>
+          <div class="mb-3 flex flex-wrap items-center gap-1.5 px-2" aria-label="Filter by tag" role="group">
+            <% visible_tags.each do |tag, count| %>
+              <% on = infodocs_active_tag == tag %>
+              <%= link_to "#{tag} #{count}", (on ? request.path : "#{request.path}?#{{ tag: tag }.to_query}"), aria: { pressed: on },
+                    class: "rounded-full border px-2 py-0.5 text-xs #{on ? 'border-blue-600 bg-blue-600 text-white' : 'border-gray-300 text-gray-600 hover:bg-gray-100 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-800'}" %>
+            <% end %>
+            <%= link_to "all tags", tags_path, class: "text-xs text-gray-500 hover:underline" %>
+          </div>
+        <% end %>
+        <nav aria-label="Docs" class="group/nav" data-reordering="false" data-infodocs-tree-editor-target="nav" data-controller="infodocs-tree-state">
+          <%= render "infodocs/tree", nodes: docs_tree.children.reject(&:hidden), current: @page&.slug %>
+        </nav>
+        </div>
+      </aside>
+
+      <main id="infodocs-main" class="min-w-0 flex-1 px-4 py-6 pb-[max(1.5rem,env(safe-area-inset-bottom))] md:px-8">
+        <%= yield %>
+      </main>
+    </div>
+  </body>
+</html>

data/config/importmap.rb

@@ -0,0 +1,6 @@
+# frozen_string_literal: true
+
+pin "infodocs/application", to: "infodocs/application.js"
+pin_all_from File.expand_path("../app/javascript/infodocs/controllers", __dir__), under: "infodocs/controllers"
+pin "mermaid", to: "https://cdn.jsdelivr.net/npm/mermaid@11.4.1/dist/mermaid.esm.min.mjs"
+pin "sortablejs", to: "infodocs/vendor/sortable.esm.js" # 1.15.6, MIT

data/config/routes.rb

@@ -0,0 +1,26 @@
+# frozen_string_literal: true
+
+Infodocs::Engine.routes.draw do
+  get "search", to: "searches#index", as: :search
+
+  # Editing (development only, guarded in EditorController). The `_` prefix
+  # cannot clash with docs pages: the tree ignores names starting with `_`.
+  get "_edit(/*path)", to: "editor#edit", as: :edit_page, format: false
+  patch "_edit(/*path)", to: "editor#update", format: false
+  post "_preview(/*path)", to: "editor#preview", as: :preview_page, format: false
+
+  post "_tree/new", to: "trees#create", as: :new_tree_page, format: false
+  delete "_tree", to: "trees#destroy", as: :delete_tree, format: false
+  post "_tree/tags", to: "trees#tags", as: :tag_tree_page, format: false
+  get "_tags(/:tag)", to: "tags#index", as: :tags, constraints: { tag: %r{[^/]+} }, format: false
+  post "_tree/move", to: "trees#move", as: :move_tree, format: false
+
+  get "llms.txt", to: "indexes#llms", format: false
+  get "sitemap.xml", to: "indexes#sitemap", format: false
+
+  get "_raw(/*path)", to: "raws#show", as: :raw_page, format: false
+  get "_asset/*path", to: "assets#show", as: :asset, format: false
+
+  root to: "pages#show"
+  get "*path", to: "pages#show", as: :page, format: false
+end

data/lib/generators/infodocs/install/install_generator.rb

@@ -0,0 +1,59 @@
+# frozen_string_literal: true
+
+module Infodocs
+  module Generators
+    class InstallGenerator < Rails::Generators::Base
+      source_root File.expand_path("templates", __dir__)
+
+      class_option :path, type: :string, default: "docs", desc: "Directory (relative to the app root) holding your .md files"
+      class_option :mount, type: :string, default: "/docs", desc: "URL path to mount the docs at"
+
+      def create_initializer
+        template "initializer.rb.tt", "config/initializers/infodocs.rb"
+      end
+
+      def mount_engine
+        routes = File.join(destination_root, "config/routes.rb")
+        return if File.exist?(routes) && File.read(routes).include?("Infodocs::Engine")
+
+        route %(mount Infodocs::Engine => "#{options[:mount]}")
+      end
+
+      def create_sample_docs
+        empty_directory options[:path]
+        create_file File.join(options[:path], "_tree.yml"), "title: Docs\norder: [getting-started]\n"
+        template "getting-started.md.tt", File.join(options[:path], "getting-started.md")
+      end
+
+      def configure_tailwind
+        css = tailwind_entry
+        return say("Tailwind entry CSS not found; add `@source \"#{engine_root}/app\";` and `@plugin \"@tailwindcss/typography\";` to it manually.", :yellow) unless css
+
+        content = File.read(File.join(destination_root, css))
+        append_to_file css, %(\n@plugin "@tailwindcss/typography";\n) unless content.include?("@tailwindcss/typography")
+        return if content.include?(engine_root)
+
+        append_to_file css, %(\n/* Infodocs: scan engine views for utility classes. Re-run `rails g infodocs:install` if the gem path changes. */\n@source "#{engine_root}/app";\n)
+      end
+
+      def ignore_index
+        append_to_file ".gitignore", "\n/tmp/infodocs/\n" if File.exist?(File.join(destination_root, ".gitignore"))
+      end
+
+      def show_readme
+        say "\nInfodocs installed. Start the server and open #{options[:mount]}.", :green
+      end
+
+      private
+
+      def tailwind_entry
+        %w[app/assets/tailwind/application.css app/assets/stylesheets/application.tailwind.css app/assets/stylesheets/application.css]
+          .find { |file| File.exist?(File.join(destination_root, file)) && File.read(File.join(destination_root, file)).include?("tailwindcss") }
+      end
+
+      def engine_root
+        Infodocs::Engine.root.to_s
+      end
+    end
+  end
+end

data/lib/generators/infodocs/install/templates/getting-started.md.tt

@@ -0,0 +1,8 @@
+# Getting started
+
+Welcome. Files in this folder are shown in the sidebar; order them with `_tree.yml`.
+
+```mermaid
+graph LR
+  Markdown --> Infodocs --> Docs
+```

data/lib/generators/infodocs/install/templates/initializer.rb.tt

@@ -0,0 +1,51 @@
+# frozen_string_literal: true
+
+Infodocs.configure do |config|
+  # One or more directories with .md files. Several become top-level folders.
+  # Give a directory its own URL name and sidebar title with a hash:
+  #   config.paths = [
+  #     { path: Rails.root.join("docs"), slug: "app", title: "Application" },
+  #     { path: Rails.root.join("lib/payments/docs"), slug: "payments", title: "Payments" }
+  #   ]
+  config.paths = [Rails.root.join("<%= options[:path] %>")]
+
+  config.title = "Docs"
+
+  # :none (public), :basic, :devise or a lambda evaluated in the controller
+  # (return truthy to allow), e.g. -> { current_user&.admin? }
+  config.auth = :none
+
+  # Branding (each can be a value or `->(view) { view.image_path("logo.svg") }`).
+  # config.logo = "/logo.svg"
+  # config.favicon = "/favicon.ico"
+  # config.header_links = [{ label: "App", url: "/" }, { label: "Status", url: "https://status.example.com" }]
+  # config.head_html = '<script defer src="https://analytics.example.com/script.js"></script>'
+
+  # Mermaid is loaded from a CDN by default; point it at your own copy if you need to.
+  # config.mermaid_url = "/vendor/mermaid.esm.min.mjs"
+
+  # Hide individual pages from some visitors (tree, search, llms.txt, sitemap and
+  # direct URLs). `user` is the signed-in Devise user, or current_user if defined.
+  # config.page_authorize = ->(page, user) { !page.tags.include?("internal") || user&.admin? }
+
+  # Edit/create/move/delete pages from the browser. Only works in development,
+  # on this machine; the changes are written to the .md files for you to commit.
+  config.editable = Rails.env.development?
+
+  # config.auth = :basic
+  # config.basic_auth = { user: ENV["DOCS_USER"], password: ENV["DOCS_PASSWORD"] }
+
+  # config.auth = :devise
+  # config.devise = { scope: :user, authorize: ->(user) { user.admin? } }
+
+  # Code colours: :one (default), :github, :vscode, :catppuccin, or tweak one:
+  #   config.code_theme = { base: :one, dark: { keyword: "#ff79c6" } }
+  config.code_theme = :one
+
+  # "Edit on GitHub" link in the page footer (paths are relative to Rails.root).
+  # config.repo_url = "https://github.com/your-org/your-app"
+  # config.repo_branch = "main"
+
+  # Stylesheet tags rendered in the docs layout (tailwindcss-rails builds "tailwind").
+  # config.stylesheets = %w[tailwind]
+end

data/lib/generators/infodocs/views/views_generator.rb

@@ -0,0 +1,13 @@
+# frozen_string_literal: true
+
+module Infodocs
+  module Generators
+    class ViewsGenerator < Rails::Generators::Base
+      desc "Copies Infodocs views into app/views for customisation"
+
+      def copy_views
+        directory Infodocs::Engine.root.join("app/views").to_s, "app/views"
+      end
+    end
+  end
+end