feat: support course meta tags (#421)

* support course meta tags

* fix import

apps/dashboard/src/routes/course/[slug]/+page.js

@@ -1,15 +0,0 @@
-import { fetchCourse } from '$lib/utils/services/courses';
-import { supabase, getSupabase } from '$lib/utils/functions/supabase';
-
-if (!supabase) {
-  getSupabase();
-}
-
-export const load = async ({ params = { slug: '' } }) => {
-  const { data } = await fetchCourse(undefined, params.slug);
-
-  return {
-    slug: params.slug,
-    course: data
-  };
-};

apps/dashboard/src/routes/course/[slug]/+page.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-  import get from 'lodash/get';
   import CourseLandingPage from '$lib/components/CourseLandingPage/index.svelte';
   import type { Course } from '$lib/utils/types';
 
@@ -20,32 +19,4 @@
   $: setCourseData(data.course);
 </script>
 
-<svelte:head>
-  <title>{get(data.course, 'title', '')}</title>
-  <meta name="description" content={get(data.course, 'description', '')} />
-  <meta name="theme-color" content="#ffffff" />
-  <meta name="viewport" content="width=device-width, initial-scale=1" />
-  <meta property="og:title" content={get(data.course, 'title', '')} />
-  <meta property="og:description" content={get(data.course, 'description', '')} />
-
-  <meta property="og:type" content="website" />
-  <meta property="og:image:type" content="image/png" />
-  <meta property="og:image:width" content="280" />
-  <meta property="og:image:height" content="200" />
-  <meta property="og:image:secure_url" content={get(data.course, 'logo', '')} />
-
-  <meta property="og:type" content="website" />
-  <meta property="og:image:type" content="image/png" />
-  <meta property="og:image:width" content="1920" />
-  <meta property="og:image:height" content="1080" />
-  <meta property="og:image:secure_url" itemprop="image" content={get(data.course, 'logo', '')} />
-
-  <meta name="twitter:card" content="summary_large_image" />
-  <meta property="twitter:domain" content="classroomio.com" />
-  <meta property="twitter:url" content="https://www.classroomio.com/" />
-  <meta name="twitter:title" content={get(data.course, 'title', '')} />
-  <meta name="twitter:description" content={get(data.course, 'description', '')} />
-  <meta name="twitter:image" content={get(data.course, 'logo', '')} />
-</svelte:head>
-
 <CourseLandingPage {courseData} />

apps/dashboard/src/routes/course/[slug]/+page.ts

@@ -0,0 +1,45 @@
+import { fetchCourse } from '$lib/utils/services/courses';
+import { supabase, getSupabase } from '$lib/utils/functions/supabase';
+import type { MetaTagsProps } from 'svelte-meta-tags';
+
+if (!supabase) {
+  getSupabase();
+}
+
+export const load = async ({ params = { slug: '' } }) => {
+  const { data } = await fetchCourse(undefined, params.slug);
+
+  const pageMetaTags = Object.freeze({
+    title: data?.title,
+    description: data?.description,
+    openGraph: {
+      title: data?.title,
+      description: data?.description,
+      images: [
+        {
+          url: data?.logo,
+          alt: data?.title,
+          width: 280,
+          height: 200,
+          secureUrl: data?.logo,
+          type: 'image/jpeg'
+        }
+      ]
+    },
+    twitter: {
+      handle: '@classroomio',
+      site: '@classroomio',
+      cardType: 'summary_large_image',
+      title: data?.title,
+      description: data?.description,
+      image: data?.logo,
+      imageAlt: 'ClassroomIO OG Image'
+    }
+  }) satisfies MetaTagsProps;
+
+  return {
+    slug: params.slug,
+    course: data,
+    pageMetaTags
+  };
+};