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

Prafulla Raichurkar @prafulla-codes

About: Be kind to yourself and the world around you <3

Location:
India, Mumbai.
Joined:
Sep 3, 2019

I created Git-Widget for websites/blogs.

Publish Date: Feb 26 '20
49 7

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.

Comments 7 total

  • Farooq khan
    Farooq khanFeb 26, 2020

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

  • Ben Sinclair
    Ben SinclairFeb 26, 2020

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

    • Prafulla Raichurkar
      Prafulla RaichurkarFeb 26, 2020

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

      • Oscar
        OscarFeb 26, 2020

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

  • Augusto Peres
    Augusto PeresFeb 26, 2020

    This looks amazing! Great work!

Add comment