mockups/wiki.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>Home — Wiki — 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" data-repo-tab="wiki"></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-6">

  <section class="mb-6 flex flex-wrap items-start justify-between gap-4" aria-labelledby="wiki-title">
    <div class="min-w-0">
      <h1 id="wiki-title" class="text-2xl font-semibold tracking-tight">Home</h1>
    </div>
    <div class="flex items-center gap-2 shrink-0">
      <a href="wiki_edit.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</a>
      <button type="button" id="wiki-delete-btn" class="inline-flex items-center justify-center gap-1.5 rounded-md font-medium transition-colors border border-destructive/40 text-destructive bg-transparent hover:bg-destructive/10 hover:border-destructive h-8 px-3 text-[13px]">Delete</button>
    </div>
  </section>

  <div class="grid lg:grid-cols-[220px_1fr] gap-8">
    <aside aria-label="Wiki pages">
      <p class="font-mono text-[11px] text-muted-foreground uppercase tracking-wider mb-2">Pages</p>
      <ul id="wiki-page-list" class="space-y-0.5 text-[13px]">
        <li data-slug="Home"><a href="wiki.html" class="block px-2 py-1.5 rounded-md font-medium bg-muted text-foreground" aria-current="page">Home</a><span class="wiki-move-controls hidden px-2 pb-1 space-x-1"><button type="button" data-move="up" class="rounded px-2 py-1 hover:bg-accent focus-visible:ring-2 focus-visible:ring-ring" aria-label="Move Home up">↑</button><button type="button" data-move="down" class="rounded px-2 py-1 hover:bg-accent focus-visible:ring-2 focus-visible:ring-ring" aria-label="Move Home down">↓</button></span></li>
        <li data-slug="Architecture"><a href="wiki_architecture.html" class="block px-2 py-1.5 rounded-md text-muted-foreground hover:text-foreground hover:bg-muted/50">Architecture</a><span class="wiki-move-controls hidden px-2 pb-1 space-x-1"><button type="button" data-move="up" class="rounded px-2 py-1 hover:bg-accent focus-visible:ring-2 focus-visible:ring-ring" aria-label="Move Architecture up">↑</button><button type="button" data-move="down" class="rounded px-2 py-1 hover:bg-accent focus-visible:ring-2 focus-visible:ring-ring" aria-label="Move Architecture down">↓</button></span></li>
        <li data-slug="Contributing"><a href="wiki_contributing.html" class="block px-2 py-1.5 rounded-md text-muted-foreground hover:text-foreground hover:bg-muted/50">Contributing</a><span class="wiki-move-controls hidden px-2 pb-1 space-x-1"><button type="button" data-move="up" class="rounded px-2 py-1 hover:bg-accent focus-visible:ring-2 focus-visible:ring-ring" aria-label="Move Contributing up">↑</button><button type="button" data-move="down" class="rounded px-2 py-1 hover:bg-accent focus-visible:ring-2 focus-visible:ring-ring" aria-label="Move Contributing down">↓</button></span></li>
        <li data-slug="Code-of-Conduct"><a href="wiki_code_of_conduct.html" class="block px-2 py-1.5 rounded-md text-muted-foreground hover:text-foreground hover:bg-muted/50">Code-of-Conduct</a><span class="wiki-move-controls hidden px-2 pb-1 space-x-1"><button type="button" data-move="up" class="rounded px-2 py-1 hover:bg-accent focus-visible:ring-2 focus-visible:ring-ring" aria-label="Move Code-of-Conduct up">↑</button><button type="button" data-move="down" class="rounded px-2 py-1 hover:bg-accent focus-visible:ring-2 focus-visible:ring-ring" aria-label="Move Code-of-Conduct down">↓</button></span></li>
        <li data-slug="Setup-on-mac"><a href="wiki_setup_on_mac.html" class="block px-2 py-1.5 rounded-md text-muted-foreground hover:text-foreground hover:bg-muted/50">Setup-on-mac</a><span class="wiki-move-controls hidden px-2 pb-1 space-x-1"><button type="button" data-move="up" class="rounded px-2 py-1 hover:bg-accent focus-visible:ring-2 focus-visible:ring-ring" aria-label="Move Setup-on-mac up">↑</button><button type="button" data-move="down" class="rounded px-2 py-1 hover:bg-accent focus-visible:ring-2 focus-visible:ring-ring" aria-label="Move Setup-on-mac down">↓</button></span></li>
        <li data-slug="Release-process"><a href="wiki_release_process.html" class="block px-2 py-1.5 rounded-md text-muted-foreground hover:text-foreground hover:bg-muted/50">Release-process</a><span class="wiki-move-controls hidden px-2 pb-1 space-x-1"><button type="button" data-move="up" class="rounded px-2 py-1 hover:bg-accent focus-visible:ring-2 focus-visible:ring-ring" aria-label="Move Release-process up">↑</button><button type="button" data-move="down" class="rounded px-2 py-1 hover:bg-accent focus-visible:ring-2 focus-visible:ring-ring" aria-label="Move Release-process down">↓</button></span></li>
      </ul>
      <a href="wiki_new.html" class="inline-block mt-3 text-[12px] text-muted-foreground hover:text-foreground px-2 py-1.5">+ New page</a>
      <p id="wiki-order-status" class="sr-only" role="status"></p>
      <button type="button" id="wiki-reorder-toggle" class="mt-2 inline-block text-[12px] text-muted-foreground hover:text-foreground px-2 py-1.5">Reorder pages</button>
    </aside>

    <article class="rounded-md border border-border bg-card p-6">
      <div class="prose prose-sm dark:prose-invert max-w-none">
        <h1>Welcome to the Cloudzilla wiki</h1>
        <p>This wiki holds project-wide documentation that doesn't fit in the README — design notes, runbooks, contributor onboarding, and the longer-form architecture decisions.</p>
        <h2>Pick a topic</h2>
        <p>The sidebar on the left lists every wiki page. The most commonly-visited entry points:</p>
        <ul>
          <li><a href="wiki_architecture.html">Architecture</a> — the strict <code>Stores → Services → Handlers</code> layering, plus how Templ and HTMX fit together.</li>
          <li><a href="wiki_contributing.html">Contributing</a> — branch naming, commit conventions, and how to run the test suite locally.</li>
          <li><a href="wiki_setup_on_mac.html">Setup-on-mac</a> — the one-time PostgreSQL and Tailwind CLI setup steps.</li>
        </ul>
        <h2>Editing pages</h2>
        <p>Anyone with write access can edit pages. Click <strong>Edit</strong> in the page header to open the Markdown editor. Each save writes a commit to the wiki's bare repo — you can review history in the project's <a href="org_settings.html#audit-log">audit log</a>.</p>
        <pre><code># Render the wiki locally
