Added building and deployment of wasm-demo.

Refactored examples to better fit with the generated demo page.

.github/workflows/release.yml

@@ -41,6 +41,7 @@ jobs:
     if: ${{ startsWith(github.ref, 'refs/tags/v') }}
     permissions:
       contents: write
+      pages: write
     steps:
       - uses: actions/checkout@v4
       - uses: mlugg/setup-zig@v1
@@ -58,6 +59,23 @@ jobs:
         with:
           files: |
             ./build/vs.templ.js
+      - uses: oven-sh/setup-bun@v2
+        with:
+          bun-version: latest
+      - name: Build wasm-demo
+        run: |
+          cp -R examples ./dist/wasm-demo/static
+          cp ./build/vs.templ.js ./dist/wasm-demo/static
+          cd ./dist/wasm-demo
+          bun install
+          bun run build
+      - name: Deploy wasm-demo
+        uses: peaceiris/actions-gh-pages@v4
+        with:
+          github_token: ${{ secrets.GITHUB_TOKEN }}
+          publish_dir: ./dist/wasm-demo/build/
+          destination_dir: wasm-demo
+
   docs:
     uses: ./.github/workflows/docs.yml
     if: ${{ startsWith(github.ref, 'refs/tags/v') }}

README.md

@@ -7,7 +7,7 @@ It can be used to statically generate new files from a template definition and a
 Static templates can be seen as extremely simple programs serialized in XML which are interpreted by this preprocessor.
 They consume input data (also XML) to generated output XML.
 
