svelte-github-calendar 0.1.0-alpha.1 → 0.1.0-alpha.3

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.
Files changed (3) hide show
  1. package/README.md +58 -37
  2. package/dist/GitHubCalendar.svelte +9 -0
  3. package/package.json +1 -1
package/README.md CHANGED
@@ -1,58 +1,79 @@
1
- # Svelte library
1
+ # svelte-github-calendar
2
2
 
3
- Everything you need to build a Svelte library, powered by [`sv`](https://npmjs.com/package/sv).
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
- Read more about creating a library [in the docs](https://svelte.dev/docs/kit/packaging).
5
+ ## Installation
6
6
 
7
- ## Creating a project
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
- ## Developing
11
+ ## Usage
20
12
 
21
- Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
13
+ ### Basic Example
22
14
 
23
- ```sh
24
- npm run dev
15
+ ```svelte
16
+ <script>
17
+ import { GithubCalendar } from 'svelte-github-calendar';
18
+ </script>
25
19
 
26
- # or start the server and open the app in a new browser tab
27
- npm run dev -- --open
20
+ <GithubCalendar username="yourusername" />
28
21
  ```
29
22
 
30
- Everything inside `src/lib` is part of your library, everything inside `src/routes` can be used as a showcase or preview app.
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
- ## Building
41
+ ## Props
33
42
 
34
- To build your library:
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
- ```sh
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
- To create a production version of your showcase app:
56
+ ## Credits
41
57
 
42
- ```sh
43
- npm run build
44
- ```
58
+ - Svelte wrapper of [github-calendar](https://github.com/Bloggify/github-calendar) by Bloggify
59
+ - Designed specifically for Svelte applications
45
60
 
46
- You can preview the production build with `npm run preview`.
61
+ ## License
47
62
 
48
- > To deploy your app, you may need to install an [adapter](https://svelte.dev/docs/kit/adapters) for your target environment.
63
+ This library is licensed under the MIT License. See the [LICENSE](LICENSE) file for details.
49
64
 
50
- ## Publishing
65
+ ## Contributing
51
66
 
52
- Go into the `package.json` and give your package the desired name through the `"name"` option. Also consider adding a `"license"` field and point it to a `LICENSE` file which you can create from a template (one popular option is the [MIT license](https://opensource.org/license/mit/)).
67
+ Contributions are welcome! Feel free to:
53
68
 
54
- To publish your library to [npm](https://www.npmjs.com):
69
+ - Report bugs
70
+ - Suggest new features
71
+ - Submit pull requests
72
+ - Improve documentation
55
73
 
56
- ```sh
57
- npm publish
58
- ```
74
+ ## Troubleshooting
75
+
76
+ ### Calendar not loading
77
+
78
+ - Ensure the username is valid and public
79
+ - Verify network connectivity
package/dist/GitHubCalendar.svelte CHANGED
@@ -58,6 +58,7 @@
58
58
 
59
59
  table.ContributionCalendar-grid {
60
60
  margin-bottom: 0pt !important;
61
+ border-collapse: separate !important;
61
62
  }
62
63
 
63
64
  table.ContributionCalendar-grid td {
@@ -144,6 +145,10 @@
144
145
  font-size: 11px !important;
145
146
  }
146
147
 
148
+ .contrib-column span {
149
+ color: #000 !important;
150
+ }
151
+
147
152
  .contrib-column-first {
148
153
  border-left: 0 !important;
149
154
  }
@@ -191,6 +196,10 @@
191
196
  height: 26px !important;
192
197
  }
193
198
 
199
+ .calendar .text-muted {
200
+ color: inherit !important;
201
+ }
202
+
194
203
  .left.text-muted {
195
204
  float: left !important;
196
205
  margin-left: 9px !important;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "svelte-github-calendar",
3
- "version": "0.1.0-alpha.1",
3
+ "version": "0.1.0-alpha.3",
4
4
  "license": "MIT",
5
5
  "repository": {
6
6
  "url": "https://github.com/Paillat-dev/svelte-github-calendar"