128 lines
2.4 KiB
JavaScript
128 lines
2.4 KiB
JavaScript
const SOCIAL_PLATFORMS = {
|
|
default: {
|
|
name: "default",
|
|
imgPos: [0,0], // [row,col]
|
|
},
|
|
|
|
facebook: {
|
|
name: "Facebook",
|
|
imgPos: [0,1],
|
|
},
|
|
twitter: {
|
|
name: "Twitter",
|
|
imgPos: [0,2],
|
|
},
|
|
instagram: {
|
|
name: "Instagram",
|
|
imgPos: [0,3],
|
|
},
|
|
snapchat: {
|
|
name: "Snapchat",
|
|
imgPos: [0,4],
|
|
},
|
|
tiktok: {
|
|
name: "TikTok",
|
|
imgPos: [0,5],
|
|
},
|
|
soundcloud: {
|
|
name: "Soundcloud",
|
|
imgPos: [0,6],
|
|
},
|
|
bandcamp: {
|
|
name: "Bandcamp",
|
|
imgPos: [0,7],
|
|
},
|
|
patreon: {
|
|
name: "Patreon",
|
|
imgPos: [0,1],
|
|
},
|
|
youtube: {
|
|
name: "YouTube",
|
|
imgPos: [0,9 ],
|
|
},
|
|
spotify: {
|
|
name: "Spotify",
|
|
imgPos: [0,10],
|
|
},
|
|
twitch: {
|
|
name: "Twitch",
|
|
imgPos: [0,11],
|
|
},
|
|
paypal: {
|
|
name: "Paypal",
|
|
imgPos: [0,12],
|
|
},
|
|
github: {
|
|
name: "Github",
|
|
imgPos: [0,13],
|
|
},
|
|
linkedin: {
|
|
name: "LinkedIn",
|
|
imgPos: [0,14],
|
|
},
|
|
discord: {
|
|
name: "Discord",
|
|
imgPos: [0,15],
|
|
},
|
|
mastadon: {
|
|
name: "Mastadon",
|
|
imgPos: [0,16],
|
|
},
|
|
};
|
|
|
|
Vue.component('social-list', {
|
|
props: ['platforms'],
|
|
|
|
template: `
|
|
<ul class="social-list flex" v-if="this.platforms.length">
|
|
<span class="follow-label">Follow me: </span>
|
|
<user-social-icon
|
|
v-for="(item, index) in this.platforms"
|
|
v-if="item.platform && item.url"
|
|
v-bind:key="index"
|
|
v-bind:platform="item.platform"
|
|
v-bind:url="item.url"
|
|
/>
|
|
</ul>
|
|
`,
|
|
|
|
});
|
|
|
|
Vue.component('user-social-icon', {
|
|
props: ['platform', 'url'],
|
|
data: function() {
|
|
const platformInfo = SOCIAL_PLATFORMS[this.platform.toLowerCase()];
|
|
const inList = !!platformInfo;
|
|
const imgRow = inList ? platformInfo.imgPos[0] : 0;
|
|
const imgCol = inList ? platformInfo.imgPos[1] : 0;
|
|
return {
|
|
name: inList ? platformInfo.name : this.platform,
|
|
link: this.url,
|
|
|
|
style: `--imgRow: -${imgRow}; --imgCol: -${imgCol};`,
|
|
itemClass: {
|
|
"user-social-item": true,
|
|
"flex": true,
|
|
"use-default": !inList,
|
|
},
|
|
labelClass: {
|
|
"platform-label": true,
|
|
"visually-hidden": inList,
|
|
"text-indigo-800": true,
|
|
},
|
|
};
|
|
},
|
|
template: `
|
|
<li>
|
|
<a
|
|
v-bind:class="itemClass"
|
|
target="_blank"
|
|
:href="link"
|
|
>
|
|
<span class="platform-icon rounded-lg" :style="style" />
|
|
<span v-bind:class="labelClass">Find me on {{platform}}</span>
|
|
</a>
|
|
</li>
|
|
`,
|
|
});
|