rest_framework 0.8.15 → 0.8.17

data/app/views/rest_framework/_head.html.erb

@@ -4,11 +4,13 @@
 <%= csp_meta_tag rescue nil %>
 
 <!-- Bootstrap -->
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
-<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ" crossorigin="anonymous"></script>
+<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-aFq/bzH65dt+w6FI2ooMVUpc+21e0SRygnTpmBvdBgSdnuTN7QbdgL+OapgHtvPp" crossorigin="anonymous">
+<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha2/dist/js/bootstrap.bundle.min.js" integrity="sha384-qKXV1j0HvMUeCBQ+QVp7JcfGl760yU08IQ+GpUo5hlbpg51QRiuqHAJz8+BrxE/N" crossorigin="anonymous"></script>
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.4/font/bootstrap-icons.css">
 
 <!-- Highlight.js -->
-<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/vs.min.css" integrity="sha512-AVoZ71dJLtHRlsgWwujPT1hk2zxtFWsPlpTPCc/1g0WgpbmlzkqlDFduAvnOV4JJWKUquPc1ZyMc5eq4fRnKOQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
+<link rel="stylesheet" class="rrf-light-mode" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/a11y-light.min.css" integrity="sha512-WDk6RzwygsN9KecRHAfm9HTN87LQjqdygDmkHSJxVkVI7ErCZ8ZWxP6T8RvBujY1n2/E4Ac+bn2ChXnp5rnnHA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
+<link rel="stylesheet" class="rrf-dark-mode" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/a11y-dark.min.css" integrity="sha512-Vj6gPCk8EZlqnoveEyuGyYaWZ1+jyjMPg8g4shwyyNlRQl6d3L9At02ZHQr5K6s5duZl/+YKMnM3/8pDhoUphg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
 <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js" integrity="sha512-bgHRAiTjGrzHzLyKOnpFvaEpGzJet3z4tZnXGjpsCcqOnAH6VGUx9frc5bcIhKTVLEiCO6vEhNAgx5jtLUYrfA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/languages/json.min.js" integrity="sha512-0xYvyncS9OLE7GOpNBZFnwyh9+bq4HVgk4yVVYI678xRvE22ASicF1v6fZ1UiST+M6pn17MzFZdvVCI3jTHSyw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/languages/xml.min.js" integrity="sha512-5zBcw+OKRkaNyvUEPlTSfYylVzgpi7KpncY36b0gRudfxIYIH0q0kl2j26uCUB3YBRM6ytQQEZSgRg+ZlBTmdA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
@@ -16,31 +18,105 @@
 <!-- NeatJSON -->
 <script src="https://cdn.jsdelivr.net/npm/neatjson@0.10.5/javascript/neatjson.min.js"></script>
 
+<!-- Trix -->
+<link rel="stylesheet" type="text/css" href="https://unpkg.com/trix@2.0.0/dist/trix.css">
+<script type="text/javascript" src="https://unpkg.com/trix@2.0.0/dist/trix.umd.min.js"></script>
+
 <!-- Custom Style -->
 <style>
-/* Adjust headers to always take up their entire row, and tweak the sizing. */
-h1,h2,h3,h4,h5,h6 { display: inline-block; font-weight: normal; margin-bottom: 0; }
+/********************************
+ * START OF LIB/DOCS COMMON CSS *
+ ********************************/
+
+ :root {
+  --rrf-red: #900;
+  --rrf-red-hover: #5f0c0c;
+  --rrf-light-red: #db2525;
+  --rrf-light-red-hover: #b80404;
+}
+#rrfAccentBar {
+  background-color: var(--rrf-red);
+  height: .3em;
+}
+header nav { background-color: black; }
+
+/* Header adjustments. */
 h1 { font-size: 2rem; }
 h2 { font-size: 1.7rem; }
 h3 { font-size: 1.5rem; }
 h4 { font-size: 1.3rem; }
 h5 { font-size: 1.1rem; }
 h6 { font-size: 1rem; }
