brut 0.9.1 → 0.10.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 4b580e8b69cc722fb2d84c090f7848b9c45623de2faaa996a14914d52773c48a
-  data.tar.gz: 37b84eb37ac974c48c054be0305086622fab712345d7ef581b7bd58f3ec7a79e
+  metadata.gz: bb034356c94bcb184b5ded4c4d6d07d46d85e28371cbe7fd17ea999c78e1932e
+  data.tar.gz: 90339e125f3b8b9bde9bda634f4934d0c0a09955141cda41969c9347b7b86877
 SHA512:
-  metadata.gz: 43f5d19e8bb88c0e0956757b1826224f18f68eed46ef34d5a7e8df73b7a8638fb674f499c5e335edae84bd42fb2266fbb19ec347c7e14cbb18027c832e66f33b
-  data.tar.gz: 7b12806b7ce2164e6d1dd2eb85dc3d01902113fadb6762babcd265d8cca3659dc3bf2913db160c518c6ade57624d2e4558d779a62151807a6c0a9f7e4f2c72e9
+  metadata.gz: 1ad76fb17f0247373ded5eb4df807eab9f32db39633082afb647b6b268d6d74f1529b433f3a3a06c5cd101e79d841f3533bef589940de3d629af3c7c400096d0
+  data.tar.gz: 50acf68486d2bbcb6600fb2cf0e21f62ec879ba1a3f0767557d29f9e2260229cc4bdad4b869d800cfdc7101723eca7afb4498577f44b22095a24526ec9526a45

data/CHANGELOG.md

@@ -1,5 +1,15 @@
 # Brut CHANGELOG
 
+## v0.10.0 - Aug 15, 2025
+
+* Changed `ConstraintViolations` HTML to indicate if a `<brut-cv>` is server-generated, even if it's generating  client-side constraint. See #56.
+* `<brut-form>` now requires that all `<brut-cv-messages>` have an `input-name`.
+
+
+## v0.9.2 - Aug 14, 2025
+
+* Updated Docker instructions for installing PostgreSQL client, due to ruby:3.4 image upgrading to Debian Trixie which removed something. See https://github.com/thirdtank/brut/issues/55
+
 ## v0.9.1 - Aug 12, 2025
 
 * Changed `<brut-confirm-submit>` to not ask for confirmation if the form is invalid

data/Gemfile.lock

@@ -1,7 +1,7 @@
 PATH
   remote: .
   specs:
-    brut (0.9.1)
+    brut (0.10.0)
       concurrent-ruby
       i18n
       irb

data/bin/new-version

@@ -0,0 +1,8 @@
+set -e
+
+if [ -f /.dockerenv ]; then
+  echo "Do not run this inside Docker"
+  exit 1
+fi
+
+nvim -o lib/brut/version.rb mkbrut/lib/mkbrut/version.rb brut-js/package.json brut-css/package.json CHANGELOG.md

