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.

If you are using our Starter Kit, no need to worry about this, this component is included, therefore you could skip the "Installation" chapter.

Using from a CDN

It's recommended to use unpkg to use the DeckDeckGo social 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>

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. username will be replaced automatically from https://username.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>