Add GitHub Heatmap

This commit is contained in:
SkyfallWasTaken 2024-07-13 20:33:01 +01:00
parent 4f9f3bd2a3
commit 06af2248b1
7 changed files with 68 additions and 3 deletions

View file

@ -1,11 +1,12 @@
import { defineConfig } from "astro/config"; import { defineConfig } from "astro/config";
import mdx from "@astrojs/mdx"; import mdx from "@astrojs/mdx";
import sitemap from "@astrojs/sitemap"; import sitemap from "@astrojs/sitemap";
import tailwind from "@astrojs/tailwind"; import tailwind from "@astrojs/tailwind";
import svelte from "@astrojs/svelte";
// https://astro.build/config // https://astro.build/config
export default defineConfig({ export default defineConfig({
site: "https://skyfall.dev", site: "https://skyfall.dev",
integrations: [mdx(), sitemap(), tailwind()], integrations: [mdx(), sitemap(), tailwind(), svelte()]
}); });

BIN
bun.lockb

Binary file not shown.

View file

@ -11,6 +11,10 @@
"astro": "astro" "astro": "astro"
}, },
"dependencies": { "dependencies": {
"@astrojs/svelte": "^5.6.0",
"activity-calendar-widget": "^0.0.14",
"octokit": "^4.0.2",
"svelte": "^4.2.18",
"tailwind-merge": "^2.3.0" "tailwind-merge": "^2.3.0"
}, },
"devDependencies": { "devDependencies": {

View file

@ -0,0 +1,48 @@
<script lang="ts">
import ActivityCalendarWidget from "activity-calendar-widget/svelte";
import { Octokit } from "octokit";
async function loadGitHubActivity() {
const octokit = new Octokit();
const events = await octokit.rest.activity.listPublicEventsForUser({
username: "SkyfallWasTaken",
});
const eventsMap: Map<string, number> = new Map();
events.data.forEach((event) => {
if (!event.created_at) return;
let count = eventsMap.get(event.created_at);
if (!count) {
eventsMap.set(event.created_at, 1);
} else {
count += 1;
eventsMap.set(event.created_at, count);
}
});
const array: { date: string; activities: any[] }[] = [];
eventsMap.forEach((value, key) => {
array.push({
date: key.slice(0, 11),
activities: Array(value).fill({}),
});
});
console.log(array);
return array;
}
</script>
<div class="w-full">
{#await loadGitHubActivity()}
<p>Give us a mo...</p>
{:then data}
<ActivityCalendarWidget daysToRender={365} {data} levelColorMode={"dark"} />
{/await}
</div>
<style>
img {
width: 82px;
}
</style>

View file

@ -0,0 +1 @@
<hr class="h-px my-12 bg-surface1 border-0" />

View file

@ -4,6 +4,8 @@ import Header from "../components/Header.astro";
import Footer from "../components/Footer.astro"; import Footer from "../components/Footer.astro";
import { SITE_TITLE, SITE_DESCRIPTION } from "../consts"; import { SITE_TITLE, SITE_DESCRIPTION } from "../consts";
import Button from "../components/ui/Button.astro"; import Button from "../components/ui/Button.astro";
import Hr from "../components/ui/Hr.astro";
import GitHubHeatmap from "../components/homepage/GitHubHeatmap.svelte";
--- ---
<!doctype html> <!doctype html>
@ -26,6 +28,10 @@ import Button from "../components/ui/Button.astro";
<a href="/blog"><Button>Read my blog</Button></a> <a href="/blog"><Button>Read my blog</Button></a>
</div> </div>
</div> </div>
<Hr />
<div class="flex flex-col gap-4 w-full lg:w-[40%]">
<GitHubHeatmap client:load />
</div>
</main> </main>
<Footer /> <Footer />
</body> </body>

5
svelte.config.js Normal file
View file

@ -0,0 +1,5 @@
import { vitePreprocess } from '@astrojs/svelte';
export default {
preprocess: vitePreprocess(),
}