hot_docs 0.0.0

data/website/app/views/hot_docs/components.html.mderb

@@ -0,0 +1,32 @@
+<%= content_for(:title, "HotDocs: Components") %>
+
+# HotDocs: Components
+
+HotDocs is responsive. Feel free to resize this website to see it in action.
+
+The following screenshots show how components are laid out on different breakpoints:
+
+## Desktop
+
+<div class="screenshot screenshot--desktop">
+  <%= image_tag asset_path("hot_docs_components_desktop.png"), loading: "lazy", size: "600x385", alt: "Screenshot of this website on desktop: top = nav, left = menu, right = table of contents, bottom = footer.", class: "screenshot__image", usemap: "#imagemap-desktop" %>
+
+  <map class="imagemap" name="imagemap-desktop">
+    <area shape="rect" coords="0,0,600,25" href="<%= nav_path %>" alt="Link to Nav component">
+    <area shape="rect" coords="0,25,130,200" href="<%= nav_path %>" alt="Link to Menu component">
+    <area shape="rect" coords="480,25,600,200" href="<%= toc_path %>" alt="Link to Table of contents component">
+    <area shape="rect" coords="0,200,600,380" href="<%= footer_path %>" alt="Link to Footer component">
+  </map>
+</div>
+
+## Mobile
+
+<div class="screenshot screenshot--mobile">
+  <%= image_tag asset_path("hot_docs_components_mobile.png"), loading: "lazy", size: "400x1120", alt: "Screenshot of this website on mobile: top = nav, top-left = sidenav, center-top = table of contents, bottom = footer.", class: "screenshot__image", usemap: "#imagemap-mobile" %>
+
+  <map class="imagemap" name="imagemap-mobile">
+    <area shape="rect" coords="0,0,400,50" href="<%= nav_path %>" alt="Link to Nav component">
+    <area shape="rect" coords="0,60,400,100" href="<%= toc_path %>" alt="Link to Table of contents component">
+    <area shape="rect" coords="0,530,400,1120" href="<%= footer_path %>" alt="Link to Footer component">
+  </map>
+</div>

data/website/app/views/hot_docs/embedded.html.mderb

@@ -0,0 +1,12 @@
+<%= content_for(:title, "HotDocs: Embedded") %>
+
+# HotDocs: Embedded
+
+Follow these steps to embed HotDocs in an already existing Rails application:
+
+```
+curl https://raw.githubusercontent.com/3v0k4/hot-docs/refs/heads/main/bin/embed_hot_docs -o embed_hot_docs
+bash embed_hot_docs
+```
+
+To customize your docs, take a look at <%= link_to "Components", components_path %>.

data/website/app/views/hot_docs/footer.html.mderb

@@ -0,0 +1,13 @@
+<%= content_for(:title, "HotDocs: Footer") %>
+
+# HotDocs: Footer
+
+You can support HotDocs by either:
+
+- Keeping the "Built with Rails & HotDocs" credits
+- Paying for a license
+
+## Implementation
+
+- Html: <%= link_to raw("<code>layouts/hot_docs.html.erb</code>"), "https://github.com/3v0k4/hot_docs/blob/main/app/views/layouts/hot_docs.html.erb" %>
+- Css: `.footer` in <%= link_to raw("<code>hot_docs.css</code>"), "https://github.com/3v0k4/hot_docs/blob/main/app/assets/stylesheets/hot_docs.css" %>

data/website/app/views/hot_docs/helpers.html.mderb

@@ -0,0 +1,33 @@
+<%= content_for(:title, "HotDocs: Helpers") %>
+
+# HotDocs: Helpers
+
+HotDocs comes with helpers.
+
+## `active_link_to`
+
+Produces a `<a class="active">` if the link points to the current page.
+
+**Code**
+
+```erb
+<%%= active_link_to "Self", root_path %>
+```
+
+**Result**
+
+<%= active_link_to "Self", root_path %>
+
+## `external_link_to`
+
+Produces a `<a>` with the external link icon.
+
+**Code**
+
+```erb
+<%%= external_link_to "Example", "example.com" %>
+```
+
+**Result**
+
+<%= external_link_to "Example", "example.com" %>

