type Link = {
url: string;
svg: boolean;
icon: string;
title: string;
};
class Socials extends HTMLElement {
private items: Link[] = [
{
url: 'https://atanas.info',
title: 'Go to my website',
icon: 'logo',
svg: true
},
{
url: 'mailto:hi@atanas.info',
title: 'Send me an email',
icon: 'email',
svg: true
},
{
url: 'https://www.linkedin.com/in/scriptex/',
title: 'Find me on LinkedIn',
icon: 'linkedin',
svg: true
},
{
url: 'https://github.com/scriptex',
title: 'See my projects on Github',
icon: 'github',
svg: true
},
{
url: 'https://gitlab.com/scriptex',
title: 'See my projects on Gitlab',
icon: 'gitlab',
svg: true
},
{
url: 'https://twitter.com/scriptexbg',
title: 'Follow me on Twitter',
icon: 'twitter-x',
svg: true
},
{
url: 'https://mastodon.social/@scriptex',
title: 'Follow me on Mastodon Social',
icon: 'mastodon',
svg: true
},
{
url: 'https://bsky.app/profile/scriptex.bsky.social',
title: 'Follow me on Bluesky',
icon: 'bluesky',
svg: true
},
{
url: 'https://www.npmjs.com/~scriptex',
title: 'See my packages on NPM',
icon: 'npm',
svg: true
},
{
url: 'https://www.youtube.com/user/scriptex',
title: 'See my videos on YouTube',
icon: 'youtube',
svg: true
},
{
url: 'https://stackoverflow.com/users/4140082/atanas-atanasov',
title: 'See my profile on StackOverflow',
icon: 'stackoverflow',
svg: true
},
{
url: 'https://codepen.io/scriptex/',
title: 'See my work on Codepen',
icon: 'codepen',
svg: true
},
{
url: 'https://profile.codersrank.io/user/scriptex',
title: 'See my profile on Codersrank',
icon: 'codersrank',
svg: true
},
{
url: 'https://linktr.ee/scriptex',
title: 'See the rest of my links on Linktree',
icon: 'linktree',
svg: true
}
];
private styleEl: HTMLStyleElement = document.createElement('style');
private sprite: HTMLTemplateElement = document.createElement('template');
private template: HTMLTemplateElement = document.createElement('template');
constructor() {
super();
this.render();
const shadowRoot = this.attachShadow({ mode: 'open' });
// prettier-ignore
this.sprite.innerHTML = '';
this.styleEl.innerHTML = `ul {
display: flex;
flex-flow: row wrap;
align-items: center;
justify-content: center;
padding: 0;
margin: 0;
list-style: none outside none;
}
li {
padding: 0.5rem 0.325rem;
}
li a,
li svg {
color: inherit;
display: block;
}
img {
vertical-align: middle;
}
li svg {
fill: currentColor;
}
.svg-npm,
.svg-email,
.svg-github,
.svg-gitlab,
.svg-twitter,
.svg-bluesky,
.svg-codepen,
.svg-linkedin,
.svg-mastodon,
.svg-twitter-x,
.svg-google-plus,
.svg-stackoverflow {
width: 1.5rem;
}
.svg-npm,
.svg-codepen,
.svg-youtube,
.svg-linktree,
.svg-codersrank,
.svg-google-plus,
.svg-stackoverflow {
height: 1.5rem;
}
.svg-npm {
border-radius: 0.25rem;
}
.svg-email {
height: 1.69rem;
}
.svg-twitter-x {
height: 1.5625rem;
}
.svg-github,
.svg-gitlab,
.svg-linkedin,
.svg-mastodon {
height: 1.63rem;
}
.svg-twitter {
height: 1.38rem;
}
.svg-youtube {
width: 2rem;
}
.svg-bluesky {
height: 1.375rem;
}
.svg-logo {
width: 1.75rem;
height: 1.75rem;
stroke: currentColor;
stroke-width: 0.325rem;
}
.svg-codersrank {
width: 2.5rem;
}
.svg-linktree {
width: 1.75rem;
}
`;
shadowRoot.appendChild(this.styleEl.cloneNode(true));
shadowRoot.appendChild(this.sprite.content.cloneNode(true));
shadowRoot.appendChild(this.template.content.cloneNode(true));
}
private render(): void {
this.template.innerHTML = ``;
}
private renderList(): string {
return this.items
.map(
(item: Link) => `
${this.renderIcon(item)}
`
)
.join('\n');
}
private renderIcon(item: Link): string {
return item.svg
? ``
: `
`;
}
}
customElements.define('social-links', Socials);