mockups/wiki_new.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>New page — 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" aria-labelledby="wiki-title">
    <p class="font-mono text-[11px] text-muted-foreground uppercase tracking-wider mb-2">
      <a href="repo.html" class="hover:underline">cloudzilla</a>
      <span aria-hidden="true">·</span>
      <a href="wiki.html" class="hover:underline">Wiki</a>
      <span aria-hidden="true">·</span>
      New page
    </p>
    <h1 id="wiki-title" class="text-2xl font-semibold tracking-tight">New page</h1>
  </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><a href="wiki.html" class="block px-2 py-1.5 rounded-md text-muted-foreground hover:text-foreground hover:bg-muted/50">Home</a></li>
        <li><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></li>
        <li><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></li>
        <li><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></li>
        <li><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></li>
        <li><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></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>
    </aside>

    <article class="border border-border rounded-md bg-card p-6">
      <form class="space-y-5" id="wiki-form">
        <div>
          <label for="wiki-page-title" class="block text-sm font-medium mb-1.5">Page title</label>
          <input id="wiki-page-title" type="text" placeholder="e.g. Deployment-checklist" class="flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-xs transition-colors placeholder:text-muted-foreground" />
          <p class="mt-1 text-[12px] text-muted-foreground">Spaces become hyphens in the page URL.</p>
        </div>

        <div class="space-y-1.5">
          <label for="wiki-content" class="block text-sm font-medium">Content (Markdown)</label>
          <div class="border border-border rounded-md overflow-hidden">
            <div data-markdown-editor data-rows="18" data-placeholder="# Page heading…&#10;&#10;Write your page in Markdown…"></div>
          </div>
        </div>

        <div>
          <label for="wiki-message" class="block text-sm font-medium mb-1.5">Commit message <span class="text-muted-foreground font-normal">(optional)</span></label>
          <input id="wiki-message" type="text" name="message" placeholder="Create page" class="flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-xs transition-colors placeholder:text-muted-foreground" />
        </div>

        <div id="wiki-error" role="alert" class="hidden text-sm text-destructive bg-destructive/10 border border-destructive/40 rounded-md px-3 py-2"></div>

        <div class="flex items-center gap-3 pt-1">
          <button type="submit" 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-9 px-4 text-sm">Save page</button>
          <a href="wiki.html" class="inline-flex items-center justify-center gap-1.5 rounded-md font-medium transition-colors hover:bg-accent hover:text-accent-foreground h-9 px-4 text-sm">Cancel</a>
        </div>
      </form>
    </article>
  </div>

</div>
</main>
<div id="cz-footer"></div>
<script src="markdown-editor.js"></script>
<script>
document.getElementById('wiki-form').addEventListener('submit', function (e) {
  e.preventDefault();
  var slug = document.getElementById('wiki-page-title').value.trim().replace(/\s+/g, '-');
  var err = document.getElementById('wiki-error');
  if (!/^[A-Za-z0-9_-]{1,100}$/.test(slug)) {
    err.textContent = 'Page title must produce a slug matching [A-Za-z0-9_-]{1,100} (no special characters).';
    err.classList.remove('hidden');
    return;
  }
  location.href = 'wiki.html';
});
</script>
</body>
</html>