Deps update and added a copy button

The goto() function does not respect no trailing slashes, so the app breaks

package.json

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

src/app.html

@@ -4,13 +4,7 @@
     <title>Paste</title>
     <meta charset="utf-8" />
     <link rel="icon" href="%sveltekit.assets%/favicon.svg" />
-    <link rel="preload" as="font" type="text/css" href="%sveltekit.assets%/hack-subset.css" />
-    <link
-      rel="stylesheet"
-      type="text/css"
-      href="https://cdn.jsdelivr.net/combine/
-npm/codemirror@5.65.16/lib/codemirror.min.css,
-npm/codemirror@5.65.16/theme/nord.min.css" />
+    <link rel="stylesheet" href="%sveltekit.assets%/hack-subset.css" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta property="og:title" content="Paste - No-database paste service" />
     <meta property="og:url" content="https://paste.scambier.xyz" />

src/components/CodeView.svelte

@@ -1,22 +1,40 @@
 <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}
     </div>
   {:else if isPlainText}
-    <div class="whitespace-pre-line h-full">
-      {decompressed}
-    </div>
+    <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/components/EditForm.svelte

@@ -6,6 +6,7 @@
   import ComboBox from './ComboBox.svelte'
   import Icon from '@iconify/svelte'
   import { goto } from '$app/navigation'
