GITHUB CONTRIBUTION GRAPH

<!-- 1. Include the styles -->
<link rel="stylesheet" href="https://githubgraph.jigyansurout.com/assets/css/gh.css">
<style>
  :root {
    /* Void Theme */
    --gh-bg-color: #000000;
    --gh-text-default-color: #ffffff;
    --gh-cell-level0-color: #111111;
    --gh-border-card-color: #333333;
  }
</style>

<!-- 2. Create the container -->
<div id="gh"
     data-login="iamjr15"
     data-show-thumbnail="true"></div>
<!-- Optional: data-show-thumbnail="false" to hide GitHub logo -->

<!-- 3. Include the script -->
<script src="https://githubgraph.jigyansurout.com/assets/js/gh.js"></script>

import { useEffect } from 'react';

const ContributionGraph = () => {
  useEffect(() => {
    const link = document.createElement('link');
    link.rel = 'stylesheet';
    link.href = 'https://githubgraph.jigyansurout.com/assets/css/gh.css';
    document.head.appendChild(link);

    const script = document.createElement('script');
    script.src = 'https://githubgraph.jigyansurout.com/assets/js/gh.js';
    script.async = true;
    document.body.appendChild(script);

    return () => {
      document.head.removeChild(link);
      document.body.removeChild(script);
    };
  }, []);

  return (
    <>
      <style>{`
        :root {
          --gh-bg-color: #000000;
          --gh-text-default-color: #ffffff;
          --gh-cell-level0-color: #111111;
          --gh-border-card-color: #333333;
        }
      `}</style>
      <div id="gh"
           data-login="iamjr15"
           data-show-thumbnail="true" />
    </>
  );
};

<template>
  <div id="gh"
       :data-login="username"
       data-show-thumbnail="true"></div>
</template>

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

const props = defineProps({ username: String });
let link, script;

onMounted(() => {
  link = document.createElement('link');
  link.rel = 'stylesheet';
  link.href = 'https://githubgraph.jigyansurout.com/assets/css/gh.css';
  document.head.appendChild(link);

  script = document.createElement('script');
  script.src = 'https://githubgraph.jigyansurout.com/assets/js/gh.js';
  script.async = true;
  document.body.appendChild(script);
});

onUnmounted(() => {
  if (link) document.head.removeChild(link);
  if (script) document.body.removeChild(script);
});
</script>

<style>
  :root {
    /* Void Theme */
    --gh-bg-color: #000000;
    --gh-text-default-color: #ffffff;
    --gh-cell-level0-color: #111111;
    --gh-border-card-color: #333333;
  }
</style>