data/brut-css/package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "brut-css",
-  "version": "0.9.1",
+  "version": "0.10.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "brut-css",
-      "version": "0.9.1",
+      "version": "0.10.0",
       "license": "Hippocratic-2.1",
       "devDependencies": {
         "comment-parser": "^1.4.1",

data/brut-css/package.json

@@ -1,6 +1,6 @@
 {
   "name": "brut-css",
-  "version": "0.9.1",
+  "version": "0.10.0",
   "description": "Utility CSS Library for Full Stack Developers",
   "keywords": [
     "css"

data/brut-js/package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "brut-js",
-  "version": "0.9.1",
+  "version": "0.10.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "brut-js",
-      "version": "0.9.1",
+      "version": "0.10.0",
       "license": "Hippocratic-2.1",
       "devDependencies": {
         "esbuild": "^0.24.0",

data/brut-js/package.json

@@ -1,6 +1,6 @@
 {
   "name": "brut-js",
-  "version": "0.9.1",
+  "version": "0.10.0",
   "type": "module",
   "keywords": [ "WebComponents", "Custom Elements" ],
   "bugs": {

data/brut-js/specs/ConstraintViolationMessages.spec.js

@@ -18,9 +18,12 @@ describe("<brut-cv-messages>", () => {
 
     element.createMessages({validityState,inputName})
 
-    assert.equal(element.querySelectorAll("brut-cv").length,2)
+    const brutCvElements = element.querySelectorAll("brut-cv")
+    assert.equal(brutCvElements.length, 2)
     assert.match(element.textContent,new RegExp("This field does not match the pattern","m"))
     assert.match(element.textContent,new RegExp("This field is above the range","m"))
+    assert.equal(brutCvElements[0].getAttribute("client-side"),"")
+    assert.equal(brutCvElements[1].getAttribute("client-side"),"")
 
     element.clearClientSideMessages()
     assert.equal(element.textContent,"")

data/brut-js/specs/Form.spec.js

@@ -6,12 +6,12 @@ describe("<brut-form>", () => {
       <form>
         <label>
           <input required type="text" name="text">
-          <brut-cv-messages>
+          <brut-cv-messages input-name="text">
           </brut-cv-messages>
         </label>
         <label>
           <input required type="number" name="number">
-          <brut-cv-messages>
+          <brut-cv-messages input-name="number">
           </brut-cv-messages>
         </label>
         <input type="submit">Save</input>
@@ -134,48 +134,4 @@ describe("<brut-form>", () => {
     assert(gotValid)
     assert(!gotInvalid)
   })
-  withHTML(`
-    <brut-form>
-      <form>
-        <label>
-          <input required type="text" name="text">
-        </label>
-        <brut-cv-messages input-name='text'>
-        </brut-cv-messages>
-        <input type="submit">Save</input>
-      </form>
-    </brut-form>
-  `).test("locates the messages for errors based on name", ({window,document,assert}) => {
-
-    const brutForm         = document.querySelector("brut-form")
-    const form             = brutForm.querySelector("form")
-    const button           = form.querySelector("input[type=submit]")
-    const textFieldLabel   = form.querySelector("label:has(input[type=text])")
-
-    let submitted  = false
-    let gotInvalid = false
-    let gotValid   = false
-
-    form.addEventListener("submit", (event) => {
-      event.preventDefault()
-      submitted = true
-    })
-    brutForm.addEventListener("brut:valid", () => {
-      gotValid = true
-    })
-    brutForm.addEventListener("brut:invalid", () => {
-      gotInvalid = true
-    })
-
-    button.click()
-
-    assert(!submitted)
-    assert(!gotValid)
-    assert(gotInvalid)
-    assert.equal(brutForm.getAttribute("submitted-invalid"),"")
-
-    let error = brutForm.querySelector("brut-cv[input-name='text'][key='cv.cs.valueMissing']")
-    assert(error)
-
-  })
 })

data/brut-js/src/ConstraintViolationMessage.js

@@ -15,9 +15,15 @@ import I18nTranslation from "./I18nTranslation"
  * @property {string} key - the i18n translation key to use.  It must map to the `key` of a `<brut-i18n-translation>` on the page or
  * the element will not render any text.
  * @property {string} input-name - the name of the input, used to insert into the message, e.g. "Title is required".
+ * @property {boolean} server-generated if true, this indicates the element's HTML was generated on the server.
+ *           This means that your CSS can target it for display in all cases.  If this is not present,
+ *           you may want to avoid showing this element if the form has not been submitted yet.
+ *           Does not affect behavior.
  * @property {boolean} server-side if true, this indicates the element contains constraint violation messages
- *                                 from the server.  Currently doesn't affect this element's behavior, however
- *                                 AjaxSubmit will use it to locate where it should insert server-side errors.
+ *           from the server.  Does not affect behavior.
+ * @property {boolean} client-side if true, this indicates the element contains constraint violation messages
+ *           from the client, however they may have been generated from the server, since the server may
+ *           re-evaluate the client-side constraints.  Does not affect behavior of this tag.
  *
  * @see I18nTranslation
  * @see ConstraintViolationMessages
@@ -33,12 +39,15 @@ class ConstraintViolationMessage extends BaseCustomElement {
     "key",
     "input-name",
     "server-side",
+    "client-side",
+    "server-generated",
   ]
 
   static createElement(document,attributes) {
     const element = document.createElement(ConstraintViolationMessage.tagName)
     element.setAttribute("key",this.i18nKey("cs", attributes.key))
     element.setAttribute("input-name",attributes["input-name"])
+    element.setAttribute("client-side","")
     if (Object.hasOwn(attributes,"show-warnings")) {
       element.setAttribute("show-warnings",attributes["show-warnings"])
     }
@@ -85,6 +94,12 @@ class ConstraintViolationMessage extends BaseCustomElement {
   serverSideChangedCallback({newValueAsBoolean}) {
     // attribute listed for documentation purposes only
   }
+  clientSideChangedCallback({newValueAsBoolean}) {
+    // attribute listed for documentation purposes only
+  }
+  serverGeneratedChangedCallback({newValueAsBoolean}) {
+    // attribute listed for documentation purposes only
+  }
 
   update() {
     if (!this.#key) {

data/brut-js/src/Form.js

@@ -15,10 +15,7 @@ import ConstraintViolationMessages from "./ConstraintViolationMessages"
  *   set `submitted-invalid` on itself when that happens, thus allowing you to target invalid
  *   fields only after a submission attempt.
  * * You may wish to control the messaging of client-side constraint violations
- *   beyond what the browser gives you. Assuming your `INPUT` tags are inside a container
- *   like `LABEL`, a `brut-cv` tag found in that container
- *   (i.e. a sibling of your `INPUT`) will be modified to contain error messages specific
- *   to the {@link external:ValidityState} of the control.
+ *   beyond what the browser gives you. Assuming you have generated a `<brut-cv-messages input-name="«input name»"></brut-cv-messasges>`, it will be populated with `<brut-cv>` elements for each client-side constraint violation, based on the {@link external:ValidityState} of the control.
  *
  * @fires brut:invalid Fired when any element is found to be invalid
  * @fires brut:valid Fired when no element is found to be invalid.  This should be reliable to know
@@ -29,12 +26,12 @@ import ConstraintViolationMessages from "./ConstraintViolationMessages"
  *   <form ...>
  *     <label>
  *       <input type="text" required name="username">
- *       <brut-cv-messages>
+ *       <brut-cv-messages input-name="username">
  *       </brut-cv-messages>
  *     </label>
  *     <div> <!-- container need not be a label -->
  *       <input type="text" required minlength="4" name="alias">
- *       <brut-cv-messages>
+ *       <brut-cv-messages input-name="alias">
  *       </brut-cv-messages>
  *     </div>
  *     <button>Submit</button>
@@ -45,13 +42,13 @@ import ConstraintViolationMessages from "./ConstraintViolationMessages"
  *   <form ...>
  *     <label>
  *       <input type="text" required name="username">
- *       <brut-cv-messages>
+ *       <brut-cv-messages input-name="username">
  *         <brut-cv>This field is required</brut-cv>
  *       </brut-cv-messages>
  *     </label>
  *     <div> <!-- container need not be a label -->
  *       <input type="text" required minlength="4" name="alias">
- *       <brut-cv-messages>
+ *       <brut-cv-messages input-name="alias">
  *         <brut-cv>This field is required</brut-cv>
  *       </brut-cv-messages>
  *     </div>
@@ -107,28 +104,27 @@ class Form extends BaseCustomElement {
 
   #updateErrorMessages(event) {
     const element = event.target
-    const selector = ConstraintViolationMessages.tagName
-    let errorLabels = element.parentNode.querySelectorAll(selector)
-    if (errorLabels.length == 0) {
-      if (element.name && element.form) {
-        const moreGeneralSelector = `${ConstraintViolationMessages.tagName}[input-name='${element.name}']`
-        errorLabels = element.form.querySelectorAll(moreGeneralSelector)
-        if (errorLabels.length == 0) {
-          this.logger.warn(`Did not find any elements matching ${selector} or ${moreGeneralSelector}, so no error messages will be shown`)
-        }
+    let constraintViolationMessages = []
+    if (element.name && element.form) {
+      const selector = `${ConstraintViolationMessages.tagName}[input-name='${element.name}']`
+      constraintViolationMessages = element.form.querySelectorAll(selector)
+      if (constraintViolationMessages.length == 0) {
+        this.logger.warn(`Did not find any elements matching ${selector}, so no error messages will be shown`)
+      }
+    }
+    else {
+      if (element.name) {
+        this.logger.warn("Element has a name (%s), but is not associated with any form.", element.name)
       }
       else {
-        this.logger.warn("Did not find any elements matching %s and the form element has %s %s",
-          selector,
-          element.name ? "no name" : "a name, but",
-          element.form ? "no form" : "though has a form")
+        this.logger.warn("Element has a form, but has no name, which means we cannot locate %s by input-name", ConstraintViolationMessages.tagName)
       }
     }
-    if (errorLabels.length == 0) {
+    if (constraintViolationMessages.length == 0) {
       return
     }
     let anyErrors = false
-    errorLabels.forEach( (errorLabel) => {
+    constraintViolationMessages.forEach( (errorLabel) => {
       if (element.validity.valid) {
         errorLabel.clearClientSideMessages()
       }

data/brutrb.com/.vitepress/config.mjs

@@ -130,6 +130,7 @@ export default defineConfig({
         collapsed: true,
         items: [
           { text: "Migration Basics", link: "/recipes/migrations" },
+          { text: "Styling Form Errors", link: "/recipes/form-errors" },
           { text: "Authentication", link: "/recipes/authentication" },
           { text: "Alternate Layouts", link: "/recipes/alternate-layouts" },
           { text: "Blank Layouts", link: "/recipes/blank-layouts" },

data/brutrb.com/form-constraints.md

@@ -120,7 +120,7 @@ inputs `ValidityState`.  That may look like so:
 ```html {3}
 <input type="text" name="name" required minlength="3">
 <brut-cv-messages input-name="name">
-  <brut-cv input-name="name" key="rangeUnderflow"></brut-cv>
+  <brut-cv input-name="name" client-side key="rangeUnderflow"></brut-cv>
 </brut-cv-messages>
 ```
 
@@ -139,7 +139,7 @@ this HTML:
 ```html {4}
 <input type="text" name="name" required minlength="3">
 <brut-cv-messages input-name="name">
-  <brut-cv input-name="name" key="rangeUnderflow">
+  <brut-cv input-name="name" client-side key="rangeUnderflow">
     This field is too short
   </brut-cv>
 </brut-cv-messages>
@@ -154,13 +154,13 @@ violation, the same general markup is generated:
 ```html {3,4}
 <input type="text" name="name" required minlength="3">
 <brut-cv-messages input-name="name">
-  <brut-cv server-side>
+  <brut-cv server-generated server-side>
     This name has already been taken.
   </brut-cv>
 </brut-cv-messages>
 ```
 
-The `server-side` attribute is set, which can help with CSS targeting.
+The `server-genereted` and `server-side` attributes is set, which can help with CSS targeting.
 
 The *last* piece of this puzzle is a solution for the issue where forms that have
 not yet been submitted are considered to have invalid values by the browser.
@@ -177,7 +177,7 @@ This might lead to HTML like so:
 
     <input type="text" name="name" required minlength="3">
     <brut-cv-messages input-name="name">
-      <brut-cv input-name="name" key="rangeUnderflow">
+      <brut-cv input-name="name" client-side key="rangeUnderflow">
         This field is too short
       </brut-cv>
     </brut-cv-messages>
@@ -199,7 +199,7 @@ brut-cv {
 /* brut-cv inside a submitted-invalid
    OR brut-cv from the server ARE shown */
 brut-form[submitted-invalid] brut-cv,
-brut-cv[server-side] {
+brut-cv[server-generated] {
   display: block;
   color: red; /* e.g. */
 }

data/brutrb.com/recipes/form-errors.md

@@ -0,0 +1,148 @@
+# Styling Form Errors
+
+Brut makes it as easy as possible to unify client-side and server-side constraint violation handling, including
+how you style those messages.
+
+## Requirements
+
+What you want:
+
+* When a form is rendered for the first time, there should be errors shown.
+* When a visitor interacts with a form before submissions, no errors are shown.
+* When the form is submitted, client-side constraint violations should be shown.
+* When JavaScript is circumvented and the form is submitted with client-side constraint violations, the form should be re-generated, showing those violations the same is if JavaScripts was *not* circumvented
+* When there are no client-side constraint violations, but there *are* server-side violations, the form should be re-generated, showing those violations the same is if JavaScripts was *not* circumvented
+
+This can be achieved through CSS.
+
+## Recipe
+
+### Create Pages and HTML
+
+First, create a form and handler:
+
+```
+bin/scaffold form /new_widget
+```
+
+Edit `app/src/front_end/forms/new_widget_form.rb`
+
+```ruby
+class NewWidgetForm < AppForm
+  input :name, minlength: 3
+  input :description
+end
+```
+
+Now, implement the handler in `app/src/front_end/handlers/new_widget_handler.rb` to check for client-side violations *and* require that the description have at
+least 5 words in it.
+
+```ruby
+class NewWidgetHandler < AppHandler
+  def initialize(form:)
+    @form = form
+  end
+
+  def handle
+    if @form.valid?
+      if @form.description.split(/\s+/).length < 5
+      @form.server_side_constraint_violation(
+        input_name: :description,
+        key: :not_enough_words
+      )
+    end
+
+    if @form.constraint_violations?
+      NewWidgetPage.new(form: @form)
+    else
+      redirect_to(HomePage)
+    end
+  end
+end
+```
+
+Add the new error message to `app/config/i18n/en/2_app.rb`
+
+```ruby {6}
+{
+  en: {
+    nevermind: "Nevermind",
+    cv: {
+      ss: {
+        not_enough_words: "%{field} must have at least %{minwords} words",
+      },
+      # ...
+```
+
+Now, build a minimal `NewWidgetPage`:
+
+```
+bin/scaffold page /new_widget`
+```
+
+We'll create the bare minimum in `app/src/front_end/pages/new_widget_page.rb`
+
+```ruby
+class NewWidgetPage < AppPage
+  def initialize(form: nil)
+    @form = form || NewWidgetForm.new
+  end
+
+  def page_template
+    brut_form do
+      FormTag(for: @form) do
+        label do
+          Inputs::InputTag(form: @form, input_name: :name)
+          ConstraintViolations(form: @form, input_name: :name)
+          span { "Name" }
+        end
+        label do
+          Inputs::TextareaTag(form: @form, input_name: :name)
+          ConstraintViolations(form: @form, input_name: :name)
+          span { "Description" }
+        end
+      end
+    end
+  end
+end
+```
+
+### Create CSS
+
+The most minimal CSS would be as followed, which you can place in `app/src/front_end/css/index.css`
+
+```css
+brut-cv {
+  display: none;
+}
+
+brut-form[submitted-invalid] brut-cv,
+brut-cv[server-generated] {
+  display: block;
+  color: red;
+}
+```
+
+This will show the messages in `<brut-cv>` *only* if:
+
+* Form submission was attempted (`submitted-invalid` would be set on `<brut-form>`)
+* The server generated via `ConstraintViolations` (only if the handler was triggered)
+
+Because more than one `<brut-cv>` could be generated or inserted, you may want to style the
+`<brut-cv-messages>` that contains them, but you only want it to show up if it has contents.
+
+You can't just do `brut-cv-messages:has(brut-cv)`, because your container would show up before the form
+submission was attempted.
+
+Here is what you want instead. This will put the error messages in a red box:
+
+```css
+brut-form[submitted-invalid] brut-cv-messages:has(brut-cv),
+brut-cv-messages:has(brut-cv[server-generated]) {
+  color: red;
+  background-color: pink;
+  border: solid thin red;
+  border-radius: 1rem;
+}
+```
+

data/docs/404.html

@@ -9,7 +9,7 @@
     <link rel="preload stylesheet" href="/assets/style.B1z60PPQ.css" as="style">
     <link rel="preload stylesheet" href="/vp-icons.css" as="style">
     
-    <script type="module" src="/assets/app.BuBdZoUg.js"></script>
+    <script type="module" src="/assets/app.vjGWMSnJ.js"></script>
     <link rel="icon" href="/favicon.ico">
     <meta property="og:title" content="BrutRB Documentation">
     <meta property="og:type" content="website">
@@ -20,7 +20,7 @@
   </head>
   <body>
     <div id="app"></div>
-    <script>window.__VP_HASH_MAP__=JSON.parse("{\"adrs.md\":\"BxjHi9-8\",\"ai.md\":\"Cy9GWnER\",\"assets.md\":\"7C3HWkga\",\"brut-js.md\":\"B4GYxQVw\",\"business-logic.md\":\"BY4hGy0m\",\"cli.md\":\"CjsktgFz\",\"components.md\":\"Bu80E2Nr\",\"configuration.md\":\"CuIxVsSf\",\"css.md\":\"CltvJqAa\",\"custom-element-tests.md\":\"B_rbta32\",\"database-access.md\":\"gnluu54N\",\"database-schema.md\":\"LpmBPVEU\",\"deployment.md\":\"BLseERGV\",\"dev-environment.md\":\"DRH2D2-O\",\"dir-structure.md\":\"CWir1pic\",\"doc-conventions.md\":\"DOkAuXlt\",\"end-to-end-tests.md\":\"DzqRpZ43\",\"features.md\":\"DPFXsy0z\",\"flash-and-session.md\":\"nPvUpnUx\",\"form-constraints.md\":\"DK5adCgM\",\"forms.md\":\"DnLbzVDa\",\"getting-started.md\":\"DdQLmU3C\",\"handlers.md\":\"h84MMB1R\",\"hooks.md\":\"Jmb5VOLA\",\"i18n.md\":\"BAm9t9JJ\",\"index.md\":\"Bn9e0sRJ\",\"instrumentation.md\":\"BgcaGVYH\",\"javascript.md\":\"DzrMxUmI\",\"jobs.md\":\"S-2amAYp\",\"keyword-injection.md\":\"95Zgh2eN\",\"layouts.md\":\"CVGl9xIO\",\"lsp.md\":\"Dn1rIiW0\",\"markdown-examples.md\":\"CCFEQO44\",\"middleware.md\":\"Czz_UlJN\",\"overview.md\":\"DlKiRRG_\",\"pages.md\":\"B7Hc-i6H\",\"recipes_alternate-layouts.md\":\"BwEytl59\",\"recipes_authentication.md\":\"Dzvi_g69\",\"recipes_blank-layouts.md\":\"fyAUJyJR\",\"recipes_custom-flash.md\":\"CrQbI5eH\",\"recipes_indexed-forms.md\":\"CstYyOSo\",\"recipes_migrations.md\":\"CTcnWDJF\",\"recipes_text-field-component.md\":\"H4wLAK0Z\",\"roadmap.md\":\"C6PRi0DX\",\"routes.md\":\"BD6y2i-f\",\"security.md\":\"C0G_AZR-\",\"seed-data.md\":\"BvFZlqIk\",\"space-time-continuum.md\":\"xl44xDos\",\"tutorial.md\":\"C4zR5XPG\",\"unit-tests.md\":\"DUGrnLj5\",\"why.md\":\"C-hk5xgJ\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"Brut RB\",\"description\":\"Documentation for the Brut.RB web framework.\",\"base\":\"/\",\"head\":[],\"router\":{\"prefetchLinks\":true},\"appearance\":true,\"themeConfig\":{\"search\":{\"provider\":\"local\"},\"nav\":[{\"text\":\"Home\",\"link\":\"/\"},{\"text\":\"Getting Started\",\"link\":\"/getting-started\"},{\"text\":\"Overview\",\"link\":\"/overview\"},{\"text\":\"Brut API\",\"link\":\"/api/index.html\",\"target\":\"_self\"},{\"text\":\"BrutJS\",\"link\":\"/brut-js/api/index.html\",\"target\":\"_self\"},{\"text\":\"BrutCSS\",\"link\":\"/brut-css/index.html\",\"target\":\"_self\"}],\"outline\":[2,3],\"sidebar\":[{\"text\":\"Overview\",\"collapsed\":false,\"items\":[{\"text\":\"Getting Started\",\"link\":\"/getting-started\"},{\"text\":\"Concepts\",\"link\":\"/overview\"},{\"text\":\"Features\",\"link\":\"/features\"},{\"text\":\"Directory Structure\",\"link\":\"/dir-structure\"},{\"text\":\"Dev Environment\",\"link\":\"/dev-environment\"},{\"text\":\"Tutorial\",\"link\":\"/tutorial\"},{\"text\":\"Documentation Conventions\",\"link\":\"/doc-conventions\"}]},{\"text\":\"Front-End\",\"collapsed\":false,\"items\":[{\"text\":\"Routes\",\"link\":\"/routes\"},{\"text\":\"Pages\",\"link\":\"/pages\"},{\"text\":\"Layouts\",\"link\":\"/layouts\"},{\"text\":\"Forms\",\"link\":\"/forms\"},{\"text\":\"Form Constraints\",\"link\":\"/form-constraints\"},{\"text\":\"Handlers and Actions\",\"link\":\"/handlers\"},{\"text\":\"Components\",\"link\":\"/components\"},{\"text\":\"Flash and Session\",\"link\":\"/flash-and-session\"},{\"text\":\"Space/Time Continuum\",\"link\":\"/space-time-continuum\"},{\"text\":\"JavaScript\",\"link\":\"/javascript\"},{\"text\":\"CSS\",\"link\":\"/css\"},{\"text\":\"Assets\",\"link\":\"/assets\"},{\"text\":\"BrutJS\",\"link\":\"/brut-js\"}]},{\"text\":\"Back-End\",\"collapsed\":false,\"items\":[{\"text\":\"Database Schema\",\"link\":\"/database-schema\"},{\"text\":\"Database Access\",\"link\":\"/database-access\"},{\"text\":\"Seed Data\",\"link\":\"/seed-data\"},{\"text\":\"Jobs\",\"link\":\"/jobs\"},{\"text\":\"Business Logic\",\"link\":\"/business-logic\"}]},{\"text\":\"Framework\",\"collapsed\":false,\"items\":[{\"text\":\"Configuration\",\"link\":\"/configuration\"},{\"text\":\"Keyword Injection\",\"link\":\"/keyword-injection\"},{\"text\":\"I18n\",\"link\":\"/i18n\"},{\"text\":\"CLI / Tasks\",\"link\":\"/cli\"},{\"text\":\"Deployment\",\"link\":\"/deployment\"}]},{\"text\":\"Testing\",\"collapsed\":false,\"items\":[{\"text\":\"Unit Tests\",\"link\":\"/unit-tests\"},{\"text\":\"End-to-End Tests\",\"link\":\"/end-to-end-tests\"},{\"text\":\"Testing Custom Elements\",\"link\":\"/custom-element-tests\"}]},{\"text\":\"Advanced Topics\",\"collapsed\":true,\"items\":[{\"text\":\"Route Hooks\",\"link\":\"/hooks\"},{\"text\":\"Middleware\",\"link\":\"/middleware\"},{\"text\":\"Instrumentation\",\"link\":\"/instrumentation\"},{\"text\":\"Security\",\"link\":\"/security\"},{\"text\":\"LSP Support\",\"link\":\"/lsp\"}]},{\"text\":\"Recipes\",\"collapsed\":true,\"items\":[{\"text\":\"Migration Basics\",\"link\":\"/recipes/migrations\"},{\"text\":\"Authentication\",\"link\":\"/recipes/authentication\"},{\"text\":\"Alternate Layouts\",\"link\":\"/recipes/alternate-layouts\"},{\"text\":\"Blank Layouts\",\"link\":\"/recipes/blank-layouts\"},{\"text\":\"Custom Flash Class\",\"link\":\"/recipes/custom-flash\"},{\"text\":\"Indexed Form Elements\",\"link\":\"/recipes/indexed-forms\"},{\"text\":\"Text Field Component\",\"link\":\"/recipes/text-field-component\"}]},{\"text\":\"Meta\",\"collapsed\":false,\"items\":[{\"text\":\"Why?!\",\"link\":\"/why\"},{\"text\":\"ADRs\",\"link\":\"/adrs\"},{\"text\":\"Roadmap to 1.0\",\"link\":\"/roadmap\"},{\"text\":\"AI Declaration\",\"link\":\"/ai\"}]}],\"socialLinks\":[{\"icon\":\"github\",\"link\":\"https://github.com/thirdtank/brut\"}]},\"locales\":{},\"scrollOffset\":134,\"cleanUrls\":false}");</script>
+    <script>window.__VP_HASH_MAP__=JSON.parse("{\"adrs.md\":\"BxjHi9-8\",\"ai.md\":\"Cy9GWnER\",\"assets.md\":\"7C3HWkga\",\"brut-js.md\":\"B4GYxQVw\",\"business-logic.md\":\"BY4hGy0m\",\"cli.md\":\"CjsktgFz\",\"components.md\":\"B543a3Lm\",\"configuration.md\":\"-foE_iVv\",\"css.md\":\"CltvJqAa\",\"custom-element-tests.md\":\"B_rbta32\",\"database-access.md\":\"gnluu54N\",\"database-schema.md\":\"LpmBPVEU\",\"deployment.md\":\"BLseERGV\",\"dev-environment.md\":\"DRH2D2-O\",\"dir-structure.md\":\"CWir1pic\",\"doc-conventions.md\":\"DOkAuXlt\",\"end-to-end-tests.md\":\"DzqRpZ43\",\"features.md\":\"DPFXsy0z\",\"flash-and-session.md\":\"nPvUpnUx\",\"form-constraints.md\":\"DK5adCgM\",\"forms.md\":\"D5-2rgHh\",\"getting-started.md\":\"Cd4XSZb_\",\"handlers.md\":\"h84MMB1R\",\"hooks.md\":\"Jmb5VOLA\",\"i18n.md\":\"BAm9t9JJ\",\"index.md\":\"Bn9e0sRJ\",\"instrumentation.md\":\"BgcaGVYH\",\"javascript.md\":\"DzrMxUmI\",\"jobs.md\":\"S-2amAYp\",\"keyword-injection.md\":\"95Zgh2eN\",\"layouts.md\":\"CVGl9xIO\",\"lsp.md\":\"Dn1rIiW0\",\"markdown-examples.md\":\"CCFEQO44\",\"middleware.md\":\"Czz_UlJN\",\"overview.md\":\"DlKiRRG_\",\"pages.md\":\"B7Hc-i6H\",\"recipes_alternate-layouts.md\":\"BwEytl59\",\"recipes_authentication.md\":\"Dzvi_g69\",\"recipes_blank-layouts.md\":\"fyAUJyJR\",\"recipes_custom-flash.md\":\"CrQbI5eH\",\"recipes_indexed-forms.md\":\"CstYyOSo\",\"recipes_migrations.md\":\"CTcnWDJF\",\"recipes_text-field-component.md\":\"H4wLAK0Z\",\"roadmap.md\":\"C6PRi0DX\",\"routes.md\":\"BD6y2i-f\",\"security.md\":\"C0G_AZR-\",\"seed-data.md\":\"BvFZlqIk\",\"space-time-continuum.md\":\"xl44xDos\",\"tutorial.md\":\"C4zR5XPG\",\"unit-tests.md\":\"DUGrnLj5\",\"why.md\":\"C-hk5xgJ\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"Brut RB\",\"description\":\"Documentation for the Brut.RB web framework.\",\"base\":\"/\",\"head\":[],\"router\":{\"prefetchLinks\":true},\"appearance\":true,\"themeConfig\":{\"search\":{\"provider\":\"local\"},\"nav\":[{\"text\":\"Home\",\"link\":\"/\"},{\"text\":\"Getting Started\",\"link\":\"/getting-started\"},{\"text\":\"Overview\",\"link\":\"/overview\"},{\"text\":\"Brut API\",\"link\":\"/api/index.html\",\"target\":\"_self\"},{\"text\":\"BrutJS\",\"link\":\"/brut-js/api/index.html\",\"target\":\"_self\"},{\"text\":\"BrutCSS\",\"link\":\"/brut-css/index.html\",\"target\":\"_self\"}],\"outline\":[2,3],\"sidebar\":[{\"text\":\"Overview\",\"collapsed\":false,\"items\":[{\"text\":\"Getting Started\",\"link\":\"/getting-started\"},{\"text\":\"Concepts\",\"link\":\"/overview\"},{\"text\":\"Features\",\"link\":\"/features\"},{\"text\":\"Directory Structure\",\"link\":\"/dir-structure\"},{\"text\":\"Dev Environment\",\"link\":\"/dev-environment\"},{\"text\":\"Tutorial\",\"link\":\"/tutorial\"},{\"text\":\"Documentation Conventions\",\"link\":\"/doc-conventions\"}]},{\"text\":\"Front-End\",\"collapsed\":false,\"items\":[{\"text\":\"Routes\",\"link\":\"/routes\"},{\"text\":\"Pages\",\"link\":\"/pages\"},{\"text\":\"Layouts\",\"link\":\"/layouts\"},{\"text\":\"Forms\",\"link\":\"/forms\"},{\"text\":\"Form Constraints\",\"link\":\"/form-constraints\"},{\"text\":\"Handlers and Actions\",\"link\":\"/handlers\"},{\"text\":\"Components\",\"link\":\"/components\"},{\"text\":\"Flash and Session\",\"link\":\"/flash-and-session\"},{\"text\":\"Space/Time Continuum\",\"link\":\"/space-time-continuum\"},{\"text\":\"JavaScript\",\"link\":\"/javascript\"},{\"text\":\"CSS\",\"link\":\"/css\"},{\"text\":\"Assets\",\"link\":\"/assets\"},{\"text\":\"BrutJS\",\"link\":\"/brut-js\"}]},{\"text\":\"Back-End\",\"collapsed\":false,\"items\":[{\"text\":\"Database Schema\",\"link\":\"/database-schema\"},{\"text\":\"Database Access\",\"link\":\"/database-access\"},{\"text\":\"Seed Data\",\"link\":\"/seed-data\"},{\"text\":\"Jobs\",\"link\":\"/jobs\"},{\"text\":\"Business Logic\",\"link\":\"/business-logic\"}]},{\"text\":\"Framework\",\"collapsed\":false,\"items\":[{\"text\":\"Configuration\",\"link\":\"/configuration\"},{\"text\":\"Keyword Injection\",\"link\":\"/keyword-injection\"},{\"text\":\"I18n\",\"link\":\"/i18n\"},{\"text\":\"CLI / Tasks\",\"link\":\"/cli\"},{\"text\":\"Deployment\",\"link\":\"/deployment\"}]},{\"text\":\"Testing\",\"collapsed\":false,\"items\":[{\"text\":\"Unit Tests\",\"link\":\"/unit-tests\"},{\"text\":\"End-to-End Tests\",\"link\":\"/end-to-end-tests\"},{\"text\":\"Testing Custom Elements\",\"link\":\"/custom-element-tests\"}]},{\"text\":\"Advanced Topics\",\"collapsed\":true,\"items\":[{\"text\":\"Route Hooks\",\"link\":\"/hooks\"},{\"text\":\"Middleware\",\"link\":\"/middleware\"},{\"text\":\"Instrumentation\",\"link\":\"/instrumentation\"},{\"text\":\"Security\",\"link\":\"/security\"},{\"text\":\"LSP Support\",\"link\":\"/lsp\"}]},{\"text\":\"Recipes\",\"collapsed\":true,\"items\":[{\"text\":\"Migration Basics\",\"link\":\"/recipes/migrations\"},{\"text\":\"Authentication\",\"link\":\"/recipes/authentication\"},{\"text\":\"Alternate Layouts\",\"link\":\"/recipes/alternate-layouts\"},{\"text\":\"Blank Layouts\",\"link\":\"/recipes/blank-layouts\"},{\"text\":\"Custom Flash Class\",\"link\":\"/recipes/custom-flash\"},{\"text\":\"Indexed Form Elements\",\"link\":\"/recipes/indexed-forms\"},{\"text\":\"Text Field Component\",\"link\":\"/recipes/text-field-component\"}]},{\"text\":\"Meta\",\"collapsed\":false,\"items\":[{\"text\":\"Why?!\",\"link\":\"/why\"},{\"text\":\"ADRs\",\"link\":\"/adrs\"},{\"text\":\"Roadmap to 1.0\",\"link\":\"/roadmap\"},{\"text\":\"AI Declaration\",\"link\":\"/ai\"}]}],\"socialLinks\":[{\"icon\":\"github\",\"link\":\"https://github.com/thirdtank/brut\"}]},\"locales\":{},\"scrollOffset\":134,\"cleanUrls\":false}");</script>
     
   </body>
 </html>