From 4dd93c1e0d8c23eef15317e4fa71abe18ddec154 Mon Sep 17 00:00:00 2001
From: Nikita Krupin <krupin.nikita0110@gmail.com>
Date: Fri, 28 Jul 2023 16:06:40 -0400
Subject: [PATCH] Fixes #84

---
 docs/components/Changelog.js | 247 ++++++++++++++++++-----------------
 docs/components/Examples.js  | 160 +++++++++++------------
 2 files changed, 206 insertions(+), 201 deletions(-)

diff --git a/docs/components/Changelog.js b/docs/components/Changelog.js
index 864c738..cf5da9a 100644
--- a/docs/components/Changelog.js
+++ b/docs/components/Changelog.js
@@ -1,125 +1,130 @@
 import { html } from '@src/index'
 
 export default function () {
-  return html`
-    <h1 id="changelog">Changelog</h1>
-    <h2>Alpha 9</h2>
-    <ul>
-      <li>
-        Significant performance improvements when creating new
-        <code>html</code> blocks with multiple expressions.
-      </li>
-      <li>
-        Improves DOM patching algorithm to explicitly operate on
-        <code>Text</code> nodes for faster update performance and improved
-        sanitation.
-      </li>
-      <li>
-        Fixes a bug with in <code>reactive</code> that caused wholesale
-        replacement of child objects to remove parent property updates.
-      </li>
-    </ul>
-    <h2>Alpha 8</h2>
-    <ul>
-      <li>
-        Fixes an issue with setting
-        <a href="https://developer.mozilla.org/en-US/docs/Glossary/IDL"
-          >IDL attributes</a
-        >
-        reactively multiple times.
-      </li>
-    </ul>
-    <h2>Alpha 7</h2>
-    <ul>
-      <li>
-        Introduces a dot <code>.</code> prefix for setting the an element’s
-        <a href="https://developer.mozilla.org/en-US/docs/Glossary/IDL"
-          >IDL attribute</a
-        >
-        (<a href="https://github.com/justin-schroeder/arrow-js/issues/33">#33</a
-        >).
-      </li>
-      <li>
-        Fixes a bug that could leave behind non-reactive template partials on
-        update when those partials were not the first or last DOM node children.
-        (<a href="https://github.com/justin-schroeder/arrow-js/issues/49">#49</a
-        >).
-      </li>
-      <li>
-        Replaces empty templates with a comment node to prevent an exception
-        from being thrown (<a
-          href="https://github.com/justin-schroeder/arrow-js/issues/37"
-          >#37</a
-        >).
-      </li>
-      <li>
-        Checkboxes now set the <code>checked</code> IDL attribute rather than
-        the content attribute (<a
-          href="https://github.com/justin-schroeder/arrow-js/issues/40"
-          >#40</a
-        >).
-      </li>
-    </ul>
-    <h2>Alpha 6</h2>
-    <ul>
-      <li>
-        Fixes an issue that cased watchers that modified reactive data to not
-        properly queue their own effects (<a
-          href="https://github.com/justin-schroeder/arrow-js/issues/31"
-          >#31</a
-        >).
-      </li>
-    </ul>
-    <h2>Alpha 5</h2>
-    <ul>
-      <li>
-        Binding the <code>value</code> attribute of input, textarea, and select
-        elements now changes the IDL property instead of the content attribute
-        (<a href="https://github.com/justin-schroeder/arrow-js/issues/31">#31</a
-        >).
-      </li>
-      <li>
-        Removes event listeners from Nodes that are removed from the DOM (<a
-          href="https://github.com/justin-schroeder/arrow-js/issues/11"
-          >#11</a
-        >).
-      </li>
-    </ul>
-    <h2>Alpha 4</h2>
-    <ul>
-      <li>Fixes a bug in keyed list rendering when unshifting.</li>
-    </ul>
-    <h2>Alpha 3</h2>
-    <ul>
-      <li>
-        Fixes a bug that caused unnecessary DOM patches on keyed lists (<a
-          href="https://github.com/justin-schroeder/arrow-js/issues/36"
-          >#36</a
-        >, thanks @jukart).
-      </li>
-    </ul>
-    <h2>Alpha 2</h2>
-    <ul>
-      <li>
-        Improved markup sanitation (<a
-          href="https://github.com/justin-schroeder/arrow-js/issues/18"
-          >#18</a
-        >).
-      </li>
-      <li>
-        Improved token replacement to prevent incorrectly structured tables (<a
-          href="https://github.com/justin-schroeder/arrow-js/issues/17"
-          >#17</a
-        >).
-      </li>
-      <li>
-        Adds <code>reactive</code>, <code>watch</code>, and
-        <code>html</code> aliases.
-      </li>
-    </ul>
-    <h2>Alpha 1</h2>
-    <ul>
-      <li>Initial public release of ArrowJS.</li>
-    </ul>
-  `
+  return html`<h1 id="changelog">Changelog</h1>
+    <section>
+      <h2>Alpha 9</h2>
+      <ul>
+        <li>
+          Significant performance improvements when creating new
+          <code>html</code> blocks with multiple expressions.
+        </li>
+        <li>
+          Improves DOM patching algorithm to explicitly operate on
+          <code>Text</code> nodes for faster update performance and improved
+          sanitation.
+        </li>
+        <li>
+          Fixes a bug with in <code>reactive</code> that caused wholesale
+          replacement of child objects to remove parent property updates.
+        </li>
+      </ul>
+      <h2>Alpha 8</h2>
+      <ul>
+        <li>
+          Fixes an issue with setting
+          <a href="https://developer.mozilla.org/en-US/docs/Glossary/IDL"
+            >IDL attributes</a
+          >
+          reactively multiple times.
+        </li>
+      </ul>
+      <h2>Alpha 7</h2>
+      <ul>
+        <li>
+          Introduces a dot <code>.</code> prefix for setting the an element’s
+          <a href="https://developer.mozilla.org/en-US/docs/Glossary/IDL"
+            >IDL attribute</a
+          >
+          (<a href="https://github.com/justin-schroeder/arrow-js/issues/33"
+            >#33</a
+          >).
+        </li>
+        <li>
+          Fixes a bug that could leave behind non-reactive template partials on
+          update when those partials were not the first or last DOM node
+          children. (<a
+            href="https://github.com/justin-schroeder/arrow-js/issues/49"
+            >#49</a
+          >).
+        </li>
+        <li>
+          Replaces empty templates with a comment node to prevent an exception
+          from being thrown (<a
+            href="https://github.com/justin-schroeder/arrow-js/issues/37"
+            >#37</a
+          >).
+        </li>
+        <li>
+          Checkboxes now set the <code>checked</code> IDL attribute rather than
+          the content attribute (<a
+            href="https://github.com/justin-schroeder/arrow-js/issues/40"
+            >#40</a
+          >).
+        </li>
+      </ul>
+      <h2>Alpha 6</h2>
+      <ul>
+        <li>
+          Fixes an issue that cased watchers that modified reactive data to not
+          properly queue their own effects (<a
+            href="https://github.com/justin-schroeder/arrow-js/issues/31"
+            >#31</a
+          >).
+        </li>
+      </ul>
+      <h2>Alpha 5</h2>
+      <ul>
+        <li>
+          Binding the <code>value</code> attribute of input, textarea, and
+          select elements now changes the IDL property instead of the content
+          attribute (<a
+            href="https://github.com/justin-schroeder/arrow-js/issues/31"
+            >#31</a
+          >).
+        </li>
+        <li>
+          Removes event listeners from Nodes that are removed from the DOM (<a
+            href="https://github.com/justin-schroeder/arrow-js/issues/11"
+            >#11</a
+          >).
+        </li>
+      </ul>
+      <h2>Alpha 4</h2>
+      <ul>
+        <li>Fixes a bug in keyed list rendering when unshifting.</li>
+      </ul>
+      <h2>Alpha 3</h2>
+      <ul>
+        <li>
+          Fixes a bug that caused unnecessary DOM patches on keyed lists (<a
+            href="https://github.com/justin-schroeder/arrow-js/issues/36"
+            >#36</a
+          >, thanks @jukart).
+        </li>
+      </ul>
+      <h2>Alpha 2</h2>
+      <ul>
+        <li>
+          Improved markup sanitation (<a
+            href="https://github.com/justin-schroeder/arrow-js/issues/18"
+            >#18</a
+          >).
+        </li>
+        <li>
+          Improved token replacement to prevent incorrectly structured tables
+          (<a href="https://github.com/justin-schroeder/arrow-js/issues/17"
+            >#17</a
+          >).
+        </li>
+        <li>
+          Adds <code>reactive</code>, <code>watch</code>, and
+          <code>html</code> aliases.
+        </li>
+      </ul>
+      <h2>Alpha 1</h2>
+      <ul>
+        <li>Initial public release of ArrowJS.</li>
+      </ul>
+    </section> `
 }
