documentation navigation

beforesemicolon · Nov 17, 2023 · b2d3b9b · b2d3b9b
1 parent 63038f3
commit b2d3b9b
Show file tree

Hide file tree

Showing 27 changed files with 68 additions and 29 deletions.
diff --git a/docs/documentation/conditional-attributes.html b/docs/documentation/conditional-attributes.html
@@ -162,7 +162,9 @@ <h3 id="other-key-value-attributes" class="heading"><a href="#other-key-value-at
            whether the attribute should be set.</p></p></p><div class="code-snippet"><pre><code class="language-typescript theme-hybrid hljs" data-highlighted="yes"><span class="hljs-keyword">const</span> label = <span class="hljs-string">"action button"</span>;
 
 <span class="hljs-comment">// will not render if label is an empty string</span>
-html`<span class="language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">attr.aria-label</span>=<span class="hljs-string">"</span></span></span><span class="hljs-subst">${label}</span><span class="language-xml"><span class="hljs-tag"><span class="hljs-string">"</span>&gt;</span>click me<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>`</span></code></pre></div></article>
+html`<span class="language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">attr.aria-label</span>=<span class="hljs-string">"</span></span></span><span class="hljs-subst">${label}</span><span class="language-xml"><span class="hljs-tag"><span class="hljs-string">"</span>&gt;</span>click me<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>`</span></code></pre></div>
+        <div class="doc-prev-next-nav"><a href="./dom-references" class="prev-page">&lt;&lt; DOM references</a>
+        <a href="./event-handling" class="next-page">Event handling &gt;&gt;</a></div></article>
             </div></main><footer class="wrapper">
             <ul class="learning-resources">
                 <h5>Learning Resources</h5>

diff --git a/docs/documentation/conditional-rendering.html b/docs/documentation/conditional-rendering.html
@@ -148,7 +148,8 @@ <h1>
             With the <code>when</code> helper once the count is over 10 and
             keeps increasing the DOM will never change. Only when it goes under
             for the first time.
-        </p></article>
+        </p><div class="doc-prev-next-nav"><a href="./effect-helper" class="prev-page">&lt;&lt; Effect helper</a>
+        <a href="./repetition-and-lists" class="next-page">Repetition &amp; Lists &gt;&gt;</a></div></article>
             </div></main><footer class="wrapper">
             <ul class="learning-resources">
                 <h5>Learning Resources</h5>

diff --git a/docs/documentation/creating-and-rendering.html b/docs/documentation/creating-and-rendering.html
@@ -152,7 +152,8 @@ <h4 id="understanding-rendering" class="heading"><a href="#understanding-renderi
         </p><div class="code-snippet"><pre><code class="language-typescript theme-hybrid hljs" data-highlighted="yes">temp.<span class="hljs-title function_">unmount</span>()</code></pre></div><p>
             After you unmount, you can render the template again or use it to
             replace another.
-        </p></article>
+        </p><div class="doc-prev-next-nav"><a href="./examples" class="prev-page">&lt;&lt; Examples</a>
+        <a href="./template-values" class="next-page">Template values &gt;&gt;</a></div></article>
             </div></main><footer class="wrapper">
             <ul class="learning-resources">
                 <h5>Learning Resources</h5>

diff --git a/docs/documentation/custom-helper.html b/docs/documentation/custom-helper.html
@@ -184,7 +184,9 @@ <h1>
     t =&gt; t.status === <span class="hljs-string">"done"</span>
   ), 
   t =&gt; html`<span class="language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span></span><span class="hljs-subst">${t.name}</span><span class="language-xml"><span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span>`</span>
-)}</span><span class="language-xml">`</span>.<span class="hljs-title function_">render</span>(<span class="hljs-variable language_">document</span>.<span class="hljs-property">body</span>);</code></pre></div></article>
+)}</span><span class="language-xml">`</span>.<span class="hljs-title function_">render</span>(<span class="hljs-variable language_">document</span>.<span class="hljs-property">body</span>);</code></pre></div>
+        <div class="doc-prev-next-nav"><a href="./suspense-helper" class="prev-page">&lt;&lt; Suspense helper</a>
+        <a href="./function-components" class="next-page">Function Components &gt;&gt;</a></div></article>
             </div></main><footer class="wrapper">
             <ul class="learning-resources">
                 <h5>Learning Resources</h5>

