mockups/topic.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>Topic: git-forge — 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="max-w-[1400px] mx-auto px-6 pt-8 pb-20">

  <section class="mb-8" aria-labelledby="topic-title">
    <h1 id="topic-title" class="text-3xl font-semibold tracking-tight inline-flex items-center gap-3">
      <span class="px-3 py-1 rounded-full text-base font-medium border border-primary/30 bg-primary/10 text-primary">git-forge</span>
    </h1>
    <p class="mt-3 text-[14px] text-muted-foreground max-w-2xl">
      Repositories tagged with
      <span class="font-mono">git-forge</span>. Topics are crowd-sourced labels maintained by repo owners.
    </p>
  </section>

  <div class="mb-3 flex items-center justify-between gap-4">
    <p class="text-[13px] text-muted-foreground"><span class="font-medium">5</span> repositories</p>
    <form method="get" class="inline-flex items-center gap-2">
      <label for="topic-sort" class="text-[12px] text-muted-foreground">Sort</label>
      <select id="topic-sort" name="sort" aria-label="Sort repositories" class="h-7 text-[12px] bg-card border border-border rounded-md px-2 text-muted-foreground">
        <option value="stars" selected>Most stars</option>
        <option value="updated">Recently updated</option>
        <option value="name">Name</option>
      </select>
    </form>
  </div>

  <section class="rounded-md border border-border bg-card overflow-hidden" aria-labelledby="repos">
    <h2 id="repos" class="sr-only">Repositories tagged with git-forge</h2>
    <ol class="divide-y divide-border">
        <li class="group relative px-4 py-4 hover:bg-muted/50 transition-[padding-left] duration-[120ms] hover:pl-[18px]">
          <span class="absolute left-0 top-2 bottom-2 w-0.5 bg-foreground opacity-0 group-hover:opacity-100 transition-opacity duration-[120ms] rounded-xs" aria-hidden="true"></span>
          <a href="repo.html" class="text-[14px] font-medium hover:underline">mkappworks/cloudzilla</a>
          <p class="mt-1 text-[13px] text-muted-foreground">Self-hosted git forge written in Go with a server-rendered UI.</p>
          <div class="mt-2 flex items-center gap-4 text-[11px] text-muted-foreground font-mono">
            <span class="inline-flex items-center gap-1" aria-label="1284 stars">
              <svg width="12" height="12" viewBox="0 0 24 24" fill="currentColor" 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"></polygon></svg>
              1284
            </span>
            <span>Updated <time datetime="2026-11-03T09:12:00Z">Nov 3, 2026</time></span>
          </div>
        </li>
        <li class="group relative px-4 py-4 hover:bg-muted/50 transition-[padding-left] duration-[120ms] hover:pl-[18px]">
          <span class="absolute left-0 top-2 bottom-2 w-0.5 bg-foreground opacity-0 group-hover:opacity-100 transition-opacity duration-[120ms] rounded-xs" aria-hidden="true"></span>
          <a href="repo.html" class="text-[14px] font-medium hover:underline">acme-corp/forge-cli</a>
          <p class="mt-1 text-[13px] text-muted-foreground">Command-line client for the Acme build platform.</p>
          <div class="mt-2 flex items-center gap-4 text-[11px] text-muted-foreground font-mono">
            <span class="inline-flex items-center gap-1" aria-label="412 stars">
              <svg width="12" height="12" viewBox="0 0 24 24" fill="currentColor" 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"></polygon></svg>
              412
            </span>
            <span>Updated <time datetime="2026-10-29T14:40:00Z">Oct 29, 2026</time></span>
          </div>
        </li>
        <li class="group relative px-4 py-4 hover:bg-muted/50 transition-[padding-left] duration-[120ms] hover:pl-[18px]">
          <span class="absolute left-0 top-2 bottom-2 w-0.5 bg-foreground opacity-0 group-hover:opacity-100 transition-opacity duration-[120ms] rounded-xs" aria-hidden="true"></span>
          <a href="repo.html" class="text-[14px] font-medium hover:underline">stitch-labs/go-service-starter</a>
          <p class="mt-1 text-[13px] text-muted-foreground">Opinionated starter for small Go HTTP services.</p>
          <div class="mt-2 flex items-center gap-4 text-[11px] text-muted-foreground font-mono">
            <span class="inline-flex items-center gap-1" aria-label="238 stars">
              <svg width="12" height="12" viewBox="0 0 24 24" fill="currentColor" 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"></polygon></svg>
              238
            </span>
            <span>Updated <time datetime="2026-10-18T08:05:00Z">Oct 18, 2026</time></span>
          </div>
        </li>
        <li class="group relative px-4 py-4 hover:bg-muted/50 transition-[padding-left] duration-[120ms] hover:pl-[18px]">
          <span class="absolute left-0 top-2 bottom-2 w-0.5 bg-foreground opacity-0 group-hover:opacity-100 transition-opacity duration-[120ms] rounded-xs" aria-hidden="true"></span>
          <a href="repo.html" class="text-[14px] font-medium hover:underline">daisy/tinyforge</a>
          <p class="mt-1 text-[13px] text-muted-foreground">A weekend-sized git server, one binary.</p>
          <div class="mt-2 flex items-center gap-4 text-[11px] text-muted-foreground font-mono">
            <span class="inline-flex items-center gap-1" aria-label="96 stars">
              <svg width="12" height="12" viewBox="0 0 24 24" fill="currentColor" 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"></polygon></svg>
              96
            </span>
            <span>Updated <time datetime="2026-09-30T19:22:00Z">Sep 30, 2026</time></span>
          </div>
        </li>
        <li class="group relative px-4 py-4 hover:bg-muted/50 transition-[padding-left] duration-[120ms] hover:pl-[18px]">
          <span class="absolute left-0 top-2 bottom-2 w-0.5 bg-foreground opacity-0 group-hover:opacity-100 transition-opacity duration-[120ms] rounded-xs" aria-hidden="true"></span>
          <a href="repo.html" class="text-[14px] font-medium hover:underline">openforge/gitkit</a>
          <p class="mt-1 text-[13px] text-muted-foreground">Pure-Go building blocks for git transport.</p>
          <div class="mt-2 flex items-center gap-4 text-[11px] text-muted-foreground font-mono">
            <span class="inline-flex items-center gap-1" aria-label="41 stars">
              <svg width="12" height="12" viewBox="0 0 24 24" fill="currentColor" 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"></polygon></svg>
              41
            </span>
            <span>Updated <time datetime="2026-09-11T12:00:00Z">Sep 11, 2026</time></span>
          </div>
        </li>
    </ol>
  </section>

  <nav class="mt-6 flex items-center justify-between text-[12px]" aria-label="Pagination">
    <span></span>
    <span class="text-muted-foreground font-mono">page 1</span>
    <a href="topic.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]">Next →</a>
  </nav>
</div>
</main>

<div id="cz-footer"></div>
</body>
</html>