brut 0.0.29 → 0.2.0

data/docs/assets/recipes_text-field-component.md.H4wLAK0Z.js

@@ -0,0 +1,101 @@
+import{_ as i,c as a,o as n,ag as l}from"./chunks/framework.1L-BeKqY.js";const g=JSON.parse('{"title":"Creating your Own Text Field Component","description":"","frontmatter":{},"headers":[],"relativePath":"recipes/text-field-component.md","filePath":"recipes/text-field-component.md"}'),h={name:"recipes/text-field-component.md"};function t(p,s,k,e,E,r){return n(),a("div",null,s[0]||(s[0]=[l(`<h1 id="creating-your-own-text-field-component" tabindex="-1">Creating your Own Text Field Component <a class="header-anchor" href="#creating-your-own-text-field-component" aria-label="Permalink to &quot;Creating your Own Text Field Component&quot;">​</a></h1><p>Brut&#39;s <a href="/api/Brut/FrontEnd/Components/Input/InputTag.html" target="_self" rel="noopener" data-no-router><code>Brut::FrontEnd::Components::Input::InputTag</code></a> creates only the <code>&lt;input&gt;</code> HTML element. You will likely want something more sophsticated. You can achieve this by creating your own component.</p><h2 id="feature" tabindex="-1">Feature <a class="header-anchor" href="#feature" aria-label="Permalink to &quot;Feature&quot;">​</a></h2><p>We&#39;ll make a text field that has a label, error messages, and styling. It will support three sizes: small, normal, and large.</p><p>It will require a form and an input name, and optional index as well.</p><h2 id="recipe" tabindex="-1">Recipe <a class="header-anchor" href="#recipe" aria-label="Permalink to &quot;Recipe&quot;">​</a></h2><h3 id="create-the-initializer" tabindex="-1">Create the Initializer <a class="header-anchor" href="#create-the-initializer" aria-label="Permalink to &quot;Create the Initializer&quot;">​</a></h3><p>First, we&#39;ll create the component:</p><div class="language- vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span>bin/scaffold component text_field</span></span></code></pre></div><p>Now, edit the initializer to accept the parameters we need:</p><div class="language-ruby vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">ruby</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"># app/src/front_end/components/text_field_component.rb</span></span>
+<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">class</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> TextFieldComponent</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> &lt;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> AppComponent</span></span>
+<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">  def</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> initialize</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">form:</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">                 input_name:</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">                 index:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 0</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"># default for non-array values</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">                 size:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> :normal</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    @form       </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> form</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    @input_name </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> input_name</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    @index      </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> index</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    @size       </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> size</span></span>
+<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">  end</span></span>
+<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">end</span></span></code></pre></div><h3 id="outline-the-html" tabindex="-1">Outline the HTML <a class="header-anchor" href="#outline-the-html" aria-label="Permalink to &quot;Outline the HTML&quot;">​</a></h3><p>We&#39;ll want HTML like so:</p><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">label</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">input</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> ...</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">span</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;LABEL HERE&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">span</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">brut-cv-messages</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">brut-cv-messages</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">label</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre></div><p>Before we worry about CSS or styling, let&#39;s sketch this out in <code>view_template</code>. The actual label text will come from our I18n setup. We&#39;ll assume a &quot;labels&quot; top-level section that has sections for each form and then inside that, each input name:</p><div class="language-ruby vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">ruby</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"># app/config/i18n/en/2_app.rb</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">{</span></span>
+<span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">  &quot;labels&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: {</span></span>
+<span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">    &quot;LoginForm&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: {</span></span>
+<span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">      &quot;email&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Email addressed you used when singing up&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">      &quot;password&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Your password&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    }</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  }</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span></code></pre></div><div class="language-ruby vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">ruby</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"># app/src/front_end/components/text_field_component.rb</span></span>
+<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">class</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> TextFieldComponent</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> &lt;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> AppComponent</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">  include</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> Brut</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">::</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">FrontEnd</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">::</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">Components</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">  private</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> attr_reader</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> :form</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">:input_name</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">:index</span></span>
+<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">  def</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> view_template</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    label </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">do</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">      InputTag</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">form:</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">input_name:</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">index:</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> )</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">      span { </span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">raw</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">t</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">([ </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;labels&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, form.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">class</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">name</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, input_name ])) }</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">      ConstraintViolations</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">form:</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">input_name:</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">index:</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span>
+<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">    end</span></span>
+<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">  end</span></span>
+<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">end</span></span></code></pre></div><h3 id="styling-the-component" tabindex="-1">Styling the Component <a class="header-anchor" href="#styling-the-component" aria-label="Permalink to &quot;Styling the Component&quot;">​</a></h3><p>Styling can happen in a few ways. For simplicity, we&#39;ll use CSS and have minimal classes on our HTML. Since the structure is all inside a <code>&lt;label&gt;</code>, we&#39;ll add a class on that, named for our component. We&#39;ll also include form and input names in the class to allow overriding if needed. Lastly, we&#39;ll include the size as well.</p><div class="language-ruby vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">ruby</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"># app/src/front_end/components/text_field_component.rb</span></span>
+<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">class</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> TextFieldComponent</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> &lt;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> AppComponent</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">  include</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> Brut</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">::</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">FrontEnd</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">::</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">Components</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">  private</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> attr_reader</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> :form</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">:input_name</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">:index</span></span>
+<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">  def</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> view_template</span></span>
+<span class="line highlighted"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">    label_classes</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> = [</span></span>
+<span class="line highlighted"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">      class</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">name</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line highlighted"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">      class</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">name</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> +</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &quot;-</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">#{</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">@size</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">}</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line highlighted"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">      form.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">class</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">name</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line highlighted"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">      input_name</span></span>
+<span class="line highlighted"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    ]</span></span>
+<span class="line highlighted"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">    label</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">class:</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> label_classes) </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">do</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">      InputTag</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">form:</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">input_name:</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">index:</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> )</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">      span { </span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">raw</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">t</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">([ </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;labels&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, form.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">class</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">name</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, input_name ])) }</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">      ConstraintViolations</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">form:</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">input_name:</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">index:</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span>
+<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">    end</span></span>
+<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">  end</span></span>
+<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">end</span></span></code></pre></div><p>Let&#39;s create <code>app/src/front_end/css/TextFieldComponent.css</code>, which we&#39;ll need to <code>@import</code>:</p><div class="language-css vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">css</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">/* app/src/front_end/css/index.css */</span></span>
+<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">@import</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &quot;TextFieldComponent.css&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span></code></pre></div><p>The CSS will assume BrutCSS&#39;s design system is available:</p><div class="language-css vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">css</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">/* app/src/front_end/css/TextFieldComponent.css */</span></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">.TextFieldComponent</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">  label</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">    display</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">flex</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">    flex-direction</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">column</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">    gap</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">var</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">--sp-2</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  }</span></span>
+<span class="line"><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">  input</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">    border</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">solid</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> thin</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> var</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">--gray-500</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">    border-radius</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">var</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">--br-3</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">    padding</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">var</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">--sp-2</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">    font-size</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">var</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">--fs-3</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  }</span></span>
+<span class="line"><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">  span</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">    font-size</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">var</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">--fs-2</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">    font-stye</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">italic</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">    color</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">var</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">--gray-400</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  }</span></span>
+<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">  /** We assume the general styling for brut-form</span></span>
+<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">      and brut-cv exists in index.css */</span></span>
+<span class="line"><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">  brut-cv</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">    color</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">red</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  }</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  &amp;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">.TextFieldComponent-small</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">    input</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">      font-size</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">var</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">--fs-1</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    }</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  }</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  &amp;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">.TextFieldComponent-large</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">    input</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">      font-size</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">var</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">--fs-4</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    }</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  }</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span></code></pre></div><h3 id="using-the-component" tabindex="-1">Using the Component <a class="header-anchor" href="#using-the-component" aria-label="Permalink to &quot;Using the Component&quot;">​</a></h3><p>To use this component, we can create an instance and send it to Phlex&#39;s <code>render</code>:</p><div class="language-ruby vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">ruby</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">def</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> view_template</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  brut_form </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">do</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">    FormTag</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">for:</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> @form) </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">do</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">      render </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">TextFieldComponent</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">.</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">new</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">form:</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> @form,</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">                                    input_name:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> :name</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">      render </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">TextFieldComponent</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">.</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">new</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">form:</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> @form,</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">                                    input_name:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> :quantity</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">                                    size:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> :small</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">      button { </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Save&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
+<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">    end</span></span>
+<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">  end</span></span>
+<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">end</span></span></code></pre></div>`,27)]))}const y=i(h,[["render",t]]);export{g as __pageData,y as default};

