feat: add scrollbars to package page

package.json

@@ -11,16 +11,16 @@
   "author": "Daylin Morgan",
   "license": "MIT",
   "devDependencies": {
-    "@catppuccin/palette": "^0.2.0",
-    "@iconify-json/mdi": "^1.1.55",
-    "@iconify-json/simple-icons": "^1.1.79",
+    "@catppuccin/palette": "^1.1.0",
+    "@iconify-json/mdi": "^1.1.64",
+    "@iconify-json/simple-icons": "^1.1.92",
     "@types/promise-fs": "^2.1.5",
-    "@unocss/cli": "^0.57.3",
-    "@unocss/preset-icons": "^0.57.7",
-    "@unocss/reset": "^0.57.3",
+    "@unocss/cli": "^0.58.5",
+    "@unocss/preset-icons": "^0.58.5",
+    "@unocss/reset": "^0.58.5",
     "concurrently": "^8.2.2",
-    "esbuild": "^0.19.5",
+    "esbuild": "^0.20.1",
     "http-server": "^14.1.1",
-    "unocss": "^0.57.3"
+    "unocss": "^0.58.5"
   }
 }

src/pages/package.nim

@@ -35,20 +35,21 @@ proc renderAlias(pkg: NimPackage): VNode = buildHtml:
     a(href = "#/pkg/" & pkg.alias):
       text pkg.alias
 
-proc renderLinks(pkg: NimPackage): VNode = buildHtml(tdiv):
-  tdiv: text "links:"
-  tdiv:
-    pkg.projectUrl
-  if pkg.web != "" and pkg.web != pkg.url:
-    tdiv():
-      a(href = pkg.web, class = "flex items-center space-x-2"):
-        tdiv(class = "i-mdi-web shrink-0")
-        span: text pkg.web.noProtocol
-  if pkg.doc != "":
-    tdiv():
-      a(href = pkg.doc, class = "flex items-center space-x-2"):
-        tdiv(class = "i-mdi-file-outline shrink-0")
-        span: text pkg.doc.noProtocol
+proc renderLinks(pkg: NimPackage): VNode =
+  buildHtml(tdiv(class = "overflow-auto")):
+    tdiv: text "links:"
+    tdiv:
+      pkg.projectUrl
+    if pkg.web != "" and pkg.web != pkg.url:
+      tdiv():
+        a(href = pkg.web, class = "flex items-center space-x-2"):
+          tdiv(class = "i-mdi-web shrink-0")
+          span: text pkg.web.noProtocol
+    if pkg.doc != "":
+      tdiv():
+        a(href = pkg.doc, class = "flex items-center space-x-2"):
+          tdiv(class = "i-mdi-file-outline shrink-0")
+          span: text pkg.doc.noProtocol
 
 proc getTimeSinceCommit(pkg: NimPackage): kstring =
   if pkg.lastCommitTime == fromUnix(0): "unknown".jss
@@ -58,8 +59,8 @@ proc getTimeSinceCommit(pkg: NimPackage): kstring =
 
 proc renderPkgInfo(pkg: NimPackage): VNode =
   buildHtml:
-    tdiv(class = "space-y-5 text-2xl"):
-      tdiv(class = "md:text-4xl text-xl"):
+    tdiv(class = "space-y-5 text-lg"):
+      tdiv(class = "md:text-3xl"):
         text pkg.description
       pkg.renderLinks
       tdiv:
@@ -73,7 +74,7 @@ proc renderPkgInfo(pkg: NimPackage): VNode =
         text pkg.getTimeSinceCommit
       tdiv:
         tdiv: text "usage:"
-        tdiv(class = "bg-ctp-surfacezero rounded my-2 mx-3 p-2 w-auto"):
+        tdiv(class = "bg-ctp-surfacezero rounded my-2 mx-3 p-2 w-auto overflow-auto"):
           pre:
             text "nimble install " & pkg.name
           pre:
@@ -84,7 +85,7 @@ proc render*(packageName: string): VNode =
   let pkg = ctx.nimpkgs.packages[packageName]
   result = buildHtml(tdiv(class = "flex flex-col")):
     if pkg.deleted:
-      tdiv(class = "md:text-5xl text-2xl text-ctp-red my-5 "):
+      tdiv(class = "md:text-3xl text-2xl text-ctp-red my-5 "):
         tdiv(class = "flex items-center md:text-5xl text-2xl font-mono-casual font-black"):
           tdiv(class = "i-mdi-alert inline-block")
           span: text "WARNING!"

unocss.config.ts

@@ -1,16 +1,16 @@
 import fs from "fs/promises";
-import { variants } from "@catppuccin/palette";
+import { flavors } from "@catppuccin/palette";
 import { defineConfig, presetUno, presetIcons } from "unocss";
 
 const generatePalette = (): { [key: string]: string } => {
   const colors: { [key: string]: string } = {};
 
-  Object.keys(variants.mocha).forEach((colorName) => {
+  Object.keys(flavors.mocha.colors).forEach((colorName) => {
     const sanitizedName = colorName
       .replace("0", "zero")
       .replace("1", "one")
       .replace("2", "two");
-    colors[sanitizedName] = variants.mocha[colorName].hex;
+    colors[sanitizedName] = flavors.mocha.colors[colorName].hex;
   });
 
   return colors;
@@ -43,6 +43,29 @@ export default defineConfig({
       color: ${catppuccinColors.mauve};
       cursor: pointer;
     }
+
+    /* width */
+    ::-webkit-scrollbar {
+        width: 10px;
+    }
+    /* Track */
+    ::-webkit-scrollbar-track {
+        background: ${catppuccinColors.crust};
+        border-radius: 5px;
+    }
+    /* Handle */
+    ::-webkit-scrollbar-thumb {
+        background: ${catppuccinColors.mantle};
+        border: 1px solid transparent;
+        border-color: ${catppuccinColors.rosewater};
+        border-radius: 5px;
+    }
+    /* Handle on hover */
+    ::-webkit-scrollbar-thumb:hover {
+        background: ${catppuccinColors.roswater};
+    }
+
+
     /* loading animation */
     .lds-dual-ring {
       display: inline-block;