Learn about our RFC process, Open RFC meetings & more.Join in the discussion! »

gh-profile-card

0.1.0 • Public • Published

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>

Install

npm i gh-profile-card

DownloadsWeekly Downloads

1

Version

0.1.0

License

MIT

Unpacked Size

31.7 kB

Total Files

6

Last publish

Collaborators

  • avatar