fix: script inject

Signed-off-by: Innei <i@innei.in>
Innei · Apr 1, 2024 · 50c200b · 50c200b
1 parent a5ade7c
commit 50c200b
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 15 deletions.
diff --git a/src/app/(app)/layout.tsx b/src/app/(app)/layout.tsx
@@ -18,6 +18,7 @@ import { TocAutoScroll } from '~/components/modules/toc/TocAutoScroll'
 import { sansFont, serifFont } from '~/lib/fonts'
 import { AggregationProvider } from '~/providers/root/aggregation-data-provider'
 import { AppFeatureProvider } from '~/providers/root/app-feature-provider'
+import { ScriptInjectProvider } from '~/providers/root/script-inject-provider'
 
 import { WebAppProviders } from '../../providers/root'
 import { Analyze } from './analyze'
@@ -156,6 +157,7 @@ export default async function RootLayout(props: PropsWithChildren) {
               type="image/x-icon"
               media="(prefers-color-scheme: light)"
             />
+            <ScriptInjectProvider />
           </head>
           <body
             className={`${sansFont.variable} ${serifFont.variable} m-0 h-full p-0 font-sans`}
@@ -165,7 +167,6 @@ export default async function RootLayout(props: PropsWithChildren) {
                 aggregationData={data}
                 appConfig={themeConfig.config}
               />
-
               <div data-theme>
                 <Root>{children}</Root>
               </div>
@@ -174,10 +175,10 @@ export default async function RootLayout(props: PropsWithChildren) {
               <SearchPanelWithHotKey />
               <Analyze />
               <SyncServerTime />
+              <ToastContainer />
+              <ScrollTop />
+              <div className="fixed inset-y-0 right-0 w-[var(--removed-body-scroll-bar-size)] bg-base-100" />
             </WebAppProviders>
-            <ToastContainer />
-            <ScrollTop />
-            <div className="fixed inset-y-0 right-0 w-[var(--removed-body-scroll-bar-size)] bg-base-100" />
           </body>
         </html>
       </AppFeatureProvider>

diff --git a/src/config.d.ts b/src/config.d.ts
@@ -43,8 +43,8 @@ declare global {
 
   export interface Custom {
     css: string[]
-    styles: any[]
     js: string[]
+    styles: string[]
     scripts: ScriptProps[]
   }
 

diff --git a/src/providers/root/index.tsx b/src/providers/root/index.tsx
@@ -17,7 +17,6 @@ import { DebugProvider } from './debug-provider'
 import { EventProvider } from './event-provider'
 import { JotaiStoreProvider } from './jotai-provider'
 import { PageScrollInfoProvider } from './page-scroll-info-provider'
-import { ScriptInjectProvider } from './script-inject-provider'
 import { SocketContainer } from './socket-provider'
 
 const loadFeatures = () =>
@@ -45,8 +44,6 @@ export function WebAppProviders({ children }: PropsWithChildren) {
       {/* <SentryProvider key="SentryProvider" /> */}
       <PageScrollInfoProvider key="PageScrollInfoProvider" />
       <DebugProvider key="debugProvider" />
-
-      <ScriptInjectProvider />
     </ProviderComposer>
   )
 }

diff --git a/src/providers/root/script-inject-provider.tsx b/src/providers/root/script-inject-provider.tsx
@@ -1,15 +1,33 @@
-'use client'
-
 import Script from 'next/script'
 
-import { useAppConfigSelector } from './aggregation-data-provider'
+import { fetchAggregationData } from '~/app/(app)/api'
+
+export const ScriptInjectProvider = async () => {
+  const { theme } = await fetchAggregationData()
+  const { scripts, css, js, styles } = theme.config.custom || {}
 
-export const ScriptInjectProvider = () => {
-  const scripts = useAppConfigSelector((config) => config.custom?.scripts)
-  if (!scripts) return null
   return (
     <>
-      {scripts.map((props) => {
+      {css && (
+        <style
+          id="shiro-custom-css"
+          dangerouslySetInnerHTML={{
+            __html: css.join('\n'),
+          }}
+        />
+      )}
+      {js && (
+        <script
+          id="shiro-custom-js"
+          dangerouslySetInnerHTML={{
+            __html: js.join('\n'),
+          }}
+        />
+      )}
+      {styles?.map((style) => (
+        <link key={style} rel="stylesheet" href={style} />
+      ))}
+      {scripts?.map((props) => {
         const nextProps = { ...props } as any
         const dataKeys = Object.keys(props).filter((key) =>
           /data[A-Z]/.test(key),