feat: page titles

frontend/src/pages/CourseDetail.vue

@@ -107,6 +107,7 @@ import CourseCardOverlay from '@/components/CourseCardOverlay.vue'
 import CourseOutline from '@/components/CourseOutline.vue'
 import CourseReviews from '@/components/CourseReviews.vue'
 import UserAvatar from '@/components/UserAvatar.vue'
+import { updateDocumentTitle } from '@/utils'
 
 const props = defineProps({
 	courseName: {
@@ -132,6 +133,15 @@ const breadcrumbs = computed(() => {
 	})
 	return items
 })
+
+const pageMeta = computed(() => {
+	return {
+		title: course?.data?.title,
+		description: course?.data?.short_introduction,
+	}
+})
+
+updateDocumentTitle(pageMeta)
 </script>
 <style>
 .course-description p {

frontend/src/pages/Courses.vue

@@ -112,6 +112,7 @@ import { createListResource, Breadcrumbs, Tabs, Badge, Button } from 'frappe-ui'
 import CourseCard from '@/components/CourseCard.vue'
 import { Plus } from 'lucide-vue-next'
 import { ref, computed, inject } from 'vue'
+import { updateDocumentTitle } from '@/utils'
 
 const user = inject('$user')
 const courses = createListResource({
@@ -163,4 +164,13 @@ if (user.data) {
 		})
 	}
 }
+
+const pageMeta = computed(() => {
+	return {
+		title: 'Courses',
+		description: 'All Courses divided by categories',
+	}
+})
+
+updateDocumentTitle(pageMeta)
 </script>

frontend/src/utils/index.js

@@ -1,5 +1,5 @@
 import { toast } from 'frappe-ui'
-import { useDateFormat, useTimeAgo } from '@vueuse/core'
+import { useTimeAgo } from '@vueuse/core'
 import { BookOpen, Users, TrendingUp, Briefcase } from 'lucide-vue-next'
 import { Quiz } from '@/utils/quiz'
 import { Upload } from '@/utils/upload'
@@ -7,6 +7,7 @@ import Header from '@editorjs/header'
 import Paragraph from '@editorjs/paragraph'
 import Embed from '@editorjs/embed'
 import NestedList from '@editorjs/nested-list'
+import { watch } from 'vue'
 
 export function createToast(options) {
 	toast({
@@ -84,6 +85,24 @@ export function showToast(title, text, icon) {
 	})
 }
 
+export function updateDocumentTitle(meta) {
+	watch(
+		() => meta,
+		(meta) => {
+			if (!meta.value.title) return
+			if (meta.value.title && meta.value.subtitle) {
+				document.title = `${meta.value.title} | ${meta.value.subtitle}`
+				return
+			}
+			if (meta.value.title) {
+				document.title = `${meta.value.title}`
+				return
+			}
+		},
+		{ immediate: true, deep: true }
+	)
+}
+
 export function htmlToText(html) {
 	const div = document.createElement('div')
 	div.innerHTML = html