|
| 1 | +import { component$ } from '@builder.io/qwik'; |
| 2 | +import { RequestHandler, routeLoader$ } from '@builder.io/qwik-city'; |
| 3 | +import { Badge } from '@qwik-ui/styled'; |
| 4 | + |
| 5 | +export const onGet: RequestHandler = async ({ cacheControl }) => { |
| 6 | + cacheControl({ |
| 7 | + staleWhileRevalidate: 60 * 60 * 24 * 7, |
| 8 | + // Don't hit the Github API more than once every 10 minutes |
| 9 | + maxAge: 10 * 60, |
| 10 | + }); |
| 11 | +}; |
| 12 | + |
| 13 | +export const useContributors = routeLoader$<Contributor[]>(async () => { |
| 14 | + const response = await fetch( |
| 15 | + 'https://api.github.com/repos/qwikifiers/qwik-ui/contributors', |
| 16 | + ); |
| 17 | + |
| 18 | + if (!response.ok) { |
| 19 | + console.error('Failed to fetch contributors', response); |
| 20 | + return []; |
| 21 | + } |
| 22 | + |
| 23 | + const contributors: Contributor[] = await response.json(); |
| 24 | + |
| 25 | + // @ts-expect-error m.type actually is valid |
| 26 | + return contributors.filter((m) => m.type === 'User'); |
| 27 | +}); |
| 28 | + |
| 29 | +export default component$(() => { |
| 30 | + const contributors = useContributors(); |
| 31 | + |
| 32 | + return ( |
| 33 | + <> |
| 34 | + <section class="py-16 text-accent-foreground"> |
| 35 | + <div class="mx-auto text-center"> |
| 36 | + <h1 class="mb-6 scroll-mt-24 pt-6 text-3xl font-extrabold md:text-5xl"> |
| 37 | + Contributors |
| 38 | + </h1> |
| 39 | + <p class="text-xl"> |
| 40 | + Our project's success is driven by these incredible contributors. |
| 41 | + </p> |
| 42 | + </div> |
| 43 | + </section> |
| 44 | + |
| 45 | + <section class="py-12"> |
| 46 | + <div class="mx-auto max-w-6xl px-4"> |
| 47 | + <div class="grid gap-12 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3"> |
| 48 | + {contributors.value.map((contributor) => ( |
| 49 | + <a |
| 50 | + href={contributor.html_url} |
| 51 | + target="_blank" |
| 52 | + key={contributor.login} |
| 53 | + class="transform rounded-lg bg-accent shadow-lg transition-all duration-200 hover:-translate-y-1 hover:shadow-xl" |
| 54 | + > |
| 55 | + <div class="p-6 text-center"> |
| 56 | + <img |
| 57 | + width={88} |
| 58 | + height={88} |
| 59 | + class="mx-auto -mt-12 h-24 w-24 rounded-full border-2 border-foreground/20" |
| 60 | + src={`${contributor.avatar_url}&s=256`} |
| 61 | + alt={contributor.login} |
| 62 | + /> |
| 63 | + <h3 class="mt-2 text-xl font-semibold text-foreground"> |
| 64 | + {contributor.login} |
| 65 | + </h3> |
| 66 | + <div class="mt-2 mt-4 flex flex-col items-center gap-2 text-foreground"> |
| 67 | + Contributions <Badge> {contributor.contributions}</Badge> |
| 68 | + </div> |
| 69 | + </div> |
| 70 | + </a> |
| 71 | + ))} |
| 72 | + </div> |
| 73 | + </div> |
| 74 | + </section> |
| 75 | + |
| 76 | + {/* Call to Action */} |
| 77 | + <section class="bg-primary py-12 text-white"> |
| 78 | + <div class="mx-auto max-w-3xl text-center"> |
| 79 | + <h2 class="mb-4 text-3xl font-bold">Join Our Community</h2> |
| 80 | + <p class="mb-6"> |
| 81 | + Ready to make an impact? Contribute to Qwik UI and be part of something great. |
| 82 | + </p> |
| 83 | + <a |
| 84 | + href="https://github.com/qwikifiers/qwik-ui/blob/main/CONTRIBUTING.md" |
| 85 | + class="rounded-full bg-white px-6 py-3 font-semibold text-primary shadow-lg hover:bg-gray-100" |
| 86 | + > |
| 87 | + Get Involved |
| 88 | + </a> |
| 89 | + </div> |
| 90 | + </section> |
| 91 | + </> |
| 92 | + ); |
| 93 | +}); |
0 commit comments