From 0ad33f3e4cf3c7b8a4963065b9e90f932369233a Mon Sep 17 00:00:00 2001 From: Shawn Erquhart Date: Thu, 28 Nov 2024 00:08:19 -0500 Subject: [PATCH] add github dependent live counter --- app/routes/_libraries.index.tsx | 62 +++++++++++++++-------- convex/README.md | 90 --------------------------------- convex/_generated/api.d.ts | 1 + package.json | 2 +- pnpm-lock.yaml | 10 ++-- vercel.json | 2 +- 6 files changed, 48 insertions(+), 119 deletions(-) delete mode 100644 convex/README.md diff --git a/app/routes/_libraries.index.tsx b/app/routes/_libraries.index.tsx index 6c420a59..d4d58b88 100644 --- a/app/routes/_libraries.index.tsx +++ b/app/routes/_libraries.index.tsx @@ -7,7 +7,10 @@ import { } from '@tanstack/react-router' import { useSuspenseQuery } from '@tanstack/react-query' import { convexQuery } from '@convex-dev/react-query' -import { useNpmDownloadCounter } from '@erquhart/convex-oss-stats/react' +import { + useNpmDownloadCounter, + useGithubDependentCounter, +} from '@erquhart/convex-oss-stats/react' import NumberFlow from '@number-flow/react' import { api } from '../../convex/_generated/api' import { Carbon } from '~/components/Carbon' @@ -27,6 +30,7 @@ import bytesImage from '~/images/bytes.svg' // import background from '~/images/background.jpg' import { partners } from '../utils/partners' import { FaCube, FaDownload, FaStar, FaUsers } from 'react-icons/fa' +import { PropsWithChildren } from 'react' export const textColors = [ `text-rose-500`, @@ -78,31 +82,24 @@ async function bytesSignupServerFn({ email }: { email: string }) { const librariesRouteApi = getRouteApi('/_libraries') -const NpmDownloadCounter = ({ - npmPackageOrOrg, -}: { - npmPackageOrOrg: { - downloadCount: number - dayOfWeekAverages: number[] - updatedAt: number - } | null -}) => { - const liveNpmDownloadCount = useNpmDownloadCounter(npmPackageOrOrg) - const npmDownloadCountDummyString = Number( - Array(liveNpmDownloadCount?.toString().length ?? 1) +const StableCounter = ({ value }: { value?: number }) => { + const dummyString = Number( + Array(value?.toString().length ?? 1) .fill('8') .join('') ).toLocaleString() return ( <> - {npmDownloadCountDummyString} + {/* Dummy span to prevent layout shift */} + {dummyString} [0] +}) => { + const liveNpmDownloadCount = useNpmDownloadCounter(npmData) + return +} + +// TODO: Use this once useGithubDependentCounter is fixed upstream +const GitHubDependentCounter = ({ + githubData, +}: { + githubData: Parameters[0] +}) => { + const liveGitHubDependentCount = useGithubDependentCounter(githubData) + console.log('liveGitHubDependentCount', liveGitHubDependentCount) + return +} + const OssStats = () => { - const { data: githubOwner } = useSuspenseQuery( + const { data: github } = useSuspenseQuery( convexQuery(api.stats.getGithubOwner, { owner: 'tanstack', }) ) - const { data: npmOrg } = useSuspenseQuery( + console.log('github', github) + const { data: npm } = useSuspenseQuery( convexQuery(api.stats.getNpmOrg, { name: 'tanstack', }) @@ -132,7 +150,7 @@ const OssStats = () => {
- +
NPM Downloads @@ -143,7 +161,7 @@ const OssStats = () => {
- +
Stars on Github @@ -154,7 +172,7 @@ const OssStats = () => {
- +
Contributors on GitHub @@ -164,8 +182,8 @@ const OssStats = () => {
-
- +
+
Dependents on GitHub diff --git a/convex/README.md b/convex/README.md deleted file mode 100644 index 4d82e136..00000000 --- a/convex/README.md +++ /dev/null @@ -1,90 +0,0 @@ -# Welcome to your Convex functions directory! - -Write your Convex functions here. -See https://docs.convex.dev/functions for more. - -A query function that takes two arguments looks like: - -```ts -// functions.js -import { query } from "./_generated/server"; -import { v } from "convex/values"; - -export const myQueryFunction = query({ - // Validators for arguments. - args: { - first: v.number(), - second: v.string(), - }, - - // Function implementation. - handler: async (ctx, args) => { - // Read the database as many times as you need here. - // See https://docs.convex.dev/database/reading-data. - const documents = await ctx.db.query("tablename").collect(); - - // Arguments passed from the client are properties of the args object. - console.log(args.first, args.second); - - // Write arbitrary JavaScript here: filter, aggregate, build derived data, - // remove non-public properties, or create new objects. - return documents; - }, -}); -``` - -Using this query function in a React component looks like: - -```ts -const data = useQuery(api.functions.myQueryFunction, { - first: 10, - second: "hello", -}); -``` - -A mutation function looks like: - -```ts -// functions.js -import { mutation } from "./_generated/server"; -import { v } from "convex/values"; - -export const myMutationFunction = mutation({ - // Validators for arguments. - args: { - first: v.string(), - second: v.string(), - }, - - // Function implementation. - handler: async (ctx, args) => { - // Insert or modify documents in the database here. - // Mutations can also read from the database like queries. - // See https://docs.convex.dev/database/writing-data. - const message = { body: args.first, author: args.second }; - const id = await ctx.db.insert("messages", message); - - // Optionally, return a value from your mutation. - return await ctx.db.get(id); - }, -}); -``` - -Using this mutation function in a React component looks like: - -```ts -const mutation = useMutation(api.functions.myMutationFunction); -function handleButtonPress() { - // fire and forget, the most common way to use mutations - mutation({ first: "Hello!", second: "me" }); - // OR - // use the result once the mutation has completed - mutation({ first: "Hello!", second: "me" }).then((result) => - console.log(result), - ); -} -``` - -Use the Convex CLI to push your functions to a deployment. See everything -the Convex CLI can do by running `npx convex -h` in your project root -directory. To learn more, launch the docs with `npx convex docs`. diff --git a/convex/_generated/api.d.ts b/convex/_generated/api.d.ts index 7cb458db..79a17e11 100644 --- a/convex/_generated/api.d.ts +++ b/convex/_generated/api.d.ts @@ -87,6 +87,7 @@ export declare const components: { repos: Array<{ contributorCount: number; dependentCount: number; + dependentCountPrevious?: { count: number; updatedAt: number }; name: string; owner: string; starCount: number; diff --git a/package.json b/package.json index c3e5b8ce..95cfc57c 100644 --- a/package.json +++ b/package.json @@ -19,7 +19,7 @@ "@convex-dev/react-query": "0.0.0-alpha.8", "@docsearch/css": "^3.5.2", "@docsearch/react": "^3.5.2", - "@erquhart/convex-oss-stats": "^0.2.0", + "@erquhart/convex-oss-stats": "^0.3.1", "@headlessui/react": "1.7.18", "@number-flow/react": "^0.4.1", "@octokit/graphql": "^7.0.2", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 959916e0..791e9b0b 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -21,8 +21,8 @@ importers: specifier: ^3.5.2 version: 3.6.0(@algolia/client-search@5.14.2)(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(search-insights@2.17.3) '@erquhart/convex-oss-stats': - specifier: ^0.2.0 - version: 0.2.0(convex@1.17.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + specifier: ^0.3.1 + version: 0.3.1(convex@1.17.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1) '@headlessui/react': specifier: 1.7.18 version: 1.7.18(react-dom@18.3.1(react@18.3.1))(react@18.3.1) @@ -1092,8 +1092,8 @@ packages: '@emotion/weak-memoize@0.2.5': resolution: {integrity: sha512-6U71C2Wp7r5XtFtQzYrW5iKFT67OixrSxjI4MptCHzdSVlgabczzqLe0ZSgnub/5Kp4hSbpDB1tMytZY9pwxxA==} - '@erquhart/convex-oss-stats@0.2.0': - resolution: {integrity: sha512-FMX3V3WtKfBNhbE2dz1KoBi/9qsy5rwZP/bfyBmM+MSLh0jVfa14rq4axiGzW+PrmSr6XrasoKCYZl27wz+xmA==} + '@erquhart/convex-oss-stats@0.3.1': + resolution: {integrity: sha512-o8cn90niqm0b9LTDd5i244IO9cA6Li7B2HKIRktdoyWYvAVm+RUPC+AwcyCD3cAtm5jV4ViSwYvwgY7hWOYPow==} peerDependencies: convex: ~1.16.5 || ~1.17.0 react: ^17.0.2 || ^18.0.0 || ^19.0.0-0 @@ -7542,7 +7542,7 @@ snapshots: '@emotion/weak-memoize@0.2.5': {} - '@erquhart/convex-oss-stats@0.2.0(convex@1.17.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': + '@erquhart/convex-oss-stats@0.3.1(convex@1.17.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': dependencies: '@convex-dev/crons': 0.1.5(convex@1.17.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1)) '@octokit/graphql': 8.1.1 diff --git a/vercel.json b/vercel.json index d2c91c15..e003dfd0 100644 --- a/vercel.json +++ b/vercel.json @@ -1,5 +1,5 @@ { "framework": null, - "buildCommand": "npx convex deploy --cmd 'pnpm build'", + "buildCommand": "if [ \"$VERCEL_ENV\" = \"preview\" ]; then npm run build; else npx convex deploy --cmd 'npm run build'; fi", "devCommand": "pnpm dev" }