brut 0.0.28 → 0.1.0

data/docs/assets/pages.md.BE3kfOc5.js

@@ -1,122 +0,0 @@
-import{_ as e,c as i,o as a,ag as t}from"./chunks/framework.1L-BeKqY.js";const c=JSON.parse('{"title":"Pages","description":"","frontmatter":{},"headers":[],"relativePath":"pages.md","filePath":"pages.md"}'),n={name:"pages.md"};function l(h,s,p,o,r,d){return a(),i("div",null,s[0]||(s[0]=[t(`<h1 id="pages" tabindex="-1">Pages <a class="header-anchor" href="#pages" aria-label="Permalink to &quot;Pages&quot;">​</a></h1><p>The core abstraction of Brut is the core concept of the web: the web page.</p><p>A web page is fetched by the browser using an HTTP <code>GET</code> request to a URL. When that happens, Brut instantiates an object of a <em>page class</em> and uses its <code>page_template</code> method to generate its HTML (using calls to Phlex&#39;s API).</p><h2 id="overview" tabindex="-1">Overview <a class="header-anchor" href="#overview" aria-label="Permalink to &quot;Overview&quot;">​</a></h2><p>You can create everything you need for a page by using <code>bin/scaffold</code>:</p><div class="language-shell vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">shell</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:#24292E;--shiki-dark:#E1E4E8;"> bin/scaffold page /new-widgets</span></span></code></pre></div><p>You can use <code>--dry-run</code> to see what it will do:</p><div class="language-shell vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">shell</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:#24292E;--shiki-dark:#E1E4E8;"> bin/scaffold --dry-run /new-widgets</span></span>
-<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">bin/scaffold</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> --dry-run</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> page</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> /new-widgets</span></span>
-<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">[ bin/scaffold ] app/src/app.rb</span></span>
-<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">[ bin/scaffold ] will contain:</span></span>
-<span class="line"></span>
-<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">page</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &quot;/new-widgets&quot;</span></span>
-<span class="line"></span>
-<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">[ bin/scaffold ] app/src/front_end/pages/new_widgets_page.rb</span></span>
-<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">[ bin/scaffold ] will contain:</span></span>
-<span class="line"></span>
-<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">class</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> NewWidgetsPage</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> &lt;</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> AppPage</span></span>
-<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">  def</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> initialize</span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> # add needed arguments here</span></span>
-<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">  end</span></span>
-<span class="line"></span>
-<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">  def</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> page_template</span></span>
-<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">    h1</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> {</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &quot;Your page is ready&quot;</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> }</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>
-<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">[ bin/scaffold ] specs/front_end/pages/new_widgets_page.spec.rb</span></span>
-<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">[ bin/scaffold ] will contain:</span></span>
-<span class="line"></span>
-<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">require</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &quot;spec_helper&quot;</span></span>
-<span class="line"></span>
-<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">RSpec.describe</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> NewWidgetsPage</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> do</span></span>
-<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">  it</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &quot;should have tests&quot;</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> do</span></span>
-<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">    expect(true</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">).to eq(</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">false</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>
-<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">[ bin/scaffold ] app/config/i18n/en/2_app.rb</span></span>
-<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">[ bin/scaffold ] will contain:</span></span>
-<span class="line"></span>
-<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">       &quot;NewWidgetsPage&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">:</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> {</span></span>
-<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">         title:</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &quot;New widgets page&quot;,</span></span>
-<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">       },</span></span>
-<span class="line"></span>
-<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">[ bin/scaffold ] Page source is in        app/src/front_end/pages/new_widgets_page.rb</span></span>
-<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">[ bin/scaffold ] Page HTML template is in app/src/front_end/pages/new_widgets_page.html.erb</span></span>
-<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">[ bin/scaffold ] Page test is in          specs/front_end/pages/new_widgets_page.spec.rb</span></span>
-<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">[ bin/scaffold ] Added title to           app/config/i18n/en/2_app.rb</span></span>
-<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">[ bin/scaffold ] Added route to           app/src/app.rb</span></span></code></pre></div><p>You can, of course, edit <code>app.rb</code> and create the classes yourself.</p><div class="warning custom-block github-alert"><p class="custom-block-title">WARNING</p><p>Adding a <code>page</code> route without the corresponding class may not always work, since Brut may try to load the class. Brut does its best to avoid problems, but you should create your route and classes all at once</p></div><div class="important custom-block github-alert"><p class="custom-block-title">IMPORTANT</p><p>Brut cannot currently reload new routes, so you must restart your dev server when you modify or add routes.</p></div><h3 id="creating-a-page" tabindex="-1">Creating a Page <a class="header-anchor" href="#creating-a-page" aria-label="Permalink to &quot;Creating a Page&quot;">​</a></h3><p>Page classes are expected to be in <code>app/src/front_end/pages</code>, named conventionally the way Zeitwerk would expect. For example, <code>Admin::WidgetsByIdPage</code> would be expected in <code>app/src/front_end/pages/admin/widgets_by_id_page.rb</code>.</p><p>A page class must be a subclass of <a href="/api/Brut/FrontEnd/Page.html" target="_self" rel="noopener" data-no-router><code>Brut::FrontEnd::Page</code></a>, however in practice it will be a subclass of <code>AppPage</code> in your app, which is a subclass of <a href="/api/Brut/FrontEnd/Page.html" target="_self" rel="noopener" data-no-router><code>Brut::FrontEnd::Page</code></a>. All Brut components have an app-specific base class to allow sharing of logic, if needed.</p><p>Brut will create the instance of the page class, passing in the keyword arguments the initializer specifies (see <a href="/keyword-injection.html">Keyword Injection</a>). In particular, any placeholders in the route will be passed-in to the initializer. This is why those placeholders must be valid Ruby keyword argument names.</p><p>For example, <code>Admin::WidgetsByIdPage</code> and its template might look like so:</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;"># pages/admin/widgets_by_id_page.rb</span></span>
-<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">class</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> Admin</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">::</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">WidgetsByIdPage</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> &lt;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> AppPage</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;">id:</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span>
-<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    @widget </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> DB</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">::</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">Widget</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">find!</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">id:</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>
-<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;"> :widget</span></span>
-<span class="line"></span>
-<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">  def</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> page_template</span></span>
-<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    h1 { widget.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">name</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
-<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    h2 { widget.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">status</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></code></pre></div><p>Note that <code>Admin::WidgetsByIdPage</code> is a normal Ruby class, so you could implement <code>#widget</code> as a method, and lazy-load the widget:</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;">class</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> Admin</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">::</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">WidgetsByIdPage</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> &lt;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> AppPage</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;">id:</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span>
-<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    @widget_id </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> id</span></span>
-<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">  end</span></span>
-<span class="line"></span>
-<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">  def</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> page_template</span></span>
-<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    h1 { widget.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">name</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
-<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    h2 { widget.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">status</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>
-<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">private</span></span>
-<span class="line"></span>
-<span class="line highlighted"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">  def</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> widget</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> DB:</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">Widget</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">find!</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">id:</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> @widget_id)</span></span>
-<span class="line"></span>
-<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">end</span></span></code></pre></div><p>A page&#39;s initializer can also accept other parameters, provided by Brut.</p><h3 id="arguments-available-to-initializer" tabindex="-1">Arguments Available to Initializer <a class="header-anchor" href="#arguments-available-to-initializer" aria-label="Permalink to &quot;Arguments Available to Initializer&quot;">​</a></h3><p>Brut&#39;s <a href="/keyword-injection.html">keyword injection</a> is used to create the instance of your page. You can have Brut inject what you need by specifying keyword arguments.</p><table tabindex="0"><thead><tr><th>Value</th><th>Type</th><th>Description</th></tr></thead><tbody><tr><td><code>session:</code></td><td><a href="/api/Brut/FrontEnd/Session.html" target="_self" rel="noopener" data-no-router><code>Brut::FrontEnd::Session</code></a> (or your app&#39;s subclass)</td><td>The current session, even if it&#39;s empty. See <a href="/flash-and-session.html">Flash and Session</a></td></tr><tr><td><code>flash:</code></td><td><a href="/api/Brut/FrontEnd/Flash.html" target="_self" rel="noopener" data-no-router><code>Brut::FrontEnd::Flash</code></a> (or your app&#39;s subclass)</td><td>The current flash, even if it&#39;s empty. See <a href="/flash-and-session.html">Flash and Session</a></td></tr><tr><td><code>xhr:</code></td><td><code>true</code> or <code>false</code></td><td>true if this was an Ajax request</td></tr><tr><td><code>csrf_token:</code></td><td><code>String</code></td><td>The current CSRF token.</td></tr><tr><td><code>clock:</code></td><td><code>Clock</code></td><td>Used when you need to access the current date and time, potentially accounting for time zones. See <a href="/space-time-continuum.html">Space/Time Continuum</a></td></tr><tr><td><code>http_*</code></td><td><code>String</code> or <code>nil</code></td><td>Any parameter that starts with <code>http_</code> is assumed to be for an HTTP header. For example, <code>http_accept_language</code> would be given the value for the &quot;Accept-Language&quot; header. See <a href="/keyword-injection.html#http-headers">HTTP Headers</a></td></tr><tr><td><code>env:</code></td><td><code>Hash</code></td><td>The Rack env. You are discouraged from using this directly in your pages, but if you need it, it&#39;s available.</td></tr><tr><td>Placeholders</td><td><code>String</code></td><td>Any placeholder value from the route definition</td></tr><tr><td>Any query string paramter</td><td><code>String</code></td><td>the value given is always a string.</td></tr><tr><td>Any object placed into the request context</td><td><code>Object</code></td><td>Values you place into the request context. See below for an example.</td></tr></tbody></table><p>Thus, if <code>Admin::WidgetsByIdPage</code> responds to the <code>detail_level</code> query string parameter, needs access to the current time, wants to check a value from the session, and responded to the completely made-up header &quot;X-Be-Nice&quot;, the initializer would look like so:</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;"> initialize</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">id:</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
-<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">               session:</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
-<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">               clock:</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
-<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">               http_x_be_nice:</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
-<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">               detail_level:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> nil</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span></code></pre></div><div class="caution custom-block github-alert"><p class="custom-block-title">CAUTION</p><p>Keyword arguments for query string parameters <strong>must</strong> have default values or Brut will be unable to instantiate your page class when they are omitted.</p></div><div class="note custom-block github-alert"><p class="custom-block-title">NOTE</p><p>Omitting a default for an HTTP header is OK, but you should know what the behavior is. See <a href="/keyword-injection.html#http-headers">the HTTP Headers section</a> for details.</p></div><h3 id="hooks" tabindex="-1">Hooks <a class="header-anchor" href="#hooks" aria-label="Permalink to &quot;Hooks&quot;">​</a></h3><p>Occasionally, you want to prevent a page from rendering after the visitor has been routed to it. A common reason for this could be a lack of authorization by that visitor to view the page.</p><p><code>before_generate</code> achieves this. If your page class implements it, it will be called after the page is initialized, but before the template creationg process starts. Depending on what <code>before_generate</code> returns, the visitor may be redirected, an error could be sent, or HTML generation may proceed as normal.</p><p>The return value of <code>before_generate</code> determines what will happen:</p><ul><li><code>URI</code> - the visitor will be redirected to the given URI. Instead of creating a <code>URI</code>, you may use the method <code>redirect_to</code>, which accepts a page and its parameters.</li><li><a href="/api/Brut/FrontEnd/HttpStatus.html" target="_self" rel="noopener" data-no-router><code>Brut::FrontEnd::HttpStatus</code></a> - the page will not be rendered and this status will be returned. You may use <code>http_status</code> to create an <code>HttpStatus</code> from a number.</li><li><a href="/api/Brut/FrontEnd/GenericResponse.html" target="_self" rel="noopener" data-no-router><code>Brut::FrontEnd::GenericResponse</code></a> - a typed wrapper around the standard Rack response.</li><li>Anything else - page rendering will proceed as usual.</li></ul><h2 id="testing" tabindex="-1">Testing <a class="header-anchor" href="#testing" aria-label="Permalink to &quot;Testing&quot;">​</a></h2><p>See <a href="/unit-tests.html">Unit Testing</a> for some basic assumptions and configuration available for all Brut unit tests.</p><p>Since pages are Plain Ole Ruby Objects, you could test them using conventional means. However, since the ultimate behavior of a page is to produce HTML based on its template, it&#39;s recommended that your page tests generate HTML and you make assertions about the page&#39;s behavior by examining that HTML.</p><p>Brut provides convenience methods for this, based on Nokogiri. With them, you should be able to access elements of your page using the same sorts of CSS selectors you&#39;d use with <code>document.querySelector</code> to debug your app in a browser.</p><h3 id="generate-and-parse-parses-the-generated-html" tabindex="-1"><code>generate_and_parse</code> Parses the Generated HTML <a class="header-anchor" href="#generate-and-parse-parses-the-generated-html" aria-label="Permalink to &quot;\`generate_and_parse\` Parses the Generated HTML&quot;">​</a></h3><p>Brut uses RSpec, so when a page test is detected, Brut will include <a href="/api/Brut/SpecSupport/ComponentSupport.html" target="_self" rel="noopener" data-no-router><code>Brut::SpecSupport::ComponentSupport</code></a>, which provides useful methods and includes other modules you&#39;ll need to make testing more straightforward.</p><p>The main method you&#39;ll use is <code>generate_and_parse</code>, which accepts an instance of your page and returns a <a href="/api/Brut/SpecSupport/EnhancedNode.html" target="_self" rel="noopener" data-no-router><code>Brut::SpecSupport::EnhancedNode</code></a>, which is a delegate to a Nokogiri node.</p><p>Below, we use the method <code>e!</code>, which is provided by <code>EnhancedNode</code>. This works just like Nokogiri&#39;s <code>css</code>, except that requires exactly one element to match the selector. If not, the test fails. This allows a more compact test when you know there should only be one element matching the selector you&#39;ve provided.</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:#005CC5;--shiki-dark:#79B8FF;">RSpec</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">describe</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> CompanyByCompanyId</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">::</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">LocationsByLocationIdPage</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> do</span></span>
-<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  describe </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;render&quot;</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> do</span></span>
-<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    it </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;shows the company name and location address&quot;</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> do</span></span>
-<span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">      company</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  = </span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">create</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">:company</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)  </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"># You must implement</span></span>
-<span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">      location</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> = </span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">create</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">:location</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"># You must implement</span></span>
-<span class="line"></span>
-<span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">      page</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> = described_class.</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;">company_id:</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> company.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">id</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">to_s</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
-<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">                                 location_id:</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> location.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">id</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">to_s</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span>
-<span class="line"></span>
-<span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">      parsed_html</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> = </span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">generate_and_parse</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(page)</span></span>
-<span class="line"></span>
-<span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">      h1</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> = parsed_html.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">e!</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;h1&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span>
-<span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">      h2</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> = parsed_html.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">e!</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;h2&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span>
-<span class="line"></span>
-<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">      expect</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(h1.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">text</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">).</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">to</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> include</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(company.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">name</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span>
-<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">      expect</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(h2.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">text</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">).</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">to</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> include</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(location.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">address</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><code>e</code> (without a bang/<code>!</code>) is also provided, which will allow zero or one elements to match the selector (i.e. it only fails if there is more than one match). <code>e</code> and <code>e!</code> are key methods that allow the use of CSS selectors to be usable in your tests.</p><p>See <a href="/api/Brut/SpecSupport/ClockSupport.html" target="_self" rel="noopener" data-no-router><code>Brut::SpecSupport::ClockSupport</code></a>, <a href="/api/Brut/SpecSupport/FlashSupport.html" target="_self" rel="noopener" data-no-router><code>Brut::SpecSupport::FlashSupport</code></a>, and <a href="/api/Brut/SpecSupport/SessionSupport.html" target="_self" rel="noopener" data-no-router><code>Brut::SpecSupport::SessionSupport</code></a> for additional methods you can use to make it easier to work with clocks, flashes, and sessions, respectively.</p><h3 id="generate-result-tests-before-generate" tabindex="-1"><code>generate_result</code> Tests <code>before_generate</code> <a class="header-anchor" href="#generate-result-tests-before-generate" aria-label="Permalink to &quot;\`generate_result\` Tests \`before_generate\`&quot;">​</a></h3><p>If your page uses <code>before_generate</code>, when you call <code>generate_and_parse</code>, it will fail unless the page generated HTML. In those cases, you can use <code>generate_result</code>, which will return what <code>before_generate</code> returned, unless it returned <code>nil</code>, in which case it will return the unparsed HTML.</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:#005CC5;--shiki-dark:#79B8FF;">RSpec</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">describe</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> CompanyByCompanyId</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">::</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">LocationsByLocationIdPage</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> do</span></span>
-<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  describe </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;render&quot;</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> do</span></span>
-<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    it </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;redirects back to the home page for expired companies&quot;</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> do</span></span>
-<span class="line highlighted"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">      company</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  = </span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">create</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">:company</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">:expired</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)  </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"># You must implement</span></span>
-<span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">      location</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> = </span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">create</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">:location</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"># You must implement</span></span>
-<span class="line"></span>
-<span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">      page</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> = described_class.</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;">company_id:</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> company.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">id</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">to_s</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
-<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">                                 location_id:</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> location.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">id</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">to_s</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span>
-<span class="line"></span>
-<span class="line highlighted"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">      result</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> = </span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">generate_result</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(page)</span></span>
-<span class="line"></span>
-<span class="line highlighted"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">      expect</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(result).</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">to</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> have_redirected_to</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">HomePage</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span>
-<span class="line"></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><code>have_redirected_to</code> is a matcher provided by Brut. <code>have_returned_http_status</code> is also available to assert that <code>before_generate</code> returned an HTTP status. The reason to use these matchers and <code>generate_result</code> instead of calling <code>before_generate</code> directly is that you want to use the page in a test the way it&#39;s used in your app. You will also get higher-quality test failure messages.</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>You can build your pages however you like, but here are some tips that will make your app more sustainable and easier to work with.</p><h3 id="instance-variables-ivars-are-fine" tabindex="-1">Instance variables (ivars) are fine. <a class="header-anchor" href="#instance-variables-ivars-are-fine" aria-label="Permalink to &quot;Instance variables (ivars) are fine.&quot;">​</a></h3><p>Since <code>page_template</code> is a method of your class, it has access to your instance variables (ivars). Feel free to use them directly. Only create <code>attr_reader</code> implementations if a subclass should be expected to override something or you want something lazily evaluated. Make them private. Your page&#39;s API is just the method <code>page_template</code>.</p><h3 id="don-t-set-ivars-in-before-generate" tabindex="-1">Don&#39;t set ivars in <code>before_generate</code> <a class="header-anchor" href="#don-t-set-ivars-in-before-generate" aria-label="Permalink to &quot;Don&#39;t set ivars in \`before_generate\`&quot;">​</a></h3><p>It&#39;s Ruby and you can do whatever you want, but your page class will be easier to understand and test if you set up necessary state in your initializer. Memoization is fine, but don&#39;t have your <code>before_generate</code> set up additional state if you can avoid it. As we&#39;ll see below, you won&#39;t need to use <code>before_generate</code> as a failsafe check on authorization.</p><h3 id="leverage-keyword-injection" tabindex="-1">Leverage Keyword Injection <a class="header-anchor" href="#leverage-keyword-injection" aria-label="Permalink to &quot;Leverage Keyword Injection&quot;">​</a></h3><p>The list of available data for injection above will always be available to your page, with the exception of query string parameters. The real power comes when you learn how to <a href="/keyword-injection.html#injecting-custom-data">inject your own data</a> into the request context.</p><p>Let&#39;s take a common example of a page that require that a visitor be logged in. While your app will have logic to avoid routing a logged-out visitor to any of those pages, it may seem like a good practice to add a failsafe check inside the logic of the page requiring login. This is very common in Rails and might look like so:</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;">class</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> WidgetsController</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> &lt;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> ApplicationController</span></span>
-<span class="line highlighted"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  before_action </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">:require_login!</span></span>
-<span class="line"></span>
-<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">  # ...</span></span>
-<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">end</span></span></code></pre></div><p><code>before_action</code> is the failsafe - in case someone hacks a URL to find this page, or there is a bug in your app where unauthorized visitors are sent to this page, the <code>before_action</code> prevents the page from working.</p><p>In Brut, you could mimic this behavior using <code>before_generate</code>, however this isn&#39;t necessary. Instead, you can take advantage of keyword injection.</p><p>Consider this implementation of <code>WidgetsByIdPage</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;">class</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> WidgetsByIdPage</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> &lt;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> AppPage</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;">id:</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">current_user:</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span>
-<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">    # ...</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><code>id:</code> is injected because it is a route placeholder. <code>current_user:</code> however, is completely custom to our app. We can arrange to have it injected. We&#39;ll create a <a href="/hooks.html">Route Hook</a> to do this.</p><div class="caution custom-block github-alert"><p class="custom-block-title">CAUTION</p><p>This hook is not production-ready. It lacks certain error-handling code and makes an assumption about how the session is managed. It&#39;s for demonstration only. The <a href="/hooks.html">route hooks</a> section has a more appropriate example.</p></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:#D73A49;--shiki-dark:#F97583;">class</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> RequireAuthBeforeHook</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> &lt;</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;">RouteHook</span></span>
-<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">  def</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> before</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">request_context:</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">session:</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span>
-<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">    if</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> session.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">current_user_id</span></span>
-<span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">      user</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> = </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">DB</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">::</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">User</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">find</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">id:</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> session.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">current_user_id</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span>
-<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">      if</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> user</span></span>
-<span class="line highlighted"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        request_context[</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">:current_user</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">] </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> user</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>
-<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">end</span></span></code></pre></div><p>Before any route is handled, this before hook is run and passed the <a href="/api/Brut/FrontEnd/RequestContext.html" target="_self" rel="noopener" data-no-router><code>Brut::FrontEnd::RequestContext</code></a>. This is where all the injectible values live. <code>request_context[:current_user] = user</code> makes <code>user</code> available to be injected into a page or handler.</p><p>What this means is that when a visitor is not logged in, there will be no injectible value for <code>:current_user</code>. Brut will not be able to instantiate <code>WidgetsByIdPage</code>, and an error is generated. It is literally impossible to route a logged-out visitor to that page.</p><p>In practice, this means that any page that requires a logged-in visitor will specify the <code>current_user:</code> keyword argument, and <strong>not provide a default value</strong>. You are still required to make sure no one routes a logged-out visitor to a page requiring authentication, but now you don&#39;t have to remember to add logic to each page that requires login—you bake it into the page class&#39; type.</p><h3 id="in-tests-it-s-fine-to-locate-elements-via-css-selectors" tabindex="-1">In Tests, It&#39;s Fine to Locate Elements Via CSS Selectors <a class="header-anchor" href="#in-tests-it-s-fine-to-locate-elements-via-css-selectors" aria-label="Permalink to &quot;In Tests, It&#39;s Fine to Locate Elements Via CSS Selectors&quot;">​</a></h3><p>Your page&#39;s job is to produce HTML. To check if it&#39;s doing that, it makes sense to manipulate that HTML using standard, battle-tested techniques like CSS selectors. This creates consonance between your in-browser debugging and your test suite.</p><p>It also makes it much more obvious what&#39;s wrong if something is not where you expect it to be.</p><h3 id="that-said-avoid-test-specific-attributes-or-classes" tabindex="-1">That Said, Avoid Test-Specific Attributes or Classes <a class="header-anchor" href="#that-said-avoid-test-specific-attributes-or-classes" aria-label="Permalink to &quot;That Said, Avoid Test-Specific Attributes or Classes&quot;">​</a></h3><p>When you have a lot of <code>&lt;div&gt;</code> elements, it can be tempting to use attributes like <code>data-testid</code> on the elements you want to find in your tests. You can often avoid this if you use semantic markup and proper ARIA roles. For example, a Flash message is likely something you&#39;d put in a <code>role=&quot;status&quot;</code> or <code>role=&quot;alert&quot;</code>, so you don&#39;t need <code>data-flash</code> or <code>class=&quot;flash&quot;</code> in order to find it in a test.</p><p>Custom Elements can also be helpful here, as that may be how you choose to manage your client-side behavior.</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 May 4, 2025</em></p><h3 id="page-internal-api" tabindex="-1">Page Internal API <a class="header-anchor" href="#page-internal-api" aria-label="Permalink to &quot;Page Internal API&quot;">​</a></h3><p>A Page&#39;s core API is the method <code>handle!</code>, which can return an HTML-safe string, <code>URI</code>, or Rack response. Developers should avoid overriding this method, as it also handles the logic related to calling <code>before_generate</code> as well as the logic required to make layouts work.</p><p>This is why we recommend using <code>Brut::SpecSupport::ComponentSupport#generate_and_parse</code> or <code>Brut::SpecSupport::ComponentSupport#generate_result</code> in a tests. <em>They</em> call <code>handle!</code>, thus ensuring your <code>before_generate</code> method will be called and that your page class will behave in a test the way it would in production.</p><h3 id="layouts" tabindex="-1">Layouts <a class="header-anchor" href="#layouts" aria-label="Permalink to &quot;Layouts&quot;">​</a></h3><p>Pages do not have to have a layout. You can override Phlex&#39;s <code>view_template</code> and produce HTML that will not be wrapped in any Layout. It may be a better idea to create a <code>BlankLayout</code> class to avoid this, but it&#39;s up to you.</p><h3 id="helpers-in-templates" tabindex="-1">Helpers in Templates <a class="header-anchor" href="#helpers-in-templates" aria-label="Permalink to &quot;Helpers in Templates&quot;">​</a></h3><p><a href="/api/Brut/FrontEnd/Page.html" target="_self" rel="noopener" data-no-router><code>Brut::FrontEnd::Page</code></a> is a subclass of <a href="/api/Brut/FrontEnd/Component.html" target="_self" rel="noopener" data-no-router><code>Brut::FrontEnd::Component</code></a>, so all your pages will have access to the helpers included there. This is how, for example, <code>t</code> can be called to perform translations, or <code>time_tag</code> can be used to create a <code>&lt;time&gt;</code> HTML element.</p><p>If you wish to add helpers to be used in more than one page, you can either add the method to a common base class like <code>AppPage</code>, or create a module and <code>include</code> it.</p><h3 id="so-you-don-t-like-phlex" tabindex="-1">So You Don&#39;t Like Phlex? <a class="header-anchor" href="#so-you-don-t-like-phlex" aria-label="Permalink to &quot;So You Don&#39;t Like Phlex?&quot;">​</a></h3><p>Brut did initially use ERB, but the initial Brut-powered apps ended up having an all-too-common mess of HTML, Ruby, and angle brackets. It really sucked. Phlex seems pretty solid and is a very lightweight abstraction over HTML. It keeps everything in Ruby, but still maintains consonance to what you see in your browser.</p><p>Support for ERB, Slim, or HAML, is not planned ever.</p>`,87)]))}const g=e(n,[["render",l]]);export{c as __pageData,g as default};

