Social

The "Social" component helps you generate a social link to your Twitter, Dev, Medium, LinkedIn, GitHub accounts or a custom uri.

Table of contents

Showcase

DeckDeckGo on Github

Installation

This component could be added to your web application using the following methods.

Using from a CDN

It's recommended to use unpkg to use the DeckDeckGo lazy image component from a CDN. To do so, add the following include script in the main HTML file of your project:

<script type="module" src="https://unpkg.com/@deckdeckgo/social@latest/dist/deckdeckgo-social/deckdeckgo-social.esm.js"></script> <script nomodule="" src="https://unpkg.com/@deckdeckgo/social@latest/dist/deckdeckgo-social/deckdeckgo-social.js"></script>

Install from NPM

Install it in your project from npm using the following command:

npm install @deckdeckgo/social

Framework integration

The Stencil documentation provide examples of framework integration for Angular, React, Vue and Ember.

That being said, commonly, you might either import or load it:

Import

import '@deckdeckgo/social';

Loader

import { defineCustomElements as deckDeckGoElement } from '@deckdeckgo/social/dist/loader'; deckDeckGoElement();

Usage

The "Social" Web Component could be integrated using the tag <deckgo-social/>.

<deckgo-social twitter="daviddalbusco"> <img data-src="/assets/twitter.svg" slot="icon"/> </deckgo-social>

Slots

The slot icon and the text are both optional.

If you don't provide a text, component will renders a corresponding text for you.

Examples

Automatic text:

<deckgo-social twitter="daviddalbusco"> <ion-icon slot="icon" name="logo-twitter"></ion-icon> </deckgo-social>

Custom text:

A link to Twitter

<deckgo-social twitter="daviddalbusco"> <ion-icon slot="icon" name="logo-twitter"></ion-icon> <span>A link to Twitter</span> </deckgo-social>

Without icon:

daviddalbusco

<deckgo-social twitter="daviddalbusco"> </deckgo-social>

Attributes

This component offers the following options which could be set using attributes:

AttributeTypeDefaultDescription
twitterstringYour Twitter username. It will be concatenated automatically with https://twitter.com/
linkedinstringYour Linkedin username. It will be concatenated automatically with https://www.linkedin.com/in/
mediumstringYour Medium username. It will be concatenated automatically with https://medium.com/@
devstringYour Dev username. It will be concatenated automatically with https://dev.to/
githubstringYour Github username. It will be concatenated automatically with https://github.com/
fullUrlstringIn case you would like to provide the URI of your choice

Examples

Without any icons:

<deckgo-social twitter="daviddalbusco">Twitter</deckgo-social> <deckgo-social linkedin="david-dal-busco">Linkedin</deckgo-social> <deckgo-social medium="david.dalbusco">Medium</deckgo-social> <deckgo-social full-url="https://stackoverflow.com/users/5404186/peter-parker">Stackoverflow</deckgo-social>

With for example ion-icon:

<deckgo-social twitter="daviddalbusco"> <ion-icon slot="icon" name="logo-twitter"></ion-icon> Twitter </deckgo-social> <deckgo-social github="fluster/deckdeckgo"> <ion-icon slot="icon" name="logo-github"></ion-icon> DeckDeckGo on Github </deckgo-social>