update examples

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

example/example_httpbeast.nim

@@ -0,0 +1,47 @@
+import ../src/tim
+import std/[options, asyncdispatch, macros,
+  os, strutils, times, json]
+import pkg/[httpbeast]
+
+from std/httpcore import HttpCode, Http200
+from std/net import Port
+
+include ./initializer
+
+proc resp(req: Request, view: string, layout = "base", code = Http200,
+    headers = "Content-Type: text/html", local = newJObject()) =
+  local["path"] = %*(req.path.get())
+  let htmlOutput = timl.render(view, layout, local = local)
+  req.send(code, htmlOutput, headers)
+
+proc onRequest(req: Request): Future[void] =
+  {.gcsafe.}:
+    let path = req.path.get()
+    case req.httpMethod.get()
+    of HttpGet:
+      case path
+      of "/":
+        req.resp("index",
+          local = %*{
+            "meta": {
+              "title": "Tim Engine is Awesome!"
+            }
+          })
+      of "/about":
+        req.resp("about", "secondary",
+          local = %*{
+            "meta": {
+              "title": "About Tim Engine"
+            }
+          })
+      req.resp("error", code = Http404, local = %*{
+        "meta": {
+          "title": "Oh, you're a genius!",
+          "msg": "Oh yes, yes. It's got action, it's got drama, it's got dance! Oh, it's going to be a hit hit hit!"
+        }
+      })
+    else: req.send(Http501)
+
+echo "Serving on http://localhost:8080"
+let serverSettings = initSettings(Port(8080), numThreads = 1)
+run(onRequest, serverSettings)

example/example_mummy.nim

@@ -0,0 +1,57 @@
+import std/[times, os, strutils, json]
+import pkg/[mummy, mummy/routers]
+
+include ./initializer
+
+#
+# Example Mummy + Tim Engine
+#
+template initHeaders {.dirty.} =
+  var headers: HttpHeaders
+  headers["Content-Type"] = "text/html"
+
+proc resp(req: Request, view: string, layout = "base",
+    local = newJObject(), code = 200) =
+  initHeaders()
+  {.gcsafe.}:
+    local["path"] = %*(req.path)
+    let output = timl.render(view, layout, local = local)
+  req.respond(200, headers, output)
+
+proc indexHandler(req: Request) =
+  req.resp("index", local = %*{
+    "meta": {
+      "title": "Tim Engine is Awesome!"
+      }
+    }
+  )
+
+proc aboutHandler(req: Request) =
+  req.resp("about", layout = "secondary",
+    local = %*{
+      "meta": {
+        "title": "About Tim Engine"
+      }
+    }
+  )
+
+proc e404(req: Request) =
+  req.resp("error", code = 404,
+    local = %*{
+      "meta": {
+        "title": "Oh, you're a genius!",
+        "msg": "Oh yes, yes. It's got action, it's got drama, it's got dance! Oh, it's going to be a hit hit hit!"
+      }
+    }
+  )
+
+var router: Router
+router.get("/", indexHandler)
+router.get("/about", aboutHandler)
+
+# Custom 404 handler
+router.notFoundHandler = e404
+
+let server = newServer(router)
+echo "Serving on http://localhost:8081"
+server.serve(Port(8081))

example/initializer.nim

@@ -0,0 +1,57 @@
+import ../src/tim
+
+#
+# Setup Tim Engine
+#
+var
+  timl = newTim(
+      src = "templates",
+      output = "storage",
+      basepath = currentSourcePath(),
+      minify = true,
+      indent = 2
+    )
+
+# some read-only data to expose inside templates
+# using the built-in `$app` constant
+let globalData = %*{
+    "year": parseInt(now().format("yyyy")),
+    "stylesheets": [
+      {
+        "type": "stylesheet",
+        "src": "https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
+      },
+      {
+        "type": "preconnect",
+        "src": "https://fonts.googleapis.com"
+      },
+      {
+        "type": "preconnect",
+        "src": "https://fonts.gstatic.com"
+      },
+      {
+        "type": "stylesheet",
+        "src": "https://fonts.googleapis.com/css2?family=Inter:[email protected]&display=swap"
+      }
+    ]
+  }
+# 2. Pre-compile discovered templates
+#    before booting your web app.
+#
+#    Note that `waitThread` will keep thread alive.
+#    This is required while in dev mode
+#    by the built-in file system monitor
+#    in order to rebuild templates.
+#
+#    Don't forget to enable hot code reload
+#    using `-d:timHotCode`
+var timThread: Thread[void]
+proc precompileEngine() {.thread.} =
+  {.gcsafe.}:
+    timl.precompile(
+      waitThread = true,
+      global = globalData,
+      flush = true,         # flush old cache on reboot
+    )
+
+createThread(timThread, precompileEngine)

