svelte-github-calendar 0.1.0-alpha.1 → 0.1.0-alpha.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +58 -37
- package/dist/GitHubCalendar.svelte +198 -193
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,58 +1,79 @@
|
|
|
1
|
-
#
|
|
1
|
+
# svelte-github-calendar
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
A Svelte wrapper of the [github-calendar](https://github.com/Bloggify/github-calendar) library to displays GitHub contribution graphs in your Svelte applications.
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
## Installation
|
|
6
6
|
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
If you're seeing this, you've probably already done this step. Congrats!
|
|
10
|
-
|
|
11
|
-
```sh
|
|
12
|
-
# create a new project in the current directory
|
|
13
|
-
npx sv create
|
|
14
|
-
|
|
15
|
-
# create a new project in my-app
|
|
16
|
-
npx sv create my-app
|
|
7
|
+
```bash
|
|
8
|
+
npm install svelte-github-calendar
|
|
17
9
|
```
|
|
18
10
|
|
|
19
|
-
##
|
|
11
|
+
## Usage
|
|
20
12
|
|
|
21
|
-
|
|
13
|
+
### Basic Example
|
|
22
14
|
|
|
23
|
-
```
|
|
24
|
-
|
|
15
|
+
```svelte
|
|
16
|
+
<script>
|
|
17
|
+
import { GithubCalendar } from 'svelte-github-calendar';
|
|
18
|
+
</script>
|
|
25
19
|
|
|
26
|
-
|
|
27
|
-
npm run dev -- --open
|
|
20
|
+
<GithubCalendar username="yourusername" />
|
|
28
21
|
```
|
|
29
22
|
|
|
30
|
-
|
|
23
|
+
### Advanced Example
|
|
24
|
+
|
|
25
|
+
```svelte
|
|
26
|
+
<script>
|
|
27
|
+
import { GithubCalendar } from 'svelte-github-calendar';
|
|
28
|
+
</script>
|
|
29
|
+
|
|
30
|
+
<GithubCalendar
|
|
31
|
+
username="yourusername"
|
|
32
|
+
summary_text="Summary of {name}'s GitHub activity"
|
|
33
|
+
global_stats={true}
|
|
34
|
+
responsive={true}
|
|
35
|
+
tooltips={true}
|
|
36
|
+
cache={60}
|
|
37
|
+
class="my-custom-class"
|
|
38
|
+
/>
|
|
39
|
+
```
|
|
31
40
|
|
|
32
|
-
##
|
|
41
|
+
## Props
|
|
33
42
|
|
|
34
|
-
|
|
43
|
+
| Prop | Type | Default | Description |
|
|
44
|
+
| -------------- | ---------- | ------------ | ---------------------------------------- |
|
|
45
|
+
| `username` | `string` | **Required** | GitHub username to display calendar for |
|
|
46
|
+
| `summary_text` | `string` | `undefined` | Custom summary text template. |
|
|
47
|
+
| `proxy` | `function` | `undefined` | Custom proxy function for API requests |
|
|
48
|
+
| `global_stats` | `boolean` | `undefined` | Whether to show global statistics |
|
|
49
|
+
| `responsive` | `boolean` | `undefined` | Enable responsive design |
|
|
50
|
+
| `tooltips` | `boolean` | `undefined` | Enable hover tooltips |
|
|
51
|
+
| `cache` | `number` | `undefined` | Cache duration in seconds |
|
|
52
|
+
| `class` | `string` | `''` | Additional CSS classes for the container |
|
|
35
53
|
|
|
36
|
-
|
|
37
|
-
npm pack
|
|
38
|
-
```
|
|
54
|
+
You can read more about the props in the [original documentation](https://github.com/Bloggify/github-calendar).
|
|
39
55
|
|
|
40
|
-
|
|
56
|
+
## Credits
|
|
41
57
|
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
```
|
|
58
|
+
- Svelte wrapper of [github-calendar](https://github.com/Bloggify/github-calendar) by Bloggify
|
|
59
|
+
- Designed specifically for Svelte applications
|
|
45
60
|
|
|
46
|
-
|
|
61
|
+
## License
|
|
47
62
|
|
|
48
|
-
|
|
63
|
+
This library is licensed under the MIT License. See the [LICENSE](LICENSE) file for details.
|
|
49
64
|
|
|
50
|
-
##
|
|
65
|
+
## Contributing
|
|
51
66
|
|
|
52
|
-
|
|
67
|
+
Contributions are welcome! Feel free to:
|
|
53
68
|
|
|
54
|
-
|
|
69
|
+
- Report bugs
|
|
70
|
+
- Suggest new features
|
|
71
|
+
- Submit pull requests
|
|
72
|
+
- Improve documentation
|
|
55
73
|
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
74
|
+
## Troubleshooting
|
|
75
|
+
|
|
76
|
+
### Calendar not loading
|
|
77
|
+
|
|
78
|
+
- Ensure the username is valid and public
|
|
79
|
+
- Verify network connectivity
|
|
@@ -22,9 +22,7 @@
|
|
|
22
22
|
});
|
|
23
23
|
</script>
|
|
24
24
|
|
|
25
|
-
<div class={`calendar
|
|
26
|
-
<div class="calendar"></div>
|
|
27
|
-
</div>
|
|
25
|
+
<div class={`calendar ${className}`}></div>
|
|
28
26
|
|
|
29
27
|
<style global>
|
|
30
28
|
:root {
|
|
@@ -35,235 +33,242 @@
|
|
|
35
33
|
--color-calendar-graph-day-L4-bg: #0a4208 !important;
|
|
36
34
|
}
|
|
37
35
|
:global {
|
|
38
|
-
.
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
}
|
|
36
|
+
.ContributionCalendar-day[data-level='0'] {
|
|
37
|
+
background-color: var(--color-calendar-graph-day-bg) !important;
|
|
38
|
+
}
|
|
42
39
|
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
40
|
+
.ContributionCalendar-day[data-level='1'] {
|
|
41
|
+
background-color: var(--color-calendar-graph-day-L1-bg) !important;
|
|
42
|
+
}
|
|
46
43
|
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
44
|
+
.ContributionCalendar-day[data-level='2'] {
|
|
45
|
+
background-color: var(--color-calendar-graph-day-L2-bg) !important;
|
|
46
|
+
}
|
|
50
47
|
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
48
|
+
.ContributionCalendar-day[data-level='3'] {
|
|
49
|
+
background-color: var(--color-calendar-graph-day-L3-bg) !important;
|
|
50
|
+
}
|
|
54
51
|
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
52
|
+
.ContributionCalendar-day[data-level='4'] {
|
|
53
|
+
background-color: var(--color-calendar-graph-day-L4-bg) !important;
|
|
54
|
+
}
|
|
58
55
|
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
56
|
+
table.ContributionCalendar-grid {
|
|
57
|
+
margin-bottom: 0pt !important;
|
|
58
|
+
border-collapse: separate !important;
|
|
59
|
+
}
|
|
62
60
|
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
61
|
+
table.ContributionCalendar-grid td {
|
|
62
|
+
padding: 4pt !important;
|
|
63
|
+
}
|
|
66
64
|
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
65
|
+
table.ContributionCalendar-grid td span.sr-only {
|
|
66
|
+
display: none !important;
|
|
67
|
+
}
|
|
70
68
|
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
69
|
+
td.ContributionCalendar-label span[aria-hidden='true'] {
|
|
70
|
+
font-size: 8pt !important;
|
|
71
|
+
left: -1pt !important;
|
|
72
|
+
}
|
|
75
73
|
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
74
|
+
tool-tip {
|
|
75
|
+
display: none !important;
|
|
76
|
+
}
|
|
79
77
|
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
78
|
+
.calendar .width-full > .float-left {
|
|
79
|
+
display: none !important;
|
|
80
|
+
}
|
|
83
81
|
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
82
|
+
.calendar {
|
|
83
|
+
font-family: Helvetica, arial !important;
|
|
84
|
+
border: 1px solid #dddddd !important;
|
|
85
|
+
border-radius: 3px !important;
|
|
86
|
+
min-height: 243px !important;
|
|
87
|
+
text-align: center !important;
|
|
88
|
+
margin: 0 auto !important;
|
|
89
|
+
}
|
|
92
90
|
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
91
|
+
.calendar-graph text.wday,
|
|
92
|
+
.calendar-graph text.month {
|
|
93
|
+
font-size: 10px !important;
|
|
94
|
+
fill: #aaa !important;
|
|
95
|
+
}
|
|
98
96
|
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
97
|
+
div.px-md-5 {
|
|
98
|
+
height: 2rem !important;
|
|
99
|
+
}
|
|
102
100
|
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
101
|
+
div.float-right {
|
|
102
|
+
text-align: right !important;
|
|
103
|
+
padding: 0 14px 10px 0 !important;
|
|
104
|
+
display: inline-block !important;
|
|
105
|
+
float: right !important;
|
|
106
|
+
}
|
|
109
107
|
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
108
|
+
div.float-right div {
|
|
109
|
+
display: inline-block !important;
|
|
110
|
+
list-style: none !important;
|
|
111
|
+
margin: 0 5px !important;
|
|
112
|
+
position: relative !important;
|
|
113
|
+
bottom: -1px !important;
|
|
114
|
+
padding: 0 !important;
|
|
115
|
+
}
|
|
118
116
|
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
117
|
+
div.float-right span.sr-only {
|
|
118
|
+
display: none !important;
|
|
119
|
+
}
|
|
122
120
|
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
121
|
+
.contrib-legend .legend li {
|
|
122
|
+
display: inline-block !important;
|
|
123
|
+
width: 10px !important;
|
|
124
|
+
height: 10px !important;
|
|
125
|
+
}
|
|
128
126
|
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
127
|
+
.text-small {
|
|
128
|
+
font-size: 12px !important;
|
|
129
|
+
color: #767676 !important;
|
|
130
|
+
}
|
|
133
131
|
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
132
|
+
.calendar-graph {
|
|
133
|
+
padding: 5px 0 0 !important;
|
|
134
|
+
text-align: center !important;
|
|
135
|
+
}
|
|
138
136
|
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
137
|
+
.contrib-column {
|
|
138
|
+
padding: 15px 0 !important;
|
|
139
|
+
text-align: center !important;
|
|
140
|
+
border-left: 1px solid #ddd !important;
|
|
141
|
+
border-top: 1px solid #ddd !important;
|
|
142
|
+
font-size: 11px !important;
|
|
143
|
+
}
|
|
146
144
|
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
145
|
+
.contrib-column span {
|
|
146
|
+
color: #000 !important;
|
|
147
|
+
}
|
|
150
148
|
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
width: 1% !important;
|
|
155
|
-
padding-right: 10px !important;
|
|
156
|
-
padding-left: 10px !important;
|
|
157
|
-
vertical-align: top !important;
|
|
158
|
-
}
|
|
149
|
+
.contrib-column-first {
|
|
150
|
+
border-left: 0 !important;
|
|
151
|
+
}
|
|
159
152
|
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
153
|
+
.table-column {
|
|
154
|
+
box-sizing: border-box !important;
|
|
155
|
+
display: table-cell !important;
|
|
156
|
+
width: 1% !important;
|
|
157
|
+
padding-right: 10px !important;
|
|
158
|
+
padding-left: 10px !important;
|
|
159
|
+
vertical-align: top !important;
|
|
160
|
+
}
|
|
167
161
|
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
162
|
+
.contrib-number {
|
|
163
|
+
font-weight: 300 !important;
|
|
164
|
+
line-height: 1.3em !important;
|
|
165
|
+
font-size: 24px !important;
|
|
166
|
+
display: block !important;
|
|
167
|
+
color: #333 !important;
|
|
168
|
+
}
|
|
173
169
|
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
170
|
+
.calendar img.spinner {
|
|
171
|
+
width: 70px !important;
|
|
172
|
+
margin-top: 50px !important;
|
|
173
|
+
min-height: 70px !important;
|
|
174
|
+
}
|
|
179
175
|
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
176
|
+
.monospace {
|
|
177
|
+
text-align: center !important;
|
|
178
|
+
color: #000 !important;
|
|
179
|
+
font-family: monospace !important;
|
|
180
|
+
}
|
|
184
181
|
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
width: 100% !important;
|
|
190
|
-
box-sizing: border-box !important;
|
|
191
|
-
height: 26px !important;
|
|
192
|
-
}
|
|
182
|
+
.monospace a {
|
|
183
|
+
color: #1d75ab !important;
|
|
184
|
+
text-decoration: none !important;
|
|
185
|
+
}
|
|
193
186
|
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
187
|
+
.contrib-footer {
|
|
188
|
+
font-size: 11px !important;
|
|
189
|
+
padding: 0 10px 12px !important;
|
|
190
|
+
text-align: left !important;
|
|
191
|
+
width: 100% !important;
|
|
192
|
+
box-sizing: border-box !important;
|
|
193
|
+
height: 26px !important;
|
|
194
|
+
}
|
|
199
195
|
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
}
|
|
196
|
+
.calendar .text-muted {
|
|
197
|
+
color: inherit !important;
|
|
198
|
+
}
|
|
204
199
|
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
200
|
+
.left.text-muted {
|
|
201
|
+
float: left !important;
|
|
202
|
+
margin-left: 9px !important;
|
|
203
|
+
color: #767676 !important;
|
|
204
|
+
}
|
|
209
205
|
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
206
|
+
.left.text-muted a {
|
|
207
|
+
color: #4078c0 !important;
|
|
208
|
+
text-decoration: none !important;
|
|
209
|
+
}
|
|
213
210
|
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
211
|
+
.left.text-muted a:hover,
|
|
212
|
+
.monospace a:hover {
|
|
213
|
+
text-decoration: underline !important;
|
|
214
|
+
}
|
|
217
215
|
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
216
|
+
h2.f4.text-normal.mb-3 {
|
|
217
|
+
display: none !important;
|
|
218
|
+
}
|
|
221
219
|
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
z-index: 99999 !important;
|
|
226
|
-
padding: 10px !important;
|
|
227
|
-
font-size: 12px !important;
|
|
228
|
-
color: #959da5 !important;
|
|
229
|
-
text-align: center !important;
|
|
230
|
-
background: rgba(0, 0, 0, 0.85) !important;
|
|
231
|
-
border-radius: 3px !important;
|
|
232
|
-
display: none !important;
|
|
233
|
-
pointer-events: none !important;
|
|
234
|
-
}
|
|
220
|
+
.float-left.text-gray {
|
|
221
|
+
float: left !important;
|
|
222
|
+
}
|
|
235
223
|
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
224
|
+
#user-activity-overview {
|
|
225
|
+
display: none !important;
|
|
226
|
+
}
|
|
239
227
|
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
228
|
+
.day-tooltip {
|
|
229
|
+
white-space: nowrap !important;
|
|
230
|
+
position: absolute !important;
|
|
231
|
+
z-index: 99999 !important;
|
|
232
|
+
padding: 10px !important;
|
|
233
|
+
font-size: 12px !important;
|
|
234
|
+
color: #959da5 !important;
|
|
235
|
+
text-align: center !important;
|
|
236
|
+
background: rgba(0, 0, 0, 0.85) !important;
|
|
237
|
+
border-radius: 3px !important;
|
|
238
|
+
display: none !important;
|
|
239
|
+
pointer-events: none !important;
|
|
240
|
+
}
|
|
243
241
|
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
left: 50% !important;
|
|
248
|
-
width: 5px !important;
|
|
249
|
-
height: 5px !important;
|
|
250
|
-
box-sizing: border-box !important;
|
|
251
|
-
margin: 0 0 0 -5px !important;
|
|
252
|
-
content: ' ' !important;
|
|
253
|
-
border: 5px solid transparent !important;
|
|
254
|
-
border-top-color: rgba(0, 0, 0, 0.85);
|
|
255
|
-
}
|
|
242
|
+
.day-tooltip strong {
|
|
243
|
+
color: #dfe2e5 !important;
|
|
244
|
+
}
|
|
256
245
|
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
246
|
+
.day-tooltip.is-visible {
|
|
247
|
+
display: block !important;
|
|
248
|
+
}
|
|
249
|
+
|
|
250
|
+
.day-tooltip:after {
|
|
251
|
+
position: absolute !important;
|
|
252
|
+
bottom: -10px !important;
|
|
253
|
+
left: 50% !important;
|
|
254
|
+
width: 5px !important;
|
|
255
|
+
height: 5px !important;
|
|
256
|
+
box-sizing: border-box !important;
|
|
257
|
+
margin: 0 0 0 -5px !important;
|
|
258
|
+
content: ' ' !important;
|
|
259
|
+
border: 5px solid transparent !important;
|
|
260
|
+
border-top-color: rgba(0, 0, 0, 0.85);
|
|
261
|
+
}
|
|
261
262
|
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
|
|
263
|
+
text.ContributionCalendar-label {
|
|
264
|
+
fill: #ccc !important;
|
|
265
|
+
font-size: 11px !important;
|
|
266
|
+
}
|
|
267
|
+
|
|
268
|
+
@media screen and (max-width: 768px) {
|
|
269
|
+
.table-column {
|
|
270
|
+
display: block !important;
|
|
271
|
+
width: 100% !important;
|
|
267
272
|
}
|
|
268
273
|
}
|
|
269
274
|
}
|