Deps update and added a copy button

package.json

@@ -12,44 +12,44 @@
 		"format": "prettier --plugin-search-dir . --write ."
 	},
 	"devDependencies": {
-		"@sveltejs/adapter-auto": "^2.0.0",
+		"@sveltejs/adapter-auto": "^2.1.1",
-		"@sveltejs/kit": "^1.20.4",
+		"@sveltejs/kit": "^1.30.4",
-		"@tailwindcss/typography": "^0.5.10",
+		"@tailwindcss/typography": "^0.5.16",
-		"@types/codemirror": "^5.60.12",
+		"@types/codemirror": "^5.60.16",
-		"@types/lodash-es": "^4.17.10",
+		"@types/lodash-es": "^4.17.12",
-		"@typescript-eslint/eslint-plugin": "^6.0.0",
+		"@typescript-eslint/eslint-plugin": "^6.21.0",
-		"@typescript-eslint/parser": "^6.0.0",
+		"@typescript-eslint/parser": "^6.21.0",
-		"autoprefixer": "^10.4.16",
+		"autoprefixer": "^10.4.21",
-		"eslint": "^8.28.0",
+		"eslint": "^8.57.1",
-		"eslint-config-prettier": "^8.5.0",
+		"eslint-config-prettier": "^8.10.2",
-		"eslint-plugin-svelte": "^2.30.0",
+		"eslint-plugin-svelte": "^2.46.1",
-		"postcss": "^8.4.31",
+		"postcss": "^8.5.6",
-		"prettier": "^2.8.0",
+		"prettier": "^2.8.8",
 		"prettier-plugin-svelte": "^2.10.1",
-		"svelte": "^4.0.5",
+		"svelte": "^4.2.20",
-		"svelte-check": "^3.4.3",
+		"svelte-check": "^3.8.6",
-		"tailwindcss": "^3.3.5",
+		"tailwindcss": "^3.4.17",
-		"tslib": "^2.4.1",
+		"tslib": "^2.8.1",
-		"typescript": "^5.0.0",
+		"typescript": "^5.9.2",
-		"vite": "^4.4.2"
+		"vite": "^4.5.14"
 	},
 	"type": "module",
 	"dependencies": {
-		"@iconify/svelte": "^3.1.4",
+		"@iconify/svelte": "^3.1.6",
-		"@svelte-put/clickoutside": "^3.0.0",
+		"@svelte-put/clickoutside": "^3.0.2",
 		"@sveltejs/adapter-static": "^2.0.3",
 		"brotli-compress": "^1.3.3",
-		"highlight.js": "^11.9.0",
+		"highlight.js": "^11.11.1",
 		"lodash-es": "^4.17.21",
-		"rehype-highlight": "^7.0.0",
+		"rehype-highlight": "^7.0.2",
-		"rehype-stringify": "^10.0.0",
+		"rehype-stringify": "^10.0.1",
-		"remark-gfm": "^4.0.0",
+		"remark-gfm": "^4.0.1",
 		"remark-parse": "^11.0.0",
-		"remark-rehype": "^11.0.0",
+		"remark-rehype": "^11.1.2",
-		"sass": "^1.69.5",
+		"sass": "^1.91.0",
-		"slim-select": "^2.6.0",
+		"slim-select": "^2.12.1",
-		"svelte-select": "^5.7.0",
+		"svelte-select": "^5.8.3",
-		"tw-elements": "^1.0.0",
+		"tw-elements": "^1.1.0",
-		"unified": "^11.0.4"
+		"unified": "^11.0.5"
 	}
 }

src/components/CodeView.svelte

@@ -1,13 +1,23 @@
 <script lang="ts">
+  import Icon from '@iconify/svelte'
+  import { fade } from 'svelte/transition'
+
   export let isMarkdown: boolean
   export let isPlainText: boolean
   export let decompressed: string
   export let htmlContent: string
   let cssClass = ''
   export { cssClass as class }
+
+  let copied = false
+  function copyCode() {
+    navigator.clipboard.writeText(decompressed)
+    copied = true
+    setTimeout(() => (copied = false), 500)
+  }
 </script>
 