-Details about the syntax & supported features are covered in a [dedicated page](./docs/syntax.md), or you might want to check some [examples](./examples/).
+Details about the syntax & supported features are covered in a [dedicated page](https://lazy-eggplant.github.io/vs.templ/next/docs), or you might want to check some [examples](https://lazy-eggplant.github.io/vs.templ/wasm-demo/).
 
 ## Examples
 
@@ -43,9 +43,7 @@ results in
 </ul>
 ```
 
-### Conditional rendering
-
-To be written
+For more examples check the [online playground](https://lazy-eggplant.github.io/vs.templ/wasm-demo/)!
 
 ## Usage
 

dist/wasm-demo/src/routes/+page.svelte

@@ -14,31 +14,41 @@
     PreopenDirectory,
   } from "@bjorn3/browser_wasi_shim";
 
+  const example_basic_entry = (str, title)=> {
+    return {
+          value: str,
+          title: title ?? `s:${str}`,
+          template: `./examples/basics/${str}/templ.xml`,
+          data: `./examples/basics/${str}/data.xml`
+    };
+  }
+
   const examples = [
     {
       title: "Basics",
       items: [
-        {
-          value: "default",
-          title: "Hello world",
-          template: "./examples/basics/default/template.xml",
-          data: "./examples/basics/default/data.xml",
-        },
-        {
-          value: "for",
-          title: "s:for",
-          template: "./examples/basics/for/template.xml",
-          data: "./examples/basics/for/data.xml",
-        },
+        example_basic_entry("default", "Hello world!"),
+        example_basic_entry("value"),
+        example_basic_entry("element"),
+        example_basic_entry("for-range"),
+        example_basic_entry("for"),
+        example_basic_entry("for-props"),
+        example_basic_entry("test"),
+        example_basic_entry("data"),
+        //example_basic_entry("include"),
       ],
     },
+    {
+      title: "Expressions",
+      items: [],
+    },
     {
       title: "Demos",
       items: [
         {
           value: "HTML Generation",
-          template: "./examples/advanced/html/template.xml",
-          data: "./examples/advanced/html/data.xml",
+          template: "./examples/advanced/html/templ.xml",
+          data: "./examples/advanced/html/data.0.xml",
         },
       ],
     },
@@ -183,7 +193,7 @@
     <PaneGroup direction="vertical">
       <Pane defaultSize={50}>
         <nav style="padding-left:0px;">
-          <div class="logo"><a href="/">vs.templ</a></div>
+          <div class="logo"><a href="https://lazy-eggplant.github.io/vs.templ">vs.templ</a></div>
           <div class="tabs">
             <a
               onclick={() => change_view("template")}

dist/website/index.html

@@ -56,7 +56,7 @@
                     Source</button></a>
             <a href="./docs"><button><i class="fa-solid fa-book"></i> Main documentation</button></a>
             <a href="./doxygen/html"><button><i class="fa-solid fa-book"></i> Doxygen reference</button></a>
-            <a href="./wasm-demo"><button>Online demo</button></a>
+            <a href="../wasm-demo"><button>Online demo</button></a>
             <button disabled><i class="fa-solid fa-comment"></i> Help</button>
         </nav>
         <hr />

examples/html/page-0.xml → examples/advanced/html/data.0.xml

@@ -1,5 +1,5 @@
 <!-- 
-./build/vs.templ ./examples/html/template.xhtml5 ./examples/html/page-0.xml
+./build/vs.templ ./examples/advanced/html/template.xml ./examples/advanced/html/data.0.xml
 -->
 
 <entry title="Page 0">

examples/advanced/html/data.1.xml

@@ -0,0 +1,5 @@
+<!-- 
+./build/vs.templ ./examples/advanced/html/template.xml ./examples/advanced/html/data.1.xml
+-->
+<entry title="Page 1">
+</entry>

examples/html/template.xhtml5 → examples/advanced/html/templ.xml

@@ -14,7 +14,7 @@
 <body>
     <main class="container">
         <h1 s:when=": false">Hello!</h1>
-        <s:include src="./examples/html/header.xhtml5">
+        <s:include src="./examples/advanced/html/header.template.xml">
             <h1>Placeholder title</h1>
             <p>Description stuff</p>
         </s:include>

examples/basics/data/data.xml

@@ -0,0 +1,4 @@
+<!--
+`./build/vs.templ ./examples/basics/data.templ.xml ./examples/basics/data.data.xml`
+-->
+<data></data>

examples/basic-features/data.templ.xml → examples/basics/data/templ.xml

@@ -1,7 +1,7 @@
 <document xmlns:s="vs.templ">
     <h1>Section A</h1>
     <ul>
-        <s:data tag="DATA" src="./examples/basic-features/data.ext-data.xml">
+        <s:data tag="DATA" src="./examples/basics/data/ext-data.xml">
             <s:for in="{DATA}/items/section-b/" sort-by="$~prop-a" order-by="desc">
                 <s:header>
                     <h3>Header</h3>

examples/basics/default/data.xml

@@ -0,0 +1,3 @@
+<root msg="Hello world!">
+    <!--Data goes here, feel free to structure this file as you want-->
+</root>

examples/basics/default/templ.xml

@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<html xmlns:s="vs.templ">
+    <body>
+        <h1>Template</h1>
+        <s:value src="/root~msg" />
+    </body>
+</html>

examples/basics/element/data.xml

@@ -0,0 +1,4 @@
+<!--
+`./build/vs.templ ./examples/basics/element/templ.xml ./examples/basics/element/data.xml`
+-->
+<data></data>

examples/basic-features/for-props.data.xml → examples/basics/for-props/data.xml

@@ -1,5 +1,5 @@
 <!--
-`./build/vs.templ ./examples/basic-features/for-props.templ.xml ./examples/basic-features/for-props.data.xml`
+`./build/vs.templ ./examples/basics/for-props.templ.xml ./examples/basics/for-props.data.xml`
 -->
 <items>
     <section-a prop-a="Value A-1" prop-b="Value A-2" prop-c="Value A-3"></section-a>

examples/basics/for-range/data.xml

@@ -0,0 +1,4 @@
+<!--
+`./build/vs.templ ./examples/basics/for-range/templ.xml ./examples/basics/for-range/data.xml`
+-->
+<data></data>

examples/basic-features/for.data.xml → examples/basics/for/data.xml

@@ -1,5 +1,5 @@
 <!--
-`./build/vs.templ ./examples/basic-features/for.templ.xml ./examples/basic-features/for.data.xml`
+`./build/vs.templ ./examples/basics/for/templ.xml ./examples/basics/for/data.xml`
 -->
 <items>
     <item prop-a="Value-E">Text E</item>

examples/basic-features/old.data.xml → examples/basics/old.data.xml

@@ -1,6 +1,6 @@
 <!-- 
 Test with:
-`./build/vs.templ ./examples/basic-features/old.templ.xml ./examples/basic-features/old.data.xml`
+`./build/vs.templ ./examples/basics/old.templ.xml ./examples/basics/old.data.xml`
 from the source root.
 -->
 

examples/basics/test/data.xml

@@ -0,0 +1,4 @@
+<!--
+`./build/vs.templ ./examples/basics/test/templ.xml ./examples/basics/test/data.xml`
+-->
+<data></data>

examples/basics/value/data.xml

@@ -0,0 +1,4 @@
+<!--
+`./build/vs.templ ./examples/basics/value/templ.xml ./examples/basics/value/data.xml`
+-->
+<data></data>