diff --git a/docs/components/Examples.js b/docs/components/Examples.js
index dea2b9a..80ef09d 100644
--- a/docs/components/Examples.js
+++ b/docs/components/Examples.js
@@ -1,90 +1,90 @@
 import { html } from '@src/index'
 
 export default function () {
-  return html`<section class="examples">
-    <h1 id="examples">Examples</h1>
-    <p>
-      To spice up your imagination of what Arrow can do, check out the following
-      basic examples.
-    </p>
+  return html`<h1 id="examples">Examples</h1>
+    <section class="examples">
+      <p>
+        To spice up your imagination of what Arrow can do, check out the
+        following basic examples.
+      </p>
 
-    <h3>Calculator</h3>
-    <p>A simple point and click calculator.</p>
-    <ul>
-      <li><a href="/demos/calculator.html">Demo</a></li>
-      <li>
-        <a
-          href="https://github.com/justin-schroeder/arrow-js/blob/master/docs/demos/components/calculator.js"
-          >Source code</a
-        >
-      </li>
-    </ul>
+      <h3>Calculator</h3>
+      <p>A simple point and click calculator.</p>
+      <ul>
+        <li><a href="/demos/calculator.html">Demo</a></li>
+        <li>
+          <a
+            href="https://github.com/justin-schroeder/arrow-js/blob/master/docs/demos/components/calculator.js"
+            >Source code</a
+          >
+        </li>
+      </ul>
 
-    <h3>Performance</h3>
-    <p>
-      A performance demonstration (Vue vs Arrow) with 500 nodes changing
-      reactively.
-    </p>
-    <ul>
-      <li><a href="/demos/fast-text.html">Demo</a></li>
-      <li>
-        <a
-          href="https://github.com/justin-schroeder/arrow-js/blob/master/docs/demos/fast-text.html"
-          >Source code</a
-        >
-      </li>
-    </ul>
+      <h3>Performance</h3>
+      <p>
+        A performance demonstration (Vue vs Arrow) with 500 nodes changing
+        reactively.
+      </p>
+      <ul>
+        <li><a href="/demos/fast-text.html">Demo</a></li>
+        <li>
+          <a
+            href="https://github.com/justin-schroeder/arrow-js/blob/master/docs/demos/fast-text.html"
+            >Source code</a
+          >
+        </li>
+      </ul>
 
-    <h3>Dropdown</h3>
-    <p>
-      A simple synthetic (not a native select element) dropdown list component
-      written with Arrow. Demonstrates Arrow’s ability to reuse code via
-      components.
-    </p>
-    <ul>
-      <li><a href="/demos/dropdowns.html">Demo</a></li>
-      <li>
-        <a
-          href="https://github.com/justin-schroeder/arrow-js/blob/master/docs/demos/components/dropdowns.js"
-          >Source code</a
-        >
-      </li>
-    </ul>
+      <h3>Dropdown</h3>
+      <p>
+        A simple synthetic (not a native select element) dropdown list component
+        written with Arrow. Demonstrates Arrow’s ability to reuse code via
+        components.
+      </p>
+      <ul>
+        <li><a href="/demos/dropdowns.html">Demo</a></li>
+        <li>
+          <a
+            href="https://github.com/justin-schroeder/arrow-js/blob/master/docs/demos/components/dropdowns.js"
+            >Source code</a
+          >
+        </li>
+      </ul>
 
-    <h3>Carousel</h3>
-    <p>A simple, interactive image carousel.</p>
-    <ul>
-      <li><a href="/demos/carousel.html">Demo</a></li>
-      <li>
-        <a
-          href="https://github.com/justin-schroeder/arrow-js/blob/master/docs/demos/components/carousel.js"
-          >Source code</a
-        >
-      </li>
-    </ul>
+      <h3>Carousel</h3>
+      <p>A simple, interactive image carousel.</p>
+      <ul>
+        <li><a href="/demos/carousel.html">Demo</a></li>
+        <li>
+          <a
+            href="https://github.com/justin-schroeder/arrow-js/blob/master/docs/demos/components/carousel.js"
+            >Source code</a
+          >
+        </li>
+      </ul>
 
-    <h3>Tabs</h3>
-    <p>A basic example of navigating through content with tabs.</p>
-    <ul>
-      <li><a href="/demos/tabs.html">Demo</a></li>
-      <li>
-        <a
-          href="https://github.com/justin-schroeder/arrow-js/blob/master/docs/demos/components/tabs.js"
-          >Source code</a
-        >
-      </li>
-    </ul>
+      <h3>Tabs</h3>
+      <p>A basic example of navigating through content with tabs.</p>
+      <ul>
+        <li><a href="/demos/tabs.html">Demo</a></li>
+        <li>
+          <a
+            href="https://github.com/justin-schroeder/arrow-js/blob/master/docs/demos/components/tabs.js"
+            >Source code</a
+          >
+        </li>
+      </ul>
 
-    <h3>min-gzip</h3>
-    <p>
-      Quickly check how your code compresses with gzip, brotli, and
-      minification.
-    </p>
-    <ul>
-      <li><a href="https://min-gzip.com" target="_blank">min-gzip.com</a></li>
-      <li>
-        <a href="https://github.com/arrow-js/min-gzip">Source code</a>
-      </li>
-    </ul>
-  </section>`
+      <h3>min-gzip</h3>
+      <p>
+        Quickly check how your code compresses with gzip, brotli, and
+        minification.
+      </p>
+      <ul>
+        <li><a href="https://min-gzip.com" target="_blank">min-gzip.com</a></li>
+        <li>
+          <a href="https://github.com/arrow-js/min-gzip">Source code</a>
+        </li>
+      </ul>
+    </section>`
 }