feat: support course meta tags (#421)

* support course meta tags

* fix import

apps/dashboard/src/app.html

@@ -12,7 +12,8 @@
   <link rel="icon" type="image/png" sizes="32x32" href="/logo-32.png" />
   <link rel="stylesheet" href="https://cdn.plyr.io/3.7.3/plyr.css" />
 
-  <title>ClassroomIO –&nbsp;Launch Your Online Bootcamp In Minutes</title>
+  <!-- <title>ClassroomIO –&nbsp;Launch Your Online Bootcamp In Minutes</title>
+  
   <meta name="description"
     content="Launch your bootcamp quickly and affordably with ClassroomIO, the customizable online teaching platform." />
   <meta name="theme-color" content="#ffffff" />
@@ -29,7 +30,7 @@
   <meta name="twitter:creator" content="@rotimi_best" />
   <meta name="twitter:title" content="ClassroomIO –&nbsp;Launch Your Online Bootcamp In Minutes" />
   <meta name="twitter:description"
-    content="Launch your bootcamp quickly and affordably with ClassroomIO, the customizable online teaching platform." />
+    content="Launch your bootcamp quickly and affordably with ClassroomIO, the customizable online teaching platform." /> -->
 
   <!-- <link rel="stylesheet" href="global.css"> -->
   <link rel="manifest" href="/manifest.json" crossorigin="use-credentials" />

apps/dashboard/src/routes/+layout.server.ts

@@ -1,3 +1,4 @@
+import type { MetaTagsProps } from 'svelte-meta-tags';
 import { dev, browser } from '$app/environment';
 import { redirect } from '@sveltejs/kit';
 import { blockedSubdomain } from '$lib/utils/constants/app';
@@ -16,6 +17,7 @@ interface LoadOutput {
   isOrgSite: boolean;
   skipAuth: boolean;
   org: CurrentOrg | null;
+  baseMetaTags: MetaTagsProps;
 }
 
 export const load = async ({ url, cookies }): Promise<LoadOutput> => {
@@ -23,7 +25,8 @@ export const load = async ({ url, cookies }): Promise<LoadOutput> => {
     orgSiteName: '',
     isOrgSite: false,
     skipAuth: false,
-    org: null
+    org: null,
+    baseMetaTags: getBaseMetaTags(url)
   };
 
   // Selfhosted usecase would be here
@@ -98,6 +101,44 @@ export const load = async ({ url, cookies }): Promise<LoadOutput> => {
   return response;
 };
 
+function getBaseMetaTags(url: URL) {
+  return Object.freeze({
+    title: 'ClassroomIO – Launch Your Online Bootcamp In Minutes',
+    description:
+      'Launch your bootcamp quickly and affordably with ClassroomIO, the customizable online teaching platform.',
+    canonical: new URL(url.pathname, url.origin).href,
+    openGraph: {
+      type: 'website',
+      url: new URL(url.pathname, url.origin).href,
+      locale: 'en_IE',
+      title: 'ClassroomIO – Launch Your Online Bootcamp In Minutes',
+      description:
+        'Launch your bootcamp quickly and affordably with ClassroomIO, the customizable online teaching platform.',
+      siteName: 'ClassroomIO',
+      images: [
+        {
+          url: 'https://classroomio.com/classroomio-opengraph-image.png',
+          alt: 'ClassroomIO OG Image',
+          width: 1920,
+          height: 1080,
+          secureUrl: 'https://classroomio.com/classroomio-opengraph-image.png',
+          type: 'image/jpeg'
+        }
+      ]
+    },
+    twitter: {
+      handle: '@classroomio',
+      site: '@classroomio',
+      cardType: 'summary_large_image',
+      title: 'ClassroomIO – Launch Your Online Bootcamp In Minutes',
+      description:
+        'Launch your bootcamp quickly and affordably with ClassroomIO, the customizable online teaching platform.',
+      image: 'https://classroomio.com/classroomio-opengraph-image.png',
+      imageAlt: 'ClassroomIO OG Image'
+    }
+  });
+}
+
 // Define getInitialLocale function
 function getInitialLocale(): string {
   if (browser) {

apps/dashboard/src/routes/+layout.svelte

@@ -1,12 +1,14 @@
 <script lang="ts">
   import { onMount } from 'svelte';
   import { injectSpeedInsights } from '@vercel/speed-insights/sveltekit';
+  import { MetaTags } from 'svelte-meta-tags';
   import { fly } from 'svelte/transition';
   import { derived } from 'svelte/store';
   import { goto } from '$app/navigation';
   import { browser, dev } from '$app/environment';
   import { page, navigating } from '$app/stores';
   import isEmpty from 'lodash/isEmpty';
+  import merge from 'lodash/merge';
   import { Theme, ToastNotification, Loading } from 'carbon-components-svelte';
   import type { CarbonTheme } from 'carbon-components-svelte/types/Theme/Theme.svelte';
   import LandingNavigation from '$lib/components/Navigation/index.svelte';
@@ -176,7 +178,7 @@
 
       const orgRes = await getOrganizations(profileData.id, data.isOrgSite, data.orgSiteName);
 
-      const isStudentAccount = parseInt(orgRes.currentOrg.role_id) === ROLE.STUDENT;
+      const isStudentAccount = orgRes.currentOrg.role_id == ROLE.STUDENT;
 
       // student redirect
       if (data.isOrgSite) {
@@ -287,10 +289,13 @@
 
   $: path = $page.url?.pathname?.replace('/', '');
   $: carbonTheme = $globalStore.isDark ? 'g100' : 'white';
+  $: metaTags = merge(data.baseMetaTags, $page.data.pageMetaTags);
 </script>
 
 <svelte:window on:resize={handleResize} />
 
+<MetaTags {...metaTags} />
+
 <Theme bind:theme={carbonTheme} />
 
 <UpgradeModal />

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
+  };
+};