add tablesort

assets/css/app.css

@@ -5,6 +5,7 @@
 @import "./reset.css";
 @import "./gruvbox.css";
 @import "./lightbox.css";
+@import "./tablesort.css";
 
 @layer base {
   :root {

assets/css/tablesort.css

@@ -0,0 +1,33 @@
+th[role=columnheader]:not(.no-sort) {
+	cursor: pointer;
+}
+
+th[role=columnheader]:not(.no-sort):after {
+	content: '';
+	float: right;
+	margin-top: 7px;
+	border-width: 0 4px 4px;
+	border-style: solid;
+	border-color: rgb(var(--color-primary)) transparent;
+	visibility: hidden;
+	opacity: 0;
+	-ms-user-select: none;
+	-webkit-user-select: none;
+	-moz-user-select: none;
+	user-select: none;
+}
+
+th[aria-sort=ascending]:not(.no-sort):after {
+	border-bottom: none;
+	border-width: 4px 4px 0;
+}
+
+th[aria-sort]:not(.no-sort):after {
+	visibility: visible;
+	opacity: 0.4;
+}
+
+th[role=columnheader]:not(.no-sort):hover:after {
+	visibility: visible;
+	opacity: 1;
+}

assets/js/public.js

@@ -1,29 +1,32 @@
 // Include phoenix_html to handle method=PUT/DELETE in forms and buttons.
-import "phoenix_html"
+import 'phoenix_html'
 
-import hljs from "highlight.js"
+import hljs from 'highlight.js'
 import GLightbox from 'glightbox'
+import Tablesort from 'tablesort'
 
 document.addEventListener('DOMContentLoaded', (event) => {
-  document.querySelectorAll('pre code').forEach((el) => {
-    hljs.highlightElement(el);
-  });
+  document.querySelectorAll('.prose pre code').forEach((el) => 
+    hljs.highlightElement(el))
+
+  document.querySelectorAll('.prose table').forEach(el => 
+  	new Tablesort(el))
 });
 
 document
-	.querySelector("#dark-mode-toggle")
-	.addEventListener("click", (e) => {
+	.querySelector('#dark-mode-toggle')
+	.addEventListener('click', (e) => {
 		e.preventDefault()
 		const data = document.documentElement.dataset
-		if (data["mode"] && data["mode"] == "dark") {
-			delete data["mode"]
-			window.localStorage.removeItem("theme")
+		if (data['mode'] && data['mode'] == 'dark') {
+			delete data['mode']
+			window.localStorage.removeItem('theme')
 		} else {
-			data["mode"] = "dark"
-			window.localStorage.setItem("theme", "dark")
+			data['mode'] = 'dark'
+			window.localStorage.setItem('theme', 'dark')
 		}
 	})
 
-GLightbox({ selector: ".lightbox" })
+GLightbox({ selector: '.lightbox' })
 
 window.hljs = hljs

assets/package-lock.json

@@ -11,7 +11,8 @@
         "kbar": "^0.1.0-beta.40",
         "phoenix": "file:../deps/phoenix",
         "phoenix_html": "file:../deps/phoenix_html",
-        "phoenix_live_view": "file:../deps/phoenix_live_view"
+        "phoenix_live_view": "file:../deps/phoenix_live_view",
+        "tablesort": "^5.3.0"
       },
       "devDependencies": {
         "esbuild": "^0.18.0"
@@ -645,6 +646,11 @@
         "loose-envify": "^1.1.0"
       }
     },
+    "node_modules/tablesort": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/tablesort/-/tablesort-5.3.0.tgz",
+      "integrity": "sha512-WkfcZBHsp47gVH9CBHG0ZXopriG01IA87arGrchvIe868d4RiXVvoYPS1zMq9IdW05kBs5iGsqxTABqLyWonbg=="
+    },
     "node_modules/tiny-invariant": {
       "version": "1.3.1",
       "resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.3.1.tgz",

assets/package.json

@@ -9,7 +9,8 @@
     "kbar": "^0.1.0-beta.40",
     "phoenix": "file:../deps/phoenix",
     "phoenix_html": "file:../deps/phoenix_html",
-    "phoenix_live_view": "file:../deps/phoenix_live_view"
+    "phoenix_live_view": "file:../deps/phoenix_live_view",
+    "tablesort": "^5.3.0"
   },
   "peerDependencies": {
     "react": "^18.0",