Merge pull request #1263 from CodeCrowCorp/dev

Feat: updated channel and profile SEO
CodeCrowCorp · May 23, 2024 · 2281c3b · 2281c3b
2 parents 335d1ea + 28db98c
commit 2281c3b
Show file tree

Hide file tree

Showing 6 changed files with 34 additions and 9 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "mage-website",
-	"version": "0.2.16",
+	"version": "0.2.17",
 	"license": "GPL-3.0",
 	"private": true,
 	"type": "module",

diff --git a/src/lib/components/Channel/Stream/VideoItem.svelte b/src/lib/components/Channel/Stream/VideoItem.svelte
@@ -477,7 +477,9 @@
 					{/if}
 				</label>
 				{#if showBanItem || showRoleItem}
-					<ul tabindex="0" class="dropdown-content menu p-2 shadow bg-base-200 rounded-box w-52">
+					<ul
+						tabindex="0"
+						class="dropdown-content dropdown-top menu p-2 shadow bg-base-100 rounded-box w-52">
 						{#if showRoleItem && !channel.bans.includes(video._id)}
 							<li>
 								<a on:click={() => toggleMod()}

diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
@@ -84,7 +84,8 @@
         </script>`}
 
 	<meta name="twitter:card" content="summary" />
-	<meta name="twitter:site" content="@GaganSuie" />
+	<meta name="twitter:site" content={`@${$page.data.seo?.username || 'gagansuie'}`} />
+	<meta name="twitter:creator" content={`@${$page.data.seo?.username || 'gagansuie'}`} />
 	<meta
 		name="twitter:title"
 		content={$page.data.seo?.title || 'Mage - A collaborative streaming platform'} />
@@ -95,6 +96,7 @@
 	<meta name="twitter:image" content={$page.data.seo?.image || '%sveltekit.assets%/banner.png'} />
 	<meta name="twitter:image:alt" content={$page.data.seo?.imageAlt || 'Mage Banner'} />
 
+	<meta property="og:site_name" content="Mage" />
 	<meta property="og:type" content="website" />
 	<meta property="og:url" content={$page.data.seo?.url || 'https://mage.stream'} />
 	<meta

diff --git a/src/routes/[username]/+page.server.ts b/src/routes/[username]/+page.server.ts
@@ -10,11 +10,12 @@ export const load = (async ({ params, url }) => {
 	}
 	return {
 		seo: {
-			title: profile.username?.toLowerCase(),
+			title: profile.displayName?.toLowerCase(),
 			description: profile.bio,
 			image: profile.avatar,
 			imageAlt: `${profile.username?.toLowerCase()} avatar`,
-			url: url.href
+			url: url.href,
+			username: profile.username?.toLowerCase()
 		},
 		profile: profile,
 		lazy: {

diff --git a/src/routes/channel/[channelId]/+page.server.ts b/src/routes/channel/[channelId]/+page.server.ts
@@ -1,8 +1,26 @@
-import { putImage } from '$lib/api'
+import { get, putImage } from '$lib/api'
 import { dataURLtoFile } from '$lib/utils'
-import type { Actions } from './$types'
+import { error } from '@sveltejs/kit'
+import type { Actions, PageServerLoad } from './$types'
 
-//TODO: get channel in server side and set SEO data
+export const load = (async ({ params, url }) => {
+	if (!params.channelId) error(404)
+	const channel = await get(`channel?channelId=${params.channelId}`)
+	if (!channel || channel?.error) {
+		error(404)
+	}
+	return {
+		seo: {
+			title: channel.title,
+			description: channel.description,
+			image: channel.thumbnail || 'https://mage.stream/placeholder/programming-placeholder.jpg',
+			imageAlt: `channel thumbnail`,
+			url: url.href,
+			username: channel.username
+		},
+		channel
+	}
+}) satisfies PageServerLoad
 
 export const actions = {
 	'edit-channel': async ({ request, locals }) => {

diff --git a/src/routes/channel/[channelId]/+page.svelte b/src/routes/channel/[channelId]/+page.svelte
@@ -22,7 +22,9 @@
 	import DrawerRestream from '$lib/components/Channel/Chat/DrawerRestream.svelte'
 	import DialogSponsor from '$lib/components/Channel/Chat/DialogSponsor.svelte'
 	import { is_feature_premium_enabled } from '$lib/stores/remoteConfigStore'
+	import type { PageData } from './$types'
 
+	export let data: PageData
 	let channel: any,
 		isDeleteModalOpen = false,
 		showEditChannelDrawer = false,
@@ -163,7 +165,7 @@
 	}
 
 	const loadChannel = async () => {
-		const chan = await get(`channel?channelId=${$page.params.channelId}`)
+		const chan = data.channel
 		chan.videoItems = []
 		const isOnboarded = await get(`plan/onboarded?userId=${chan.userId}`)
 		chan.isOnboarded = isOnboarded || false