Skip to content

Commit 87e6911

Browse files
iamjr15iamjr15
committed
Fix repo links, update README with badges, API docs, and self-hosting instructions
1 parent 13b2827 commit 87e6911

File tree

7 files changed

+927
-55
lines changed

7 files changed

+927
-55
lines changed

‎.gitignore‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
11
.idea
22
node_modules
33
.env
4-
.netlify
4+
.netlify
5+
.gemini-clipboard
6+
.DS_Store

‎README.md‎

Lines changed: 235 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,60 +1,273 @@
11
# GitHub Contribution Graph Widget
22

3-
Embed GitHub contribution graphs on any website.
3+
A lightweight, customizable widget to embed your GitHub contribution graph on any website.
44

5-
![Preview](assets/media/thumbnail.png)
5+
[![Live Demo](https://img.shields.io/badge/demo-live-brightgreen)](https://github-contribution-graph.netlify.app)
6+
[![Netlify Status](https://api.netlify.com/api/v1/badges/478cfe35-5d4d-4ec2-939b-b58e4de45ebe/deploy-status)](https://app.netlify.com/sites/github-contribution-graph/deploys)
7+
[![License](https://img.shields.io/badge/license-Apache%202.0-blue)](LICENSE)
68

7-
![HTML5](https://img.shields.io/static/v1?label=&message=HTML5&color=%23E34F26&logo=html5&logoColor=%23fff)
8-
![CSS](https://img.shields.io/static/v1?label=&message=CSS&color=%231572B6&logo=css3&logoColor=%23fff)
9-
![JavaScript](https://img.shields.io/static/v1?label=&message=JavaScript&color=%23F7DF1E&logo=javascript&logoColor=%23000)
10-
![Netlify](https://img.shields.io/static/v1?label=&message=Netlify&color=%2300C7B7&logo=netlify&logoColor=%23fff)
9+
![Preview](assets/media/thumbnail.png)
1110

12-
## Demo
11+
**[Live Demo](https://github-contribution-graph.netlify.app)** | **[GitHub Repo](https://github.com/iamjr15/github-contribution-graph)**
1312

14-
**Live:** https://github-contribution-graph.netlify.app
13+
## Quick Start (Standard)
1514

16-
## Quick Start
15+
Add the following to your HTML file to get the standard GitHub-styled graph:
1716

1817
```html
18+
<!-- 1. Include the styles -->
1919
<link rel="stylesheet" href="https://github-contribution-graph.netlify.app/assets/css/gh.css">
20-
<div id="gh" data-login="YOUR_GITHUB_USERNAME"></div>
20+
21+
<!-- 2. Create the container with your username -->
22+
<div id="gh" data-login="iamjr15"></div>
23+
24+
<!-- 3. Include the script -->
2125
<script src="https://github-contribution-graph.netlify.app/assets/js/gh.js"></script>
2226
```
2327

28+
---
29+
30+
## 🌑 "Void" Minimalist Theme Integration
31+
32+
To replicate the futuristic **Void Minimalist** aesthetic (Black & Monospace) shown in the demo, follow these steps.
33+
34+
### 1. HTML Structure
35+
36+
Wrap the graph container in the following structure to add the grid background, crosshair, and status footer.
37+
38+
```html
39+
<!-- Background Elements -->
40+
<div class="grid-bg"></div>
41+
<div class="crosshair"></div>
42+
43+
<!-- Main Content -->
44+
<div class="main-container">
45+
<h1>Activity Record</h1>
46+
47+
<!-- The Graph Container -->
48+
<div id="gh" data-login="YOUR_USERNAME"></div>
49+
50+
<!-- Status Footer -->
51+
<div class="meta-info">
52+
<div class="meta-item"><div class="status-dot"></div> SYSTEM ONLINE</div>
53+
<div class="meta-item">ID: USER_01</div>
54+
<div class="meta-item">LOC: LOCALHOST</div>
55+
</div>
56+
</div>
57+
```
58+
59+
### 2. CSS Styles
60+
61+
Add this CSS to your stylesheet to apply the dark theme and override the default graph colors.
62+
63+
```css
64+
/* --- Void Theme Variables --- */
65+
:root {
66+
--bg-color: #000000;
67+
--text-primary: #ffffff;
68+
--text-dim: #333333;
69+
70+
/* Override Graph Variables */
71+
--gh-bg-color: #000000 !important;
72+
--gh-text-default-color: #ffffff !important;
73+
--gh-cell-level0-color: #111111 !important;
74+
--gh-border-card-color: #333333 !important;
75+
--gh-font-default-family: 'SF Mono', 'Fira Code', Consolas, monospace !important;
76+
}
77+
78+
/* --- Layout & Backgrounds --- */
79+
body {
80+
background-color: var(--bg-color);
81+
color: var(--text-primary);
82+
font-family: 'SF Mono', 'Fira Code', Consolas, monospace;
83+
display: flex;
84+
justify-content: center;
85+
align-items: center;
86+
min-height: 100vh;
87+
overflow: hidden;
88+
}
89+
90+
.grid-bg {
91+
position: fixed;
92+
top: 0; left: 0; width: 100%; height: 100%;
93+
background-image:
94+
linear-gradient(var(--text-dim) 1px, transparent 1px),
95+
linear-gradient(90deg, var(--text-dim) 1px, transparent 1px);
96+
background-size: 100px 100px;
97+
opacity: 0.1;
98+
pointer-events: none;
99+
z-index: -1;
100+
}
101+
102+
.crosshair {
103+
position: fixed;
104+
top: 50%; left: 50%;
105+
transform: translate(-50%, -50%);
106+
width: 20px; height: 20px;
107+
pointer-events: none;
108+
z-index: -1;
109+
}
110+
.crosshair::before, .crosshair::after {
111+
content: ''; position: absolute; background: var(--text-dim);
112+
}
113+
.crosshair::before { top: 9px; left: 0; width: 100%; height: 2px; }
114+
.crosshair::after { top: 0; left: 9px; width: 2px; height: 100%; }
115+
116+
/* --- Graph Container Styling --- */
117+
.main-container {
118+
display: flex;
119+
flex-direction: column;
120+
align-items: center;
121+
gap: 4rem;
122+
}
123+
124+
#gh {
125+
padding: 2rem !important;
126+
border: 1px solid #1a1a1a !important;
127+
position: relative;
128+
transition: all 0.5s ease;
129+
}
130+
131+
/* Corner Brackets */
132+
#gh::before, #gh::after {
133+
content: ''; position: absolute; width: 10px; height: 10px;
134+
border: 1px solid #fff; opacity: 0.5; transition: all 0.3s ease;
135+
}
136+
#gh::before { top: -1px; left: -1px; border-right: none; border-bottom: none; }
137+
#gh::after { bottom: -1px; right: -1px; border-left: none; border-top: none; }
138+
139+
#gh:hover {
140+
border-color: #333 !important;
141+
box-shadow: 0 0 50px rgba(255, 255, 255, 0.05);
142+
}
143+
144+
/* --- Footer --- */
145+
.meta-info {
146+
font-size: 0.7rem; color: #333; display: flex; gap: 2rem;
147+
}
148+
.status-dot {
149+
width: 6px; height: 6px; background-color: #00ff00;
150+
border-radius: 50%; display: inline-block; margin-right: 8px;
151+
box-shadow: 0 0 10px #00ff00;
152+
}
153+
```
154+
155+
---
156+
157+
## Framework Integration
158+
159+
### React
160+
161+
The widget modifies the DOM directly, so you must use `useEffect` to initialize it after the component mounts.
162+
163+
```jsx
164+
import { useEffect } from 'react';
165+
166+
// 1. Import the CSS (or copy the contents to your CSS file)
167+
// import './gh.css';
168+
169+
const ContributionGraph = ({ username }) => {
170+
useEffect(() => {
171+
// 2. Load the script dynamically
172+
const script = document.createElement('script');
173+
script.src = "https://github-contribution-graph.netlify.app/assets/js/gh.js";
174+
script.async = true;
175+
document.body.appendChild(script);
176+
177+
return () => {
178+
document.body.removeChild(script);
179+
}
180+
}, []);
181+
182+
return (
183+
<div className="main-container">
184+
{/* Your wrapper elements... */}
185+
<div id="gh" data-login={username}></div>
186+
</div>
187+
);
188+
};
189+
190+
export default ContributionGraph;
191+
```
192+
193+
### Vue 3
194+
195+
```vue
196+
<template>
197+
<div class="main-container">
198+
<div id="gh" :data-login="username"></div>
199+
</div>
200+
</template>
201+
202+
<script setup>
203+
import { onMounted } from 'vue';
204+
205+
const props = defineProps({
206+
username: String
207+
});
208+
209+
onMounted(() => {
210+
const script = document.createElement('script');
211+
script.src = "https://github-contribution-graph.netlify.app/assets/js/gh.js";
212+
script.async = true;
213+
document.body.appendChild(script);
214+
});
215+
</script>
216+
```
217+
218+
## API
219+
220+
The widget uses a serverless API to fetch contribution data:
221+
222+
```
223+
GET https://github-contribution-graph.netlify.app/api/ghcg/fetch-data?login={username}
224+
```
225+
226+
**Response:**
227+
```json
228+
{
229+
"user": {
230+
"avatarUrl": "https://avatars.githubusercontent.com/...",
231+
"contributionsCollection": {
232+
"contributionCalendar": {
233+
"totalContributions": 1234,
234+
"months": [...],
235+
"weeks": [...]
236+
}
237+
}
238+
}
239+
}
240+
```
241+
242+
---
243+
24244
## Self-Hosting
25245

26246
### Prerequisites
27247

28248
- Node.js 18+
29249
- GitHub Personal Access Token ([create one](https://github.com/settings/tokens) with `read:user` scope)
30-
- Netlify account
250+
- Netlify account (free tier works)
31251

32-
### Deploy
252+
### Deploy Your Own
33253

34254
1. Fork this repository
35-
2. Connect to Netlify
255+
2. Connect to [Netlify](https://app.netlify.com)
36256
3. Add environment variable: `GITHUB_TOKEN` = your PAT
37257
4. Deploy
38258

39259
### Local Development
40260

41261
```bash
42262
npm install
43-
npm install -g netlify-cli
44263
echo "GITHUB_TOKEN=your_token" > .env
45264
netlify dev
46265
```
47266

48267
Open http://localhost:8888
49268

50-
## API
51-
52-
```
53-
GET /api/ghcg/fetch-data?login={username}
54-
```
55-
56-
Returns GitHub contribution calendar data for the specified user.
269+
---
57270

58271
## License
59272

60-
Apache 2.0
273+
Apache 2.0

‎assets/css/gh.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -173,4 +173,4 @@
173173
.ghCalendarCardFooterColors div {
174174
width: 10px;
175175
height: 10px;
176-
}
176+
}

0 commit comments

Comments
 (0)