data/docs/assets/recipes_text-field-component.md.H4wLAK0Z.lean.js

@@ -0,0 +1 @@
+import{_ as i,c as a,o as n,ag as l}from"./chunks/framework.1L-BeKqY.js";const g=JSON.parse('{"title":"Creating your Own Text Field Component","description":"","frontmatter":{},"headers":[],"relativePath":"recipes/text-field-component.md","filePath":"recipes/text-field-component.md"}'),h={name:"recipes/text-field-component.md"};function t(p,s,k,e,E,r){return n(),a("div",null,s[0]||(s[0]=[l("",27)]))}const y=i(h,[["render",t]]);export{g as __pageData,y as default};

data/docs/assets/roadmap.md.C6PRi0DX.js

@@ -0,0 +1 @@
+import{_ as t,c as o,o as a,ag as i}from"./chunks/framework.1L-BeKqY.js";const h=JSON.parse('{"title":"Roadmap to 1.0","description":"","frontmatter":{},"headers":[],"relativePath":"roadmap.md","filePath":"roadmap.md"}'),l={name:"roadmap.md"};function r(s,e,n,d,c,m){return a(),o("div",null,e[0]||(e[0]=[i('<h1 id="roadmap-to-1-0" tabindex="-1">Roadmap to 1.0 <a class="header-anchor" href="#roadmap-to-1-0" aria-label="Permalink to &quot;Roadmap to 1.0&quot;">​</a></h1><p>A lot of Brut is solid, but there&#39;s several things missing from what I would call a 1.0 release. Here are some ideas of what I think is needed:</p><h2 id="better-dev-experience" tabindex="-1">Better Dev Experience <a class="header-anchor" href="#better-dev-experience" aria-label="Permalink to &quot;Better Dev Experience&quot;">​</a></h2><ul><li>The output of <code>bin/dev</code> isn&#39;t great.</li><li>otel-desktop-viewer is cool, but not the easiest to figure out issues as compred to good &#39;ole logging.</li><li>Error pages in the app are <em>really</em> bad.</li><li>CLI apps are OK, but could be fancier.</li></ul><h2 id="more-tests" tabindex="-1">More Tests <a class="header-anchor" href="#more-tests" aria-label="Permalink to &quot;More Tests&quot;">​</a></h2><ul><li>Unit tests for all/most classes are needed. There&#39;s only a few now.</li><li>Integration test of <code>mkbrut</code>, all automated.</li><li>Web component/custom element tests need to be re-thought.</li><li>Test output is a wall of text stack trace and this sucks.</li><li>Improvements in access to Playwright features.</li><li>Playright is the worst E2E testing tool except all the rest. Would love a better option here.</li></ul><h2 id="more-complete-web-features" tabindex="-1">More Complete Web Features <a class="header-anchor" href="#more-complete-web-features" aria-label="Permalink to &quot;More Complete Web Features&quot;">​</a></h2><ul><li>Content security policy doens&#39;t allow for hashes, which can be limiting in some situations. I want everyone to be running with a CSP, so it has to be configurable to some degree.</li><li>Websockets, server-push, etc. should be possible or at least have a recipe.</li><li>Learn more about importmaps.</li></ul><h2 id="client-side-improvements" tabindex="-1">Client-Side Improvements <a class="header-anchor" href="#client-side-improvements" aria-label="Permalink to &quot;Client-Side Improvements&quot;">​</a></h2><p>BrutJS is woefully incomplete. I&#39;d like developers to be able to accomplishe certain tasks without needing a framework:</p><ul><li>Hooks into asset building to e.g. enable TailwindCSS or other tools.</li><li>Better use of <code>fetch</code> in more situations</li><li>Server-generated HTML replacement</li><li>Better support for &quot;API&quot; style back-end when a framework <em>is</em> going to be used.</li></ul><h2 id="deployment" tabindex="-1">Deployment <a class="header-anchor" href="#deployment" aria-label="Permalink to &quot;Deployment&quot;">​</a></h2><p>Out of the box support for more deployment mechanism, at least:</p><ul><li>Normal Heroku/<code>Procfile</code>-based deploy</li><li>Digital Ocean-style hosting</li><li>VPS?</li></ul><h2 id="documentation" tabindex="-1">Documentation <a class="header-anchor" href="#documentation" aria-label="Permalink to &quot;Documentation&quot;">​</a></h2><ul><li>More recipes for how to do things</li><li>More complete API docs with examples</li><li>A unified look and feel across the board</li><li>Get rid of VitePress for something less client-heavy, but still great</li><li>Dash-accessible API docs</li></ul><h2 id="misc" tabindex="-1">Misc <a class="header-anchor" href="#misc" aria-label="Permalink to &quot;Misc&quot;">​</a></h2><ul><li>More direct Sidekiq support</li></ul>',18)]))}const p=t(l,[["render",r]]);export{h as __pageData,p as default};

data/docs/assets/roadmap.md.C6PRi0DX.lean.js

@@ -0,0 +1 @@
+import{_ as t,c as o,o as a,ag as i}from"./chunks/framework.1L-BeKqY.js";const h=JSON.parse('{"title":"Roadmap to 1.0","description":"","frontmatter":{},"headers":[],"relativePath":"roadmap.md","filePath":"roadmap.md"}'),l={name:"roadmap.md"};function r(s,e,n,d,c,m){return a(),o("div",null,e[0]||(e[0]=[i("",18)]))}const p=t(l,[["render",r]]);export{h as __pageData,p as default};

data/docs/assets/routes.md.B8kfUPHU.js

