// All page sections for the MALD site
// ---------- Reveal hook ----------
function useReveal() {
const ref = React.useRef(null);
React.useEffect(() => {
const el = ref.current;
if (!el) return;
const io = new IntersectionObserver(
(entries) => {
entries.forEach((e) => {
if (e.isIntersecting) {
e.target.classList.add('in');
io.unobserve(e.target);
}
});
},
{ threshold: 0.08, rootMargin: '0px 0px -40px 0px' }
);
io.observe(el);
return () => io.disconnect();
}, []);
return ref;
}
// ---------- Copy button ----------
function CopyButton({ text, size = 12 }) {
const [copied, setCopied] = React.useState(false);
const onClick = (e) => {
e.stopPropagation();
navigator.clipboard?.writeText(text).catch(() => {});
setCopied(true);
setTimeout(() => setCopied(false), 1500);
};
return (
);
}
// ---------- Section label ----------
function SectionLabel({ children }) {
return (
{children}
);
}
// ---------- MALD logo (inline SVG) ----------
function MaldLogo({ size = 18, color }) {
return (
);
}
// ---------- Scroll progress bar (top of page) ----------
function ScrollProgress() {
const [pct, setPct] = React.useState(0);
React.useEffect(() => {
const onScroll = () => {
const h = document.documentElement;
const max = h.scrollHeight - h.clientHeight;
setPct(max > 0 ? (h.scrollTop / max) * 100 : 0);
};
window.addEventListener('scroll', onScroll, { passive: true });
onScroll();
return () => window.removeEventListener('scroll', onScroll);
}, []);
return ;
}
// ---------- Header ----------
function Header({ accent }) {
const [scrolled, setScrolled] = React.useState(false);
React.useEffect(() => {
const onScroll = () => setScrolled(window.scrollY > 8);
window.addEventListener('scroll', onScroll, { passive: true });
onScroll();
return () => window.removeEventListener('scroll', onScroll);
}, []);
return (
);
}
// ---------- Hero ----------
function Hero({ accent, shaderIntensity, headline, subline }) {
const [copied, setCopied] = React.useState(false);
const onCopy = () => {
navigator.clipboard?.writeText('scoop install mald').catch(() => {});
setCopied(true);
setTimeout(() => setCopied(false), 1500);
};
const pillStyle = {
border: '1px solid var(--border-strong)',
color: 'var(--text-muted)',
fontSize: 11,
lineHeight: '16px',
padding: '6px 12px',
borderRadius: 4,
background: 'rgba(17,20,22,0.4)',
backdropFilter: 'blur(4px)',
};
return (
{/* Pills row */}
local-first
·
privacy-by-default
·
terminal-native
{/* H1 */}
{headline}
{/* Sub-line */}
{subline}
{/* CTA row */}
{/* Inline copy pill */}
e.currentTarget.style.borderColor = 'var(--border-strong)'}
onMouseLeave={(e) => e.currentTarget.style.borderColor = 'var(--border)'}
>
$
scoop install mald
{copied ? : }
scroll
);
}
// ---------- Glyph holder ----------
function GlyphHolder({ children, accent }) {
return (
{children}
);
}
// ---------- What It Is ----------
function WhatItIs({ accent }) {
const ref = useReveal();
const cards = [
{ Icon: IconFileText, title: 'Local files', body: 'Plain markdown stays readable, portable, and yours. No proprietary workspace format.' },
{ Icon: IconSparkles, title: 'Local AI', body: 'Ollama-backed retrieval augmented generation with inspectable, cited answers.' },
{ Icon: IconShield, title: 'Sovereign defaults', body: 'No telemetry, no account, no cloud dependency, and no forced sync layer.' },
];
return (
// what it is
{cards.map((c, i) => (
))}
{tabs.map((t) => {
const active = tab === t;
return (
);
})}
);
}
// ---------- Faux window ----------
function FauxWindow({ surface, accent }) {
return (
{/* Title bar */}
~/mald/vault/01_Projects/MALD
{/* Body */}
{surface === 'GUI' &&
}
{surface === 'TUI' &&
}
{surface === 'CLI' &&
}
{children}
);
}
function GuiBody({ accent }) {
const files = [
{ name: '00_Inbox', active: false, indent: 0 },
{ name: '01_Projects', active: false, indent: 0 },
{ name: 'MALD', active: false, indent: 1 },
{ name: 'architecture.md', active: true, indent: 2 },
{ name: 'tasks.md', active: false, indent: 2 },
{ name: '03_Resources', active: false, indent: 0 },
{ name: 'papers', active: false, indent: 1 },
{ name: 'journal', active: false, indent: 1 },
];
return (
{/* Vault */}
VAULT
{files.map((f, i) => (
{f.name}
))}
{/* Markdown preview */}
markdown preview
local index
## Project Roadmap
{['CLI', 'TUI', 'GUI'].map((label) => (
{label}
))}
{/* Context */}
CONTEXT
{[0.91, 0.92, 0.93].map((s, i) => (
[{i + 1}]
source.md
{s.toFixed(2)}
))}
{label}
);
const cellStyle = {
border: '1px solid var(--border-strong)',
borderRadius: 4,
background: '#0B0D0E',
overflow: 'hidden',
display: 'flex',
flexDirection: 'column',
minHeight: 240,
};
return (
{/* VAULT */}
{cellHeader('─ vault ─')}
{files.map((f, i) => (
{f.active ? '▸' : '○'}
{f.name}
))}
{/* PREVIEW */}
{cellHeader('─ preview ─ architecture.md ─')}
{previewLines.map((l, i) => (
{l.t || ' '}
))}
{/* CONTEXT */}
{cellHeader('─ context ─')}
{sources.map((s) => (
[{s.i}] {s.name}
{s.score}
))}
─── score ───
{/* Status bar */}
NORMAL
? help
/ search
: command
q quit
~/mald/vault · 1247 notes
);
}
function CliBody({ accent }) {
const lines = [
{ prompt: '$', cmd: 'mald query "what is hnsw?"', out: null },
{ prompt: null, cmd: null, out: '↳ searching local index across 1,247 notes…' },
{ prompt: null, cmd: null, out: '↳ retrieved 3 sources · cosine 0.91 / 0.92 / 0.93' },
{ prompt: null, cmd: null, out: '' },
{ prompt: null, cmd: null, out: 'HNSW (Hierarchical Navigable Small World) is a graph-based' },
{ prompt: null, cmd: null, out: 'approximate nearest neighbor algorithm. MALD uses it to index' },
{ prompt: null, cmd: null, out: 'embeddings of every markdown chunk in your vault. [1][2][3]' },
{ prompt: null, cmd: null, out: '' },
{ prompt: null, cmd: null, out: 'sources:' },
{ prompt: null, cmd: null, out: ' [1] 03_Resources/papers/hnsw.md 0.91', warm: true },
{ prompt: null, cmd: null, out: ' [2] 01_Projects/MALD/architecture.md 0.92', warm: true },
{ prompt: null, cmd: null, out: ' [3] 03_Resources/papers/vector-search.md 0.93', warm: true },
{ prompt: '$', cmd: '_', out: null, blink: true },
];
return (
{lines.map((l, i) => (
{l.prompt && {l.prompt}}
{l.cmd &&
{l.cmd}
{l.blink && }
}
{l.out !== null && {l.out}}
))}
{items.map((c, i) => (
))}
Custom HNSW vector search. SQLite FTS5 fallback. Notify-rs file watcher. Optional Ollama backend.
);
}
function ArchDiagram({ accent }) {
// SVG line diagram, fully responsive via viewBox
const stroke = '#2A2F33';
const fill = '#171A1D';
const text = '#E8E2D4';
const boxW = 140;
const boxH = 56;
const r = 8;
const gap = 80;
// Layout: 4 boxes in a row, "Markdown files" centered above box #2 (Daemon)
const totalW = boxW * 4 + gap * 3;
const startX = (760 - totalW) / 2;
const rowY = 180;
const topY = 40;
const boxes = [
{ x: startX, y: rowY, label: 'CLI' },
{ x: startX + (boxW + gap), y: rowY, label: 'Daemon' },
{ x: startX + (boxW + gap) * 2, y: rowY, label: 'HNSW Index' },
{ x: startX + (boxW + gap) * 3, y: rowY, label: 'Ollama' },
];
// Top box centered above "Daemon"
const topBox = { x: boxes[1].x, y: topY, label: 'Markdown files' };
return (
);
}
// ---------- Install ----------
function Install({ accent }) {
const ref = useReveal();
const [tab, setTab] = React.useState('Windows');
const [copied, setCopied] = React.useState(false);
const blocks = {
Windows: [
'scoop install mald',
'scoop bucket add mald https://github.com/NAME0x0/scoop-mald',
],
macOS: [
'curl -fsSL https://raw.githubusercontent.com/NAME0x0/MALD/main/install.sh | sh',
],
Linux: [
'curl -fsSL https://raw.githubusercontent.com/NAME0x0/MALD/main/install.sh | sh',
],
};
const onCopy = () => {
const text = blocks[tab].map((l) => `> ${l}`).join('\n');
navigator.clipboard?.writeText(text).catch(() => {});
setCopied(true);
setTimeout(() => setCopied(false), 1500);
};
return (
// install
{['Windows', 'macOS', 'Linux'].map((t) => {
const active = tab === t;
return (
);
})}
{blocks[tab].map((line, i) => (
>
{line}
))}
);
}
// ---------- Footer ----------
function Footer({ accent, version }) {
return (
);
}
Object.assign(window, {
Header, Hero, WhatItIs, ThreeSurfaces, Features, Architecture, Install, Footer,
});