gh-profile-card

GitHub profile widget. A simple widget to display your github profile and repositories.

Usage no npm install needed!

<script type="module">
  import ghProfileCard from 'https://cdn.skypack.dev/gh-profile-card';
</script>

README

gh-profile

GitHub profile widget. A simple widget to display your github profile and repositories.

Usage

Include script and style just before tag:

<script src="/dist/github-widget.esm.mjs" type="module"></script>

Include HTML code anywhere you would like to place widget:

<github-w user="binodswain">
    <profile-info 
        data-theme="light"
        data-company="true"
        data-bio="false"
        >
    </profile-info>
</github-w>

Screenshot

demo

Configurations

profile-info options repo-info options

Examples

  • Dark mode
<github-w user="binodswain">
    <profile-info 
        data-theme="dark"
        data-company="true"
        data-bio="false"
        >
    </profile-info>
</github-w>
  • Profile + repo
    <github-w user="binodswain">
        <profile-info 
          data-theme="light"
          data-company="true"
          data-bio="false"
          >
          <repo-info
            data-limit="5" 
            data-direction="desc"
            data-sort="updated"
          ></repo-info>
        </profile-info>
    </github-w>
  • Multiple widgets in same page
<github-w user="binodswain">
    <profile-info 
        data-theme="dark"
        data-company="true"
        data-bio="false"
        >
    </profile-info>
</github-w>
...
<github-w user="<otheruser>">
    <profile-info 
        data-theme="dark"
        data-company="true"
        data-bio="false"
        >
    </profile-info>
</github-w>
  • Only repositories
    <github-w user="binodswain">
        <repo-info
            data-limit="5" 
            data-direction="desc"
            data-sort="updated"
        ></repo-info>
    </github-w>