@@ -0,0 +1,21 @@
+import{_ as a,c as t,o as s,ag as i}from"./chunks/framework.1L-BeKqY.js";const u=JSON.parse('{"title":"Routes","description":"","frontmatter":{},"headers":[],"relativePath":"routes.md","filePath":"routes.md"}'),o={name:"routes.md"};function n(r,e,l,h,d,p){return s(),t("div",null,e[0]||(e[0]=[i(`<h1 id="routes" tabindex="-1">Routes <a class="header-anchor" href="#routes" aria-label="Permalink to &quot;Routes&quot;">​</a></h1><p>The primary function of a web framework like Brut is to map URLs requested by the browser or an HTTP client and invoke code based on them.</p><p>Brut has a fairly simple routing system that&#39;s not designed for flexibility.</p><h2 id="overview" tabindex="-1">Overview <a class="header-anchor" href="#overview" aria-label="Permalink to &quot;Overview&quot;">​</a></h2><p>Your app has a subclass of <a href="/api/Brut/Framework/App.html" target="_self" rel="noopener" data-no-router><code>Brut::Framework::App</code></a>, called <code>App</code>. It includes a call to the <code>routes</code> class method. In there, you declare your routes by using one of four methods:</p><table tabindex="0"><thead><tr><th>Method</th><th>HTTP Method</th><th>Purpose</th></tr></thead><tbody><tr><td><code>page «route»</code></td><td>GET</td><td>Declare a page</td></tr><tr><td><code>form «route»</code></td><td>POST</td><td>Declare a form to be submitted to a handler</td></tr><tr><td><code>action «route»</code></td><td>POST</td><td>Declare an element-less form to be submitted to a handler (akin to Rails&#39; <code>button_to</code> helper)</td></tr><tr><td><code>path «route», method: «method»</code></td><td><code>«method»</code></td><td>Declare an arbitrary path to a handler</td></tr></tbody></table><p>The value for <code>«route»</code>, along with the method called, is used to determine what class(es) will be used to handle the route.</p><h3 id="«route»-syntax" tabindex="-1">«route» Syntax <a class="header-anchor" href="#«route»-syntax" aria-label="Permalink to &quot;«route» Syntax&quot;">​</a></h3><p>A route is a string that contains the <em>path part</em> of a <a href="https://developer.mozilla.org/en-US/docs/Web/API/URL" target="_blank" rel="noreferrer">URL</a>. <em>Segments</em> of the path (i.e. the stuff between each forward slash <code>/</code>) can be either <em>static</em> or a <em>placeholder</em>.</p><p>As such:</p><ul><li>Only the <a href="https://developer.mozilla.org/en-US/docs/Web/API/URL/pathname" target="_blank" rel="noreferrer">pathname</a> of a request may be specified.</li><li>All routes must start with a slash</li><li>A placeholder segment must be a valid Ruby identifier preceded by a colon, e.g. <code>:company_id</code> is allowed, but <code>:company-id</code> is not.</li><li>Routes may not start with a placeholder.</li></ul><p>Some examples:</p><div class="language- vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span>&quot;/dash_board&quot;</span></span>
+<span class="line"><span>&quot;/widgets/:id&quot;</span></span>
+<span class="line"><span>&quot;/company/:company_id/locations/:location_id&quot;</span></span>
+<span class="line"><span>&quot;/&quot;</span></span></code></pre></div><h3 id="class-naming-conventions" tabindex="-1">Class Naming Conventions <a class="header-anchor" href="#class-naming-conventions" aria-label="Permalink to &quot;Class Naming Conventions&quot;">​</a></h3><p>Brut is convention-based, so you are not able to specify the name of the classes used to handle routes. Brut will use the method you called (e.g. <code>page</code>) and the route your provided to determine the class name.</p><p>Some examples:</p><table tabindex="0"><thead><tr><th>Route invocation</th><th>Expected Class Name(s)</th></tr></thead><tbody><tr><td><code>page &quot;/dashboard&quot;</code></td><td><code>DashboardPage</code></td></tr><tr><td><code>page &quot;/widgets/:id&quot;</code></td><td><code>WidgetsByIdPage</code></td></tr><tr><td><code>form &quot;/login&quot;</code></td><td><code>LoginForm</code> and <code>LoginHandler</code></td></tr><tr><td><code>action &quot;/delete_widget/:id&quot;</code></td><td><code>DeleteWidgetWithIdHandler</code></td></tr><tr><td><code>path &quot;/tokens/personal/:token, method :put&quot;</code></td><td><code>Tokens::PersonalWithTokenHandler</code></td></tr></tbody></table><p>Specifically, the name of the class(es) is/are determined as follows:</p><ul><li>Static segments of the pathname are mapped to namespaces or a class based on converting the path segment to camel-case. For example <code>new_widget</code> becomes <code>NewWidget</code>.</li><li>The final static segment in the path represents a class name. All other static segments represent modules in which the final class is namespaced <ul><li>If the route is for a page, <code>Page</code> is appended to the class name.</li><li>If the route is for a form, there are two classes in play, one appended with <code>Form</code> and one with <code>Handler</code>.</li><li>If the route has no form and is just a handler, <code>Handler</code> is appended to the class name.</li></ul></li><li>Placeholder segments are attached to the previous static segment, augmenting its name: <ul><li>The placeholder is camel-cased</li><li>The placeholder is prefixed with <code>By</code> for <code>page</code> routes and <code>With</code> for all other routes</li><li>the prefixed-placeholder is appended to the previous module or class name, e.g. <code>WidgetsById</code></li></ul></li><li>These are now connected to form a valid Ruby class name.</li><li>The route <code>/</code> is special and always maps to <code>HomePage</code>.</li></ul><p>Note that deeply nested routes that contain several placeholders will work, and create complicated classnames.</p><div class="language-ruby vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">ruby</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">page </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;/company/:company_id/location/:location_id&quot;</span></span>
+<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"># =&gt; CompanyByCompanyId::LocationByLocationIdPage</span></span></code></pre></div><div class="note custom-block github-alert"><p class="custom-block-title">NOTE</p><p>All routes can receive query string parameters. These are not factored into the name of the class that will handle the route, but they <em>are</em> made available to your Page or Handler.</p></div><h3 id="creating-uris-for-routes" tabindex="-1">Creating URIs for Routes <a class="header-anchor" href="#creating-uris-for-routes" aria-label="Permalink to &quot;Creating URIs for Routes&quot;">​</a></h3><p>Because each route is associated with a class, you can use the class to create the route, including any placeholders and query string parameters.</p><p>The most direct way to do this is with the <code>routing</code> method available on each page or handler class:</p><div class="language-ruby vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">ruby</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">&gt;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> WidgetsByIdPage</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">routing</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">id:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 42</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span>
+<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"># =&gt; /widgets/42</span></span>
+<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">&gt;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> WidgetsByIdPage</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">routing</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">id:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 42</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">compact:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> true</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span>
+<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"># =&gt; /widgets/42?compact=true</span></span>
+<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">&gt;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> WidgetsByIdPage</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">routing</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">id:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 42</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">compact:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> true</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">anchor:</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &quot;summary&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span>
+<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"># =&gt; /widgets/42?compact=true#summary</span></span>
+<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">&gt;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> ArchiveWidgetByIdHandler</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">routing</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">id:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 42</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span>
+<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"># =&gt; /archive_widget/42</span></span></code></pre></div><p>If you fail to provide the required parameters, <code>routing</code> will raise a <a href="/api/Brut/Framework/Errors/MissingParameter.html" target="_self" rel="noopener" data-no-router><code>Brut::Framework::Errors::MissingParameter</code></a> with a message explaining the problem.</p><div class="language-ruby vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">ruby</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">&gt;</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> begin</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">    WidgetsByIdPage</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">routing</span></span>
+<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">  rescue</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> Brut</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">::</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">Framework</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">::</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">Errors</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">::</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">MissingParameter</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> =&gt; ex</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">    puts</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">ex</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">message</span></span>
+<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">  end</span></span>
+<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"># =&gt; Parameter &#39;id&#39; was not available. Received params: no params.</span></span>
+<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">#    :id was used as a path parameter for</span></span>
+<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">#    WidgetsByIdPage (path &#39;/widgets/:id&#39;)</span></span></code></pre></div><p><code>routing</code> is how you create links to other pages:</p><div class="language-erb vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">erb</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">a</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> href</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&lt;%= </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">DashBoardPage</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">routing</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> %&gt;</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  Go to Dashboard</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">a</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre></div><div class="note custom-block github-alert"><p class="custom-block-title">NOTE</p><p>You can use <code>routing</code> to create <code>&lt;form&gt;</code> actions, but <a href="/api/Brut/FrontEnd/Components/FormTag.html" target="_self" rel="noopener" data-no-router><code>Brut::FrontEnd::Components::FormTag</code></a>, which we&#39;ll discuss in <a href="/forms.html">Forms</a>, can do this for you.</p></div><p>The <code>routing</code> method isn&#39;t an abstraction around routes. It&#39;s more of a strongly-typed translation. This means when you change something, your app won&#39;t route to non-existent routes—it&#39;ll blow up with a helpful error.</p><p>For example, if you decided that <code>/dash_board/</code> should&#39;ve been called <code>/account_home</code>, you would change the value in <code>app.rb</code>, then rename the class. At this point, any code that routes to <code>DashboardPage.routing</code> will raise a <code>NameError</code>. With sufficient test coverage, you can address everywhere you see the <code>NameError</code> and be confident you have changed the name and route successfully.</p><h2 id="testing" tabindex="-1">Testing <a class="header-anchor" href="#testing" aria-label="Permalink to &quot;Testing&quot;">​</a></h2><p>Routes are configuration, so you do not need to test them. In fact, you can&#39;t test them directly. Your end-to-end tests should adequately cover the correct usage of your routes. If you always using <code>.routing</code> to generate routes, Ruby&#39;s runtime check swill also ensure you have not used a non-existent or invalid route.</p><h2 id="recommended-practices" tabindex="-1">Recommended Practices <a class="header-anchor" href="#recommended-practices" aria-label="Permalink to &quot;Recommended Practices&quot;">​</a></h2><p>Brut does not provide flexibility with routes, nor is logic intended to exist where you are declaring them.</p><h3 id="routes-should-be-named-for-concepts-anyone-can-understand" tabindex="-1">Routes Should be Named for Concepts Anyone Can Understand <a class="header-anchor" href="#routes-should-be-named-for-concepts-anyone-can-understand" aria-label="Permalink to &quot;Routes Should be Named for Concepts Anyone Can Understand&quot;">​</a></h3><p>If you have an account management page that allows modifying data in a table called <code>user_preferences</code>, but everyone just calls it &quot;the account management page&quot;, the route should be <code>/account_management</code>.</p><p>Although routes are primarily for programmers, there&#39;s no reason not to name them using the terms everyone involved in your app uses. This is part of the reason Brut inserts <code>By</code> or <code>With</code> when there is a placeholder. It allows you to have a page for all widgets—the &quot;widgets page&quot;—and a page for a specific widget by id—the &quot;widgets by id page&quot;.</p><h3 id="prefer-shallow-routes-with-a-single-placeholder" tabindex="-1">Prefer Shallow Routes with a Single Placeholder <a class="header-anchor" href="#prefer-shallow-routes-with-a-single-placeholder" aria-label="Permalink to &quot;Prefer Shallow Routes with a Single Placeholder&quot;">​</a></h3><p>The more path segments your route has, and the more placeholders it is, the longer your class name will be and the more you lose the connection to reality. The &quot;company by company id location by location id page&quot; doesn&#39;t exactly roll off the tongue.</p><p>Life will be easier if you can choose names and routes that have a single placeholder. Multiple path segments can be useful for namespacing.</p><h3 id="placeholders-identify-things-query-strings-search-for-things" tabindex="-1">Placeholders Identify Things, Query Strings Search for Things <a class="header-anchor" href="#placeholders-identify-things-query-strings-search-for-things" aria-label="Permalink to &quot;Placeholders Identify Things, Query Strings Search for Things&quot;">​</a></h3><p>A query string is for just that: querying. The query string is not for identifying things. That&#39;s what URIs are for.</p><p>As such, for routes where a specific <em>thing</em> is being identified, use route placeholders like <code>/widgets/:id</code>. When a route is used for searching or locating <em>things</em>, a query string is better: <code>/widgets?type=«type»</code>.</p><p>Remember that the query string is <em>not</em> part of the class name. The values for the query string will be made available to your page or handler.</p><h3 id="pluralization-is-up-to-you" tabindex="-1">Pluralization Is Up to You <a class="header-anchor" href="#pluralization-is-up-to-you" aria-label="Permalink to &quot;Pluralization Is Up to You&quot;">​</a></h3><p>The rules Brut uses to determine the class names to handle routes do not rely on pluralization. You can have a <code>/widget</code> route and a <code>/widgets</code> route, if that makes sense to your domain and team. They are both handled by the same set of underlying rules.</p><h2 id="technical-notes" tabindex="-1">Technical Notes <a class="header-anchor" href="#technical-notes" aria-label="Permalink to &quot;Technical Notes&quot;">​</a></h2><div class="important custom-block github-alert"><p class="custom-block-title">IMPORTANT</p><p>Technical Notes are for deeper understanding and debugging. While we will try to keep them up-to-date with changes to Brut&#39;s internals, the source code is always more correct.</p></div><p><em>Last Updated Feb 23, 2025</em></p><p>Brut stores all configured routes in a <a href="/api/Brut/FrontEnd/Routing.html" target="_self" rel="noopener" data-no-router><code>Brut::FrontEnd::Routing</code></a> object. This means that all metadata about a route is available. You are not intended to interact with this class, but you will note that in certain circumstances, the <a href="/api/Brut/FrontEnd/Routing/Route.html" target="_self" rel="noopener" data-no-router><code>Brut::FrontEnd::Routing::Route</code></a> can be injected into your class.</p><p>Brut uses this metadata to create route handlers with Sinatra. While Brut may not always use Sinatra under the covers, it does as of the writing, so when you call <code>page &quot;/widgets&quot;</code>, Brut will call <code>get &quot;/widgets&quot; do</code> and pass a block to Sinatra to find the class to handle the reqest, create an instance of it, call a method on it, and return the response.</p>`,54)]))}const g=a(o,[["render",n]]);export{u as __pageData,g as default};

