mockups/profile.html
Rama main · réplica de lectura del repositorio original.
<!DOCTYPE html>
<html lang="en" class="dark">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>mkappworks — Cloudzilla</title>
<link rel="stylesheet" href="/assets/tailwind.css" />
<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=Geist+Mono:wght@400;500&family=Geist:wght@400;500;600&display=swap" rel="stylesheet" />
</head>
<body class="min-h-screen flex flex-col antialiased font-sans">
<a href="#main-content" class="skip-link">Skip to main content</a>
<div id="cz-header"></div>
<script src="shell.js"></script>
<main id="main-content" tabindex="-1" class="max-w-[1400px] mx-auto px-6 pt-6 pb-20 flex-1 w-full">
<div class="space-y-8">
<section class="flex flex-wrap items-start gap-5 pb-6 border-b border-border" aria-labelledby="profile-name">
<span class="inline-grid place-items-center rounded-full bg-muted border border-border font-medium text-muted-foreground h-10 w-10 text-sm" role="img" aria-label="mkappworks">M</span>
<div class="min-w-0 flex-1">
<h1 id="profile-name" class="text-2xl font-semibold tracking-tight">mkappworks</h1>
<p class="mt-1.5 text-sm text-muted-foreground max-w-2xl">Building Cloudzilla, a self-hosted Git forge. Go, HTMX and too much Tailwind.</p>
<dl class="mt-3 flex flex-wrap items-center gap-x-4 gap-y-1 text-xs text-muted-foreground">
<div class="inline-flex items-center gap-1.5">
<dt class="sr-only">Company</dt>
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" aria-hidden="true" focusable="false"><path d="M3 21h18M3 7h18M5 21V7l7-4 7 4v14"></path></svg>
<dd>Benchlabs</dd>
</div>
<div class="inline-flex items-center gap-1.5">
<dt class="sr-only">Location</dt>
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" aria-hidden="true" focusable="false"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0118 0z"></path><circle cx="12" cy="10" r="3"></circle></svg>
<dd>Colombo, Sri Lanka</dd>
</div>
<div class="inline-flex items-center gap-1.5">
<dt class="sr-only">Email</dt>
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" aria-hidden="true" focusable="false"><path d="M4 4h16a2 2 0 012 2v12a2 2 0 01-2 2H4a2 2 0 01-2-2V6a2 2 0 012-2z"></path><polyline points="22 6 12 13 2 6"></polyline></svg>
<dd>info.mkappworks@gmail.com</dd>
</div>
<div class="inline-flex items-center gap-1.5">
<dt class="sr-only">Joined</dt>
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" aria-hidden="true" focusable="false"><rect x="3" y="4" width="18" height="18" rx="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg>
<dd>Joined <time datetime="2025-08-01T00:00:00Z">Aug 2025</time></dd>
</div>
<div>
<span class="inline-flex items-center gap-1.5 h-[22px] px-2 rounded-full border text-[11px] font-medium border-border text-foreground">Superadmin</span>
</div>
</dl>
</div>
<div class="shrink-0 flex items-center gap-2">
<a href="account_settings.html" class="inline-flex items-center justify-center gap-1.5 rounded-md font-medium transition-colors border border-input bg-transparent hover:bg-accent hover:text-accent-foreground h-8 px-3 text-[13px]">Edit profile</a>
<button type="button" id="share-btn" aria-label="Copy profile URL to clipboard" class="inline-flex items-center justify-center gap-1.5 rounded-md font-medium transition-colors border border-input bg-transparent hover:bg-accent hover:text-accent-foreground h-8 px-3 text-[13px]">
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" aria-hidden="true" focusable="false"><path d="M4 12v8a2 2 0 002 2h12a2 2 0 002-2v-8M16 6l-4-4-4 4M12 2v13"></path></svg>
<span>Share</span>
</button>
</div>
</section>
<nav aria-label="Profile sections" class="flex flex-wrap items-center gap-1 text-sm" id="profile-tabs">
<a href="profile.html" data-tab="overview" aria-current="page" class="px-3 py-1.5 rounded-md bg-accent font-medium text-foreground inline-flex items-center gap-1.5">Overview</a>
<a href="?tab=repositories" data-tab="repositories" class="px-3 py-1.5 rounded-md text-muted-foreground hover:text-foreground hover:bg-accent inline-flex items-center gap-1.5">Repositories <span class="font-mono text-[11px] text-muted-foreground ml-0.5">14</span></a>
<a href="?tab=stars" data-tab="stars" class="px-3 py-1.5 rounded-md text-muted-foreground hover:text-foreground hover:bg-accent inline-flex items-center gap-1.5">Stars <span class="font-mono text-[11px] text-muted-foreground ml-0.5">6</span></a>
<a href="?tab=gists" data-tab="gists" class="px-3 py-1.5 rounded-md text-muted-foreground hover:text-foreground hover:bg-accent inline-flex items-center gap-1.5">Gists <span class="font-mono text-[11px] text-muted-foreground ml-0.5">3</span></a>
</nav>
<div data-panel="overview" class="grid gap-8 lg:grid-cols-[1fr_240px]">
<div class="min-w-0 space-y-8">
<article class="rounded-md border border-border bg-card overflow-hidden" aria-labelledby="profile-readme-heading">
<header class="px-5 py-3 border-b border-border bg-muted flex items-center gap-2">
<svg class="text-muted-foreground" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" aria-hidden="true" focusable="false"><path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline></svg>
<h2 id="profile-readme-heading" class="text-[13px] font-medium">mkappworks/README.md</h2>
<span class="ml-auto" id="readme-edit-wrap">
<button type="button" id="readme-edit" class="inline-flex items-center justify-center gap-1.5 rounded-md font-medium transition-colors border border-input bg-transparent hover:bg-accent hover:text-accent-foreground h-8 px-3 text-[13px]">
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" aria-hidden="true" focusable="false"><path d="M12 20h9"></path><path d="M16.5 3.5a2.121 2.121 0 013 3L7 19l-4 1 1-4z"></path></svg>
Edit
</button>
</span>
</header>
<div id="readme-view" class="prose prose-sm max-w-none dark:prose-invert px-7 py-6">
<h3>Hi, I'm Malith</h3>
<p>I build developer tooling and self-hosted infrastructure.</p>
<p>Currently</p>
<ul>
<li>Shipping the profile and organizations UI for Cloudzilla</li>
<li>Exploring ingestion patterns for ClickHouse-backed event streams</li>
</ul>
<p>Reach me</p>
<ul>
<li><a href="https://cloudzilla.dev">cloudzilla.dev</a></li>
<li>DMs open for collaboration on Go infra tooling</li>
</ul>
</div>
<form id="readme-form" hidden onsubmit="return false" class="p-5 space-y-3">
<textarea name="content" required class="w-full min-h-[320px] font-mono text-[13px] bg-card border border-border rounded-sm p-3 focus:outline-hidden focus:ring-2 focus:ring-ring"># Hi, I'm Malith
I build developer tooling and self-hosted infrastructure.</textarea>
<input type="text" name="message" placeholder="Update profile README" class="w-full text-[13px] bg-card border border-border rounded-sm px-3 py-2 focus:outline-hidden focus:ring-2 focus:ring-ring"/>
<div class="flex items-center justify-end gap-2">
<button type="button" id="readme-cancel" class="inline-flex items-center justify-center gap-1.5 rounded-md font-medium transition-colors border border-input bg-transparent hover:bg-accent hover:text-accent-foreground h-8 px-3 text-[13px]">Cancel</button>
<button type="submit" id="readme-save" class="inline-flex items-center justify-center gap-1.5 rounded-md font-medium transition-colors bg-primary text-primary-foreground hover:bg-primary/90 h-8 px-3 text-[13px]">Save</button>
</div>
</form>
</article>
<section aria-labelledby="pinned-heading">
<div class="mb-3 flex items-center justify-between gap-3">
<h2 id="pinned-heading" class="text-sm font-semibold tracking-tight">Pinned</h2>
<button type="button" onclick="document.getElementById('pin-modal').showModal()" class="inline-flex items-center justify-center gap-1.5 rounded-md font-medium transition-colors border border-input bg-transparent hover:bg-accent hover:text-accent-foreground h-8 px-3 text-[13px]">Manage pins</button>
</div>
<div class="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-3 gap-3">
<a href="repo.html" class="block rounded-md border border-border bg-card p-4 hover:border-border-strong">
<div class="flex items-center gap-2">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="text-muted-foreground"><path d="M9 12l2 2 4-4"/></svg>
<span class="text-sm font-medium truncate">mkappworks/cloudzilla</span>
</div>
<p class="text-xs text-muted-foreground mt-2 line-clamp-2">Self-hosted Git forge with HTMX</p>
<div class="flex items-center gap-3 mt-2 text-[11px] text-muted-foreground">
<span class="flex items-center gap-1"><span class="inline-block w-2 h-2 rounded-full" style="background-color: #00ADD8"></span>Go</span>
<span>★ 128</span>
</div>
</a>
<a href="repo.html" class="block rounded-md border border-border bg-card p-4 hover:border-border-strong">
<div class="flex items-center gap-2">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="text-muted-foreground"><path d="M9 12l2 2 4-4"/></svg>
<span class="text-sm font-medium truncate">mkappworks/ingest-pipeline</span>
</div>
<p class="text-xs text-muted-foreground mt-2 line-clamp-2">Event ingestion: Kafka → ClickHouse with replay</p>
<div class="flex items-center gap-3 mt-2 text-[11px] text-muted-foreground">
<span class="flex items-center gap-1"><span class="inline-block w-2 h-2 rounded-full" style="background-color: #DEA584"></span>Rust</span>
<span>★ 41</span>
</div>
</a>
<a href="repo.html" class="block rounded-md border border-border bg-card p-4 hover:border-border-strong">
<div class="flex items-center gap-2">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="text-muted-foreground"><path d="M9 12l2 2 4-4"/></svg>
<span class="text-sm font-medium truncate">mkappworks/benchlabs-site</span>
</div>
<p class="text-xs text-muted-foreground mt-2 line-clamp-2">Marketing site, Astro + Tailwind</p>
<div class="flex items-center gap-3 mt-2 text-[11px] text-muted-foreground">
<span class="flex items-center gap-1"><span class="inline-block w-2 h-2 rounded-full" style="background-color: #3178C6"></span>TypeScript</span>
<span>★ 9</span>
</div>
</a>
</div>
</section>
<dialog id="pin-modal" aria-labelledby="pin-modal-title" class="rounded-lg border border-border bg-popover text-popover-foreground p-0 w-[480px] max-w-[calc(100vw-2rem)] max-h-[calc(100dvh-2rem)] overflow-y-auto mt-[28vh] mb-auto translate-y-[min(0px,calc(100dvh-28vh-1rem-100%))] backdrop:bg-black/60 backdrop:backdrop-blur-xs">
<div class="sticky top-0 z-10 bg-popover flex flex-col gap-1 p-5 border-b border-border">
<h2 id="pin-modal-title" class="text-base font-semibold leading-tight">Pin repositories</h2>
<p class="text-[13px] text-muted-foreground leading-snug">Choose up to 6 repositories to feature on your profile. Pinned <span data-pin-count>3</span> / 6.</p>
</div>
<div class="p-5 text-sm">
<ul class="divide-y divide-border max-h-[400px] overflow-y-auto -mx-5" id="pin-list"></ul>
<p id="pin-warn" class="mt-3 text-[12px] text-warning" hidden>You've reached the 6-pin limit. Unpin one to add another.</p>
</div>
<div class="sticky bottom-0 z-10 bg-popover flex items-center justify-end gap-2 p-5 border-t border-border">
<span class="mr-auto text-[12px] text-muted-foreground font-mono">Pinned <span data-pin-count>3</span> / 6</span>
<form method="dialog" class="contents">
<button type="submit" class="inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors border border-input bg-transparent hover:bg-accent hover:text-accent-foreground h-9 px-4">Close</button>
</form>
</div>
</dialog>
<section aria-labelledby="contrib-heading">
<h2 id="contrib-heading" class="text-sm font-semibold tracking-tight mb-3">1,284 contributions in the last year</h2>
<div class="rounded-md border border-border bg-card p-5 overflow-x-auto">
<div id="heatmap" role="img" aria-label="Commit heatmap: 1284 commits in the last 52 weeks" class="grid w-full grid-flow-col gap-[3px]" style="grid-template-rows: repeat(7, 1fr); grid-auto-columns: minmax(0, 1fr); height: 150px;"></div>
</div>
</section>
<section aria-labelledby="activity-heading">
<h2 id="activity-heading" class="text-sm font-semibold tracking-tight mb-3">Recent activity</h2>
<ul class="divide-y divide-border rounded-md border border-border bg-card overflow-hidden">
<li class="px-4 py-3 flex items-start gap-3 hover:bg-accent">
<span class="flex shrink-0 mt-0.5 select-none"><span class="inline-grid place-items-center rounded-full bg-muted border border-border font-medium text-muted-foreground h-8 w-8 text-[11px]" aria-hidden="true">M</span></span>
<div class="min-w-0 flex-1">
<p class="text-[13px]"><a href="profile.html" class="font-medium hover:underline">mkappworks</a><span class="text-muted-foreground"> merged</span><span class="text-muted-foreground"> </span><a href="pr.html" class="font-mono hover:underline text-primary">#338</a><span class="text-muted-foreground"> in </span><a href="repo.html" class="font-mono text-muted-foreground hover:underline">mkappworks/cloudzilla</a></p>
<p class="mt-0.5 text-[12.5px] text-muted-foreground truncate">Cache avatar lookups per request</p>
<p class="mt-1 text-[11px] text-muted-foreground/70"><time>12 minutes ago</time></p>
</div>
<svg width="14" height="14" viewBox="0 0 16 16" fill="currentColor" class="shrink-0 mt-1 text-[hsl(270_70%_70%)]" aria-hidden="true"><path d="M5 3.254V3.25v.005a.75.75 0 110-.005v.004zm.45 1.9a2.25 2.25 0 10-1.95.218v5.256a2.25 2.25 0 101.5 0V7.123A5.735 5.735 0 009.25 9h1.378a2.251 2.251 0 100-1.5H9.25a4.25 4.25 0 01-3.8-2.346zM12.75 9a.75.75 0 100-1.5.75.75 0 000 1.5zm-8.5 4.5a.75.75 0 100-1.5.75.75 0 000 1.5z"></path></svg>
</li>
<li class="px-4 py-3 flex items-start gap-3 hover:bg-accent">
<span class="flex shrink-0 mt-0.5 select-none"><span class="inline-grid place-items-center rounded-full bg-muted border border-border font-medium text-muted-foreground h-8 w-8 text-[11px]" aria-hidden="true">M</span></span>
<div class="min-w-0 flex-1">
<p class="text-[13px]"><a href="profile.html" class="font-medium hover:underline">mkappworks</a><span class="text-muted-foreground"> pushed </span><span class="font-mono">3 commits</span><span class="text-muted-foreground"> to </span><span class="font-mono text-muted-foreground">main</span><span class="text-muted-foreground"> in </span><a href="repo.html" class="font-mono text-muted-foreground hover:underline">mkappworks/ingest-pipeline</a></p>
<ul class="mt-1 text-[12.5px] text-muted-foreground space-y-0.5">
<li class="truncate"><span class="font-mono text-[11px] text-muted-foreground/70 mr-1">a3f9c21</span>Add replay window to consumer</li>
<li class="truncate"><span class="font-mono text-[11px] text-muted-foreground/70 mr-1">7be10d4</span>Backoff on ClickHouse insert errors</li>
<li class="truncate"><span class="font-mono text-[11px] text-muted-foreground/70 mr-1">c04e8aa</span>Bump kafka client</li>
</ul>
<p class="mt-1 text-[11px] text-muted-foreground/70"><time>3 hours ago</time></p>
</div>
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="shrink-0 mt-1 text-muted-foreground" aria-hidden="true"><circle cx="12" cy="12" r="3"></circle><line x1="3" y1="12" x2="9" y2="12"></line><line x1="15" y1="12" x2="21" y2="12"></line></svg>
</li>
<li class="px-4 py-3 flex items-start gap-3 hover:bg-accent">
<span class="flex shrink-0 mt-0.5 select-none"><span class="inline-grid place-items-center rounded-full bg-muted border border-border font-medium text-muted-foreground h-8 w-8 text-[11px]" aria-hidden="true">M</span></span>
<div class="min-w-0 flex-1">
<p class="text-[13px]"><a href="profile.html" class="font-medium hover:underline">mkappworks</a><span class="text-muted-foreground"> commented on</span><span class="text-muted-foreground"> </span><a href="issue_detail.html" class="font-mono hover:underline text-primary">#312</a><span class="text-muted-foreground"> in </span><a href="repo.html" class="font-mono text-muted-foreground hover:underline">mkappworks/cloudzilla</a></p>
<blockquote class="mt-1 pl-3 border-l border-border text-[12.5px] text-muted-foreground italic">“Reproduced on main, bisecting now.”</blockquote>
<p class="mt-1 text-[11px] text-muted-foreground/70"><time>yesterday</time></p>
</div>
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" class="shrink-0 mt-1 text-muted-foreground" aria-hidden="true"><path d="M21 11.5a8.38 8.38 0 01-.9 3.8 8.5 8.5 0 01-7.6 4.7 8.38 8.38 0 01-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 01-.9-3.8 8.5 8.5 0 014.7-7.6 8.38 8.38 0 013.8-.9h.5a8.48 8.48 0 018 8v.5z"></path></svg>
</li>
</ul>
</section>
</div>
<aside class="space-y-6 text-[12.5px]">
<section aria-labelledby="orgs-heading">
<h2 id="orgs-heading" class="font-mono uppercase tracking-wider text-[10px] text-muted-foreground mb-2">Organizations</h2>
<div class="flex flex-wrap gap-1.5">
<a href="org_profile.html" title="acme-corp" class="hover:opacity-80"><span class="inline-grid place-items-center rounded-full bg-muted border border-border font-medium text-muted-foreground h-7 w-7 text-xs" role="img" aria-label="acme-corp">A</span></a>
<a href="org_profile.html" title="stitch-labs" class="hover:opacity-80"><span class="inline-grid place-items-center rounded-full bg-muted border border-border font-medium text-muted-foreground h-7 w-7 text-xs" role="img" aria-label="stitch-labs">S</span></a>
<a href="org_profile.html" title="openforge" class="hover:opacity-80"><span class="inline-grid place-items-center rounded-full bg-muted border border-border font-medium text-muted-foreground h-7 w-7 text-xs" role="img" aria-label="openforge">O</span></a>
</div>
</section>
<section aria-labelledby="langs-heading">
<h2 id="langs-heading" class="font-mono uppercase tracking-wider text-[10px] text-muted-foreground mb-2">Top languages</h2>
<div aria-label="Language composition" role="img">
<div class="flex h-2 rounded-full overflow-hidden border border-border">
<div title="Go — 58%" style="width: 58%; background-color: #00ADD8;"></div>
<div title="TypeScript — 22%" style="width: 22%; background-color: #3178C6;"></div>
<div title="Rust — 14%" style="width: 14%; background-color: #DEA584;"></div>
<div title="Shell — 6%" style="width: 6%; background-color: #89E051;"></div>
</div>
<ul class="flex flex-wrap gap-3 mt-2 text-xs text-muted-foreground">
<li class="flex items-center gap-1.5"><span class="inline-block w-2 h-2 rounded-full" style="background-color: #00ADD8" aria-hidden="true"></span><span class="text-foreground">Go</span><span>58%</span></li>
<li class="flex items-center gap-1.5"><span class="inline-block w-2 h-2 rounded-full" style="background-color: #3178C6" aria-hidden="true"></span><span class="text-foreground">TypeScript</span><span>22%</span></li>
<li class="flex items-center gap-1.5"><span class="inline-block w-2 h-2 rounded-full" style="background-color: #DEA584" aria-hidden="true"></span><span class="text-foreground">Rust</span><span>14%</span></li>
<li class="flex items-center gap-1.5"><span class="inline-block w-2 h-2 rounded-full" style="background-color: #89E051" aria-hidden="true"></span><span class="text-foreground">Shell</span><span>6%</span></li>
</ul>
</div>
</section>
</aside>
</div>
<section data-panel="repositories" aria-labelledby="repos-tab-heading" hidden>
<div class="mb-6 flex flex-wrap items-start justify-between gap-4">
<div class="min-w-0">
<h2 id="repos-tab-heading" class="text-2xl font-semibold tracking-tight">Repositories</h2>
<p class="mt-1 text-[13px] text-muted-foreground">14 repositories you own or collaborate on.</p>
</div>
<a href="new_repo.html" class="h-9 px-4 rounded-md font-medium text-sm inline-flex items-center gap-1.5 bg-foreground text-background hover:bg-foreground/90 shrink-0">
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" aria-hidden="true" focusable="false"><path d="M12 5v14M5 12h14"></path></svg>
New repository
</a>
</div>
<form onsubmit="return false" class="flex items-center gap-2 mb-4 flex-wrap">
<div class="relative flex-1 min-w-[240px]">
<label for="repo-search" class="sr-only">Filter repositories</label>
<input id="repo-search" type="search" name="q" placeholder="Filter by name…" class="w-full h-9 pl-8 pr-3 text-[13px] bg-card border border-border rounded-md placeholder:text-muted-foreground focus:outline-hidden focus:border-border-strong"/>
<svg class="absolute left-2.5 top-2.5 text-muted-foreground" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><circle cx="11" cy="11" r="7"></circle><path d="M21 21l-4.3-4.3"></path></svg>
</div>
<select name="type" id="repo-type" class="h-9 bg-card border border-border rounded-md px-3 text-[13px] text-foreground focus:outline-hidden focus:border-border-strong" aria-label="Filter by type" style="width:auto">
<option value="">All types</option><option value="sources">Sources</option><option value="forks">Forks</option><option value="templates">Templates</option>
</select>
<select name="status" id="repo-status" class="h-9 bg-card border border-border rounded-md px-3 text-[13px] text-foreground focus:outline-hidden focus:border-border-strong" aria-label="Filter by visibility" style="width:auto">
<option value="">All visibility</option><option value="public">Public</option><option value="private">Private</option>
</select>
</form>
<div class="flex flex-wrap gap-1.5 mb-4" role="group" aria-label="Filter by language" id="lang-chips"></div>
<section class="border border-border rounded-md bg-card overflow-hidden" aria-label="Repository list">
<ol class="divide-y divide-border" id="repo-list"></ol>
</section>
<p id="repo-empty" hidden class="border border-border rounded-md bg-card px-5 py-12 text-center text-[13px] text-muted-foreground">No repositories match your filters.</p>
<nav class="mt-6 flex items-center justify-between text-[12px]" aria-label="Pagination">
<span class="h-8 px-3 border border-border rounded-md text-muted-foreground inline-flex items-center gap-1.5 opacity-50 pointer-events-none" aria-disabled="true">← Newer</span>
<span class="text-muted-foreground font-mono">page 1 of 2</span>
<a href="#repositories" class="h-8 px-3 border border-border rounded-md hover:bg-accent text-muted-foreground inline-flex items-center gap-1.5">Older →</a>
</nav>
</section>
<section data-panel="stars" aria-labelledby="stars-tab-heading" hidden>
<div class="mb-6 min-w-0">
<h2 id="stars-tab-heading" class="text-2xl font-semibold tracking-tight">Stars</h2>
<p class="mt-1 text-[13px] text-muted-foreground">6 repositories mkappworks has starred.</p>
</div>
<section class="border border-border rounded-md bg-card overflow-hidden" aria-label="Starred repositories">
<ol class="divide-y divide-border" id="star-list"></ol>
</section>
</section>
<section data-panel="gists" aria-labelledby="gists-tab-heading" hidden>
<div class="mb-6 flex flex-wrap items-start justify-between gap-4">
<div class="min-w-0">
<h2 id="gists-tab-heading" class="text-2xl font-semibold tracking-tight">Gists</h2>
<p class="mt-1 text-[13px] text-muted-foreground">3 gists by mkappworks.</p>
</div>
<a href="gist_new.html" class="h-9 px-4 rounded-md font-medium text-sm inline-flex items-center gap-1.5 bg-foreground text-background hover:bg-foreground/90 shrink-0">
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" aria-hidden="true" focusable="false"><path d="M12 5v14M5 12h14"></path></svg>
New gist
</a>
</div>
<section class="border border-border rounded-md bg-card overflow-hidden" aria-label="Gist list">
<ol class="divide-y divide-border" id="gist-list"></ol>
</section>
</section>
</div>
</main>
<div id="cz-footer"></div>
<script>
(function () {
var ROW = 'group relative block px-4 py-3 hover:bg-accent hover:pl-[18px] transition-[padding-left] duration-[120ms] before:absolute before:left-0 before:inset-y-2 before:w-0.5 before:rounded-[2px] before:bg-foreground before:opacity-0 before:transition-opacity before:duration-[120ms] hover:before:opacity-100 motion-reduce:transition-none motion-reduce:hover:pl-4 motion-reduce:before:transition-none';
var PILL = 'inline-flex items-center h-[20px] px-2 rounded-full border text-[10px] font-medium shrink-0 ';
var SMALL = 'inline-flex items-center text-[10px] px-1.5 py-0.5 rounded-full border ';
var NEUTRAL = SMALL + 'border-border bg-accent text-muted-foreground';
var BLUE = SMALL + 'bg-blue-500/15 text-blue-400 border-blue-500/30';
var PURPLE = SMALL + 'bg-[hsl(270_70%_70%)]/15 text-[hsl(270_70%_70%)] border-[hsl(270_70%_70%)]/30';
var WARN = 'bg-warning/15 text-warning border-warning/30', OK = 'bg-success/15 text-success border-success/30';
var LANG = { Go: '#00ADD8', TypeScript: '#3178C6', Rust: '#DEA584', Shell: '#89E051', Lua: '#000080' };
var STAR_SVG = '<svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" aria-hidden="true"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>';
var FORK_SVG = '<svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" aria-hidden="true"><circle cx="6" cy="3" r="3"/><circle cx="18" cy="6" r="3"/><circle cx="6" cy="21" r="3"/><path d="M6 6v9a6 6 0 006 6v0M9 6h6a3 3 0 003-3"/></svg>';
var FILE_SVG = '<svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" aria-hidden="true"><path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline></svg>';
var REPO_SVG = '<svg class="text-muted-foreground" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" aria-hidden="true" focusable="false"><path d="M2 3h6a4 4 0 014 4v14a3 3 0 00-3-3H2z"></path><path d="M22 3h-6a4 4 0 00-4 4v14a3 3 0 013-3h7z"></path></svg>';
function langLine(lang, when) {
return (lang ? '<span class="inline-flex items-center gap-1"><span class="w-2 h-2 rounded-full" style="background:' + LANG[lang] + '" aria-hidden="true"></span>' + lang + '</span><span class="opacity-50" aria-hidden="true">·</span>' : '') + '<span>Updated <time>' + when + '</time></span>';
}
var REPOS = [
{ n: 'mkappworks/cloudzilla', d: 'Self-hosted Git forge with HTMX', lang: 'Go', priv: false, role: 'owner', stars: 128, forks: 14, when: '2 hours ago' },
{ n: 'mkappworks/ingest-pipeline', priv: true, lang: 'Rust', role: 'owner', stars: 41, forks: 3, when: '1 day ago' },
{ n: 'acme-corp/api', priv: true, lang: 'Go', role: 'admin', stars: 12, forks: 1, when: '2 days ago' },
{ n: 'mkappworks/benchlabs-site', lang: 'TypeScript', role: 'owner', stars: 9, forks: 0, when: '3 days ago' },
{ n: 'openforge/runner', lang: 'Go', role: 'reader', stars: 230, forks: 31, when: '5 days ago' },
{ n: 'mkappworks/dotfiles', lang: 'Lua', role: 'owner', stars: 3, forks: 0, when: 'May 6, 2026' },
{ n: 'mkappworks/go-service-starter', lang: 'Go', role: 'owner', template: true, stars: 18, forks: 4, when: 'Apr 29, 2026' },
{ n: 'mkappworks/cloudzilla-docs', lang: 'Shell', role: 'owner', fork: true, stars: 1, forks: 0, when: 'Apr 12, 2026' }
];
var ROLE = { owner: ['Owner', BLUE], admin: ['Maintainer', BLUE], reader: ['Contributor', PURPLE] };
function repoRow(r) {
var badges = '<span class="' + PILL + (r.priv ? WARN : OK) + '">' + (r.priv ? 'Private' : 'Public') + '</span>' +
(r.template ? '<span class="' + SMALL + WARN + '">Template</span>' : '') +
(r.fork ? '<span class="' + NEUTRAL + '">Fork</span>' : '') +
'<span class="' + ROLE[r.role][1] + '">' + ROLE[r.role][0] + '</span>';
return '<li><a href="repo.html" class="' + ROW + '"><div class="flex items-start gap-3 mb-1.5"><span class="shrink-0 mt-0.5 text-muted-foreground" aria-hidden="true">' + REPO_SVG +
'</span><div class="min-w-0 flex-1 flex items-center gap-2 flex-wrap"><p class="text-[13.5px] font-medium leading-snug group-hover:underline">' + r.n + '</p>' + badges +
'</div></div><div class="pl-[27px] flex items-center justify-between gap-3"><div class="flex items-center gap-1.5 text-[12px] text-muted-foreground flex-wrap min-w-0">' + langLine(r.lang, r.when) +
'</div><div class="flex items-center gap-3 text-[12px] text-muted-foreground shrink-0"><span class="inline-flex items-center gap-1">' + STAR_SVG + r.stars + '</span><span class="inline-flex items-center gap-1">' + FORK_SVG + r.forks + '</span></div></div></a></li>';
}
var repoList = document.getElementById('repo-list');
var chips = document.getElementById('lang-chips');
var activeLang = '';
function renderChips() {
var langs = ['Go', 'TypeScript', 'Rust', 'Shell', 'Lua'];
var on = 'bg-foreground text-background border-transparent', off = 'border-border text-muted-foreground hover:text-foreground hover:border-foreground/40';
chips.innerHTML = ['All'].concat(langs).map(function (l) {
var active = (l === 'All' ? '' : l) === activeLang;
return '<button type="button" data-lang="' + (l === 'All' ? '' : l) + '" class="inline-flex items-center h-7 px-2.5 rounded-full text-xs font-medium border transition-colors ' + (active ? on : off) + '">' + l + '</button>';
}).join('');
}
function renderRepos() {
var q = document.getElementById('repo-search').value.toLowerCase();
var type = document.getElementById('repo-type').value, status = document.getElementById('repo-status').value;
var rows = REPOS.filter(function (r) {
return r.n.toLowerCase().indexOf(q) >= 0 && (!activeLang || r.lang === activeLang) &&
(!status || (status === 'private') === !!r.priv) &&
(!type || (type === 'forks' ? r.fork : type === 'templates' ? r.template : !r.fork && !r.template));
});
repoList.innerHTML = rows.map(repoRow).join('');
repoList.parentNode.hidden = rows.length === 0;
document.getElementById('repo-empty').hidden = rows.length > 0;
}
chips.addEventListener('click', function (e) {
var b = e.target.closest('button'); if (!b) return;
activeLang = b.dataset.lang; renderChips(); renderRepos();
});
['repo-search', 'repo-type', 'repo-status'].forEach(function (id) {
document.getElementById(id).addEventListener('input', renderRepos);
});
renderChips(); renderRepos();
var STARS = [
{ n: 'openforge/runner', d: 'Sandboxed CI runner written in Go', lang: 'Go', stars: 230, when: '5 days ago' },
{ n: 'acme-corp/api', priv: true, d: 'Public API for the Acme platform', lang: 'Go', stars: 12, when: '2 days ago' },
{ n: 'stitch-labs/loom', d: 'Tiny HTMX component toolkit', lang: 'TypeScript', stars: 87, when: '2 weeks ago' }
];
document.getElementById('star-list').innerHTML = STARS.map(function (r) {
return '<li><a href="repo.html" class="' + ROW + '"><div class="flex items-start gap-3 mb-1.5"><span class="shrink-0 mt-0.5 text-muted-foreground" aria-hidden="true">' + REPO_SVG +
'</span><div class="min-w-0 flex-1 flex items-center gap-2 flex-wrap"><p class="text-[13.5px] font-medium leading-snug group-hover:underline">' + r.n + '</p><span class="' + PILL + (r.priv ? WARN : OK) + '">' + (r.priv ? 'Private' : 'Public') +
'</span></div></div><p class="pl-[27px] text-[12.5px] text-muted-foreground line-clamp-2">' + r.d + '</p><div class="pl-[27px] mt-1.5 flex items-center justify-between gap-3"><div class="flex items-center gap-1.5 text-[12px] text-muted-foreground flex-wrap min-w-0">' +
langLine(r.lang, r.when) + '</div><div class="flex items-center gap-3 text-[12px] text-muted-foreground shrink-0"><span class="inline-flex items-center gap-1">' + STAR_SVG + r.stars + '</span></div></div></a></li>';
}).join('');
var GISTS = [
{ d: 'zsh prompt with git status', id: 'a1b2c3d4e5f6', pub: true, when: '2 days ago', lang: 'Shell', files: 1 },
{ d: 'chi middleware for request ids', id: '9f8e7d6c5b4a', pub: true, when: '1 week ago', lang: 'Go', files: 2 },
{ d: '', id: '0c1d2e3f4a5b', pub: false, when: '3 weeks ago', lang: '', files: 1 }
];
document.getElementById('gist-list').innerHTML = GISTS.map(function (g) {
return '<li><a href="gist_detail.html" class="' + ROW + '"><div class="flex items-start gap-3 mb-1.5"><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" class="shrink-0 mt-0.5 text-muted-foreground" aria-hidden="true"><path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="9" y1="13" x2="15" y2="13"></line><line x1="9" y1="17" x2="13" y2="17"></line></svg>' +
'<div class="min-w-0 flex-1 flex items-center gap-2 flex-wrap"><p class="text-[13.5px] font-medium leading-snug group-hover:underline font-mono">' + (g.d || '<span class="italic text-muted-foreground">No description</span>') + '</p><span class="' + PILL + (g.pub ? OK : WARN) + '">' + (g.pub ? 'Public' : 'Secret') +
'</span></div></div><div class="pl-[27px] flex items-center justify-between gap-3"><div class="flex items-center gap-1.5 text-[12px] text-muted-foreground min-w-0 flex-wrap"><span class="font-mono">' + g.id + '</span><span class="opacity-50" aria-hidden="true">·</span><time>' + g.when + '</time>' +
(g.lang ? '<span class="opacity-50 mx-0.5" aria-hidden="true">·</span><span>' + g.lang + '</span>' : '') + '</div><div class="flex items-center gap-3 text-[12px] text-muted-foreground shrink-0"><span class="inline-flex items-center gap-1">' + FILE_SVG + g.files + '</span></div></div></a></li>';
}).join('');
var tabs = document.querySelectorAll('#profile-tabs a');
var panels = document.querySelectorAll('[data-panel]');
var ON = 'px-3 py-1.5 rounded-md bg-accent font-medium text-foreground inline-flex items-center gap-1.5';
var OFF = 'px-3 py-1.5 rounded-md text-muted-foreground hover:text-foreground hover:bg-accent inline-flex items-center gap-1.5';
function show(name) {
tabs.forEach(function (t) {
var on = t.dataset.tab === name;
t.className = on ? ON : OFF;
if (on) t.setAttribute('aria-current', 'page'); else t.removeAttribute('aria-current');
});
panels.forEach(function (p) { p.hidden = p.dataset.panel !== name; });
}
tabs.forEach(function (t) {
t.addEventListener('click', function (e) { e.preventDefault(); history.replaceState(null, '', t.getAttribute('href')); show(t.dataset.tab); });
});
show(new URLSearchParams(location.search).get('tab') || 'overview');
document.getElementById('share-btn').addEventListener('click', function () {
var label = this.querySelector('span'); label.textContent = 'Copied';
setTimeout(function () { label.textContent = 'Share'; }, 1500);
});
var view = document.getElementById('readme-view'), form = document.getElementById('readme-form'), editWrap = document.getElementById('readme-edit-wrap');
function editing(on) { view.hidden = on; form.hidden = !on; editWrap.hidden = on; }
document.getElementById('readme-edit').addEventListener('click', function () { editing(true); });
document.getElementById('readme-cancel').addEventListener('click', function () { editing(false); });
document.getElementById('readme-save').addEventListener('click', function () { editing(false); });
var PIN_REPOS = [['cloudzilla', 'Self-hosted Git forge with HTMX', 0, 1], ['ingest-pipeline', 'Event ingestion: Kafka → ClickHouse with replay', 1, 1], ['benchlabs-site', 'Marketing site, Astro + Tailwind', 0, 1], ['dotfiles', 'Personal config, nvim + zsh', 0, 0], ['go-service-starter', 'Template · chi + sqlx + migrations', 0, 0]];
var pinList = document.getElementById('pin-list');
pinList.innerHTML = PIN_REPOS.map(function (r) {
return '<li class="px-5 py-2.5 flex items-center gap-3"><span class="shrink-0 text-muted-foreground" aria-hidden="true">' + REPO_SVG + '</span><div class="min-w-0 flex-1"><p class="text-[13px] font-medium leading-snug">' + r[0] +
'</p><p class="text-[12px] text-muted-foreground line-clamp-1">' + r[1] + '</p></div><label class="shrink-0 inline-flex items-center cursor-pointer"><input type="checkbox" class="h-4 w-4 cursor-pointer accent-blue-500 disabled:cursor-not-allowed disabled:opacity-50"' + (r[3] ? ' checked' : '') + ' aria-label="Pin ' + r[0] + '"/></label></li>';
}).join('');
pinList.addEventListener('change', function () {
var n = pinList.querySelectorAll('input:checked').length;
document.querySelectorAll('[data-pin-count]').forEach(function (el) { el.textContent = n; });
document.getElementById('pin-warn').hidden = n < 6;
});
var heat = document.getElementById('heatmap'), seed = 11;
for (var i = 0; i < 52 * 7; i++) {
seed = (seed * 9301 + 49297) % 233280;
var r = seed / 233280, level = r < 0.4 ? 0 : r < 0.62 ? 1 : r < 0.8 ? 2 : r < 0.92 ? 3 : 4;
var c = document.createElement('div');
c.className = 'rounded-[2px] heatmap-cell-' + level;
heat.appendChild(c);
}
})();
</script>
</body>
</html>