2024-01-08 21:04:02 -05:00
11 changed files with 51 additions and 3643 deletions
--- a/.gitignore
+++ b/.gitignore
@ -1,9 +1,10 @@
 # Nimcache
 nimcache/
 cache/
+build/

 # Garbage
 *.exe
+*.js
 *.log
 *.lg
-main
--- a/README.md
+++ b/README.md
@ -1,6 +1,6 @@
 # [Blog in a Matrix](https://bloginamatrix.xyz)

-New server side rendered blog site written in Nim.
+New single page blog site application written in Nim.

 Articles/blogs written in markdown using [Joplin](https://github.com/laurent22/joplin/ "The best notes app/markdown editor ever made.") then exported as `HTML` to the `/src/public` directory. Joplin has support for [the extended markdown syntax](https://github.com/laurent22/joplin/blob/dev/readme/markdown.md), [KaTeX](https://khan.github.io/KaTeX/), and [Mermaid.js](https://mermaidjs.github.io/) out of the box. The syntax can be farther extended with [plugins](https://github.com/joplin/plugins/) (e.g. [music sheet notation](https://github.com/joplin/plugin-abc-sheet-music)).

@ -18,20 +18,8 @@ Install Nim dependencies:
 nimble install happyx
 ```

-Build website:
+Development server:

 ```sh
-nim c "src/main.nim"
-```
-
-Run HTTP server:
-
-```sh
-./main
-```
-
-Build debug site and run server using a single command:
-
-```sh
-nim c -d:debug -r "src/main.nim"
+npx dev --reload
 ```
--- a/happyx.cfg
+++ b/happyx.cfg
@ -2,7 +2,9 @@

 [Main]
 projectName = Blog in a Matrix
-projectType = SSR
-mainFile = main  # main script filename (without extension)
-srcDir = src  # source directory
-assetsDir = public
+projectType = SPA
+mainFile = main  # main script filename (without extension) that should be launched with hpx dev command
+srcDir = src  # source directory in project root
+buildDir = build  # build directory in project root
+assetsDir = public  # assets directory in srcDir, will copied into build/public
+language = nim  # programming language
--- a/src/articles/test.html
+++ b/src/articles/test.html
--- a/src/components/navigation.nim
+++ b/src/components/navigation.nim
@ -0,0 +1,13 @@
+# Import HappyX
+import happyx
+
+
+# Declare component
+component Nav:
+  # Declare HTML template
+  `template`:
+    # tDiv(class = "", id=""):
+    tNav(class="nav"):
+      "Hello, world!"
+  `script`:
+    echo "Start coding!"
--- a/src/index.html
+++ b/src/index.html
@ -0,0 +1,12 @@
+<!DOCTYPE html><html>
+  <head>
+    <meta charset="utf-8">
+    <title>Blog in a Matrix</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    
+  </head>
+  <body>
+    <div id="app"></div>
+    <script src="main.js"></script>
+  </body>
+</html>
--- a/src/main.nim
+++ b/src/main.nim
@ -1,34 +1,11 @@
-from os import fileExists
-import happyx
+# Import HappyX
+import
+  happyx,
+  path_params,
+  components/[navigation]

-# Declare template folder
-templateFolder("templates")
-
-# ? Renders template and returns HTML string
-proc renderPage(title: string): string =
-  renderTemplate("index.nimja")
-
-type httpErrors = object
-    code: string
-    # description: string
-
-# ? Serve at http://127.0.0.1:5000
-serve("127.0.0.1", 5000):
-
-  get "/":
-    req.answerHtml renderPage("")
-
-  get "/{article}":
-    req.answerHtml renderPage(article)
-
-  middleware:
-    echo req
-
-  notfound:
-    let error = httpErrors(code: "404")
-    return renderPage(error.code)
-
-# make base articles and assets publicly accessible
-  staticDir "src/articles"
-  staticDir "src/public"
-  staticDir "src/scripts"
+# Declare application with ID "app"
+appRoutes("app"):
+  "/":
+    # Component usage
+    component Nav
--- a/src/path_params.nim
+++ b/src/path_params.nim
@ -0,0 +1,5 @@
+import happyx
+
+
+pathParams:
+  id int
--- a/src/scripts/oneko.gif
+++ b/src/scripts/oneko.gif
--- a/src/scripts/oneko.js
+++ b/src/scripts/oneko.js
@ -1,210 +0,0 @@
-// oneko.js: https://github.com/adryd325/oneko.js
-
-(function oneko() {
-  const nekoEl = document.createElement("div");
-  let nekoPosX = 32;
-  let nekoPosY = 32;
-  let mousePosX = 0;
-  let mousePosY = 0;
-  const isReduced = window.matchMedia(`(prefers-reduced-motion: reduce)`) === true || window.matchMedia(`(prefers-reduced-motion: reduce)`).matches === true;
-  if (isReduced) {
-    return;
-  }
-
-  let frameCount = 0;
-  let idleTime = 0;
-  let idleAnimation = null;
-  let idleAnimationFrame = 0;
-  const nekoSpeed = 10;
-  const spriteSets = {
-    idle: [[-3, -3]],
-    alert: [[-7, -3]],
-    scratchSelf: [
-      [-5, 0],
-      [-6, 0],
-      [-7, 0],
-    ],
-    scratchWallN: [
-      [0, 0],
-      [0, -1],
-    ],
-    scratchWallS: [
-      [-7, -1],
-      [-6, -2],
-    ],
-    scratchWallE: [
-      [-2, -2],
-      [-2, -3],
-    ],
-    scratchWallW: [
-      [-4, 0],
-      [-4, -1],
-    ],
-    tired: [[-3, -2]],
-    sleeping: [
-      [-2, 0],
-      [-2, -1],
-    ],
-    N: [
-      [-1, -2],
-      [-1, -3],
-    ],
-    NE: [
-      [0, -2],
-      [0, -3],
-    ],
-    E: [
-      [-3, 0],
-      [-3, -1],
-    ],
-    SE: [
-      [-5, -1],
-      [-5, -2],
-    ],
-    S: [
-      [-6, -3],
-      [-7, -2],
-    ],
-    SW: [
-      [-5, -3],
-      [-6, -1],
-    ],
-    W: [
-      [-4, -2],
-      [-4, -3],
-    ],
-    NW: [
-      [-1, 0],
-      [-1, -1],
-    ],
-  };
-
-  function create() {
-    nekoEl.id = "oneko";
-    nekoEl.style.width = "32px";
-    nekoEl.style.height = "32px";
-    nekoEl.style.position = "fixed";
-    nekoEl.style.pointerEvents = "none";
-    nekoEl.style.backgroundImage = "url('/src/scripts/oneko.gif')";
-    nekoEl.style.imageRendering = "pixelated";
-    nekoEl.style.left = `${nekoPosX - 16}px`;
-    nekoEl.style.top = `${nekoPosY - 16}px`;
-    nekoEl.style.zIndex = Number.MAX_VALUE;
-
-    document.body.appendChild(nekoEl);
-
-    document.addEventListener("mousemove",function(){
-      mousePosX = event.clientX;
-      mousePosY = event.clientY;
-    });
-
-    window.onekoInterval = setInterval(frame, 100);
-  }
-
-  function setSprite(name, frame) {
-    const sprite = spriteSets[name][frame % spriteSets[name].length];
-    nekoEl.style.backgroundPosition = `${sprite[0] * 32}px ${sprite[1] * 32}px`;
-  }
-
-  function resetIdleAnimation() {
-    idleAnimation = null;
-    idleAnimationFrame = 0;
-  }
-
-  function idle() {
-    idleTime += 1;
-
-    // every ~ 20 seconds
-    if (
-      idleTime > 10 &&
-      Math.floor(Math.random() * 200) == 0 &&
-      idleAnimation == null
-    ) {
-      let avalibleIdleAnimations = ["sleeping", "scratchSelf"];
-      if (nekoPosX < 32) {
-        avalibleIdleAnimations.push("scratchWallW");
-      }
-      if (nekoPosY < 32) {
-        avalibleIdleAnimations.push("scratchWallN");
-      }
-      if (nekoPosX > window.innerWidth - 32) {
-        avalibleIdleAnimations.push("scratchWallE");
-      }
-      if (nekoPosY > window.innerHeight - 32) {
-        avalibleIdleAnimations.push("scratchWallS");
-      }
-      idleAnimation =
-        avalibleIdleAnimations[
-          Math.floor(Math.random() * avalibleIdleAnimations.length)
-        ];
-    }
-
-    switch (idleAnimation) {
-      case "sleeping":
-        if (idleAnimationFrame < 8) {
-          setSprite("tired", 0);
-          break;
-        }
-        setSprite("sleeping", Math.floor(idleAnimationFrame / 4));
-        if (idleAnimationFrame > 192) {
-          resetIdleAnimation();
-        }
-        break;
-      case "scratchWallN":
-      case "scratchWallS":
-      case "scratchWallE":
-      case "scratchWallW":
-      case "scratchSelf":
-        setSprite(idleAnimation, idleAnimationFrame);
-        if (idleAnimationFrame > 9) {
-          resetIdleAnimation();
-        }
-        break;
-      default:
-        setSprite("idle", 0);
-        return;
-    }
-    idleAnimationFrame += 1;
-  }
-
-  function frame() {
-    frameCount += 1;
-    const diffX = nekoPosX - mousePosX;
-    const diffY = nekoPosY - mousePosY;
-    const distance = Math.sqrt(diffX ** 2 + diffY ** 2);
-
-    if (distance < nekoSpeed || distance < 48) {
-      idle();
-      return;
-    }
-
-    idleAnimation = null;
-    idleAnimationFrame = 0;
-
-    if (idleTime > 1) {
-      setSprite("alert", 0);
-      // count down after being alerted before moving
-      idleTime = Math.min(idleTime, 7);
-      idleTime -= 1;
-      return;
-    }
-
-    let direction;
-    direction = diffY / distance > 0.5 ? "N" : "";
-    direction += diffY / distance < -0.5 ? "S" : "";
-    direction += diffX / distance > 0.5 ? "W" : "";
-    direction += diffX / distance < -0.5 ? "E" : "";
-    setSprite(direction, frameCount);
-
-    nekoPosX -= (diffX / distance) * nekoSpeed;
-    nekoPosY -= (diffY / distance) * nekoSpeed;
-
-    nekoPosX = Math.min(Math.max(16, nekoPosX), window.innerWidth - 16);
-    nekoPosY = Math.min(Math.max(16, nekoPosY), window.innerHeight - 16);
-
-    nekoEl.style.left = `${nekoPosX - 16}px`;
-    nekoEl.style.top = `${nekoPosY - 16}px`;
-  }
-
-  create();
-})();
--- a/src/templates/index.nimja
+++ b/src/templates/index.nimja
@ -1,81 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Blog in a Matrix</title>
-    <!-- begin tailwindcss -->
-    <script src="https://cdn.tailwindcss.com"></script>
-    <script>
-      tailwind.config = {
-        theme: {
-          extend: {
-            fontFamily: {
-              'sans': ['FiraCode'],
-              'serif': ['FiraCode'],
-              'mono': ['FiraCode'],
-              'asix': ['asix'],
-              'giga': ['giga']
-            }
-          },
-        }
-      };
-    </script>
-    <!-- end tailwindcss -->
-    <style>
-      .noise {
-        background-image: url(data:image/png;base64,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);
-      }
-
-      @font-face {
-        font-family: 'FiraCode';
-        src: url("/src/public/fonts/FiraCode-Regular.woff2") format("woff2");
-        }
-
-      @font-face {
-        font-family: 'asix';
-        src: url("/src/public/fonts/ASIX-FOUNDER.woff2") format("woff2");
-        }
-
-      @font-face {
-        font-family: 'asix';
-        src: url("/src/public/fonts/ASIX-FOUNDER-Italic.woff2") format("woff2");
-        font-style: italic;
-        }
-
-      @font-face {
-        font-family: 'giga';
-        src: url("/src/public/fonts/Giga.woff2") format("woff2");
-        }
-
-    </style>
-  </head>
-  <body
-    class="flex flex-col min-h-screen m-0 bg-gradient-to-br from-yellow-400 to-green-900"
-  >
-    <main class="flex flex-1 w-full max-sm:flex-col noise">
-      <nav class="text-center text-white w-64 max-md:w-32 max-sm:w-full bg-black">
-        <p class="font-asix">sidebar</p>
-        <ul class="list-none">
-          <li class="list-item cursor-pointer text-white mx-2 my-2 ring-1 ring-white/20 hover:ring-white/50 rounded"><a href="/">Home</a></li>
-          <li class="list-item cursor-pointer text-white mx-2 my-2 ring-1 ring-white/20 hover:ring-white/50 rounded"><a href="/test">test article</a></li>
-          <li class="list-item cursor-pointer text-white mx-2 my-2 ring-1 ring-white/20 hover:ring-white/50 rounded"><a href="/404">article does not exist</a></li>
-        </ul>
-      </nav>
-
-      <article class="flex items-center justify-center flex-1 m-14 max-md:m-7 max-sm:m-0 rounded-3xl max-sm:rounded-none bg-white/20 backdrop-blur-xl drop-shadow-lg noise">
-        <section class="w-full">
-          <script class="" src="/src/scripts/oneko.js"></script>
-          <h1 class="font-giga text-7xl text-center">Blog in a Matrix</h1>
-          {% if title == "" %}
-          {% elif title == "404" %}
-            Page does not exist.
-          {% else %}
-            <iframe class="w-full h-screen" src="/src/articles/{{title}}.html" seamless></iframe>
-          {% endif %}
-
-        </section>
-      </article>
-    </main>
-  </body>
-</html>