feat: introduce global constants and enhance metadata handling

Innei · Innei · commit 3a5c66876f4c · 2025-06-04T23:12:45.000+08:00
- Added a new module to define global constants, including the application name.
- Updated the SSR index to initialize global constants on server start.
- Enhanced metadata handling in user metadata to include dynamic descriptions based on user subscriptions.
- Improved the Open Graph and hydration metadata structure for better SEO and user experience.
- Refactored user subscriptions query to group subscriptions by category for better organization.

Signed-off-by: Innei &lt;tukon479@gmail.com&gt;
diff --git a/apps/ssr/client/pages/(main)/share/users/[id]/metadata.ts b/apps/ssr/client/pages/(main)/share/users/[id]/metadata.ts
@@ -1,40 +1,74 @@
 import { isBizId } from "@follow/utils/utils"
 
+import type { MetaTag } from "~/meta-handler"
 import { defineMetadata } from "~/meta-handler"
 
-export default defineMetadata(async ({ params, apiClient, origin, throwError }) => {
-  const userId = params.id
+export default defineMetadata(
+  async ({ params, apiClient, origin, throwError }): Promise<MetaTag[]> => {
+    const mayBeUserId = params.id
 
-  const handle = isBizId(userId || "")
-    ? userId
-    : `${userId}`.startsWith("@")
-      ? `${userId}`.slice(1)
-      : userId
+    const handle = isBizId(mayBeUserId || "")
+      ? mayBeUserId
+      : `${mayBeUserId}`.startsWith("@")
+        ? `${mayBeUserId}`.slice(1)
+        : mayBeUserId
 
-  const res = await apiClient.profiles
-    .$get({
-      query: {
-        handle,
-        id: isBizId(handle || "") ? handle : undefined,
+    const [profileRes] = await Promise.allSettled([
+      apiClient.profiles
+        .$get({
+          query: {
+            handle,
+            id: isBizId(handle || "") ? handle : undefined,
+          },
+        })
+        .catch((e) => throwError(e.response?.status || 404, "User not found")),
+    ])
+    const isProfileResolved = profileRes.status === "fulfilled"
+    const realUserId = isProfileResolved ? profileRes.value.data.id : ""
+    const [subscriptionsRes] = await Promise.allSettled([
+      isProfileResolved
+        ? apiClient.subscriptions.$get({
+            query: { userId: realUserId },
+          })
+        : Promise.reject(),
+    ])
+
+    const isSubscriptionsResolved = subscriptionsRes.status === "fulfilled"
+
+    const { name } = isProfileResolved ? profileRes.value.data : {}
+    const subscriptions = isSubscriptionsResolved ? subscriptionsRes.value.data : []
+
+    return [
+      {
+        type: "title",
+        title: name || "",
+      },
+      {
+        type: "description",
+        description:
+          subscriptions.length > 0
+            ? `${name} followed ${subscriptions.length} public subscription${
+                subscriptions.length > 1 ? "s" : ""
+              }. Follow them to get their latest updates on ${APP_NAME}`
+            : "",
+      },
+      {
+        type: "openGraph",
+        title: `${name} on ${APP_NAME}`,
+        image: `${origin}/og/user/${mayBeUserId}`,
+      },
+      isProfileResolved && {
+        type: "hydrate",
+        data: profileRes.value.data,
+        path: apiClient.profiles.$url({ query: { id: mayBeUserId } }).pathname,
+        key: `profiles.$get,query:id=${mayBeUserId}`,
+      },
+      isSubscriptionsResolved && {
+        type: "hydrate",
+        data: subscriptionsRes.value.data,
+        path: apiClient.subscriptions.$url({ query: { userId: realUserId } }).pathname,
+        key: `subscriptions.$get,query:userId=${realUserId}`,
       },
-    })
-    .catch((e) => throwError(e.response?.status || 500, "User not found"))
-  const { name } = res.data
-  return [
-    {
-      type: "title",
-      title: name || "",
-    },
-    {
-      type: "openGraph",
-      title: name || "",
-      image: `${origin}/og/user/${userId}`,
-    },
-    {
-      type: "hydrate",
-      data: res.data,
-      path: apiClient.profiles.$url({ query: { id: userId } }).pathname,
-      key: `profiles.$get,query:id=${userId}`,
-    },
-  ]
-})
+    ].filter((v) => !!v) as MetaTag[]
+  },
+)
diff --git a/apps/ssr/client/query/users.ts b/apps/ssr/client/query/users.ts
@@ -2,34 +2,42 @@ import { apiClient } from "@client/lib/api-fetch"
 import { getProviders } from "@client/lib/auth"
 import { getHydrateData } from "@client/lib/helper"
 import type { LoginHydrateData } from "@client/pages/(login)/login/metadata"
+import type { ExtractBizResponse } from "@follow/models"
 import { capitalizeFirstLetter, isBizId, parseUrl } from "@follow/utils/utils"
 import { useQuery } from "@tanstack/react-query"
 
+const groupSubscriptions = (subscriptions: SubscriptionResult) => {
+  const groupFolder = {} as Record<string, typeof subscriptions>
+  for (const subscription of subscriptions.filter((s) => !s.isPrivate) || []) {
+    if (!subscription.category && "feeds" in subscription) {
+      const { siteUrl } = subscription.feeds
+      if (!siteUrl) continue
+      const parsed = parseUrl(siteUrl)
+      parsed.domain && (subscription.category = capitalizeFirstLetter(parsed.domain))
+    }
+    if (subscription.category) {
+      if (!groupFolder[subscription.category]) {
+        groupFolder[subscription.category] = []
+      }
+      groupFolder[subscription.category]!.push(subscription)
+    }
+  }
+  return groupFolder
+}
+
+type SubscriptionResult = ExtractBizResponse<typeof apiClient.subscriptions.$get>["data"]
 export const useUserSubscriptionsQuery = (userId: string | undefined) => {
   return useQuery({
     queryKey: ["subscriptions", "group", userId],
     queryFn: async () => {
       const res = await apiClient.subscriptions.$get({
         query: { userId },
       })
-      const groupFolder = {} as Record<string, typeof res.data>
-      for (const subscription of res.data.filter((s) => !s.isPrivate) || []) {
-        if (!subscription.category && "feeds" in subscription) {
-          const { siteUrl } = subscription.feeds
-          if (!siteUrl) continue
-          const parsed = parseUrl(siteUrl)
-          parsed.domain && (subscription.category = capitalizeFirstLetter(parsed.domain))
-        }
-        if (subscription.category) {
-          if (!groupFolder[subscription.category]) {
-            groupFolder[subscription.category] = []
-          }
-          groupFolder[subscription.category]!.push(subscription)
-        }
-      }
-      return groupFolder
+      return res.data
     },
+    select: groupSubscriptions,
     enabled: !!userId,
+    initialData: getHydrateData(`subscriptions.$get,query:userId=${userId}`),
   })
 }
 
diff --git a/apps/ssr/global.ts b/apps/ssr/global.ts
@@ -0,0 +1,7 @@
+import { name } from "../../package.json"
+
+export const defineGlobalConstants = () => {
+  Object.assign(globalThis, {
+    APP_NAME: name,
+  })
+}
diff --git a/apps/ssr/index.ts b/apps/ssr/index.ts
@@ -12,9 +12,12 @@ import { isDev } from "~/lib/env"
 import { MetaError } from "~/meta-handler"
 import { staticRoute } from "~/router/static"
 
+import { defineGlobalConstants } from "./global"
 import { globalRoute } from "./src/router/global"
 import { ogRoute } from "./src/router/og"
 
+defineGlobalConstants()
+
 const isVercel = process.env.VERCEL === "1"
 
 declare module "@fastify/request-context" {
@@ -92,6 +95,7 @@ if (!isVercel) {
     if (ip) console.info(`Server is running on https://${ip}:2234`)
   })
 }
