saurabhdaware / Dev Widget
Licence: mit
Unofficial Widget/profile card for https://dev.to/
Stars: ✭ 91
Programming Languages
javascript
184084 projects - #8 most used programming language
Labels
Projects that are alternatives of or similar to Dev Widget
Flutter hooks
React hooks for Flutter. Hooks are a new kind of object that manages a Widget life-cycles. They are used to increase code sharing between widgets and as a complete replacement for StatefulWidget.
Stars: ✭ 1,973 (+2068.13%)
Mutual labels: hacktoberfest, widget
Avatarview
A circular Image View with a lot of perks. Including progress animation and highlight state with borders and gradient color.
Stars: ✭ 429 (+371.43%)
Mutual labels: hacktoberfest, widget
Yii2 Quill
Yii 2 implementation of Quill, modern WYSIWYG editor
Stars: ✭ 52 (-42.86%)
Mutual labels: hacktoberfest, widget
Protobuf Nim
Protobuf implementation in pure Nim that leverages the power of the macro system to not depend on any external tools
Stars: ✭ 90 (-1.1%)
Mutual labels: hacktoberfest
React Promise
a react.js hook for general promise in typescript
Stars: ✭ 90 (-1.1%)
Mutual labels: hacktoberfest
Awesomecard
A Flutter package to easily create a Credit Card in your application.
Stars: ✭ 91 (+0%)
Mutual labels: widget
Cloud haiku
Community-made poetry about infrastructure
Stars: ✭ 90 (-1.1%)
Mutual labels: hacktoberfest
Multiverse Portals
MV2's implementation of MV1 style portals.
Stars: ✭ 90 (-1.1%)
Mutual labels: hacktoberfest
Powershell
PowerShell functions and scripts (Azure, Active Directory, SCCM, SCSM, Exchange, O365, ...)
Stars: ✭ 1,302 (+1330.77%)
Mutual labels: hacktoberfest
Laravel Totem
Manage Your Laravel Schedule From A Web Dashboard
Stars: ✭ 1,299 (+1327.47%)
Mutual labels: hacktoberfest
Wifiespnow
ESP-NOW Arduino library for ESP8266 and ESP32
Stars: ✭ 90 (-1.1%)
Mutual labels: hacktoberfest
Jquery Youtube Channels Playlist
jQuery plugin youtube playlist
Stars: ✭ 90 (-1.1%)
Mutual labels: widget
Apac Conferences
A community contributed consolidated list of InfoSec meetups in the Asia Pacific region.
Stars: ✭ 90 (-1.1%)
Mutual labels: hacktoberfest
Leetcode algorithms
A collection of solutions for Medium/Hard LeetCode problems. Educational resource
Stars: ✭ 91 (+0%)
Mutual labels: hacktoberfest
Hacktoberfest
Find more projects at https://hacktoberfest.digitalocean.com/#projects
Stars: ✭ 90 (-1.1%)
Mutual labels: hacktoberfest
Rebar3
Erlang build tool that makes it easy to compile and test Erlang applications and releases.
Stars: ✭ 1,295 (+1323.08%)
Mutual labels: hacktoberfest
Digitalocean Js
JavaScript library for the DigitalOcean API
Stars: ✭ 90 (-1.1%)
Mutual labels: hacktoberfest
Vagas Junior Estagio
Empresas que constantemente oferecem vagas para junior e estagiários
Stars: ✭ 1,296 (+1324.18%)
Mutual labels: hacktoberfest
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/[email protected]^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 be fetched from API |
| data-limit | Number of articles to display | 30 |
| data-sortby | Sort articles (date, reactions) |
date |
Note: Value of data-limit should not be too high. An API request has to be made for every 30 articles so for data-limit=200 7 API requests will be made synchronously.
So a full example with every attribute would look something like
<dev-widget
data-username="saurabhdaware"
data-theme="ocean"
data-sortby="reactions"
data-width="320px"
data-contentheight="200px"
data-limit="3"
data-name="Saurabh 😎"
></dev-widget>
<!-- Place script tag before the end of the body tag -->
<script src="https://unpkg.com/[email protected]^1/dist/card.component.min.mjs" type="module"></script>
Note: Only data-username is neccessary and every other attribute is optional
Themes
default ocean pink dark cobalt2
Changelog
Contributing
I would love to have some of your contributions to this project. You can checkout CONTRIBUTING.md for Contribution guidelines.
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].