Now there's a html page (no server) and single page version 😓

Patitotective · Aug 15, 2024 · 9ee4dd7 · 9ee4dd7
1 parent d477003
commit 9ee4dd7
Show file tree

Hide file tree

Showing 6 changed files with 77 additions and 43 deletions.
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
@@ -5,10 +5,12 @@ on:
     paths:
       - "src/**"
       - "public/**"
+      - ".github/workflows/ci.yml"
   pull_request:
     paths:
       - "src/**"
       - "public/**"
+      - ".github/workflows/ci.yml"
 jobs:
   ubuntu:
     runs-on: ubuntu-latest
@@ -22,18 +24,14 @@ jobs:
           nimble install -d -y
 
       - name: Frontend
-        run: nimble frontend
-
-      - name: Backend
-        run: nimble build
+        run: nimble htmlpage
 
       - name: Upload Artifacts
         uses: actions/upload-artifact@v4
         with:
           name: ubuntu
           path: |
-            app
-            public
+            dist
           if-no-files-found: error
 
   # windows:

diff --git a/grado.nimble b/grado.nimble
@@ -17,12 +17,33 @@ requires "prologue >= 0.6.4"
 requires "sass >= 0.2.0"
 requires "kdl >= 2.0.1"
 
-task frontend, "Compiles the frontend to JavaScript and builds the CSS":
+task css, "Builds the CSS":
   exec "nimble c -r --mm:refc src/buildcss"
-  exec "nim js --outdir:public/js src/frontend"
 
 task frontendjs, "Compiles the frontend to JavaScript":
   exec "nim js --outdir:public/js src/frontend"
 
-task css, "Builds the CSS":
-  exec "nimble c -r --mm:refc src/buildcss"
+task frontend, "Compiles the frontend to JavaScript and builds the CSS":
+  exec "nimble css"
+  exec "nim frontendjs"
+
+import std/strtabs
+import src/config as _
+
+task htmlpage, "Generates a single html page":
+  exec "nimble css"
+  exec "nim js -d:relativePath --out:dist/app.js src/frontend"
+
+  mkDir "dist"
+  cpFile "public/css/style.css", "dist/style.css"
+  cpDir "public/img", "dist/img"
+
+  writeFile "dist/index.html", readFile("public/karax.html") %
+    {
+      "title": config.title,
+      "frontend": "./app.js",
+      "style": "./style.css",
+      "favicon": "./img/favicon.ico"
+      # "timestamp": encodeUrl(CompileDate & CompileTime),
+      # "ga": config.ga
+    }.newStringTable()
diff --git a/public/karax.html b/public/karax.html
@@ -9,7 +9,7 @@
   <title>$title</title>
 
   <!-- Favicon -->
-  <link rel="icon" type="image/x-icon" href="/public/img/favicon.ico">
+  <link rel="icon" type="image/x-icon" href="$favicon">
 
   <!-- Bootstrap and FontAwesome -->
   <!-- <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous"> -->
@@ -24,7 +24,7 @@
   <!-- <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0" /> -->
 
   <!-- My Custom Css -->
-  <link rel="stylesheet" type="text/css" href="/public/css/style.css">
+  <link rel="stylesheet" type="text/css" href="$style">
   <!-- <link rel="stylesheet" type="text/css" href="/public/css/spectre/dist/spectre.min.css"> -->
   <!-- <link rel="stylesheet" type="text/css" href="/public/css/spectre/dist/spectre-icons.min.css"> -->
 
@@ -37,41 +37,57 @@
 
     <!-- gtag('config', '$ ga'); -->
   <!-- </script> -->
+
 </head>
 
 <body>
   <div id="ROOT"></div>
   <!-- Bootstrap -->
-  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
+  <!-- <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script> -->
 
   <!-- Matter.js -->
-  <script src="https://cdnjs.cloudflare.com/ajax/libs/matter-js/0.19.0/matter.min.js" integrity="sha512-0z8URjGET6GWnS1xcgiLBZBzoaS8BNlKayfZyQNKz4IRp+s7CKXx0yz7Eco2+TcwoeMBa5KMwmTX7Kus7Fa5Uw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+  <script defer src="https://cdnjs.cloudflare.com/ajax/libs/matter-js/0.19.0/matter.min.js" integrity="sha512-0z8URjGET6GWnS1xcgiLBZBzoaS8BNlKayfZyQNKz4IRp+s7CKXx0yz7Eco2+TcwoeMBa5KMwmTX7Kus7Fa5Uw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
 
   <!-- Matter.js wrap plugin -->
-  <script src="https://cdn.jsdelivr.net/npm/[email protected]/build/matter-wrap.min.js" integrity="sha256-5Joj4yN1bnDB2NEyA2XIM5FanLSGfd2q6Jvpdh399gs=" crossorigin="anonymous"></script>
+  <script defer src="https://cdn.jsdelivr.net/npm/[email protected]/build/matter-wrap.min.js" integrity="sha256-5Joj4yN1bnDB2NEyA2XIM5FanLSGfd2q6Jvpdh399gs=" crossorigin="anonymous"></script>
 
   <!-- Pollyfill -->