diff --git a/docs/documentation/dom-references.html b/docs/documentation/dom-references.html
@@ -165,7 +165,9 @@ <h1>
 
 <span class="hljs-comment">// refs object will not contain the "loaded" ref</span>
 <span class="hljs-comment">// because it was never rendered</span>
-sample.<span class="hljs-property">refs</span> <span class="hljs-comment">// {loading: [P]}</span></code></pre></div></article>
+sample.<span class="hljs-property">refs</span> <span class="hljs-comment">// {loading: [P]}</span></code></pre></div>
+        <div class="doc-prev-next-nav"><a href="./replacing-content" class="prev-page">&lt;&lt; Replacing content</a>
+        <a href="./conditional-attributes" class="next-page">Conditional attributes &gt;&gt;</a></div></article>
             </div></main><footer class="wrapper">
             <ul class="learning-resources">
                 <h5>Learning Resources</h5>

diff --git a/docs/documentation/dynamic-values-and-update.html b/docs/documentation/dynamic-values-and-update.html
@@ -153,7 +153,8 @@ <h1>
             It also means that the template will also re-check dynamic values
             that did not change. You will learn how to address this later when
             you learn about <a href="./state-values">states</a>.
-        </p></article>
+        </p><div class="doc-prev-next-nav"><a href="./event-handling" class="prev-page">&lt;&lt; Event handling</a>
+        <a href="./state-values" class="next-page">State values &gt;&gt;</a></div></article>
             </div></main><footer class="wrapper">
             <ul class="learning-resources">
                 <h5>Learning Resources</h5>

diff --git a/docs/documentation/effect-helper.html b/docs/documentation/effect-helper.html
@@ -143,7 +143,9 @@ <h3 id="effect-format" class="heading"><a href="#effect-format">Effect format</a
             argument should be the action to take or the "thing" you need to be
             returned.
         </p>
-        <p><code>effect(STATE, ...STATE, SIDE_EFFECT_ACTION)</code></p><div class="code-snippet"><pre><code class="language-typescript theme-hybrid hljs" data-highlighted="yes"><span class="hljs-title function_">effect</span>(activeTab, currentPath, contentLoader)</code></pre></div></article>
+        <p><code>effect(STATE, ...STATE, SIDE_EFFECT_ACTION)</code></p><div class="code-snippet"><pre><code class="language-typescript theme-hybrid hljs" data-highlighted="yes"><span class="hljs-title function_">effect</span>(activeTab, currentPath, contentLoader)</code></pre></div>
+        <div class="doc-prev-next-nav"><a href="./what-is-a-helper" class="prev-page">&lt;&lt; What is a Helper?</a>
+        <a href="./conditional-rendering" class="next-page">Conditional Rendering &gt;&gt;</a></div></article>
             </div></main><footer class="wrapper">
             <ul class="learning-resources">
                 <h5>Learning Resources</h5>

diff --git a/docs/documentation/essential-training.html b/docs/documentation/essential-training.html
@@ -143,7 +143,9 @@ <h1>
                                         <a href="#state-store">State store</a>
                                     </li></ul>
                     </li></ol>
-        </div></article>
+        </div>
+    <div class="doc-prev-next-nav"><a href="./installation" class="prev-page">&lt;&lt; Installation</a>
+        <a href="./tutorial" class="next-page">Tutorial &gt;&gt;</a></div></article>
             </div></main><footer class="wrapper">
             <ul class="learning-resources">
                 <h5>Learning Resources</h5>

diff --git a/docs/documentation/event-handling.html b/docs/documentation/event-handling.html
@@ -128,7 +128,8 @@ <h3 id="event-options" class="heading"><a href="#event-options">Event options</a
 <span class="hljs-comment">// renders: &lt;button&gt;click me&lt;/button&gt;</span></code></pre></div><p>
             All you need to do is add a comma followed by the option you want to
             provide to the listener.
-        </p></article>
+        </p><div class="doc-prev-next-nav"><a href="./conditional-attributes" class="prev-page">&lt;&lt; Conditional attributes</a>
+        <a href="./dynamic-values-and-update" class="next-page">Dynamic values &amp; Update &gt;&gt;</a></div></article>
             </div></main><footer class="wrapper">
             <ul class="learning-resources">
                 <h5>Learning Resources</h5>

diff --git a/docs/documentation/examples.html b/docs/documentation/examples.html
@@ -84,7 +84,9 @@ <h1>
                                 </li></ul>
                     <a href="../documentation/examples" class="mobile-menu-close"></a>
                 </div>
