Fix the ID of the caveat

Author: Tao-VanJS

sitegen/x.ts

@@ -206,7 +206,7 @@ items.splice(1, 1, 5)
     }),
     p("You might notice how easy it is to serialize/deserialize a complex reactive object into/from external storage. This is indeed one notable benefit of reactive objects provided by ", SymLink("vanX.reactive", "#reactive-object"), "."),
     p("Note that we are calling ", InlineJs("items.filter(_ => 1)"), " before serializing to the JSON string via ", InlineJs("JSON.stringify"), ". This is because after some deletions of items, there will be ", Link("holes", "https://2ality.com/2015/09/holes-arrays-es6.html"), " in the ", Symbol("items"), " array, which can result ", Symbol("null"), " values in the result JSON string and cause problems when the JSON string is deserialized. ", InlineJs("items.filter(_ => 1)"), " eliminates the holes (See a ", Link("detailed explanation here", "https://github.com/vanjs-org/van/discussions/144#discussioncomment-7342023"), ")."),
-    p({id: "array-holes"}, Caveat(), "Because there might be holes in the reactive array after deletions of the items, the ", Symbol("length"), " property can't reliable tell the number of items in the array. You can use ", InlineJs("Object.keys(items).length"), " instead as in the ", Link("example below", "#example-1-sortable-list"), "."),
+    p({id: "caveat-array-holes"}, Caveat(), "Because there might be holes in the reactive array after deletions of the items, the ", Symbol("length"), " property can't reliable tell the number of items in the array. You can use ", InlineJs("Object.keys(items).length"), " instead as in the ", Link("example below", "#example-1-sortable-list"), "."),
     H3("Update, insert, delete and reorder items in batch with ", Symbol("vanX.replace")),
     p("In addition to updating the ", Symbol("items"), " object one item at a time, we also provide the ", Symbol("vanX.replace"), " function that allows you to update, insert, delete and reorder items in batch. The ", Symbol("vanX.replace"), " function takes the ", Symbol("items"), " object and a replace function as its input parameters, and is responsible for updating the ", Symbol("items"), " object as well as UI elements bound to it based on the new data returned by the replace function. Let's take a look at a few examples:"),
     Js(`// Assume we have a few TODO items as following:

x.html

@@ -156,7 +156,7 @@ <h1 class="w3-padding-16 w3-xxxlarge">
     )),
   )
 }
-</code></pre><p><b>Demo:</b></p><p id="demo-todo-list"></p><p><a href="https://jsfiddle.net/gh/get/library/pure/vanjs-org/vanjs-org.github.io/tree/master/jsfiddle/x/todo-list">Try on jsfiddle</a></p><p>You might notice how easy it is to serialize/deserialize a complex reactive object into/from external storage. This is indeed one notable benefit of reactive objects provided by <code class="symbol"><a href="#reactive-object" class="w3-hover-opacity">vanX.reactive</a></code>.</p><p>Note that we are calling <code class="language-js">items.filter(_ =&gt; 1)</code>&nbsp;before serializing to the JSON string via <code class="language-js">JSON.stringify</code>. This is because after some deletions of items, there will be <a href="https://2ality.com/2015/09/holes-arrays-es6.html" class="w3-hover-opacity">holes</a> in the <code class="symbol">items</code> array, which can result <code class="symbol">null</code> values in the result JSON string and cause problems when the JSON string is deserialized. <code class="language-js">items.filter(_ =&gt; 1)</code> eliminates the holes (See a <a href="https://github.com/vanjs-org/van/discussions/144#discussioncomment-7342023" class="w3-hover-opacity">detailed explanation here</a>).</p><p id="array-holes">⚠️ <b>Caveat</b>: Because there might be holes in the reactive array after deletions of the items, the <code class="symbol">length</code> property can't reliable tell the number of items in the array. You can use <code class="language-js">Object.keys(items).length</code> instead as in the <a href="#example-1-sortable-list" class="w3-hover-opacity">example below</a>.</p><h3 class="w3-large w3-text-red" id="update-insert-delete-and-reorder-items-in-batch-with-vanx-replace"><a class="self-link" href="#update-insert-delete-and-reorder-items-in-batch-with-vanx-replace">Update, insert, delete and reorder items in batch with <code class="symbol">vanX.replace</code></a></h3><p>In addition to updating the <code class="symbol">items</code> object one item at a time, we also provide the <code class="symbol">vanX.replace</code> function that allows you to update, insert, delete and reorder items in batch. The <code class="symbol">vanX.replace</code> function takes the <code class="symbol">items</code>&nbsp;object and a replace function as its input parameters, and is responsible for updating the <code class="symbol">items</code> object as well as UI elements bound to it based on the new data returned by the replace function. Let's take a look at a few examples:</p><pre><code class="language-js">// Assume we have a few TODO items as following:
+</code></pre><p><b>Demo:</b></p><p id="demo-todo-list"></p><p><a href="https://jsfiddle.net/gh/get/library/pure/vanjs-org/vanjs-org.github.io/tree/master/jsfiddle/x/todo-list">Try on jsfiddle</a></p><p>You might notice how easy it is to serialize/deserialize a complex reactive object into/from external storage. This is indeed one notable benefit of reactive objects provided by <code class="symbol"><a href="#reactive-object" class="w3-hover-opacity">vanX.reactive</a></code>.</p><p>Note that we are calling <code class="language-js">items.filter(_ =&gt; 1)</code>&nbsp;before serializing to the JSON string via <code class="language-js">JSON.stringify</code>. This is because after some deletions of items, there will be <a href="https://2ality.com/2015/09/holes-arrays-es6.html" class="w3-hover-opacity">holes</a> in the <code class="symbol">items</code> array, which can result <code class="symbol">null</code> values in the result JSON string and cause problems when the JSON string is deserialized. <code class="language-js">items.filter(_ =&gt; 1)</code> eliminates the holes (See a <a href="https://github.com/vanjs-org/van/discussions/144#discussioncomment-7342023" class="w3-hover-opacity">detailed explanation here</a>).</p><p id="caveat-array-holes">⚠️ <b>Caveat</b>: Because there might be holes in the reactive array after deletions of the items, the <code class="symbol">length</code> property can't reliable tell the number of items in the array. You can use <code class="language-js">Object.keys(items).length</code> instead as in the <a href="#example-1-sortable-list" class="w3-hover-opacity">example below</a>.</p><h3 class="w3-large w3-text-red" id="update-insert-delete-and-reorder-items-in-batch-with-vanx-replace"><a class="self-link" href="#update-insert-delete-and-reorder-items-in-batch-with-vanx-replace">Update, insert, delete and reorder items in batch with <code class="symbol">vanX.replace</code></a></h3><p>In addition to updating the <code class="symbol">items</code> object one item at a time, we also provide the <code class="symbol">vanX.replace</code> function that allows you to update, insert, delete and reorder items in batch. The <code class="symbol">vanX.replace</code> function takes the <code class="symbol">items</code>&nbsp;object and a replace function as its input parameters, and is responsible for updating the <code class="symbol">items</code> object as well as UI elements bound to it based on the new data returned by the replace function. Let's take a look at a few examples:</p><pre><code class="language-js">// Assume we have a few TODO items as following:
 const todoItems = vanX.reactive([
   {text: "Implement VanX", done: true},
   {text: "Test VanX", done: false},

x/index.html

@@ -156,7 +156,7 @@ <h1 class="w3-padding-16 w3-xxxlarge">
     )),
   )
 }
-</code></pre><p><b>Demo:</b></p><p id="demo-todo-list"></p><p><a href="https://jsfiddle.net/gh/get/library/pure/vanjs-org/vanjs-org.github.io/tree/master/jsfiddle/x/todo-list">Try on jsfiddle</a></p><p>You might notice how easy it is to serialize/deserialize a complex reactive object into/from external storage. This is indeed one notable benefit of reactive objects provided by <code class="symbol"><a href="#reactive-object" class="w3-hover-opacity">vanX.reactive</a></code>.</p><p>Note that we are calling <code class="language-js">items.filter(_ =&gt; 1)</code>&nbsp;before serializing to the JSON string via <code class="language-js">JSON.stringify</code>. This is because after some deletions of items, there will be <a href="https://2ality.com/2015/09/holes-arrays-es6.html" class="w3-hover-opacity">holes</a> in the <code class="symbol">items</code> array, which can result <code class="symbol">null</code> values in the result JSON string and cause problems when the JSON string is deserialized. <code class="language-js">items.filter(_ =&gt; 1)</code> eliminates the holes (See a <a href="https://github.com/vanjs-org/van/discussions/144#discussioncomment-7342023" class="w3-hover-opacity">detailed explanation here</a>).</p><p id="array-holes">⚠️ <b>Caveat</b>: Because there might be holes in the reactive array after deletions of the items, the <code class="symbol">length</code> property can't reliable tell the number of items in the array. You can use <code class="language-js">Object.keys(items).length</code> instead as in the <a href="#example-1-sortable-list" class="w3-hover-opacity">example below</a>.</p><h3 class="w3-large w3-text-red" id="update-insert-delete-and-reorder-items-in-batch-with-vanx-replace"><a class="self-link" href="#update-insert-delete-and-reorder-items-in-batch-with-vanx-replace">Update, insert, delete and reorder items in batch with <code class="symbol">vanX.replace</code></a></h3><p>In addition to updating the <code class="symbol">items</code> object one item at a time, we also provide the <code class="symbol">vanX.replace</code> function that allows you to update, insert, delete and reorder items in batch. The <code class="symbol">vanX.replace</code> function takes the <code class="symbol">items</code>&nbsp;object and a replace function as its input parameters, and is responsible for updating the <code class="symbol">items</code> object as well as UI elements bound to it based on the new data returned by the replace function. Let's take a look at a few examples:</p><pre><code class="language-js">// Assume we have a few TODO items as following:
+</code></pre><p><b>Demo:</b></p><p id="demo-todo-list"></p><p><a href="https://jsfiddle.net/gh/get/library/pure/vanjs-org/vanjs-org.github.io/tree/master/jsfiddle/x/todo-list">Try on jsfiddle</a></p><p>You might notice how easy it is to serialize/deserialize a complex reactive object into/from external storage. This is indeed one notable benefit of reactive objects provided by <code class="symbol"><a href="#reactive-object" class="w3-hover-opacity">vanX.reactive</a></code>.</p><p>Note that we are calling <code class="language-js">items.filter(_ =&gt; 1)</code>&nbsp;before serializing to the JSON string via <code class="language-js">JSON.stringify</code>. This is because after some deletions of items, there will be <a href="https://2ality.com/2015/09/holes-arrays-es6.html" class="w3-hover-opacity">holes</a> in the <code class="symbol">items</code> array, which can result <code class="symbol">null</code> values in the result JSON string and cause problems when the JSON string is deserialized. <code class="language-js">items.filter(_ =&gt; 1)</code> eliminates the holes (See a <a href="https://github.com/vanjs-org/van/discussions/144#discussioncomment-7342023" class="w3-hover-opacity">detailed explanation here</a>).</p><p id="caveat-array-holes">⚠️ <b>Caveat</b>: Because there might be holes in the reactive array after deletions of the items, the <code class="symbol">length</code> property can't reliable tell the number of items in the array. You can use <code class="language-js">Object.keys(items).length</code> instead as in the <a href="#example-1-sortable-list" class="w3-hover-opacity">example below</a>.</p><h3 class="w3-large w3-text-red" id="update-insert-delete-and-reorder-items-in-batch-with-vanx-replace"><a class="self-link" href="#update-insert-delete-and-reorder-items-in-batch-with-vanx-replace">Update, insert, delete and reorder items in batch with <code class="symbol">vanX.replace</code></a></h3><p>In addition to updating the <code class="symbol">items</code> object one item at a time, we also provide the <code class="symbol">vanX.replace</code> function that allows you to update, insert, delete and reorder items in batch. The <code class="symbol">vanX.replace</code> function takes the <code class="symbol">items</code>&nbsp;object and a replace function as its input parameters, and is responsible for updating the <code class="symbol">items</code> object as well as UI elements bound to it based on the new data returned by the replace function. Let's take a look at a few examples:</p><pre><code class="language-js">// Assume we have a few TODO items as following:
 const todoItems = vanX.reactive([
   {text: "Implement VanX", done: true},
   {text: "Test VanX", done: false},