config.nims

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

nimble.lock

@@ -1,6 +1,16 @@
 {
   "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",
@@ -11,14 +21,27 @@
         "sha1": "6aeb83e7481ca8686396a568096054bc668294df"
       }
     },
-    "karax": {
-      "version": "1.3.3",
-      "vcsRevision": "b125b6f23e56e9d88068758aa56635a721782009",
-      "url": "https://github.com/daylinmorgan/karax",
+    "ws": {
+      "version": "0.5.0",
+      "vcsRevision": "9536bf99ddf5948db221ccb7bb3663aa238a8e21",
+      "url": "https://github.com/treeform/ws",
       "downloadMethod": "git",
       "dependencies": [],
       "checksums": {
-        "sha1": "4c2cd8c8c6642919a81be12d7535323e7073f47e"
+        "sha1": "ae4daf4ae302d0431f3c2d385ae9d2fe767a3246"
+      }
+    },
+    "karax": {
+      "version": "1.3.3",
+      "vcsRevision": "d86349c63d8ece330d749eb037a9fa5ffca87c79",
+      "url": "https://github.com/karaxnim/karax/",
+      "downloadMethod": "git",
+      "dependencies": [
+        "ws",
+        "dotenv"
+      ],
+      "checksums": {
+        "sha1": "6683189b4456437c2809be72e3404adde77f5c34"
       }
     }
   },

nimpkgs.nimble

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

src/app.nim

@@ -5,7 +5,7 @@ import pages/pages
 import context, utils
 
 proc render(data: RouterData): VNode =
-  when defined(debug): console.log ctx
+  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/[strutils, sequtils, uri, random]
+import std/[algorithm, strutils, sequtils, jsconsole, uri, random]
 
 import karax/[kbase, karax, karaxdsl, vdom, jstrutils, ]
 
@@ -7,7 +7,6 @@ import ../components/tag
 import ../utils
 
 randomize()
-
 proc authorRepo(uri: Uri, hostname = false): kstring =
   var name =
     if hostname: uri.hostname & uri.path.replace(".git")
@@ -59,27 +58,29 @@ proc card*(pkg: NimPackage): VNode =
                 class = "link"):
               t.renderTag
 
-proc recentAddedPackagesList*(): VNode =
-  let pkgs = recentPackagesList()
-  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
+proc getRecentReleases(ctx: Context): seq[NimPackage] =
+  var pkgs: seq[NimPackage]
+  for pkg in ctx.nimpkgs.packages.values():
+    if pkg.versions.len > 0:
+      pkgs.add pkg
 
-proc recentPackageVersionsList*(): VNode =
-  let pkgs = getRecentReleases()
+  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 & "group p-2 m-1 space-x-1 no-underline text-ctp-text)",
+      a(class = borderStyle & "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)"
+        span(class = textStyle & "font-bold font-mono-casual"): text pkg.name
+        span(class = "italic"): 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*(): VNode =
+proc randomTags*(ctx: Context): VNode =
   let tags = ctx.selectRandomTags()
   buildHtml(tdiv):
     tags.renderTags

src/context.nim

@@ -1,7 +1,10 @@
 import std/[
   asyncjs, jsconsole, jsfetch, sequtils, sugar, tables
 ]
-import karax/[kbase, karax], jsony
+
+import karax/[kbase, karax]
+import jsony
+
 import packages, utils
 
 export tables
@@ -33,17 +36,3 @@ 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,7 +29,6 @@ type
 
   NimPkgs* = object
     updated*: Time
-    recent*: seq[kstring]
     packagesHash*: kstring
     packages*: OrderedTable[string, NimPackage]
 

src/pages/index.nim

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