Dynamically update title

This commit is contained in:
Maurice Heumann
2025-04-22 15:20:49 +02:00
parent e5c2fb7e36
commit bf7567c7b2
7 changed files with 111 additions and 38 deletions

View File

@@ -4,7 +4,6 @@
<meta charset="UTF-8" />
<link rel="icon" type="image/png" href="https://momo5502.com/emulator/pinata.png" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Sogen - Windows User Space Emulator</title>
</head>
<body>
<div id="root"></div>

42
page/package-lock.json generated
View File

@@ -26,6 +26,7 @@
"react": "^19.0.0",
"react-bootstrap-icons": "^1.11.5",
"react-dom": "^19.0.0",
"react-helmet": "^6.1.0",
"react-router-dom": "^7.5.1",
"react-window": "^1.8.11",
"tailwind-merge": "^3.2.0",
@@ -37,6 +38,7 @@
"@types/node": "^22.14.1",
"@types/react": "^19.0.10",
"@types/react-dom": "^19.0.4",
"@types/react-helmet": "^6.1.11",
"@vitejs/plugin-react": "^4.4.1",
"eslint": "^9.25.1",
"eslint-plugin-react-hooks": "^6.0.0",
@@ -2619,6 +2621,16 @@
"@types/react": "^19.0.0"
}
},
"node_modules/@types/react-helmet": {
"version": "6.1.11",
"resolved": "https://registry.npmjs.org/@types/react-helmet/-/react-helmet-6.1.11.tgz",
"integrity": "sha512-0QcdGLddTERotCXo3VFlUSWO3ztraw8nZ6e3zJSgG7apwV5xt+pJUS8ewPBqT4NYB1optGLprNQzFleIY84u/g==",
"dev": true,
"license": "MIT",
"dependencies": {
"@types/react": "*"
}
},
"node_modules/@types/react-window": {
"version": "1.8.8",
"resolved": "https://registry.npmjs.org/@types/react-window/-/react-window-1.8.8.tgz",
@@ -4493,6 +4505,36 @@
"react": "^19.1.0"
}
},
"node_modules/react-fast-compare": {
"version": "3.2.2",
"resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-3.2.2.tgz",
"integrity": "sha512-nsO+KSNgo1SbJqJEYRE9ERzo7YtYbou/OqjSQKxV7jcKox7+usiUVZOAC+XnDOABXggQTno0Y1CpVnuWEc1boQ==",
"license": "MIT"
},
"node_modules/react-helmet": {
"version": "6.1.0",
"resolved": "https://registry.npmjs.org/react-helmet/-/react-helmet-6.1.0.tgz",
"integrity": "sha512-4uMzEY9nlDlgxr61NL3XbKRy1hEkXmKNXhjbAIOVw5vcFrsdYbH2FEwcNyWvWinl103nXgzYNlns9ca+8kFiWw==",
"license": "MIT",
"dependencies": {
"object-assign": "^4.1.1",
"prop-types": "^15.7.2",
"react-fast-compare": "^3.1.1",
"react-side-effect": "^2.1.0"
},
"peerDependencies": {
"react": ">=16.3.0"
}
},
"node_modules/react-helmet/node_modules/react-side-effect": {
"version": "2.1.2",
"resolved": "https://registry.npmjs.org/react-side-effect/-/react-side-effect-2.1.2.tgz",
"integrity": "sha512-PVjOcvVOyIILrYoyGEpDN3vmYNLdy1CajSFNt4TDsVQC5KpTijDvWVoR+/7Rz2xT978D8/ZtFceXxzsPwZEDvw==",
"license": "MIT",
"peerDependencies": {
"react": "^16.3.0 || ^17.0.0 || ^18.0.0"
}
},
"node_modules/react-is": {
"version": "16.13.1",
"resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",

View File

@@ -28,6 +28,7 @@
"react": "^19.0.0",
"react-bootstrap-icons": "^1.11.5",
"react-dom": "^19.0.0",
"react-helmet": "^6.1.0",
"react-router-dom": "^7.5.1",
"react-window": "^1.8.11",
"tailwind-merge": "^3.2.0",
@@ -39,6 +40,7 @@
"@types/node": "^22.14.1",
"@types/react": "^19.0.10",
"@types/react-dom": "^19.0.4",
"@types/react-helmet": "^6.1.11",
"@vitejs/plugin-react": "^4.4.1",
"eslint": "^9.25.1",
"eslint-plugin-react-hooks": "^6.0.0",

View File

@@ -7,14 +7,14 @@ import "./App.css";
function App() {
return (
<ThemeProvider defaultTheme="dark" storageKey="vite-ui-theme">
<HashRouter>
<Routes>
<Route path="/" element={<LandingPage />} />
<Route path="/playground" element={<Playground />} />
</Routes>
</HashRouter>
</ThemeProvider>
<ThemeProvider defaultTheme="dark" storageKey="vite-ui-theme">
<HashRouter>
<Routes>
<Route path="/" element={<LandingPage />} />
<Route path="/playground" element={<Playground />} />
</Routes>
</HashRouter>
</ThemeProvider>
);
}

13
page/src/Header.tsx Normal file
View File

@@ -0,0 +1,13 @@
import { Helmet } from 'react-helmet';
export interface HeaderProps {
title: string;
}
export function Header(props: HeaderProps) {
return (
<Helmet>
<title>{props.title}</title>
</Helmet>
);
}

View File

@@ -11,6 +11,7 @@ import {
Github,
Play,
} from "lucide-react";
import { Header } from "./Header";
export function LandingPage() {
const features = [
@@ -53,6 +54,7 @@ export function LandingPage() {
return (
<>
<Header title="Sogen - Windows User Space Emulator" />
<div className="flex flex-col min-h-screen">
{/* Hero Section */}
<header className="bg-gradient-to-r from-blue-600 to-cyan-500 py-16 md:py-24">

View File

@@ -1,34 +1,39 @@
import { useState, useRef } from 'react'
import { Output } from '@/components/output'
import { useState, useRef } from "react";
import { Output } from "@/components/output";
import { AppSidebar } from "@/components/app-sidebar"
import { Separator } from "@/components/ui/separator"
import { AppSidebar } from "@/components/app-sidebar";
import { Separator } from "@/components/ui/separator";
import {
SidebarInset,
SidebarProvider,
SidebarTrigger,
} from "@/components/ui/sidebar"
import { Button } from './components/ui/button'
} from "@/components/ui/sidebar";
import { Button } from "./components/ui/button";
import { Emulator, UserFile } from './emulator';
import { getFilesystem } from './filesystem';
import { Emulator, UserFile } from "./emulator";
import { getFilesystem } from "./filesystem";
import './App.css'
import { Popover, PopoverContent, PopoverTrigger } from './components/ui/popover'
import "./App.css";
import {
Popover,
PopoverContent,
PopoverTrigger,
} from "./components/ui/popover";
import { createDefaultSettings } from './settings';
import { SettingsMenu } from './components/settings-menu';
import { createDefaultSettings } from "./settings";
import { SettingsMenu } from "./components/settings-menu";
import { PlayFill, StopFill, GearFill } from 'react-bootstrap-icons';
import { StatusIndicator } from './components/status-indicator'
import { PlayFill, StopFill, GearFill } from "react-bootstrap-icons";
import { StatusIndicator } from "./components/status-indicator";
import { Header } from "./Header";
function selectAndReadFile(): Promise<UserFile> {
return new Promise((resolve, reject) => {
const fileInput = document.createElement('input');
fileInput.type = 'file';
fileInput.accept = '.exe';
const fileInput = document.createElement("input");
fileInput.type = "file";
fileInput.accept = ".exe";
fileInput.addEventListener('change', function (event) {
fileInput.addEventListener("change", function (event) {
const file = (event as any).target.files[0];
if (file) {
const reader = new FileReader();
@@ -37,17 +42,17 @@ function selectAndReadFile(): Promise<UserFile> {
const arrayBuffer = e.target?.result;
resolve({
name: file.name,
data: arrayBuffer as ArrayBuffer
data: arrayBuffer as ArrayBuffer,
});
};
reader.onerror = function (e: ProgressEvent<FileReader>) {
reject(new Error('Error reading file: ' + e.target?.error));
reject(new Error("Error reading file: " + e.target?.error));
};
reader.readAsArrayBuffer(file);
} else {
reject(new Error('No file selected'));
reject(new Error("No file selected"));
}
});
@@ -91,25 +96,35 @@ export function Playground() {
}
return (
<>
<Header title="Playground - Sogen" />
<SidebarProvider defaultOpen={false}>
<AppSidebar />
<SidebarInset className='h-[100dvh]'>
<SidebarInset className="h-[100dvh]">
<header className="flex h-16 shrink-0 items-center gap-2 border-b px-4 overflow-y-auto">
<SidebarTrigger className="-ml-1" />
<Separator orientation="vertical" className="mr-2 h-4" />
<Button onClick={() => createEmulator()}><PlayFill /> Run Sample</Button>
<Button onClick={() => loadAndRunUserFile()}><PlayFill /> Run your .exe</Button>
<Button variant="secondary" onClick={() => emulator?.stop()}><StopFill /> Stop Emulation</Button>
<Button onClick={() => createEmulator()}>
<PlayFill /> Run Sample
</Button>
<Button onClick={() => loadAndRunUserFile()}>
<PlayFill /> Run your .exe
</Button>
<Button variant="secondary" onClick={() => emulator?.stop()}>
<StopFill /> Stop Emulation
</Button>
<Popover>
<PopoverTrigger asChild>
<Button variant="secondary"><GearFill /> Settings</Button>
<Button variant="secondary">
<GearFill /> Settings
</Button>
</PopoverTrigger>
<PopoverContent>
<SettingsMenu settings={settings} onChange={setSettings} />
</PopoverContent>
</Popover>
<div className='text-right flex-1'>
<div className="text-right flex-1">
<StatusIndicator running={!!emulator} />
</div>
</header>
@@ -118,6 +133,6 @@ export function Playground() {
</div>
</SidebarInset>
</SidebarProvider>
)
</>
);
}