data/website/app/views/hot_docs/index.html.erb

@@ -0,0 +1,143 @@
+<%= content_for(:title, "HotDocs: Welcome") %>
+
+<p class="supertitle">Stop the JavaScript madness:</p>
+
+<h1 class="title">Write your docs with Ruby on Rails</h1>
+
+<div class="subtitle" data-controller="typewriter" data-typewriter-phrases-value='[ "Power of Rails", "Finesse of Hotwire", "Speed of Jekyll", "Awe of Docusaurus" ]'>
+  <p class="subtitle__fixed">Unleash the</p>
+  <p class="subtitle__typewriter" data-typewriter-target="typewrite">Power of Rails</p>
+  <p class="subtitle__fixed">with HotDocs</p>
+</div>
+
+<%= image_tag "/hot_docs.svg", class: "logo", alt: "A humanized and happy hot dog", size: "160x160" %>
+
+<div class="actions">
+  <div class="actions__buttons">
+    <%= link_to standalone_path, class: "actions__button" do %>
+      <span>Start from scratch</span>
+      <span class="actions__footnote">(starter-kit)</span>
+    <% end %>
+
+    <%= link_to embedded_path, class: "actions__button" do %>
+      <span>Embed in Rails app</span>
+      <span class="actions__footnote">(components)</span>
+    <% end %>
+  </div>
+
+  <p class="actions__footnote">..or read the <%= link_to "Quickstart", quickstart_path %></p>
+</div>
+
+
+<div class="benefits">
+  <h2>HotDocs is a set of optimized Rails components &amp; tools for writing docs</h2>
+
+  <div class="benefits__cards">
+    <div class="benefits__card">
+      <p class="benefits__card-title">It's just Rails</p>
+
+      <p>Do you need the database? Or want to reuse code? What about Hotwire? Yes, yes, and yes! As a Rails dev, you'll feel at home.</p>
+    </div>
+
+    <div class="benefits__card">
+      <p class="benefits__card-title">Focus on the docs</p>
+
+      <p>HotDocs covers all your bases, you only need to author the content. Markdown support (and plugins) included.</p>
+    </div>
+
+    <div class="benefits__card">
+      <p class="benefits__card-title">Static export 🔜</p>
+
+      <p>Export Html and Css for speed while allowing islands of dynamic Js that can interact with your backend.</p>
+    </div>
+  </div>
+</div>
+
+<div class="comparison">
+  <h2>Comparison with Jekyll &amp; Docusaurus</h2>
+
+  <div class="comparison__table-wrapper">
+    <table class="comparison__table">
+      <tr>
+        <th></th>
+        <th class="comparison__who">HotDocs</th>
+        <th class="comparison__who">Jekyll</th>
+        <th class="comparison__who">Docusaurus</th>
+      </tr>
+
+      <tr>
+        <td class="comparison__what">Ruby on Rails <span class="comparison__note">(database, Hotwire, etc.)</span></td>
+        <td class="comparison__how">✅</td>
+        <td class="comparison__how">❌</td>
+        <td class="comparison__how">❌</td>
+      </tr>
+
+      <tr>
+        <td class="comparison__what"><%= link_to "Embed docs in an existing Rails app", embedded_path %></td>
+        <td class="comparison__how">✅</td>
+        <td class="comparison__how">❌</td>
+        <td class="comparison__how">❌</td>
+      </tr>
+
+      <tr>
+        <td class="comparison__what"><%= link_to "Standalone docs", standalone_path %></td>
+        <td class="comparison__how">✅</td>
+        <td class="comparison__how">✅</td>
+        <td class="comparison__how">✅</td>
+      </tr>
+
+      <tr>
+        <td class="comparison__what"><%= link_to "Styled components you can customize", components_path %></td>
+        <td class="comparison__how">✅</td>
+        <td class="comparison__how">✅</td>
+        <td class="comparison__how">✅</td>
+      </tr>
+
+      <tr>
+        <td class="comparison__what"><%= link_to "Markdown", markdown_path %></td>
+        <td class="comparison__how">🚀</td>
+        <td class="comparison__how">👍</td>
+        <td class="comparison__how">🚀</td>
+      </tr>
+
+      <tr>
+        <td class="comparison__what"><%= link_to "Static export", static_export_path %></td>
+        <td class="comparison__how">🔜 🚀</td>
+        <td class="comparison__how">👍</td>
+        <td class="comparison__how">🚀</td>
+      </tr>
+
+      <tr>
+        <td class="comparison__what"><%= link_to "Search", search_path %></td>
+        <td class="comparison__how">🔜 ✅</td>
+        <td class="comparison__how">🔌</td>
+        <td class="comparison__how">🔌</td>
+      </tr>
+
+      <tr>
+        <td class="comparison__what"><%= link_to "Light / Dark", light_dark_path %></td>
+        <td class="comparison__how">🔜 ✅</td>
+        <td class="comparison__how">🔌</td>
+        <td class="comparison__how">✅</td>
+      </tr>
+
+      <tr>
+        <td class="comparison__what"><%= external_link_to "Open source", "https://github.com/3v0k4/hot_docs" %></td>
+        <td class="comparison__how">✅</td>
+        <td class="comparison__how">✅</td>
+        <td class="comparison__how">✅</td>
+      </tr>
+
+      <tr>
+        <td class="comparison__what">Free <span class="comparison__note">(if you keep the "Built with HotDocs" in the footer)</span></td>
+        <td class="comparison__how">✅</td>
+        <td class="comparison__how">✅</td>
+        <td class="comparison__how">✅</td>
+      </tr>
+
+      <tr>
+        <td colspan="4">Anything missing? Suggestions? <%= external_link_to "Contribute", "https://github.com/3v0k4/hot_docs" %></td>
+      </tr>
+    </table>
+  </div>
+</div>

