update

yoshinorin · Jan 4, 2024 · 015eee7 · 015eee7
1 parent 93e1565
commit 015eee7
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 10 deletions.
diff --git a/src/app/[...slug]/renderer.tsx b/src/app/[...slug]/renderer.tsx
@@ -1,24 +1,29 @@
+
 import ContentComponent from '../../components/content';
 import CoverWithNavigationComponent from '../../components/cover/withNavigation';
 import HeadMetaComponent from '../../components/headmeta';
 import MainBottomCodesComponent from '../../components/mainBottomCodes';
 import {
   Content,
   ScriptCode,
-  Insight
+  Insight,
+  ScriptSrc
 } from '../../models/models';
-import { getScriptCodes } from '../../utils/scriptTags';
+import { getScriptCodes, getScriptTags } from '../../utils/scriptTags';
 import { externalResources as externalResourcesConfig } from '../../../config';
+import HeaderScriptSrcsComponent from '../../components/headerScriptSrcs';
 
 export const Renderer: React.FunctionComponent<{
   slug: string,
   content: Content,
   insight: Insight
 }> = ({ slug, content, insight }) => {
   let externalResourceCodes: Array<ScriptCode> = [];
+  let externalResourceSrc: Array<ScriptSrc> = [];
   const hasExternalResources = (content.externalResources && externalResourcesConfig);
   if (hasExternalResources) {
-    externalResourceCodes = getScriptCodes(content.externalResources, externalResourcesConfig)
+    externalResourceCodes = getScriptCodes(content.externalResources, externalResourcesConfig);
+    externalResourceSrc = getScriptTags(content.externalResources, externalResourcesConfig);
   }
   return (
     <>
@@ -40,9 +45,23 @@ export const Renderer: React.FunctionComponent<{
           content={content}
           insight={insight}
         />
-        <MainBottomCodesComponent
-          scriptCodes={externalResourceCodes}
-        />
+        {
+          (() => {
+            // TODO: DRY with (`/articles/[...slug]/renderer.tsx`)
+            if (hasExternalResources) {
+              return(
+                <>
+                  <MainBottomCodesComponent
+                    scriptCodes={externalResourceCodes}
+                  />
+                  <HeaderScriptSrcsComponent
+                    scriptSrcs={externalResourceSrc}
+                  />
+                </>
+              );
+            }
+          })()
+        }
       </main>
     </>
   )

diff --git a/src/components/headerScriptSrcs.tsx b/src/components/headerScriptSrcs.tsx
@@ -1,4 +1,5 @@
 // import Script from 'next/script'
+import Script from 'next/script'
 import { ScriptSrc } from '../models/models';
 
 const HeaderScriptSrcsComponent: React.FunctionComponent<{ scriptSrcs: Array<ScriptSrc> }> = ({ scriptSrcs }) => {
@@ -10,11 +11,12 @@ const HeaderScriptSrcsComponent: React.FunctionComponent<{ scriptSrcs: Array<Scr
     <>
       {scriptSrcs.map((tag: ScriptSrc, idx) => {
         return(
-          <script
+          <Script
             key={tag.key + idx}
             src={tag.src}
+            strategy='lazyOnload'
           >
-          </script>
+          </Script>
         )
       })}
     </>

diff --git a/src/components/mainBottomCodes.tsx b/src/components/mainBottomCodes.tsx
@@ -1,3 +1,4 @@
+import Script from 'next/script'
 import { ScriptCode } from '../models/models';
 
 const MainBottomCodesComponent: React.FunctionComponent<{ scriptCodes: Array<ScriptCode> }> = ({ scriptCodes }) => {
@@ -11,14 +12,15 @@ const MainBottomCodesComponent: React.FunctionComponent<{ scriptCodes: Array<Scr
         return(
           // TODO: should fix Prop `dangerouslySetInnerHTML` did not match
           // NOTE: if use <Script> compnents provid from Next.js, Can not render MathJax
-          <script
+          <Script
             key={code.key + idx}
             type={code.type}
             dangerouslySetInnerHTML={{
               __html: code.code,
             }}
+            strategy='lazyOnload'
           >
-          </script>
+          </Script>
         )
       })}
     </>