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

lms/lms/doctype/lms_enrollment/lms_enrollment.json

@@ -35,7 +35,8 @@
    "in_standard_filter": 1,
    "label": "Member",
    "options": "User",
-   "reqd": 1
+   "reqd": 1,
+   "search_index": 1
   },
   {
    "default": "Student",
@@ -123,7 +124,7 @@
  ],
  "index_web_pages_for_search": 1,
  "links": [],
- "modified": "2023-10-02 12:41:25.139734",
+ "modified": "2024-03-18 17:32:30.182301",
  "modified_by": "Administrator",
  "module": "LMS",
  "name": "LMS Enrollment",

lms/public/frontend/index.html

@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <link rel="icon" href="/favicon.png" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Frappe UI App</title>
+    <title>Learning</title>
     <script type="module" crossorigin src="/assets/index-xt-hKVBz.js"></script>
     <link rel="modulepreload" crossorigin href="/assets/frappe-ui-n1bXVQkV.js">
     <link rel="stylesheet" crossorigin href="/assets/frappe-ui-dYBF8eAq.css">

package.json

@@ -2,7 +2,10 @@
   "name": "frappe_lms",
   "version": "1.0.0",
   "description": "Easy to use, open-source, Learning Management System",
-  "workspaces": ["frappe-ui", "frontend"],
+  "workspaces1": [
+    "frappe-ui",
+    "frontend"
+  ],
   "scripts": {
     "test-local": "cypress open --e2e --browser chrome"
   },
@@ -17,4 +20,4 @@
     "url": "https://github.com/frappe/lms/issues"
   },
   "homepage": "https://github.com/frappe/lms#readme"
-}
+}