data/docs/assets/pages.md.BE3kfOc5.lean.js

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

data/docs/assets/recipes_authentication.md.CAsXf7hk.js

@@ -1 +0,0 @@
-import{_ as e,c as t,o as i,ag as n}from"./chunks/framework.1L-BeKqY.js";const u=JSON.parse('{"title":"Authentication Example","description":"","frontmatter":{},"headers":[],"relativePath":"recipes/authentication.md","filePath":"recipes/authentication.md"}'),o={name:"recipes/authentication.md"};function s(l,a,c,r,p,d){return i(),t("div",null,a[0]||(a[0]=[n('<h1 id="authentication-example" tabindex="-1">Authentication Example <a class="header-anchor" href="#authentication-example" aria-label="Permalink to &quot;Authentication Example&quot;">​</a></h1><p>It&#39;s impossible to account for all types of authentication you may want to use, but this recipe will demonstrate all the moving parts:</p><ul><li>How to require authentication for some pages</li><li>How to design pages that require authentication</li><li>How to manage the signed-in user in code</li></ul><h2 id="feature-description" tabindex="-1">Feature Description <a class="header-anchor" href="#feature-description" aria-label="Permalink to &quot;Feature Description&quot;">​</a></h2><ul><li>Visitors can sign up for an account with an email and password</li><li>Visitors can log in with their email and password</li><li>Visitors cannot access the home page without logging in</li><li>Visitors can access the about page without logging in</li></ul><h2 id="recipe" tabindex="-1">Recipe <a class="header-anchor" href="#recipe" aria-label="Permalink to &quot;Recipe&quot;">​</a></h2><p>First, we&#39;ll make a database table called <code>accounts</code> that will have an email field and a password hash field.</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/db new-migration accounts</span></span></code></pre></div><p>This will create a file in <code>app/src/back_end/data_models/migrations</code></p>',9)]))}const m=e(o,[["render",s]]);export{u as __pageData,m as default};

