Skip to content

Commit 09ef123

Browse files
cdaringecdaringe
committed
fix: bad text, docs
1 parent d6fbfd9 commit 09ef123

9 files changed

+267
-174
lines changed

Diff for: ‎index.html

Whitespace-only changes.

Diff for: ‎package.json

+1
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@
99
"lint": "next lint"
1010
},
1111
"dependencies": {
12+
"@uidotdev/usehooks": "2.4.1",
1213
"next": "15.1.2",
1314
"react": "^19.0.0",
1415
"react-dom": "^19.0.0"

Diff for: ‎pnpm-lock.yaml

+15
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

Diff for: ‎src/app/page.tsx

+1-10
Original file line numberDiff line numberDiff line change
@@ -1,10 +1 @@
1-
import NDJavaScriptEmulator from '../components/NDJavaScriptEmulator';
2-
3-
export default function Home() {
4-
return (
5-
<main>
6-
<NDJavaScriptEmulator />
7-
</main>
8-
);
9-
}
10-
1+
export { default } from "../components/NDJavaScriptEmulator";

Diff for: ‎src/components/BrowserEmulator.tsx

+46-36
Original file line numberDiff line numberDiff line change
@@ -12,48 +12,58 @@ interface BrowserEmulatorProps {
1212
url: string;
1313
}
1414

15-
const BrowserEmulator: React.FC<BrowserEmulatorProps> = ({
16-
title = "NDJavaScript Emulator - Please load a page",
17-
content,
18-
className = "",
19-
commands,
20-
downloads,
21-
url,
22-
}) => {
23-
return (
24-
<div
25-
className={`w-full border border-gray-300 rounded-lg shadow-lg overflow-hidden ${className}`}
26-
>
27-
<div className="flex h-[calc(60vh-8rem)]">
28-
<div className="flex flex-col w-full md:w-2/3">
29-
{/* macOS-like window controls */}
30-
<div className="bg-gray-200 px-4 py-2 flex items-center">
31-
<div className="flex space-x-2">
32-
<div className="w-3 h-3 rounded-full bg-red-500"></div>
33-
<div className="w-3 h-3 rounded-full bg-yellow-500"></div>
34-
<div className="w-3 h-3 rounded-full bg-green-500"></div>
15+
const BrowserEmulator = React.forwardRef<HTMLDivElement, BrowserEmulatorProps>(
16+
(
17+
{
18+
title = "NDJavaScript Emulator - Please load a page",
19+
content,
20+
className = "",
21+
commands,
22+
downloads,
23+
url,
24+
},
25+
ref
26+
) => {
27+
return (
28+
<div
29+
className={`w-full border border-gray-300 rounded-lg shadow-lg overflow-hidden ${className}`}
30+
>
31+
<div className="flex h-[calc(60vh-8rem)]">
32+
<div className="flex flex-col w-full md:w-2/3">
33+
{/* macOS-like window controls */}
34+
<div className="bg-gray-200 px-4 py-2 flex items-center">
35+
<div className="flex space-x-2">
36+
<div className="w-3 h-3 rounded-full bg-red-500"></div>
37+
<div className="w-3 h-3 rounded-full bg-yellow-500"></div>
38+
<div className="w-3 h-3 rounded-full bg-green-500"></div>
39+
</div>
40+
<div className="ml-4 text-sm font-medium text-gray-700 flex-grow text-center">
41+
{title}
42+
</div>
3543
</div>
36-
<div className="ml-4 text-sm font-medium text-gray-700 flex-grow text-center">
37-
{title}
38-
</div>
39-
</div>
4044

41-
{/* Address bar */}
42-
<div className="bg-white border-t border-b border-gray-300 px-4 py-2">
43-
<div className="bg-gray-100 rounded px-3 py-1 text-sm text-gray-800">
44-
{url || "https://ndjavascript.cdaringe.com/"}
45+
{/* Address bar */}
46+
<div className="bg-white border-t border-b border-gray-300 px-4 py-2">
47+
<div className="bg-gray-100 rounded px-3 py-1 text-sm text-gray-800">
48+
{url || "https://ndjavascript.cdaringe.com/"}
49+
</div>
4550
</div>
46-
</div>
4751

48-
{/* Content area */}
49-
<div className="emulator-main bg-white flex-grow overflow-auto ">
50-
{content}
52+
{/* Content area */}
53+
<div
54+
ref={ref}
55+
className="emulator-main bg-white flex-grow overflow-auto "
56+
>
57+
{content}
58+
</div>
5159
</div>
60+
<DevTools commands={commands} downloads={downloads} />
5261
</div>
53-
<DevTools commands={commands} downloads={downloads} />
5462
</div>
55-
</div>
56-
);
57-
};
63+
);
64+
}
65+
);
66+
67+
BrowserEmulator.displayName = "BrowserEmulator";
5868

5969
export default BrowserEmulator;

Diff for: ‎src/components/DevTools.tsx

+5-10
Original file line numberDiff line numberDiff line change
@@ -7,23 +7,18 @@ interface DevToolsProps {
77

88
const DevTools: React.FC<DevToolsProps> = ({ commands, downloads }) => {
99
return (
10-
<div className="hidden md:block w-1/3 bg-gray-900 text-white p-4 overflow-hidden">
10+
<div className="hidden md:block w-1/3 bg-gray-900 text-white p-4 overflow-scroll">
1111
<div className="mb-4">
1212
<h3 className="text-lg font-semibold">Network</h3>
1313
<table className="w-full text-sm">
1414
<thead>
1515
<tr>
16-
<th className="text-left">Name</th>
17-
<th className="text-left">Status</th>
18-
<th className="text-left">Type</th>
16+
<th className="text-left pr-2">Name</th>
17+
<th className="text-left pr-2">Status</th>
18+
<th className="text-left pr-2">Type</th>
1919
</tr>
2020
</thead>
2121
<tbody>
22-
{/* <tr className="bg-blue-800">
23-
<td>ndjavascript.cdaringe.com</td>
24-
<td>200</td>
25-
<td>nd-javascript</td>
26-
</tr> */}
2722
{downloads.map((download, index) => (
2823
<tr
2924
key={index}
@@ -41,7 +36,7 @@ const DevTools: React.FC<DevToolsProps> = ({ commands, downloads }) => {
4136
</div>
4237
{commands.length ? (
4338
<div>
44-
<h4 className="text-md font-semibold mb-2">nd-javascript</h4>
39+
<h4 className="text-md font-semibold mb-2">nd-javascript stream</h4>
4540
<div className="bg-gray-800 p-2 overflow-x-auto whitespace-nowrap">
4641
{commands.map((command, index) => (
4742
<div

0 commit comments

Comments
 (0)