Attempt different approach (no fs)

Author: Bouwmeester, Kevin

app/knowledge-hub/ECS/page.tsx

@@ -4,9 +4,8 @@ import Image from 'next/image';
 import Navbar from '../../components/Navbar';
 import Footer from '../../components/Footer';
 
-import fs from 'node:fs/promises';
-import path from 'node:path';
-import Script from 'next/script';
+import { useEffect, useState } from 'react';
+
 import { KevinContact } from '@/app/person-constants';
 import { MENU_ITEMS as menuItems } from '../../constants';
 
@@ -16,24 +15,21 @@ import ECSImage from '../../../public/knowledge-hub/ECS/ECS.jpg';
 // Prefix for where the assets live under /public
 const PUBLIC_PREFIX = '/knowledge-hub/ECS';
 
-async function loadHtml(): Promise<string> {
-  // Read the prebuilt HTML from /public
-  const filePath = path.join(process.cwd(), 'public', 'knowledge-hub', 'ECS', 'paper.html');
-  let html = await fs.readFile(filePath, 'utf8');
-
-  // --- Rewrite relative asset URLs so they work when embedded ---
-  // Matches src/href attributes that are relative (not starting with http(s)://, //, /, or #)
-  html = html.replace(
-    /\b(src|href)="'([^"']+)["']/gi,
-    (_m, attr, url) => `${attr}="${PUBLIC_PREFIX}/${url}"`
-  );
-
-  return html;
-}
-
+export default function Home() {
+  const [html, setHtml] = useState<string>('');
+  useEffect(() => {
+    fetch(`${PUBLIC_PREFIX}/paper.html`)
+      .then(r => r.text())
+      .then(t => {
+        // Optionally rewrite relative URLs if needed
+        const rewritten = t.replace(
+          /\b(src|href)="'([^"']+)["']/gi,
+          (_m, attr, url) => `${attr}="${PUBLIC_PREFIX}/${url}"`
+        );
+        setHtml(rewritten);
+      });
+  }, []);
 
-export default async function Home() {
-  const HTML = await loadHtml();
   return (
     <div>
       <Navbar menuItems={menuItems} pageSelected="" />
@@ -53,7 +49,7 @@ export default async function Home() {
           <a href="https://doi.org/10.1016/j.simpat.2020.102243"> Vico: An entity-component-system based co-simulation framework</a>
 
           <main className="prose max-w-none">
-            <article dangerouslySetInnerHTML={{ __html: HTML }} />
+            <article dangerouslySetInnerHTML={{ __html: html }} />
           </main>
 
           {/* Contact Section */}