Files
SamsTechnical-wikijs/article.html

764 lines
18 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SAM-DESKTOP — SYSARCH Technical Knowledge Base</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400;0,500;1,400&family=JetBrains+Mono:wght@400;500&family=Saira+Condensed:wght@400;500;600&display=swap" rel="stylesheet">
<style>
/* ─── CSS Variables ─── */
:root {
--canvas: #000000;
--ink: #ffffff;
--body: #cccccc;
--body-strong: #e6e6e6;
--muted: #999999;
--muted-soft: #666666;
--surface-soft: #0d0d0d;
--surface-card: #141414;
--surface-elevated: #1f1f1f;
--hairline: #262626;
--hairline-strong: #3a3a3a;
--link: #c3d9f3;
--on-dark: #ffffff;
--success: #5fa657;
--warning: #d4a017;
--code-keyword: #7ec8e3;
--code-string: #5fa657;
--code-value: #e6e6e6;
--code-comment: #666666;
--font-display: 'Saira Condensed', 'Impact', 'Arial Black', sans-serif;
--font-body: 'EB Garamond', 'Georgia', serif;
--font-mono: 'JetBrains Mono', 'Fira Code', 'Consolas', ui-monospace, monospace;
--sidebar-width: 280px;
--nav-height: 56px;
}
/* ─── Reset ─── */
*, *::before, *::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
background: var(--canvas);
color: var(--body);
font-family: var(--font-body);
font-size: 16px;
line-height: 1.6;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
body {
min-height: 100vh;
background: var(--canvas);
}
/* ─── Top Navigation ─── */
.top-nav {
position: sticky;
top: 0;
z-index: 100;
height: var(--nav-height);
background: var(--canvas);
border-bottom: 1px solid var(--hairline);
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 32px;
}
.top-nav__wordmark {
font-family: var(--font-mono);
font-size: 14px;
font-weight: 500;
letter-spacing: 6px;
text-transform: uppercase;
color: var(--ink);
white-space: nowrap;
}
.top-nav__links {
display: flex;
align-items: center;
gap: 28px;
font-family: var(--font-mono);
font-size: 12px;
font-weight: 400;
letter-spacing: 2px;
text-transform: uppercase;
color: var(--muted-soft);
}
.top-nav__links span {
cursor: default;
white-space: nowrap;
}
.top-nav__search {
font-family: var(--font-mono);
font-size: 14px;
font-weight: 500;
letter-spacing: 2.5px;
text-transform: uppercase;
color: var(--ink);
background: transparent;
border: 1px solid var(--ink);
border-radius: 9999px;
padding: 8px 24px;
cursor: default;
white-space: nowrap;
line-height: 1;
}
/* ─── Layout ─── */
.page {
display: flex;
min-height: calc(100vh - var(--nav-height));
}
/* ─── Sidebar ─── */
.sidebar {
width: var(--sidebar-width);
min-width: var(--sidebar-width);
border-right: 1px solid var(--hairline);
padding: 48px 0 48px 0;
position: sticky;
top: var(--nav-height);
height: calc(100vh - var(--nav-height));
overflow-y: auto;
}
.sidebar__contents-label {
font-family: var(--font-mono);
font-size: 11px;
font-weight: 500;
letter-spacing: 2px;
text-transform: uppercase;
color: var(--muted);
padding: 0 24px;
margin-bottom: 16px;
}
.sidebar__items {
list-style: none;
}
.sidebar__item {
font-family: var(--font-mono);
font-size: 11px;
font-weight: 400;
letter-spacing: 1px;
text-transform: uppercase;
padding: 10px 24px;
color: var(--muted-soft);
cursor: default;
transition: color 0.2s ease;
}
.sidebar__item:hover {
color: var(--body);
}
.sidebar__item--active {
color: var(--ink);
background: var(--surface-card);
font-weight: 500;
}
/* ─── Main Content ─── */
.main {
flex: 1;
padding: 48px 64px 80px;
max-width: 960px;
}
/* ─── Breadcrumb ─── */
.breadcrumb {
font-family: var(--font-mono);
font-size: 11px;
font-weight: 400;
letter-spacing: 1px;
text-transform: uppercase;
color: var(--muted);
margin-bottom: 24px;
}
/* ─── Page Header ─── */
.page-header {
margin-bottom: 48px;
}
.page-heading {
font-family: var(--font-display);
font-size: 48px;
font-weight: 500;
letter-spacing: 3px;
text-transform: uppercase;
color: var(--ink);
line-height: 1.1;
margin-bottom: 12px;
}
.page-meta {
font-family: var(--font-mono);
font-size: 11px;
font-weight: 400;
letter-spacing: 1px;
color: var(--muted);
margin-bottom: 20px;
}
.page-badge {
display: inline-block;
font-family: var(--font-mono);
font-size: 10px;
font-weight: 500;
letter-spacing: 1.5px;
text-transform: uppercase;
color: var(--body);
background: var(--surface-card);
border: 1px solid var(--hairline);
border-radius: 9999px;
padding: 4px 14px;
line-height: 1;
}
/* ─── Section ─── */
.section {
margin-bottom: 64px;
}
.section__heading {
font-family: var(--font-display);
font-size: 24px;
font-weight: 500;
letter-spacing: 1.5px;
text-transform: uppercase;
color: var(--ink);
margin-bottom: 24px;
line-height: 1.2;
}
.section__body {
font-family: var(--font-body);
font-size: 16px;
font-weight: 400;
line-height: 1.7;
color: var(--body);
margin-bottom: 16px;
max-width: 680px;
}
.section__body--secondary {
color: var(--muted);
font-style: italic;
}
/* ─── Section Label (block header) ─── */
.section-label {
font-family: var(--font-mono);
font-size: 11px;
font-weight: 500;
letter-spacing: 2px;
text-transform: uppercase;
color: var(--muted);
margin-bottom: 16px;
}
/* ─── Spec Table ─── */
.spec-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
margin-bottom: 64px;
}
.spec-cell {
padding: 32px 24px;
border-right: 1px solid var(--hairline);
border-bottom: 1px solid var(--hairline);
}
.spec-cell:nth-child(4n) {
border-right: none;
}
.spec-cell:nth-child(n+5) {
border-bottom: none;
}
.spec-cell__value {
font-family: var(--font-display);
font-size: 28px;
font-weight: 500;
letter-spacing: 1.5px;
text-transform: uppercase;
color: var(--ink);
line-height: 1.1;
margin-bottom: 8px;
}
.spec-cell__label {
font-family: var(--font-mono);
font-size: 11px;
font-weight: 400;
letter-spacing: 1.5px;
text-transform: uppercase;
color: var(--muted);
}
/* ─── Code Block ─── */
.code-block {
background: var(--surface-soft);
border: 1px solid var(--hairline);
padding: 24px;
margin-bottom: 64px;
overflow-x: auto;
}
.code-block__filename {
font-family: var(--font-mono);
font-size: 12px;
font-weight: 400;
color: var(--muted);
margin-bottom: 16px;
line-height: 1;
}
.code-block__code {
font-family: var(--font-mono);
font-size: 13px;
font-weight: 400;
line-height: 1.7;
color: var(--code-value);
white-space: pre;
tab-size: 2;
}
.code-block__code .kw { color: var(--code-keyword); }
.code-block__code .str { color: var(--code-string); }
.code-block__code .cmt { color: var(--code-comment); }
.code-block__code .val { color: var(--code-value); }
.code-block__code .pun { color: var(--muted); }
/* ─── Services Table ─── */
.services-table-wrap {
overflow-x: auto;
margin-bottom: 64px;
}
.services-table {
width: 100%;
border-collapse: collapse;
font-family: var(--font-mono);
font-size: 13px;
font-weight: 400;
}
.services-table thead th {
padding: 14px 20px;
text-align: left;
font-family: var(--font-mono);
font-size: 11px;
font-weight: 500;
letter-spacing: 1.5px;
text-transform: uppercase;
color: var(--ink);
border-bottom: 1px solid var(--hairline);
white-space: nowrap;
}
.services-table tbody td {
padding: 14px 20px;
white-space: nowrap;
border-bottom: 1px solid var(--hairline);
}
.services-table tbody tr:nth-child(odd) {
background: var(--canvas);
}
.services-table tbody tr:nth-child(even) {
background: var(--surface-soft);
}
.services-table .status--running {
color: var(--success);
}
/* ─── Footer ─── */
.footer {
border-top: 1px solid var(--hairline);
text-align: center;
padding: 48px 24px;
font-family: var(--font-mono);
font-size: 11px;
font-weight: 400;
letter-spacing: 1px;
color: var(--muted);
}
/* ─── Divider ─── */
.section-divider {
border: none;
border-top: 1px solid var(--hairline);
margin: 0 0 64px 0;
}
/* ─── Sidebar Toggle (hidden on desktop) ─── */
.sidebar-toggle {
display: none;
}
/* ─── Responsive: Tablet ─── */
@media (max-width: 1024px) {
.page {
flex-direction: column;
}
.sidebar {
width: 100%;
min-width: 100%;
height: auto;
position: static;
border-right: none;
border-bottom: 1px solid var(--hairline);
padding: 24px 0;
overflow-y: visible;
}
.sidebar__contents-label {
padding: 0 32px;
}
.sidebar__items {
display: flex;
flex-wrap: wrap;
gap: 0;
padding: 0 16px;
}
.sidebar__item {
padding: 8px 16px;
border-radius: 9999px;
border: 1px solid transparent;
}
.sidebar__item--active {
border-color: var(--hairline);
}
.main {
padding: 40px 32px 64px;
max-width: 100%;
}
.spec-grid {
grid-template-columns: repeat(2, 1fr);
}
.spec-cell:nth-child(4n) {
border-right: 1px solid var(--hairline);
}
.spec-cell:nth-child(2n) {
border-right: none;
}
.spec-cell:nth-child(n+5) {
border-bottom: 1px solid var(--hairline);
}
.spec-cell:nth-child(n+7) {
border-bottom: none;
}
.top-nav__links {
display: none;
}
}
/* ─── Responsive: Mobile ─── */
@media (max-width: 768px) {
.top-nav {
padding: 0 20px;
}
.top-nav__wordmark {
font-size: 12px;
letter-spacing: 4px;
}
.top-nav__search {
font-size: 11px;
letter-spacing: 2px;
padding: 6px 16px;
}
.sidebar__items {
flex-direction: column;
padding: 0;
}
.sidebar__item {
border-radius: 0;
border: none;
padding: 10px 32px;
}
.sidebar__item--active {
border: none;
background: var(--surface-card);
}
.main {
padding: 32px 20px 48px;
}
.page-heading {
font-size: 36px;
letter-spacing: 2px;
}
.section__heading {
font-size: 20px;
letter-spacing: 1px;
}
.section__body {
font-size: 15px;
}
.spec-grid {
grid-template-columns: 1fr;
}
.spec-cell {
padding: 24px 20px;
border-right: none !important;
border-bottom: 1px solid var(--hairline);
}
.spec-cell:last-child {
border-bottom: none;
}
.spec-cell__value {
font-size: 24px;
}
.services-table thead th,
.services-table tbody td {
padding: 10px 14px;
font-size: 11px;
}
.code-block {
padding: 16px;
}
.code-block__code {
font-size: 12px;
}
}
</style>
</head>
<body>
<!-- ═══ Top Navigation ═══ -->
<nav class="top-nav">
<span class="top-nav__wordmark">SYSARCH</span>
<div class="top-nav__links">
<span>MACHINES</span>
<span>·</span>
<span>UBUNTU</span>
<span>·</span>
<span>DOCKER</span>
<span>·</span>
<span>HOME ASSISTANT</span>
<span>·</span>
<span>DEV ENV</span>
</div>
<span class="top-nav__search">SEARCH</span>
</nav>
<!-- ═══ Two-Column Layout ═══ -->
<div class="page">
<!-- ─── Sidebar ─── -->
<aside class="sidebar">
<div class="sidebar__contents-label">CONTENTS</div>
<ul class="sidebar__items">
<li class="sidebar__item sidebar__item--active">1. OVERVIEW</li>
<li class="sidebar__item">2. HARDWARE SPECS</li>
<li class="sidebar__item">3. NETWORK CONFIG</li>
<li class="sidebar__item">4. SERVICES</li>
<li class="sidebar__item">5. STORAGE</li>
<li class="sidebar__item">6. MAINTENANCE</li>
</ul>
</aside>
<!-- ─── Main Content ─── -->
<main class="main">
<!-- Breadcrumb -->
<div class="breadcrumb">MACHINES / NIXOS / DESKTOP</div>
<!-- Page Header -->
<header class="page-header">
<h1 class="page-heading">SAM-DESKTOP</h1>
<p class="page-meta">Last updated 02 JUL 2026 · 12 min read</p>
<span class="page-badge">NIXOS 25.11</span>
</header>
<!-- ─── 1. OVERVIEW ─── -->
<section class="section">
<h2 class="section__heading">1. OVERVIEW</h2>
<p class="section__body">
The primary development workstation running NixOS 25.11 with the Niri compositor.
Configured as the main entry point for all development work, with direct SSH access
to all homelab machines and full disk encryption. This machine serves as the primary
development environment with Neovim, Pi coding agent, and full Docker access to the
homelab network.
</p>
<p class="section__body section__body--secondary">
Built for precision engineering workflows. The Niri scrolling-tiling compositor
provides a zero-friction windowing experience, while NixOS guarantees reproducible
system state across rebuilds. Every service is containerised; every configuration
is declarative.
</p>
</section>
<hr class="section-divider">
<!-- ─── 2. HARDWARE SPECIFICATIONS ─── -->
<section class="section">
<h2 class="section__heading">2. HARDWARE SPECS</h2>
<p class="section-label">HARDWARE SPECIFICATIONS</p>
<div class="spec-grid">
<div class="spec-cell">
<div class="spec-cell__value">i7-7700K</div>
<div class="spec-cell__label">CPU</div>
</div>
<div class="spec-cell">
<div class="spec-cell__value">62.7 GB</div>
<div class="spec-cell__label">RAM</div>
</div>
<div class="spec-cell">
<div class="spec-cell__value">869 GB</div>
<div class="spec-cell__label">STORAGE</div>
</div>
<div class="spec-cell">
<div class="spec-cell__value">NIRI</div>
<div class="spec-cell__label">WM</div>
</div>
<div class="spec-cell">
<div class="spec-cell__value">NIXOS</div>
<div class="spec-cell__label">OS</div>
</div>
<div class="spec-cell">
<div class="spec-cell__value">4.20 GHz</div>
<div class="spec-cell__label">SPEED</div>
</div>
<div class="spec-cell">
<div class="spec-cell__value">8</div>
<div class="spec-cell__label">CORES</div>
</div>
<div class="spec-cell">
<div class="spec-cell__value">192.168.20.27</div>
<div class="spec-cell__label">IP</div>
</div>
</div>
</section>
<hr class="section-divider">
<!-- ─── 3. NETWORK CONFIG ─── -->
<section class="section">
<h2 class="section__heading">3. NETWORK CONFIG</h2>
<p class="section-label">CONFIGURATION</p>
<div class="code-block">
<div class="code-block__filename">▸ hardware-configuration.nix</div>
<pre class="code-block__code"><span class="pun">{</span> <span class="kw">config</span><span class="pun">,</span> <span class="kw">pkgs</span><span class="pun">,</span> <span class="pun">...</span> <span class="pun">}:</span> <span class="pun">{</span>
<span class="kw">imports</span> <span class="pun">=</span> <span class="pun">[</span> <span class="str">./hardware-configuration.nix</span> <span class="pun">];</span>
<span class="kw">boot.loader.systemd-boot.enable</span> <span class="pun">=</span> <span class="kw">true</span><span class="pun">;</span>
<span class="kw">boot.loader.efi.canTouchEfiVariables</span> <span class="pun">=</span> <span class="kw">true</span><span class="pun">;</span>
<span class="kw">networking.hostName</span> <span class="pun">=</span> <span class="str">"sam-desktop"</span><span class="pun">;</span>
<span class="kw">networking.networkmanager.enable</span> <span class="pun">=</span> <span class="kw">true</span><span class="pun">;</span>
<span class="kw">services.openssh.enable</span> <span class="pun">=</span> <span class="kw">true</span><span class="pun">;</span>
<span class="kw">services.openssh.settings.PasswordAuthentication</span> <span class="pun">=</span> <span class="kw">false</span><span class="pun">;</span>
<span class="kw">system.stateVersion</span> <span class="pun">=</span> <span class="str">"25.11"</span><span class="pun">;</span>
<span class="pun">}</span></pre>
</div>
</section>
<hr class="section-divider">
<!-- ─── 4. SERVICES ─── -->
<section class="section">
<h2 class="section__heading">4. SERVICES</h2>
<p class="section-label">RUNNING SERVICES</p>
<div class="services-table-wrap">
<table class="services-table">
<thead>
<tr>
<th>SERVICE</th>
<th>STATUS</th>
<th>PORT</th>
<th>NOTES</th>
</tr>
</thead>
<tbody>
<tr>
<td>CADDY</td>
<td class="status--running">● RUNNING</td>
<td>443, 80</td>
<td>Reverse proxy</td>
</tr>
<tr>
<td>WIKI.JS</td>
<td class="status--running">● RUNNING</td>
<td>8230</td>
<td>Documentation</td>
</tr>
<tr>
<td>MOSQUITTO</td>
<td class="status--running">● RUNNING</td>
<td>1883</td>
<td>MQTT broker</td>
</tr>
<tr>
<td>PI-HOLE</td>
<td class="status--running">● RUNNING</td>
<td>51820</td>
<td>DNS sinkhole</td>
</tr>
<tr>
<td>GRAFANA</td>
<td class="status--running">● RUNNING</td>
<td>3000</td>
<td>Metrics dashboard</td>
</tr>
</tbody>
</table>
</div>
</section>
</main>
</div>
<!-- ═══ Footer ═══ -->
<footer class="footer">
SYSARCH · Technical Knowledge Base · Built with Wiki.js
</footer>
</body>
</html>