src/app.nim

@@ -2,7 +2,7 @@ import std/strutils
 import karax/[karax, karaxdsl, vdom]
 import components/[header, button, footer]
 import pages/pages
-import context, lib
+import context, utils
 
 proc render(data: RouterData): VNode =
   when defined(debug): console.log ctx

src/components/package.nim

@@ -3,8 +3,8 @@ import std/[strutils, sequtils, uri, random]
 import karax/[kbase, karax, karaxdsl, vdom, jstrutils, ]
 
 import ../[packages, style, context]
-import ../components/[tag, search]
+import ../components/tag
-import ../lib
+import ../utils
 
 randomize()
 
@@ -42,25 +42,22 @@ proc card*(pkg: NimPackage): VNode =
         h2(class = (textStyle & "font-black md:text-2xl text-lg font-casual").kstring):
           text pkg.name
       if not pkg.isAlias:
-        tdiv(class="flex flex-col md:items-end items-start"):
+        pkg.projectUrl
-          pkg.projectUrl
-          if not pkg.deleted:
-            span(class="md:text-sm text-xs text-nowrap text-ctp-subtextzero"):
-              text "last commit: " & pkg.lastCommitTime.format("MMM d, YYYY")
     if pkg.isAlias:
       tdiv:
         text "alias for: "