-<div class={cssClass}>
+<div class={cssClass + ' relative'}>
   {#if isMarkdown}
     <div class="h-full p-2">
       {@html htmlContent}
@@ -15,6 +25,16 @@
   {:else if isPlainText}
     <pre class="h-full">{decompressed}</pre>
   {:else}
+    <button
+      class="z-40 right-4 top-[5.25rem] absolute inline"
+      on:click={copyCode}
+      title="Copy code">
+      <Icon class="text-xl" icon="fluent:copy-24-regular" />
+    </button>
+    {#if copied}
+      <span class="absolute right-4 top-24" out:fade={{ duration: 500 }}>Copied!</span>
+    {/if}
+    <!-- code block -->
     <pre class="h-full"><code>{@html htmlContent}</code></pre>
   {/if}
 </div>

src/routes/about/+page.svelte

@@ -2,6 +2,6 @@
   import { goto } from '$app/navigation'
 
   goto(
-    '/?l=md#G38MIKwO4jHSnkre/mbgqEctyYQbtQJgo6cGCYx8X4+fbmPzKoTWODMIWqOT72vTXcv0Q+BLkVfmA7d1QLpnOeFhmzpMTYUWPv+//drZimgkkjmdEolteffdmVWDAW8mTed/8ErUUEW7WYh5SyQSIv7aqx37ayxwFXxEG8z1GV47nfcdJRT7vyRjICIf0f8sSDEWUmF+OigZlLSvg8AbYqpMLCWIkvz4oFCEPu8EQ7W4oiy2MZDqgHO7tHvuJIeAqJPFiviPrswtp66P7AmQIFHcr8RO45OUwoo+7mw2kb4CIwNSJktMDeJLMD7tEsfwjPkKmDYZ8xRdQGyqDSyGkxapsTiMxPlmE6Dee1JkAMgaNSPWtJedCxiwzQgLylwDHGRB6U0Yy9liHFE5J9rDujwE/pQ5e1zrYcDAV+aeOKuVxOJnpCWW9F/F9tUWSIuT7/rx8R1i8H/3R6AQuK0BVWA8twvYgObo+TSRWtZI4mOFjm/p7ndIS9S4zDNXF18a3WlfeMSFBjepH0vip7llpqFdSOHPhW60nqcnpOykNt9X12fIGZE7m2GpRkIalHDDA3MQhv2IsEY0tD0CHx6SMfNK5TLd97UAiG9Z0usbXpXFC1B5niLGGOmyAlz0totSUDmULiRGFHsC3BDt4i9A0fwnMZiSq+aLKJUC5WVc8IPqo35y/Xqu1imHeOJSaCZ4dYI+mVB2+bx16TT+gdzbEJz1nAYjyvc54nZh4iX0nfFnsdm+OmqaPns5P26EReNv2f3NmVI+0zWxtduRfdZmT0cIIVYq1oA9HBiVbvyHsjhMtHstkd7FdViUHrO9XCq5nFeVq8KPGbVn5LhzCidRRisGc2QEwu23RlmPaoTWPNZuCIAhglbw5GSc51oC1PYLNSILHG+XAgCwiCrpHBaYJF03154FDZPFMx7raoMAB89jRY5JTlEX20NNXhYzFYJSPD9Jdd3rxmaZC4CCHgZYT1eu2SUz8u+utZFbWCVuzbBmRNd1vEaP/74+s88dnI63lo0UGHeF9iw1CAyyEWJshM05CTg3qZvB6xs0dET+8kpbTN7KExf6U2D9axFbK9mruB8DQNBDN5T7XZPmXZDjM8MCksvKTvu0StS4bA0/NKyutO1t1Adx2pCykQUe60QiWeuYCfiWmhZQCcyJ/L2kjOBAX7LwZO5eydqmP2lt1AI+PldBYmbAI+Z2YuWzqNrFMgtlTiPBZ3B/t9qsFSDaF9/G37F3WEuz6t5uE1CZmFQlDaLJLhJiTgGiKO5BCRHIAg4ppvQtT83IRAQ='
+    '/?l=md#GysKICwPbMcLBD17GY3E2G8DSmoFwEZPDRIY+a4eP0EZJ8Cr1Qgu96X91MeoV4Jrh2wLgNl2heQ+bCycmlBrhRYqvgnDYuNne1vO0j0STTxGIh3Mm7dzpRVJqa7urrpgiUfYC+o8dGHVNxKJkFgsmxK110tv7u4wBMKS9h1GxeLkihii/V9yCyIib9H/WZByLMTCbTooCZTn58WCN8VUWVlKEiXp8UMkCs3aireAUbeJzahqKj8YsACPq+roiSpZbKr/1uuOZWV3SJ7ACiLF83VcZWYk5teMZLP3Eb+qIAHyJklcCeJLMN7dW1qhZ0xX0LTZQr7QBcRi7WgxlLRIicVpJJ5ls4Dee5JlIMgaNP4Z7X1VCpiwzVAUeQ4P5TnJvalhWe/GEcE5m5/W5SPQp8zhcU3DgKOvTD1RViuRxWakddH4v4R3AUdIi5Ov+vH1K2Lwvz4ECp5bCagC46ldwAI7T/vXdMUSBBJvq6K79b1OaYmIyzTrpdXPjZ3VTmVow4xrUj7W1V/nVvzybSGFP/PdoZ6HE5J3UprPpfEMKSNyZwmWz0RkRfE37lkPKrQfAdaARtsj8Oa+fohb+VSm+7oWQPHNSWp9w7OyewEqz0uIMYbMBLjmcxelEBzqVQ0RxZ4EN4IuPoCeXc2IUeROMJA2xSqlZVz4g+LRoXX99bwZfEm4+LQrIBO0OgFPpoFYN7YulcYvcT6HoWXfpW6B0n2OsC1c+hrubOXPuNlcmjUdlYeVx4xfrPxd6TTLAaUzXSPbbr3zoy0uDQkxVgJrUB8OZqWbebFZe1uie3up259eURT0mOyNWEzlvEIuhF9hoEVQByqiHCaG6TGESuutg+pRUEBbHss2OG/+VVUqk7OFc0H6E+tfCQrkF4/O4ZJ9QGmvh1+skE7Msns6TAmP+JmoBR52K4uAN+YkRtvC9xq9EoYUAiQ+n64Cs6fJ67UNAaU89DBZFxh2yEz9uye5uMAh26qErePAJNigv/9+f22Pe7DBbGvZRIFZV2i/Use/IBuRqkZs3CSw3FywVBvNUU5Sf/moD6N3/cmGuy/A/FonF4csOS5ctRQ70WerDvqKdq080+cCI4BpNvK4aX7f8mV7HI+afPdQIV+ifUwBLA=='
   )
 </script>