data/docs/assets/{routes.md.BMM7peut.lean.js → routes.md.B8kfUPHU.lean.js}

@@ -1 +1 @@
-import{_ as a,c as s,o as t,ag as i}from"./chunks/framework.1L-BeKqY.js";const u=JSON.parse('{"title":"Routes","description":"","frontmatter":{},"headers":[],"relativePath":"routes.md","filePath":"routes.md"}'),o={name:"routes.md"};function n(r,e,l,h,d,p){return t(),s("div",null,e[0]||(e[0]=[i("",58)]))}const g=a(o,[["render",n]]);export{u as __pageData,g as default};
+import{_ as a,c as t,o as s,ag as i}from"./chunks/framework.1L-BeKqY.js";const u=JSON.parse('{"title":"Routes","description":"","frontmatter":{},"headers":[],"relativePath":"routes.md","filePath":"routes.md"}'),o={name:"routes.md"};function n(r,e,l,h,d,p){return s(),t("div",null,e[0]||(e[0]=[i("",54)]))}const g=a(o,[["render",n]]);export{u as __pageData,g as default};

data/docs/assets/{security.md.C668yXCi.js → security.md.C0G_AZR-.js}

@@ -1 +1 @@
-import{_ as t,c as o,o as a,ag as r}from"./chunks/framework.1L-BeKqY.js";const p=JSON.parse('{"title":"Security","description":"","frontmatter":{},"headers":[],"relativePath":"security.md","filePath":"security.md"}'),i={name:"security.md"};function n(s,e,c,l,d,u){return a(),o("div",null,e[0]||(e[0]=[r('<h1 id="security" tabindex="-1">Security <a class="header-anchor" href="#security" aria-label="Permalink to &quot;Security&quot;">​</a></h1><p>As a new framework, Brut has not been battle-tested against potential securitiy exploits. That said, Brut does configure several features to help manage security issues.</p><h2 id="overview" tabindex="-1">Overview <a class="header-anchor" href="#overview" aria-label="Permalink to &quot;Overview&quot;">​</a></h2><p>Web application security is a large topic. Brut provides a few features out of the box to manage security of your app:</p><ul><li>Encrypted sessions</li><li>Cross-Site Request Forgery (CSRF) protection</li><li>Content Security Policy headers and tools</li><li><code>bundle audit</code></li></ul><h3 id="encrypted-sessions" tabindex="-1">Encrypted Sessions <a class="header-anchor" href="#encrypted-sessions" aria-label="Permalink to &quot;Encrypted Sessions&quot;">​</a></h3><p>Brut uses the <code>Rack::Session::Cookie</code> middleware to manage cookies. They are encrypted with the value of the environment variable <code>SESSION_SECRET</code>. This prevents both the website visitor and other websites from examining the contents of the cookie.</p><p>This means that if Brut places data in there, it can rely on it being safe when fetched later.</p><p>Cookie behavior and configuration is currently not configurable.</p><h3 id="csrf-protection" tabindex="-1">CSRF Protection <a class="header-anchor" href="#csrf-protection" aria-label="Permalink to &quot;CSRF Protection&quot;">​</a></h3><p>A <a href="https://owasp.org/www-community/attacks/csrf" target="_blank" rel="noreferrer">cross-site request forgery</a> happens when a malicious site submits information from their site to a Brut-powered site, assuming it will allow and respect your credentials, potentially initiating an action on the Brut-powered site that you did not intend.</p><p>The common way to mitigate this is to require a CSRF token to be included with each form submission. This value is generated by the server and included int he user&#39;s secure session. If the form submission&#39;s CSRF token matches, the request is assumed to be valid.</p><p>Brut configures <a href="https://sinatrarb.com/rack-protection/" target="_blank" rel="noreferrer">Rack::Protection::AuthenticityToken</a> as a middleware. Its configuration requires that <em>all</em> form submissions include a valid CSRF token, with a few exceptions noted in the <a href="#technical-notes">Technical Notes</a> section below.</p><p>To include a valid CSRF token in your <a href="/forms.html">form</a>, use <a href="/api/Brut/FrontEnd/Components/FormTag.html" target="_self" rel="noopener" data-no-router><code>Brut::FrontEnd::Components::FormTag</code></a> to generate your <code>&lt;form&gt;</code>. That&#39;s it.</p><p>Brut&#39;s approach to Ajax requests is to model them as form submissions, so by creating a form using <code>FormTag</code> and using its <a href="https://developer.mozilla.org/en-US/docs/Web/API/FormData" target="_blank" rel="noreferrer"><code>FormData</code></a> to submit that form with e.g. <code>fetch</code>, the CSRF token will be supplied.</p><div class="note custom-block github-alert"><p class="custom-block-title">NOTE</p><p>AJax and CSRF is currently somewhat immature in Brut, so there may be areas where things don&#39;t work as you&#39;d expect.</p></div><h3 id="content-security-policy-headers-and-tools" tabindex="-1">Content Security Policy headers and tools <a class="header-anchor" href="#content-security-policy-headers-and-tools" aria-label="Permalink to &quot;Content Security Policy headers and tools&quot;">​</a></h3><p><a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Guides/CSP" target="_blank" rel="noreferrer">Content Security Policy (CSP)</a> is a way for a website to tell the browser what CSS and JavaScript is allowed to execute on the page. Most web frameworks default to a lax or no policy, which makes applying one later difficult.</p><p>Brut takes the opposite approach. By default, Brut configures <a href="/api/Brut/FrontEnd/RouteHooks/CSPNoInlineStylesOrScripts.html" target="_self" rel="noopener" data-no-router><code>Brut::FrontEnd::RouteHooks::CSPNoInlineStylesOrScripts</code></a> as an after route hook. This sets the content security poilcy header to disallow all inline stylings (the <code>style=</code> attribute) and all inline script tags (e.g. <code>onclick=</code>). In development, inline styles are allowed, since they are convienient when prototyping.</p><p>Brut also configures CSP reporting, which is sent into the <a href="/instrumentation.html">instrumentation</a> system.</p><p>You can control this behavior by changing the <code>csp_class</code> and/or <code>csp_reporting_class</code> using <code>Brut.container.override</code> in your <code>App</code>. You can either create your own route hook and use that, or set either to <code>nil</code> to disable CSP entirely.</p><h3 id="bundle-audit" tabindex="-1"><code>bundle audit</code> <a class="header-anchor" href="#bundle-audit" aria-label="Permalink to &quot;`bundle audit`&quot;">​</a></h3><p>The <code>bin/ci</code> script provided when you created your Burt app includes a call to <code>bundle exec bundle audit check --update</code>, which will audit your RubyGems for versions that have known vulnerabilities. If any are found, <code>bin/ci</code> exits nonzero, thus failing your build.</p><h2 id="testing" tabindex="-1">Testing <a class="header-anchor" href="#testing" aria-label="Permalink to &quot;Testing&quot;">​</a></h2><p>In general, you don&#39;t want to test any of this unless you&#39;ve set up something custom or complex. Testing security is done more effectively by a third party evaluating your app as a so-called &quot;black box&quot; or &quot;opaque box&quot; where its probed for issues without knowing how the app is implemented.</p><h2 id="recommended-practices" tabindex="-1">Recommended Practices <a class="header-anchor" href="#recommended-practices" aria-label="Permalink to &quot;Recommended Practices&quot;">​</a></h2><ul><li>Do not disable CSRF protection.</li><li>Do not disable your content security policy. Use Brut&#39;s built-in and design your app to not require inline styles or scripts. It&#39;s much easier to not do this in the first place than to try to unwind it later.</li><li>Do not ship your app if <code>bundle audit</code> finds vulnerabilities.</li></ul><h2 id="technical-notes" tabindex="-1">Technical Notes <a class="header-anchor" href="#technical-notes" aria-label="Permalink to &quot;Technical Notes&quot;">​</a></h2><div class="important custom-block github-alert"><p class="custom-block-title">IMPORTANT</p><p>Technical Notes are for deeper understanding and debugging. While we will try to keep them up-to-date with changes to Brut&#39;s internals, the source code is always more correct.</p></div><p><em>Last Updated June 13, 2025</em></p><h3 id="csrf-protection-1" tabindex="-1">CSRF Protection <a class="header-anchor" href="#csrf-protection-1" aria-label="Permalink to &quot;CSRF Protection&quot;">​</a></h3><p>CSRF protection is not required for <em>Brut-owned paths</em>, as defined by <a href="/api/Brut/FrontEnd/Middlewares/AnnotateBrutOwnedPaths.html" target="_self" rel="noopener" data-no-router><code>Brut::FrontEnd::Middlewares::AnnotateBrutOwnedPaths</code></a>. The reason for this is that these paths semantically should not be HTTP GETs, but are also not form submissions. They are currently used for locale detection and instrumentation, which we believe are OK to allow without CSRF protection.</p><p>This may change in the future.</p><h3 id="encrypted-sessions-1" tabindex="-1">Encrypted Sessions <a class="header-anchor" href="#encrypted-sessions-1" aria-label="Permalink to &quot;Encrypted Sessions&quot;">​</a></h3><p>Session cookies are set to expire after 1 year and use the value <code>Lax</code> for <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Guides/Cookies#controlling_third-party_cookies_with_samesite" target="_blank" rel="noreferrer"><code>SameSite</code></a>. &quot;Lax&quot; allows other sites to submit the Brut-powered site&#39;s cookies, but only if the user navigates to the site. They are not sent if another site submits an Ajax request. We feel this is the right tradeoff betweeen usability and security.</p><h3 id="content-security-policy-headers-and-tools-1" tabindex="-1">Content Security Policy headers and tools <a class="header-anchor" href="#content-security-policy-headers-and-tools-1" aria-label="Permalink to &quot;Content Security Policy headers and tools&quot;">​</a></h3><h3 id="bundle-audit-1" tabindex="-1"><code>bundle audit</code> <a class="header-anchor" href="#bundle-audit-1" aria-label="Permalink to &quot;`bundle audit`&quot;">​</a></h3>',37)]))}const m=t(i,[["render",n]]);export{p as __pageData,m as default};
+import{_ as t,c as o,o as a,ag as r}from"./chunks/framework.1L-BeKqY.js";const p=JSON.parse('{"title":"Security","description":"","frontmatter":{},"headers":[],"relativePath":"security.md","filePath":"security.md"}'),i={name:"security.md"};function s(n,e,c,l,d,u){return a(),o("div",null,e[0]||(e[0]=[r('<h1 id="security" tabindex="-1">Security <a class="header-anchor" href="#security" aria-label="Permalink to &quot;Security&quot;">​</a></h1><p>As a new framework, Brut has not been battle-tested against potential securitiy exploits. That said, Brut does configure several features to help manage security issues.</p><h2 id="overview" tabindex="-1">Overview <a class="header-anchor" href="#overview" aria-label="Permalink to &quot;Overview&quot;">​</a></h2><p>Web application security is a large topic. Brut provides a few features out of the box to manage security of your app:</p><ul><li>Encrypted sessions</li><li>Cross-Site Request Forgery (CSRF) protection</li><li>Content Security Policy headers and tools</li><li><code>bundle audit</code></li></ul><h3 id="encrypted-sessions" tabindex="-1">Encrypted Sessions <a class="header-anchor" href="#encrypted-sessions" aria-label="Permalink to &quot;Encrypted Sessions&quot;">​</a></h3><p>Brut uses the <code>Rack::Session::Cookie</code> middleware to manage cookies. They are encrypted with the value of the environment variable <code>SESSION_SECRET</code>. This prevents both the website visitor and other websites from examining the contents of the cookie.</p><p>This means that if Brut places data in there, it can rely on it being safe when fetched later.</p><p>Cookie behavior and configuration is currently not configurable.</p><h3 id="csrf-protection" tabindex="-1">CSRF Protection <a class="header-anchor" href="#csrf-protection" aria-label="Permalink to &quot;CSRF Protection&quot;">​</a></h3><p>A <a href="https://owasp.org/www-community/attacks/csrf" target="_blank" rel="noreferrer">cross-site request forgery</a> happens when a malicious site submits information from their site to a Brut-powered site, assuming it will allow and respect your credentials, potentially initiating an action on the Brut-powered site that you did not intend.</p><p>The common way to mitigate this is to require a CSRF token to be included with each form submission. This value is generated by the server and included int he user&#39;s secure session. If the form submission&#39;s CSRF token matches, the request is assumed to be valid.</p><p>Brut configures <a href="https://sinatrarb.com/rack-protection/" target="_blank" rel="noreferrer">Rack::Protection::AuthenticityToken</a> as a middleware. Its configuration requires that <em>all</em> form submissions include a valid CSRF token, with a few exceptions noted in the <a href="#technical-notes">Technical Notes</a> section below.</p><p>To include a valid CSRF token in your <a href="/forms.html">form</a>, use <a href="/api/Brut/FrontEnd/Components/FormTag.html" target="_self" rel="noopener" data-no-router><code>Brut::FrontEnd::Components::FormTag</code></a> to generate your <code>&lt;form&gt;</code>. That&#39;s it.</p><p>Brut&#39;s approach to Ajax requests is to model them as form submissions, so by creating a form using <code>FormTag</code> and using its <a href="https://developer.mozilla.org/en-US/docs/Web/API/FormData" target="_blank" rel="noreferrer"><code>FormData</code></a> to submit that form with e.g. <code>fetch</code>, the CSRF token will be supplied.</p><div class="note custom-block github-alert"><p class="custom-block-title">NOTE</p><p>AJax and CSRF is currently somewhat immature in Brut, so there may be areas where things don&#39;t work as you&#39;d expect.</p></div><h3 id="content-security-policy-headers-and-tools" tabindex="-1">Content Security Policy headers and tools <a class="header-anchor" href="#content-security-policy-headers-and-tools" aria-label="Permalink to &quot;Content Security Policy headers and tools&quot;">​</a></h3><p><a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Guides/CSP" target="_blank" rel="noreferrer">Content Security Policy (CSP)</a> is a way for a website to tell the browser what CSS and JavaScript is allowed to execute on the page. Most web frameworks default to a lax or no policy, which makes applying one later difficult.</p><p>Brut takes the opposite approach. By default, Brut configures <a href="/api/Brut/FrontEnd/RouteHooks/CSPNoInlineStylesOrScripts.html" target="_self" rel="noopener" data-no-router><code>Brut::FrontEnd::RouteHooks::CSPNoInlineStylesOrScripts</code></a> as an after route hook. This sets the content security poilcy header to disallow all inline stylings (the <code>style=</code> attribute) and all inline script tags (e.g. <code>onclick=</code>). In development, inline styles are allowed, since they are convienient when prototyping.</p><p>Brut also configures CSP reporting, which is sent into the <a href="/instrumentation.html">instrumentation</a> system.</p><p>You can control this behavior by changing the <code>csp_class</code> and/or <code>csp_reporting_class</code> using <code>Brut.container.override</code> in your <code>App</code>. You can either create your own route hook and use that, or set either to <code>nil</code> to disable CSP entirely.</p><h3 id="bundle-audit" tabindex="-1"><code>bundle audit</code> <a class="header-anchor" href="#bundle-audit" aria-label="Permalink to &quot;`bundle audit`&quot;">​</a></h3><p>The <code>bin/ci</code> script provided when you created your Burt app includes a call to <code>bundle exec bundle audit check --update</code>, which will audit your RubyGems for versions that have known vulnerabilities. If any are found, <code>bin/ci</code> exits nonzero, thus failing your build.</p><h2 id="testing" tabindex="-1">Testing <a class="header-anchor" href="#testing" aria-label="Permalink to &quot;Testing&quot;">​</a></h2><p>In general, you don&#39;t want to test any of this unless you&#39;ve set up something custom or complex. Testing security is done more effectively by a third party evaluating your app as a so-called &quot;black box&quot; or &quot;opaque box&quot; where its probed for issues without knowing how the app is implemented.</p><h2 id="recommended-practices" tabindex="-1">Recommended Practices <a class="header-anchor" href="#recommended-practices" aria-label="Permalink to &quot;Recommended Practices&quot;">​</a></h2><ul><li>Do not disable CSRF protection.</li><li>Do not disable your content security policy. Use Brut&#39;s built-in and design your app to not require inline styles or scripts. It&#39;s much easier to not do this in the first place than to try to unwind it later.</li><li>Do not ship your app if <code>bundle audit</code> finds vulnerabilities.</li></ul><h2 id="technical-notes" tabindex="-1">Technical Notes <a class="header-anchor" href="#technical-notes" aria-label="Permalink to &quot;Technical Notes&quot;">​</a></h2><div class="important custom-block github-alert"><p class="custom-block-title">IMPORTANT</p><p>Technical Notes are for deeper understanding and debugging. While we will try to keep them up-to-date with changes to Brut&#39;s internals, the source code is always more correct.</p></div><p><em>Last Updated June 13, 2025</em></p><h3 id="csrf-protection-1" tabindex="-1">CSRF Protection <a class="header-anchor" href="#csrf-protection-1" aria-label="Permalink to &quot;CSRF Protection&quot;">​</a></h3><p>CSRF protection is not required for <em>Brut-owned paths</em>, as defined by <a href="/api/Brut/FrontEnd/Middlewares/AnnotateBrutOwnedPaths.html" target="_self" rel="noopener" data-no-router><code>Brut::FrontEnd::Middlewares::AnnotateBrutOwnedPaths</code></a>. The reason for this is that these paths semantically should not be HTTP GETs, but are also not form submissions. They are currently used for locale detection and instrumentation, which we believe are OK to allow without CSRF protection.</p><p>This may change in the future.</p><h3 id="encrypted-sessions-1" tabindex="-1">Encrypted Sessions <a class="header-anchor" href="#encrypted-sessions-1" aria-label="Permalink to &quot;Encrypted Sessions&quot;">​</a></h3><p>Session cookies are set to expire after 1 year and use the value <code>Lax</code> for <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Guides/Cookies#controlling_third-party_cookies_with_samesite" target="_blank" rel="noreferrer"><code>SameSite</code></a>. &quot;Lax&quot; allows other sites to submit the Brut-powered site&#39;s cookies, but only if the user navigates to the site. They are not sent if another site submits an Ajax request. We feel this is the right tradeoff betweeen usability and security.</p>',35)]))}const m=t(i,[["render",s]]);export{p as __pageData,m as default};

