style changes

.nvmrc

@@ -0,0 +1 @@
+v20.9.0

src/app.postcss

@@ -2,3 +2,40 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+@layer base {
+    @font-face {
+        font-family: 'Monaspace Neon';
+        src: url('$lib/assets/fonts/MonaspaceNeon-Regular.woff') format('truetype');
+        font-weight: normal;
+        font-style: normal;
+        font-display: swap;
+    }
+    @font-face {
+        font-family: 'Monaspace Neon';
+        src: url('$lib/assets/fonts/MonaspaceNeon-Bold.woff') format('truetype');
+        font-weight: bold;
+        font-style: normal;
+        font-display: swap;
+    }
+    @font-face {
+        font-family: 'Monaspace Neon';
+        src: url('$lib/assets/fonts/MonaspaceNeon-Italic.woff') format('truetype');
+        font-weight: normal;
+        font-style: italic;
+        font-display: swap;
+    }
+    @font-face {
+        font-family: 'Monaspace Neon';
+        src: url('$lib/assets/fonts/MonaspaceNeon-BoldItalic.woff') format('truetype');
+        font-weight: bold;
+        font-style: italic;
+        font-display: swap;
+    }
+}
+
+@layer components {
+    pre, code {
+        font-family: 'Monaspace Neon', monospace !important;
+    }
+}

src/lib/components/Editor.svelte

@@ -15,7 +15,7 @@
 </script>
 
 <textarea
-    class="pl-12 pt-5 w-full h-full bg-transparent border-none resize-none outline-none"
+    class="pl-12 pt-5 w-full h-full bg-transparent border-none resize-none outline-none font-monaspaceNeon text-lg"
     bind:value={contents}
     bind:this={ref}
     {...$$restProps}

src/lib/db/index.ts

@@ -2,7 +2,6 @@ import { MongoClient } from 'mongodb';
 import { env } from '$env/dynamic/private';
 import type { Db, Collection } from 'mongodb';
 import type PasteSchema from "./paste-schema";
-import { get } from 'http';
 
 // let client: MongoClient;
 // let db: Db;

src/routes/api/pastes/+server.ts

@@ -1,10 +1,10 @@
 import { detectLanguage } from "$utils/hljs";
 import { encrypt as doEncrypt } from "$utils/crypto";
 import { error, json, text, type RequestHandler } from "@sveltejs/kit";
-import { generate } from 'random-words';
 import { Mongo } from "$lib/db/index";
 import { env } from "$env/dynamic/private";
 import { extensionMap } from "$utils/languages";
+import { generate } from 'random-words';
 
 interface PasteOptions {
     contents?: string;

src/routes/images/paste/[slug]/+server.ts

@@ -0,0 +1,49 @@
+import { Mongo } from "$lib/db/index";
+import { env } from "$env/dynamic/private";
+import { error, type RequestHandler } from "@sveltejs/kit";
+
+const maxLines = 15;
+
+export const GET: RequestHandler = async ({ params }) => {
+    const [id, ext] = params.slug.split('.');
+    
+    const pastes = await Mongo.getNamedCollection("pastes");
+    const paste = await pastes.findOne({ id });
+
+    if (!paste) {
+        throw error(404, 'Paste not found');
+    }
+
+    if (paste.encrypted) {
+        throw error(404, 'Cannot generate image for encrypted paste');
+    }
+
+    if (paste.burnAfterReading) {
+        throw error(404, 'Cannot generate image for burnable paste');
+    }
+
+    const code = paste.contents;
+    const highlight = ext || paste.highlight;
+
+    let lines	= code.split('\n').slice(0, maxLines).concat(Array.from({ length: maxLines - code.split('\n').length }, () => ''));
+    
+    // Truncate each line to 80 characters, and pad the rest with spaces.
+    lines		= lines.map(line => line.slice(0, 70).padEnd(70, ' '));
+
+    const title	= `${env.SITE_URL}/${id}.${highlight}`;
+    const endpoint	= `https://inkify.0x45.st/generate?code=${encodeURIComponent(lines.join('\n'))}&window_title=${encodeURIComponent(title)}&language=${encodeURIComponent(highlight)}&pad_horiz=5&pad_vert=5`;
+
+    const res = await fetch(endpoint);
+    const image = res.body;
+
+    if (image) {
+        return new Response(image, {
+            headers: {
+                'Content-Type': 'image/png',
+                'Cache-Control': 'public, max-age=604800, immutable',
+            },
+        });
+    } else {
+        throw error(500, 'Could not generate image');
+    }
+};

src/utils/hljs.ts

@@ -35,7 +35,7 @@ hljs.addPlugin({
 			const lineNumber = index + 1;
 			const paddedLineNumber = String(lineNumber).padStart(5, ' ');
 
-			return `<div class="flex flex-row items-start justify-start gap-8"><div class="text-gray-400 select-none shrink-0 min-w-14">${paddedLineNumber}</div><pre class="whitespace-pre-wrap">${line}</pre></div>`;
+			return `<div class="flex flex-row items-start justify-start gap-2"><div class="text-gray-400 select-none shrink-0 min-w-[50px]">${paddedLineNumber}</div><pre class="whitespace-pre-wrap">${line}</pre></div>`;
 		}).join('\n');
 
 		result.value = `<div class="flex flex-col">${code}</div>`

tailwind.config.ts

@@ -15,7 +15,11 @@ const config = {
 		)
 	],
 	theme: {
-		extend: {},
+		extend: {
+			fontFamily: {
+				monaspaceNeon: ['Monaspace Neon'],
+			},
+		},
 	},
 	plugins: [
 		forms,

vite.config.ts

@@ -2,5 +2,5 @@ import { sveltekit } from '@sveltejs/kit/vite';
 import { defineConfig } from 'vite';
 
 export default defineConfig({
-	plugins: [sveltekit()]
+	plugins: [sveltekit()],
 });