prettier plus updates to the header entry. Stream gets iframe page instead of redirect

frontend/src/App.css

@@ -12,3 +12,13 @@
 .ui-btn-active {
     @apply bg-ctp-surface0 text-ctp-green border-ctp-green;
 }
+
+.stream-frame {
+    width: 96vw;
+    margin: 0 auto;
+    @apply aspect-video rounded-2xl overflow-hidden border border-ctp-lavender-800 bg-ctp-mantle shadow-lg;
+}
+
+.stream-frame iframe {
+    @apply w-full h-full border-0;
+}

frontend/src/App.jsx

@@ -2,13 +2,17 @@ import "./App.css";
 
 import Layout from "./components/Layout";
 import Home from "./pages/Home";
+import Stream from "./pages/Stream";
 
 function App() {
-  return (
+    const path = window.location.pathname.toLowerCase();
-    <Layout>
+
-      <Home />
+    let content = <Home />;
-    </Layout>
+    if (path === "/stream") {
-  );
+        content = <Stream />;
+    }
+
+    return <Layout>{content}</Layout>;
 }
 
 export default App;

frontend/src/components/Header.jsx

@@ -7,7 +7,7 @@ export default function Header({ theme }) {
         { label: "Nextcloud", url: "https://aramjonghu.nl/nextcloud" },
         { label: "Navidrome", url: "https://music.aramjonghu.nl" },
         { label: "Forgejo Git", url: "https://git.aramjonghu.nl" },
-    { label: "Stream", url: "https://stream.aramjonghu.nl" },
+        { label: "Stream", url: "/stream" },
         { label: "SearXNG", url: "https://xng.aramjonghu.nl" },
         { label: "Gitea zach-dev", url: "https://git.zach-dev.cc" },
     ];
@@ -27,7 +27,11 @@ export default function Header({ theme }) {
 
             <nav className="flex flex-wrap gap-3 items-center">
                 {navItems.map((item) => (
-          <a key={item.label} href={item.url} className="ui-btn ui-btn:hover">
+                    <a
+                        key={item.label}
+                        href={item.url}
+                        className="ui-btn ui-btn:hover"
+                    >
                         {item.label}
                     </a>
                 ))}

frontend/src/components/ProjectsReadme.jsx

@@ -113,7 +113,8 @@ export default function ProjectsReadme({ repoUrl }) {
                             code({ className, children, ...props }) {
                                 const isBlock =
                                     className ||
-                  (typeof children === "string" && children.includes("\n"));
+                                    (typeof children === "string" &&
+                                        children.includes("\n"));
 
                                 if (isBlock) {
                                     return (
@@ -170,14 +171,20 @@ export default function ProjectsReadme({ repoUrl }) {
                             ),
 
                             ul: ({ children }) => (
-                <ul className="list-disc pl-6 mb-4">{children}</ul>
+                                <ul className="list-disc pl-6 mb-4">
+                                    {children}
+                                </ul>
                             ),
 
                             ol: ({ children }) => (
-                <ol className="list-decimal pl-6 mb-4">{children}</ol>
+                                <ol className="list-decimal pl-6 mb-4">
+                                    {children}
+                                </ol>
                             ),
 
-              li: ({ children }) => <li className="mb-1">{children}</li>,
+                            li: ({ children }) => (
+                                <li className="mb-1">{children}</li>
+                            ),
 
                             a: ({ children, href }) => (
                                 <a

frontend/src/pages/Home.jsx

@@ -44,7 +44,8 @@ export default function Home() {
                             ◀︎ Prev
                         </button>
                         <span className="self-center mx-6 font-medium">
-              {projectList[projIdx].name} ({projIdx + 1}/{projectList.length})
+                            {projectList[projIdx].name} ({projIdx + 1}/
+                            {projectList.length})
                         </span>
                         <button
                             onClick={nextProject}
@@ -72,14 +73,16 @@ export default function Home() {
     return (
         <div className="text-ctp-text flex flex-col items-center justify-center px-6 py-6">
             <div className="w-full max-w-6xl text-center">
-        <h1 className="text-4xl font-bold text-ctp-mauve">AramJonghu</h1>
+                <h1 className="text-4xl font-bold text-ctp-mauve">
+                    AramJonghu
+                </h1>
                 <p className="mt-4">
-          Software engineer building systems, services, and experiments across a
+                    Software engineer building systems, services, and
-          self-hosted environment.
+                    experiments across a self-hosted environment.
                 </p>
                 <p className="mt-3">
-          This site acts as a hub for projects, infrastructure, and personal
+                    This site acts as a hub for projects, infrastructure, and
-          tooling.
+                    personal tooling.
                 </p>
                 <div className="mt-10 border rounded p-4">
                     <div className="flex flex-wrap justify-center gap-12 mb-6">
@@ -88,7 +91,9 @@ export default function Home() {
                                 key={section.id}
                                 onClick={() => setActiveTab(section.id)}
                                 className={`ui-btn ${
-                  activeTab === section.id ? "ui-btn-active" : ""
+                                    activeTab === section.id
+                                        ? "ui-btn-active"
+                                        : ""
                                 }`}
                             >
                                 {section.title}

frontend/src/pages/Stream.jsx

@@ -0,0 +1,21 @@
+export default function Stream() {
+    return (
+        <div className="text-ctp-text flex flex-col min-h-screen px-4 py-6">
+            <div className="w-full text-center flex flex-col flex-1">
+                <h1 className="text-4xl font-bold text-ctp-mauve mb-6">
+                    Stream
+                </h1>
+
+                <div className="stream-frame w-full mx-auto flex-1 max-h-[85vh]">
+                    <iframe
+                        src="https://stream.aramjonghu.nl"
+                        title="Stream"
+                        allow="autoplay; fullscreen; picture-in-picture"
+                        loading="lazy"
+                        className="w-full h-full border-0 rounded-lg"
+                    />
+                </div>
+            </div>
+        </div>
+    );
+}