+  import hljs from 'highlight.js'
 
   type Language = {
     text: string
@@ -31,7 +32,7 @@
   })
 
   selectedLang.subscribe((lang) => {
-    textWrap = lang === 'plt' || lang === 'md'
+    textWrap = lang === 'plaintext' || lang === 'markdown'
   })
 
   $: {
@@ -43,12 +44,16 @@
 
   $: {
     if (editor) {
-      languages = CodeMirror.modeInfo
-        .map((e: any) => ({
-          text: e.name,
-          value: shorten(e.name),
+      languages = (CodeMirror.modeInfo as unknown[])
+        .map((e: any) => {
+          let name = e.name
+          if (name === 'Common Lisp') name = 'Lisp'
+          return {
+            text: name,
+            value: shorten(name),
             data: { mime: e.mime, mode: e.mode },
-        }))
+          }
+        })
         .filter((l: any) => l.value !== 'gflm') // Remove github flavored markdown, redundant with markdown
 
       selectedLanguage =

src/lib/utils.ts

@@ -1,3 +1,5 @@
+import hljs from 'highlight.js'
+
 export const slugify = (str: string) =>
   str
     .trim()
@@ -10,22 +12,22 @@ export const slugify = (str: string) =>
 
 export const shorten = (name: string) => {
   let n = slugify(name).replace('script', '-s').replace('python', 'py').replace('markdown', 'md')
-  const nov = (s: string) => s[0] + s.substr(1).replace(/[aeiouy-]/g, '')
+  const nov = (s: string) => s[0] + s.substring(1).replace(/[aeiouy-]/g, '')
   if (n.replace(/-/g, '').length <= 4) {
     return n.replace(/-/g, '')
   }
   if (n.split('-').length >= 2) {
     return n
       .split('-')
-      .map((x) => nov(x.substr(0, 2)))
+      .map((x) => nov(x.substring(0, 2)))
       .join('')
-      .substr(0, 4)
+      .substring(0, 4)
   }
   n = nov(n)
   if (n.length <= 4) {
     return n
   }
-  return n.substr(0, 2) + n.substr(n.length - 2, 2)
+  return n.substring(0, 2) + n.substring(n.length - 2, 2)
 }
 
 export function getLangFromUrl() {
@@ -37,3 +39,11 @@ export const byId = (id: string) => document.getElementById(id)
 export function isInIframe(): boolean {
   return window !== window.parent
 }
+
+export function getHljsLangFromShort(short: string): string {
+  const langs = hljs
+    .listLanguages()
+    .filter((l) => l !== 'taggerscript') // seriously? This overrides typescript.
+    .map((lang) => ({ lang, short: shorten(lang) }))
+  return langs.find((l) => l.short === short)?.lang ?? 'plaintext'
+}

src/routes/+layout.ts

@@ -1,2 +1,3 @@
 export const prerender = true
 export const ssr = false
+export const trailingSlash = 'always'

src/routes/+page.svelte

@@ -8,7 +8,7 @@
   import rehypeStringify from 'rehype-stringify'
   import hljs from 'highlight.js'
   import 'highlight.js/styles/nord.min.css'
-  import { getLangFromUrl, isInIframe } from '$lib/utils'
+  import { getHljsLangFromShort, getLangFromUrl, isInIframe } from '$lib/utils'
   import TopBar from '../components/TopBar.svelte'
   import Icon from '@iconify/svelte'
   import CodeView from '../components/CodeView.svelte'
@@ -26,12 +26,16 @@
       let lang = getLangFromUrl()
       // Remove github flavored markdown, redundant with markdown
       lang = lang === 'gflm' ? 'md' : lang
+
+      // Get the correct language name for hljs
+      lang = getHljsLangFromShort(lang)
+
       // decompress the data
       const { decompress } = await import('$lib/brotli')
       decompressed = await decompress(hash)
 
       // Markdown
-      if (lang === 'md') {
+      if (lang === 'markdown') {
         const html = await unified()
           .use(remarkParse)
           .use(remarkGfm)
@@ -43,12 +47,12 @@
         htmlContent = html.toString()
       }
       // Plain text
-      else if (lang === 'plt' || !lang) {
+      else if (lang === 'plaintext' || !lang) {
         isPlainText = true
       }
       // Code
       else {
-        htmlContent = hljs.highlight(lang, decompressed).value
+        htmlContent = hljs.highlight(decompressed, { language: lang }).value
       }
     } else {
       // Redirect to editor page

src/routes/about/+page.svelte

@@ -2,6 +2,6 @@
   import { goto } from '$app/navigation'
 
   goto(
-    '/?l=md#G6QLACwPuFPLgyKzJ/S8nBADxa9HABs9NUhg5Lt6/ARlnACvViO43Pfd7/Ux6n6C/jFY5gfdlkHyTtNxhVMTaqnQwqc3vN71Lw1i7Guvm1i6R6IZj7FIldl9ez+ldGTprl4OusV1YePAIzzC6W8kEiGxMZgtP0uwgDNeXAYvx9ue9PsvR8GGTPBnORfQ6Vm/nvPPuzkLiBF3gpmtTL4xUQKcvL2nOutBVybQ69ps4X6/D9AcNySMMJIM1dekVmWXI7Y1MxBFzti1I4o0TpyX8sYOSYVlhpuffAReh7WIbOSHz63ygBBw6YrU8p8ta6IZgBryTI2My/gOEr9fJA7/66PakXtkJ6xaec4JeGKgp/1hUnixWPLvKki4dvy08SPpJWVat6uhONaKV5UBxx45WJGahp6pwje7mRT+jL3TDZ40ofBg8+51pR5EAE5djuV6KZkTjMPculABx4yxxTTYa8+/7umnEMvlWNz3SEhJ8GjKNxp/jE34W60/R5xz5G6O11aG4CfyTItQbVejJOEQDAzIoH8zgzJ3ZRz1dxrIh+hVKF/csLImtT2Wx/p52r4lZl9cQH7p+whWeWLC1Qq0cq3+RRV8jOwDqc6I8hDO55l50PjKTaQIwdzrYovt7cudjR4zqchTODncNgpdi0xt6+jDf7vitwaEcJ3Uz1SrcWrvtunHoNX3XAe2cn15moyJVtmofK83Go7ZTTGZ9HM584Is77LBlZKUQiBLBlAZ5XQqbWgjjHnJBpCDWDIwUNdWVlVWBNKJB21EEjbORwEASHFVwC4SOm5j82E90XBFfKv7WJ3IsbOTGb7KSpJWxa9Z+opYeoda8eO0sOOGQ1+WHAGDBuIYpw86auJi4t+dpmwcMkeNlUUkjzE+cl78pqHUD6psu5JVVz53J2HzLx1OoXAEIHlofSGiwaydOgeHGA5I/OVJbqbv5CbH12/g+Gs1PuBq8v4CAEkPniT4tybOtyDI74YE0ZW1s5mfPwQSup8sPaaKd4/uW1b0xGyQcGYUhfci90VEgVK1xEqkLnzspWWA1a1l4XTeXtFGA2QYk7MSftmNMG6ZGjRKM5N/TNuO9kuQuqC0T+HzzjO/gHjPPsoessA4YvDxbs9ZsCz53vMWZVMTCdDoMIxC08ciEpIlHjJQ6bfPLCczAQ=='
+    '/?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>

src/routes/editor/+page.svelte

@@ -80,6 +80,12 @@ npm/codemirror@5.65.16/addon/mode/simple.min.js,
 npm/codemirror@5.65.16/addon/scroll/simplescrollbars.js,
 npm/codemirror@5.65.16/mode/meta.min.js"
     on:load={initCodeEditor}></script>
+  <link
+    rel="stylesheet"
+    type="text/css"
+    href="https://cdn.jsdelivr.net/combine/
+npm/codemirror@5.65.16/lib/codemirror.min.css,
+npm/codemirror@5.65.16/theme/nord.min.css" />
 </svelte:head>
 
 <div class="flex flex-col font-mono h-screen bg-gray-700">
@@ -103,7 +109,7 @@ npm/codemirror@5.65.16/mode/meta.min.js"
 <style>
   :global(div.CodeMirror) {
     height: 100%;
-    font-size: 15px;
+    font-size: 14px;
     font-family: 'Hack', monospace;
   }
   #footer {