-                <article><h2 id="examples" class="heading"><a href="#examples">Examples</a></h2></article>
+                <article><h2 id="examples" class="heading"><a href="#examples">Examples</a></h2>
+        <div class="doc-prev-next-nav"><a href="./tutorial" class="prev-page">&lt;&lt; Tutorial</a>
+        <a href="./creating-and-rendering" class="next-page">Creating &amp; Rendering &gt;&gt;</a></div></article>
             </div></main><footer class="wrapper">
             <ul class="learning-resources">
                 <h5>Learning Resources</h5>

diff --git a/docs/documentation/function-components.html b/docs/documentation/function-components.html
@@ -130,7 +130,9 @@ <h1>
 
 <span class="hljs-keyword">const</span> [name, updateName] = <span class="hljs-title function_">state</span>(<span class="hljs-string">""</span>)
 
-html`<span class="hljs-subst">${TextInput({value: name, onChange: updateName})}</span><span class="language-xml">`</span></code></pre></div></article>
+html`<span class="hljs-subst">${TextInput({value: name, onChange: updateName})}</span><span class="language-xml">`</span></code></pre></div>
+        <div class="doc-prev-next-nav"><a href="./custom-helper" class="prev-page">&lt;&lt; Custom helper</a>
+        <a href="./web-components" class="next-page">Web Components &gt;&gt;</a></div></article>
             </div></main><footer class="wrapper">
             <ul class="learning-resources">
                 <h5>Learning Resources</h5>

diff --git a/docs/documentation/index.html b/docs/documentation/index.html
@@ -187,7 +187,8 @@ <h1>
                     anywhere.
                 </dd>
             </dl>
-        </details></article>
+        </details><div class="doc-prev-next-nav"><span></span>
+        <a href="./installation" class="next-page">Installation &gt;&gt;</a></div></article>
             </div></main><footer class="wrapper">
             <ul class="learning-resources">
                 <h5>Learning Resources</h5>

diff --git a/docs/documentation/installation.html b/docs/documentation/installation.html
@@ -110,7 +110,8 @@ <h3 id="via-yarn" class="heading"><a href="#via-yarn">Via yarn</a></h3>
         <h3 id="typescript" class="heading"><a href="#typescript">Typescript</a></h3><p>
             This package was built using typescript. There is no need to install
             a separate type package for it. All types are exported with it.
-        </p></article>
+        </p><div class="doc-prev-next-nav"><a href="." class="prev-page">&lt;&lt; What is Markup?</a>
+        <a href="./essential-training" class="next-page">Essential Training &gt;&gt;</a></div></article>
             </div></main><footer class="wrapper">
             <ul class="learning-resources">
                 <h5>Learning Resources</h5>

diff --git a/docs/documentation/is-isnot-helpers.html b/docs/documentation/is-isnot-helpers.html
@@ -116,7 +116,9 @@ <h1>
         <h3 id="isnot-helper" class="heading"><a href="#isnot-helper">isNot helper</a></h3><p>
             The <code>isNot</code> helper works the same as the
             <code>is</code> helper but checks the opposite.
-        </p><div class="code-snippet"><pre><code class="language-typescript theme-hybrid hljs" data-highlighted="yes">html`<span class="hljs-subst">${isNot(val, isNumber)}</span><span class="language-xml">`</span></code></pre></div></article>
+        </p><div class="code-snippet"><pre><code class="language-typescript theme-hybrid hljs" data-highlighted="yes">html`<span class="hljs-subst">${isNot(val, isNumber)}</span><span class="language-xml">`</span></code></pre></div>
+        <div class="doc-prev-next-nav"><a href="./repetition-and-lists" class="prev-page">&lt;&lt; Repetition &amp; Lists</a>
+        <a href="./or-and-oneof-helpers" class="next-page">Or, And, &amp; OneOf helpers &gt;&gt;</a></div></article>
             </div></main><footer class="wrapper">
             <ul class="learning-resources">
                 <h5>Learning Resources</h5>

diff --git a/docs/documentation/or-and-oneof-helpers.html b/docs/documentation/or-and-oneof-helpers.html
@@ -124,7 +124,9 @@ <h3 id="oneof-helper" class="heading"><a href="#oneof-helper">oneOf helper</a></
         <p>
             <code>oneOf(VALUE_OR_STATE, ARRAY_OF_VALUE_OR_STATE)</code> where
             the values can be anything including a state value.
