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

First commit

Browse Source
This commit is contained in:
Paillat
2025-08-28 11:02:29 +02:00
commit 43c2c3ecf4
26 changed files with 3052 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
.github/workflows/CI.yaml vendored Normal file
View File

@@ -0,0 +1,24 @@
name: CI
on:
push:
branches: [ "main", "dev" ]
# Publish semver tags as releases.
tags: [ 'v*.*.*' ]
pull_request:
branches: ["main", "dev"]
release:
types: [created]
jobs:
quality:
uses: ./.github/workflows/quality.yaml
permissions:
contents: read
publish:
needs: quality
if: github.event_name == 'release'
uses: ./.github/workflows/publish.yaml
permissions:
id-token: write
contents: read

49
.github/workflows/publish.yaml vendored Normal file
View File

@@ -0,0 +1,49 @@
name: Publish to NPM
on:
workflow_call:
jobs:
publish:
name: Publish to NPM
runs-on: ubuntu-latest
environment: npm
permissions:
id-token: write
contents: read
steps:
- name: Checkout repository
uses: actions/checkout@v4
- name: Setup pnpm
uses: pnpm/action-setup@v4
with:
version: 8
- name: Setup Node.js
uses: actions/setup-node@v4
with:
node-version: '20'
cache: 'pnpm'
registry-url: 'https://registry.npmjs.org'
- name: Install dependencies
run: pnpm install --frozen-lockfile
- name: Extract version from tag
id: version
run: |
VERSION=${GITHUB_REF#refs/tags/v}
echo "version=$VERSION" >> $GITHUB_OUTPUT
echo "Publishing version: $VERSION"
- name: Update package.json version
run: |
pnpm version ${{ steps.version.outputs.version }} --no-git-tag-version
- name: Build package
run: pnpm build
- name: Publish to NPM
run: pnpm publish --access public --provenance
env:
NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

46
.github/workflows/quality.yaml vendored Normal file
View File

@@ -0,0 +1,46 @@
name: Quality Checks
on:
workflow_call:
jobs:
quality:
runs-on: ubuntu-latest
strategy:
fail-fast: false
matrix:
check: [format, lint, typecheck, build]
include:
- check: format
name: "Format Check"
command: "pnpm prettier --check ."
- check: lint
name: "Lint Check"
command: "pnpm eslint ."
- check: typecheck
name: "Type Check"
command: "pnpm check"
- check: build
name: "Build Check"
command: "pnpm build"
name: ${{ matrix.name }}
steps:
- name: Checkout repository
uses: actions/checkout@v4
- name: Setup pnpm
uses: pnpm/action-setup@v4
with:
version: 8
- name: Setup Node.js
uses: actions/setup-node@v4
with:
node-version: '20'
cache: 'pnpm'
- name: Install dependencies
run: pnpm install --frozen-lockfile
- name: ${{ matrix.name }}
run: ${{ matrix.command }}

24
.gitignore vendored Normal file
View File

@@ -0,0 +1,24 @@
node_modules
# Output
.output
.vercel
.netlify
.wrangler
/.svelte-kit
/build
/dist
# OS
.DS_Store
Thumbs.db
# Env
.env
.env.*
!.env.example
!.env.test
# Vite
vite.config.js.timestamp-*
vite.config.ts.timestamp-*

8
.idea/.gitignore generated vendored Normal file
View File

@@ -0,0 +1,8 @@
# Default ignored files
/shelf/
/workspace.xml
# Editor-based HTTP Client requests
/httpRequests/
# Datasource local storage ignored files
/dataSources/
/dataSources.local.xml

14
.idea/discord.xml generated Normal file
View File

@@ -0,0 +1,14 @@
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="DiscordProjectSettings">
<option name="show" value="PROJECT_FILES" />
<option name="description" value="" />
<option name="applicationTheme" value="default" />
<option name="iconsTheme" value="default" />
<option name="button1Title" value="" />
<option name="button1Url" value="" />
<option name="button2Title" value="" />
<option name="button2Url" value="" />
<option name="customApplicationId" value="" />
</component>
</project>

19
.idea/inspectionProfiles/Project_Default.xml generated Normal file
View File

@@ -0,0 +1,19 @@
<component name="InspectionProjectProfileManager">
<profile version="1.0">
<option name="myName" value="Project Default" />
<inspection_tool class="PyAugmentAssignmentInspection" enabled="true" level="WEAK WARNING" enabled_by_default="true" />
<inspection_tool class="PyBDDParametersInspection" enabled="false" level="WARNING" enabled_by_default="false" />
<inspection_tool class="PyClassicStyleClassInspection" enabled="true" level="WARNING" enabled_by_default="true" />
<inspection_tool class="PyCompatibilityInspection" enabled="false" level="WARNING" enabled_by_default="false">
<option name="ourVersions">
<value>
<list size="1">
<item index="0" class="java.lang.String" itemvalue="3.14" />
</list>
</value>
</option>
</inspection_tool>
<inspection_tool class="PyMissingTypeHintsInspection" enabled="true" level="WEAK WARNING" enabled_by_default="true" />
<inspection_tool class="com.insyncwithfoo.pyright.commandline.PyrightInspection" enabled="true" level="WARNING" enabled_by_default="false" />
</profile>
</component>

8
.idea/modules.xml generated Normal file
View File

@@ -0,0 +1,8 @@
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="ProjectModuleManager">
<modules>
<module fileurl="file://$PROJECT_DIR$/.idea/svelte-github-calendar.iml" filepath="$PROJECT_DIR$/.idea/svelte-github-calendar.iml" />
</modules>
</component>
</project>

12
.idea/svelte-github-calendar.iml generated Normal file
View File

@@ -0,0 +1,12 @@
<?xml version="1.0" encoding="UTF-8"?>
<module type="WEB_MODULE" version="4">
<component name="NewModuleRootManager">
<content url="file://$MODULE_DIR$">
<excludeFolder url="file://$MODULE_DIR$/.tmp" />
<excludeFolder url="file://$MODULE_DIR$/temp" />
<excludeFolder url="file://$MODULE_DIR$/tmp" />
</content>
<orderEntry type="inheritedJdk" />
<orderEntry type="sourceFolder" forTests="false" />
</component>
</module>

6
.idea/vcs.xml generated Normal file
View File

@@ -0,0 +1,6 @@
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="VcsDirectoryMappings">
<mapping directory="$PROJECT_DIR$" vcs="Git" />
</component>
</project>

2
.npmrc Normal file
View File

@@ -0,0 +1,2 @@
engine-strict=true
script-shell="C:\\Program Files\\git\\bin\\bash.exe"

9
.prettierignore Normal file
View File

@@ -0,0 +1,9 @@
# Package Managers
package-lock.json
pnpm-lock.yaml
yarn.lock
bun.lock
bun.lockb
# Miscellaneous
/static/

15
.prettierrc Normal file
View File

@@ -0,0 +1,15 @@
{
"useTabs": true,
"singleQuote": true,
"trailingComma": "none",
"printWidth": 100,
"plugins": ["prettier-plugin-svelte"],
"overrides": [
{
"files": "*.svelte",
"options": {
"parser": "svelte"
}
}
]
}

58
README.md Normal file
View File

@@ -0,0 +1,58 @@
# Svelte library
Everything you need to build a Svelte library, powered by [`sv`](https://npmjs.com/package/sv).
Read more about creating a library [in the docs](https://svelte.dev/docs/kit/packaging).
## Creating a project
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
Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
```sh
npm run dev
# or start the server and open the app in a new browser tab
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.
## Building
To build your library:
```sh
npm pack
```
To create a production version of your showcase app:
```sh
npm run build
```
You can preview the production build with `npm run preview`.
> To deploy your app, you may need to install an [adapter](https://svelte.dev/docs/kit/adapters) for your target environment.
## Publishing
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/)).
To publish your library to [npm](https://www.npmjs.com):
```sh
npm publish
```

40
eslint.config.js Normal file
View File

@@ -0,0 +1,40 @@
import prettier from 'eslint-config-prettier';
import { includeIgnoreFile } from '@eslint/compat';
import js from '@eslint/js';
import svelte from 'eslint-plugin-svelte';
import globals from 'globals';
import { fileURLToPath } from 'node:url';
import ts from 'typescript-eslint';
import svelteConfig from './svelte.config.js';
const gitignorePath = fileURLToPath(new URL('./.gitignore', import.meta.url));
export default ts.config(
includeIgnoreFile(gitignorePath),
js.configs.recommended,
...ts.configs.recommended,
...svelte.configs.recommended,
prettier,
...svelte.configs.prettier,
{
languageOptions: {
globals: { ...globals.browser, ...globals.node }
},
rules: {
// typescript-eslint strongly recommend that you do not use the no-undef lint rule on TypeScript projects.
// see: https://typescript-eslint.io/troubleshooting/faqs/eslint/#i-get-errors-from-the-no-undef-rule-about-global-variables-not-being-defined-even-though-there-are-no-typescript-errors
'no-undef': 'off'
}
},
{
files: ['**/*.svelte', '**/*.svelte.ts', '**/*.svelte.js'],
languageOptions: {
parserOptions: {
projectService: true,
extraFileExtensions: ['.svelte'],
parser: ts.parser,
svelteConfig
}
}
}
);

66
package.json Normal file
View File

@@ -0,0 +1,66 @@
{
"name": "svelte-github-calendar",
"version": "0.0.1",
"scripts": {
"dev": "vite dev",
"build": "vite build && pnpm run prepack",
"preview": "vite preview",
"prepare": "svelte-kit sync || echo ''",
"prepack": "svelte-kit sync && svelte-package && publint",
"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
"format": "prettier --write .",
"lint": "prettier --check . && eslint ."
},
"files": [
"dist",
"!dist/**/*.test.*",
"!dist/**/*.spec.*"
],
"sideEffects": [
"**/*.css"
],
"svelte": "./dist/index.js",
"types": "./dist/index.d.ts",
"type": "module",
"exports": {
".": {
"types": "./dist/index.d.ts",
"svelte": "./dist/index.js"
}
},
"peerDependencies": {
"svelte": "^5.0.0"
},
"devDependencies": {
"@eslint/compat": "^1.2.5",
"@eslint/js": "^9.18.0",
"@sveltejs/adapter-auto": "^6.0.0",
"@sveltejs/kit": "^2.22.0",
"@sveltejs/package": "^2.0.0",
"@sveltejs/vite-plugin-svelte": "^6.0.0",
"eslint": "^9.18.0",
"eslint-config-prettier": "^10.0.1",
"eslint-plugin-svelte": "^3.0.0",
"globals": "^16.0.0",
"prettier": "^3.4.2",
"prettier-plugin-svelte": "^3.3.3",
"publint": "^0.3.2",
"svelte": "^5.0.0",
"svelte-check": "^4.0.0",
"typescript": "^5.0.0",
"typescript-eslint": "^8.20.0",
"vite": "^7.0.4"
},
"keywords": [
"svelte"
],
"pnpm": {
"onlyBuiltDependencies": [
"esbuild"
]
},
"dependencies": {
"github-calendar": "^2.3.4"
}
}

2310
pnpm-lock.yaml generated Normal file
View File

File diff suppressed because it is too large Load Diff

13
src/app.d.ts vendored Normal file
View File

@@ -0,0 +1,13 @@
// See https://svelte.dev/docs/kit/types#app.d.ts
// for information about these interfaces
declare global {
namespace App {
// interface Error {}
// interface Locals {}
// interface PageData {}
// interface PageState {}
// interface Platform {}
}
}
export {};

12
src/app.html Normal file
View File

@@ -0,0 +1,12 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%sveltekit.assets%/favicon.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
%sveltekit.head%
</head>
<body data-sveltekit-preload-data="hover">
<div>%sveltekit.body%</div>
</body>
</html>

269
src/lib/GitHubCalendar.svelte Normal file
View File

@@ -0,0 +1,269 @@
<script lang="ts">
import GithubCalendar from 'github-calendar';
import { onMount } from 'svelte';
interface GithubCalendarOptions {
username: string;
summary_text?: string;
proxy?: (username: string) => Promise<string>;
global_stats?: boolean;
responsive?: boolean;
tooltips?: boolean;
cache?: number;
class?: string;
}
const { username, class: className = '', ...options }: GithubCalendarOptions = $props();
onMount(async () => {
await GithubCalendar('.calendar', username, {
...options
});
});
</script>
<div class={`calendar-holder ${className}`}>
<div class="calendar"></div>
</div>
<style global>
:root {
--color-calendar-graph-day-bg: #dddbdb !important;
--color-calendar-graph-day-L1-bg: #39dd34 !important;
--color-calendar-graph-day-L2-bg: #45a045 !important;
--color-calendar-graph-day-L3-bg: #047526 !important;
--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;
}
.ContributionCalendar-day[data-level='1'] {
background-color: var(--color-calendar-graph-day-L1-bg) !important;
}
.ContributionCalendar-day[data-level='2'] {
background-color: var(--color-calendar-graph-day-L2-bg) !important;
}
.ContributionCalendar-day[data-level='3'] {
background-color: var(--color-calendar-graph-day-L3-bg) !important;
}
.ContributionCalendar-day[data-level='4'] {
background-color: var(--color-calendar-graph-day-L4-bg) !important;
}
table.ContributionCalendar-grid {
margin-bottom: 0pt !important;
}
table.ContributionCalendar-grid td {
padding: 4pt !important;
}
table.ContributionCalendar-grid td span.sr-only {
display: none !important;
}
td.ContributionCalendar-label span[aria-hidden='true'] {
font-size: 8pt !important;
left: -1pt !important;
}
tool-tip {
display: none !important;
}
.calendar .width-full > .float-left {
display: none !important;
}
.calendar {
font-family: Helvetica, arial !important;
border: 1px solid #dddddd !important;
border-radius: 3px !important;
min-height: 243px !important;
text-align: center !important;
margin: 0 auto !important;
}
.calendar-graph text.wday,
.calendar-graph text.month {
font-size: 10px !important;
fill: #aaa !important;
}
div.px-md-5 {
height: 2rem !important;
}
div.float-right {
text-align: right !important;
padding: 0 14px 10px 0 !important;
display: inline-block !important;
float: right !important;
}
div.float-right div {
display: inline-block !important;
list-style: none !important;
margin: 0 5px !important;
position: relative !important;
bottom: -1px !important;
padding: 0 !important;
}
div.float-right span.sr-only {
display: none !important;
}
.contrib-legend .legend li {
display: inline-block !important;
width: 10px !important;
height: 10px !important;
}
.text-small {
font-size: 12px !important;
color: #767676 !important;
}
.calendar-graph {
padding: 5px 0 0 !important;
text-align: center !important;
}
.contrib-column {
padding: 15px 0 !important;
text-align: center !important;
border-left: 1px solid #ddd !important;
border-top: 1px solid #ddd !important;
font-size: 11px !important;
}
.contrib-column-first {
border-left: 0 !important;
}
.table-column {
box-sizing: border-box !important;
display: table-cell !important;
width: 1% !important;
padding-right: 10px !important;
padding-left: 10px !important;
vertical-align: top !important;
}
.contrib-number {
font-weight: 300 !important;
line-height: 1.3em !important;
font-size: 24px !important;
display: block !important;
color: #333 !important;
}
.calendar img.spinner {
width: 70px !important;
margin-top: 50px !important;
min-height: 70px !important;
}
.monospace {
text-align: center !important;
color: #000 !important;
font-family: monospace !important;
}
.monospace a {
color: #1d75ab !important;
text-decoration: none !important;
}
.contrib-footer {
font-size: 11px !important;
padding: 0 10px 12px !important;
text-align: left !important;
width: 100% !important;
box-sizing: border-box !important;
height: 26px !important;
}
.left.text-muted {
float: left !important;
margin-left: 9px !important;
color: #767676 !important;
}
.left.text-muted a {
color: #4078c0 !important;
text-decoration: none !important;
}
.left.text-muted a:hover,
.monospace a:hover {
text-decoration: underline !important;
}
h2.f4.text-normal.mb-3 {
display: none !important;
}
.float-left.text-gray {
float: left !important;
}
#user-activity-overview {
display: none !important;
}
.day-tooltip {
white-space: nowrap !important;
position: absolute !important;
z-index: 99999 !important;
padding: 10px !important;
font-size: 12px !important;
color: #959da5 !important;
text-align: center !important;
background: rgba(0, 0, 0, 0.85) !important;
border-radius: 3px !important;
display: none !important;
pointer-events: none !important;
}
.day-tooltip strong {
color: #dfe2e5 !important;
}
.day-tooltip.is-visible {
display: block !important;
}
.day-tooltip:after {
position: absolute !important;
bottom: -10px !important;
left: 50% !important;
width: 5px !important;
height: 5px !important;
box-sizing: border-box !important;
margin: 0 0 0 -5px !important;
content: ' ' !important;
border: 5px solid transparent !important;
border-top-color: rgba(0, 0, 0, 0.85);
}
text.ContributionCalendar-label {
fill: #ccc !important;
font-size: 11px !important;
}
@media screen and (max-width: 768px) {
.table-column {
display: block !important;
width: 100% !important;
}
}
}
}
</style>

3
src/lib/index.ts Normal file
View File

@@ -0,0 +1,3 @@
import GitHubCalendar from '$lib/GitHubCalendar.svelte';
export { GitHubCalendar };

5
src/routes/+page.svelte Normal file
View File

@@ -0,0 +1,5 @@
<script lang="ts">
import { GitHubCalendar } from '$lib';
</script>
<GitHubCalendar username="Paillat-dev" class="w-full h-auto" />

1
static/favicon.svg Normal file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="107" height="128" viewBox="0 0 107 128"><title>svelte-logo</title><path d="M94.157 22.819c-10.4-14.885-30.94-19.297-45.792-9.835L22.282 29.608A29.92 29.92 0 0 0 8.764 49.65a31.5 31.5 0 0 0 3.108 20.231 30 30 0 0 0-4.477 11.183 31.9 31.9 0 0 0 5.448 24.116c10.402 14.887 30.942 19.297 45.791 9.835l26.083-16.624A29.92 29.92 0 0 0 98.235 78.35a31.53 31.53 0 0 0-3.105-20.232 30 30 0 0 0 4.474-11.182 31.88 31.88 0 0 0-5.447-24.116" style="fill:#ff3e00"/><path d="M45.817 106.582a20.72 20.72 0 0 1-22.237-8.243 19.17 19.17 0 0 1-3.277-14.503 18 18 0 0 1 .624-2.435l.49-1.498 1.337.981a33.6 33.6 0 0 0 10.203 5.098l.97.294-.09.968a5.85 5.85 0 0 0 1.052 3.878 6.24 6.24 0 0 0 6.695 2.485 5.8 5.8 0 0 0 1.603-.704L69.27 76.28a5.43 5.43 0 0 0 2.45-3.631 5.8 5.8 0 0 0-.987-4.371 6.24 6.24 0 0 0-6.698-2.487 5.7 5.7 0 0 0-1.6.704l-9.953 6.345a19 19 0 0 1-5.296 2.326 20.72 20.72 0 0 1-22.237-8.243 19.17 19.17 0 0 1-3.277-14.502 17.99 17.99 0 0 1 8.13-12.052l26.081-16.623a19 19 0 0 1 5.3-2.329 20.72 20.72 0 0 1 22.237 8.243 19.17 19.17 0 0 1 3.277 14.503 18 18 0 0 1-.624 2.435l-.49 1.498-1.337-.98a33.6 33.6 0 0 0-10.203-5.1l-.97-.294.09-.968a5.86 5.86 0 0 0-1.052-3.878 6.24 6.24 0 0 0-6.696-2.485 5.8 5.8 0 0 0-1.602.704L37.73 51.72a5.42 5.42 0 0 0-2.449 3.63 5.79 5.79 0 0 0 .986 4.372 6.24 6.24 0 0 0 6.698 2.486 5.8 5.8 0 0 0 1.602-.704l9.952-6.342a19 19 0 0 1 5.295-2.328 20.72 20.72 0 0 1 22.237 8.242 19.17 19.17 0 0 1 3.277 14.503 18 18 0 0 1-8.13 12.053l-26.081 16.622a19 19 0 0 1-5.3 2.328" style="fill:#fff"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB

18
svelte.config.js Normal file
View File

@@ -0,0 +1,18 @@
import adapter from '@sveltejs/adapter-auto';
import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
/** @type {import('@sveltejs/kit').Config} */
const config = {
// Consult https://svelte.dev/docs/kit/integrations
// for more information about preprocessors
preprocess: vitePreprocess(),
kit: {
// adapter-auto only supports some environments, see https://svelte.dev/docs/kit/adapter-auto for a list.
// If your environment is not supported, or you settled on a specific environment, switch out the adapter.
// See https://svelte.dev/docs/kit/adapters for more information about adapters.
adapter: adapter()
}
};
export default config;

15
tsconfig.json Normal file
View File

@@ -0,0 +1,15 @@
{
"extends": "./.svelte-kit/tsconfig.json",
"compilerOptions": {
"allowJs": true,
"checkJs": true,
"esModuleInterop": true,
"forceConsistentCasingInFileNames": true,
"resolveJsonModule": true,
"skipLibCheck": true,
"sourceMap": true,
"strict": true,
"module": "NodeNext",
"moduleResolution": "NodeNext"
}
}

6
vite.config.ts Normal file
View File

@@ -0,0 +1,6 @@
import { sveltekit } from '@sveltejs/kit/vite';
import { defineConfig } from 'vite';
export default defineConfig({
plugins: [sveltekit()]
});