add scripts to the head

src/build.tsx

@@ -125,6 +125,10 @@ let html = renderToString(
         `${environment == "prod" ? process.env.WEB_URL : "."}/data/videos.json`,
       ],
       dns: [process.env.ENDPOINT as string, "https://wsrv.nl"],
+      script: [
+        environment == "dev" ? "/static/dev/hotreload.js" : "",
+        environment == "dev" ? "/static/populate_index.js" : "/static/populate_index.min.js"
+      ]
     }}
   />
 );

src/templates/Components/Head.tsx

@@ -7,6 +7,7 @@ export default function head(props: {
   environment: "prod" | "dev";
   preload?: string[];
   dns?: string[];
+  script?: string[];
 }) {
   const mimetype = `image/${
     props.image.split(".")[props.image.split(".").length - 1]
@@ -26,14 +27,43 @@ export default function head(props: {
       <meta property="og:image:type" content={mimetype} />
       <meta property="og:image:alt" content="" />
       <meta property="og:logo" content={`${props.url}/static/logo-1x.png`} />
-      <link href={props.environment == "dev" ? "/static/tailwind.css" : "/static/tailwind.min.css"} rel="stylesheet" />
+      <link
-      {props.preload ? props.preload.map((item) => <link key={`preload_${item}`} rel="preload" href={item} as="fetch" crossOrigin="anonymous"></link>) : ""}
+        href={
-      {props.dns ? props.dns.map((item) => <link key={`dns_${item}`} rel="dns-prefetch" href={item} />) : ""}
+          props.environment == "dev"
-      {props.environment == "dev" ? (
+            ? "/static/tailwind.css"
-        <script src="./static/dev/hotreload.js"></script>
+            : "/static/tailwind.min.css"
-      ) : (
+        }
-        ""
+        rel="stylesheet"
-      )}
+      />
+      {props.preload
+        ? props.preload.map((item) =>
+            item ? (
+              <link
+                key={`preload_${item}`}
+                rel="preload"
+                href={item}
+                as="fetch"
+                crossOrigin="anonymous"
+              ></link>
+            ) : (
+              ""
+            )
+          )
+        : ""}
+      {props.dns
+        ? props.dns.map((item) =>
+            item ? (
+              <link key={`dns_${item}`} rel="dns-prefetch" href={item} />
+            ) : (
+              ""
+            )
+          )
+        : ""}
+      {props.script
+        ? props.script.map((item) =>
+            item ? <script key={`script_${item}`} src={item}></script> : ""
+          )
+        : ""}
     </head>
   );
 }

src/templates/index.tsx

@@ -11,6 +11,7 @@ export default function Index(props: {
     url: string;
     preload?: string[];
     dns?: string[];
+    script?: string[];
   };
 }) {
   return (
@@ -56,7 +57,6 @@ export default function Index(props: {
             </div>
           </div>
         </div>
-        <script src={props.environment == "dev" ? "/static/populate_index.js" : "/static/populate_index.min.js"}></script>
       </body>
     </html>
   );