mockups/stars.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>Starred repositories — 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-5">
    <h1 class="text-2xl font-semibold tracking-tight">Starred repositories</h1>

    <div class="flex flex-wrap gap-2" id="langs"></div>

    <ol class="rounded-md border border-border bg-card divide-y divide-border overflow-hidden" id="rows"></ol>
  </div>
</main>

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

<script>
(function () {
  var STARS = [
    { o: 'openforge', n: 'runner', d: 'Sandboxed CI runner written in Go', lang: 'Go', when: '5 days ago' },
    { o: 'acme-corp', n: 'api', priv: true, d: 'Public API for the Acme platform', lang: 'Go', when: '2 days ago' },
    { o: 'stitch-labs', n: 'loom', d: 'Tiny HTMX component toolkit', lang: 'TypeScript', when: '2 weeks ago' },
    { o: 'benchlabs', n: 'bench-kit', d: 'Micro-benchmark harness for Go services', lang: 'Go', when: '3 weeks ago' },
    { o: 'kiyo', n: 'tracer', d: 'Distributed tracing sidecar', lang: 'Rust', when: '1 month ago' },
    { o: 'daisy', n: 'dotfiles', d: '', lang: 'Lua', when: '2 months ago' }
  ];
  var ON = 'inline-flex items-center rounded-full px-3 py-1 text-xs font-medium bg-primary text-primary-foreground';
  var OFF = 'inline-flex items-center rounded-full px-3 py-1 text-xs font-medium bg-secondary text-secondary-foreground hover:bg-secondary/80';
  var lang = '';
  function render() {
    var langs = STARS.map(function (s) { return s.lang; }).filter(function (l, i, a) { return l && a.indexOf(l) === i; }).sort();
    document.getElementById('langs').innerHTML = ['All'].concat(langs).map(function (l) {
      var v = l === 'All' ? '' : l;
      return '<a href="#" data-lang="' + v + '" class="' + (v === lang ? ON : OFF) + '">' + l + '</a>';
    }).join('');
    document.getElementById('rows').innerHTML = STARS.filter(function (s) { return !lang || s.lang === lang; }).map(function (s) {
      return '<li><a href="repo.html" class="block px-4 py-3 hover:bg-muted/50"><div class="text-[13px] font-medium"><span class="text-muted-foreground">' + s.o + '/</span><span class="hover:underline">' + s.n + '</span>' +
        (s.priv ? '<span class="ml-1.5 text-[11px] text-muted-foreground">Private</span>' : '') + '</div>' +
        (s.d ? '<div class="mt-1 text-[12px] text-muted-foreground">' + s.d + '</div>' : '') +
        '<div class="mt-1.5 flex items-center gap-3 text-[12px] text-muted-foreground"><span>' + s.lang + '</span><time class="font-mono text-xs text-muted-foreground/70">Updated ' + s.when + '</time></div></a></li>';
    }).join('');
  }
  document.getElementById('langs').addEventListener('click', function (e) {
    var a = e.target.closest('a'); if (!a) return; e.preventDefault(); lang = a.dataset.lang; render();
  });
  render();
})();
</script>

</body>
</html>