Embedding Stats

Add your coding stats to your portfolio, blog, or any website.

🔑 Finding Your GitHub ID

Run "Time in Code: Show Account Info" in VS Code to get your GitHub ID (numeric, not your username).

React / Next.js

CodingStats.tsx
'use client';
import { useEffect, useState } from 'react';

export default function CodingStats() {
  const [stats, setStats] = useState<any>(null);

  useEffect(() => {
    // Replace YOUR_GITHUB_ID with your actual GitHub ID
    fetch('https://time-in-code.vercel.app/api/stats/YOUR_GITHUB_ID?limit=30')
      .then(r => r.json())
      .then(setStats);
  }, []);

  if (!stats) return <p>Loading stats...</p>;

  return (
    <div>
      <h2>My Coding Stats</h2>
      <p>{Math.floor(stats.totalSeconds / 3600)} hours tracked</p>
      <p>{stats.totalDays} days active</p>
      <p>Top language: {stats.data[0]?.languages ? Object.keys(stats.data[0].languages)[0] : 'N/A'}</p>
    </div>
  );
}

HTML / Vanilla JavaScript

index.html
<div id="coding-stats">Loading...</div>
<script>
  fetch('https://time-in-code.vercel.app/api/stats/YOUR_GITHUB_ID?limit=30')
    .then(r => r.json())
    .then(stats => {
      document.getElementById('coding-stats').innerHTML = `
        <h2>My Coding Stats</h2>
        <p>${Math.floor(stats.totalSeconds / 3600)} hours tracked</p>
        <p>${stats.totalDays} days active</p>
      `;
    });
</script>

Vue

CodingStats.vue
<template>
  <div v-if="stats">
    <h2>My Coding Stats</h2>
    <p>{{ Math.floor(stats.totalSeconds / 3600) }} hours tracked</p>
    <p>{{ stats.totalDays }} days active</p>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';

const stats = ref(null);

onMounted(async () => {
  const res = await fetch(
    'https://time-in-code.vercel.app/api/stats/YOUR_GITHUB_ID?limit=30'
  );
  stats.value = await res.json();
});
</script>

Svelte

CodingStats.svelte
<script>
  import { onMount } from 'svelte';
  let stats = null;

  onMount(async () => {
    const res = await fetch(
      'https://time-in-code.vercel.app/api/stats/YOUR_GITHUB_ID?limit=30'
    );
    stats = await res.json();
  });
</script>

{#if stats}
  <div>
    <h2>My Coding Stats</h2>
    <p>{Math.floor(stats.totalSeconds / 3600)} hours tracked</p>
    <p>{stats.totalDays} days active</p>
  </div>
{/if}

Embed Dashboard Directly

You can also embed the full dashboard using an iframe:

iframe embed
<iframe 
  src="https://time-in-code.vercel.app/dashboard/YOUR_GITHUB_ID" 
  width="100%" 
  height="800px" 
  frameborder="0"
></iframe>

Response Format

The API returns githubId, userName, and avatarUrl along with stats. You can use these to display the user's GitHub profile info alongside their coding stats.