jason/socktop
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

correctly spell my own name

Browse Source
This commit is contained in:
jasonwitty 2025-11-24 23:53:19 -08:00
parent 3632fd1d16
commit 4d87675eb7
1 changed files with 333 additions and 241 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

574
index.html
View File

@ -1,272 +1,364 @@
<!DOCTYPE html> <!doctype html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>socktop APT Repository</title> <title>socktop APT Repository</title>
<style> <style>
/* Catppuccin Frappe Color Palette */ /* Catppuccin Frappe Color Palette */
:root { :root {
--ctp-base: #303446; --ctp-base: #303446;
--ctp-mantle: #292c3c; --ctp-mantle: #292c3c;
--ctp-crust: #232634; --ctp-crust: #232634;
--ctp-text: #c6d0f5; --ctp-text: #c6d0f5;
--ctp-subtext1: #b5bfe2; --ctp-subtext1: #b5bfe2;
--ctp-subtext0: #a5adce; --ctp-subtext0: #a5adce;
--ctp-overlay2: #949cbb; --ctp-overlay2: #949cbb;
--ctp-overlay1: #838ba7; --ctp-overlay1: #838ba7;
--ctp-overlay0: #737994; --ctp-overlay0: #737994;
--ctp-surface2: #626880; --ctp-surface2: #626880;
--ctp-surface1: #51576d; --ctp-surface1: #51576d;
--ctp-surface0: #414559; --ctp-surface0: #414559;
--ctp-lavender: #babbf1; --ctp-lavender: #babbf1;
--ctp-blue: #8caaee; --ctp-blue: #8caaee;
--ctp-sapphire: #85c1dc; --ctp-sapphire: #85c1dc;
--ctp-sky: #99d1db; --ctp-sky: #99d1db;
--ctp-teal: #81c8be; --ctp-teal: #81c8be;
--ctp-green: #a6d189; --ctp-green: #a6d189;
--ctp-yellow: #e5c890; --ctp-yellow: #e5c890;
--ctp-peach: #ef9f76; --ctp-peach: #ef9f76;
--ctp-maroon: #ea999c; --ctp-maroon: #ea999c;
--ctp-red: #e78284; --ctp-red: #e78284;
--ctp-mauve: #ca9ee6; --ctp-mauve: #ca9ee6;
--ctp-pink: #f4b8e4; --ctp-pink: #f4b8e4;
--ctp-flamingo: #eebebe; --ctp-flamingo: #eebebe;
--ctp-rosewater: #f2d5cf; --ctp-rosewater: #f2d5cf;
} }
* { * {
margin: 0; box-sizing: border-box;
padding: 0; margin: 0;
box-sizing: border-box; padding: 0;
} }
body { body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; font-family:
background-color: var(--ctp-base); -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
color: var(--ctp-text); "Helvetica Neue", Arial, sans-serif;
line-height: 1.6; background-color: var(--ctp-base);
padding: 20px; color: var(--ctp-text);
} line-height: 1.6;
padding: 20px;
}
.container {
max-width: 900px;
margin: 0 auto;
background-color: var(--ctp-mantle);
border-radius: 12px;
padding: 40px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
}
h1 {
color: var(--ctp-blue);
font-size: 2.5em;
margin-bottom: 10px;
border-bottom: 3px solid var(--ctp-surface0);
padding-bottom: 15px;
}
h2 {
color: var(--ctp-mauve);
font-size: 1.8em;
margin-top: 35px;
margin-bottom: 15px;
}
h3 {
color: var(--ctp-sapphire);
font-size: 1.3em;
margin-top: 25px;
margin-bottom: 10px;
}
p {
margin-bottom: 15px;
color: var(--ctp-subtext0);
}
.subtitle {
color: var(--ctp-subtext1);
font-size: 1.2em;
margin-bottom: 30px;
}
code {
background-color: var(--ctp-surface0);
color: var(--ctp-green);
padding: 3px 8px;
border-radius: 5px;
font-family: 'Courier New', Courier, monospace;
font-size: 0.95em;
}
pre {
background-color: var(--ctp-crust);
border: 1px solid var(--ctp-surface0);
border-radius: 8px;
padding: 20px;
overflow-x: auto;
margin: 15px 0;
}
pre code {
background-color: transparent;
padding: 0;
color: var(--ctp-text);
display: block;
}
a {
color: var(--ctp-blue);
text-decoration: none;
transition: color 0.2s ease;
}
a:hover {
color: var(--ctp-sapphire);
text-decoration: underline;
}
ul {
margin: 15px 0;
padding-left: 30px;
}
li {
margin: 8px 0;
color: var(--ctp-subtext0);
}
li strong {
color: var(--ctp-text);
}
.badge {
display: inline-block;
background-color: var(--ctp-surface1);
color: var(--ctp-text);
padding: 5px 12px;
border-radius: 6px;
font-size: 0.9em;
margin: 5px 5px 5px 0;
border: 1px solid var(--ctp-surface2);
}
.badge.arch {
background-color: var(--ctp-surface0);
color: var(--ctp-lavender);
}
.note {
background-color: var(--ctp-surface0);
border-left: 4px solid var(--ctp-yellow);
padding: 15px;
margin: 20px 0;
border-radius: 5px;
}
.note strong {
color: var(--ctp-yellow);
}
.footer {
margin-top: 50px;
padding-top: 20px;
border-top: 2px solid var(--ctp-surface0);
text-align: center;
color: var(--ctp-overlay1);
font-size: 0.9em;
}
.command-comment {
color: var(--ctp-overlay1);
}
.highlight-blue { color: var(--ctp-blue); }
.highlight-green { color: var(--ctp-green); }
.highlight-yellow { color: var(--ctp-yellow); }
.highlight-mauve { color: var(--ctp-mauve); }
.highlight-peach { color: var(--ctp-peach); }
@media (max-width: 768px) {
.container { .container {
padding: 25px; max-width: 900px;
margin: 0 auto;
background-color: var(--ctp-mantle);
border-radius: 12px;
padding: 40px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
} }
h1 { h1 {
font-size: 2em; color: var(--ctp-blue);
font-size: 2.5em;
margin-bottom: 10px;
border-bottom: 3px solid var(--ctp-surface0);
padding-bottom: 15px;
} }
h2 { h2 {
font-size: 1.5em; color: var(--ctp-mauve);
font-size: 1.8em;
margin-top: 35px;
margin-bottom: 15px;
}
h3 {
color: var(--ctp-sapphire);
font-size: 1.3em;
margin-top: 25px;
margin-bottom: 10px;
} }
}
</style>
</head>
<body>
<div class="container">
<h1>socktop APT Repository</h1>
<p class="subtitle">System monitor with remote agent support for Linux systems</p>
<h2>📦 Quick Installation</h2> p {
<p>Add this repository to your Debian/Ubuntu system:</p> margin-bottom: 15px;
color: var(--ctp-subtext0);
}
.subtitle {
color: var(--ctp-subtext1);
font-size: 1.2em;
margin-bottom: 30px;
}
<h3>Step 1: Add GPG Key</h3> code {
<pre><code><span class="comman</pre>d-comment"># Add the repository's GPG signing key</span> background-color: var(--ctp-surface0);
curl -fsSL https://jaosnwitty.github.io/socktop/KEY.gpg | \ color: var(--ctp-green);
padding: 3px 8px;
border-radius: 5px;
font-family: "Courier New", Courier, monospace;
font-size: 0.95em;
}
pre {
background-color: var(--ctp-crust);
border: 1px solid var(--ctp-surface0);
border-radius: 8px;
padding: 20px;
overflow-x: auto;
margin: 15px 0;
position: relative;
padding-top: 18px; /* leave space for top-right button */
}
pre code {
background: transparent;
color: var(--ctp-text);
display: block;
white-space: pre;
font-family: "Courier New", Courier, monospace;
font-size: 0.95em;
}
/* Copy button styles */
.copy-btn {
position: absolute;
top: 8px;
right: 8px;
background: var(--ctp-surface1);
color: var(--ctp-text);
border: 1px solid var(--ctp-surface2);
padding: 6px 8px;
border-radius: 6px;
cursor: pointer;
font-size: 0.9rem;
display: inline-flex;
align-items: center;
gap: 6px;
transition:
background 0.12s ease,
transform 0.08s ease;
}
.copy-btn:hover {
background: var(--ctp-surface2);
transform: translateY(-1px);
}
.copy-btn:active {
transform: translateY(0);
}
.copy-btn.copied {
background: var(--ctp-green);
color: var(--ctp-crust);
border-color: transparent;
}
.badge {
display: inline-block;
background-color: var(--ctp-surface1);
color: var(--ctp-text);
padding: 5px 12px;
border-radius: 6px;
font-size: 0.9em;
margin: 5px 5px 5px 0;
border: 1px solid var(--ctp-surface2);
}
.badge.arch {
background-color: var(--ctp-surface0);
color: var(--ctp-lavender);
}
.note {
background-color: var(--ctp-surface0);
border-left: 4px solid var(--ctp-yellow);
padding: 15px;
margin: 20px 0;
border-radius: 5px;
}
.note strong {
color: var(--ctp-yellow);
}
.footer {
margin-top: 50px;
padding-top: 20px;
border-top: 2px solid var(--ctp-surface0);
text-align: center;
color: var(--ctp-overlay1);
font-size: 0.9em;
}
.command-comment {
color: var(--ctp-overlay1);
display: block;
margin-bottom: 6px;
}
.highlight-blue {
color: var(--ctp-blue);
}
.highlight-green {
color: var(--ctp-green);
}
.highlight-yellow {
color: var(--ctp-yellow);
}
.highlight-mauve {
color: var(--ctp-mauve);
}
.highlight-peach {
color: var(--ctp-peach);
}
@media (max-width: 768px) {
.container {
padding: 25px;
}
h1 {
font-size: 2em;
}
h2 {
font-size: 1.5em;
}
}
</style>
</head>
<body>
<div class="container">
<h1>socktop APT Repository</h1>
<p class="subtitle">
System monitor with remote agent support for Linux systems
</p>
<h2>📦 Quick Installation</h2>
<p>Add this repository to your Debian/Ubuntu system:</p>
<h3>Step 1: Add GPG Key</h3>
<pre><code># Add the repository's GPG signing key
curl -fsSL https://jasonwitty.github.io/socktop/KEY.gpg | \
sudo gpg --dearmor -o /usr/share/keyrings/socktop-archive-keyring.gpg</code></pre> sudo gpg --dearmor -o /usr/share/keyrings/socktop-archive-keyring.gpg</code></pre>
<h3>Step 2: Add Repository</h3> <h3>Step 2: Add Repository</h3>
<pre><code><span class="command-comment"># Add the APT repository to your sources</span> <pre><code># Add the APT repository to your sources
echo "deb [signed-by=/usr/share/keyrings/socktop-archive-keyring.gpg] https://jaosnwitty.github.io/socktop stable main" | \ echo "deb [signed-by=/usr/share/keyrings/socktop-archive-keyring.gpg] https://jasonwitty.github.io/socktop stable main" | \
sudo tee /etc/apt/sources.list.d/socktop.list</code></pre> sudo tee /etc/apt/sources.list.d/socktop.list</code></pre>
<h3>Step 3: Install</h3> <h3>Step 3: Install</h3>
<pre><code><span class="command-comment"># Update package lists and install</span> <pre><code># Update package lists and install
sudo apt update sudo apt update
sudo apt install socktop socktop-agent</code></pre> sudo apt install socktop socktop-agent</code></pre>
<h2>📋 What's Included</h2> <h2>📋 What's Included</h2>
<ul> <ul>
<li><strong class="highlight-blue">socktop</strong> - Terminal UI client for monitoring systems</li> <li>
<li><strong class="highlight-mauve">socktop-agent</strong> - Background agent that reports system metrics</li> <strong class="highlight-blue">socktop</strong> - Terminal
</ul> UI client for monitoring systems
</li>
<li>
<strong class="highlight-mauve">socktop-agent</strong> -
Background agent that reports system metrics
</li>
</ul>
<div class="note"> <div class="note">
<strong>Note:</strong> The agent package automatically installs and configures a systemd service. Enable it with: <strong>Note:</strong> The agent package automatically installs
<code>sudo systemctl enable --now socktop-agent</code> and configures a systemd service. Enable it with:
</div> <code>sudo systemctl enable --now socktop-agent</code>
</div>
<h2>🏗️ Supported Architectures</h2> <h2>🏗️ Supported Architectures</h2>
<div> <div>
<span class="badge arch">amd64</span> <span class="badge arch">amd64</span>
<span class="badge arch">arm64</span> <span class="badge arch">arm64</span>
<span class="badge arch">armhf</span> <span class="badge arch">armhf</span>
<span class="badge arch">riscv64</span> <span class="badge arch">riscv64</span>
</div> </div>
<h2>🔧 Usage</h2> <h2>🔧 Usage</h2>
<p>After installation:</p> <p>After installation:</p>
<pre><code><span class="command-comment"># Start the TUI client</span> <pre><code># Start the TUI client
socktop</code> socktop
<span class="command-comment"># Connect to a remote agent</span> # Connect to a remote agent
socktop --url ws://hostname:3000 socktop --url ws://hostname:3000
<span class="command-comment"># Start the agent (if not using systemd)</span> # Start the agent (if not using systemd)
socktop_agent</code></pre> socktop_agent</code></pre>
<h2>🔗 Links</h2> <h2>🔗 Links</h2>
<ul> <ul>
<li><a href="https://github.com/jasonwitty/socktop">Source Code on GitHub</a></li> <li>
<li><a href="https://github.com/jasonwitty/socktop/issues">Report Issues</a></li> <a href="https://github.com/jasonwitty/socktop"
<li><a href="README.md">Repository Documentation</a></li> >Source Code on GitHub</a
</ul> >
</li>
<li>
<a href="https://github.com/jasonwitty/socktop/issues"
>Report Issues</a
>
</li>
<li><a href="README.md">Repository Documentation</a></li>
</ul>
<div class="footer"> <div class="footer">
<p>Hosted on GitHub Pages | Packages signed with GPG</p> <p>Hosted on GitHub Pages | Packages signed with GPG</p>
<p>Theme: <a href="https://github.com/catppuccin/catppuccin">Catppuccin Frappe</a></p> <p>
Theme:
<a href="https://github.com/catppuccin/catppuccin"
>Catppuccin Frappe</a
>
</p>
</div>
</div> </div>
</div>
</body> <script>
// Attach copy buttons to all <pre> blocks and enable copy-to-clipboard.
document.addEventListener("DOMContentLoaded", function () {
const pres = document.querySelectorAll("pre");
pres.forEach((pre) => {
// Create button
const btn = document.createElement("button");
btn.type = "button";
btn.className = "copy-btn";
btn.setAttribute("aria-label", "Copy code to clipboard");
// Use emoji for simplicity; you can replace with SVG if desired
btn.innerText = "📋";
// Append to pre
pre.appendChild(btn);
// Click handler
btn.addEventListener("click", async (e) => {
e.stopPropagation();
const code = pre.querySelector("code");
const text = code ? code.innerText : pre.innerText;
try {
if (!navigator.clipboard) {
// Fallback method
const textarea =
document.createElement("textarea");
textarea.value = text;
textarea.style.position = "fixed";
textarea.style.left = "-9999px";
document.body.appendChild(textarea);
textarea.select();
document.execCommand("copy");
document.body.removeChild(textarea);
} else {
await navigator.clipboard.writeText(text);
}
// feedback
btn.classList.add("copied");
const prior = btn.innerText;
btn.innerText = "✓ Copied";
setTimeout(() => {
btn.classList.remove("copied");
btn.innerText = "📋";
}, 1800);
} catch (err) {
btn.innerText = "✖";
setTimeout(() => (btn.innerText = "📋"), 1500);
console.error("Copy failed", err);
}
});
});
});
</script>
</body>
</html> </html>