-  <script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
+  <!-- <script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script> -->
 
   <!-- Mathjax -->
   <script>
     MathJax = {
-      // loader: {load: ['ui/lazy']},
+      loader: {load: ['a11y/explorer']}, 
+      startup: {
+        typeset: false,
+        // ready: () => {
+          // MathJax.startup.defaultReady();
+        // },
+      },
       options: {
+        // enableEnrichment: true,
+        // enableExplorer: false,                // set to false to disable the explorer
+        // enableComplexity: false,       // set to false to disable complexity computations
         enableMenu: true,          // set to false to disable the menu
         menuOptions: {
           settings: {
             zoom: 'DoubleClick',        // or 'Click' or 'DoubleClick' as zoom trigger
             zscale: '200%',        // zoom scaling factor
+            // assistiveMml: false,    // true if hidden assistive MathML should be generated for screen readers
+            // collapsible: false,    // true if complex math should be collapsible
+            // explorer: false,       // true if the expression explorer should be active
+            // texHints: false,        // put TeX-related attributes on MathML
+            // semantics: false,      // put original format in <semantic> tag in MathM
           },
         }
       }
     }
   </script>
-  <script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
 
+  <script defer id="MathJax-script" src="https://cdn.jsdelivr.net/npm/[email protected]/es5/tex-chtml.js"></script>
+
   <!-- Frontend   -->
-  <script src="/public/js/frontend.js"></script> <!-- ?t=$ timestamp -->
-</body>
+  <script defer src="$frontend"></script> <!-- ?t=$ timestamp -->
+</body> 
 </html>
 
diff --git a/src/app.nim b/src/app.nim
@@ -9,6 +9,9 @@ proc getKarax(ctx: Context) {.async.} =
   resp htmlResponse readFile("public/karax.html") %
     {
       "title": config.title,
+      "frontend": "/public/js/frontend.js",
+      "style": "/public/css/style.css",
+      "favicon": "/public/img/favicon.ico"
       # "timestamp": encodeUrl(CompileDate & CompileTime),
       # "ga": config.ga
     }.newStringTable()

diff --git a/src/frontend.nim b/src/frontend.nim
@@ -5,7 +5,7 @@ import karax/[karax, kajax, karaxdsl, vdom, vstyles, i18n, jdict, languages]
 
 # import matter
 import frontend/[routes, utils, patterns]
-import frontend/simulations/parabola
+import frontend/simulations/[parabola, utils]
 
 type
   State = ref object
@@ -44,27 +44,17 @@ var state = newState()
 
 # addTranslation(esCo, "s/0/")
 
-proc renderHome(params: Params): VNode =
-  #discard setTimeout(proc() = navigateTo("/parabola"), 10)
-  navigateTo("/parabola")
-
-  buildHtml(tdiv):
-    text "Welcome to my grado project"
-
 proc render(): VNode =
-  buildHtml(tdiv):
-    # renderHeader()
-    state.location.route([
-      r("/", proc(params: Params): VNode =
-        state.parabola.render()
-      )
-    ])
+  state.parabola.render()
 
 proc postRender() =
   # Since matter needs to find the canvas element, if we load the simulation before karax has created the canvas element it won't work
   if not state.matterLoaded:
-    state.parabola.load()
-    state.matterLoaded = true
+    if not MathJax.typesetPromise.isNil:
+      state.parabola.load()
+      state.matterLoaded = true
+    else:
+      discard setTimeout(postRender, 100)
 
 # This event is (usually only) called when the user moves back in history
 # Here we fake the moving-back-in-history action so it doesn't actually reload the page

diff --git a/src/frontend/simulations/parabola.nim b/src/frontend/simulations/parabola.nim
@@ -143,6 +143,12 @@ proc calcTime(initialState: CanonState, y: float, sign: bool): float =
 proc magnitude(v: Vec): float = 
   sqrt(v.x^2 + v.y^2)
 
+proc path(p: static string): string = 
+  when defined(relativePath):
+    "./" & p
+  else:
+    "/public/" & p
+
 const
   fps = 60
   timeScale = 0.025
@@ -160,9 +166,9 @@ const
   canonSpeedChange = 1.0
   canonAngleChangeDeg = 3.0
 
-  canonTexture = "/public/img/canon.png"
-  canonBaseTexture = "/public/img/canonBase.png"
-  canonPlatformTexture = "/public/img/canonPlatform.png"
+  canonTexture = path "img/canon.png"
+  canonBaseTexture = path "img/canonBase.png"
+  canonPlatformTexture = path "img/canonPlatform.png"
 
   trajectoryStrokeStyles = ["Orange", "Salmon", "Crimson", "Pink", "HotPink", "Tomato", 
   "Gold", "Khaki", "Violet", "SlateBlue", "YellowGreen", "LightSeaGreen", 
@@ -524,7 +530,7 @@ proc updatePointAccordion(state: var ParabolaState) =
     getElementById("point-input-vx").value = ""
     getElementById("point-input-vy").value = ""
     getElementById("point-input-s").value = ""
-    #getElementById("point-input-x").setAttribute("disabled", "")
+
   var siInitialState = state.trajectory.state.toMu()
   siInitialState.gravity = siInitialState.gravity * gravityFactor
 
@@ -646,8 +652,8 @@ proc calcTrajectory(state: var ParabolaState) =
   elif prevLastPoint:
     state.trajectory.pinnedPoint = state.trajectory.points.high
 
-  state.updatePointAccordion()
   state.updateStateAccordion()
+  state.updatePointAccordion()
   state.updateFormulaAccordion()
 
 ## The difference of canon's y respect base's y
@@ -1818,7 +1824,7 @@ proc renderStateAccordion(state: var ParabolaState): VNode =
 
           tdiv(class = "col-9 col-sm-12"):
             input(class = "form-input form-inline", `type` = "number", id = "state-input-g", 
-              step = state.inputStep, onchange = onInputGChange)
+              step = cstring state.inputStep, onchange = onInputGChange)
 
       tdiv(class = "accordion-body"):
         for e, (name, gravity) in gravities: