DEV Community

Cover image for I created Git-Widget for websites/blogs.
Prafulla Raichurkar
Prafulla Raichurkar

Posted on

I created Git-Widget for websites/blogs.

Showcase your project's open-source timeline on their websites/blogs using git-widget.

Check it out

Usage

- Via Script

    <git-widget data-projectid="Pika1998/CYOMS"></git-widget>
    <!-- Place script tag before the end of the body tag -->
    <script src="https://unpkg.com/git-widget@1.0.0/dist/card.component.mjs" type="module"></script>
Enter fullscreen mode Exit fullscreen mode

- Via NPM

This can be used in React, Vue and almost any other frontend framework

npm install --save git-widget
Enter fullscreen mode Exit fullscreen mode

Inside your framework component

import 'git-widget'
Enter fullscreen mode Exit fullscreen mode

Then you can use

    <git-widget data-projectid="Pika1998/CYOMS"></git-widget>

Enter fullscreen mode Exit fullscreen mode

Check out the detailed documentation at

GitHub logo prafulla-codes / Git-Widget

Showcase your projects on their official websites/blogs. 👨‍💻👩‍💻

Git Widget

NPM Downloads NPM Version Contributions

Showcase your projects on their official websites/blogs. 👨‍💻👩‍💻

A Detailed timeline of contributions done on your project. 💖

Codepen - https://codepen.io/Prafulla1998/pen/OJVNzxP

Screenshot of the Git Widget

Installation & Usage

You can install git-widget using two ways.

1 - Using Script

    <git-widget data-projectid="Pika1998/CYOMS"></git-widget>
    <!-- Place script tag before the end of the body tag -->
    <script src="https://unpkg.com/git-widget@1.0.0/dist/card.component.mjs" type="module"></script>
Enter fullscreen mode Exit fullscreen mode

2 - As NPM Module

This can be used in React, Vue and almost any other frontend framework

npm install --save git-widget
Enter fullscreen mode Exit fullscreen mode

Inside your framework component

import 'git-widget'
Enter fullscreen mode Exit fullscreen mode

Attributes

attributes description default
data-projectid < Your Github UserID > / < Project you want to showcase>
data-width Width of the card 400px
data-height Height of the card 500px

Changelog

RELEASES

Contribution

Feel free to contribute to git widget, checkout CONTRIBUTING.md




Github - https://github.com/Pika1998/Git-Widget
NPM - https://npmjs.org/package/git-widget
Codepen - https://codepen.io/Prafulla1998/pen/OJVNzxP

Feel free to make contributions to the project 💖 and 🌟 the repository.

Top comments (7)

Collapse
 
moopet profile image
Ben Sinclair

Nice, but I think it would be better named "github-widget" unless you plan on making it support git URLs in general.

Collapse
 
prafulla-codes profile image
Prafulla Raichurkar

Hey thanks 💖.
Sure I'll consider this.😃

Collapse
 
smartcodinghub profile image
Oscar

I'm with Ben. This isn't a git-widget but a github-widget.

Collapse
 
vsfarooqkhan profile image
Farooq khan

Really impressed with Your git-widget .
I'd love to see more changes coming into your project.

Collapse
 
prafulla-codes profile image
Prafulla Raichurkar

Thank you so much 💖, sure will add more changes.😁

Collapse
 
augustoapg profile image
Augusto Peres

This looks amazing! Great work!

Collapse
 
prafulla-codes profile image
Prafulla Raichurkar

Thank you so much 💖