data/docs/assets/recipes_authentication.md.CAsXf7hk.lean.js

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

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

@@ -1,29 +0,0 @@
-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(`<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. It&#39;s not desgined to be flexible—it&#39;s designed to make the most common cases you will need as straigthforward as possible.</p><h2 id="overview" tabindex="-1">Overview <a class="header-anchor" href="#overview" aria-label="Permalink to &quot;Overview&quot;">​</a></h2><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 path part 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>. The route is given as a parameter to a method that indicates the purpose of the route (e.g. <code>page</code>), and these two factors determine the name of the class that will handle requests to that route.</p><p>Specifically:</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>The segements of the pathname may be static or placeholders. Placeholders must be a valid Ruby keyword argument prepended with a colon.</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="specifying-routes" tabindex="-1">Specifying Routes <a class="header-anchor" href="#specifying-routes" aria-label="Permalink to &quot;Specifying Routes&quot;">​</a></h3><p>As mentioned above, routes are passed to methods that determine their purpose. There are currently four types of routes, and thus four possible methods you would use to configure them:</p><table tabindex="0"><thead><tr><th>Method</th><th>Purpose</th><th>HTTP Method</th><th>More Info</th></tr></thead><tbody><tr><td><code>page</code></td><td>Specifies a web page at that route</td><td><code>GET</code></td><td><a href="/pages.html">Pages</a></td></tr><tr><td><code>form</code></td><td>Indicates a form will exist and post its form data to this route</td><td><code>POST</code></td><td><a href="/pages.html">Forms</a></td></tr><tr><td><code>action</code></td><td>Indicates a form with no form data will exist and post to this route</td><td><code>POST</code></td><td><a href="/handlers.html">Handlers</a></td></tr><tr><td><code>path</code></td><td>This route will respond to an arbitrary HTTP method, which must be specified as an additional parameter</td><td>Any</td><td><a href="/handlers.html">Handlers</a></td></tr></tbody></table><p>Brut is designed around generating HTML. HTML provides the ability to navigate to new web pages via <code>GET</code>, or submit data to the server from a <code>&lt;form&gt;</code> via <code>POST</code>. That is why three of the four methods are focused on these use-cases.</p><p>To specify routes, you can call these methods inside the <code>routes do</code> block of your <code>App</code> class, located in <code>app/src/app.rb</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;">class</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> App</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> &lt;</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;">App</span></span>
-<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">  def</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> id</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">           =</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &quot;my-app&quot;</span></span>
-<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">  def</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> organization</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &quot;my-org&quot;</span></span>
-<span class="line"></span>
-<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  routes </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">do</span></span>
-<span class="line highlighted"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    page   </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;/widgets/:id&quot;</span></span>
-<span class="line highlighted"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    form   </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;/new_widget&quot;</span></span>
-<span class="line highlighted"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    action </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;/archive_widget/:id&quot;</span></span>
-<span class="line highlighted"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    path   </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;/widget_payment_received&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">method:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> :put</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><div class="note custom-block github-alert"><p class="custom-block-title">NOTE</p><p>Brut does not use an abstraction like resources to manage the routes of your web app. Few non-programmers know what a resource is, so the routing API is designed to match concepts a non-programmer can observe or identify, like URLs, forms, and pages.</p></div><h3 id="connecting-routes-to-code" tabindex="-1">Connecting Routes to Code <a class="header-anchor" href="#connecting-routes-to-code" aria-label="Permalink to &quot;Connecting Routes to Code&quot;">​</a></h3><p>Brut is convention-based, so the routes you specify, and the method you pass them to, determine the class that will handle the request. For <code>page</code> routes, Brut will locate a page class (see <a href="/pages.html">Pages</a>), which will be used to render the web page. All other routes will be managed by a handler (see <a href="/handlers.html">Handlers</a>), which are somewhat like a controller in Rails, but with only a single method.</p><p>The name of the class is 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>The examples in the previous section demonstrate how this works:</p><table tabindex="0"><thead><tr><th>Route</th><th>Class name</th></tr></thead><tbody><tr><td><code>page &quot;/widgets/:id&quot;</code></td><td><code>WidgetsByIdPage</code></td></tr><tr><td><code>form &quot;/new_widget&quot;</code></td><td><code>NewWidgetForm</code> and <code>NewWidgetHandler</code></td></tr><tr><td><code>action &quot;/archive_widget/:id&quot;</code></td><td><code>ArchiveWidgetByIdHandler</code></td></tr><tr><td><code>path &quot;/widget_payment_received&quot;, method: :put</code></td><td><code>WidgetPaymentReceivedHandler</code></td></tr></tbody></table><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="tip custom-block github-alert"><p class="custom-block-title">TIP</p><p>If you don&#39;t like long complicated names, deeply-nested namespaces, and long directory names, name your routes accordingly.</p></div><h3 id="creating-uris-from-routes" tabindex="-1">Creating URIs from Routes <a class="header-anchor" href="#creating-uris-from-routes" aria-label="Permalink to &quot;Creating URIs from 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;"> 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 <code>form_tag</code>, 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. Your end-to-end tests will ensure your links and form actions are working, and your page tests will ensure any routes they generate in HTML are valid.</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. For example, you cannot specify an optional placeholder. While this may change, Brut is designed to isolate logic to classes like pages, forms, hooks, middlewares, or handlers. Brut does not want logic to exist at the routing layer.</p><p>Beyond these technical limitations, here are some recommendations regarding routes.</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>You don&#39;t need your routes to be the names of models or database tables. 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 to manage, 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>You could certainly have a <code>/widgets</code> route, and then look at a query string parameter named <code>id</code> to know what widget to show. This is likely not what you want. If a route should always identify a specific thing in your back-end, it should have a placeholder where that thing&#39;s identifier goes.</p><p>If a route allows searching for things with multiple optional critiera, a query string is more appropriate. This is the HTTP spec, so if you follow its guidelines, you&#39;ll be fine.</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>`,58)]))}const g=a(o,[["render",n]]);export{u as __pageData,g as default};

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

