Update Lanyard socket URL, enhance IP logging in postAnalytics, and refactor App component structure

This commit is contained in:
Seth 2025-05-16 00:14:14 -04:00
parent 281e34bbd9
commit a8d8f7014a
7 changed files with 49 additions and 183 deletions

View file

@ -1,145 +1,27 @@
import Hyperate from "./components/Hyperate";
import Lanyard from "./components/Lanyard";
let latestLanyard: LanyardData | null = null;
window.addEventListener("lanyard-update", (e) => {
latestLanyard = (e as CustomEvent<LanyardData>).detail;
});
export default () => {
const container = document.createElement("div");
container.className = "app terminal";
return (
<div class="app terminal">
<p>[seth@ipv4 ~]$ cat ./about.txt</p>
<p>
A Dedicated Backend Developer,
<br />
with a passion for high-fidelity audio,
<br />
gaming, and web development.
</p>
const renderElement = (content: string | Node) => {
const p = document.createElement("p");
if (typeof content === "string") {
p.textContent = content;
} else {
p.appendChild(content);
}
return p;
};
<p>[seth@ipv4 ~]$ cat /tmp/discord-ipc</p>
<p>
<Lanyard />
</p>
const prompt = "[seth@ipv4 ~]$";
const staticLines: (string | (() => Node))[] = [
`${prompt} cat ./about.txt`,
() =>
document
.createRange()
.createContextualFragment(
"A Dedicated Backend Developer,<br />with a passion for high-fidelity audio,<br />gaming, and web development.",
),
`${prompt} cat /tmp/discord-ipc`,
() => Lanyard(),
`${prompt} cat /tmp/heartrate`,
() => Hyperate(),
];
const renderStatic = () => {
for (const line of staticLines) {
const content = typeof line === "function" ? line() : line;
container.appendChild(renderElement(content));
}
};
renderStatic();
const lanyardInstance = Lanyard();
const files: Record<string, () => Node> = {
"./about.txt": () =>
document
.createRange()
.createContextualFragment(
"A Dedicated Backend Developer,<br />with a passion for high-fidelity audio,<br />gaming, and web development.",
),
"/tmp/discord-ipc": () => lanyardInstance,
"/tmp/heartrate": () => Hyperate(),
};
const history: string[] = [];
let historyIndex = -1;
const inputBox = document.createElement("input");
inputBox.className = "terminal-input";
inputBox.autofocus = true;
const inputLine = document.createElement("div");
inputLine.className = "terminal-line";
const promptSpan = document.createElement("span");
promptSpan.textContent = `${prompt} `;
inputLine.appendChild(promptSpan);
inputLine.appendChild(inputBox);
container.appendChild(inputLine);
const appendLine = (line: string | Node) => {
container.insertBefore(renderElement(line), inputLine);
};
inputBox.addEventListener("keydown", (e) => {
if (e.key === "Enter") {
const cmd = inputBox.value.trim();
if (!cmd) return;
history.push(cmd);
historyIndex = history.length;
appendLine(`${prompt} ${cmd}`);
let out: string | Node;
if (cmd.startsWith("cat ")) {
const file = cmd.slice(4).trim();
out = files[file]?.() ?? `cat: ${file}: No such file`;
} else if (cmd === "ls") {
out = Object.keys(files)
.filter((f) => f.startsWith("./"))
.map((f) => f.slice(2))
.join("\n");
} else if (cmd.startsWith("ls ")) {
const dir = cmd.slice(3).trim();
if (dir === "/tmp") {
out = Object.keys(files)
.filter((f) => f.startsWith("/tmp/"))
.map((f) => f.slice("/tmp/".length))
.join("\n");
} else {
out = `ls: cannot access '${dir}': No such file or directory`;
}
} else if (cmd === "help") {
out = [
"Available commands:",
" cat [file] View contents of a file",
" ls List files in current directory",
" ls /tmp List files in /tmp directory",
" help Show this message",
].join("\n");
} else {
out = `bash: ${cmd}: command not found`;
}
appendLine(out);
inputBox.value = "";
} else if (e.key === "ArrowUp") {
if (historyIndex > 0) {
historyIndex--;
inputBox.value = history[historyIndex] || "";
}
e.preventDefault();
} else if (e.key === "ArrowDown") {
if (historyIndex < history.length - 1) {
historyIndex++;
inputBox.value = history[historyIndex] || "";
} else {
historyIndex = history.length;
inputBox.value = "";
}
e.preventDefault();
}
});
return container;
};
<p>[seth@ipv4 ~]$ cat /tmp/heartrate</p>
<p>
<Hyperate />
</p>
</div>
);
};

View file

@ -41,9 +41,6 @@ class Socket extends EventTarget {
emitLanyard(lanyard: LanyardData) {
this.dispatchEvent(new CustomEvent("lanyard", { detail: lanyard }));
window.dispatchEvent(
new CustomEvent("lanyard-update", { detail: lanyard }),
);
}
emitHyperate(heartRate: number) {
this.dispatchEvent(new CustomEvent("hyperate", { detail: heartRate }));

View file

@ -14,11 +14,9 @@ body {
body {
color: #dedede;
text-shadow: 0 0 5px #c8c8c8;
background: radial-gradient(
at bottom right,
var(--gradient-color, rgba(150, 150, 150, 0.1)) 0%,
rgba(0, 0, 0, 1) 100%
);
background: radial-gradient(at bottom right,
var(--gradient-color, rgba(150, 150, 150, 0.1)) 0%,
rgba(0, 0, 0, 1) 100%);
display: flex;
height: 100vh;
width: 100vw;
@ -40,27 +38,5 @@ p {
display: flex;
flex-direction: column;
box-sizing: border-box;
gap: 0.4em;
}
.terminal-input {
background: transparent;
border: none;
color: inherit;
font: inherit;
outline: none;
display: inline-block;
width: 100%;
}
.terminal-line {
display: flex;
align-items: baseline;
flex-direction: row;
width: 100%;
}
.terminal-line > span {
white-space: pre;
}
}

View file

@ -10,7 +10,7 @@
<meta name="keywords" content="Seth, IPv4, Army, Seth@IPv4, web development, audio, gaming">
<meta name="author" content="Seth">
<title>Seth @ IPv4 dot Army</title>
<link rel="icon" href="/public/favicon.svg" />
<link rel="icon" href="/public/favicon.svg" />
<meta name="color-scheme" content="dark" />
<link rel="stylesheet" href="index.css" />
</head>