# Files changed · PR \#5 · screen/col [View on GitCafe](https://git.cafe/screen/col/pull/5/diffs) Repository: [screen/col](https://git.cafe/screen/col) Visibility: public [Add docs, contributors, and refreshed site branding](https://git.cafe/screen/col/pull/5.md) Version: 0 Head commit: b88f5ee023b27f7c1e3d842d16ee068444c2a7ac Base commit: d7b9d82c47618c6b44cdc6faa77b85da40919cef Comparison base: d7b9d82c47618c6b44cdc6faa77b85da40919cef Showing up to 20 entries from this revision. If the pull request changes, reopen the first page before continuing. ## PRODUCT.md Status: added; +45; −0 ```diff @@ -1,0 +1,45 @@ +# Product + + + +## Platform + +web + +## Users + +Frontend developers and product designers comparing UI libraries for an active project, plus contributors maintaining the directory. + +## Product Purpose + +Col is a community-maintained directory for finding, filtering, and comparing UI libraries without opening many disconnected sources. + +## Positioning + +Col combines a curated library registry with practical stack and use-case filters, then sends users to the official source for each library. + +## Operating Context + +Visitors search from the homepage, refine results in the library directory, save useful entries locally, and use GitHub issues or pull requests to improve the catalog. + +## Capabilities and Constraints + +- Catalog libraries rather than individual components. +- Keep library metadata factual and link to canonical project sources. +- Preserve light and dark themes, keyboard access, responsive behavior, and reduced-motion support. +- Only maintainers merge changes to the protected default branch. + +## Brand Commitments + +The product is named Col and uses the line “Sol could not do it himself, so we made Col.” The visual identity is minimal, high-contrast, and uses `#0800FF` as its primary accent. + +## Evidence on Hand + +The curated registry lives in `data/libraries.ts`; contribution rules live in `README.md`, `CONTRIBUTING.md`, and `.github/` issue templates. + +## Product Principles + +- Reduce the time it takes to find a suitable UI library. +- Prefer clear filters and factual metadata over promotional copy. +- Keep contributions focused, reviewable, and easy to verify. +- Send users to official project sources for installation and documentation. ``` ## app/contributors/page.tsx Status: added; +84; −0 ```diff @@ -1,0 +1,84 @@ +import type { Metadata } from "next"; +import { ArrowUpRight } from "lucide-react"; +import { Header } from "@/components/Header"; +import { SiteFooter } from "@/components/SiteFooter"; + +export const metadata: Metadata = { + title: "Contributors — Col", + description: "Meet the people contributing to Col.", +}; + +type GitHubContributor = { + id: number; + login: string; + avatar_url: string; + html_url: string; + contributions: number; + type: string; +}; + +async function getContributors(): Promise { + try { + const contributors: GitHubContributor[] = []; + let page = 1; + + while (true) { + const response = await fetch(`https://api.github.com/repos/screen-gd/Col/contributors?per_page=100&page=${page}`, { + headers: { Accept: "application/vnd.github+json", "User-Agent": "Col-directory" }, + next: { revalidate: 3600 }, + }); + if (!response.ok) return []; + const batch = await response.json() as GitHubContributor[]; + contributors.push(...batch); + if (batch.length < 100) break; + page += 1; + } + + return contributors.filter((contributor) => contributor.type === "User"); + } catch { + return []; + } +} + +export default async function ContributorsPage() { + const contributors = await getContributors(); + + return ( + <> +
+
+
+
+
+

Built by people.

+

The contributors keeping Col useful, accurate, and open.

