maintain sort settings better

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, utils
+import context, lib
 
 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
+import ../components/[tag, search]
-import ../utils
+import ../lib
 
 randomize()
 
@@ -42,22 +42,25 @@ 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:
-        pkg.projectUrl
+        tdiv(class="flex flex-col md:items-end items-start"):
+          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 = setSearchUrl("name:" & pkg.alias),
+        span(onClick = setSearchInput("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-col text-xs md:text-lg overflow-x-auto"):
+      tdiv(class = "flex flex-wrap text-xs md:text-md overflow-x-auto"):
-        tdiv(class = "flex flex-wrap"):
+        for t in pkg.tags:
-          for t in pkg.tags:
+          tdiv(
-            tdiv(
+            onClick = setSearchInput("tag:" & t.replace(" ", "-")),
-              onClick = setSearchUrl("tag:" & t.replace(" ", "-")),
+              class = "link"):
-                class = "link"):
+            t.renderTag
-              t.renderTag
 
 proc recentAddedPackagesList*(): VNode =
   let pkgs = recentPackagesList()
@@ -75,8 +78,6 @@ 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,8 +3,7 @@ import std/[strutils, uri]
 import karax/[kbase, karax, karaxdsl, vdom, jstrutils]
 
 import ../[packages, style, context]
-# import ../components/package
+import ../lib
-import ../utils
 
 type
   Query* = object
@@ -55,16 +54,13 @@ 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, utils]
+import ../[packages, style, context, lib]
 
 randomize()
 

src/context.nim

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

src/lib.nim

@@ -0,0 +1,64 @@
+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 ./utils
+import ./lib
 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, utils]
+import ../[context, packages, style, lib]
 
 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 ../utils
+import ../lib
 import notfound
 
 proc openLink(link: kstring): proc() =

src/pages/search.nim

@@ -1,14 +1,15 @@
-import std/[algorithm, strutils, sequtils, dom]
+import std/[algorithm, strutils, sequtils, dom, uri]
 
 import karax/[kbase, karax, karaxdsl, vdom, jstrutils, kdom]
 
 import ../[packages, context]
 import ../components/[package, search]
-import ../utils
+import ../lib
 
 type
-  SortMethod = enum
+  # SortMethod = enum
-    smAlphabetical, smCommitAge, smVersionAge
+    # smAlphabetical, smCommitAge, smVersionAge
+    #
   PageContext = object
     sortMethod: SortMethod = smAlphabetical
     filteredPackages: seq[NimPackage]
@@ -23,7 +24,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"):
@@ -52,15 +53,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(class = "bg-ctp-crust rounded p-3", name = "sort",
+    select(
-        `id` = "sort-select", onChange = selectSortMethod):
+      class = "bg-ctp-crust rounded p-3",
+      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
@@ -89,8 +90,22 @@ 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.sortMethod = getSortMethodFromUri()
   pgCtx.search = getSearchFromUri()
   pgCtx.filteredPackages = searchPackages(parseQuery(pgCtx.search))
 

src/utils.nim

@@ -1,33 +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
-
-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()
-