Refactor: move all sample code to a dedicated dir to clean up the root dir

Author: Tao-VanJS

advanced-state-derivation.code.js renamed to sample-code/advanced-state-derivation.code.js

@@ -1,3 +1,4 @@
+import { join } from "https://deno.land/[email protected]/path/mod.ts"
 import van, { ChildDom as TypedChildDom } from "./mini-van.js"
 import { HTMLDocument, Element, Text } from "https://deno.land/x/[email protected]/deno-dom-wasm.ts"
 
@@ -91,7 +92,7 @@ export default (doc: HTMLDocument) => {
 
   interface FileOptions {trim?: boolean}
   const File = (lang: string, file: string, {trim = false}: FileOptions, codeOptions: CodeOptions) => {
-    let text = Deno.readTextFileSync(file)
+    let text = Deno.readTextFileSync(join("sample-code", file))
     if (trim) {
       const lines = text.split("\n")
       const tagImportingLine = lines.findIndex(l => l.includes("= van.tags"))

auto-complete-derived-props.code.ts renamed to sample-code/auto-complete-derived-props.code.ts

@@ -242,7 +242,7 @@ const TodoList = () => {
     p("You can also go fully reactive for the ", Symbol("TODO App"), ". That is, the entire state of the app is captured by a global ", Symbol("appState"), ". With the full reactivity it's easier to persist the ", Symbol("appState"), " into ", SymLink("localStorage", "https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage"), " so that the state is kept across page reloads."),
     p("Note that even if the app is fully reactive, we don't need to re-render the whole DOM tree for state updates, thanks to the optimization with ", Link("stateful binding", "/tutorial#stateful-binding"), "."),
     p(i("The code was implemented in TypeScript.")),
-    TsFile("code/todo-app/src/main.ts", {trim: true}),
+    TsFile("../code/todo-app/src/main.ts", {trim: true}),
     p(Demo()),
     p({id: "demo-todo-fully-reactive"}),
     p(Link("Try on CodeSandbox", "https://codesandbox.io/p/sandbox/github/vanjs-org/vanjs-org.github.io/tree/master/code/todo-app?file=/src/main.ts:1,1")),
@@ -282,7 +282,7 @@ const TodoList = () => {
     }),
     H2({id: "code-browser"}, "SPA w/ Client-Side Routing: Code Browser"),
     p("With ", VanJS(), ", you can built a single-page application with client-side routing support, thanks to ", VanJS(), "'s powerful builtin state management and state derivation:"),
-    TsFile("code/code-browser/src/main.js", {trim: true}),
+    TsFile("../code/code-browser/src/main.js", {trim: true}),
     p(Link("Try on CodeSandbox", "https://codesandbox.io/p/sandbox/github/vanjs-org/vanjs-org.github.io/tree/master/code/code-browser?file=/src/main.js:1,1")),
     H2("Stargazers"),
     p("The following code can show the number of stars for a Github repo, and a list of most recent stargazers:"),

auto-complete-stateful-dom-func.code.ts renamed to sample-code/auto-complete-stateful-dom-func.code.ts

@@ -69,7 +69,7 @@ van.add(document.body, Hello())
     Shell("npm install mini-van-plate"),
     H3({id: "npm-van-plate"}, Symbol("van-plate"), " mode"),
     p("In ", Symbol("van-plate"), " mode, HTML content is generated purely through text templating. It can be easily integrated with your HTTP server to render dynamic web content. See the sample code below:"),
-    JsFile("sitegen/node-examples/van-plate-server/van-plate-server.mjs"),
+    JsFile("../sitegen/node-examples/van-plate-server/van-plate-server.mjs"),
     p("Preview via ", Link("CodeSandbox", "https://codesandbox.io/p/sandbox/github/vanjs-org/vanjs-org.github.io/tree/master/sitegen/node-examples/van-plate-server?file=%2Fvan-plate-server.mjs%3A1%2C1"), "."),
     p("As illustrated in the example, ", Symbol("render"), " method can be called on the object returned from the ", SymLink("tag function", "/tutorial#api-tags"), " to generate a ", Symbol("string"), " that can be used for serving."),
     p(Symbol("van.html"), " is a helper function defined in ", Symbol("van-plate.js"), " that is equivalent to:",
@@ -81,7 +81,7 @@ van.add(document.body, Hello())
     p("First, install ", Symbol("jsdom"), ":"),
     Shell("npm install jsdom"),
     p("Sample code:"),
-    JsFile("sitegen/node-examples/mini-van-server/mini-van-server.mjs"),
+    JsFile("../sitegen/node-examples/mini-van-server/mini-van-server.mjs"),
     p("Preview via ", Link("CodeSandbox", "https://codesandbox.io/p/sandbox/github/vanjs-org/vanjs-org.github.io/tree/master/sitegen/node-examples/mini-van-server?file=%2Fmini-van-server.mjs%3A1%2C1"), "."),
     p("Similar to ", Symbol("van-plate"), " mode, we have a helper function ", Symbol("html"), " defined in ", Symbol("mini-van.js"), " which is equivalent to:"),
     Js(`(...args) => "<!DOCTYPE html>" + tags.html(...args).outerHTML`),
@@ -90,12 +90,12 @@ van.add(document.body, Hello())
     H3({id: "deno-van-plate"}, Symbol("van-plate"), " mode"),
     p("Sample code:"),
     div({style: "font-size: 0.9em;"}, i("Requires Deno ", Symbol("1.35"), " or later.")),
-    TsFile("sitegen/deno-examples/van-plate-server/van-plate-server.ts"),
+    TsFile("../sitegen/deno-examples/van-plate-server/van-plate-server.ts"),
     p("Preview via ", Link("CodeSandbox", "https://codesandbox.io/p/sandbox/github/vanjs-org/vanjs-org.github.io/tree/master/sitegen/deno-examples/van-plate-server?file=%2Fvan-plate-server.ts%3A1%2C1"), "."),
     H3({id: "deno-mini-van"}, Symbol("mini-van"), " mode"),
     p("Likewise, ", MiniVan(), " mode needs a 3rd-party DOM library to provide the ", Symbol("Document"), " object. We will show an example with the integration of ", SymLink("deno-dom", "https://deno.com/[email protected]/advanced/jsx_dom/deno_dom"), "."),
     div({style: "font-size: 0.9em;"}, i("Requires Deno ", Symbol("1.35"), " or later.")),
-    TsFile("sitegen/deno-examples/mini-van-server/mini-van-server.ts"),
+    TsFile("../sitegen/deno-examples/mini-van-server/mini-van-server.ts"),
     p("Preview via ", Link("CodeSandbox", "https://codesandbox.io/p/sandbox/github/vanjs-org/vanjs-org.github.io/tree/master/sitegen/deno-examples/mini-van-server?file=%2Fmini-van-server.ts%3A1%2C1"), "."),
     H2("Client-Side: Getting Started"),
     p("To get started on the client side, add the line below to your script:"),

calc-list.code.js renamed to sample-code/calc-list.code.js

@@ -68,7 +68,7 @@ export default (doc: HTMLDocument) => {
     p("Now, let's build some shared UI components that can run on both server-side and client-side."),
     H3("Static Component"),
     p("First, let's take a look at a static (non-reactive) component - ", Symbol("Hello"), ":"),
-    TsFile("hydration-example/src/components/hello.ts"),
+    TsFile("../hydration-example/src/components/hello.ts"),
     p("Compared to the ", SymLink("Hello", "/demo#hello-world"), " component in the \"VanJS by Example\" page, there are following notable differences:"),
     ul(
       li("The shared ", Symbol("Hello"), " component takes a ", Symbol("van"), " object as its input property. This is crucial to make ", Symbol("Hello"), " component cross-platform. Callers are responsible for providing the ", Symbol("van"), " object based on what's available in their specific environment so that the component can be agnostic to the execution environment. On the server-side, the ", Symbol("van"), " object from ", MiniVan(), " will be used (we can choose the ", Symbol("van"), " object from ", Symbol("van-plate"), " mode or from ", Symbol("mini-van"), " mode), whereas on the client-side, the ", Symbol("van"), " object from ", VanJS(), " will be used."),
@@ -78,7 +78,7 @@ export default (doc: HTMLDocument) => {
     p(b("Limitations: "), i("The typechecking for tag functions and ", Symbol("van.add"), " is quite limited. This is because it's hard to unify the type system across the common types between server-side and client-side.")),
     H3("Reactive Component"),
     p("Next, let's take a look at a reactive component - ", Symbol("Counter"), ":"),
-    TsFile("hydration-example/src/components/counter.ts"),
+    TsFile("../hydration-example/src/components/counter.ts"),
     p("Notable differences from the ", SymLink("Counter", "/demo#counter"), " component in the \"VanJS by Example\" page:"),
     ul(
       li("Similar to the ", Symbol("Hello"), " component, it takes a ", Symbol("van"), " object as its input property to make the component environment-agnostic."),
@@ -90,7 +90,7 @@ export default (doc: HTMLDocument) => {
     ),
     H2("Server-Side Script: HTML Template"),
     p("Now, let's build the server-side script that enables SSR:"),
-    TsFile("hydration-example/src/server.ts"),
+    TsFile("../hydration-example/src/server.ts"),
     p("The script implements a basic HTTP server with the built-in ", Symbol("node:http"), " module (no web framework needed). You will probably first notice this line:"),
     Ts('if (req.url?.endsWith(".js")) return serveFile(req, res, finalhandler(req, res))'),
     p("This is to tell the HTTP server to serve the file statically if any ", Symbol(".js"), " file is requested."),
@@ -131,7 +131,7 @@ styleSelectDom.oninput = e => buttonStyle.val = (<HTMLSelectElement>e.target).va
 `),
     p("Since ", Symbol("buttonStyle"), " is passed into the ", Symbol("Counter"), " component where its ", Symbol("val"), " property is referenced, the hydrated ", Symbol("Counter"), " component will be reactive to the change of ", Symbol("buttonStyle"), " state."),
     p("Note that, this is an illustrative example to show how to make the entire hydrated component reactive to external states. In practice, the implementation of ", Symbol("Counter"), " component can be optimized to only make the ", InlineHtml("<button>"), "s' child text nodes of the ", Symbol("Counter"), " component reactive to ", Symbol("buttonStyle"), " state. This can be achieved by binding more localized DOM nodes (i.e.: the child text nodes of ", InlineHtml("<button>"), "s) to the ", Symbol("buttonStyle"), " state. You can check out the implementation below for an optimized ", Symbol("Counter"), " component:"),
-    TsFile("hydration-example/src/components/optimized-counter.ts"),
+    TsFile("../hydration-example/src/components/optimized-counter.ts"),
     H3({id: "api-hydrate"}, "API reference: ", Symbol("van.hydrate")),
     ApiTable({
       signature: "van.hydrate(dom, f) => undefined",

calculator.code.js renamed to sample-code/calculator.code.js

@@ -424,7 +424,7 @@ async function* serverStateUpdates() {
 }
 `,
       "data-suffix": "van.add(document.body, ChatApp())",
-      "data-css-file": "chat-app.code.css",
+      "data-css-file": "sample-code/chat-app.code.css",
     }),
     p("Note that in the jsfiddle preview link above, we're simulating the server-side state updates. In real-world applications, state updates can be sent from server via ", Link(Symbol("WebSocket"), " messages", "https://developer.mozilla.org/en-US/docs/Web/API/WebSocket/message_event"), ", or ", Link("HTTP polling", "https://medium.com/cache-me-out/http-polling-and-long-polling-bd3f662a14f"), "."),
     H3({id: "serialization-and-compact"}, "Serialization app state and ", Symbol("vanX.compact")),