Shorten urls using base64 encoding

CHANGELOG

@@ -3,6 +3,12 @@
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## Upcoming
+
+### Added
+
+- UUIDs in URL are now Base64 encoded to shorten URLs.
+
 ## 0.1.0 - 2022-02-21
 
 ### Added

client/package-lock.json

@@ -1,14 +1,15 @@
 {
-  "name": "client",
+  "name": "joplin-multi-note-viewer",
   "version": "0.0.0",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
-      "name": "client",
+      "name": "joplin-multi-note-viewer",
       "version": "0.0.0",
       "dependencies": {
         "@oruga-ui/oruga-next": "^0.5.3",
+        "js-base64": "^3.7.2",
         "marked": "^4.0.12",
         "sass": "^1.49.8",
         "vue": "^3.2.25",
@@ -672,6 +673,11 @@
         "node": ">=0.12.0"
       }
     },
+    "node_modules/js-base64": {
+      "version": "3.7.2",
+      "resolved": "https://registry.npmjs.org/js-base64/-/js-base64-3.7.2.tgz",
+      "integrity": "sha512-NnRs6dsyqUXejqk/yv2aiXlAvOs56sLkX6nUdeaNezI5LFFLlsZjOThmwnrcwh5ZZRwZlCMnVAY3CvhIhoVEKQ=="
+    },
     "node_modules/magic-string": {
       "version": "0.25.7",
       "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.25.7.tgz",
@@ -1336,6 +1342,11 @@
       "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
       "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng=="
     },
+    "js-base64": {
+      "version": "3.7.2",
+      "resolved": "https://registry.npmjs.org/js-base64/-/js-base64-3.7.2.tgz",
+      "integrity": "sha512-NnRs6dsyqUXejqk/yv2aiXlAvOs56sLkX6nUdeaNezI5LFFLlsZjOThmwnrcwh5ZZRwZlCMnVAY3CvhIhoVEKQ=="
+    },
     "magic-string": {
       "version": "0.25.7",
       "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.25.7.tgz",

client/package.json

@@ -9,6 +9,7 @@
   },
   "dependencies": {
     "@oruga-ui/oruga-next": "^0.5.3",
+    "js-base64": "^3.7.2",
     "marked": "^4.0.12",
     "sass": "^1.49.8",
     "vue": "^3.2.25",

client/src/App.vue

@@ -1,6 +1,7 @@
 <script setup>
 import { ref, computed, onMounted, watch } from 'vue'
 import { useRouter, useRoute } from 'vue-router'
+import { fromUint8Array, toUint8Array } from 'js-base64'
 import draggable from 'vuedraggable'
 
 import Note from './components/Note.vue'
@@ -15,13 +16,28 @@ const drag = ref(false)
 const router = useRouter()
 const route = useRoute()
 
+function base64ToUUID(base64) {
+  return toUint8Array(base64).reduce((a, n) => (
+    a + ('0' + n.toString(16)).substr(-2)
+  ), "")
+}
+
+function uuidToBase64(uuid) {
+  const bytes = []
+  for (let i = 0; i < uuid.length; i += 2) {
+    bytes.push(parseInt(uuid.substr(i, 2), 16))
+  }
+
+  return fromUint8Array(Uint8Array.from(bytes), true)
+}
+
 if (route.query.ids) {
   const ids = route.query.ids.split(',')
   router.push({query: {ids: ''}})
 
   const loadNotes = async () => {
     for (let i = 0; i < ids.length; i++) {
-      await loadNote(ids[i])
+      await loadNote(base64ToUUID(ids[i]))
     }
   }
 
@@ -29,8 +45,12 @@ if (route.query.ids) {
 }
 
 watch(notes, (newNotes) => {
+  newNotes.forEach(n => {
+    uuidToBase64(n.id)
+  })
+
   router.push({
-    query: { ids: newNotes.map(n => n.id).join(',') }
+    query: { ids: newNotes.map(n => uuidToBase64(n.id)).join(',') }
   })
 
   window.document.title = newNotes.map(n => n.title).join(', ')