example/templates/layouts/base.timl

@@ -1,12 +1,6 @@
 html
   head
-    meta charset="UTF-8"
-    meta name="viewport" content="width=device-width, initial-scale=1"
-    title: "Tim Engine is Awesome"
-    link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
-    link rel="preconnect" href="https://fonts.googleapis.com"
-    link rel="preconnect" href="https://fonts.gstatic.com" crossorigin=""
-    link href="https://fonts.googleapis.com/css2?family=Inter:[email protected]&display=swap" rel="stylesheet"
+    @include "meta/head"
     style: "
   body {
     background-color: #212121;
@@ -37,3 +31,4 @@ html
   "
   body
     @view
+    @include "ws"

example/templates/layouts/secondary.timl

@@ -0,0 +1,37 @@
+html
+  head
+    @include "meta/head"
+    style: "
+  body {
+    background-color: #1b0f5b;
+  }
+
+  body, .text-light {
+    color: #eeeedc !important
+  }
+
+  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

@@ -0,0 +1,25 @@
+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"
+      span.fw-bold.ms-2: "Check it on GitHub"
+    if $this.path == "/about":
+      a href="/" .btn.btn-link.text-light.btn-lg.rounded-pill.px-4.py-2:
+        "Go back to Homepage"
+div.text-center
+  p.mb-0: "© " & $app.year & " — Made by Humans from OpenPeeps"
+  p: "Open Source | LGPL-3.0 license"
+
+@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"
+@end

example/templates/partials/meta/head.timl

@@ -0,0 +1,5 @@
+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

@@ -0,0 +1,6 @@
+@js
+  {
+    const watchout = new WebSocket('ws://127.0.0.1:6502/ws');
+    watchout.addEventListener('message', () => location.reload());
+  }
+@end

example/templates/views/about.timl

@@ -0,0 +1,44 @@
+var boxes = [
+  {
+    title: "Chimney Sweep"
+    description: "Once feared for the soot they carried,
+      these skilled climbers cleaned fireplaces to prevent
+      fires and improve indoor air quality" 
+  }
+  {
+    title: "Town Crier"
+    description: "With booming voices and ringing bells,
+      they delivered news and announcements in the days
+      before mass media"
+  }
+  {
+    title: "Ratcatcher"
+    description: "These pest controllers faced smelly
+      challenges, but their work helped prevent the
+      spread of diseases like the plague"
+  }
+  {
+    title: "Ancient Rome"
+    description: "In ancient Rome, gladiators sometimes fought wild animals while wearing costumes of mythological figures"
+  }
+  {
+    title: "The first traffic light"
+    description: "Was installed in London in 1868 and used gas lanterns to signal stop and go."
+  }
+  {
+    title: "The Great Wall at once?"
+    description: "Nope. It wasn't built all at once, but over centuries by different dynasties."
+  }
+]
+
+section.pt-5 > div.container
+  div.row > div#content-zone.col-lg-7.mx-auto
+    div.text-center > img src="https://raw.githubusercontent.com/openpeeps/tim/main/.github/timengine.png" alt="Tim Engine" width="200px"
+    h1.display-4.fw-bold:
+      "Some pure random Forgotten Professions & Historical Oddities"
+  div.row.my-3.g-4
+    for $box in $boxes:
+      div.col-lg-4.d-flex.align-items-stretch > div.card.bg-transparent.text-light.border-0 style="border-radius: 18px" > div.card-body.p-4
+        div.card-title.fw-bold.h4: $box.title
+        p.card-text: $box.description
+  @include "foot"

example/templates/views/error.timl

@@ -0,0 +1,5 @@
+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"