tightknit.dev/src/components/RepoGrid.astro at main · TightknitAI/tightknit.dev · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
---
import type { Repo } from '../lib/github';
import RepoCard from './RepoCard.astro';

interface Props {
  repos: Repo[];
}
const { repos } = Astro.props;

// Hand-pick the headline projects; remaining repos sort by stars (already sorted upstream).
const FEATURED_NAMES = ['block-kitchen', 'slack-hono', 'slack-block-kit-validator'];
const featured = FEATURED_NAMES.map((name) => repos.find((r) => r.name === name)).filter(
  (r): r is Repo => r !== undefined,
);
const featuredSet = new Set(featured.map((r) => r.name));
const rest = repos.filter((r) => !featuredSet.has(r.name));

const featuredVariants = ['yellow', 'pink', 'cyan'] as const;

// Social-proof stat row — only render once the org has earned some real traction.
const totalStars = repos.reduce((sum, r) => sum + r.stars, 0);
const SOCIAL_PROOF_STAR_THRESHOLD = 100;
const showSocialProof = totalStars >= SOCIAL_PROOF_STAR_THRESHOLD;
---

<section id="repos" class="bg-cream border-ink relative border-b-[3px]">
  <div class="mx-auto max-w-7xl px-6 py-20 lg:px-10 lg:py-28">
    <div class="mb-12 flex flex-col gap-6 lg:mb-16 lg:flex-row lg:items-end lg:justify-between">
      <div>
        <div class="text-ink/60 mb-3 font-mono text-[12px] tracking-[0.18em] uppercase">
          // the stack
        </div>
        <h2
          class="font-display text-5xl leading-[0.9] font-bold tracking-[-0.04em] sm:text-6xl lg:text-7xl"
        >
          The Stack.
        </h2>
        {
          showSocialProof && (
            <div
              class="text-ink/70 mt-5 flex flex-wrap items-center gap-3 font-mono text-[12px] tracking-[0.12em] uppercase"
              aria-label="repo statistics"
            >
              <span>{repos.length} repos</span>
              <span class="opacity-40" aria-hidden="true">
                ·
              </span>
              <span>
                <span aria-hidden="true">★</span> {totalStars.toLocaleString('en-US')} stars
              </span>
              <span class="opacity-40" aria-hidden="true">
                ·
              </span>
              <span>open source</span>
            </div>
          )
        }
      </div>
      <p class="text-ink/70 max-w-md font-mono text-sm leading-relaxed">
        Block Kit tooling, app frameworks, and validators we use to ship Slack apps faster. Open
        sourced on <a
          href="https://github.com/tightknitai"
          class="decoration-pink hover:text-pink underline decoration-2 underline-offset-2"
          target="_blank"
          rel="noopener">github.com/tightknitai</a
        >.
      </p>
    </div>

    {
      featured.length > 0 && (
        <div class="mb-16 grid grid-cols-1 gap-7 lg:mb-20 lg:grid-cols-3">
          {featured.map((repo, i) => (
            <RepoCard repo={repo} variant={featuredVariants[i]!} featured />
          ))}
        </div>
      )
    }

    {
      rest.length > 0 && (
        <>
          <div class="mb-8 flex items-center gap-4">
            <div class="text-ink/60 shrink-0 font-mono text-[12px] tracking-[0.18em] uppercase">
              // the rest
            </div>
            <div class="bg-ink/15 h-[2px] flex-1" />
          </div>

          <div class="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3">
            {rest.map((repo) => (
              <RepoCard repo={repo} variant="default" />
            ))}
          </div>
        </>
      )
    }
  </div>
</section>