data/docs/assets/{security.md.C668yXCi.lean.js → security.md.C0G_AZR-.lean.js}

@@ -1 +1 @@
-import{_ as t,c as o,o as a,ag as r}from"./chunks/framework.1L-BeKqY.js";const p=JSON.parse('{"title":"Security","description":"","frontmatter":{},"headers":[],"relativePath":"security.md","filePath":"security.md"}'),i={name:"security.md"};function n(s,e,c,l,d,u){return a(),o("div",null,e[0]||(e[0]=[r("",37)]))}const m=t(i,[["render",n]]);export{p as __pageData,m as default};
+import{_ as t,c as o,o as a,ag as r}from"./chunks/framework.1L-BeKqY.js";const p=JSON.parse('{"title":"Security","description":"","frontmatter":{},"headers":[],"relativePath":"security.md","filePath":"security.md"}'),i={name:"security.md"};function s(n,e,c,l,d,u){return a(),o("div",null,e[0]||(e[0]=[r("",35)]))}const m=t(i,[["render",s]]);export{p as __pageData,m as default};

data/docs/assets/space-time-continuum.md.xl44xDos.js

@@ -0,0 +1 @@
+import{_ as t,c as o,o as s,ag as i}from"./chunks/framework.1L-BeKqY.js";const l=JSON.parse('{"title":"Space/Time Continuum - Making Sense of Times and Time Zones","description":"","frontmatter":{},"headers":[],"relativePath":"space-time-continuum.md","filePath":"space-time-continuum.md"}'),a={name:"space-time-continuum.md"};function n(r,e,d,c,h,m){return s(),o("div",null,e[0]||(e[0]=[i('<h1 id="space-time-continuum-making-sense-of-times-and-time-zones" tabindex="-1">Space/Time Continuum - Making Sense of Times and Time Zones <a class="header-anchor" href="#space-time-continuum-making-sense-of-times-and-time-zones" aria-label="Permalink to &quot;Space/Time Continuum - Making Sense of Times and Time Zones&quot;">​</a></h1><p>Time zones are the worst. But they are fact of life. This means that answer a question like &quot;what is the date?&quot; or &quot;is it Monday?&quot; are not that easy to answer. Brut tries to help.</p><h2 id="timezones-outside-of-web-requests" tabindex="-1">Timezones Outside of Web Requests <a class="header-anchor" href="#timezones-outside-of-web-requests" aria-label="Permalink to &quot;Timezones Outside of Web Requests&quot;">​</a></h2><p>For back-end code, storing dates to the database, etc., Brut falls back to the normal Ruby app mechanisms for determining the &quot;current time zone&quot;, which is to say, it super-duper depends. The system, the database, and Ruby can all configure a time zone that is in effect when dates are parsed or stored.</p><p>The main way to deal with this is in how <a href="/database-schema.html">Brut manages your database schema</a>, which is to say that it defaults to using <code>timestamp with time zone</code> and encourages you to do the same.</p><p>What this data type means is if your system is set to UTC, stores a timestamp, then restarts with the time zone set to America/Los_Angeles, that timestamp will be read back without ambiguity. If you use <code>timestamp without time zone</code> (or SQL&#39;s standard <code>timestamp</code>), this will not be the case.</p><p>All this is to say, if you use <code>timestamp with time zone</code>, you should generally not have to worry about this. Just be careful when serializing these values.</p><h2 id="timezones-for-sessions" tabindex="-1">Timezones for Sessions <a class="header-anchor" href="#timezones-for-sessions" aria-label="Permalink to &quot;Timezones for Sessions&quot;">​</a></h2><p>Depending on what your app does, you may need to show dates or times to the site visitor. And you&#39;ll probably want to show those in their time zone. Brut can help with this.</p><p>As mentioned in <a href="/flash-and-session.html">Flash and Session</a>, the session provides access to timezone information. Brut also provides a <code>Clock</code> class that represents the current date and time in the current session&#39;s time zone.</p><p>There are two ways to determine a visitor&#39;s time zone: you can ask them, or you can ask their browser.</p><h3 id="getting-timezone-from-the-browser" tabindex="-1">Getting Timezone from the Browser <a class="header-anchor" href="#getting-timezone-from-the-browser" aria-label="Permalink to &quot;Getting Timezone from the Browser&quot;">​</a></h3><p>The default <code>&lt;head&gt;</code> section of your app&#39;s <code>DefaultLayout</code> will include the Brut-provided custom element <a href="/brut-js/api/LocaleDetection.html" target="_self" rel="noopener" data-no-router><code style="white-space:nowrap;">&lt;brut-locale-detection&gt;</code></a>. This HTML custom element is configured to communicate the browser&#39;s locale and timezone back to Brut at the URL <code>/__brut/local_detection</code>, which is handled by <a href="/api/Brut/FrontEnd/Handlers/LocaleDetectionHandler.html" target="_self" rel="noopener" data-no-router><code>Brut::FrontEnd::Handlers::LocaleDetectionHandler</code></a>.</p><p>The custom element uses <code>Intl.DateTimeFormat().resolvedOptions().timeZone</code> to determine the browser&#39;s timezone and sends this back to Brut. Whatever this value is, it will be set in the session as <code>timezone_from_browser</code>. When you ask the session for the <code>timezone_from_browser</code>, Brut will attempt to locate a <code>TZInfo::Timezone</code> with that name. If it finds one, that is returned. Otherwise, <code>nil</code> is returned.</p><p>This is only part of how Brut determines the session&#39;s time zone.</p><h3 id="getting-the-session-s-timezone" tabindex="-1">Getting the Session&#39;s Timezone <a class="header-anchor" href="#getting-the-session-s-timezone" aria-label="Permalink to &quot;Getting the Session&#39;s Timezone&quot;">​</a></h3><p>If you ask the session instead for <code>timezone</code>, and it has not been set explicitly, Brut will first check <code>timezone_from_browser</code>. If it&#39;s not <code>nil</code>, it&#39;s returned. If it <em>is</em> <code>nil</code>, the timezone whose name is in <code>ENV[&#39;TZ&#39;]</code> is returned, unless that is missing or invalid, in which case UTC is returned.</p><p>If you have a way to ask the user what their timezone is, you can set it via <code>session.timezone=</code>. If you have done this, <em>that</em> value is returned instead of the above logic.</p><p>Note that in all cases, the timezone that is serialized into the session is the name. This means it&#39;s technically possible for the name to be valid when stored and invalid when read, if you have updated the <code>tzinfo</code> gem and something changed (this should be exceedingly rare).</p><p>Therefore, it&#39;s recommended that if you have asked the visitor their preferred time zone, you store that somewhere in the database, so you can detect when the value from the session has drifted.</p><h3 id="using-the-timezone" tabindex="-1">Using the Timezone <a class="header-anchor" href="#using-the-timezone" aria-label="Permalink to &quot;Using the Timezone&quot;">​</a></h3><p>With a <code>TZInfo::Timezone</code> object, you can certainly create a Ruby <code>Time</code> object via <code>timezone.to_local(Time.new)</code>. However, you don&#39;t have to do this. By <a href="/keyword-injection.html">keyword injecting</a><code>clock:</code>, you will get an instance of <code>Clock</code>, primed with the value of <code>session.timezone</code> as its timezone.</p><p>The <code>Clock</code> responds to <code>now</code> and <code>today</code>, and will return the current timestamp and current date, respectively, in the visitor&#39;s time zone. This means that if your view code does something like <code>l(clock.now, format: :date)</code>, it will show the current time in the visitor&#39;s time zone.</p><p>This, coupled with the use of <code>timestamp with time zone</code>, means these values can be safely sent to the back-end to be stored in the database, and conversion is not necessary.</p><h2 id="testing" tabindex="-1">Testing <a class="header-anchor" href="#testing" aria-label="Permalink to &quot;Testing&quot;">​</a></h2><p>If your app makes heavy use of timezone-based timestamps or dates, you are encouraged to test this logic. <a href="/api/Brut/SpecSupport/ClockSupport.html" target="_self" rel="noopener" data-no-router><code>Brut::SpecSupport::ClockSupport</code></a> (included by default in page, component, and handler tests) provides helper methods to manipulate and use <code>Clock</code> instances. You should not need to mock time or use something like Timecop.</p><p>If your tests just need a clock, or a clock at a time, regardless of time zone, you can use <code>real_clock</code> or <code>clock_at(now:)</code> to pass into your pages, components, and handlers. These will be set at UTC.</p><p>If your tests require a particular timezone, you may use <code>clock_in_timezone_at(timezone_name:, now:)</code>. The timezone name is from <code>tzinfo</code>&#39;s database. <code>clock_in_timezone_at</code> will raise an error if given an invalid timezone. <code>now:</code> is a string that will be parsed as a <code>Time</code>.</p><p>If you are testing something that is sensitive to time, but you do not have access to the clock, <a href="/api/Brut/SpecSupport/SessionSupport.html" target="_self" rel="noopener" data-no-router><code>Brut::SpecSupport::SessionSupport</code></a> provides <code>empty_session</code>, which returns a session object on which you can call <code>timezone=</code>. Beyond this, you may need to provide hooks for setting the time, for example via a query string parameter.</p>',29)]))}const p=t(a,[["render",n]]);export{l as __pageData,p as default};

