Add links to VanGraph

Author: Tao-VanJS

index.html

@@ -110,6 +110,7 @@ export default (doc: HTMLDocument) => {
     VanJS: () => b("VanJS"),
     VanUI: () => b("VanUI"),
     VanX: () => b("VanX"),
+    VanGraph: () => b("VanGraph"),
     MiniVan: () => b("Mini-Van"),
     Demo: () => b("Demo:"),
     Caveat: () => ["⚠️ ", b("Caveat"), ": "],

sitegen/common.ts

@@ -4,7 +4,7 @@ import { HTMLDocument } from "https://deno.land/x/[email protected]/deno-dom-wasm
 
 export default (doc: HTMLDocument) => {
   const {tags: {a, b, blockquote, clipPath, defs, div, g, i, img, input, label, li, p, path, rect, span, svg, table, tbody, td, th, thead, title, tr, ul}} = van.vanWithDoc(doc)
-  const {BI, Demo, H1, H2, H3, Js, Link, MiniVan, Quote, Symbol, VanJS, VanUI, VanX} = common(doc)
+  const {BI, Demo, H1, H2, H3, Js, Link, MiniVan, Quote, Symbol, VanGraph, VanJS, VanUI, VanX} = common(doc)
 
   const mailIcon = svg({viewBox: "0 0 16 16", version: "1.1", width: 16, height: 16, "aria-hidden": true},
     path({"d": "M1.75 2h12.5c.966 0 1.75.784 1.75 1.75v8.5A1.75 1.75 0 0 1 14.25 14H1.75A1.75 1.75 0 0 1 0 12.25v-8.5C0 2.784.784 2 1.75 2ZM1.5 12.251c0 .138.112.25.25.25h12.5a.25.25 0 0 0 .25-.25V5.809L8.38 9.397a.75.75 0 0 1-.76 0L1.5 5.809v6.442Zm13-8.181v-.32a.25.25 0 0 0-.25-.25H1.75a.25.25 0 0 0-.25.25v.32L8 7.88Z"}),
@@ -116,6 +116,7 @@ van.add(document.body, Counter())
       li("Convert HTML or MD snippet to ", VanJS(), " code with our online ", Link("HTML/MD to ", VanJS(), " Converter", "/convert")),
       li("Check out ", Link(VanUI(), "/vanui"), " - A collection of grab 'n go reusable utility and UI components for ", VanJS()),
       li("Want reactive list, global app state, server-driven UI, serialization and more? Check out ", Link(VanX(), "/x"), " - The 1.2kB official ", VanJS(), " extension"),
+      li("Debugging complex dependencies in your app? checkout ", Link(VanGraph(), "https://github.com/vanjs-org/van/tree/main/graph")),
       li("Want server-side rendering? Check out ", Link(MiniVan(), "/minivan"), " and ", Link("Hydration", "/ssr"), " (the entire vanjs.org site is built on top of ", MiniVan(), ")"),
       li("For questions, feedback or general discussions, visit our ", Link("Discussions", "https://github.com/vanjs-org/van/discussions"), " page"),
     ),

sitegen/home.ts

@@ -4,7 +4,7 @@ import { HTMLDocument } from "https://deno.land/x/[email protected]/deno-dom-wasm
 
 export default (doc: HTMLDocument) => {
   const {tags: {b, br, div, i, li, p, span, ul}} = van.vanWithDoc(doc)
-  const {ApiTable, Demo, H1, H2, H3, InlineHtml, InlineJs, Js, JsFile, Link, Quote, Symbol, SymLink, VanJS} = common(doc)
+  const {ApiTable, Demo, H1, H2, H3, InlineHtml, InlineJs, Js, JsFile, Link, Quote, SymLink, Symbol, VanGraph, VanJS, VanX} = common(doc)
 
   return div({id: "content"},
     H1(VanJS(), ": Tutorial and API Reference"),
@@ -335,6 +335,8 @@ const val = v => {
       li("check out a list of ", Link("sample applications", "/demo"), " built with ", VanJS(), "."),
       li("read the in-depth discussion of a few ", Link("advanced topics", "/advanced"), "."),
       li("check out how to build a ", Link("fullstack app", "/ssr"), " with SSR, CSR and hydration."),
+      li("check out ", Link(VanX(), "/x"), " for more features: reactive list, global app state, server-driven UI, serialization, etc."),
+      li("debug complex dependencies in your app via ", Link(VanGraph(), "https://github.com/vanjs-org/van/tree/main/graph"), ".")
     ),
     H2("API Index"),
     p("Below is the list of all top-level APIs in ", VanJS(), ":"),

sitegen/tutorial.ts

@@ -331,7 +331,7 @@ <h1 class="w3-padding-16 w3-xxxlarge">
 }
 
 van.add(document.body, App())
-</code></pre><p><b>Demo:</b><span id="demo-poly-binding"></span></p><p><a href="https://jsfiddle.net/gh/get/library/pure/vanjs-org/vanjs-org.github.io/tree/master/jsfiddle/tutorial/poly-binding">Try on jsfiddle</a></p><h2 class="w3-xxlarge w3-text-red" id="the-end"><a class="self-link" href="#the-end">The End</a></h2><hr style="width:50px;border:5px solid red" class="w3-round"><p>🎉 Congratulations! You have completed the entire tutorial of <b>VanJS</b>. Now you can start your journey of building feature-rich applications!</p><p>To learn more, you can:</p><ul><li>check out a list of <a href="/demo" class="w3-hover-opacity">sample applications</a> built with <b>VanJS</b>.</li><li>read the in-depth discussion of a few <a href="/advanced" class="w3-hover-opacity">advanced topics</a>.</li><li>check out how to build a <a href="/ssr" class="w3-hover-opacity">fullstack app</a> with SSR, CSR and hydration.</li></ul><h2 class="w3-xxlarge w3-text-red" id="api-index"><a class="self-link" href="#api-index">API Index</a></h2><hr style="width:50px;border:5px solid red" class="w3-round"><p>Below is the list of all top-level APIs in <b>VanJS</b>:</p><ul><li><code class="symbol"><a href="#api-tags" class="w3-hover-opacity">van.tags</a></code></li><li><code class="symbol"><a href="#api-add" class="w3-hover-opacity">van.add</a></code></li><li><code class="symbol"><a href="#api-state" class="w3-hover-opacity">van.state</a></code></li><li><code class="symbol"><a href="#api-derive" class="w3-hover-opacity">van.derive</a></code></li><li><code class="symbol"><a href="ssr#api-hydrate" class="w3-hover-opacity">van.hydrate</a></code></li></ul></div>
+</code></pre><p><b>Demo:</b><span id="demo-poly-binding"></span></p><p><a href="https://jsfiddle.net/gh/get/library/pure/vanjs-org/vanjs-org.github.io/tree/master/jsfiddle/tutorial/poly-binding">Try on jsfiddle</a></p><h2 class="w3-xxlarge w3-text-red" id="the-end"><a class="self-link" href="#the-end">The End</a></h2><hr style="width:50px;border:5px solid red" class="w3-round"><p>🎉 Congratulations! You have completed the entire tutorial of <b>VanJS</b>. Now you can start your journey of building feature-rich applications!</p><p>To learn more, you can:</p><ul><li>check out a list of <a href="/demo" class="w3-hover-opacity">sample applications</a> built with <b>VanJS</b>.</li><li>read the in-depth discussion of a few <a href="/advanced" class="w3-hover-opacity">advanced topics</a>.</li><li>check out how to build a <a href="/ssr" class="w3-hover-opacity">fullstack app</a> with SSR, CSR and hydration.</li><li>check out <a href="/x" class="w3-hover-opacity"><b>VanX</b></a> for more features: reactive list, global app state, server-driven UI, serialization, etc.</li><li>debug complex dependencies in your app via <a href="https://github.com/vanjs-org/van/tree/main/graph" class="w3-hover-opacity"><b>VanGraph</b></a>.</li></ul><h2 class="w3-xxlarge w3-text-red" id="api-index"><a class="self-link" href="#api-index">API Index</a></h2><hr style="width:50px;border:5px solid red" class="w3-round"><p>Below is the list of all top-level APIs in <b>VanJS</b>:</p><ul><li><code class="symbol"><a href="#api-tags" class="w3-hover-opacity">van.tags</a></code></li><li><code class="symbol"><a href="#api-add" class="w3-hover-opacity">van.add</a></code></li><li><code class="symbol"><a href="#api-state" class="w3-hover-opacity">van.state</a></code></li><li><code class="symbol"><a href="#api-derive" class="w3-hover-opacity">van.derive</a></code></li><li><code class="symbol"><a href="ssr#api-hydrate" class="w3-hover-opacity">van.hydrate</a></code></li></ul></div>
         <aside id="toc"><ul><li><a href="#dom" class="w3-hover-opacity">DOM Composition and Manipulation</a><ul><li><a href="#your-first-vanjs-app-a-simple-hello-page" class="w3-hover-opacity">Your first VanJS app: a simple Hello page</a></li><li><a href="#api-tags" class="w3-hover-opacity">API reference: van.tags</a></li><li><a href="#svg-and-mathml-support" class="w3-hover-opacity">SVG and MathML Support</a></li><li><a href="#api-tagsns" class="w3-hover-opacity">API reference van.tags (for elements with custom namespace URI)</a></li><li><a href="#api-add" class="w3-hover-opacity">API reference: van.add</a></li><li><a href="#dom-nodes-already-in-the-document-tree-can-t-be-used-as-children" class="w3-hover-opacity">DOM nodes already in the document tree can't be used as children</a></li><li><a href="#fun-dom" class="w3-hover-opacity">Functional-style DOM tree building</a></li><li><a href="#on-event-handlers" class="w3-hover-opacity">on... event handlers</a></li></ul></li><li><a href="#state" class="w3-hover-opacity">State</a><ul><li><a href="#api-state" class="w3-hover-opacity">API reference: van.state</a></li><li><a href="#public-interface-of-state-objects" class="w3-hover-opacity">Public interface of State objects</a></li><li><a href="#state-val-is-immutable" class="w3-hover-opacity">State.val is immutable</a></li><li><a href="#derived-state" class="w3-hover-opacity">Derived state</a></li><li><a href="#api-derive" class="w3-hover-opacity">API reference: van.derive</a></li><li><a href="#side-effect" class="w3-hover-opacity">Side effect</a></li></ul></li><li><a href="#state-binding" class="w3-hover-opacity">State Binding</a><ul><li><a href="#state-typed-prop" class="w3-hover-opacity">State objects as properties</a></li><li><a href="#state-typed-child" class="w3-hover-opacity">State objects as child nodes</a></li><li><a href="#state-derived-prop" class="w3-hover-opacity">State-derived properties</a></li><li><a href="#state-derived-event-handlers" class="w3-hover-opacity">State-derived on... event handlers</a></li><li><a href="#state-derived-child" class="w3-hover-opacity">State-derived child nodes</a></li><li><a href="#removing-a-dom-node" class="w3-hover-opacity">Removing a DOM node</a></li><li><a href="#stateful-binding" class="w3-hover-opacity">Stateful binding</a></li><li><a href="#polymorphic-binding" class="w3-hover-opacity">Polymorphic Binding</a></li></ul></li><li><a href="#the-end" class="w3-hover-opacity">The End</a></li><li><a href="#api-index" class="w3-hover-opacity">API Index</a></li></ul></aside>
       </div>
     </div>

tutorial.html

@@ -331,7 +331,7 @@ <h1 class="w3-padding-16 w3-xxxlarge">
 }
 
 van.add(document.body, App())
-</code></pre><p><b>Demo:</b><span id="demo-poly-binding"></span></p><p><a href="https://jsfiddle.net/gh/get/library/pure/vanjs-org/vanjs-org.github.io/tree/master/jsfiddle/tutorial/poly-binding">Try on jsfiddle</a></p><h2 class="w3-xxlarge w3-text-red" id="the-end"><a class="self-link" href="#the-end">The End</a></h2><hr style="width:50px;border:5px solid red" class="w3-round"><p>🎉 Congratulations! You have completed the entire tutorial of <b>VanJS</b>. Now you can start your journey of building feature-rich applications!</p><p>To learn more, you can:</p><ul><li>check out a list of <a href="/demo" class="w3-hover-opacity">sample applications</a> built with <b>VanJS</b>.</li><li>read the in-depth discussion of a few <a href="/advanced" class="w3-hover-opacity">advanced topics</a>.</li><li>check out how to build a <a href="/ssr" class="w3-hover-opacity">fullstack app</a> with SSR, CSR and hydration.</li></ul><h2 class="w3-xxlarge w3-text-red" id="api-index"><a class="self-link" href="#api-index">API Index</a></h2><hr style="width:50px;border:5px solid red" class="w3-round"><p>Below is the list of all top-level APIs in <b>VanJS</b>:</p><ul><li><code class="symbol"><a href="#api-tags" class="w3-hover-opacity">van.tags</a></code></li><li><code class="symbol"><a href="#api-add" class="w3-hover-opacity">van.add</a></code></li><li><code class="symbol"><a href="#api-state" class="w3-hover-opacity">van.state</a></code></li><li><code class="symbol"><a href="#api-derive" class="w3-hover-opacity">van.derive</a></code></li><li><code class="symbol"><a href="ssr#api-hydrate" class="w3-hover-opacity">van.hydrate</a></code></li></ul></div>
+</code></pre><p><b>Demo:</b><span id="demo-poly-binding"></span></p><p><a href="https://jsfiddle.net/gh/get/library/pure/vanjs-org/vanjs-org.github.io/tree/master/jsfiddle/tutorial/poly-binding">Try on jsfiddle</a></p><h2 class="w3-xxlarge w3-text-red" id="the-end"><a class="self-link" href="#the-end">The End</a></h2><hr style="width:50px;border:5px solid red" class="w3-round"><p>🎉 Congratulations! You have completed the entire tutorial of <b>VanJS</b>. Now you can start your journey of building feature-rich applications!</p><p>To learn more, you can:</p><ul><li>check out a list of <a href="/demo" class="w3-hover-opacity">sample applications</a> built with <b>VanJS</b>.</li><li>read the in-depth discussion of a few <a href="/advanced" class="w3-hover-opacity">advanced topics</a>.</li><li>check out how to build a <a href="/ssr" class="w3-hover-opacity">fullstack app</a> with SSR, CSR and hydration.</li><li>check out <a href="/x" class="w3-hover-opacity"><b>VanX</b></a> for more features: reactive list, global app state, server-driven UI, serialization, etc.</li><li>debug complex dependencies in your app via <a href="https://github.com/vanjs-org/van/tree/main/graph" class="w3-hover-opacity"><b>VanGraph</b></a>.</li></ul><h2 class="w3-xxlarge w3-text-red" id="api-index"><a class="self-link" href="#api-index">API Index</a></h2><hr style="width:50px;border:5px solid red" class="w3-round"><p>Below is the list of all top-level APIs in <b>VanJS</b>:</p><ul><li><code class="symbol"><a href="#api-tags" class="w3-hover-opacity">van.tags</a></code></li><li><code class="symbol"><a href="#api-add" class="w3-hover-opacity">van.add</a></code></li><li><code class="symbol"><a href="#api-state" class="w3-hover-opacity">van.state</a></code></li><li><code class="symbol"><a href="#api-derive" class="w3-hover-opacity">van.derive</a></code></li><li><code class="symbol"><a href="ssr#api-hydrate" class="w3-hover-opacity">van.hydrate</a></code></li></ul></div>
         <aside id="toc"><ul><li><a href="#dom" class="w3-hover-opacity">DOM Composition and Manipulation</a><ul><li><a href="#your-first-vanjs-app-a-simple-hello-page" class="w3-hover-opacity">Your first VanJS app: a simple Hello page</a></li><li><a href="#api-tags" class="w3-hover-opacity">API reference: van.tags</a></li><li><a href="#svg-and-mathml-support" class="w3-hover-opacity">SVG and MathML Support</a></li><li><a href="#api-tagsns" class="w3-hover-opacity">API reference van.tags (for elements with custom namespace URI)</a></li><li><a href="#api-add" class="w3-hover-opacity">API reference: van.add</a></li><li><a href="#dom-nodes-already-in-the-document-tree-can-t-be-used-as-children" class="w3-hover-opacity">DOM nodes already in the document tree can't be used as children</a></li><li><a href="#fun-dom" class="w3-hover-opacity">Functional-style DOM tree building</a></li><li><a href="#on-event-handlers" class="w3-hover-opacity">on... event handlers</a></li></ul></li><li><a href="#state" class="w3-hover-opacity">State</a><ul><li><a href="#api-state" class="w3-hover-opacity">API reference: van.state</a></li><li><a href="#public-interface-of-state-objects" class="w3-hover-opacity">Public interface of State objects</a></li><li><a href="#state-val-is-immutable" class="w3-hover-opacity">State.val is immutable</a></li><li><a href="#derived-state" class="w3-hover-opacity">Derived state</a></li><li><a href="#api-derive" class="w3-hover-opacity">API reference: van.derive</a></li><li><a href="#side-effect" class="w3-hover-opacity">Side effect</a></li></ul></li><li><a href="#state-binding" class="w3-hover-opacity">State Binding</a><ul><li><a href="#state-typed-prop" class="w3-hover-opacity">State objects as properties</a></li><li><a href="#state-typed-child" class="w3-hover-opacity">State objects as child nodes</a></li><li><a href="#state-derived-prop" class="w3-hover-opacity">State-derived properties</a></li><li><a href="#state-derived-event-handlers" class="w3-hover-opacity">State-derived on... event handlers</a></li><li><a href="#state-derived-child" class="w3-hover-opacity">State-derived child nodes</a></li><li><a href="#removing-a-dom-node" class="w3-hover-opacity">Removing a DOM node</a></li><li><a href="#stateful-binding" class="w3-hover-opacity">Stateful binding</a></li><li><a href="#polymorphic-binding" class="w3-hover-opacity">Polymorphic Binding</a></li></ul></li><li><a href="#the-end" class="w3-hover-opacity">The End</a></li><li><a href="#api-index" class="w3-hover-opacity">API Index</a></li></ul></aside>
       </div>
     </div>