I made DEV.to widget for websites/blogs

Hey Everyone! So I made an (Unofficial) DEV.to widget / profile-card which you can use in your websites and blogs (You just have to copy-paste 2 lines of code :D).

Here's how it looks like

Name: I made DEV.to widget for websites/blogs
Rating: 4.9 (4078 reviews)
Author: saurabhdaware

Usage ( JUST 2 LINES OF CODE :D )

    <dev-widget data-username="saurabhdaware"></dev-widget>

    <!-- Place script tag before the end of the body tag -->
    <script src="https://unpkg.com/dev-widget@^1/dist/card.component.min.mjs" type="module"></script>

And BOOM that's it! Just put your dev.to username in data-username attribute and you will get your profile card :D

If you want to install it as ES6 module (Mostly used in frameworks)

npm install --save dev-widget

and import at the top of your file

import 'dev-widget'

Then you can use

<dev-widget data-username="saurabhdaware"></dev-widget>

There are some other attributes like data-width, data-limit You can checkout full documentation on my GitHub:

saurabhdaware / DEV-widget

Unofficial Widget/profile card for https://dev.to/

DEV widget

GUI to Generate Card: https://dev-widget.netlify.app/create

Codepen: https://codepen.io/saurabhdaware/pen/NWWbOvv

Unofficial Widget / profile card for dev.to.

You can use it in your website/blog and show off your DEV.to articles 🌻

Installation and Usage

- Through script tag

    <dev-widget data-username="saurabhdaware"></dev-widget>
    <!-- Place script tag before the end of the body tag -->
    <script src="https://unpkg.com/dev-widget@^1/dist/card.component.min.mjs" type="module"></script>

- As NPM module

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

npm install --save dev-widget

Inside your framework component

import 'dev-widget'

Attributes Guide

attributes	description	default
data-username	Your DEV.to Username
data-width	Width of the card	300px
data-contentheight	Height of the Aricles Container	300px
data-theme	Theme of the card (`dark`, `ocean`, `pink`, `cobalt2`, `default`)	default
data-name (optional)	Name to display on card	Will

…

View on GitHub

Do ⭐ the repository 🦄

Also, for the hacktoberfest, if anyone wants to contribute to this project, I would love to help. You can checkout CONTRIBUTING.md for contribution guidelines.

GitHub: https://github.com/saurabhdaware/DEV-widget
NPM: https://npmjs.org/package/dev-widget
Codepen: https://codepen.io/saurabhdaware/pen/NWWbOvv