Paillat-dev/svelte-github-calendar
1
0
Fork 0
mirror of https://github.com/Paillat-dev/svelte-github-calendar.git synced 2026-01-02 01:06:20 +00:00
Code Issues Packages Projects Releases Wiki Activity

📖 Update README.md to reflect library name and usage examples for svelte-github-calendar

Browse Source
This commit is contained in:
Paillat
2025-08-28 17:49:29 +02:00
parent a15c2f12a0
commit db1bc9803d
1 changed files with 56 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

93
README.md
View File

@@ -1,58 +1,77 @@
# Svelte library # svelte-github-calendar
Everything you need to build a Svelte library, powered by [`sv`](https://npmjs.com/package/sv). A Svelte wrapper of the [github-calendar](https://github.com/Bloggify/github-calendar) library to displays GitHub contribution graphs in your Svelte applications.
Read more about creating a library [in the docs](https://svelte.dev/docs/kit/packaging). ## Installation
## Creating a project ```bash
npm install svelte-github-calendar
If you're seeing this, you've probably already done this step. Congrats!
```sh
# create a new project in the current directory
npx sv create
# create a new project in my-app
npx sv create my-app
``` ```
## Developing ## Usage
Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server: ### Basic Example
```sh ```svelte
npm run dev <script>
import { GithubCalendar } from 'svelte-github-calendar';
</script>
# or start the server and open the app in a new browser tab <GithubCalendar username="yourusername" />
npm run dev -- --open
``` ```
Everything inside `src/lib` is part of your library, everything inside `src/routes` can be used as a showcase or preview app. ### Advanced Example
## Building ```svelte
<script>
import { GithubCalendar } from 'svelte-github-calendar';
</script>
To build your library: <GithubCalendar
username="yourusername"
```sh summary_text="Summary of {name}'s GitHub activity"
npm pack global_stats={true}
responsive={true}
tooltips={true}
cache={60}
class="my-custom-class"
/>
``` ```
To create a production version of your showcase app: ## Props
```sh | Prop | Type | Default | Description |
npm run build |----------------|------------|--------------|------------------------------------------|
``` | `username` | `string` | **Required** | GitHub username to display calendar for |
| `summary_text` | `string` | `undefined` | Custom summary text template. |
| `proxy` | `function` | `undefined` | Custom proxy function for API requests |
| `global_stats` | `boolean` | `undefined` | Whether to show global statistics |
| `responsive` | `boolean` | `undefined` | Enable responsive design |
| `tooltips` | `boolean` | `undefined` | Enable hover tooltips |
| `cache` | `number` | `undefined` | Cache duration in seconds |
| `class` | `string` | `''` | Additional CSS classes for the container |
You can preview the production build with `npm run preview`. You can read more about the props in the [original documentation](https://github.com/Bloggify/github-calendar).
> To deploy your app, you may need to install an [adapter](https://svelte.dev/docs/kit/adapters) for your target environment. ## Credits
## Publishing - Svelte wrapper of [github-calendar](https://github.com/Bloggify/github-calendar) by Bloggify
- Designed specifically for Svelte applications
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/)). ## License
To publish your library to [npm](https://www.npmjs.com): This library is licensed under the MIT License. See the [LICENSE](LICENSE) file for details.
```sh ## Contributing
npm publish
``` Contributions are welcome! Feel free to:
- Report bugs
- Suggest new features
- Submit pull requests
- Improve documentation
## Troubleshooting
### Calendar not loading
- Ensure the username is valid and public
- Verify network connectivity