From 015eee7ed83d6280e2a81b1e5f1f10c941ce28cf Mon Sep 17 00:00:00 2001
From: yoshinorin <yoshinorin.net@outlook.com>
Date: Thu, 4 Jan 2024 23:54:56 +0900
Subject: [PATCH] update

---
 src/app/[...slug]/renderer.tsx      | 31 +++++++++++++++++++++++------
 src/components/headerScriptSrcs.tsx |  6 ++++--
 src/components/mainBottomCodes.tsx  |  6 ++++--
 3 files changed, 33 insertions(+), 10 deletions(-)

diff --git a/src/app/[...slug]/renderer.tsx b/src/app/[...slug]/renderer.tsx
index 2251140..6eb3cda 100644
--- a/src/app/[...slug]/renderer.tsx
+++ b/src/app/[...slug]/renderer.tsx
@@ -1,3 +1,4 @@
+
 import ContentComponent from '../../components/content';
 import CoverWithNavigationComponent from '../../components/cover/withNavigation';
 import HeadMetaComponent from '../../components/headmeta';
@@ -5,10 +6,12 @@ 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,
@@ -16,9 +19,11 @@ export const Renderer: React.FunctionComponent<{
   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
index 1779d7f..41266ee 100644
--- 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
index 21167b0..3d0ae28 100644
--- 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>
         )
       })}
     </>