brut 0.0.28 → 0.1.0

data/docs/assets/keyword-injection.md.95Zgh2eN.js

@@ -0,0 +1,21 @@
+import{_ as t,c as s,o as a,ag as i}from"./chunks/framework.1L-BeKqY.js";const u=JSON.parse('{"title":"Keyword Injection","description":"","frontmatter":{},"headers":[],"relativePath":"keyword-injection.md","filePath":"keyword-injection.md"}'),n={name:"keyword-injection.md"};function o(r,e,l,d,h,p){return a(),s("div",null,e[0]||(e[0]=[i(`<h1 id="keyword-injection" tabindex="-1">Keyword Injection <a class="header-anchor" href="#keyword-injection" aria-label="Permalink to &quot;Keyword Injection&quot;">​</a></h1><p>Brut is desiged around classes and objects, as compared to modules and DSLs. Almost everything you do when building your app is to create a class that has an initializer and implements one or more methods. But, these classes often need information from the request that Brut is managing.</p><p>In a basic Rack or Sinatra app, you would access this information via Rack&#39;s API, which is essentially a Hash of Whatever. It&#39;s error-prone and requires consulting documentation, source code, or runtime information to figure out what&#39;s stored where.</p><p>Brut can instead inject these values explicitly into the classes of yours it creates. It does this based on the names of keyword arguments declared by your class&#39; intializer.</p><h2 id="overview" tabindex="-1">Overview <a class="header-anchor" href="#overview" aria-label="Permalink to &quot;Overview&quot;">​</a></h2><p>A <a href="/pages.html">Page</a> may need the session, flash, HTTP headers, query string parameters, or placeholder values from the URI. These can all be provided by declaring them as keyword arguments to the page&#39;s initializer:</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;">clas </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:#6A737D;--shiki-dark:#6A737D;"># &quot;:id&quot; from /widgets/:id</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 style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"># AppSession instance for this request</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">                 flash:</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,             </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"># Flash for this request</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">                 http_user_agent:</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,   </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"># Value of User-Agent header</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">                 compact:</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)           </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"># query string param &quot;compact&quot;</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>
+<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">end</span></span></code></pre></div><p>Brut uses this technique in multiple places. It allows you to design classes whose dependencies are clear and explicit, but without having to dig around into hashes or manually construct higher-level objects.</p><h3 id="standard-injectible-information" tabindex="-1">Standard Injectible Information <a class="header-anchor" href="#standard-injectible-information" aria-label="Permalink to &quot;Standard Injectible Information&quot;">​</a></h3><p>In any request, the following information is available to be injected:</p><table tabindex="0"><thead><tr><th>Value</th><th>Always Present?</th><th>Description</th></tr></thead><tbody><tr><td><code>session:</code></td><td>✅ Yes</td><td>An instance of your app&#39;s <a href="/api/Brut/FrontEnd/Session.html" target="_self" rel="noopener" data-no-router><code>Brut::FrontEnd::Session</code></a> subclass for the current visitor&#39;s session.</td></tr><tr><td><code>flash:</code></td><td>✅ Yes</td><td>An instance of your app&#39;s <a href="/api/Brut/FrontEnd/Flash.html" target="_self" rel="noopener" data-no-router><code>Brut::FrontEnd::Flash</code></a> subclass.</td></tr><tr><td><code>xhr:</code></td><td>✅ Yes</td><td>true if this was an Ajax request.</td></tr><tr><td><code>body:</code></td><td>✅ Yes</td><td>the body submitted, if any.</td></tr><tr><td><code>csrf_token:</code></td><td>✅ Yes</td><td>The current CSRF token.</td></tr><tr><td><code>clock:</code></td><td>✅ Yes</td><td>A <code>Clock</code> to be used to access the current time in the visitor&#39;s time zone.</td></tr><tr><td><code>http_*</code></td><td>❌ No</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 the section on HTTP headers below.</td></tr><tr><td><code>rack_request_*:</code></td><td>❌ No</td><td>Any value from the <a href="https://rubydoc.info/gems/rack/3.1.16/Rack/Request" target="_blank" rel="noreferrer"><code>Rack::Request</code></a> or, more likely, from the <a href="https://rubydoc.info/gems/rack/3.1.16/Rack/Request/Helpers" target="_blank" rel="noreferrer"><code>Helpers</code></a> module.</td></tr><tr><td><code>env:</code></td><td>✅ Yes</td><td>The Rack env. This is discouraged, but available if you can&#39;t get what you want directly</td></tr><tr><td><code>form:</code></td><td>❌ No</td><td>The <a href="/forms.html">form</a> that was submitted, for <a href="/handlers.html">handlers</a> only</td></tr><tr><td>Any query string parameter</td><td>❌ No</td><td>For <a href="/pages.html">pages</a> only</td></tr><tr><td>Any route placeholder</td><td>✅ Yes</td><td>For <a href="/pages.html">pages</a> and <a href="/handlers.html">handlers</a></td></tr></tbody></table><h4 id="route-hooks" tabindex="-1">Route Hooks <a class="header-anchor" href="#route-hooks" aria-label="Permalink to &quot;Route Hooks&quot;">​</a></h4><p><a href="/hooks.html">Route hooks</a> are slightly different. They have access to only these values:</p><table tabindex="0"><thead><tr><th>Name</th><th>Always Present?</th><th>Description</th></tr></thead><tbody><tr><td><code>request_context:</code></td><td>❌ No</td><td>The current <a href="/api/Brut/FrontEnd/RequestContext.html" target="_self" rel="noopener" data-no-router><code>Brut::FrontEnd::RequestContext</code></a>, thought it may be <code>nil</code> if the hook runs before <a href="/api/Brut/FrontEnd/InlineSvgLocator.html" target="_self" rel="noopener" data-no-router><code>Brut::FrontEnd::InlineSvgLocator</code></a></td></tr><tr><td><code>session:</code></td><td>✅ Yes</td><td>An instance of your app&#39;s <a href="/api/Brut/FrontEnd/Session.html" target="_self" rel="noopener" data-no-router><code>Brut::FrontEnd::Session</code></a> subclass for the current visitor&#39;s session.</td></tr><tr><td><code>request:</code></td><td>✅ Yes</td><td>The Rack request</td></tr><tr><td><code>response:</code></td><td>✅ Yes</td><td>The Rack response</td></tr><tr><td><code>env:</code></td><td>✅ Yes</td><td>The Rack env.</td></tr></tbody></table><h4 id="http-headers" tabindex="-1">HTTP Headers <a class="header-anchor" href="#http-headers" aria-label="Permalink to &quot;HTTP Headers&quot;">​</a></h4><p>Since any header can be sent with a request, Brut allows you to access them, including non-standard ones. Rack (which is based on CGI), provides access to all HTTP headers in the <code>env</code> by taking the header name, replacing dashes (&quot;-&quot;) with underscores (&quot;_&quot;), and prepending <code>http_</code> to the name, then uppercasing it. Thus, &quot;User-Agent&quot; becomes <code>HTTP_USER_AGENT</code>.</p><p>Because Ruby parameters and variables must start with a lower-case letter, Brut uses the lowercased version of the Rack/CGI variable. Thus, to receive the &quot;User-Agent&quot;, you would declare the keyword parameter <code>http_user_agent</code>.</p><p>Further, because headers come from the client and may not be under your control, the value that is actually injected depends on a few things:</p><ul><li>If your keyword arg is required, i.e. there is no default value: <ul><li>If the header was not provided, <code>nil</code> is injected.</li><li>If the header <em>was</em> provided, it&#39;s value is injected, even if it&#39;s the empty string.</li></ul></li><li>If your keyword arg is optional, i.e. it has a default value <ul><li>If the header was not provided, no value is injected, and your code will receive the default value.</li><li>If the header <em>was</em> provided, it&#39;s value is injected, even if it&#39;s the empty string.</li></ul></li></ul><h3 id="injecting-custom-data" tabindex="-1">Injecting Custom Data <a class="header-anchor" href="#injecting-custom-data" aria-label="Permalink to &quot;Injecting Custom Data&quot;">​</a></h3><p>The true power of keyword injection is that you can store your own data into the request context and have it injected into classes when Brut instantiates them.</p><p>The place to do this is in a <a href="/hooks.html">before hook</a>, since that happens before any page or handler is created, but <em>after</em> the <a href="/api/Brut/FrontEnd/RequestContext.html" target="_self" rel="noopener" data-no-router><code>Brut::FrontEnd::RequestContext</code></a> is created (which is where all of this information is stored).</p><p>For example, here is how you might inject the currently logged-in account based on the session:</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;"> AuthBeforeHook</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;">authenticated_account</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">      request_context[</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">:authenticated_account</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;"> session.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">authenticated_account</span></span>
+<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">    end</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    continue</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 the value is only injected if it exists. It&#39;s important not to inject <code>nil</code> for values that don&#39;t exist.</p><p>With this in place, any page that requires an authenticated account can declare it:</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;"> PreferencesPage</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;">authenticated_account:</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>If the request context has no value for <code>authenticated_account</code>, the page cannot be instantiated. Thus, the page&#39;s code can always rely on a non-<code>nil</code> value for <code>authenticated_account</code> (provided you don&#39;t inject <code>nil</code>).</p><div class="warning custom-block github-alert"><p class="custom-block-title">WARNING</p><p>Do not inject <code>nil</code> into the request context. Brut currently allows it, but may prevent it in a future update. <code>nil</code> is no good for nobody.</p></div><h3 id="when-values-aren-t-available" tabindex="-1">When Values Aren&#39;t Available <a class="header-anchor" href="#when-values-aren-t-available" aria-label="Permalink to &quot;When Values Aren&#39;t Available&quot;">​</a></h3><p>When a value is not available for injection, and the keyword doesn&#39;t provide a default, Brut will raise an error. This is because such a situation represents a design error.</p><p>The tables above document which values should always be available. You should never provide a default value for these, e.g. <code>session:</code> or <code>env:</code>. For values that are not always available, you should provide a default value unless you are sure there will be no routing to the page or handler without the value set.</p><p>This is most important for query string parameters. Since a user can easily manipulate these, if your page accepts, say, the parameter <code>use_detailed_view</code>, but that parameter isn&#39;t present, Brut will not be able to instantiate your page unless <code>use_detailed_view:</code> has a default value in the initializer&#39;s keyword arguments.</p><p>See <a href="/hooks.html">route hooks</a>.</p><h2 id="testing" tabindex="-1">Testing <a class="header-anchor" href="#testing" aria-label="Permalink to &quot;Testing&quot;">​</a></h2><p>Brut will not create your classes in a test. Instead, you must pass in the values you want. There are various helpers in <a href="/api/Brut/SpecSupport.html" target="_self" rel="noopener" data-no-router><code>Brut::SpecSupport</code></a> to create blank or empty versions of the special classes.</p><p>In particular, A basic <code>request_context</code> is setup per test and injected into the Thread local storage. This means that if your test should trigger a codepath that <em>does</em> cause Brut to use keyword injection, useful values will be injected.</p><p>For your tests, however, you should pass in directly what you 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:#E36209;--shiki-dark:#FFAB70;">page</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> = </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">WidgetsByIdPage</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;">id:</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> widget.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">id</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;"> empty_session)</span></span></code></pre></div><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>Consider a method 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;"> create_widget</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">name:</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">organization:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> nil</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">quantity:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 10</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span></code></pre></div><p>Outside of Brut, the way to interpret this arguments is as follows:</p><ul><li><code>name</code> is required</li><li><code>organization</code> is optional</li><li><code>quantity</code> has a default value of 10 if not provided</li></ul><p>Any method or intializer that will be keyword-injected should be designed with this in mind. Thus, the following guidelines will be helpful in managing your app:</p><ul><li><strong>Do not provide default values when Brut documents the value is always available</strong><ul><li>If your page needs the session, it will always be there. Don&#39;t default <code>session:</code> to some other value (especially <code>nil</code>!)</li></ul></li><li><strong>Choose arguments based on the needs of the class:</strong><ul><li>If a value is optional, default it to either <code>nil</code> or a symbol that indicates what happens when the value is omitted</li><li>If an optional value has a default, use that (this should be rare for pages, handlers, components, and hooks)</li><li>Otherwise, do not provide a default for the keyword</li></ul></li><li><strong>Design for non-<code>nil</code> values instead of allowing <code>nil</code> and checking for it</strong><ul><li>If a page needs, say, the currently logged-in user, set that up as injectible with no default.</li><li>If a codepath creates that page without the logged-in user, you will get a very obvious error and can figure out how it happened. Your page&#39;s code doesn&#39;t need to figure out what to do with <code>nil</code></li></ul></li><li><strong>Do not inject <code>nil</code> into the request context.</strong> When your code requires a value for a keyword, you want to rely on that value being non-nil. Thus, avoid injecting <code>nil</code> into the request context. Brut will allow it as a sort-of escape hatch, but you should design your app to avoid it</li><li><strong>Be careful injecting global data.</strong> The request context instance is per request, but you could certainly put global data into it. For example, you may put an initialized API client into the request context as a convieniece. <strong>Be careful</strong> because your app is multi-threaded. Any object that is not scoped to the request must be thread-safe.</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 May 7, 2025</em></p><p>Keyword injection is currently implemented in a few places and not available via public API. It could be useful as an API and it will be exposed at some point. For now, it&#39;s only available for Brut-managed classes as documented here.</p>`,50)]))}const k=t(n,[["render",o]]);export{u as __pageData,k as default};

