opengraph woo

prisma/migrations/20240706040428_defaults/migration.sql

@@ -0,0 +1,2 @@
+-- AlterTable
+ALTER TABLE `UserSettings` MODIFY `embedColor` INTEGER NOT NULL DEFAULT 3159110;

prisma/schema.prisma

@@ -43,7 +43,7 @@ model UserSettings {
 
     embedTitle       String @default("{{file}}")
     embedDescription String @default("Uploaded by {{username}} at {{time}}")
-    embedColor       Int    @default(0)
+    embedColor       Int    @default(3159110)
 }
 
 model Upload {

src/lib/server/database.ts

@@ -119,3 +119,13 @@ export async function getUpload(id: string) {
 		}
 	});
 }
+
+export async function getSettings(id: number) {
+	if (!id) return false;
+
+	return await prisma.userSettings.findFirst({
+		where: {
+			userId: id
+		}
+	});
+}

src/routes/file/[id]/+page.server.ts

@@ -1,4 +1,4 @@
-import { getUpload } from '$lib/server/database';
+import { getSettings, getUpload } from '$lib/server/database';
 import minio, { BUCKET } from '$lib/server/minio';
 import { error } from '@sveltejs/kit';
 
@@ -6,8 +6,19 @@ export async function load({ params }) {
 	const file = await getUpload(params.id);
 	if (!file) throw error(404, { status: 404, message: 'File Not Found' });
 
+	const settings = await getSettings(file.uploader.id);
+	if (!settings) throw error(500, { status: 500, message: 'Internal Server Error' });
+
 	const metadata = await minio.statObject(BUCKET, `${file.uploader.id}/${file.fileName}`);
 
+	function formatString(input: string) {
+		if (file && metadata)
+			return input
+				.replaceAll('{{file}}', file.fileName)
+				.replaceAll('{{username}}', file.uploader.username)
+				.replaceAll('{{time}}', file.uploaded.toUTCString());
+	}
+
 	return {
 		file: {
 			id: file.id,
@@ -18,6 +29,12 @@ export async function load({ params }) {
 		},
 		uploader: {
 			username: file.uploader.username
+		},
+		settings: {
+			title: formatString(settings.embedTitle),
+			description: formatString(settings.embedDescription),
+			color: '#' + settings.embedColor.toString(16),
+			large: true
 		}
 	};
 }

src/routes/file/[id]/+page.svelte

@@ -1,10 +1,25 @@
 <script>
+	import { page } from '$app/stores';
 	import { bytesToHumanReadable } from '$lib';
 	import Link from '$lib/components/Inputs/Link.svelte';
 
 	export let data;
 </script>
 
+<svelte:head>
+	<title>{data.file.fileName}</title>
+	<meta property="og:title" content={data.settings.title} />
+	<meta property="og:description" content={data.settings.description} />
+	<meta property="og:url" content="{$page.url.origin}/file/{data.file.id}" />
+	<meta property="og:site_name" content="cirro's file uploader" />
+	<meta name="theme-color" content={data.settings.color} />
+	{#if data.file.type.includes('video')}
+		<meta property="og:video" content="{$page.url.origin}/download/{data.file.id}" />
+	{:else if data.file.type.includes('image')}
+		<meta property="og:image" content="{$page.url.origin}/download/{data.file.id}" />
+	{/if}
+</svelte:head>
+
 <div class="container">
 	<div class="h-[85vh] md:h-screen">
 		<div class="flex justify-center items-center h-full">