data/website/app/views/hot_docs/light_dark.html.mderb

@@ -0,0 +1,29 @@
+<%= content_for(:title, "HotDocs: Light / Dark") %>
+
+# HotDocs: Light / Dark 🔜
+
+Light / Dark is not yet available.
+
+You can chime in on <%= external_link_to "this GitHub discussion", "https://github.com/3v0k4/hot_docs/discussions/9" %> to let us know you want it or to share wishes and feedback.
+
+<hr />
+
+The Light / Dark theme is implemented with Css variables and a data attribute on `<html>`:
+- `<html data-theme="light">`
+- `<html data-theme="dark">`
+
+## Implementation
+
+Each component in <%= link_to raw("<code>hot_docs.css</code>"), "https://github.com/3v0k4/hot_docs/blob/main/app/assets/stylesheets/hot_docs.css" %> comes with variables for both themes.
+
+For example, the `.footer` styles start with:
+
+```
+:root {
+  --footer-background-color: #e9e9e9;
+}
+
+[data-theme=dark]:root {
+  --footer-background-color: #444444;
+}
+```

data/website/app/views/hot_docs/markdown.html.mderb

@@ -0,0 +1,27 @@
+<%= content_for(:title, "HotDocs: Markdown") %>
+
+# HotDocs: Markdown
+
+**Warning:** The runtime needs <%= external_link_to raw("<code>deno</code>"), "https://deno.com/" %> to compile markdown files.
+
+Markdown support is currently under development. You can chime in on <%= external_link_to "this GitHub discussion", "https://github.com/3v0k4/hot_docs/discussions/7" %> to share wishes and feedback.
+
+HotDocs supports templates ending in `.mderb`: you can mix markdown and erb in the same template.
+
+Behind the curtains, `.mderb` templates are compiled first as `.erb` and second as `.md` with <%= external_link_to "unifiedjs", "https://unifiedjs.com/" %>. This gives you access to a truckload of <%= external_link_to "plugins", "https://unifiedjs.com/explore/package/" %> that you can configure in <%= external_link_to "`config/initializers/markdown.mjs`", "https://github.com/3v0k4/hot_docs/blob/main/config/initializers/markdown.mjs" %>.
+
+For example, if you want all the external links in your `.mderb`s to open in a new tab, just throw in [rehype-external-links](https://github.com/rehypejs/rehype-external-links)!
+
+## Adding `deno` to Heroku
+
+You can check if deno is already installed in your Heroku app with:
+
+```bash
+heroku buildpacks
+```
+
+If deno is not yet installed, you can do so with:
+
+```
+heroku buildpacks:add --index 1 https://github.com/chibat/heroku-buildpack-deno.git
+```

data/website/app/views/hot_docs/nav.html.mderb

@@ -0,0 +1,15 @@
+<%= content_for(:title, "HotDocs: Nav / Sidenav") %>
+
+# HotDocs: Nav / Sidenav
+
+The Nav (top) and Sidenav (hamburger on mobile) contents are declared in <%= link_to raw("<code>hot_docs_helper</code>"), "https://github.com/3v0k4/hot_docs/blob/main/app/helpers/hot_docs_helper.rb" %>:
+- `nav_left_items`: left part of the nav on desktop and sidenav on mobile
+- `nav_right_items`: right part of the nav on desktop and sidenav on mobile
+- `menu_items`: sidenav on mobile
+
+## Implementation
+
+- Html: <%= link_to raw("<code>layouts/hot_docs.html.erb</code>"), "https://github.com/3v0k4/hot_docs/blob/main/app/views/layouts/hot_docs.html.erb" %>
+- Css: `.nav` and `.sidenav` in <%= link_to raw("<code>hot_docs.css</code>"), "https://github.com/3v0k4/hot_docs/blob/main/app/assets/stylesheets/hot_docs.css" %>
+- JavaScript: <%= link_to raw("<code>sidenav_controller.js</code>"), "https://github.com/3v0k4/hot_docs/blob/main/app/javascript/controllers/sidenav_controller.js" %>
+- Ruby: <%= link_to raw("<code>hot_docs_helper.rb</code>"), "https://github.com/3v0k4/hot_docs/blob/main/app/helpers/hot_docs_helper.rb" %>

data/website/app/views/hot_docs/quickstart.html.mderb

@@ -0,0 +1,11 @@
+<%= content_for(:title, "HotDocs: Quickstart") %>
+
+# HotDocs: Quickstart
+
+There are 2 ways to get started with HotDocs:
+- <%= link_to "Embed HotDocs in an already existing Rails application", embedded_path %>
+- <%= link_to "Create a new Rails application for your docs", standalone_path %>
+
+If you are in doubt, embed if you already have an app, otherwise create a new one.
+
+Switching from one to the other is easy, so keep it simple!

data/website/app/views/hot_docs/search.html.mderb

@@ -0,0 +1,7 @@
+<%= content_for(:title, "HotDocs: Search") %>
+
+# HotDocs: Search 🔜
+
+Search is not yet available.
+
+You can chime in on <%= external_link_to "this GitHub discussion", "https://github.com/3v0k4/hot_docs/discussions/8" %> to let us know you want it or to share wishes and feedback.

data/website/app/views/hot_docs/standalone.html.mderb

@@ -0,0 +1,11 @@
+<%= content_for(:title, "HotDocs: Standalone") %>
+
+# HotDocs: Standalone
+
+Clone the repository that powers this website as a starting point:
+
+```
+git clone https://github.com/3v0k4/hot-docs
+```
+
+To customize your docs, take a look at <%= link_to "Components", components_path %>.

data/website/app/views/hot_docs/static_export.html.mderb

@@ -0,0 +1,7 @@
+<%= content_for(:title, "HotDocs: Static export") %>
+
+# HotDocs: Static export 🔜
+
+Static export is not yet available.
+
+You can chime in on <%= external_link_to "this GitHub discussion", "https://github.com/3v0k4/hot_docs/discussions/10" %> to let us know you want it or to share wishes and feedback.

data/website/app/views/hot_docs/toc.html.mderb

@@ -0,0 +1,11 @@
+<%= content_for(:title, "HotDocs: Table of contents") %>
+
+# HotDocs: Table of contents
+
+The table of contents is autogenerated from the headings in your view.
+
+## Implementation
+
+- Html: <%= link_to raw("<code>layouts/hot_docs.html.erb</code>"), "https://github.com/3v0k4/hot_docs/blob/main/app/views/layouts/hot_docs.html.erb" %>
+- Css: `.toc` in <%= link_to raw("<code>hot_docs.css</code>"), "https://github.com/3v0k4/hot_docs/blob/main/app/assets/stylesheets/hot_docs.css" %>
+- JavaScript: <%= link_to raw("<code>toc_controller.js</code>"), "https://github.com/3v0k4/hot_docs/blob/main/app/javascript/controllers/toc_controller.js" %>

data/website/app/views/layouts/hot_docs.html.erb

@@ -0,0 +1,175 @@
+<!DOCTYPE html>
+<html data-theme="light">
+  <head>
+    <title><%= content_for(:title) || "HotDocs" %></title>
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <meta name="apple-mobile-web-app-capable" content="yes">
+    <meta name="mobile-web-app-capable" content="yes">
+    <%= csrf_meta_tags %>
+    <%= csp_meta_tag %>
+
+    <%= yield :head %>
+
+    <%# Enable PWA manifest for installable apps (make sure to enable in config/routes.rb too!) %>
+    <%#= tag.link rel: "manifest", href: pwa_manifest_path(format: :json) %>
+
+    <!-- favicons generated with the favicon_factory gem -->
+    <link rel="icon" href="/hot_docs.svg" type="image/svg+xml">
+    <link rel="icon" href="/favicon.ico" sizes="32x32">
+    <link rel="apple-touch-icon" href="/apple-touch-icon.png">
+
+    <%# Includes all stylesheet files in app/assets/stylesheets %>
+    <%= stylesheet_link_tag :hot_docs, "data-turbo-track": "reload" %>
+    <%= javascript_importmap_tags %>
+  </head>
+
+  <body>
+    <nav class="nav" data-controller="sidenav" data-sidenav-open-class-value="sidenav--open" data-sidenav-main-section-class-value="sidenav__sections--main">
+      <div class="nav__section">
+        <button class="nav__toggle" type="button" aria-label="Toggle navigation" aria-expanded="false" data-action="click->sidenav#open">
+          <svg viewBox="0 0 30 30" aria-hidden="true">
+            <path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path>
+          </svg>
+        </button>
+
+        <%= link_to root_path, class: "nav__brand" do %>
+          <div class="nav__logo-wrapper">
+            <img class="nav__logo" src="/hot_docs.svg" alt="A humanized and happy hot dog" height="32" width="32" />
+          </div>
+
+          <span class="nav__title">HotDocs</span>
+        <% end %>
+
+        <div class="nav__links">
+          <% nav_left_items("nav__link").each do |item| %>
+            <%= item %>
+          <% end %>
+        </div>
+      </div>
+
+      <div class="nav__section">
+        <div class="nav__links">
+          <% nav_right_items("nav__link").each do |item| %>
+            <%= item %>
+          <% end %>
+        </div>
+      </div>
+
+      <div class="sidenav-backdrop"></div>
+      <div class="sidenav">
+        <div class="sidenav__header">
+          <%= link_to root_path, class: "nav__brand" do %>
+            <div class="nav__logo-wrapper">
+              <img class="nav__logo" src="/hot_docs.svg" alt="A humanized and happy hot dog" height="32" width="32" />
+            </div>
+
+            <span class="nav__title">HotDocs</span>
+          <% end %>
+
+          <button aria-label="Close navigation" class="sidenav__toggle" type="button" data-action="click->sidenav#close">
+            <svg viewBox="0 0 15 15">
+              <g stroke="currentColor" stroke-width="1.2">
+                <path d="M.75.75l13.5 13.5M14.25.75L.75 14.25"></path>
+              </g>
+            </svg>
+          </button>
+        </div>
+
+        <div class="sidenav__sections" data-sidenav-target="sections">
+          <div class="sidenav__section">
+            <ul class="menu__section">
+              <% (nav_left_items("menu__link") + nav_right_items("menu__link")).each do |item| %>
+                <li>
+                  <div class="menu__row">
+                    <%= item %>
+                  </div>
+                </li>
+              <% end %>
+            </ul>
+          </div>
+
+          <div class="sidenav__section">
+            <div class="menu__section">
+              <button type="button" class="sidenav__back-button" data-action="click->sidenav#back">← Back to main menu</button>
+            </div>
+
+            <%= menu %>
+          </div>
+        </div>
+      </div>
+    </nav>
+
+    <div class="content">
+      <aside class="menu">
+        <div class="menu__sections">
+          <%= menu %>
+        </div>
+      </aside>
+
+      <main data-controller="toc" class="main">
+        <div class="central">
+          <details name="toc" class="toc">
+            <summary class="toc__label">Table of contents</summary>
+
+            <ul class="toc__entries" data-toc-target="toc">
+              <template data-toc-target="tocTemplate">
+                <li><a id class="toc__link" href></a></li>
+              </template>
+            </ul>
+          </details>
+
+          <article class="article" data-toc-target="article">
+            <%= yield %>
+          </article>
+        </div>
+
+        <div class="sidetoc">
+          <ul class="sidetoc__entries" data-toc-target="sidetoc">
+            <template data-toc-target="sidetocTemplate">
+              <li><a id class="sidetoc__link" href></a></li>
+            </template>
+          </ul>
+        </div>
+      </main>
+    </div>
+
+    <footer class="footer">
+      <div class="footer__sections">
+        <div class="footer__section">
+          <p class="footer__heading">Contribute</p>
+
+          <ul>
+            <li><%= external_link_to "Source Code", "https://github.com/3v0k4/hot_docs", class: "footer__link" %></li>
+          </ul>
+        </div>
+
+        <div class="footer__section">
+          <p class="footer__heading">Community</p>
+
+          <ul>
+            <li><%= external_link_to "GitHub Discussions", "https://github.com/3v0k4/hot_docs/discussions", class: "footer__link" %></li>
+          </ul>
+        </div>
+
+        <div class="footer__section">
+          <p class="footer__heading">(il)Legal</p>
+
+          <ul>
+            <li>Nothing to see here.</li>
+          </ul>
+        </div>
+
+        <div class="footer__section">
+          <p class="footer__heading">HotDocs</p>
+
+          <p>Write your docs with Ruby on Rails.</p>
+        </div>
+      </div>
+
+      <img class="footer__logo" src="/hot_docs.svg" alt="A humanized and happy hot dog" height="150" width="150" />
+
+      <!-- Buy a license to remove the credits -->
+      <p class="credits">Built with Rails &amp; <a class="credits__link" href="https://hotdocsrails.com">HotDocs<img class="credits__logo" src="/hot_docs.svg" alt="A humanized and happy hot dog" height="32" width="32" /></a></p>
+    </footer>
+  </body>
+</html>

data/website/app/views/layouts/mailer.html.erb

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+    <style>
+      /* Email styles need to be inline */
+    </style>
+  </head>
+
+  <body>
+    <%= yield %>
+  </body>
+</html>

data/website/app/views/layouts/mailer.text.erb

@@ -0,0 +1 @@
+<%= yield %>