+h1, h2, h3, h4, h5, h6 {
+  color: var(--rrf-red);
+}
+html[data-bs-theme="dark"] h1,
+html[data-bs-theme="dark"] h2,
+html[data-bs-theme="dark"] h3,
+html[data-bs-theme="dark"] h4,
+html[data-bs-theme="dark"] h5,
+html[data-bs-theme="dark"] h6 {
+  color: var(--rrf-light-red);
+}
 
-/* Make code and code blocks a little nicer looking. */
-code {
+/* Improve code and code blocks. */
+pre code {
+  display: block;
+  overflow-x: auto;
+}
+code, .trix-content pre {
   padding: .5em !important;
-  background-color: #f3f3f3 !important;
+  background-color: #eee !important;
   border: 1px solid #aaa;
   border-radius: 3px;
 }
+p code {
+  padding: .1em .3em !important;
+}
+html[data-bs-theme="dark"] code, html[data-bs-theme="dark"] .trix-content pre {
+  background-color: #2b2b2b !important;
+}
 
-/* Make route group expansion obvious to the user. */
-.rrf-routes .rrf-route-group-header {
-  background-color: #f8f8f8;
+/* Anchors */
+a:not(.nav-link) {
+  text-decoration: none;
+  color: var(--rrf-red);
+}
+a:hover:not(.nav-link) {
+  text-decoration: underline;
+  color: var(--rrf-red-hover);
+}
+html[data-bs-theme="dark"] a:not(.nav-link) { color: var(--rrf-light-red); }
+html[data-bs-theme="dark"] a:hover:not(.nav-link) { color: var(--rrf-light-red-hover); }
+
+/******************************
+ * END OF LIB/DOCS COMMON CSS *
+ ******************************/
+
+/* Header adjustments. */
+h1,h2,h3,h4,h5,h6 { display: inline-block; font-weight: normal; margin-bottom: 0; }
+
+/* Reduce label font size. */
+label.form-label {
+  font-size: .8em;
+}
+
+/* Make Trix buttons visible even in dark mode. */
+trix-toolbar .trix-button-group {
+  background-color: #eee;
+}
+
+/* Make Trix dialog URL input visible in dark mode. */
+input.trix-input--dialog {
+  color: black;
 }
+
+/* Make route group expansion obvious to the user. */
 .rrf-routes .rrf-route-group-header:hover {
-  background-color: #f0f0f0;
+  background-color: #ddd;
+}
+html[data-bs-theme="dark"] .rrf-routes .rrf-route-group-header:hover {
+  background-color: #333;
 }
 .rrf-routes .rrf-route-group-header td {
   cursor: pointer;
@@ -70,32 +146,134 @@ code {
 
 <!-- Custom JavaScript -->
 <script>
-// What to do when document loads.
+/*******************************
+ * START OF LIB/DOCS COMMON JS *
+ *******************************/
+
+;(() => {
+  // Get the real mode from a selected mode. Anything other than "light" or "dark" is treated as
+  // "system" mode.
+  const rrfGetRealMode = (selectedMode) => {
+    if (selectedMode === "light" || selectedMode === "dark") {
+      return selectedMode
+    }
+
+    if (window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches) {
+      return "dark"
+    }
+
+    return "light"
+  }
+
+  // Set the mode, given a "selected" mode.
+  const rrfSetSelectedMode = (selectedMode) => {
+    const modeComponent = document.getElementById("rrfModeComponent")
+
+    // Anything except "light" or "dark" is casted to "system".
+    if (selectedMode !== "light" && selectedMode !== "dark") {
+      selectedMode = "system"
+    }
+
+    // Store selected mode in `localStorage`.
+    localStorage.setItem("rrfMode", selectedMode)
+
+    // Set the mode selector to the selected mode.
+    let labelHTML
+    modeComponent.querySelectorAll("button[data-rrf-mode-value]").forEach((el) => {
+      if (el.getAttribute("data-rrf-mode-value") === selectedMode) {
+        el.classList.add("active")
+        labelHTML = el.querySelector("i").outerHTML.replace("ms-2", "me-1")
+      } else {
+        el.classList.remove("active")
+      }
+    })
+    modeComponent.querySelector("button[data-bs-toggle]").innerHTML = labelHTML
+
+    // Get the real mode to use.
+    realMode = rrfGetRealMode(selectedMode)
+
+    // Set the `realMode` effects.
+    if (realMode === "light") {
+      document.querySelectorAll(".rrf-light-mode").forEach((el) => {
+        el.disabled = false
+      })
+      document.querySelectorAll(".rrf-dark-mode").forEach((el) => {
+        el.disabled = true
+      })
+      document.querySelectorAll(".rrf-mode").forEach((el) => {
+        el.setAttribute("data-bs-theme", "light")
+      })
+    } else if (realMode === "dark") {
+      document.querySelectorAll(".rrf-light-mode").forEach((el) => {
+        el.disabled = true
+      })
+      document.querySelectorAll(".rrf-dark-mode").forEach((el) => {
+        el.disabled = false
+      })
+      document.querySelectorAll(".rrf-mode").forEach((el) => {
+        el.setAttribute("data-bs-theme", "dark")
+      })
+    } else {
+      console.log(`RRF: Unknown mode: ${mode}`)
+    }
+  }
+
+  // Initialize dark/light mode.
+  document.addEventListener("DOMContentLoaded", (event) => {
+    const selectedMode = localStorage.getItem("rrfMode")
+    rrfSetSelectedMode(selectedMode)
+    document.querySelectorAll("#rrfModeComponent button[data-rrf-mode-value]").forEach((el) => {
+      el.addEventListener("click", (event) => {
+        rrfSetSelectedMode(event.target.getAttribute("data-rrf-mode-value"))
+      })
+    })
+  })
+
+  // Handle case where user changes system theme.
+  if (window.matchMedia) {
+    window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", () => {
+      const selectedMode = localStorage.getItem("rrfMode")
+      if (selectedMode !== "light" && selectedMode !== "dark") {
+        rrfSetSelectedMode("system")
+      }
+    })
+  }
+})()
+
+/*****************************
+ * END OF LIB/DOCS COMMON JS *
+ *****************************/
+
 document.addEventListener("DOMContentLoaded", (event) => {
   // Pretty-print JSON.
-  [...document.getElementsByClassName("language-json")].forEach((el, index) => {
+  document.querySelectorAll(".language-json").forEach((el, index) => {
     el.innerHTML = neatJSON(JSON.parse(el.innerText), {
       wrap: 80,
       afterComma: 1,
       afterColon: 1,
-    })
-  });
+    }).replaceAll("&", "&amp;")
+      .replaceAll("<", "&lt;")
+      .replaceAll(">", "&gt;")
+      .replaceAll('"', "&quot;")
+      .replaceAll("'", "&#039;")
+  })
 
   // Then highlight it.
-  hljs.highlightAll();
+  hljs.configure({cssSelector: "pre code.auto-hljs"})
+  hljs.highlightAll()
 
-  // Replace all text nodes with anchor tag links.
-  [...document.querySelectorAll(".rrf-copy code")].forEach((el, index) => {
+  // Replace text node links with anchor tag links.
+  document.querySelectorAll(".rrf-copy code").forEach((el, index) => {
     el.innerHTML = rrfLinkify(el.innerHTML)
-  });
+  })
 
   // Insert copy link and callback to copy contents of `<code>` element.
-  [...document.querySelectorAll("rrf-copy")].forEach((el, index) => {
+  document.querySelectorAll("rrf-copy").forEach((el, index) => {
     el.insertAdjacentHTML(
       "afterbegin",
       "<a class=\"rrf-copy-link\" onclick=\"return rrfCopyToClipboard(this)\" href=\"#\">Copy to Clipboard</a>",
     )
-  });
+  })
 })
 
 // Convert plain-text links to anchor tag links.
