Update dependency globals to v17

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

.github/workflows/publish.yaml

@@ -17,12 +17,12 @@ jobs:
       - name: Setup pnpm
         uses: pnpm/action-setup@v4
         with:
-          version: 9
+          version: 10
 
       - name: Setup Node.js
         uses: actions/setup-node@v4
         with:
-          node-version: '20'
+          node-version: '24'
           cache: 'pnpm'
           registry-url: 'https://registry.npmjs.org'
 
@@ -36,6 +36,15 @@ jobs:
           echo "version=$VERSION" >> $GITHUB_OUTPUT
           echo "Publishing version: $VERSION"
 
+          if [[ $VERSION =~ - ]]; then
+            TAG=$(echo $VERSION | sed -E 's/.*-([^.]+).*/\1/')
+            echo "tag=$TAG" >> $GITHUB_OUTPUT
+            echo "Prerelease detected, using tag: $TAG"
+          else
+            echo "tag=latest" >> $GITHUB_OUTPUT
+            echo "Stable release, using tag: latest"
+          fi
+
       - name: Update package.json version
         run: |
           pnpm version ${{ steps.version.outputs.version }} --no-git-tag-version
@@ -43,12 +52,5 @@ jobs:
       - name: Build package
         run: pnpm build
 
-      - name: Set publishing auth config
-        run: pnpm config set '//registry.npmjs.org/:_authToken' "${NODE_AUTH_TOKEN}"
-        env:
-          NODE_AUTH_TOKEN: ${{secrets.NPM_TOKEN}}
-
       - name: Publish to NPM
-        run: pnpm publish --access public --provenance --no-git-checks
+        run: pnpm publish --access public --no-git-checks --tag ${{ steps.version.outputs.tag }}
-        env:
-          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

.github/workflows/quality.yaml

@@ -31,12 +31,12 @@ jobs:
       - name: Setup pnpm
         uses: pnpm/action-setup@v4
         with:
-          version: 9
+          version: 10
 
       - name: Setup Node.js
         uses: actions/setup-node@v4
         with:
-          node-version: '20'
+          node-version: '24'
           cache: 'pnpm'
 
       - name: Install dependencies

README.md

@@ -1,58 +1,79 @@
-# 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

package.json

@@ -46,7 +46,7 @@
 		"eslint": "^9.18.0",
 		"eslint-config-prettier": "^10.0.1",
 		"eslint-plugin-svelte": "^3.0.0",
-		"globals": "^16.0.0",
+		"globals": "^17.0.0",
 		"prettier": "^3.4.2",
 		"prettier-plugin-svelte": "^3.3.3",
 		"publint": "^0.3.2",
@@ -54,7 +54,7 @@
 		"svelte-check": "^4.0.0",
 		"typescript": "^5.0.0",
 		"typescript-eslint": "^8.20.0",
-		"vite": "^7.0.4"
+		"vite": "^7.1.11"
 	},
 	"keywords": [
 		"svelte"

renovate.json

@@ -0,0 +1,4 @@
+{
+	"$schema": "https://docs.renovatebot.com/renovate-schema.json",
+	"extends": ["config:recommended"]
+}

src/lib/GitHubCalendar.svelte

@@ -22,9 +22,7 @@
 	});
 </script>
 
-<div class={`calendar-holder ${className}`}>
+<div class={`calendar ${className}`}></div>
-	<div class="calendar"></div>
-</div>
 
 <style global>
 	:root {
@@ -35,7 +33,6 @@
 		--color-calendar-graph-day-L4-bg: #0a4208 !important;
 	}
 	:global {
-		.calendar-holder {
 		.ContributionCalendar-day[data-level='0'] {
 			background-color: var(--color-calendar-graph-day-bg) !important;
 		}
@@ -58,6 +55,7 @@
 
 		table.ContributionCalendar-grid {
 			margin-bottom: 0pt !important;
+			border-collapse: separate !important;
 		}
 
 		table.ContributionCalendar-grid td {
@@ -85,7 +83,7 @@
 			font-family: Helvetica, arial !important;
 			border: 1px solid #dddddd !important;
 			border-radius: 3px !important;
-				min-height: 243px !important;
+			min-height: 243px;
 			text-align: center !important;
 			margin: 0 auto !important;
 		}
@@ -144,6 +142,10 @@
 			font-size: 11px !important;
 		}
 
+		.contrib-column span {
+			color: #000 !important;
+		}
+
 		.contrib-column-first {
 			border-left: 0 !important;
 		}
@@ -191,6 +193,10 @@
 			height: 26px !important;
 		}
 
+		.calendar .text-muted {
+			color: inherit !important;
+		}
+
 		.left.text-muted {
 			float: left !important;
 			margin-left: 9px !important;
@@ -266,5 +272,4 @@
 			}
 		}
 	}
-	}
 </style>

src/routes/+page.svelte

@@ -2,4 +2,6 @@
 	import { GitHubCalendar } from '../lib/index.js';
 </script>
 
+<main>
 	<GitHubCalendar username="Paillat-dev" class="w-full h-auto" />
+</main>