feat: add csunibo favicon and link preview (#87)

- csunibo favicon - meta information and image for link preview - new theme "dracula" Co-authored-by: VaiTon <eyadlorenzo@gmail.com>
cartabinaria · Oct 4, 2023 · 6ba6a02 · 6ba6a02 · vercel · Oct 4, 2023
1 parent e694636
commit 6ba6a02
Show file tree

Hide file tree

Showing 17 changed files with 47 additions and 6 deletions.
diff --git a/src/app.html b/src/app.html
@@ -2,8 +2,9 @@
 <html lang="en" data-theme="halloween">
 	<head>
 		<meta charset="utf-8" />
-		<link rel="icon" href="%sveltekit.assets%/favicon.png" />
 		<meta name="viewport" content="width=device-width" />
+		<meta name="url" property="og:url" content="https://risorse.students.cs.unibo.it" />
+		<meta name="type" property="og:type" content="website" />
 		%sveltekit.head%
 	</head>
 

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.png b/src/lib/assets/risorse.students.cs.unibo.it.png
diff --git a/src/lib/assets/unibo128.ico b/src/lib/assets/unibo128.ico
diff --git a/src/lib/assets/unibo128.png b/src/lib/assets/unibo128.png
diff --git a/src/lib/assets/unibo180.ico b/src/lib/assets/unibo180.ico
diff --git a/src/lib/assets/unibo180.png b/src/lib/assets/unibo180.png
diff --git a/src/lib/assets/unibo192.ico b/src/lib/assets/unibo192.ico
diff --git a/src/lib/assets/unibo192.png b/src/lib/assets/unibo192.png
diff --git a/src/lib/assets/unibo32.ico b/src/lib/assets/unibo32.ico
diff --git a/src/lib/assets/unibo512.png b/src/lib/assets/unibo512.png
diff --git a/src/lib/settings.ts b/src/lib/settings.ts
@@ -1,6 +1,6 @@
 import { persisted } from 'svelte-local-storage-store';
 
-export const themes = ['halloween', 'retro'] as const;
+export const themes = ['halloween', 'retro', 'dracula'] as const;
 type Theme = (typeof themes)[number];
 
 export interface Settings {

diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
@@ -7,8 +7,36 @@
 			document.firstElementChild!.setAttribute('data-theme', $settings.theme);
 		});
 	});
+
+	import unibo32ico from '$lib/assets/unibo32.ico';
+	import unibo128ico from '$lib/assets/unibo128.ico';
+	import unibo180ico from '$lib/assets/unibo180.ico';
+	import unibo192ico from '$lib/assets/unibo192.ico';
+
+	import unibo128png from '$lib/assets/unibo128.png';
+	import unibo180png from '$lib/assets/unibo180.png';
+	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 ogImagerec from '$lib/assets/risorse.students.cs.unibo.it-rec.png';
 </script>
 
+<svelte:head>
+	<link rel="icon" href={unibo32ico} sizes="32x32" />
+	<link rel="icon" href={unibo128ico} sizes="128x128" />
+	<link rel="icon" href={unibo180ico} sizes="180x180" />
+	<link rel="icon" href={unibo192ico} sizes="192x192" />
+
+	<link rel="icon" href={unibo128png} sizes="128x128" />
+	<link rel="icon" href={unibo180png} sizes="180x180" />
+	<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" />
+</svelte:head>
+
 <slot />
 
 <style>

diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
@@ -9,12 +9,16 @@
 </script>
 
 <svelte:head>
-	<title>Dynamik | Homepage</title>
+	<title>CSUnibo | Homepage</title>
+	<!-- OG meta graph -->
+	<meta name="title" property="og:title" content="Risorse CSUnibo" />
+	<meta name="type" property="og:type" content="website" />
+	<meta name="description" property="og:description" content="Risorse per gli studenti dei corsi di laurea del dipartimento di informatica (DISI) dell'Università di Bologna"/>
 </svelte:head>
 
 <div class="flex justify-center">
 	<div class="container max-w-5xl">
-		<h1 class="text-4xl m-10 font-semibold text-center">Benvenuto su Dynamik! 👋</h1>
+		<h1 class="text-4xl m-10 font-semibold text-center">Benvenuto su CSUnibo!</h1>
 
 		<ul class="menu p-2 text-lg">
 			{#each data.courses as course}

diff --git a/src/routes/dash/[course]/+page.svelte b/src/routes/dash/[course]/+page.svelte
@@ -38,7 +38,15 @@
 </script>
 
 <svelte:head>
-	<title>Dynamik | {data.course?.name}</title>
+	<title>Risorse CSUnibo | {data.course?.name}</title>
+	<!-- OG meta graph -->
+	<meta name="title" property="og:title" content="Risorse CSUnibo | {data.course?.name}" />
+	<meta
+		name="url"
+		property="og:url"
+		content="https://risorse.students.cs.unibo.it/{data.course?.name}"
+	/>
+	<meta name="description" property="og:description" content="Risorse di {data.course?.name}" />
 </svelte:head>
 
 {#if !data.course}

diff --git a/static/favicon.png b/static/favicon.png
diff --git a/tailwind.config.cjs b/tailwind.config.cjs
@@ -13,6 +13,6 @@ module.exports = {
 	},
 	plugins: [require('@tailwindcss/typography'), require('daisyui'), addDynamicIconSelectors()],
 	daisyui: {
-		themes: ['halloween', 'retro']
+		themes: ['halloween', 'retro', 'dracula']
 	}
 };