-        span(onClick = setSearchInput("name:" & pkg.alias),
+        span(onClick = setSearchUrl("name:" & pkg.alias),
             class = "link"):
           text pkg.alias
     else:
-      span(class = "md:text-xl my-2 "): text pkg.description
+      span(class = "md:text-xl my-2"): text pkg.description
-      tdiv(class = "flex flex-wrap text-xs md:text-md overflow-x-auto"):
+      tdiv(class = "flex flex-col text-xs md:text-lg overflow-x-auto"):
-        for t in pkg.tags:
+        tdiv(class = "flex flex-wrap"):
-          tdiv(
+          for t in pkg.tags:
-            onClick = setSearchInput("tag:" & t.replace(" ", "-")),
+            tdiv(
-              class = "link"):
+              onClick = setSearchUrl("tag:" & t.replace(" ", "-")),
-            t.renderTag
+                class = "link"):
+              t.renderTag
 
 proc recentAddedPackagesList*(): VNode =
   let pkgs = recentPackagesList()
@@ -78,6 +75,8 @@ proc recentPackageVersionsList*(): VNode =
           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()

src/components/search.nim

@@ -3,7 +3,8 @@ import std/[strutils, uri]
 import karax/[kbase, karax, karaxdsl, vdom, jstrutils]
 
 import ../[packages, style, context]
-import ../lib
+# import ../components/package
+import ../utils
 
 type
   Query* = object
@@ -54,13 +55,16 @@ proc searchPackages*(q: Query): seq[NimPackage] =
       if q ~= pkg: pkg
 
 proc getSearchFromUri*(): kstring =
-  result = ""
   var url = currentUri()
-  if url.query == "": return
+  if url.query == "": return ""
   for k, v in decodeQuery(url.query):
     if k == "query":
       return v.kstring
 
+proc getSearchInput*() =
+  let searchInput = getVNodeById("search").getInputText
+  setSearchUrl(searchInput)()
+
 proc searchBar*(value = jss""): Vnode =
   buildHtml(tdiv(class = "flex flex-row my-2 grow")):
     input(`type` = "text", class = "bg-ctp-crust md:mx-3 mx-1 p-2 grow".kstring & borderStyle, `id` = "search",

src/components/tag.nim

@@ -1,7 +1,7 @@
 import std/[uri, tables, random]
 import karax/[kbase, karaxdsl, vdom, jstrutils]
 
-import ../[packages, style, context, lib]
+import ../[packages, style, context, utils]
 
 randomize()
 

src/context.nim

@@ -2,7 +2,7 @@ import std/[
   asyncjs, jsconsole, jsfetch, sequtils, sugar, tables
 ]
 import karax/[kbase, karax], jsony
-import packages, lib
+import packages, utils
 
 export tables
 

src/lib.nim

@@ -1,64 +0,0 @@
-import std/[strutils, uri]
-import std/jsffi except `&`
-import jsconsole
-export jsconsole
-
-import karax/[kbase, karax, vdom, kdom]
-
-proc jss*[T](arg: T): kstring = ($arg).kstring
-proc jss*(arg: kstring): kstring = arg
-
-proc noProtocol*(s: kstring): kstring =
-  ($s)
-    .replace("http://", "")
-    .replace("https://", "")
-    .jss
-
-proc currentUri*(): Uri {.inline.} =
-  parseUri($window.location.href)
-
-func replace*(c: kstring, sub: string, by = " "): kstring =
-  ($c).replace(sub, by).jss
-
-type
-  SortMethod* = enum
-    smAlphabetical = "smAlphabetical", smCommitAge = "commit", smVersionAge = "version"
-
-proc setSearchUrl*(searchQuery: kstring, sortMethod = smAlphabetical): proc() =
-  proc() =
-    var 
-      url = currentUri()
-      params: seq[(string, string)]
-    if searchQuery != "":
-      params.add ("query", $searchQuery)
-    if sortMethod != smAlphabetical:
-      params.add ("sort", $sortMethod)
-    url.anchor = "/search"
-    url = url ? params
-    window.history.pushState(js{}, "".jss, url.jss)
-    let d = getVNodeById("search")
-    let node = d.dom
-    scrollIntoView(node)
-    redraw()
-
-proc getSearchInput*() =
-  let searchInput = getVNodeById("search").getInputText
-  let sortNode = getVNodeById("sort-select")
-  let sortMethod = SortMethod(
-      if sortNode != nil: parseInt($sortNode.getInputText)
-      else: 0
-    )
-  setSearchUrl(searchInput, sortMethod)()
-
-
-proc setSearchInput*(q: kstring): proc() =
-  result = proc() =
-    let sortNode = getVNodeById("sort-select")
-    let sortMethod = SortMethod(
-        if sortNode != nil: parseInt($sortNode.getInputText)
-        else: 0
-      )
-    setSearchUrl(q, sortMethod)()
-
-
-

src/packages.nim

@@ -5,7 +5,7 @@ import std/[
 import karax/[kbase]
 import jsony
 
-import ./lib
+import ./utils
 export algorithm, tables, times, asyncjs, sugar
 
 proc parseHook*(s: string, i: var int, v: var kstring) =

src/pages/metrics.nim

@@ -1,7 +1,7 @@
 import std/[algorithm, sequtils, tables, uri, strutils, times]
 import karax/[kbase, karaxdsl, vdom, jstrutils]
 
-import ../[context, packages, style, lib]
+import ../[context, packages, style, utils]
 
 type
   Metrics = object

src/pages/package.nim

@@ -3,7 +3,7 @@ import karax/[kbase, karax, karaxdsl, kdom, vdom, jstrutils, ]
 
 import ../[context, packages, style]
 import ../components/[tag, package]
-import ../lib
+import ../utils
 import notfound
 
 proc openLink(link: kstring): proc() =

src/pages/search.nim

@@ -1,15 +1,14 @@
-import std/[algorithm, strutils, sequtils, dom, uri]
+import std/[algorithm, strutils, sequtils, dom]
 
 import karax/[kbase, karax, karaxdsl, vdom, jstrutils, kdom]
 
 import ../[packages, context]
 import ../components/[package, search]
-import ../lib
+import ../utils
 
 type
-  # SortMethod = enum
+  SortMethod = enum
-    # smAlphabetical, smCommitAge, smVersionAge
+    smAlphabetical, smCommitAge, smVersionAge
-    #
   PageContext = object
     sortMethod: SortMethod = smAlphabetical
     filteredPackages: seq[NimPackage]
@@ -24,7 +23,7 @@ proc scrollToAnchor(a: string): proc() =
 
 proc letterlink(activeLinks: seq[char]): VNode = buildHtml:
   tdiv(
-      class = "flex flex-wrap md:text-xl text-lg capitalize w-full justify-evenly gap-x-2 md:gap-x-auto"
+    class = "flex flex-wrap md:text-xl text-lg capitalize w-full justify-evenly gap-x-2 md:gap-x-auto"
     ):
     for l in LowercaseLetters:
       tdiv(class = "w-5"):
@@ -53,15 +52,15 @@ proc alphabeticalPackageList(pkgs: seq[NimPackage]): VNode =
       for pkg in packages:
         pkg.card
 
+proc selectSortMethod() =
+  let v = getVNodeById("sort-select").getInputText
+  pgCtx.sortMethod = SortMethod(parseInt(v))
+
 proc sortSelector(): VNode =
   buildHtml(tdiv(class = "flex items-center")):
     label(`for` = "sort-select"): text "sort:"
-    select(
+    select(class = "bg-ctp-crust rounded p-3", name = "sort",
-      class = "bg-ctp-crust rounded p-3",
+        `id` = "sort-select", onChange = selectSortMethod):
-      name = "sort",
-      `id` = "sort-select",
-      onChange = getSearchInput
-    ):
       for i, msg in ["alphabetical", "recent commit", "recent version"]:
         if i == ord(pgCtx.sortMethod):
           option(value = ($i).cstring, selected = ""): text msg
@@ -90,22 +89,8 @@ proc filteredPackagesDom(): VNode =
           for pkg in pgCtx.filteredPackages:
             pkg.card
 
-# TODO: combine with 'getSearchFromUri'
-proc getSortMethodFromUri*(): SortMethod =
-  result = smAlphabetical
-  var url = currentUri()
-  for k, v in decodeQuery(url.query):
-    if k == "sort":
-      case v
-      of "commit":
-        result = smCommitAge
-      of "version":
-        result = smVersionAge
-      else: discard
-
 proc update(pgCtx: var PageContext) =
-  pgCtx.filteredPackages = nimpkgsList()
+  pgCtx.filteredPackages = nimpkgsList() 
-  pgCtx.sortMethod = getSortMethodFromUri()
   pgCtx.search = getSearchFromUri()
   pgCtx.filteredPackages = searchPackages(parseQuery(pgCtx.search))
 

src/utils.nim

@@ -0,0 +1,33 @@
+import std/[strutils, uri]
+import std/jsffi except `&`
+import jsconsole
+export jsconsole
+
+import karax/[kbase, karax, vdom, kdom]
+
+proc jss*[T](arg: T): kstring = ($arg).kstring
+proc jss*(arg: kstring): kstring = arg
+
+proc noProtocol*(s: kstring): kstring =
+  ($s)
+    .replace("http://", "")
+    .replace("https://", "")
+    .jss
+
+proc currentUri*(): Uri {.inline.} =
+  parseUri($window.location.href)
+
+func replace*(c: kstring, sub: string, by = " "): kstring =
+  ($c).replace(sub, by).jss
+
+proc setSearchUrl*(searchQuery: kstring): proc() =
+  proc() =
+    var url = currentUri()
+    url.anchor = "/search"
+    url = url ? {"query": $searchQuery}
+    window.history.pushState(js{}, "".jss, url.jss)
+    let d = getVNodeById("search")
+    let node = d.dom
+    scrollIntoView(node)
+    redraw()
+