Svelte Github Contrib

cnoid

Display GitHub contributions in Sveltekit

Download

svelte-github-contrib

Display GitHub contributions in Sveltekit

Live Demo

Matia's scraper

Fully customizable with CSS (as seen above). Hovering works (X contributions on X DATE) just like Github.

Runs using GitHub Contributions API - Dockerfile is in this repo if you want to run it containerized, just place it in the folder after cloning and run docker build.

Usage:

Step 1: Pick your poison

Step 2: Download the version that goes with what you decided on.

Some notes about it: contrib-api uses GraphQL (which means getting a token), while Matia's version uses scraping with SvelteKit. It's only a matter of preference as both return JSON. The scraper returns all days of the current year, however, while the GraphQL updates in the same way Github profile does. (currentdate - 370 days)

The scraper is easiest because you can simply use the one he is hosting on Vercel, while the other is more reliable as it's using Github's GraphQL.

contrib-api

Expand

$lib/store.ts
import { writable } from 'svelte/store';
export const contributionsStore = writable([]);

<script>
// Remember your other imports
import GitHubTable from '$lib/GitHubTable.svelte';
import { contributionsStore } from '$lib/store.ts';
import { onMount } from 'svelte';

  onMount(async () => {
    try {
      // Remember to replace the URL with your API
      const response = await fetch('https://example.com/api/contrib?userName=yourgithubusername');
      if (response.ok) {
        const data = await response.json();
        contributionsStore.set(data); // Update the store
      } else {
        console.error('Error fetching contributions:', response.status);
      }
    } catch (error) {
      console.error('Network error:', error);
    }
  });
// The rest of your script tag
</script>

Or, no error logging:

<script>
// Remember your other imports
import GitHubTable from '$lib/GitHubTable.svelte';
import { contributionsStore } from '$lib/store.ts';
import { onMount } from 'svelte';

  onMount(async () => {
    try {
      // Remember to replace the URL with your API
      const response = await fetch('https://example.com/api/contrib?userName=yourgithubusername');
      if (response.ok) {
        const data = await response.json();
        contributionsStore.set(data); // Update the store
      } 
  });
// The rest of your script tag
</script>

Step 3:

Simply insert where you want it: <GitHubTable />

Matia's SvelteKit scraper

Expand

Insert into your header:

<script>
  <!-- The rest of your imports and such -->
  import { onMount } from 'svelte';
  import GitHubTable from '$lib/GitHubTable.svelte';

  let contributions = [];

  onMount(async () => {
    try {
      const response = await fetch('https://example.com/user/year');
      if (response.ok) {
        contributions = await response.json();
      } else {
        console.error('Error fetching contributions:', response.status);
      }
    } catch (error) {
      console.error('Network error:', error);
    }
  });
</script>

No error handling:

<script>
  <!-- The rest of your imports and such -->
  import { onMount } from 'svelte';
  import GitHubTable from '$lib/GitHubTable.svelte';

  let contributions = [];

  onMount(async () => {
    const response = await fetch('https://example.com/user/year');
    if (response.ok) {
      contributions = await response.json();
    }
  });
</script>

Step 3:

Simply insert where you want it: <GitHubTable {contributions} />

Note that the CSS is for dark mode and is not complete depending on your usage. CSS is simply not my forte.

Top categories