make dev
open http://localhost:8080/mkappworks/cloudzilla/wiki/Home</code></pre>
      </div>
    </article>
  </div>

</div>
</main>
<div id="cz-footer"></div>
<script>
(function () {
  var list = document.getElementById('wiki-page-list');
  var toggle = document.getElementById('wiki-reorder-toggle');
  var active = false, dragged = null;
  var ring = ['ring-1', 'ring-border', 'rounded-md', 'p-1'];
  function setMode(on) {
    active = on;
    toggle.textContent = on ? 'Done' : 'Reorder pages';
    list.querySelectorAll('li[data-slug]').forEach(function (li) {
      li.draggable = on;
      li.querySelector('.wiki-move-controls').classList.toggle('hidden', !on);
      li.classList.toggle('cursor-move', on);
      if (!on) li.classList.remove('opacity-50');
    });
    ring.forEach(function (c) { list.classList.toggle(c, on); });
  }
  toggle.addEventListener('click', function () { setMode(!active); });
  list.addEventListener('click', function (e) {
    if (!active) return;
    var button = e.target.closest('button[data-move]');
    if (button) {
      var li = button.closest('li[data-slug]');
      var sibling = button.dataset.move === 'up' ? li.previousElementSibling : li.nextElementSibling;
      if (sibling) { if (button.dataset.move === 'up') sibling.before(li); else sibling.after(li); button.focus(); document.getElementById('wiki-order-status').textContent = li.dataset.slug + ' moved ' + button.dataset.move; }
    } else if (e.target.closest('a')) e.preventDefault();
  });
  list.addEventListener('dragstart', function (e) {
    var li = e.target.closest('li[data-slug]');
    if (!li) return;
    dragged = li;
    li.classList.add('opacity-50');
    e.dataTransfer.effectAllowed = 'move';
  });
  list.addEventListener('dragend', function () {
    if (dragged) dragged.classList.remove('opacity-50');
    dragged = null;
  });
  list.addEventListener('dragover', function (e) {
    e.preventDefault();
    var t = e.target.closest('li[data-slug]');
    if (!dragged || !t || t === dragged) return;
    var r = t.getBoundingClientRect();
    if (e.clientY > r.top + r.height / 2) t.after(dragged); else t.before(dragged);
  });
})();
</script>
<dialog id="wiki-delete-dialog" 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" aria-labelledby="wiki-delete-dialog-title">
  <div class="sticky top-0 z-10 bg-popover flex flex-col gap-1 p-5 border-b border-border">
    <h2 id="wiki-delete-dialog-title" class="text-base font-semibold leading-tight">Delete this page?</h2>
    <p class="text-[13px] text-muted-foreground leading-snug">This permanently removes the "Home" page from the wiki. This cannot be undone.</p>
  </div>
  <div class="sticky bottom-0 z-10 bg-popover flex items-center justify-end gap-2 p-5 border-t border-border">
    <button type="button" onclick="this.closest('dialog').close()" 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">Cancel</button>
    <a href="wiki.html" class="inline-flex items-center justify-center gap-1.5 rounded-md font-medium transition-colors bg-destructive text-destructive-foreground hover:bg-destructive/90 h-8 px-3 text-[13px]">Delete page</a>
  </div>
</dialog>
<script>
document.getElementById('wiki-delete-btn').addEventListener('click', function () {
  document.getElementById('wiki-delete-dialog').showModal();
});
</script>
</body>
</html>