From 15f6d57300162baebd38db201c907a7c8fbac117 Mon Sep 17 00:00:00 2001
From: Rotimi Best <best@classroomio.com>
Date: Wed, 6 Dec 2023 15:54:44 +0300
Subject: [PATCH] feat: add meta tags to course pages

---
 .../components/CourseLandingPage/index.svelte | 14 ---------
 .../src/routes/course/[slug]/+page.svelte     | 29 +++++++++++++++++++
 2 files changed, 29 insertions(+), 14 deletions(-)

diff --git a/apps/dashboard/src/lib/components/CourseLandingPage/index.svelte b/apps/dashboard/src/lib/components/CourseLandingPage/index.svelte
index 0041e6d0..cf2db6e1 100644
--- a/apps/dashboard/src/lib/components/CourseLandingPage/index.svelte
+++ b/apps/dashboard/src/lib/components/CourseLandingPage/index.svelte
@@ -95,20 +95,6 @@
   }
 </script>
 
-<svelte:head>
-  <title>{editMode ? '[app] - ' : ''}{get(courseData, 'title', '')}</title>
-  <meta name="description" content={get(courseData, 'description', '')} />
-  <meta name="theme-color" content="#ffffff" />
-  <meta name="viewport" content="width=device-width, initial-scale=1" />
-  <meta property="og:title" content={get(courseData, 'title', '')} />
-  <meta property="og:description" content={get(courseData, '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(courseData, 'logo', '')} />
-</svelte:head>
-
 <div class="w-full bg-white dark:bg-black flex flex-col items-center">
   <!-- Header Section -->
   <header id="header" class="banner w-full flex items-center justify-center p-">
diff --git a/apps/dashboard/src/routes/course/[slug]/+page.svelte b/apps/dashboard/src/routes/course/[slug]/+page.svelte
index 005bc518..8b933a40 100644
--- a/apps/dashboard/src/routes/course/[slug]/+page.svelte
+++ b/apps/dashboard/src/routes/course/[slug]/+page.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+  import get from 'lodash/get';
   import CourseLandingPage from '$lib/components/CourseLandingPage/index.svelte';
   import type { Course } from '$lib/utils/types';
 
@@ -19,4 +20,32 @@
   $: 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} />