Implements navigation.

redesign/forum.nim

@@ -1,4 +1,5 @@
 import strformat, times, options, json
+from dom import window, Location
 
 include karax/prelude
 
@@ -7,9 +8,21 @@ import threadlist, karaxutils
 
 type
   State = ref object
+    url: Location
 
 proc newState(): State =
-  State()
+  State(
+    url: window.location
+  )
+
+var state = newState()
+proc onPopState(event: dom.Event) =
+  # This event is usually only called when the user moves back in their
+  # history. I fire it in karaxutils.anchorCB as well to ensure the URL is
+  # always updated. This should be moved into Karax in the future.
+  kout(kstring"New URL: ", window.location.href)
+  state.url = window.location
+  redraw()
 
 proc genHeader(): VNode =
   result = buildHtml(header(id="main-navbar")):
@@ -27,11 +40,13 @@ proc genHeader(): VNode =
           italic(class="fas fa-sign-in-alt")
           text " Log in"
 
-var state = newState()
-
 proc render(): VNode =
   result = buildHtml(tdiv()):
     genHeader()
-    renderThreadList()
+    if "/t/" in state.url.pathname:
+      text "</thread>"
+    else:
+      renderThreadList()
 
+window.onPopState = onPopState
 setRenderer render

redesign/karaxutils.nim

@@ -1,5 +1,39 @@
+import strutils
+import dom except window
+
+include karax/prelude
+import karax / [kdom]
+
+const appName = "/karax/"
+
 proc class*(classes: varargs[tuple[name: string, present: bool]],
            defaultClasses: string = ""): string =
   result = defaultClasses & " "
   for class in classes:
     if class.present: result.add(class.name & " ")
+
+proc makeUri*(relative: string, appName=appName): string =
+  ## Concatenates ``relative`` to the current URL in a way that is sane.
+  var relative = relative
+  assert appName in $window.location.pathname
+  if relative[0] == '/': relative = relative[1..^1]
+
+  return $window.location.protocol & "//" &
+          $window.location.host &
+          appName &
+          relative &
+          $window.location.search &
+          $window.location.hash
+
+
+proc anchorCB*(e: kdom.Event, n: VNode) = # TODO: Why does this need disamb?
+  e.preventDefault()
+
+  # TODO: Why does Karax have it's own Node type? That's just silly.
+  let url = cast[dom.Node](n.dom).getAttribute(cstring"href")
+
+  # TODO: This was annoying. Karax also shouldn't have its own `window`.
+  dom.pushState(dom.window.history, 5, cstring"Thread", url)
+
+  # Fire the popState event.
+  dom.window.dispatchEvent(newEvent("popstate"))

redesign/threadlist.nim

@@ -95,7 +95,7 @@ when defined(js):
         td():
           if thread.isLocked:
             italic(class="fas fa-lock fa-xs")
-          text thread.topic
+          a(href=makeUri("/t/" & $thread.id), onClick=anchorCB): text thread.topic
         td():
           if thread.category.id.len > 0:
             tdiv(class="triangle",