{[
'The nano editor is designed to emulate the functionality and',
'ease-of-use of the UW Pico text editor. There are four main',
'sections of this site:',
'',
' ABOUT who I am, what I work on, where to find me',
' PROJECTS a directory of project buffers, opened with ^R',
' CONTACT email / linkedin / github (open with Enter)',
' HELP this text — close with ^X',
'',
'The following function keys are available in this buffer:',
'',
' ^G show this help text',
' ^X close the current buffer / exit',
' ^O "write out" — flashes a save toast (cosmetic)',
' ^R insert another file into the current buffer (file picker)',
' ^W search the current file for text',
' ^_ go to a specific line number',
' ^C show cursor position (line, col, byte)',
'',
' Arrows / j / k move the cursor up & down',
' Enter follow a link on the current line',
' Tab / Shift+Tab cycle through buffers',
' Esc dismiss a prompt or this help screen',
].map((s, i) => (
{s || ' '}
))}
^X Exit ^G Help
^XExitEscClose
);
}
function ExitOverlay({ onCancel }) {
return (
GNU nano 7.2
[ goodbye ]
Thanks for visiting.
Reach out: kenny.na@uwaterloo.ca
(Press any key to return — nothing was actually saved.)
[ Buffer closed. Press any key to reopen. ]
↵Reopen
);
}
// ============================================================
// Main App
// ============================================================
function App() {
const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
const [path, setPath] = useState('about_me.txt');
const [cursor, setCursor] = useState(0);
const [statusMsg, setStatusMsg] = useState('[ Welcome to nano. For basic help, type Ctrl+G. ]');
const [statusInv, setStatusInv] = useState(true);
const [prompt, setPrompt] = useState(null); // {kind, value, cb?}
const [showPicker, setShowPicker] = useState(false);
const [pickerIdx, setPickerIdx] = useState(0);
const [helpOpen, setHelpOpen] = useState(false);
const [exitOpen, setExitOpen] = useState(false);
const [toast, setToast] = useState(null);
const [modified, setModified] = useState(false);
const [booted, setBooted] = useState(false);
const bodyRef = useRef(null);
const promptRef = useRef(null);
const lines = FILES[path] || [];
// ---- side-effects on tweaks ----
useEffect(() => {
document.body.dataset.theme = t.theme;
document.body.dataset.bezel = t.bezel ? '1' : '0';
document.documentElement.style.setProperty('--font',
`"${t.font}", ui-monospace, Menlo, Consolas, monospace`);
document.documentElement.style.setProperty('--fs', `${t.fontSize}px`);
document.documentElement.style.setProperty('--scan', String(t.scan));
document.documentElement.style.setProperty('--glow', String(t.glow));
document.documentElement.style.setProperty('--gut',
t.lineNums ? '3.5ch' : '0');
const tilt = { off: '0deg', subtle: '1.6deg', dramatic: '5deg' }[t.tilt] || '0deg';
document.documentElement.style.setProperty('--tilt-x', tilt);
}, [t]);
// ---- subtle mouse parallax (only when tilt enabled) ----
useEffect(() => {
if (t.tilt === 'off') return;
const handler = (e) => {
const xPct = (e.clientX / window.innerWidth - 0.5) * 2;
const yPct = (e.clientY / window.innerHeight - 0.5) * 2;
const amp = t.tilt === 'dramatic' ? 6 : 2.2;
document.documentElement.style.setProperty('--tilt-y', `${xPct * amp}deg`);
const baseX = { subtle: 1.6, dramatic: 4 }[t.tilt] || 0;
document.documentElement.style.setProperty('--tilt-x',
`${(baseX - yPct * amp * 0.6).toFixed(2)}deg`);
};
window.addEventListener('mousemove', handler);
return () => window.removeEventListener('mousemove', handler);
}, [t.tilt]);
// ---- boot sweep ----
useEffect(() => {
const id = setTimeout(() => setBooted(true), 1500);
return () => clearTimeout(id);
}, []);
// ---- clear welcome status after a delay ----
useEffect(() => {
const id = setTimeout(() => {
setStatusMsg(''); setStatusInv(false);
}, 5500);
return () => clearTimeout(id);
}, []);
// ---- ephemeral status helper ----
const flash = useCallback((msg, opts = {}) => {
setStatusMsg(msg);
setStatusInv(opts.inv !== false);
if (opts.ms !== 0) {
setTimeout(() => setStatusMsg(''), opts.ms || 3500);
}
}, []);
const popToast = useCallback((msg) => {
setToast(msg);
setTimeout(() => setToast(null), 1600);
}, []);
// ---- file switching ----
const openFile = useCallback((p, opts = {}) => {
if (!FILES[p]) { flash(`[ Error reading ${p}: No such file ]`); return; }
setPath(p);
setCursor(0);
setModified(false);
if (bodyRef.current) bodyRef.current.scrollTop = 0;
if (!opts.silent) flash(`[ Read ${fmtNumLines(FILES[p])} from ${p} ]`);
}, [flash]);
// ---- line activation (Enter on a link) ----
const activate = useCallback((i) => {
const ln = lines[i];
if (!ln || ln.k !== 'link') return;
if (ln.file) {
openFile(ln.file);
} else if (ln.href) {
flash(`[ Opening ${ln.href} ... ]`);
if (ln.href.startsWith('mailto:')) {
window.location.href = ln.href;
} else {
window.open(ln.href, '_blank', 'noopener');
}
}
}, [lines, openFile, flash]);
// ---- scroll current line into view (no scrollIntoView) ----
useEffect(() => {
const el = bodyRef.current;
if (!el) return;
const row = el.querySelector('.line.current');
if (!row) return;
const rt = row.offsetTop, rh = row.offsetHeight;
const st = el.scrollTop, sh = el.clientHeight;
if (rt < st + 8) el.scrollTop = Math.max(0, rt - 8);
else if (rt + rh > st + sh - 8) el.scrollTop = rt + rh - sh + 8;
}, [cursor, path]);
// ---- command dispatcher ----
const runCmd = useCallback((cmd) => {
switch (cmd) {
case 'help': setHelpOpen(true); break;
case 'write': popToast(`[ Wrote ${fmtNumLines(lines)} ]`); setModified(false); break;
case 'where': setPrompt({ kind: 'where', value: '' }); break;
case 'read': setShowPicker(true); setPickerIdx(0); break;
case 'exit': setExitOpen(true); break;
case 'goto': setPrompt({ kind: 'goto', value: '' }); break;
case 'replace': setPrompt({ kind: 'replace', value: '' }); break;
case 'loc': {
flash(`[ line ${cursor + 1}/${lines.length} (${Math.round((cursor + 1) / lines.length * 100)}%) ]`);
break;
}
case 'cut': flash(`[ Cut ${cursor === 0 ? 'nothing — read-only buffer' : 'denied — buffer is read-only'} ]`); break;
case 'paste': flash('[ Cutbuffer is empty ]'); break;
case 'justify': flash('[ Nothing to justify ]'); break;
case 'exec': setPrompt({ kind: 'exec', value: '' }); break;
case 'confirm':
case 'cancel': setPrompt(null); break;
default: flash(`[ Unknown function ]`);
}
}, [cursor, lines, popToast, flash]);
// ---- prompt submit ----
const submitPrompt = useCallback(() => {
if (!prompt) return;
const v = prompt.value.trim();
if (prompt.kind === 'where' && v) {
const idx = lines.findIndex((ln, i) =>
i > cursor && (ln.s || '').toLowerCase().includes(v.toLowerCase()));
const fallback = lines.findIndex(ln =>
(ln.s || '').toLowerCase().includes(v.toLowerCase()));
const target = idx >= 0 ? idx : fallback;
if (target >= 0) { setCursor(target); flash(`[ Found "${v}" on line ${target + 1} ]`); }
else flash(`[ "${v}" not found ]`);
} else if (prompt.kind === 'goto' && v) {
const n = parseInt(v, 10);
if (!Number.isNaN(n) && n >= 1 && n <= lines.length) {
setCursor(n - 1); flash(`[ at line ${n} ]`);
} else flash(`[ "${v}" is out of range ]`);
} else if (prompt.kind === 'replace') {
flash('[ Replace is read-only here — try ^R to switch buffers ]');
} else if (prompt.kind === 'exec') {
const out = ({
'whoami': 'kenny',
'pwd': '/home/kenny',
'ls': FILE_ORDER.join(' '),
'date': new Date().toString(),
'uname': 'GNU/nano 7.2 (browser; portfolio build)',
})[v];
flash(out ? `[ $ ${v} → ${out} ]` : `[ $ ${v}: command not found ]`);
}
setPrompt(null);
}, [prompt, lines, cursor, flash]);
// ---- keyboard ----
useEffect(() => {
const onKey = (e) => {
// exit overlay: any key closes
if (exitOpen) { e.preventDefault(); setExitOpen(false); return; }
// help overlay: ^X or Esc closes
if (helpOpen) {
if (e.key === 'Escape' || (e.ctrlKey && e.key.toLowerCase() === 'x')) {
e.preventDefault(); setHelpOpen(false);
}
return;
}
// file picker
if (showPicker) {
if (e.key === 'Escape') { e.preventDefault(); setShowPicker(false); }
else if (e.key === 'ArrowDown'){ e.preventDefault(); setPickerIdx(i => Math.min(FILE_ORDER.length - 1, i + 1)); }
else if (e.key === 'ArrowUp') { e.preventDefault(); setPickerIdx(i => Math.max(0, i - 1)); }
else if (e.key === 'Enter') { e.preventDefault(); openFile(FILE_ORDER[pickerIdx]); setShowPicker(false); }
else if (/^[1-9]$/.test(e.key)){
const n = parseInt(e.key, 10) - 1;
if (n < FILE_ORDER.length) { openFile(FILE_ORDER[n]); setShowPicker(false); }
}
return;
}
// prompt input is handled by its own onKeyDown; skip global for typing
if (prompt) {
if (e.key === 'Escape') { e.preventDefault(); setPrompt(null); }
return;
}
// global Ctrl shortcuts
if (e.ctrlKey && !e.metaKey && !e.altKey) {
const m = e.key.toLowerCase();
const map = {
'g': 'help', 'o': 'write', 'w': 'where', 'k': 'cut',
't': 'exec', 'x': 'exit', 'r': 'read', 'u': 'paste',
'j': 'justify',
};
// ^_ and ^\ and ^C — use raw key
if (e.key === '_') { e.preventDefault(); runCmd('goto'); return; }
if (e.key === '\\') { e.preventDefault(); runCmd('replace'); return; }
if (m === 'c') { e.preventDefault(); runCmd('loc'); return; }
if (map[m]) { e.preventDefault(); runCmd(map[m]); return; }
}
// navigation
if (e.key === 'ArrowDown' || e.key.toLowerCase() === 'j') {
e.preventDefault(); setCursor(c => Math.min(lines.length - 1, c + 1));
} else if (e.key === 'ArrowUp' || e.key.toLowerCase() === 'k') {
e.preventDefault(); setCursor(c => Math.max(0, c - 1));
} else if (e.key === 'PageDown') {
e.preventDefault(); setCursor(c => Math.min(lines.length - 1, c + 12));
} else if (e.key === 'PageUp') {
e.preventDefault(); setCursor(c => Math.max(0, c - 12));
} else if (e.key === 'Home') {
e.preventDefault(); setCursor(0);
} else if (e.key === 'End') {
e.preventDefault(); setCursor(lines.length - 1);
} else if (e.key === 'Enter') {
e.preventDefault(); activate(cursor);
} else if (e.key === 'Tab') {
e.preventDefault();
const idx = FILE_ORDER.indexOf(path);
const next = (idx + (e.shiftKey ? -1 : 1) + FILE_ORDER.length) % FILE_ORDER.length;
openFile(FILE_ORDER[next]);
}
};
window.addEventListener('keydown', onKey);
return () => window.removeEventListener('keydown', onKey);
}, [exitOpen, helpOpen, showPicker, prompt, pickerIdx, cursor, lines, path, runCmd, activate, openFile]);
// focus prompt input when opened
useEffect(() => {
if (prompt && promptRef.current) promptRef.current.focus();
}, [prompt]);
// ---- gutter content provider ----
const gutter = useCallback((i) => String(i + 1).padStart(3, ' '), []);
// ---- render ----
const filename = '~/' + path;
const titleCenter = (
File: {filename}
);
return (
GNU nano {t.nanoVer} {titleCenter}{modified ? 'Modified ' : ' '}