-        </p><div class="code-snippet"><pre><code class="language-typescript theme-hybrid hljs" data-highlighted="yes">html`<span class="hljs-subst">${oneOf(val, [<span class="hljs-string">"one"</span>, <span class="hljs-string">"two"</span>, <span class="hljs-string">"three"</span>])}</span><span class="language-xml">`</span></code></pre></div></article>
+        </p><div class="code-snippet"><pre><code class="language-typescript theme-hybrid hljs" data-highlighted="yes">html`<span class="hljs-subst">${oneOf(val, [<span class="hljs-string">"one"</span>, <span class="hljs-string">"two"</span>, <span class="hljs-string">"three"</span>])}</span><span class="language-xml">`</span></code></pre></div>
+        <div class="doc-prev-next-nav"><a href="./is-isnot-helpers" class="prev-page">&lt;&lt; Is &amp; IsNot helpers</a>
+        <a href="./pick-helper" class="next-page">Pick helper &gt;&gt;</a></div></article>
             </div></main><footer class="wrapper">
             <ul class="learning-resources">
                 <h5>Learning Resources</h5>

diff --git a/docs/documentation/pick-helper.html b/docs/documentation/pick-helper.html
@@ -133,7 +133,9 @@ <h1>
             example the length or size.
         </p><div class="code-snippet"><pre><code class="language-typescript theme-hybrid hljs" data-highlighted="yes">html`<span class="hljs-subst">${pick(list, <span class="hljs-string">'length'</span>)}</span><span class="language-xml">`</span>
 
-html`<span class="hljs-subst">${pick(set, <span class="hljs-string">'size'</span>)}</span><span class="language-xml">`</span></code></pre></div></article>
+html`<span class="hljs-subst">${pick(set, <span class="hljs-string">'size'</span>)}</span><span class="language-xml">`</span></code></pre></div>
+        <div class="doc-prev-next-nav"><a href="./or-and-oneof-helpers" class="prev-page">&lt;&lt; Or, And, &amp; OneOf helpers</a>
+        <a href="./suspense-helper" class="next-page">Suspense helper &gt;&gt;</a></div></article>
             </div></main><footer class="wrapper">
             <ul class="learning-resources">
                 <h5>Learning Resources</h5>

diff --git a/docs/documentation/repetition-and-lists.html b/docs/documentation/repetition-and-lists.html
@@ -182,7 +182,8 @@ <h1>
             The cache is updated whenever there is a change in the item
             reference or position in the list. But only the things that change
             will be updated in the cache map.
-        </p></article>
+        </p><div class="doc-prev-next-nav"><a href="./conditional-rendering" class="prev-page">&lt;&lt; Conditional Rendering</a>
+        <a href="./is-isnot-helpers" class="next-page">Is &amp; IsNot helpers &gt;&gt;</a></div></article>
             </div></main><footer class="wrapper">
             <ul class="learning-resources">
                 <h5>Learning Resources</h5>

diff --git a/docs/documentation/replacing-content.html b/docs/documentation/replacing-content.html
@@ -133,7 +133,8 @@ <h1>
 html`<span class="hljs-subst">${loadingIndicator}</span><span class="language-xml">`</span>
   .<span class="hljs-title function_">render</span>(<span class="hljs-variable language_">document</span>.<span class="hljs-property">body</span>);
 
-<span class="hljs-title function_">fetchContent</span>();</code></pre></div><p>This will have the same effect as an element.</p></article>
+<span class="hljs-title function_">fetchContent</span>();</code></pre></div><p>This will have the same effect as an element.</p><div class="doc-prev-next-nav"><a href="./template-values" class="prev-page">&lt;&lt; Template values</a>
+        <a href="./dom-references" class="next-page">DOM references &gt;&gt;</a></div></article>
             </div></main><footer class="wrapper">
             <ul class="learning-resources">
                 <h5>Learning Resources</h5>

diff --git a/docs/documentation/server-side-rendering.html b/docs/documentation/server-side-rendering.html
@@ -84,7 +84,9 @@ <h1>
                                 </li></ul>
                     <a href="../documentation/server-side-rendering" class="mobile-menu-close"></a>
                 </div>
