run-what 1.3.0

HTML-first web framework powered by Rust. No JavaScript frameworks, no build steps—just HTML.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97

<what>
title: "Step 4 — Layouts"
active_step: 4
</what>

<h1 class="text-3xl font-bold mb-2" style="color: #111827; letter-spacing: -0.02em;">Step 4 — Layouts</h1>
<p class="text-gray-500 text-sm mb-8">Shared page shells with <code>application.what</code> and directory inheritance.</p>

<section class="mb-8">
  <h2 class="text-lg font-semibold mb-3" style="color: #111827;">What is a layout?</h2>
  <p class="text-gray-600 mb-4" style="line-height: 1.7;">
    A layout is a component that wraps all pages in a directory. It provides the shared shell — navigation, sidebar, footer — while the page content is inserted via <code>&lt;slot/&gt;</code>. You set the layout in an <code>application.what</code> file.
  </p>
  <pre class="bg-gray-50 p-4 rounded text-sm font-mono" style="border: 1px solid #e5e7eb; overflow-x: auto;"><code>&lt;!-- site/tutorial/application.what --&gt;
layout = "components/tutorial-layout.html"</code></pre>
  <p class="text-sm text-gray-500 mt-2">
    Every page in <code>site/tutorial/</code> now uses this layout. The welcome page at <code>site/index.html</code> does not — it has <code>layout: none</code>.
  </p>
</section>

<section class="mb-8">
  <h2 class="text-lg font-semibold mb-3" style="color: #111827;">Directory inheritance</h2>
  <p class="text-gray-600 mb-4" style="line-height: 1.7;">
    Layout config inherits from parent directories to children. You can override or disable it at any level.
  </p>
  <div class="card mb-4">
    <div class="card-body">
      <div class="font-mono text-sm" style="line-height: 2.2; color: #374151;">
        <div style="color: #6b7280;">site/</div>
        <div style="padding-left: 1rem; color: #374151;">index.html &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #9ca3af; font-family: sans-serif; font-size: 0.75rem;">&larr; no layout (layout: none)</span></div>
        <div style="padding-left: 1rem; color: #6b7280;">tutorial/</div>
        <div style="padding-left: 2rem; color: #6b7280;">application.what &nbsp;<span style="color: #9ca3af; font-family: sans-serif; font-size: 0.75rem;">&larr; layout = "components/tutorial-layout.html"</span></div>
        <div style="padding-left: 2rem; color: #374151;">1.html &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #9ca3af; font-family: sans-serif; font-size: 0.75rem;">&larr; inherits tutorial-layout.html</span></div>
        <div style="padding-left: 1rem; color: #6b7280;">admin/</div>
        <div style="padding-left: 2rem; color: #6b7280;">application.what &nbsp;<span style="color: #9ca3af; font-family: sans-serif; font-size: 0.75rem;">&larr; layout = "components/admin.html"</span></div>
        <div style="padding-left: 2rem; color: #374151;">dashboard.html &nbsp;&nbsp;&nbsp;<span style="color: #9ca3af; font-family: sans-serif; font-size: 0.75rem;">&larr; inherits admin.html</span></div>
      </div>
    </div>
  </div>
</section>

<section class="mb-8">
  <h2 class="text-lg font-semibold mb-3" style="color: #111827;">Disabling the layout</h2>
  <p class="text-gray-600 mb-3" style="line-height: 1.7;">
    To render a page without any layout — like a landing page or API response — use <code>layout: none</code> in the page's <code>&lt;what&gt;</code> block.
  </p>
  <pre class="bg-gray-50 p-4 rounded text-sm font-mono" style="border: 1px solid #e5e7eb; overflow-x: auto;"><code>&lt;what&gt;
title: "Landing Page"
layout: none
&lt;/what&gt;

&lt;!-- Full HTML output, no wrapper --&gt;
&lt;!DOCTYPE html&gt;
&lt;html&gt;...&lt;/html&gt;</code></pre>
</section>

<section class="mb-8">
  <h2 class="text-lg font-semibold mb-3" style="color: #111827;">Passing data to layouts</h2>
  <p class="text-gray-600 mb-3" style="line-height: 1.7;">
    Layout components receive props from each page's <code>&lt;what&gt;</code> block. This tutorial layout uses <code>active_step</code> and <code>title</code> to highlight the correct sidebar item and set the browser tab title.
  </p>
  <pre class="bg-gray-50 p-4 rounded text-sm font-mono" style="border: 1px solid #e5e7eb; overflow-x: auto;"><code>&lt;!-- Page passes props to its layout --&gt;
&lt;what&gt;
active_step: 4
title: "Step 4 — Layouts"
&lt;/what&gt;

&lt;!-- Layout declares them --&gt;
&lt;what&gt;
props = "active_step, title"
defaults.active_step = "0"
&lt;/what&gt;</code></pre>
</section>

<section class="mb-8">
  <h2 class="text-lg font-semibold mb-3" style="color: #111827;">The slot</h2>
  <p class="text-gray-600 mb-3" style="line-height: 1.7;">
    The <code>&lt;slot/&gt;</code> tag inside a layout is where page content goes. Without it, pages would render with no visible output.
  </p>
  <pre class="bg-gray-50 p-4 rounded text-sm font-mono" style="border: 1px solid #e5e7eb; overflow-x: auto;"><code>&lt;!-- components/tutorial-layout.html --&gt;
&lt;main&gt;
  &lt;slot/&gt;   &lt;!-- Page content goes here --&gt;
&lt;/main&gt;</code></pre>
</section>

<div class="card" style="border-color: #bbf7d0; background: #f0fdf4;">
  <div class="card-body">
    <div class="text-sm font-semibold mb-2" style="color: #14532d;">What you learned</div>
    <ul class="text-sm space-y-1" style="color: #166534; padding-left: 1.25rem; list-style: disc;">
      <li><code>application.what</code> sets the layout for a directory and all children</li>
      <li>Layout config inherits parent-to-child — override at any level</li>
      <li><code>layout: none</code> in a page's <code>&lt;what&gt;</code> block disables the wrapper</li>
      <li>Pages pass props to layouts via their <code>&lt;what&gt;</code> block</li>
      <li><code>&lt;slot/&gt;</code> in a layout marks where page content is inserted</li>
    </ul>
  </div>
</div>