loading...
Cover image for DEV.to Widget now has a DARK Theme! and a pink theme and an ocean theme. See what's new in dev-widget v1.1.0 🌻🌑🌸

DEV.to Widget now has a DARK Theme! and a pink theme and an ocean theme. See what's new in dev-widget v1.1.0 🌻🌑🌸

saurabhdaware profile image Saurabh Daware 🌻 Updated on ・1 min read

dev-widget changelog (3 Part Series)

1) I made DEV.to widget for websites/blogs 2) DEV.to Widget now has a DARK Theme! and a pink theme and an ocean theme. See what's new in dev-widget v1.1.0 🌻🌑🌸 3) DEV.to Widget v1.2.0🎉: GUI to create widget, new theme, data-sortby attribute and more!

So, a few months back I made an unofficial DEV.to Widget which lets you show off your articles on your website/blogs using just 2 lines of code! Today I finished writing and deploying a new minor version v1.1.0 which introduces a new attribute, data-theme.

Before we go, Here's how new themes look like:
DEV.to widget themes preview

Usage

To add DEV widget to your website, All you have to do is copy-paste these two lines into your code.

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

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

and that's it! just replace your DEV.to username in data-username!

The new version lets you add data-theme attribute which has possible values of default, pink, ocean, dark.

The DEV Widget is also available as NPM module for frameworks and webpack,
npm install --save dev-widget
&
import 'dev-widget'

Codepen Demo:

Links:

GitHub: https://github.com/saurabhdaware/DEV-widget
NPM Registry: https://npmjs.org/package/dev-widget
Codepen: https://codepen.io/saurabhdaware/pen/NWWbOvv
v1.1.0 Changelogs: https://github.com/saurabhdaware/DEV-widget/releases/tag/v1.1.0

Thank you for reading 🌻 My favorite is the pink theme 🌸 which one did you like? let me know in comments :D

P.S. Now I have 10k Followers on DEV.to yay!!

dev-widget changelog (3 Part Series)

1) I made DEV.to widget for websites/blogs 2) DEV.to Widget now has a DARK Theme! and a pink theme and an ocean theme. See what's new in dev-widget v1.1.0 🌻🌑🌸 3) DEV.to Widget v1.2.0🎉: GUI to create widget, new theme, data-sortby attribute and more!

Posted on by:

saurabhdaware profile

Saurabh Daware 🌻

@saurabhdaware

21, JavaScript Fanboi. Building Abell, A new static-site-generator. also sunflower is my favorite emoji🌻 (He/Him)

Discussion

markdown guide
 
 
 

Really nice widget. It would be nice if the width & height are configurable or if they are responsive.

 

I see you have an attribute for width

 

yes there is data-width I will soon add data-height as well, Thank You 🌻