@@ -134,10 +312,10 @@ function rrfCopyToClipboard(element) {
   return false
 }
 
-// Refresh the window.
-function rrfRefresh(button) {
+// Refresh the window as a `GET` request.
+function rrfGet(button) {
   button.disabled = true
-  window.location.reload()
+  window.location.replace(window.location.href)
 }
 
 // Call `DELETE` on the current path.
@@ -158,11 +336,41 @@ function rrfSubmitRawForm(button) {
 
   // Grab the selected route/method, media type, and the body.
   const [method, path] = document.getElementById("rawFormRoute").value.split(":")
-  const media_type = document.getElementById("rawFormMediaType").value
-  const body = document.getElementById("rawFormContent").value
+  const mediaType = document.getElementById("rawFormMediaType").value
+  let body = document.getElementById("rawFormContent").value
+
+  // If the media type is `multipart/form-data`, then we need to build a FormData object.
+  if (mediaType == "multipart/form-data") {
+    let formData = new FormData()
+
+    // Add body to `formData`.
+    const bodySearchParams = new URLSearchParams(body)
+    bodySearchParams.forEach((value, key) => {
+      formData.append(key, value)
+    })
+
+    // Add file(s) to `formData`.
+    const rawFilesForm = document.getElementById("rawFilesForm")
+    if (rawFilesForm) {
+      rawFilesForm.querySelectorAll("input[type=file]").forEach((el, index) => {
+        const files = el.files
+        for (let i = 0; i < files.length; i++) {
+          formData.append(el.name, files[i])
+        }
+      })
+    }
+
+    // Set body to be the form data.
+    body = formData
+  }
 
   // Perform the API call.
-  rrfAPICall(path, method, {body, headers: {"Content-Type": media_type}})
+  rrfAPICall(path, method, {
+    body,
+    // If the media type is `multipart/form-data`, then we don't want to set the content type
+    // because it must be set by `fetch` to include boundary.
+    headers: mediaType == "multipart/form-data" ? {} : {"Content-Type": mediaType},
+  })
 }
 
 // Make an HTML API call and replace the document with the response.
@@ -174,4 +382,17 @@ function rrfAPICall(path, method, kwargs={}) {
     .then((response) => response.text())
     .then((body) => { rrfReplaceDocument(body) })
 }
+
+// Check if `rawFilesFormWrapper` should be displayed when media type is changed.
+function rrfCheckRawFilesFormDisplay(el) {
+  const rawFilesFormWrapper = document.getElementById("rawFilesFormWrapper")
+
+  if (rawFilesFormWrapper) {
+    if (el.value === "multipart/form-data") {
+      rawFilesFormWrapper.style.display = "block"
+    } else {
+      rawFilesFormWrapper.style.display = "none"
+    }
+  }
+}
 </script>

data/app/views/rest_framework/_html_form.html.erb

@@ -1,7 +1,59 @@
 <div style="max-width: 60em; margin: auto">
-  <%= render partial: "rest_framework/form_routes" %>
+  <div class="mb-2">
+    <label class="form-label w-100">Route
+      <select class="form-control form-control-sm" id="htmlFormRoute">
+        <% @_rrf_form_routes.each do |route| %>
+          <% path = @route_props[:with_path_args].call(route[:route]) %>
+          <option value="<%= route[:verb] %>:<%= path %>"><%= route[:verb] %> <%= route[:relative_path] %></option>
+        <% end %>
+      </select>
+    </label>
+  </div>
 
-  <%= form_for @ do |f| %>
-    <%= f.file_field :picture %>
+  <%= form_with(
+    model: @record,
+    url: "",
+    method: :patch,
+    id: "htmlForm",
+    scope: "",
+  ) do |form| %>
+    <% controller.get_fields.map(&:to_s).each do |f| %>
+      <%
+        # Don't provide form fields for associations or primary keys.
+        metadata = controller.class.fields_metadata[f]
+        next if !metadata || metadata[:kind] == "association" || metadata[:read_only]
+      %>
+      <div class="mb-2">
+        <% if metadata[:kind] == "rich_text" %>
+          <label class="form-label w-100"><%= controller.class.get_label(f) %></label>
+          <%= form.rich_text_area f %>
+        <% elsif metadata[:kind] == "attachment" %>
+          <label class="form-label w-100"><%= controller.class.get_label(f) %>
+            <%= form.file_field f, multiple: metadata.dig(:attachment, :macro) == :has_many_attached %>
+          </label>
+        <% else %>
+          <label class="form-label w-100"><%= controller.class.get_label(f) %>
+            <%= form.text_field f, class: "form-control form-control-sm" %>
+          </label>
+        <% end %>
+      </div>
+    <% end %>
+
+    <%= form.submit "Submit", name: "", class: "btn btn-primary", style: "float: right" %>
   <% end %>
+
+  <script>
+    // Update form anytime the route changes.
+    document.getElementById("htmlFormRoute").addEventListener("change", (event) => {
+      const [verb, path] = event.target.value.split(":")
+      const form = document.getElementById("htmlForm")
+      form.action = path
+      form.querySelector("input[name='_method']").value = verb
+    })
+
+    document.addEventListener("DOMContentLoaded", (event) => {
+      // Trigger the change event to update the form initially.
+      document.getElementById("htmlFormRoute").dispatchEvent(new Event("change"))
+    })
+  </script>
 </div>

data/app/views/rest_framework/_raw_form.html.erb

@@ -1,9 +1,18 @@
 <div style="max-width: 60em; margin: auto">
-  <%= render partial: "rest_framework/form_routes" %>
+  <div class="mb-2">
+    <label class="form-label w-100">Route
+      <select class="form-control form-control-sm" id="rawFormRoute">
+        <% @_rrf_form_routes.each do |route| %>
+          <% path = @route_props[:with_path_args].call(route[:route]) %>
+          <option value="<%= route[:verb] %>:<%= path %>"><%= route[:verb] %> <%= route[:relative_path] %></option>
+        <% end %>
+      </select>
+    </label>
+  </div>
 
   <div class="mb-2">
     <label class="form-label w-100">Media Type
-      <select class="form-control" id="rawFormMediaType">
+      <select class="form-control form-control-sm" id="rawFormMediaType" onchange="rrfCheckRawFilesFormDisplay(this)">
         <% ["application/json", "application/x-www-form-urlencoded", "multipart/form-data"].each do |t| %>
           <option value="<%= t %>"><%= t %></option>
         <% end %>
@@ -13,9 +22,28 @@
 
   <div class="mb-2">
     <label class="form-label w-100">Content
-      <textarea class="form-control" style="font-family: monospace" id="rawFormContent" rows="8" cols="60"></textarea>
+      <textarea class="form-control form-control-sm" style="font-family: monospace" id="rawFormContent" rows="8" cols="60"></textarea>
     </label>
   </div>
 
+  <% if @is_model_controller && model = controller.class.get_model %>
+    <% if attachment_reflections = model.attachment_reflections.presence %>
+      <div class="mb-2" style="display: none" id="rawFilesFormWrapper">
+        <%= form_with(
+          model: @record,
+          url: "",
+          id: "rawFilesForm",
+          scope: "",
+        ) do |form| %>
+          <% attachment_reflections.each do |field, ref| %>
+            <label class="form-label w-100"><%= controller.class.get_label(field) %>
+              <%= form.file_field field, multiple: ref.macro == :has_many_attached %>
+            </label>
+          <% end %>
+        <% end %>
+      </div>
+    <% end %>
+  <% end %>
+
   <button type="button" class="btn btn-primary" style="float: right" onclick="rrfSubmitRawForm(this)">Submit</button>
 </div>

data/docs/CNAME

@@ -0,0 +1 @@
+rails-rest-framework.com

data/docs/Gemfile

@@ -0,0 +1,4 @@
+source "https://rubygems.org"
+
+gem "github-pages"
+gem "yard"