+
 function getIPAddress() {
   const interfaces = require("node:os").networkInterfaces()
   for (const devName in interfaces) {
diff --git a/apps/ssr/src/meta-handler.ts b/apps/ssr/src/meta-handler.ts
@@ -23,13 +23,18 @@ interface MetaTitle {
   title: string
 }
 
+interface MetaDescription {
+  type: "description"
+  description: string
+}
+
 interface MetaHydrateData {
   type: "hydrate"
   data: any
   path: string
   key: string
 }
-export type MetaTag = MetaTagdata | MetaOpenGraph | MetaTitle | MetaHydrateData
+export type MetaTag = MetaTagdata | MetaOpenGraph | MetaTitle | MetaHydrateData | MetaDescription
 
 export async function injectMetaHandler(
   req: FastifyRequest,
diff --git a/apps/ssr/src/router/global.ts b/apps/ssr/src/router/global.ts
@@ -163,6 +163,13 @@ async function injectMetaToTemplate(document: Document, req: FastifyRequest, res
         }
         break
       }
+      case "description": {
+        const $meta = document.createElement("meta")
+        $meta.setAttribute("name", "description")
+        $meta.setAttribute("content", xss(meta.description))
+        document.head.append($meta)
+        break
+      }
       case "hydrate": {
         // Insert hydrate script
         const script = document.createElement("script")
diff --git a/apps/ssr/src/router/og/__base.tsx b/apps/ssr/src/router/og/__base.tsx

Original file line number	Diff line number	Diff line change
`@@ -163,6 +163,13 @@ async function injectMetaToTemplate(document: Document, req: FastifyRequest, res`
`163`	`163`	`}`
`164`	`164`	`break`
`165`	`165`	`}`
	`166`	`+ case "description": {`
	`167`	`+ const $meta = document.createElement("meta")`
	`168`	`+ $meta.setAttribute("name", "description")`
	`169`	`+ $meta.setAttribute("content", xss(meta.description))`
	`170`	`+ document.head.append($meta)`
	`171`	`+ break`
	`172`	`+ }`
`166`	`173`	`case "hydrate": {`
`167`	`174`	`// Insert hydrate script`
`168`	`175`	`const script = document.createElement("script")`