hotdocs 0.1.0

data/app/assets/stylesheets/hotdocs/reset.css

@@ -0,0 +1,393 @@
+/*
+// The code below is taken from
+// https://unpkg.com/tailwindcss@3.4.17/src/css/preflight.css
+// Copyright (c) Tailwind Labs, Inc. (MIT License)
+*/
+
+/*
+1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
+2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
+*/
+
+*,
+::before,
+::after {
+  box-sizing: border-box; /* 1 */
+  border-width: 0; /* 2 */
+  border-style: solid; /* 2 */
+  border-color: currentColor; /* 2 */
+}
+
+::before,
+::after {
+  --tw-content: '';
+}
+
+/*
+1. Use a consistent sensible line-height in all browsers.
+2. Prevent adjustments of font size after orientation changes in iOS.
+3. Use a more readable tab size.
+4. Use the user's configured `sans` font-family by default.
+5. Use the user's configured `sans` font-feature-settings by default.
+6. Use the user's configured `sans` font-variation-settings by default.
+7. Disable tap highlights on iOS
+*/
+
+html,
+:host {
+  line-height: 1.5; /* 1 */
+  -webkit-text-size-adjust: 100%; /* 2 */
+  -moz-tab-size: 4; /* 3 */
+  tab-size: 4; /* 3 */
+  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* 4 */
+  font-feature-settings: normal; /* 5 */
+  font-variation-settings: normal; /* 6 */
+  -webkit-tap-highlight-color: transparent; /* 7 */
+}
+
+/*
+1. Remove the margin in all browsers.
+2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
+*/
+
+body {
+  margin: 0; /* 1 */
+  line-height: inherit; /* 2 */
+}
+
+/*
+1. Add the correct height in Firefox.
+2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
+3. Ensure horizontal rules are visible by default.
+*/
+
+hr {
+  height: 0; /* 1 */
+  color: inherit; /* 2 */
+  border-top-width: 1px; /* 3 */
+}
+
+/*
+Add the correct text decoration in Chrome, Edge, and Safari.
+*/
+
+abbr:where([title]) {
+  text-decoration: underline dotted;
+}
+
+/*
+Remove the default font size and weight for headings.
+*/
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-size: inherit;
+  font-weight: inherit;
+}
+
+/*
+Reset links to optimize for opt-in styling instead of opt-out.
+*/
+
+a {
+  color: inherit;
+  text-decoration: inherit;
+}
+
+/*
+Add the correct font weight in Edge and Safari.
+*/
+
+b,
+strong {
+  font-weight: bolder;
+}
+
+/*
+1. Use the user's configured `mono` font-family by default.
+2. Use the user's configured `mono` font-feature-settings by default.
+3. Use the user's configured `mono` font-variation-settings by default.
+4. Correct the odd `em` font sizing in all browsers.
+*/
+
+code,
+kbd,
+samp,
+pre {
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; /* 1 */
+  font-feature-settings: normal; /* 2 */
+  font-variation-settings: normal; /* 3 */
+  font-size: 1em; /* 4 */
+}
+
+/*
+Add the correct font size in all browsers.
+*/
+
+small {
+  font-size: 80%;
+}
+
+/*
+Prevent `sub` and `sup` elements from affecting the line height in all browsers.
+*/
+
+sub,
+sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+
+sub {
+  bottom: -0.25em;
+}
+
+sup {
+  top: -0.5em;
+}
+
+/*
+1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
+2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
+3. Remove gaps between table borders by default.
+*/
+
+table {
+  text-indent: 0; /* 1 */
+  border-color: inherit; /* 2 */
+  border-collapse: collapse; /* 3 */
+}
+
+/*
+1. Change the font styles in all browsers.
+2. Remove the margin in Firefox and Safari.
+3. Remove default padding in all browsers.
+*/
+
+button,
+input,
+optgroup,
+select,
+textarea {
+  font-family: inherit; /* 1 */
+  font-feature-settings: inherit; /* 1 */
+  font-variation-settings: inherit; /* 1 */
+  font-size: 100%; /* 1 */
+  font-weight: inherit; /* 1 */
+  line-height: inherit; /* 1 */
+  letter-spacing: inherit; /* 1 */
+  color: inherit; /* 1 */
+  margin: 0; /* 2 */
+  padding: 0; /* 3 */
+}
+
+/*
+Remove the inheritance of text transform in Edge and Firefox.
+*/
+
+button,
+select {
+  text-transform: none;
+}
+
+/*
+1. Correct the inability to style clickable types in iOS and Safari.
+2. Remove default button styles.
+*/
+
+button,
+input:where([type='button']),
+input:where([type='reset']),
+input:where([type='submit']) {
+  -webkit-appearance: button; /* 1 */
+  background-color: transparent; /* 2 */
+  background-image: none; /* 2 */
+}
+
+/*
+Use the modern Firefox focus style for all focusable elements.
+*/
+
+:-moz-focusring {
+  outline: auto;
+}
+
+/*
+Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
+*/
+
+:-moz-ui-invalid {
+  box-shadow: none;
+}
+
+/*
+Add the correct vertical alignment in Chrome and Firefox.
+*/
+
+progress {
+  vertical-align: baseline;
+}
+
+/*
+Correct the cursor style of increment and decrement buttons in Safari.
+*/
+
+::-webkit-inner-spin-button,
+::-webkit-outer-spin-button {
+  height: auto;
+}
+
+/*
+1. Correct the odd appearance in Chrome and Safari.
+2. Correct the outline style in Safari.
+*/
+
+[type='search'] {
+  -webkit-appearance: textfield; /* 1 */
+  outline-offset: -2px; /* 2 */
+}
+
+/*
+Remove the inner padding in Chrome and Safari on macOS.
+*/
+
+::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+/*
+1. Correct the inability to style clickable types in iOS and Safari.
+2. Change font properties to `inherit` in Safari.
+*/
+
+::-webkit-file-upload-button {
+  -webkit-appearance: button; /* 1 */
+  font: inherit; /* 2 */
+}
+
+/*
+Add the correct display in Chrome and Safari.
+*/
+
+summary {
+  display: list-item;
+}
+
+/*
+Removes the default spacing and border for appropriate elements.
+*/
+
+blockquote,
+dl,
+dd,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+hr,
+figure,
+p,
+pre {
+  margin: 0;
+}
+
+fieldset {
+  margin: 0;
+  padding: 0;
+}
+
+legend {
+  padding: 0;
+}
+
+ol,
+ul,
+menu {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+/*
+Reset default styling for dialogs.
+*/
+dialog {
+  padding: 0;
+}
+
+/*
+Prevent resizing textareas horizontally by default.
+*/
+
+textarea {
+  resize: vertical;
+}
+
+/*
+1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
+2. Set the default placeholder color to the user's configured gray 400 color.
+*/
+
+input::placeholder,
+textarea::placeholder {
+  opacity: 1; /* 1 */
+  color: #9ca3af; /* 2 */
+}
+
+/*
+Set the default cursor for buttons.
+*/
+
+button,
+[role="button"] {
+  cursor: pointer;
+}
+
+/*
+Make sure disabled buttons don't get the pointer cursor.
+*/
+:disabled {
+  cursor: default;
+}
+
+/*
+1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
+2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
+   This can trigger a poorly considered lint error in some tools but is included by design.
+*/
+
+img,
+svg,
+video,
+canvas,
+audio,
+iframe,
+embed,
+object {
+  display: block; /* 1 */
+  vertical-align: middle; /* 2 */
+}
+
+/*
+Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
+*/
+
+img,
+video {
+  max-width: 100%;
+  height: auto;
+}
+
+/* Make elements with the HTML hidden attribute stay hidden by default */
+[hidden]:where(:not([hidden="until-found"])) {
+  display: none;
+}
+

data/app/helpers/hotdocs/application_helper.rb

@@ -0,0 +1,107 @@
+module Hotdocs
+  module ApplicationHelper
+    include Rails.application.helpers # Include host helpers
+
+    def active_link_to(name = nil, options = nil, html_options = nil, &block)
+      if options.is_a?(String) && active_link?(options)
+        html_options = html_options.to_h.merge(class: "active") do |_, old, new|
+          [ *Array(old), new ].join(" ")
+        end
+        link_to(name, options, html_options, &block)
+      else
+        link_to(name, options, html_options, &block)
+      end
+    end
+
+    def external_link_to(name = nil, options = nil, html_options = nil)
+      default_html_options = {
+        class: "external-link",
+        target: "_blank",
+        rel: [ "noopener", "noreferrer" ]
+      }
+
+      html_options = html_options.to_h.merge(default_html_options) do |_, old, new|
+        [ *Array(old), *Array(new) ].join(" ")
+      end
+
+      link_to(options, html_options) do
+        concat(content_tag(:span, name))
+
+        concat(<<~SVG.html_safe)
+          <svg aria-hidden="true" viewBox="0 0 24 24" class="external-link__icon">
+            <path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path>
+          </svg>
+        SVG
+      end
+    end
+
+    def menu(items = menu_items)
+      menu_r(compute_menu(items))
+    end
+
+    def compute_menu(items)
+      compute_menu_r(items).first
+    end
+
+    def edit_link(base_url = repository_base_url)
+      return nil if base_url.nil?
+      return nil if base_url.empty?
+
+      template_path = lookup_context
+        .find_template("#{controller_path}/#{action_name}")
+        .identifier
+        .sub(Rails.root.to_s + "/", "")
+      href = "#{base_url}/#{template_path}"
+
+      html_options = {
+        class: "edit-link",
+        target: "_blank",
+        rel: [ "noopener", "noreferrer" ]
+      }
+
+      link_to(href, html_options) do
+        concat(<<~SVG.html_safe)
+          <svg aria-hidden="true" viewBox="0 0 40 40" class="edit-link__icon">
+            <path fill="currentColor" d="m34.5 11.7l-3 3.1-6.3-6.3 3.1-3q0.5-0.5 1.2-0.5t1.1 0.5l3.9 3.9q0.5 0.4 0.5 1.1t-0.5 1.2z m-29.5 17.1l18.4-18.5 6.3 6.3-18.4 18.4h-6.3v-6.2z"></path>
+          </svg>
+        SVG
+
+        concat(content_tag(:span, "Edit this page"))
+      end
+    end
+
+    private
+
+    def active_link?(url)
+      request.path == url
+    end
+
+    def compute_menu_r(items)
+      return [ [], false ] if items.nil?
+
+      new_items = items.map do |item|
+        children, expanded_below = compute_menu_r(item[:children])
+        active = active_link?(item.fetch(:url))
+        expanded = expanded_below || item[:expanded] || active
+        { **item, expanded: expanded, children: children }
+      end
+
+      [ new_items, new_items.any? { _1[:expanded] } ]
+    end
+
+    def menu_r(items)
+      return nil if items.size == 0
+
+      content_tag(:ul, class: "menu__section") do
+        items.each do |item|
+          concat(content_tag(:li) do
+            locals = { expanded: item.fetch(:expanded), label: item.fetch(:label), url: item.fetch(:url) }
+            concat(render partial: "hotdocs/menu_row", locals: locals)
+
+            concat(menu_r(item.fetch(:children)))
+          end)
+        end
+      end
+    end
+  end
+end

data/app/views/hotdocs/_menu_row.html.erb

@@ -0,0 +1,11 @@
+<%# locals: (label:, url:, expanded: false) -%>
+
+<%= content_tag :div, class: "menu__row", data: { "controller": "accordion", "accordion-expanded-class-value": "menu__row--expanded", "accordion-expanded-value": expanded, "accordion-collapsed-aria-label-value": "Expand menu row '#{label}'", "accordion-expanded-aria-label-value": "Collapse menu row '#{label}'" } do %>
+  <%= active_link_to label, url, class: "menu__link" %>
+
+  <button type="button" class="menu__toggle" data-action="click->accordion#toggle" data-accordion-target="toggle">
+    <svg class="menu__toggle-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+      <path fill="currentColor" d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z"></path>
+    </svg>
+  </button>
+<% end %>

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

@@ -0,0 +1,144 @@
+<!DOCTYPE html>
+<html data-theme="light">
+  <head>
+    <title><%= content_for(:title) %></title>
+
+    <%= yield :head %>
+
+    <%= stylesheet_link_tag "hotdocs/reset", media: "all", "data-turbo-track": "reload" %>
+    <%= stylesheet_link_tag "hotdocs/application", media: "all", "data-turbo-track": "reload" %>
+  </head>
+
+  <body>
+    <nav class="nav" data-controller="sidenav" data-sidenav-open-class-value="sidenav--open" data-sidenav-main-menu-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="<%= logo.src %>" alt="<%= logo.alt %>" 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="<%= logo.src %>" alt="<%= logo.alt %>" 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>
+
+          <%= edit_link %>
+        </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">
+        <% footer_items.each do |footer_item| %>
+          <div class="footer__section">
+            <p class="footer__heading"><%= footer_item.fetch(:heading) %></p>
+
+            <ul>
+              <% footer_item.fetch(:items).each do |item| %>
+                <li><%= item %></li>
+              <% end %>
+            </ul>
+          </div>
+        <% end %>
+      </div>
+
+      <img class="footer__logo" src="<%= logo.src %>" alt="<%= logo.alt %>" height="150" width="150" />
+
+      <p class="credits">Built with Rails &amp; <a class="credits__link" href="https://hotdocsrails.com">HotDocs<img class="credits__logo" src="<%= asset_path "hotdocs/icon.svg" %>" alt="A humanized and happy hot dog" height="32" width="32" /></a></p>
+    </footer>
+  </body>
+</html>

data/config/importmap.rb

@@ -0,0 +1,3 @@
+# Pin npm packages by running ./bin/importmap
+
+pin_all_from Hotdocs::Engine.root.join("app/assets/javascript/controllers"), under: "controllers"

data/lib/hotdocs/engine.rb

@@ -0,0 +1,20 @@
+require_relative "markdown"
+
+module Hotdocs
+  class Engine < ::Rails::Engine
+    isolate_namespace Hotdocs
+
+    initializer "hotdocs.importmap", before: "importmap" do |app|
+      # https://github.com/rails/importmap-rails#composing-import-maps
+      app.config.importmap.paths << Engine.root.join("config/importmap.rb")
+
+      # https://github.com/rails/importmap-rails#sweeping-the-cache-in-development-and-test
+      app.config.importmap.cache_sweepers << Engine.root.join("app/assets/javascript")
+    end
+
+    config.before_initialize do
+      MarkdownHandler.prepare(self)
+      ActionView::Template.register_template_handler :mderb, MarkdownHandler.new(self)
+    end
+  end
+end