dev-widget

    1.2.0 • Public • Published

    DEV widget

    GitHub package.json version Contributions to DEV Widget are welcomed

    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 🌻

    Screenshot of the DEV.to Widget


    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 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/dev-widget@^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 DEV Widget themes


    Changelog

    RELEASES


    Contributing

    I would love to have some of your contributions to this project. You can checkout CONTRIBUTING.md for Contribution guidelines.

    Install

    npm i dev-widget

    DownloadsWeekly Downloads

    529

    Version

    1.2.0

    License

    MIT

    Unpacked Size

    23.1 kB

    Total Files

    10

    Last publish

    Collaborators

    • saurabhdaware