fix: rect open graph image into preview (#121)

* fix: rect open graph image into preview * chore: removed space * fix: og and titles in courses and dashes --------- Co-authored-by: VaiTon <[email protected]>
cartabinaria · Oct 21, 2023 · 9e1370c · 9e1370c · vercel · Oct 21, 2023
1 parent 84183d3
commit 9e1370c
Show file tree

Hide file tree

Showing 7 changed files with 41 additions and 10 deletions.
diff --git a/src/app.html b/src/app.html
@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="en" data-theme="halloween">
+<html lang="en" data-theme="halloween" prefix="og:http://ogp.me/ns#">
 	<head>
 		<meta charset="utf-8" />
 		<meta name="viewport" content="width=device-width" />

diff --git a/src/lib/assets/risorse.students.cs.unibo.it-rec.png b/src/lib/assets/risorse.students.cs.unibo.it-rec.png
diff --git a/src/lib/assets/risorse.students.cs.unibo.it-rect.png b/src/lib/assets/risorse.students.cs.unibo.it-rect.png
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
@@ -18,7 +18,7 @@
 	import unibo192png from '$lib/assets/unibo192.png';
 	import unibo512png from '$lib/assets/unibo512.png';
 
-	import ogImage from '$lib/assets/risorse.students.cs.unibo.it.png';
+	import ogImage from '$lib/assets/risorse.students.cs.unibo.it-rect.png';
 </script>
 
 <svelte:head>
@@ -32,8 +32,10 @@
 	<link rel="icon" href={unibo192png} sizes="192x192" />
 	<link rel="icon" href={unibo512png} sizes="512x512" />
 
-	<meta name="image" property="og:image" content={ogImage} />
-	<meta property="og:image:height" content="512" />
+	<meta property="og:image" content={ogImage} />
+	<meta property="og:site_name" content="Risorse CSUnibo" />
+
+	<meta name="twitter:card" content={ogImage} />
 </svelte:head>
 
 <slot />

diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
@@ -9,10 +9,9 @@
 </script>
 
 <svelte:head>
-	<title>CSUnibo | Homepage</title>
+	<title>Risorse CSUnibo</title>
 	<!-- OG meta graph -->
-	<meta name="title" property="og:title" content="Risorse CSUnibo" />
-	<meta name="type" property="og:type" content="website" />
+	<meta name="title" property="og:title" content="Dashboard" />
 	<meta
 		name="description"
 		property="og:description"

diff --git a/src/routes/[...dir]/[zfile=dir]/+page.svelte b/src/routes/[...dir]/[zfile=dir]/+page.svelte
@@ -86,10 +86,40 @@
 			searchInput.focus();
 		}, 100);
 	}
+
+	function kebabToTitle(str: string) {
+		return str
+			.split('-')
+			.map((s) => s[0].toUpperCase() + s.slice(1))
+			.join(' ');
+	}
+
+	function titleToAcronym(str: string) {
+		return str
+			.split(' ')
+			.map((s) => s[0].toUpperCase())
+			.join('');
+	}
+
+	function genTitle(parts: string[]) {
+		if (parts.length === 0) return 'Risorse';
+		const title = kebabToTitle(parts[0]);
+
+		if (parts.length === 1) {
+			return title;
+		} else if (parts.length === 2) {
+			return titleToAcronym(title) + ' > ' + kebabToTitle(parts[1]);
+		} else {
+			return titleToAcronym(title) + ' >...> ' + kebabToTitle(parts[parts.length - 1]);
+		}
+	}
+
+	$: title = genTitle(urlParts);
 </script>
 
 <svelte:head>
-	<title>Risorse | {urlParts[urlParts.length - 1]}</title>
+	<title>{title}</title>
+	<meta property="og:title" content={title} />
 </svelte:head>
 
 <svelte:body on:keydown={keydown} />

diff --git a/src/routes/dash/[course]/+page.svelte b/src/routes/dash/[course]/+page.svelte
@@ -37,9 +37,9 @@
 </script>
 
 <svelte:head>
-	<title>Risorse CSUnibo | {data.course?.name}</title>
+	<title>{data.course?.name}</title>
 	<!-- OG meta graph -->
-	<meta name="title" property="og:title" content="Risorse CSUnibo | {data.course?.name}" />
+	<meta property="og:title" content={data.course?.name} />
 	<meta
 		name="url"
 		property="og:url"