Use fresh data w/ Convex for open source stats

[erquhart]

Screen.Recording.2024-11-26.at.11.55.18.AM.mov

This PR makes the OSS stats data as live as it can get:

• GitHub stars: 100% live
• Npm downloads: source data is only updated every 24h, so we use an expected amount based on available past data and run an animated counter toward that number between updates
• GitHub contributors: this data is guaranteed to be hours stale in GitHub's own api docs, and imo doesn't change enough to warrant faking between updates
• GitHub dependencies: this can only be scraped from the website. Because there's no api based historical data we're not animating change here, but we could.

Everything is updated to latest available hourly.

Primary changes

• Adds Convex to the project so Convex data is generally accessible to the app
• Because OSS data like this is not a unique requirement for tanstack.com, the logic and sync stuff is all in a new OSS Stats Convex component (so it's a dependency instead of being inline in the repo)
• Note: component is temporarily published on my personal npm org

Ancillary changes

• Changed library config files from using satisfies to explicit types to address errors in the libraries index component.

Required steps

• A maintainer should run pnpm dev:convex locally and create a new Convex project (you'll be prompted)
• Create a GitHub personal access token (only needs read for public repos) and add to Convex development and production deployments as GITHUB_ACCESS_TOKEN
• Create a webhook on the TanStack GitHub org: https://github.com/organizations/tanstack/settings/hooks/new
  • Get the HTTP Actions URL from your production Convex deployment: https://dashboard.convex.dev > Production project deployment > Settings > URL & Deploy Key > HTTP Actions URL
  • Payload URL: <http-actions-url>/events/github
  • Content type: application/json
  • Generate a secret, add in webhook creation form and in Convex production env vars as GITHUB_WEBHOOK_SECRET
  • Which events? > Select individual > Stars only
• The GITHUB_ACCESS_TOKEN and GITHUB_WEBHOOK_SECRET env vars should be added to both development and production Convex deployments in the dashboard
• To kick off the initial sync and begin running hourly, from the tanstack.com directory run:
  • npx convex run stats:sync
  • npx convex run stats:sync --prod
• Do step 4 in the docs for deploying to Vercel (this PR updates vercel.json so prior steps can be skipped): https://docs.convex.dev/production/hosting/vercel
• There is a hardcoded url to a Convex production instance in app/router.tsx - replace this with the url to the production instance that was just created. Hardcoding this allows local development to work without requiring a convex dev instance for the developer. They'll only need one if they're developing in the convex directory.

[vercel]

@erquhart is attempting to deploy a commit to the Tanstack Team on Vercel.

A member of the Team first needs to authorize it.

[netlify]

✅ Deploy Preview for tanstack ready!

Name	Link
🔨 Latest commit	ff0705f
🔍 Latest deploy log	https://app.netlify.com/sites/tanstack/deploys/6758a55c8c40d000083973bd
😎 Deploy Preview	https://deploy-preview-309--tanstack.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
Lighthouse	1 paths audited Performance: 55 (🔴 down 17 from production) Accessibility: 96 (🟢 up 1 from production) Best Practices: 83 (🔴 down 9 from production) SEO: 84 (no change from production) PWA: 60 (no change from production) View the detailed breakdown and full score reports

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[thomasballinger]

Pretty cool!

[thomasballinger]

Looks good to me! Looking forward to seeing this on the site

[thomasballinger]

I think x margins should match the boxes down below

[erquhart]

@thomasballinger the current version doesn't do this, I think partly because the size of the numbers impacts the width, which changes responsively. Can definitely do if desired! Just pointing out that it's pre-existing.

[thomasballinger]

ah gotcha!

[tannerlinsley]

We're using netlify now. Does that change anything?