Merge pull request 'devel' (#221) from devel into main

Reviewed-on: #221

assets/css/app.css

@@ -5,6 +5,7 @@
 @import "./reset.css";
 @import "./gruvbox.css";
 @import "./lightbox.css";
+@import "./tablesort.css";
 
 @layer base {
   :root {
@@ -78,8 +79,8 @@
     @apply prose-invert;
   }
 
-  .prose a {
+  .prose a, a.underline-link {
-    @apply underline decoration-2 decoration-theme-primary hover:bg-theme-primary hover:text-theme-background transition;
+    @apply underline decoration-1 decoration-theme-primary hover:decoration-theme-base transition;
   }
 
   .prose a[href^="http://"], .prose a[href^="https://"] {
@@ -115,7 +116,7 @@
   }
 
   .prose img {
-    @apply rounded;
+    @apply rounded-lg;
   }
 }
 
@@ -142,10 +143,4 @@
   body > header nav a {
     @apply inline-block text-theme-base px-3 py-2.5 border border-theme-background1 hover:bg-theme-background1 rounded transition font-semibold;
   }
-}
-
-@layer utilities {
-  a.underline-link {
-    @apply underline decoration-2 decoration-theme-primary hover:decoration-theme-secondary transition;
-  }
 }

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) => {
+  document.querySelectorAll('.prose pre code').forEach((el) => 
-    hljs.highlightElement(el);
+    hljs.highlightElement(el))
-  });
+
+  document.querySelectorAll('.prose table').forEach(el => 
+  	new Tablesort(el))
 });
 
 document
-	.querySelector("#dark-mode-toggle")
+	.querySelector('#dark-mode-toggle')
-	.addEventListener("click", (e) => {
+	.addEventListener('click', (e) => {
 		e.preventDefault()
 		const data = document.documentElement.dataset
-		if (data["mode"] && data["mode"] == "dark") {
+		if (data['mode'] && data['mode'] == 'dark') {
-			delete data["mode"]
+			delete data['mode']
-			window.localStorage.removeItem("theme")
+			window.localStorage.removeItem('theme')
 		} else {
-			data["mode"] = "dark"
+			data['mode'] = 'dark'
-			window.localStorage.setItem("theme", "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",

lib/chiya_web/components/public_components.ex

@@ -131,8 +131,8 @@ defmodule ChiyaWeb.PublicComponents do
           href={~p"/note/#{note.slug}"}
           class="rounded-lg px-6 pt-4 pb-5 border border-theme-background1 hover:bg-theme-background1 transition"
         >
-          <header>
+          <header class="flex flex-row items-center">
-            <span class="text-theme-secondary text-lg font-semibold leading-8">
+            <span class="text-theme-primary text-lg font-semibold leading-8 flex-1">
               <%= note.name %>
             </span>
             <span class="text-theme-base/75 text-sm">