Dev Stats WebComponents

Example usage

Github Stats

<github-stats username="your-github-username"></github-stats>

API Document for github-stats component.

Github Streak Stats

<github-streak-stats username="your-github-username"></github-streak-stats>

API Document for github-streak-stats component.

Github Top Languages

<github-top-langs username="your-github-username" layout="compact" langs-count="10"></github-top-langs>

API Document for github-top-langs component.

Wakatime Stats

<wakatime-stats username="your-wakatime-username" layout="default"></wakatime-stats>

API Document for wakatime-stats component.

Using this component

Using in popular javascript frameworks or libraries

• Go to Using WebComponents in Angular, React.js, Vue.js, Node.js and Basic HTML example projects

Script tag

• Put a script tag below in the head of your index.html

<script type="module" src="https://unpkg.com/wc-dev-stats/dist/wc-dev-stats/wc-dev-stats.esm.js"></script>

• Then you can use the element anywhere in your template, JSX, html etc

Node Modules

• Run

npm install wc-dev-stats --save

• Put a script tag below in the head of your index.html

<script type="module" src="node_modules/wc-dev-stats/dist/wc-dev-stats/wc-dev-stats.esm.js"></script>

• Then you can use the element anywhere in your template, JSX, html etc

In a stencil-starter app

• Run

npm install wc-dev-stats --save

• Add an import to the npm packages

import wc-dev-stats;

• Then you can use the element anywhere in your template, JSX, html etc

API Docs

• github-stats
• github-streak-stats
• github-top-langs
• wakatime-stats

Contributing

Clone this repo to a new directory:

git clone https://github.com/savepong/wc-dev-stats.git
cd wc-dev-stats

and run:

npm install
npm start

To build the component for production, run:

npm run build

To run the unit tests for the components, run:

npm test