data/docs/assets/{keyword-injection.md.Dt2tKREs.lean.js → keyword-injection.md.95Zgh2eN.lean.js}

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

data/docs/assets/{layouts.md.cPnh3NId.js → layouts.md.CJGDFY-m.js}

@@ -1,4 +1,4 @@
-import{_ as i,c as a,o as t,ag as n}from"./chunks/framework.1L-BeKqY.js";const y=JSON.parse('{"title":"Layouts","description":"","frontmatter":{},"headers":[],"relativePath":"layouts.md","filePath":"layouts.md"}'),e={name:"layouts.md"};function l(h,s,p,k,r,o){return t(),a("div",null,s[0]||(s[0]=[n(`<h1 id="layouts" tabindex="-1">Layouts <a class="header-anchor" href="#layouts" aria-label="Permalink to &quot;Layouts&quot;">​</a></h1><p>Brut supports <em>layouts</em>, which are a way to centralizing common HTML amongst many different pages. Conceptually, they are the same as a Rails layout. Technically, they are a Phlex component designed to render a page from a <code>yield</code> block.</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 should include <code>app/src/front_end/layouts/default_layout.rb</code>. The name &quot;default&quot; is special, in that all pages will use this layout by default.</p><p>Since a layout is a Phlex component, its HTML is generated from <code>view_template</code>, and it is expected to have exactly one <code>yield</code>, where the page&#39;s content will be inserted.</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;"> DefaultLayout</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;">Layout</span></span>
+import{_ as i,c as a,o as t,ag as e}from"./chunks/framework.1L-BeKqY.js";const E=JSON.parse('{"title":"Layouts","description":"","frontmatter":{},"headers":[],"relativePath":"layouts.md","filePath":"layouts.md"}'),n={name:"layouts.md"};function h(l,s,p,k,r,o){return t(),a("div",null,s[0]||(s[0]=[e(`<h1 id="layouts" tabindex="-1">Layouts <a class="header-anchor" href="#layouts" aria-label="Permalink to &quot;Layouts&quot;">​</a></h1><p>Brut supports <em>layouts</em>, which are a way to centralizing common HTML amongst many different pages. Conceptually, they are the same as a Rails layout. Technically, they are a Phlex component designed to render a page from a <code>yield</code> block.</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 should include <code>app/src/front_end/layouts/default_layout.rb</code>. The name &quot;default&quot; isn&#39;t special, it&#39;s just what the <code>layout</code> method from <a href="/api/Brut/FrontEnd/Page.html" target="_self" rel="noopener" data-no-router><code>Brut::FrontEnd::Page</code></a> returns.</p><p>A layout is a Phlex component that&#39;s expected to have a single call to <code>yield</code> in its <code>view_template</code> method.</p><p>Here is the <code>DefaultLayout</code> provided to new Brut apps:</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;"> DefaultLayout</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;">Layout</span></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;">  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;">page_name:</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span>
@@ -35,17 +35,4 @@ import{_ as i,c as a,o as t,ag as n}from"./chunks/framework.1L-BeKqY.js";const y
 <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><h3 id="maintaining-layouts" tabindex="-1">Maintaining Layouts <a class="header-anchor" href="#maintaining-layouts" aria-label="Permalink to &quot;Maintaining Layouts&quot;">​</a></h3><p>You are free to manage this how you like, however a few components inside the <code>&lt;head&gt;</code> and <code>&lt;body&gt;</code> that are important to keep:</p><ul><li><a href="/api/Brut/FrontEnd/Components/PageIdentifier.html" target="_self" rel="noopener" data-no-router><code>Brut::FrontEnd::Components::PageIdentifier</code></a> includes a <code>&lt;meta&gt;</code> tag with the page&#39;s name in it, which is handy for managing your end-to-end tests.</li><li><a href="/api/Brut/FrontEnd/Components/I18nTranslations.html" target="_self" rel="noopener" data-no-router><code>Brut::FrontEnd::Components::I18nTranslations</code></a> includes translatsion for common client-side constraint violations. See <a href="/forms.html">Forms</a>, <a href="/i18n.html">I18n</a>, and <a href="/javascript.html">JavaScript</a> for more details on how this is used.</li><li><a href="/api/Brut/FrontEnd/Components/Traceparent.html" target="_self" rel="noopener" data-no-router><code>Brut::FrontEnd::Components::Traceparent</code></a> ensures that the OpenTelemetry <em>traceparent</em> is available so when client-side telemetry is reported back to the server, it can be connected to the request that initiated it.</li><li>The <a href="/brut-js/api/Tracing.html" target="_self" rel="noopener" data-no-router><code style="white-space:nowrap;">&lt;brut-tracing&gt;</code></a> element collects the client-side telemetry and sends it back to the server.</li></ul><h3 id="creating-alternate-layouts" tabindex="-1">Creating Alternate Layouts <a class="header-anchor" href="#creating-alternate-layouts" aria-label="Permalink to &quot;Creating Alternate Layouts&quot;">​</a></h3><p>The way each page knows to use <code>DefaultLayout</code> is due to the <code>layout</code> method of <a href="/api/Brut/FrontEnd/Page.html" target="_self" rel="noopener" data-no-router><code>Brut::FrontEnd::Page</code></a>, which returns <code>&quot;default&quot;</code>. The return value of <code>layout</code> is used to figure out the name of the layout class.</p><p>You can set up your own by overriding <code>layout</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;"> MyOtherPage</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;"> layout</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &quot;other_design&quot;</span></span>
-<span class="line"></span>
-<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">  # ...</span></span>
-<span class="line"></span>
-<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">end</span></span></code></pre></div><p>Brut will expect the class <code>OtherDesignLayout</code> to exist and provide HTML. Based on Zeitwerk&#39;s conventions, that class should be in <code>app/src/front_end/layouts/other_design_layout.rb</code>.</p><h3 id="no-layout" tabindex="-1">No Layout <a class="header-anchor" href="#no-layout" aria-label="Permalink to &quot;No Layout&quot;">​</a></h3><p>If you don&#39;t want a layout, you are encouraged to creat a blank layout, for example:</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;"> BlankLayout</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;">Layout</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:#D73A49;--shiki-dark:#F97583;">    yield</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:#6A737D;--shiki-dark:#6A737D;"># use like so:</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;"> layout</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &quot;blank&quot;</span></span></code></pre></div><h2 id="testing" tabindex="-1">Testing <a class="header-anchor" href="#testing" aria-label="Permalink to &quot;Testing&quot;">​</a></h2><p>You generally don&#39;t test a layout, aside from end-to-end tests. If your layout needs complex logic, you are encouraged to extract that to a <a href="/components.html">component</a> and test that instead.</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>Keep your layouts as simple as you can.</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 July 1, 2025</em></p><p>Layouts work due to the implementation of the method <code>view_template</code> in <a href="/api/Brut/FrontEnd/Page.html" target="_self" rel="noopener" data-no-router><code>Brut::FrontEnd::Page</code></a>. This is why a page class must provide <code>page_template</code> instead.</p><p>While you could override <code>view_template</code> in your page to provide a &quot;blank layout&quot;, this is discouraged, as the use of <code>view_template</code> should be considered a private implementation detail.</p>`,26)]))}const c=i(e,[["render",l]]);export{y as __pageData,c as default};
+<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">end</span></span></code></pre></div><p>You will likely want to customize what&#39;s in your layout, but a few components included by default are important for other features of Brut:</p><table tabindex="0"><thead><tr><th>Component</th><th>Purpose</th></tr></thead><tbody><tr><td><a href="/api/Brut/FrontEnd/Components/PageIdentifier.html" target="_self" rel="noopener" data-no-router><code>Brut::FrontEnd::Components::PageIdentifier</code></a></td><td>Creates a <code>&lt;meta&gt;</code> tag with the page&#39;s name in it, which is handy for managing your end-to-end tests.</td></tr><tr><td><a href="/api/Brut/FrontEnd/Components/I18nTranslations.html" target="_self" rel="noopener" data-no-router><code>Brut::FrontEnd::Components::I18nTranslations</code></a></td><td>Includes translatsion for common client-side constraint violations. These are used by <a href="/brut-js/api/ConstraintViolationMessages.html" target="_self" rel="noopener" data-no-router><code style="white-space:nowrap;">&lt;brut-cv-messages&gt;</code></a> and <code>,brut-cv&gt;</code>. See <a href="/forms.html">Forms</a>, <a href="/i18n.html">I18n</a>, and <a href="/javascript.html">JavaScript</a> for more details</td></tr><tr><td><a href="/api/Brut/FrontEnd/Components/Traceparent.html" target="_self" rel="noopener" data-no-router><code>Brut::FrontEnd::Components::Traceparent</code></a></td><td>Includes the OpenTelemetry <em>traceparent</em> on the page so that client-side telemetry is reported back to the server. See <a href="/brut-js/api/Tracing.html" target="_self" rel="noopener" data-no-router><code style="white-space:nowrap;">&lt;brut-tracing&gt;</code></a> and <a href="/instrumentation.html">observability</a></td></tr><tr><td><a href="/brut-js/api/Tracing.html" target="_self" rel="noopener" data-no-router><code style="white-space:nowrap;">&lt;brut-tracing&gt;</code></a> / <code>brut_tracing</code></td><td>Custom element that collects the client-side telemetry and sends it back to the server. See <a href="/instrumentation.html">observability</a></td></tr></tbody></table><p>See <a href="/recipes/alternate-layouts.html">creating alternate layouts</a> and <a href="/recipes/blank-layouts.html">blank layouts</a> for customization options.</p><h2 id="testing" tabindex="-1">Testing <a class="header-anchor" href="#testing" aria-label="Permalink to &quot;Testing&quot;">​</a></h2><p>You generally don&#39;t test a layout, aside from end-to-end tests. If your layout needs complex logic, you are encouraged to extract that to a <a href="/components.html">component</a> and test that instead.</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>Layouts can use components, just keep in mind that any data a component needs must be passed to its initializer. Since the layout doesn&#39;t have access to the page, this implies that components used in your layout must either not require dynamic data or be <a href="/components.html#global-components">global components</a></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 July 1, 2025</em></p><p>Layouts work due to the implementation of the method <code>view_template</code> in <a href="/api/Brut/FrontEnd/Page.html" target="_self" rel="noopener" data-no-router><code>Brut::FrontEnd::Page</code></a>. This is why a page class must provide <code>page_template</code> instead.</p><p>While you could override <code>view_template</code> in your page to provide a &quot;blank layout&quot;, this is discouraged, as the use of <code>view_template</code> should be considered a private implementation detail.</p>`,19)]))}const c=i(n,[["render",h]]);export{E as __pageData,c as default};

data/docs/assets/layouts.md.CJGDFY-m.lean.js

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

data/docs/assets/{lsp.md.Bsu-f6VU.js → lsp.md.Dn1rIiW0.js}

@@ -1 +1 @@
-import{_ as t,c as o,o as r,ag as a}from"./chunks/framework.1L-BeKqY.js";const p=JSON.parse('{"title":"Language Server Protocol (LSP) Support","description":"","frontmatter":{},"headers":[],"relativePath":"lsp.md","filePath":"lsp.md"}'),s={name:"lsp.md"};function d(i,e,n,l,c,u){return r(),o("div",null,e[0]||(e[0]=[a('<h1 id="language-server-protocol-lsp-support" tabindex="-1">Language Server Protocol (LSP) Support <a class="header-anchor" href="#language-server-protocol-lsp-support" aria-label="Permalink to &quot;Language Server Protocol (LSP) Support&quot;">​</a></h1><p>Because Brut development happens inside Docker, but your editor likely runs on your computer, getting LSP servers running takes a few more steps.</p><h2 id="overview" tabindex="-1">Overview <a class="header-anchor" href="#overview" aria-label="Permalink to &quot;Overview&quot;">​</a></h2><p>When you created your app with <code>mkbrut</code>, the following LSP-related modules are set up and/or installed:</p><ul><li>Shopify&#39;s Ruby LSP server (installed from <code>bin/setup</code>)</li><li>Microsoft&#39;s TypeScript/JavaScript and CSS LSP serfvers (specified in <code>package.json</code>, installed when <code>npm install</code> runs from <code>bin/setup</code>)</li></ul><p>In order to use them from your computer a few configurations are needed, some of which Brut has done, and some you will need to do.</p><table tabindex="0"><thead><tr><th>Configuration</th><th>Description</th><th>Brut Handled?</th></tr></thead><tbody><tr><td>Paths inside Docker Must Match Your Computer</td><td>When an LSP server communicates about a file, it does so with a path. That means that paths inside the Docker container must be the same as those on your computer. Brut achievecs this by using <code>${CWD}</code> inside <code>docker-compose.dx.yml</code></td><td>✅</td></tr><tr><td>Third party libraries must <em>also</em> be installed in a path that is the same in both places</td><td>When jumping to a definition, the LSP server will again use paths, which must match. Because Node modules are installed local to your app, they already work. Ruby Gems, however, are configured to be installed in <code>local-gems</code> in your app. Brut should&#39;ve added this to <code>.gitignore</code> and setup everything inside Docker to use it.</td><td>✅</td></tr><tr><td>Your editor must use <code>dx/exec</code> to execute LSP commands</td><td>Your editor will need to know that the LSP servers are running inside Docker. If your editor allows configuring the commands used to do this, you must prefix them with <code>dx/exec bashc -lc</code>. See <a href="https://naildrivin5.com/blog/2025/06/12/neovim-and-lsp-servers-working-with-docker-based-development.html" target="_blank" rel="noreferrer">my blog post</a> for details.</td><td>❌</td></tr><tr><td>Other languages or plugins to existing LSP servers</td><td>I haven&#39;t used these, so no idea how well they work.</td><td>❌</td></tr></tbody></table>',7)]))}const m=t(s,[["render",d]]);export{p as __pageData,m as default};
+import{_ as t,c as o,o as r,ag as a}from"./chunks/framework.1L-BeKqY.js";const h=JSON.parse('{"title":"Language Server Protocol (LSP) Support","description":"","frontmatter":{},"headers":[],"relativePath":"lsp.md","filePath":"lsp.md"}'),s={name:"lsp.md"};function d(i,e,n,l,c,u){return r(),o("div",null,e[0]||(e[0]=[a('<h1 id="language-server-protocol-lsp-support" tabindex="-1">Language Server Protocol (LSP) Support <a class="header-anchor" href="#language-server-protocol-lsp-support" aria-label="Permalink to &quot;Language Server Protocol (LSP) Support&quot;">​</a></h1><p>Because Brut development happens inside Docker, but your editor likely runs on your computer, getting LSP servers running takes a few more steps.</p><h2 id="overview" tabindex="-1">Overview <a class="header-anchor" href="#overview" aria-label="Permalink to &quot;Overview&quot;">​</a></h2><p>When you created your app with <code>mkbrut</code>, the following LSP-related modules are set up and/or installed:</p><ul><li>Shopify&#39;s Ruby LSP server (installed from <code>bin/setup</code>)</li><li>Microsoft&#39;s TypeScript/JavaScript and CSS LSP serfvers (specified in <code>package.json</code>, installed when <code>npm install</code> runs from <code>bin/setup</code>)</li></ul><p>In order to use them from your computer a few configurations are needed, some of which Brut has done, and some you will need to do.</p><table tabindex="0"><thead><tr><th>Configuration</th><th>Description</th><th>Brut Handled?</th></tr></thead><tbody><tr><td>Paths inside Docker Must Match Your Computer</td><td>When an LSP server communicates about a file, it does so with a path. That means that paths inside the Docker container must be the same as those on your computer. Brut achievecs this by using <code>${CWD}</code> inside <code>docker-compose.dx.yml</code></td><td>✅</td></tr><tr><td>Third party libraries must <em>also</em> be installed in a path that is the same in both places</td><td>When jumping to a definition, the LSP server will again use paths, which must match. Because Node modules are installed local to your app, they already work. Ruby Gems, however, are configured to be installed in <code>local-gems</code> in your app. Brut should&#39;ve added this to <code>.gitignore</code> and setup everything inside Docker to use it.</td><td>✅</td></tr><tr><td>Your editor must use <code>dx/exec</code> to execute LSP commands</td><td>Your editor will need to know that the LSP servers are running inside Docker. If your editor allows configuring the commands used to do this, you must prefix them with <code>dx/exec</code>. See <a href="https://naildrivin5.com/blog/2025/06/12/neovim-and-lsp-servers-working-with-docker-based-development.html" target="_blank" rel="noreferrer">my blog post</a> for details.</td><td>❌</td></tr><tr><td>Other languages or plugins to existing LSP servers</td><td>I haven&#39;t used these, so no idea how well they work.</td><td>❌</td></tr></tbody></table>',7)]))}const m=t(s,[["render",d]]);export{h as __pageData,m as default};

data/docs/assets/{lsp.md.Bsu-f6VU.lean.js → lsp.md.Dn1rIiW0.lean.js}

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

data/docs/assets/overview.md.Bdq4qt3L.js

@@ -0,0 +1 @@
+import{_ as t,c as a,o as r,ag as s}from"./chunks/framework.1L-BeKqY.js";const o="/assets/OverviewMetro.DUS-5fUZ.png",g=JSON.parse('{"title":"Conceptual Overview","description":"","frontmatter":{},"headers":[],"relativePath":"overview.md","filePath":"overview.md"}'),i={name:"overview.md"};function n(l,e,c,d,h,u){return r(),a("div",null,e[0]||(e[0]=[s('<h1 id="conceptual-overview" tabindex="-1">Conceptual Overview <a class="header-anchor" href="#conceptual-overview" aria-label="Permalink to &quot;Conceptual Overview&quot;">​</a></h1><p>Brut is a way to build web apps that generate HTML, have JavaScript and CSS, and interact with a Database. It&#39;s built on Ruby standard libraries and community libraries like <a href="https://sequel.jeremyevans.net/" target="_blank" rel="noreferrer">Sequel</a> and <a href="https://phlex.fun" target="_blank" rel="noreferrer">Phlex</a>.</p><p>Brut&#39;s approach and design are built on three core values:</p><ul><li><strong>Leverage Standards</strong> - The web platform is great, and Brut wants you to use it.</li><li><strong>There&#39;s One Best Way To Do It</strong> - Flexibility leads to chaos.</li><li><strong>Simple over Easy</strong> - Verbose code that can be quickly understood beats impenetrable compact DSLs every day.</li></ul><p>Brut&#39;s abstractions tend to mirror concepts found in the domain of web sites. For example, a browser serves up a web page at a URL. In Brut, that&#39;s called a <em>page</em> and you&#39;d create a subclass of <a href="/api/Brut/FrontEnd/Page.html" target="_self" rel="noopener" data-no-router><code>Brut::FrontEnd::Page</code></a> to implement it.</p><p>Brut tries to avoid abstractions that simply translate existing standards into a more aestheticly pleasing form. You already need to know CSS, HTML, the Web Platform, and SQL, so there&#39;s little to gain by requiring you to learn a different way to use them.</p><h2 id="basic-elements" tabindex="-1">Basic Elements <a class="header-anchor" href="#basic-elements" aria-label="Permalink to &quot;Basic Elements&quot;">​</a></h2><p>Brut organizes its code and behavior around four basic concepts:</p><ul><li><strong>Client</strong> or <em>Client Side</em> is the web browser (or HTTP client). This is where CSS is applied to HTML and where JavaScript is executed. HTTP requests are initiated here.</li><li><strong>Server</strong> or <em>Server Side</em> is where any code not in the browser runs. In Brut, this includes HTML generation, SQL queries, and everything in between.</li><li><strong>Front End</strong> is the code that deals with producing your user interface or HTTP API. A lot of this code runs on the <em>server side</em>, however it exists to provide a user interface of some sort.</li><li><strong>Back End</strong> is the code that deals with everything else, such as accessing a database, executing business logic, or managing background jobs.</li></ul><p><img src="'+o+'" alt="Architectural Overview"></p><ul><li><strong>Visitor</strong> is someone visiting your web site or app.</li><li><strong>Browser</strong> is, well, a web browser</li><li><a href="/pages.html"><strong>Pages</strong></a> generate web pages, which is what happens when a browser&#39;s UI navigates to a URL.</li><li><a href="/forms.html"><strong>Forms</strong></a> are submitted by the browser to the server. In Brut, a form describes the contents of a <code>&lt;form&gt;</code> as well as provides access to the submitted data.</li><li><a href="/handlers.html"><strong>Handlers</strong></a> receive non-GET HTTP requests from the browser, notably form submissions.</li><li><a href="/components.html"><strong>Components</strong></a> generate HTML fragments and are used to generate the HTML of a page or for re-use across pages.</li><li><a href="/javascript.html"><strong>JavaScript</strong></a> and <a href="/assets.html"><strong>Assets</strong></a> (including <a href="/css.html">CSS</a>) are bundled on the server and sent to the client.</li><li><a href="/business-logic.html"><strong>Domain Logic</strong></a> as where your business and domain logic lives and can be implemented however you like.</li><li><a href="/database-access.html"><strong>DB Models</strong></a> are objects that provide access to your database.</li><li><strong>Relational Database</strong> is your database, where data is stored.</li></ul><p>Brut doesn&#39;t prevent the addition of more pieces of infrastructure or code. You can add a Redis cache, a Sidekiq job backend, or integrate with third party APIs.</p><h2 id="brut-is-not-mvc" tabindex="-1">Brut is Not MVC <a class="header-anchor" href="#brut-is-not-mvc" aria-label="Permalink to &quot;Brut is Not MVC&quot;">​</a></h2><p>Brut is <em>not</em> an MVC framework, nor does it use the concept of <em>resources</em> as an abstraction. Although HTTP does include this concept, we find it&#39;s not as useful for managing web apps as it may seem.</p><p>We&#39;ve found that teams often struggle with mapping what everyone else calls pages to resources and HTTP verbs. We also find that the consonance features, resources, actions, and database tables never materializes. We&#39;re basically not going to debate what the meaning of the <code>DELETE</code> verb on the <code>widgets</code> resource is actually supposed to mean.</p><h2 id="brut-is-hippocratic-licensed" tabindex="-1">Brut is Hippocratic Licensed <a class="header-anchor" href="#brut-is-hippocratic-licensed" aria-label="Permalink to &quot;Brut is Hippocratic Licensed&quot;">​</a></h2><p>It&#39;s important to me that Brut is used to make the world a better place. Please take a not of <a href="https://firstdonoharm.dev/version/3/0/cl-eco-media-my-tal-xuar.txt" target="_blank" rel="noreferrer">its license</a></p>',17)]))}const m=t(i,[["render",n]]);export{g as __pageData,m as default};

data/docs/assets/overview.md.Bdq4qt3L.lean.js

@@ -0,0 +1 @@
+import{_ as t,c as a,o as r,ag as s}from"./chunks/framework.1L-BeKqY.js";const o="/assets/OverviewMetro.DUS-5fUZ.png",g=JSON.parse('{"title":"Conceptual Overview","description":"","frontmatter":{},"headers":[],"relativePath":"overview.md","filePath":"overview.md"}'),i={name:"overview.md"};function n(l,e,c,d,h,u){return r(),a("div",null,e[0]||(e[0]=[s("",17)]))}const m=t(i,[["render",n]]);export{g as __pageData,m as default};

data/docs/assets/pages.md.B7Hc-i6H.js

@@ -0,0 +1,45 @@
+import{_ as a,c as s,o as t,ag as i}from"./chunks/framework.1L-BeKqY.js";const k=JSON.parse('{"title":"Pages","description":"","frontmatter":{},"headers":[],"relativePath":"pages.md","filePath":"pages.md"}'),n={name:"pages.md"};function o(l,e,r,h,d,p){return t(),s("div",null,e[0]||(e[0]=[i(`<h1 id="pages" tabindex="-1">Pages <a class="header-anchor" href="#pages" aria-label="Permalink to &quot;Pages&quot;">​</a></h1><p>A core abstraction of Brut is the core concept of the web: the web page.</p><h2 id="overview" tabindex="-1">Overview <a class="header-anchor" href="#overview" aria-label="Permalink to &quot;Overview&quot;">​</a></h2><p>To create a web page, you&#39;ll need:</p><ul><li>A <a href="/routes.html">Route</a> using <code>page</code>.</li><li>A class in <code>app/src/front_end/pages/</code> that extends <a href="/api/Brut/FrontEnd/Page.html" target="_self" rel="noopener" data-no-router><code>Brut::FrontEnd::Page</code></a>, named <a href="/routes.html#class-naming-conventions">conventionally</a> (though in reality, your page willextend <code>AppPage</code> in <code>app/src/front_end/pages/app_page.rb</code>, which extends <a href="/api/Brut/FrontEnd/Page.html" target="_self" rel="noopener" data-no-router><code>Brut::FrontEnd::Page</code></a>).</li><li>[Optional, but recommended] A test in <code>specs/front_end/pages</code>.</li></ul><p>You can create all this with <code>bin/scaffold</code>, which accepts the route you want:</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>
+<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"># =&gt; app/src/front_end/pages/new_widgets_page.rb</span></span>
+<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"># =&gt; specs/front_end/pages/new_widgets_page.spec.rb</span></span>
+<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"># =&gt; add \`page &quot;/new_widgets&quot;\` to app/src/app.rb</span></span></code></pre></div><p>or</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 /widget/:id</span></span>
+<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"># =&gt; app/src/front_end/pages/widget_by_id_page.rb</span></span>
+<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"># =&gt; specs/front_end/pages/widget_by_id_page.spec.rb</span></span>
+<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"># =&gt; add \`page &quot;/widget/:id&quot;\` to app/src/app.rb</span></span></code></pre></div><p>You can also perform these steps manually.</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>Pages need a <code>page_template</code> method that contains calls to Phlex, which will produce the page&#39;s HTML.</p><p>If you have not used Phlex before, it&#39;s relatively straightfoward. For each HTML tag that exists, Phlex provides a method. So, for <code>&lt;div&gt;</code>, Phlex provides <code>div</code>.</p><p>Each method accepts parameters which are converted into attributes. Methods can also accept blocks that can be used to add more HTML by calling more of Phlex&#39;s API.</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;"> DashboardPage</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;"> page_template</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    header </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">do</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">      h1 { </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Welcome to My App!&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">      time { </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">Date</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">today</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:#24292E;--shiki-dark:#E1E4E8;">    main </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">do</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">      p</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">class:</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &quot;body-text&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">do</span></span>
+<span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">        &quot;This is my awesome app! I hope you stay awhile!&quot;</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>By default, this page will be rendered inside <code>DefaultLayout</code>, located in <code>app/src/front_end/layouts/default_layout.rb</code> and discussed in <a href="/layouts.html">the layouts module</a>. The HTML this page will generate, that would then be inserted into the layout&#39;s HTML, looks 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;">header</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;">h1</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Welcome to My App!&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">h1</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;">time</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;2025-07-05&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">time</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;">header</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;">main</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;">p</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> class</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;body-text&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    This is my awesome app! I hope you stay awhile!&quot;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  &lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">p</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;">main</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre></div><h3 id="accessing-data-in-a-page" tabindex="-1">Accessing Data in a Page <a class="header-anchor" href="#accessing-data-in-a-page" aria-label="Permalink to &quot;Accessing Data in a Page&quot;">​</a></h3><p>Building static pages is fine, but not really why we use web app libraries. Your page is a normal class, so you can create instance variables and methods, which can do whatever you need.</p><p>That being said, the initializer is called by Brut and can be given special arguments. For example, if your route has as placeholder, e.g. <code>/widgets/:id</code>, then your initializer will be given the value of <code>:id</code> if its initializer has a keyword argument named <code>id:</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;"> 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:#D73A49;--shiki-dark:#F97583;">end</span></span></code></pre></div><p>Query string parameters are also avaiable this way, but your page can access a wide variety of request-level information simply by declaring a keyword argument to its initializer.</p><p>This mechanism is called <a href="/keyword-injection.html">keyword injection</a> and is available to many class you create, including pages.</p><p>Here is a list of what is available:</p><table tabindex="0"><thead><tr><th>Keyword Argument</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>rack_request_*</code></td><td><code>String</code> or <code>nil</code></td><td>Any parameter that starts with <code>rack_request_</code> is assumed to be for a value from the <code>Rack::Request</code>. For example, <code>rack_request_id</code> would provide the <code>ip</code> value from <code>Rack::Request</code></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. We recommended that <strong>no other keywords arguments have defaults</strong> to ensure your pages aren&#39;t created with <code>nil</code> values.</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="page-hooks" tabindex="-1">Page Hooks <a class="header-anchor" href="#page-hooks" aria-label="Permalink to &quot;Page 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. It&#39;s called after construction, so has access to any injected values, and its return value tells Brut what should 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>Although pages are Plain Old Ruby Objects, you likely want to test the HTML they generate. Brut provides convenience methods to do this based on Nokogiri.</p><h3 id="generating-a-response" tabindex="-1">Generating a Response <a class="header-anchor" href="#generating-a-response" aria-label="Permalink to &quot;Generating a Response&quot;">​</a></h3><ul><li>If your page has no before hook, or you aren&#39;t testing that, call <code>generate_and_parse(page_instance)</code>. This 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 Nokogiri&#39;s <code>Nokogiri::XML::Node</code> (see below for why this exists)</li><li>If you want to assert behavior of the before hook, call <code>generate_result</code>, which will return whatever the page&#39;s internal <code>handle!</code> method called. will use one of these matchers on the result:</li></ul><h3 id="asserting-results" tabindex="-1">Asserting Results <a class="header-anchor" href="#asserting-results" aria-label="Permalink to &quot;Asserting Results&quot;">​</a></h3><p>When using <code>generate_and_parse</code>, you have access to all of Nokogiri, however <a href="/api/Brut/SpecSupport/EnhancedNode.html" target="_self" rel="noopener" data-no-router><code>Brut::SpecSupport::EnhancedNode</code></a> provides two methods to simplify your test:</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;">it </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;should work&quot;</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> do</span></span>
+<span class="line"><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_and_parse</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>
+<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;">(result.</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 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;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Welcome&quot;</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;">(result.</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 style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">to</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">       eq</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">nil</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></code></pre></div><ul><li><code>e!</code> returns the node matching the given CSS selector, failing the test if there is not exactly one matching node.</li><li><code>e</code> (no bang) returns the node matching the given CSS selector, or <code>nil</code> if none matched. If there is more than one match, the test fails.</li></ul><p>When using <code>generate_result</code>, you will want to use one of two special purpose matchers:</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;">it </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;redirects&quot;</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> do</span></span>
+<span class="line"><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;">(described_class.</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">new</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;">(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;">AuthPage</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:#24292E;--shiki-dark:#E1E4E8;">it </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;404&#39;s&quot;</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> do</span></span>
+<span class="line"><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;">(described_class.</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">new</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;">(result).</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">to</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> have_returned_http_status</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">404</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></code></pre></div><ul><li><code>have_redirected_to</code> to check that a redirect happened to the URI you set (see <a href="/api/Brut/SpecSupport/Matchers/HaveRedirectedTo.html" target="_self" rel="noopener" data-no-router><code>Brut::SpecSupport::Matchers::HaveRedirectedTo</code></a>)</li><li><code>have_returned_http_status</code> to check that a given HTTP response was returned (see <a href="/api/Brut/SpecSupport/Matchers/HaveReturnedHttpStatus.html" target="_self" rel="noopener" data-no-router><code>Brut::SpecSupport::Matchers::HaveReturnedHttpStatus</code></a>)</li></ul><p>Beyond this, you can use Nokogiri as usual to navigate the DOM that&#39;s generated and make assertions. A few additional matchers to help are:</p><ul><li><code>be_routing_for</code> - expect a URI to be a routing for a certain page or page/parameter combination. See <a href="/api/Brut/SpecSupport/Matchers/BeRoutingFor.html" target="_self" rel="noopener" data-no-router><code>Brut::SpecSupport::Matchers::BeRoutingFor</code></a>.</li><li><code>have_html_attribute</code> - check that a node has an attribute or an attribute with a specific value. See <a href="/api/Brut/SpecSupport/Matchers/HaveHTMLAttribute.html" target="_self" rel="noopener" data-no-router><code>Brut::SpecSupport::Matchers::HaveHTMLAttribute</code></a>.</li><li><code>have_i18n_string</code> - check that a node&#39;s text has a string from your <a href="/i18n.html">I18n</a> configuration. See <a href="/api/Brut/SpecSupport/Matchers/HaveI18nString.html" target="_self" rel="noopener" data-no-router><code>Brut::SpecSupport::Matchers::HaveI18nString</code></a>.</li></ul><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><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>A great example of this is in the <a href="/recipes/authentication.html">recipe for keywords and auth</a>, which results in a much simpler and less error-prone way to prevent unauthorized access to pages when compared to how you might do it in Rails.</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.</p><p>Note that Brut does <em>not</em> include <a href="/api/Brut/FrontEnd/Components.html" target="_self" rel="noopener" data-no-router><code>Brut::FrontEnd::Components</code></a> (pluralized). You can include that in <code>AppPage</code> to access Brut&#39;s builtin components as a Phlex kit.</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>`,77)]))}const u=a(n,[["render",o]]);export{k as __pageData,u as default};

data/docs/assets/pages.md.B7Hc-i6H.lean.js

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

data/docs/assets/recipes_alternate-layouts.md.BwEytl59.js

@@ -0,0 +1,22 @@
+import{_ as i,c as a,o as n,ag as t}from"./chunks/framework.1L-BeKqY.js";const o=JSON.parse('{"title":"Alternate Layouts","description":"","frontmatter":{},"headers":[],"relativePath":"recipes/alternate-layouts.md","filePath":"recipes/alternate-layouts.md"}'),l={name:"recipes/alternate-layouts.md"};function e(h,s,p,k,r,d){return n(),a("div",null,s[0]||(s[0]=[t(`<h1 id="alternate-layouts" tabindex="-1">Alternate Layouts <a class="header-anchor" href="#alternate-layouts" aria-label="Permalink to &quot;Alternate Layouts&quot;">​</a></h1><p>To create an alternate layout, your page can override <code>layout</code> to return a string. That string will be camel-cased and preped to <code>Layout</code> to form a class that is expected to exist and provide the layout. That class must extend <a href="/api/Brut/FrontEnd/Layout.html" target="_self" rel="noopener" data-no-router><code>Brut::FrontEnd::Layout</code></a>.</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;"> MyOtherPage</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;"> layout</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &quot;other_design&quot;</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">  # ...</span></span>
+<span class="line"></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;">class</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> OtherDesignLayout</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;">Layout</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;">    doctype</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    html </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">do</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">      head </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">do</span></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">        link</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">rel:</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &quot;preload&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">as:</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &quot;style&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">href:</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> asset_path</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;/css/other-styles.css&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">))</span></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">        link</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">rel:</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &quot;stylesheet&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,           </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">href:</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> asset_path</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;/css/other-styles.css&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">))</span></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">        script</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">defer:</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;">src:</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> asset_path</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;/js/app.js&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:#24292E;--shiki-dark:#E1E4E8;">      body </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">do</span></span>
+<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">        yield</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>`,3)]))}const E=i(l,[["render",e]]);export{o as __pageData,E as default};

data/docs/assets/recipes_alternate-layouts.md.BwEytl59.lean.js

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