update examples

Signed-off-by: George Lemon <[email protected]>

example/initializer.nim

@@ -19,14 +19,19 @@ var
 tim.initModule:
   # initialize local module
   block:
-    proc sayHello(x: string): string =
+    proc sayHello(x: string): Node[ntLitString] =
       result = ast.newNode(ntLitString)
       result.sVal = args[0].value.sVal
 
 # some read-only data to expose inside templates
 # using the built-in `$app` constant
 let globalData = %*{
     "year": parseInt(now().format("yyyy")),
+    "watchout": {
+      "enable": true,
+      "port": 6502,
+      "delay": 300,
+    },
     "stylesheets": [
       {
         "type": "stylesheet",

example/templates/layouts/base.timl

@@ -2,33 +2,33 @@ html
   head
     @include "meta/head"
     style: """
-  body {
-    background-color: #212121;
-    color: whitesmoke
-  }
+      body {
+        background-color: #212121;
+        color: whitesmoke
+      }
 
-  body, h1, h2, h3, h4, h5, h6,
-  .h1, .h2, .h3, .h4, .h5, .h6{
-    font-family: 'Inter', sans-serif;
-  }
-  
-  .btn-primary {
-    --bs-btn-color: #fff;
-    --bs-btn-bg: #ea4444;
-    --bs-btn-border-color: #ea4444;
-    --bs-btn-hover-color: #fff;
-    --bs-btn-hover-bg: #c73434;
-    --bs-btn-hover-border-color: #c73434;
-    --bs-btn-focus-shadow-rgb: 49,132,253;
-    --bs-btn-active-color: #fff;
-    --bs-btn-active-bg: #b62929;
-    --bs-btn-active-border-color: #b62929;
-    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
-    --bs-btn-disabled-color: #fff;
-    --bs-btn-disabled-bg: #0d6efd;
-    --bs-btn-disabled-border-color: #0d6efd;
-  }
-  """
+      body, h1, h2, h3, h4, h5, h6,
+      .h1, .h2, .h3, .h4, .h5, .h6{
+        font-family: 'Inter', sans-serif;
+      }
+
+      .btn-primary {
+        --bs-btn-color: #fff;
+        --bs-btn-bg: #ea4444;
+        --bs-btn-border-color: #ea4444;
+        --bs-btn-hover-color: #fff;
+        --bs-btn-hover-bg: #c73434;
+        --bs-btn-hover-border-color: #c73434;
+        --bs-btn-focus-shadow-rgb: 49,132,253;
+        --bs-btn-active-color: #fff;
+        --bs-btn-active-bg: #b62929;
+        --bs-btn-active-border-color: #b62929;
+        --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
+        --bs-btn-disabled-color: #fff;
+        --bs-btn-disabled-bg: #0d6efd;
+        --bs-btn-disabled-border-color: #0d6efd;
+      }
+    """
   body
     @view
     @include "ws"

example/templates/partials/foot.timl

@@ -1,12 +1,16 @@
 div.row > div.col-12.text-center
   div.my-3#clickable
-    a.btn.btn-primary.btn-lg.rounded-pill.px-4.py-2 href="https://github.com/openpeeps/tim" target="_blank":
-      svg viewBox="0 0 24 24" width="24" height="24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" class="css-i6dzq1"
-        path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35
-                6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0
-                19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65
-                5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5
-                3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"
+    a.btn.btn-primary.btn-lg.rounded-pill.px-4.py-2
+      href="https://github.com/openpeeps/tim" target="_blank":
+        svg viewBox="0 0 24 24" width="24" height="24"
+          stroke="currentColor" stroke-width="2"
+          fill="none" stroke-linecap="round"
+          stroke-linejoin="round" class="css-i6dzq1"
+            path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35
+                    6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0
+                    19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65
+                    5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5
+                    3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"
       span.fw-bold.ms-2: "Check it on GitHub"
     if $this.path == "/about":
       a.btn.text-light.btn-lg.rounded-pill.px-4.py-2 href="/":
@@ -22,8 +26,10 @@ div.text-center
 @client target="#clickable"
   // transpile tim code to javascript for client-side rendering
   div.mt-3
-    a.text-secondary.text-decoration-none href="https://hetzner.cloud/?ref=Hm0mYGM9NxZ4" > small
-      span: "👉 Create a VPS using our link and 👇 "
-      br
-      span: "Get €20 in cloud credits from Hetzner"
+    a.text-secondary.text-decoration-none href="https://hetzner.cloud/?ref=Hm0mYGM9NxZ4"
+      style="border: 2px dotted; display: inline-block; padding: 10px; border-radius: 15px;"
+      small
+        span: "👉 Create a VPS using our link and 👇 "
+        br
+        span: "Get €20 in cloud credits from Hetzner"
 @end

example/templates/partials/meta/head.timl

@@ -1,5 +1,6 @@
 meta charset="UTF-8"
 meta name="viewport" content="width=device-width, initial-scale=1"
 title: $this.meta.title
+
 for $style in $app.stylesheets:
   link rel=$style.type href=$style.src

example/templates/partials/ws.timl

@@ -1,7 +1,8 @@
 if $app.watchout.enable:
+  const watchoutPort = $app.watchout.port
   @js
-    // use `%*` to pass data from Tim to Javascript
-    let watchoutSyncPort = %*app.watchout.port
+    // use to pass data from Tim to Javascript
+    let watchoutSyncPort = %*watchoutPort
     {
       function connectWatchoutServer() {      
         const watchout = new WebSocket(`ws://127.0.0.1:${watchoutSyncPort}/ws`);

example/templates/views/error.timl

@@ -1,5 +1,4 @@
 section.container > div.row.vh-100 > div.col-lg-7.mx-auto.align-self-center.text-center
   h1.display-5.fw-bold: "😅 " & $this.meta.title
   p.mb-4.h4.fw-normal.px-4 style="line-height: 1.8em": $this.meta.msg
-  // adding classes in the classic way is also possible!
   a href="/" class="btn btn-outline-secondary text-light btn-lg px-4 rounded-pill": "👉 Go back to Pantzini"

src/tim.nim

@@ -576,7 +576,8 @@ else:
   # Build Tim Engine as a standalone CLI application
   import pkg/kapsis
   import pkg/kapsis/[runtime, cli]
-  import timpkg/app/[astCmd, srcCmd, reprCmd, jitCmd, pkgCmd, vmCmd]
+  import timpkg/app/[astCmd, srcCmd, reprCmd]
+  #import timpkg/app/[jitCmd, pkgCmd, vmCmd]
 
   commands:
     -- "Source-to-Source"