About: - JavaScript <3
- I make silly libraries
- Building Abell, A new static-site-generator.
Location:
Bengaluru, India 🇮🇳
Joined:
May 31, 2019
I made DEV.to widget for websites/blogs
Publish Date: Oct 20 '19
302 55
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
Usage ( JUST 2 LINES OF CODE :D )
<dev-widgetdata-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)
You can use it in your website/blog and show off your DEV.to articles 🌻
Installation and Usage
- Through script tag
<dev-widgetdata-username="saurabhdaware"></dev-widget><!-- Place script tag before the end of the body tag --><scriptsrc="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)
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.
Oh thank you! I've added integity hash to my codepen demo. Not really sure how I can get that hash before publishing so that I can set in readme (Apparently that hash changed from 1.0.1 to 1.0.2)
Wow, this adds so much value to a single-page portfolio by being able to show potential employers all the articles you've written with just TWO LINES OF CODE! The idea is pure genius, the execution looks perfect and I'm sure the code is just as elegant as the execution! I can also imagine this widget boosting the number of people using dev.to to write their articles.
So simple yet so beautiful. Extremely inspiring stuff mate, congratulations!
@saurabhdaware
this is phenomenal. I know you've open sourced the code but I'd like to build something very similar for my own site. Any pointers on how to get started would be great. Are you using the DEV APIs? Would I need to create those first for my own site before creating a public widget like this?
Hi KP, yes I've used DEV API. There's a DEV API that returns the list of articles on providing the username. Even in my person website I am doing something similar in the articles section saurabhdaware.in
Thanks @saurabhdaware
. Looks like the code you've written is in .mjs file format....which is new to me....I'll give it a closer look and hope you dont mind me forking and using it in the future! Some quick questions for you...
What is the advantage of mjs files for modules (versus regular js)? I've never used this file format.
How do you host on unpkg, and how do you create a command like this?
npm install --save dev-widget
Any gotchas I need to be aware of / careful of when creating my own widget?
.mjs lets you use import and export in web without having a webpack build environment.
You have to publish it as a npm package and all npm packages are synced to unpkg
Gotchas:
The api does not return user's data directly, It comes under each article value with user's key
If user has written 0 articles, you dont get any value so no user data in this case.
If you are going to build on top of web components, you'll have to follow the webcomponent best practices (You'll find them on internet) for the widget to work in frameworks
@saurabhdaware
thanks! These tips are going to be really helpful.
I'll definitely let you know if I end up using it! First step, I'm trying to simply include your widget locally to see it in action...and then I can start modifying it :D
I'm trying to include this dev widget in my nuxt.js project, in one of my pages. For context, each page in Nuxt is nothing but a vue component.
You can make it work in framework that way by putting that script file before end of body tag in your index.html.
These frameworks follow a particular standard and having compinents as module is by far the most comfortable way of adding anything. It also makes this process standard since it gets similar to how you would add a usual vue component.
What you write in your vue component is not really staright up appeneded to the final bundle rather they are in some way compiled (in v v v general terms) and they are bundled with vue's code along with it. So it is not really possible to standardize that script include thing (unless you write different widget for different frameworks)
@kiyuku1 's answer would work, but here's the complete solution that would work if we want to include a js (or mjs) file in ONE nuxt.js page only, instead of globally:
I will use this on my blog, thanks