Skip to content

Applied site design to the examples #1

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
petrbrzek merged 3 commits into from
Feb 9, 2026
Merged

Applied site design to the examples #1

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
7f14bfd
Add bun.lock and update example pages
jasonkneen Feb 8, 2026
9d481c8
Merge branch 'main' into feature/example-ui-redesign
jasonkneen Feb 8, 2026
5d4c010
Fix shared styles regressions and remove bun.lock
petrbrzek Feb 9, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
188 changes: 57 additions & 131 deletions examples/bash-demo.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,132 +3,47 @@
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Bash Demo - Mini WebContainer</title>
<title>Bash Demo — almostnode agent runtime</title>
<link rel="stylesheet" href="./shared-styles.css" />
<style>
* {
box-sizing: border-box;
}
body {
margin: 0;
font-family: system-ui, -apple-system, sans-serif;
background: #1a1a2e;
color: #eee;
min-height: 100vh;
}
.container {
.layout {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 200px;
gap: 16px;
padding: 16px;
height: 100vh;
}
.editor-panel {
display: flex;
flex-direction: column;
gap: 8px;
}
.editor-panel h3 {
margin: 0;
color: #888;
font-size: 12px;
text-transform: uppercase;
}
textarea {
flex: 1;
background: #16213e;
color: #0f0;
border: 1px solid #333;
border-radius: 8px;
padding: 12px;
font-family: 'Monaco', 'Menlo', monospace;
font-size: 14px;
resize: none;
}
textarea:focus {
outline: none;
border-color: #4a69bd;
}
.preview-panel {
display: flex;
flex-direction: column;
gap: 8px;
}
iframe {
flex: 1;
background: #fff;
border: 1px solid #333;
border-radius: 8px;
}
.terminal-panel {
grid-column: 1 / -1;
display: flex;
flex-direction: column;
gap: 8px;
}
#terminal {
flex: 1;
background: #0d0d0d;
border: 1px solid #333;
border-radius: 8px;
padding: 12px;
font-family: 'Monaco', 'Menlo', monospace;
font-size: 12px;
overflow-y: auto;
white-space: pre-wrap;
}
.status {
display: inline-block;
padding: 4px 8px;
border-radius: 4px;
font-size: 12px;
background: #333;
}
.status.loading { background: #f39c12; color: #000; }
.status.ready { background: #27ae60; }
.status.error { background: #e74c3c; }
.btn {
background: #4a69bd;
color: white;
border: none;
padding: 8px 16px;
border-radius: 4px;
cursor: pointer;
font-size: 14px;
}
.btn:hover {
background: #3c5aa6;
}
.btn:disabled {
background: #555;
cursor: not-allowed;
}
.toolbar {
display: flex;
gap: 8px;
align-items: center;
}
.badge {
background: #9b59b6;
color: white;
padding: 2px 6px;
border-radius: 4px;
font-size: 10px;
margin-left: 8px;
gap: 1px;
background: var(--border);
height: calc(100vh - 44px);
}
.terminal-panel { grid-column: 1 / -1; }
@media (max-width: 768px) {
.layout {
grid-template-columns: 1fr;
grid-template-rows: 1fr 300px 200px;
}
.terminal-panel { grid-column: 1; }
}
</style>
</head>
<body>
<div class="container">
<div class="editor-panel">
<div class="toolbar">
<h3>script.js <span class="badge">Bash + Node</span></h3>
<button id="runBtn" class="btn">Run Script</button>
<div class="demo-topbar">
<a href="../index.html" class="back">← demos</a>
<span class="sep">/</span>
<a href="../index.html" class="logo">almostnode</a>
<span class="sep">/</span>
<span class="title">Bash + Node</span>
<span class="tag">child_process · exec</span>
</div>

<div class="layout">
<div class="panel">
<div class="panel-header">
<span class="panel-label">script.js</span>
<button id="runBtn" class="btn btn-primary">Run Script</button>
</div>
<textarea id="editor">const { exec } = require('child_process');
const fs = require('fs');

console.log('=== Mini WebContainer Bash Demo ===\n');
console.log('=== Agent Runtime Bash Demo ===\n');

// Create some files using Node.js fs
fs.writeFileSync('/data/users.json', JSON.stringify([
Expand All @@ -141,65 +56,76 @@ <h3>script.js <span class="badge">Bash + Node</span></h3>

console.log('Created files with Node.js fs module\n');

// Now use bash commands to explore them!
// Now use bash commands to explore them
exec('ls -la /data', (err, stdout) => {
console.log('📁 Files in /data:');
console.log('Files in /data:');
console.log(stdout);
});

// Use cat to read a file
exec('cat /data/users.json', (err, stdout) => {
console.log('📄 Content of users.json:');
console.log('Content of users.json:');
console.log(stdout);
});

// Use grep to search
exec('grep "admin" /data/users.json', (err, stdout) => {
console.log('🔍 Lines containing "admin":');
console.log('Lines containing "admin":');
console.log(stdout || '(no matches)');
});

// Use pipes!
// Use pipes
exec('cat /data/config.txt | grep PORT', (err, stdout) => {
console.log('⚡ Config PORT setting:');
console.log('Config PORT setting:');
console.log(stdout);
});

// Use wc to count
exec('cat /data/users.json | wc -l', (err, stdout) => {
console.log('📊 Line count:');
console.log('Line count:');
console.log(stdout.trim() + ' lines');
});

// Chain commands
exec('echo "Hello" && echo "World" && echo "!"', (err, stdout) => {
console.log('🔗 Chained commands:');
console.log('Chained commands:');
console.log(stdout);
});

// Use awk for data processing
exec('echo "apple 5\\nbanana 3\\norange 7" | awk \'{print $1, "has", $2, "items"}\'', (err, stdout) => {
console.log('🧮 AWK processing:');
console.log('AWK processing:');
console.log(stdout);
});

// Environment variables
exec('echo "User: $USER, Home: $HOME"', (err, stdout) => {
console.log('🌍 Environment:');
console.log('Environment:');
console.log(stdout);
});

console.log('\\n✅ All commands executed!');</textarea>
console.log('\nAll commands executed.');</textarea>
</div>
<div class="preview-panel">
<h3>Preview <span id="status" class="status ready">Ready</span></h3>
<iframe id="preview"></iframe>

<div class="panel">
<div class="panel-header">
<span class="panel-label">Preview</span>
<div style="display:flex;align-items:center;gap:6px;">
<div class="status-dot running" id="statusDot"></div>
<span class="panel-label" id="status">Ready</span>
</div>
</div>
<iframe id="preview" class="preview-frame"></iframe>
</div>
<div class="terminal-panel">
<h3>Console</h3>
<div id="terminal"></div>

<div class="panel terminal-panel">
<div class="panel-header">
<span class="panel-label">Console</span>
</div>
<div id="terminal" class="terminal"></div>
</div>
</div>

<script type="module" src="/src/demo.ts"></script>
</body>
</html>
Loading