-                <article><h2 id="server-side-rendering" class="heading"><a href="#server-side-rendering">Server Side Rendering</a></h2></article>
+                <article><h2 id="server-side-rendering" class="heading"><a href="#server-side-rendering">Server Side Rendering</a></h2>
+        <div class="doc-prev-next-nav"><a href="./web-components" class="prev-page">&lt;&lt; Web Components</a>
+        <a href="./state-store" class="next-page">State Store &gt;&gt;</a></div></article>
             </div></main><footer class="wrapper">
             <ul class="learning-resources">
                 <h5>Learning Resources</h5>

diff --git a/docs/documentation/state-store.html b/docs/documentation/state-store.html
@@ -156,9 +156,10 @@ <h1>
             helpers is all you need to create very complex applications.
         </p>
         <p>
-            We have prepared a full tutorial on how to create such application
+            We have prepared a full tutorial on how to create such application,
             and you can <a href="">watch it here</a> to learn more.
-        </p></article>
+        </p><div class="doc-prev-next-nav"><a href="./server-side-rendering" class="prev-page">&lt;&lt; Server Side Rendering</a>
+        <span></span></div></article>
             </div></main><footer class="wrapper">
             <ul class="learning-resources">
                 <h5>Learning Resources</h5>

diff --git a/docs/documentation/state-values.html b/docs/documentation/state-values.html
@@ -175,7 +175,8 @@ <h3 id="effect" class="heading"><a href="#effect">effect</a></h3><p>
             The <code>effect</code> is simply a type of <code>Helper</code> and
             you can learn more about <a href="./what-is-a-helper">helpers</a> in
             the next section of the doc.
-        </p></article>
+        </p><div class="doc-prev-next-nav"><a href="./dynamic-values-and-update" class="prev-page">&lt;&lt; Dynamic values &amp; Update</a>
+        <a href="./what-is-a-helper" class="next-page">What is a Helper? &gt;&gt;</a></div></article>
             </div></main><footer class="wrapper">
             <ul class="learning-resources">
                 <h5>Learning Resources</h5>

diff --git a/docs/documentation/suspense-helper.html b/docs/documentation/suspense-helper.html
@@ -121,7 +121,9 @@ <h1>
     .<span class="hljs-title function_">then</span>(<span class="hljs-function"><span class="hljs-params">res</span> =&gt;</span> html`<span class="hljs-subst">${repeat(res, renderTodo)}</span><span class="language-xml">`</span>)
 }
 
-html`<span class="hljs-subst">${suspense(loadTodos)}</span><span class="language-xml">`</span></code></pre></div></article>
+html`<span class="hljs-subst">${suspense(loadTodos)}</span><span class="language-xml">`</span></code></pre></div>
+        <div class="doc-prev-next-nav"><a href="./pick-helper" class="prev-page">&lt;&lt; Pick helper</a>
+        <a href="./custom-helper" class="next-page">Custom helper &gt;&gt;</a></div></article>
             </div></main><footer class="wrapper">
             <ul class="learning-resources">
                 <h5>Learning Resources</h5>

diff --git a/docs/documentation/template-values.html b/docs/documentation/template-values.html
@@ -236,7 +236,8 @@ <h3 id="functions" class="heading"><a href="#functions">Functions</a></h3><p>
             as it enhances the developer experience and makes native web
             component much more appealing.
             <a href="./web-components">learn more about working with Web Components</a>
-        </p></article>
+        </p><div class="doc-prev-next-nav"><a href="./creating-and-rendering" class="prev-page">&lt;&lt; Creating &amp; Rendering</a>
+        <a href="./replacing-content" class="next-page">Replacing content &gt;&gt;</a></div></article>
             </div></main><footer class="wrapper">
             <ul class="learning-resources">
                 <h5>Learning Resources</h5>

diff --git a/docs/documentation/tutorial.html b/docs/documentation/tutorial.html
@@ -133,7 +133,9 @@ <h1>
                                         <a href="#how-to-create-a-fullstack-website-with-markup">How to Create a FullStack Website with Markup</a>
                                     </li></ul>
                     </li></ol>
-        </div></article>
+        </div>
+    <div class="doc-prev-next-nav"><a href="./essential-training" class="prev-page">&lt;&lt; Essential Training</a>
+        <a href="./examples" class="next-page">Examples &gt;&gt;</a></div></article>
             </div></main><footer class="wrapper">
             <ul class="learning-resources">
                 <h5>Learning Resources</h5>