https://github.com/hacksore/next-og-github-graphql
https://github.com/hacksore/next-og-github-graphql
Last synced: about 1 year ago
JSON representation
- Host: GitHub
- URL: https://github.com/hacksore/next-og-github-graphql
- Owner: Hacksore
- Created: 2023-08-02T18:06:23.000Z (almost 3 years ago)
- Default Branch: main
- Last Pushed: 2025-05-04T20:16:39.000Z (about 1 year ago)
- Last Synced: 2025-05-04T20:19:37.898Z (about 1 year ago)
- Language: TypeScript
- Homepage: https://next-og-github-graphql-web.vercel.app
- Size: 593 KB
- Stars: 1
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# next-og-github-graphql
You can make your og image use your github contribution data
### Codegen
you must setup a `.env` file to have `GITHUB_TOKEN` that has access to read your data.
Then run `yarn codegen` and it will generate the schema and update.
### Usage
Now you have a fully typeafe call 😎
```ts
const response = await getUserContributions({ user: "Hacksore" });
```
### Future Vision 🚀
This project is currently a Proof of Concept (PoC), but the goal is to transform it into a reusable library that makes it super easy to add GitHub contribution graphs to your OpenGraph images.
The vision is to create a simple component that you can just drop into your `opengraph-image.tsx`:
```tsx
import { GithubGraph } from 'next-og-github-graphql';
export default function Image() {
return (
);
}
```
This would abstract away all the complexity of:
- Fetching GitHub contribution data
- Handling the GraphQL queries
- Managing the layout and styling
- Generating the image
If you're interested in helping make this vision a reality, contributions are welcome! 🎉