@@ -1 +0,0 @@
-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.</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. 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> (which is typically <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-user-sessions" tabindex="-1">Timezones for User Sessions <a class="header-anchor" href="#timezones-for-user-sessions" aria-label="Permalink to &quot;Timezones for User 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. Here is how that works.</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 valid when stored and invalid when read, if you have updated the <code>tzinfo</code> gem and something changed.</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>',28)]))}const p=t(a,[["render",n]]);export{l as __pageData,p as default};

data/docs/assets/tutorial.md.BnoGjrdK.js

@@ -1 +0,0 @@
-import{_ as e,c as o,o as r,j as t,a as l}from"./chunks/framework.1L-BeKqY.js";const m=JSON.parse('{"title":"Tutorial","description":"","frontmatter":{},"headers":[],"relativePath":"tutorial.md","filePath":"tutorial.md"}'),i={name:"tutorial.md"};function s(n,a,u,c,d,p){return r(),o("div",null,a[0]||(a[0]=[t("h1",{id:"tutorial",tabindex:"-1"},[l("Tutorial "),t("a",{class:"header-anchor",href:"#tutorial","aria-label":'Permalink to "Tutorial"'},"​")],-1),t("p",null,"This section will walk you through creating a Brut app and should touch on most of the major features.",-1)]))}const f=e(i,[["render",s]]);export{m as __pageData,f as default};

data/docs/assets/tutorial.md.BnoGjrdK.lean.js

@@ -1 +0,0 @@
-import{_ as e,c as o,o as r,j as t,a as l}from"./chunks/framework.1L-BeKqY.js";const m=JSON.parse('{"title":"Tutorial","description":"","frontmatter":{},"headers":[],"relativePath":"tutorial.md","filePath":"tutorial.md"}'),i={name:"tutorial.md"};function s(n,a,u,c,d,p){return r(),o("div",null,a[0]||(a[0]=[t("h1",{id:"tutorial",tabindex:"-1"},[l("Tutorial "),t("a",{class:"header-anchor",href:"#tutorial","aria-label":'Permalink to "Tutorial"'},"​")],-1),t("p",null,"This section will walk you through creating a Brut app and should touch on most of the major features.",-1)]))}const f=e(i,[["render",s]]);export{m as __pageData,f as default};