use colon for consistency

config.nims

@@ -8,7 +8,7 @@ task watch, "rebuild on change":
   exec (
         "watchexec " &
         "--project-origin . -w src " &
-        "nim js -d:packagesHash:master -o:site/app.js src/app.nim"
+        "nim js -d:debug -d:packagesHash:master -o:site/app.js src/app.nim"
       )
 
 # begin Nimble config (version 2)

nimble.lock

@@ -1,16 +1,6 @@
 {
   "version": 2,
   "packages": {
-    "dotenv": {
-      "version": "2.0.2",
-      "vcsRevision": "a3c6726147276ea1447dee292fd27bb036242b78",
-      "url": "https://github.com/euantorano/dotenv.nim",
-      "downloadMethod": "git",
-      "dependencies": [],
-      "checksums": {
-        "sha1": "1e70fc63c286ca3da7592d61dbe501fcea35bc72"
-      }
-    },
     "jsony": {
       "version": "1.1.5",
       "vcsRevision": "ea811bec7fa50f5abd3088ba94cda74285e93f18",
@@ -21,27 +11,14 @@
         "sha1": "6aeb83e7481ca8686396a568096054bc668294df"
       }
     },
-    "ws": {
+    "karax": {
-      "version": "0.5.0",
+      "version": "1.3.3",
-      "vcsRevision": "9536bf99ddf5948db221ccb7bb3663aa238a8e21",
+      "vcsRevision": "b125b6f23e56e9d88068758aa56635a721782009",
-      "url": "https://github.com/treeform/ws",
+      "url": "https://github.com/daylinmorgan/karax",
       "downloadMethod": "git",
       "dependencies": [],
       "checksums": {
-        "sha1": "ae4daf4ae302d0431f3c2d385ae9d2fe767a3246"
+        "sha1": "4c2cd8c8c6642919a81be12d7535323e7073f47e"
-      }
-    },
-    "karax": {
-      "version": "1.3.3",
-      "vcsRevision": "d86349c63d8ece330d749eb037a9fa5ffca87c79",
-      "url": "https://github.com/karaxnim/karax/",
-      "downloadMethod": "git",
-      "dependencies": [
-        "ws",
-        "dotenv"
-      ],
-      "checksums": {
-        "sha1": "6683189b4456437c2809be72e3404adde77f5c34"
       }
     }
   },

nimpkgs.nimble

@@ -1,7 +1,5 @@
 # Dependencies
+
 requires "nim >= 2.0.0"
-requires "karax"
+requires "https://github.com/daylinmorgan/karax#no-karun"
 requires "jsony"
-
-
-

src/app.nim

@@ -5,7 +5,7 @@ import pages/pages
 import context, utils
 
 proc render(data: RouterData): VNode =
-  console.log ctx
+  when defined(debug): console.log ctx
   var uri = currentUri()
   result = buildHtml(tdiv(
       class = "lg:w-3/4 max-w-[90%] mx-auto md:text-lg text-sm min-h-screen flex flex-col")

src/components/package.nim

@@ -1,4 +1,4 @@
-import std/[algorithm, strutils, sequtils, jsconsole, uri, random]
+import std/[strutils, sequtils, uri, random]
 
 import karax/[kbase, karax, karaxdsl, vdom, jstrutils, ]
 
@@ -7,6 +7,7 @@ import ../components/tag
 import ../utils
 
 randomize()
+
 proc authorRepo(uri: Uri, hostname = false): kstring =
   var name =
     if hostname: uri.hostname & uri.path.replace(".git")
@@ -58,29 +59,27 @@ proc card*(pkg: NimPackage): VNode =
                 class = "link"):
               t.renderTag
 
-proc getRecentReleases(ctx: Context): seq[NimPackage] =
+proc recentAddedPackagesList*(): VNode =
-  var pkgs: seq[NimPackage]
+  let pkgs = recentPackagesList()
-  for pkg in ctx.nimpkgs.packages.values():
-    if pkg.versions.len > 0:
-      pkgs.add pkg
-
-  pkgs.sort(sortVersion, order = Descending)
-  return pkgs[0..20]
-
-proc recentPackageVersionList*(ctx: Context): VNode =
-  let pkgs = ctx.getRecentReleases
   result = buildHtml(tdiv(class = "flex flex-wrap")):
     for pkg in pkgs:
-      a(class = borderStyle & "p-2 m-1 space-x-1 no-underline text-ctp-text",
+      a(class = borderStyle & "group p-2 m-1 space-x-1 no-underline text-ctp-text)",
           href = "/#/pkg/" & pkg.name):
-        span(class = textStyle & "font-bold font-mono-casual"): text pkg.name
+        span(class = textStyle & "group-hover:text-ctp-mauve font-bold font-mono-casual"): text pkg.name
-        span(class = "italic"): text pkg.versions[0].tag
+
-        span:
+proc recentPackageVersionsList*(): VNode =
-          text " (" & (getTime() - pkg.versions[0].time).inDays.jss & " days ago)"
+  let pkgs = getRecentReleases()
+  result = buildHtml(tdiv(class = "flex flex-wrap")):
+    for pkg in pkgs:
+      a(class = borderStyle & "group p-2 m-1 space-x-1 no-underline text-ctp-text)",
+          href = "/#/pkg/" & pkg.name):
+        span(class = textStyle & "group-hover:text-ctp-mauve font-bold font-mono-casual"): text pkg.name
+        span(class = "group-hover:text-ctp-mauve"): text pkg.versions[0].tag
+        # span:
+        #   text " (" & (getTime() - pkg.versions[0].time).inDays.jss & " days ago)"
 
 proc randomPackage*(ctx: Context): VNode =
   let pkgName = ctx.nimpkgs.packages.keys().toSeq().sample()
-  console.log pkgName.jss
   result = buildHtml(tdiv(class = borderStyle & "my-2 m-1 p-2")):
     a(href = "/#/pkg/" & pkgName.jss, class = "flex items-center text-ctp-text no-underline"):
       tdiv(class = "i-mdi-dice-6")

src/components/tag.nim

@@ -36,7 +36,7 @@ proc selectRandomTags*(ctx: Context): seq[kstring] =
     if tag notin result:
       result.add tag
 
-proc randomTags*(ctx: Context): VNode =
+proc randomTags*(): VNode =
   let tags = ctx.selectRandomTags()
   buildHtml(tdiv):
     tags.renderTags

src/context.nim

@@ -1,10 +1,7 @@
 import std/[
   asyncjs, jsconsole, jsfetch, sequtils, sugar, tables
 ]
-
+import karax/[kbase, karax], jsony
-import karax/[kbase, karax]
-import jsony
-
 import packages, utils
 
 export tables
@@ -36,3 +33,17 @@ discard ctx.fetchPackages
 
 proc nimpkgsList*(): seq[NimPackage] {.inline.} = 
   ctx.nimpkgs.packages.values.toSeq()
+
+proc recentPackagesList*(): seq[NimPackage] {.inline.} =
+  ctx.nimpkgs.recent.mapIt(ctx.nimpkgs.packages[$it])
+
+proc getRecentReleases*(): seq[NimPackage] =
+  var pkgs: seq[NimPackage]
+  for pkg in ctx.nimpkgs.packages.values():
+    if pkg.versions.len > 0:
+      pkgs.add pkg
+
+  pkgs.sort(sortVersion, order = Descending)
+  return pkgs[0..10]
+
+

src/packages.nim

@@ -29,6 +29,7 @@ type
 
   NimPkgs* = object
     updated*: Time
+    recent*: seq[kstring]
     packagesHash*: kstring
     packages*: OrderedTable[string, NimPackage]
 

src/pages/index.nim

@@ -1,7 +1,6 @@
 import karax/[karaxdsl, vdom]
 
 import ../components/[search, tag, package]
-import ../context
 
 proc render*(): VNode =
   result = buildHtml(tdiv(class = "justify-center")):
@@ -12,11 +11,12 @@ proc render*(): VNode =
         tdiv(class = "flex flex-col md:flex-row grow"):
           searchBar()
       tdiv():
-        tdiv():
+        tdiv(): text "explore tags:"
-          text "explore tags:"
+        randomTags()
-        ctx.randomTags()
       tdiv():
-        tdiv():
+        tdiv(): text "recently added packages:"
-          text "recently released versions:"
+        recentAddedPackagesList()
-        ctx.recentPackageVersionList
+      tdiv():
+        tdiv(): text "recently released versions:"
+        recentPackageVersionsList()