+
+ View on GitHub +
+ + {contributors.length ? ( + + ) : ( +
+

Contributors could not be loaded right now.

+ View the contributor graph on GitHub +
+ )} +
+
+ + + ); +} ``` ## app/docs/page.tsx Status: added; +82; −0 ```diff @@ -1,0 +1,82 @@ +import type { Metadata } from "next"; +import { ArrowUpRight } from "lucide-react"; +import { Header } from "@/components/Header"; +import { SiteFooter } from "@/components/SiteFooter"; + +export const metadata: Metadata = { + title: "Docs — Col", + description: "Learn how to use and contribute to Col.", +}; + +const sections = [ + ["overview", "Overview"], + ["find", "Find a library"], + ["request", "Request a library"], + ["issues", "Report issues"], + ["pull-requests", "Open a pull request"], +] as const; + +export default function DocsPage() { + return ( + <> +
+
+
+
+

Documentation

+

Find a library, request what is missing, or contribute an improvement to the directory.

+
+ +
+ + +
+ +

Col organizes UI libraries by category, stack, and use case. It catalogs libraries rather than individual components, and every listing points back to the project’s official source.

+ + + +

Search by name, keyword, category, stack, or use case. The homepage search opens the directory with your query applied, where you can refine the results and save useful entries locally.

+ Browse all libraries + + + +

Search the directory, existing issues, and open pull requests first. If the library is missing, include its official URL, supported stacks, category, use cases, and a short explanation of who it helps.

+ Open a library request + + + +

Keep one outcome per issue. Bug reports should include the failing page or action, reproduction steps, expected and actual behavior, browser details, and supporting screenshots or console errors. Feature requests should lead with the problem and expected outcome.

+
+ Report a bug + Request a feature +
+ + + +

Fork the repository, create a focused branch, and keep unrelated changes out. Library additions belong in data/libraries.ts with a unique kebab-case slug, canonical URL, factual description, and existing taxonomy values where possible.

+ 
{`npm install\nnpm run dev\nnpm run build`}
+

Explain what changed, why it changed, and how you verified it. Include screenshots for visible interface changes.

+ Read the contribution guide + +
+
+
+
+ + + ); +} + +function DocSection({ id, title, children }: { id: string; title: string; children: React.ReactNode }) { + return

{title}

{children}
; +} + +function DocLink({ href, children }: { href: string; children: React.ReactNode }) { + const external = href.startsWith("https://"); + return {children}; +} ``` ## app/globals.css Status: modified; +50; −5 ```diff @@ -34,7 +34,7 @@ } :root { - --col-red: #ff6257; + --col-brand: #0800ff; --col-blue: #69a9ff; --col-green: #3ddc97; } @@ -78,11 +78,55 @@ html.light .hero-registers { opacity: 0.07; filter: invert(1); } html.light .brand-mark { filter: invert(1); } +.hero-accent-text { color: var(--col-brand); } + +html.light .hero-accent-text { color: var(--col-brand); } + +.site-footer-panel { background: #07152f; color: #fff; } +.footer-icon-link { + display: inline-flex; + width: 2.75rem; + height: 2.75rem; + align-items: center; + justify-content: center; + border: 1px solid rgba(255, 255, 255, 0.16); + border-radius: 0.625rem; + background-color: rgba(255, 255, 255, 0.08); + color: #fff; + transition: background-color 160ms ease, border-color 160ms ease; +} +.footer-icon-link:hover { border-color: rgba(255, 255, 255, 0.32); background-color: rgba(255, 255, 255, 0.14); } +.footer-icon-link--primary { border-color: #0800ff; background-color: #0800ff; } +.footer-icon-link--primary:hover { border-color: #241eff; background-color: #241eff; } +.footer-link { display: flex; align-items: center; justify-content: space-between; gap: 1rem; max-width: 20rem; color: rgba(255, 255, 255, 0.72); transition: color 160ms ease; } +.footer-link:hover { color: #fff; } +.site-footer-wordmark { + margin-bottom: -0.16em; + color: transparent; + font-size: clamp(10rem, 32vw, 30rem); + font-weight: 700; + line-height: 0.8; + letter-spacing: -0.04em; + text-align: center; + -webkit-text-stroke: 1px rgba(255, 255, 255, 0.22); +} + +.docs-copy code { + font-family: var(--font-geist-mono), ui-monospace, monospace; + font-size: 0.9em; +} + +.docs-copy pre { + overflow-x: auto; + padding: 1.25rem 0; + border-block: 1px solid rgba(255, 255, 255, 0.12); + color: #fff; +} -.hero-accent-text, -.footer-wordmark { color: var(--col-red); } +html.light .docs-copy pre { -html.light .hero-accent-text, + border-color: rgba(17, 17, 17, 0.14); -html.light .footer-wordmark { color: #c92f36; } + color: #111; +} .gooey-surface { background: #090909; @@ -257,6 +301,7 @@ html.light .library-chip { border-color: rgba(17,17,17,.12); background: rgba(17,17,17,.045); color: rgba(17,17,17,.72); } html.light [class~="text-white"] { color: #111; } +html.light .site-footer-panel [class~="text-white"] { color: #fff; } html.light [class~="bg-black"] { background-color: #fff; } html.light [class~="bg-black/90"] { background-color: rgba(255,255,255,.9); } html.light [class~="border-white/10"], ``` ## app/libraries/page.tsx Status: modified; +5; −3 ```diff @@ -5,9 +5,11 @@ const { q = "" } = await searchParams; return ( -
+ <>
- -
+
+ +
+ ); } ``` ## app/page.tsx Status: modified; +7; −38 ```diff @@ -1,46 +1,15 @@ -import { ArrowUpRight } from "lucide-react"; -import Image from "next/image"; import { LibraryExplorer } from "@/components/LibraryExplorer"; import { Header } from "@/components/Header"; +import { SiteFooter } from "@/components/SiteFooter"; export default function Home() { return ( -
+ <>
- +
+ - +
+ + - -
-
-

- Know one we missed? -

- - Contribute on GitHub - - -
-
-
-
- -
-

Col

-

Sol could not do it himself so we made Col

-
-
-

Built with Next.js, TypeScript & Tailwind CSS

-
-
-
-
); } ``` ## components/Header.tsx Status: modified; +11; −5 ```diff @@ -51,10 +51,16 @@ Col - - Libraries - -