data/docs/assets/{space-time-continuum.md.KPUIKysQ.lean.js → space-time-continuum.md.xl44xDos.lean.js}

@@ -1 +1 @@
-import{_ as t,c as o,o as s,ag as i}from"./chunks/framework.1L-BeKqY.js";const l=JSON.parse('{"title":"Space/Time Continuum - Making Sense of Times and Time Zones","description":"","frontmatter":{},"headers":[],"relativePath":"space-time-continuum.md","filePath":"space-time-continuum.md"}'),a={name:"space-time-continuum.md"};function n(r,e,d,c,h,m){return s(),o("div",null,e[0]||(e[0]=[i("",28)]))}const p=t(a,[["render",n]]);export{l as __pageData,p as default};
+import{_ as t,c as o,o as s,ag as i}from"./chunks/framework.1L-BeKqY.js";const l=JSON.parse('{"title":"Space/Time Continuum - Making Sense of Times and Time Zones","description":"","frontmatter":{},"headers":[],"relativePath":"space-time-continuum.md","filePath":"space-time-continuum.md"}'),a={name:"space-time-continuum.md"};function n(r,e,d,c,h,m){return s(),o("div",null,e[0]||(e[0]=[i("",29)]))}const p=t(a,[["render",n]]);export{l as __pageData,p as default};