feat: feature provider

Innei · Innei · commit 1617ca8adadc · 2024-01-19T21:59:47.000+08:00
Signed-off-by: Innei &lt;i@innei.in&gt;
diff --git a/src/app.static.config.ts b/src/app.static.config.ts
@@ -7,3 +7,6 @@ export const appStaticConfig = {
     },
   },
 }
+
+export const CDN_HOST = 'cdn.innei.ren'
+export const TENCENT_CDN_DOMAIN = CDN_HOST
diff --git a/src/app/(app)/feed/route.tsx b/src/app/(app)/feed/route.tsx
@@ -10,6 +10,7 @@ import xss from 'xss'
 import type { AggregateRoot } from '@mx-space/api-client'
 import type { MarkdownToJSX } from 'markdown-to-jsx'
 
+import { CDN_HOST } from '~/app.static.config'
 import { InsertRule } from '~/components/ui/markdown/parsers/ins'
 import { MarkRule } from '~/components/ui/markdown/parsers/mark'
 import { MentionRule } from '~/components/ui/markdown/parsers/mention'
@@ -94,6 +95,15 @@ ${ReactDOM.renderToString(
         Gallery: () => (
           <div style={{ textAlign: 'center' }}>这个内容只能在原文中查看哦~</div>
         ),
+
+        img: ({ src, alt }) => {
+          if (src) {
+            if (new URL(src).hostname === CDN_HOST) {
+              return <span>此图片不支持在 RSS Render 中查看。</span>
+            }
+          }
+          return <img src={src} alt={alt} />
+        },
       },
       additionalParserRules: {
         spoilder: SpoilerRule,
diff --git a/src/app/(app)/layout.tsx b/src/app/(app)/layout.tsx
@@ -2,6 +2,7 @@ import { Analytics } from '@vercel/analytics/react'
 import { ToastContainer } from 'react-toastify'
 import type { AggregateRoot } from '@mx-space/api-client'
 import type { Viewport } from 'next'
+import type { PropsWithChildren } from 'react'
 
 import { ClerkProvider } from '@clerk/nextjs'
 
@@ -16,6 +17,7 @@ import { attachUAAndRealIp } from '~/lib/attach-ua'
 import { sansFont, serifFont } from '~/lib/fonts'
 import { getQueryClient } from '~/lib/query-client.server'
 import { AggregationProvider } from '~/providers/root/aggregation-data-provider'
+import { AppFeatureProvider } from '~/providers/root/app-feature-provider'
 import { queries } from '~/queries/definition'
 
 import { WebAppProviders } from '../../providers/root'
@@ -120,11 +122,7 @@ export const generateMetadata = async () => {
   }
 }
 
-type Props = {
-  children: React.ReactNode
-}
-
-export default async function RootLayout(props: Props) {
+export default async function RootLayout(props: PropsWithChildren) {
   attachUAAndRealIp()
   const { children } = props
 
@@ -139,48 +137,49 @@ export default async function RootLayout(props: Props) {
   aggregationData = data
 
   return (
-    // <ClerkProvider localization={ClerkZhCN}>
     <ClerkProvider>
-      <html lang="zh-CN" className="noise" suppressHydrationWarning>
-        <head>
-          <SayHi />
-          <HydrationEndDetector />
-          <AccentColorStyleInjector />
-          <link
-            rel="shortcut icon"
-            href={themeConfig.config.site.faviconDark}
-            type="image/x-icon"
-            media="(prefers-color-scheme: dark)"
-          />
-          <link
-            rel="shortcut icon"
-            href={themeConfig.config.site.favicon}
-            type="image/x-icon"
-            media="(prefers-color-scheme: light)"
-          />
-        </head>
-        <body
-          className={`${sansFont.variable} ${serifFont.variable} m-0 h-full p-0 font-sans`}
-        >
-          <WebAppProviders>
-            <AggregationProvider
-              aggregationData={data}
-              appConfig={themeConfig.config}
+      <AppFeatureProvider tmdb={!!process.env.TMDB_API_KEY}>
+        <html lang="zh-CN" className="noise" suppressHydrationWarning>
+          <head>
+            <SayHi />
+            <HydrationEndDetector />
+            <AccentColorStyleInjector />
+            <link
+              rel="shortcut icon"
+              href={themeConfig.config.site.faviconDark}
+              type="image/x-icon"
+              media="(prefers-color-scheme: dark)"
             />
-
-            <div data-theme>
-              <Root>{children}</Root>
-            </div>
-
-            <TocAutoScroll />
-            <SearchPanelWithHotKey />
-            <Analyze />
-          </WebAppProviders>
-          <ToastContainer stacked />
-          <ScrollTop />
-        </body>
-      </html>
-      <Analytics />
+            <link
+              rel="shortcut icon"
+              href={themeConfig.config.site.favicon}
+              type="image/x-icon"
+              media="(prefers-color-scheme: light)"
+            />
+          </head>
+          <body
+            className={`${sansFont.variable} ${serifFont.variable} m-0 h-full p-0 font-sans`}
+          >
+            <WebAppProviders>
+              <AggregationProvider
+                aggregationData={data}
+                appConfig={themeConfig.config}
+              />
+
+              <div data-theme>
+                <Root>{children}</Root>
+              </div>
+
+              <TocAutoScroll />
+              <SearchPanelWithHotKey />
+              <Analyze />
+            </WebAppProviders>
+            <ToastContainer stacked />
+            <ScrollTop />
+          </body>
+        </html>
+        <Analytics />
+      </AppFeatureProvider>
     </ClerkProvider>
   )
 }
diff --git a/src/components/ui/link-card/LinkCard.tsx b/src/components/ui/link-card/LinkCard.tsx
@@ -19,6 +19,7 @@ import { fetchGitHubApi } from '~/lib/github'
 import { clsxm } from '~/lib/helper'
 import { getDominantColor } from '~/lib/image'
 import { apiClient } from '~/lib/request'
+import { useFeatureEnabled } from '~/providers/root/app-feature-provider'
 
 import { LinkCardSource } from './enums'
 import styles from './LinkCard.module.css'
@@ -73,6 +74,30 @@ const LinkCardImpl: FC<LinkCardProps> = (props) => {
     [fullUrl],
   )
 
+  const tmdbEnabled = useFeatureEnabled('tmdb')
+  const validTypeAndFetchFunction = useCallback(
+    (source: LinkCardSource, id: string) => {
+      const fetchDataFunctions = {
+        [LinkCardSource.MixSpace]: fetchMxSpaceData,
+        [LinkCardSource.GHRepo]: fetchGitHubRepoData,
+        [LinkCardSource.GHCommit]: fetchGitHubCommitData,
+        [LinkCardSource.GHPr]: fetchGitHubPRData,
+        [LinkCardSource.Self]: fetchMxSpaceData,
+      } as Record<LinkCardSource, FetchObject>
+      if (tmdbEnabled)
+        fetchDataFunctions[LinkCardSource.TMDB] = fetchTheMovieDBData
+
+      const fetchFunction = fetchDataFunctions[source]
+      if (!fetchFunction) {
+        return { isValid: false, fetchFn: null }
+      }
+
+      const isValid = fetchFunction.isValid(id)
+      return { isValid, fetchFn: isValid ? fetchFunction.fetch : null }
+    },
+    [tmdbEnabled],
+  )
+
   const { isValid, fetchFn } = useMemo(
     () => validTypeAndFetchFunction(source, id),
     [source, id],
@@ -207,25 +232,6 @@ type FetchObject = {
   fetch: FetchFunction
 }
 
-function validTypeAndFetchFunction(source: LinkCardSource, id: string) {
-  const fetchDataFunctions = {
-    [LinkCardSource.MixSpace]: fetchMxSpaceData,
-    [LinkCardSource.GHRepo]: fetchGitHubRepoData,
-    [LinkCardSource.GHCommit]: fetchGitHubCommitData,
-    [LinkCardSource.GHPr]: fetchGitHubPRData,
-    [LinkCardSource.Self]: fetchMxSpaceData,
-    [LinkCardSource.TMDB]: fetchTheMovieDBData,
-  } as Record<LinkCardSource, FetchObject>
-
-  const fetchFunction = fetchDataFunctions[source]
-  if (!fetchFunction) {
-    return { isValid: false, fetchFn: null }
-  }
-
-  const isValid = fetchFunction.isValid(id)
-  return { isValid, fetchFn: isValid ? fetchFunction.fetch : null }
-}
-
 const fetchGitHubRepoData: FetchObject = {
   isValid: (id) => {
     // owner/repo
diff --git a/src/components/ui/markdown/renderers/LinkRenderer.tsx b/src/components/ui/markdown/renderers/LinkRenderer.tsx
@@ -20,6 +20,7 @@ import {
   parseGithubPrUrl,
   parseGithubTypedUrl,
 } from '~/lib/link-parser'
+import { useFeatureEnabled } from '~/providers/root/app-feature-provider'
 
 import { EmbedGithubFile } from '../../../modules/shared/EmbedGithubFile'
 import { LinkCard, LinkCardSource } from '../../link-card'
@@ -53,6 +54,8 @@ export const BlockLinkRenderer = ({
     [children, href],
   )
 
+  const tmdbEnabled = useFeatureEnabled('tmdb')
+
   if (!url) {
     return fallbackElement
   }
@@ -113,18 +116,17 @@ export const BlockLinkRenderer = ({
       )
     }
     case isTMDBUrl(url): {
-      return (
-        <LinkCard
-          fallbackUrl={url.toString()}
-          source={LinkCardSource.TMDB}
-          id={url.pathname.slice(1)}
-        />
-      )
+      if (tmdbEnabled)
+        return (
+          <LinkCard
+            fallbackUrl={url.toString()}
+            source={LinkCardSource.TMDB}
+            id={url.pathname.slice(1)}
+          />
+        )
     }
-
-    default:
-      return fallbackElement
   }
+  return fallbackElement
 }
 
 const FixedRatioContainer = ({
diff --git a/src/lib/image.ts b/src/lib/image.ts
@@ -1,3 +1,5 @@
+import { TENCENT_CDN_DOMAIN } from '~/app.static.config'
+
 export const calculateDimensions = ({
   width,
   height,
@@ -40,7 +42,6 @@ export function getDominantColor(imageObject: HTMLImageElement) {
     .slice(1)}`
 }
 
-const TENCENT_CDN_DOMAIN = 'cdn.innei.ren'
 export const addImageUrlResizeQuery = (url: string, size: number) => {
   const parsedUrl = new URL(url)
 
diff --git a/src/providers/root/app-feature-provider.tsx b/src/providers/root/app-feature-provider.tsx
@@ -0,0 +1,23 @@
+'use client'
+
+import { createContext, useContextSelector } from 'use-context-selector'
+import type { FC, PropsWithChildren } from 'react'
+
+const appFeatures = {
+  tmdb: false,
+}
+const AppFeatureContext = createContext(appFeatures)
+export const AppFeatureProvider: FC<PropsWithChildren & typeof appFeatures> = ({
+  children,
+  ...features
+}) => {
+  return (
+    <AppFeatureContext.Provider value={features}>
+      {children}
+    </AppFeatureContext.Provider>
+  )
+}
+
+export const useFeatureEnabled = (feature: keyof typeof appFeatures) => {
+  return useContextSelector(AppFeatureContext, (ctx) => ctx[feature])
+}

Original file line number	Diff line number	Diff line change
`@@ -7,3 +7,6 @@ export const appStaticConfig = {`
`7`	`7`	`},`
`8`	`8`	`},`
`9`	`9`	`}`
	`10`	`+`
	`11`	`+export const CDN_HOST = 'cdn.innei.ren'`
	`12`	`+export const TENCENT_CDN_DOMAIN = CDN_HOST`