You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
144 lines
3.3 KiB
144 lines
3.3 KiB
const SOCIAL_PLATFORMS_URLS = { |
|
default: { |
|
name: "default", |
|
urlPrefix: "", |
|
imgPos: [0,0], // [row,col] |
|
}, |
|
|
|
facebook: { |
|
name: "Facebook", |
|
urlPrefix: "http://www.facebook.com/", |
|
imgPos: [0,1], |
|
}, |
|
twitter: { |
|
name: "Twitter", |
|
urlPrefix: "http://www.twitter.com/", |
|
imgPos: [0,2], |
|
}, |
|
instagram: { |
|
name: "Instagram", |
|
urlPrefix: "http://www.instagram.com/", |
|
imgPos: [0,3], |
|
}, |
|
instagram: { |
|
name: "Snapchat", |
|
urlPrefix: "http://www.snapchat.com/", |
|
imgPos: [0,4], |
|
}, |
|
tiktok: { |
|
name: "TikTok", |
|
urlPrefix: "http://www.tiktok.com/", |
|
imgPos: [0,5], |
|
}, |
|
soundcloud: { |
|
name: "Soundcloud", |
|
urlPrefix: "http://www.soundcloud.com/", |
|
imgPos: [0,6], |
|
}, |
|
basecamp: { |
|
name: "Base Camp", |
|
urlPrefix: "http://www.basecamp.com/", |
|
imgPos: [0,7], |
|
}, |
|
patreon: { |
|
name: "Patreon", |
|
urlPrefix: "http://www.patreon.com/", |
|
imgPos: [0,1], |
|
}, |
|
youtube: { |
|
name: "YouTube", |
|
urlPrefix: "http://www.youtube.com/", |
|
imgPos: [0,9 ], |
|
}, |
|
spotify: { |
|
name: "Spotify", |
|
urlPrefix: "http://www.spotify.com/", |
|
imgPos: [0,10], |
|
}, |
|
twitch: { |
|
name: "Twitch", |
|
urlPrefix: "http://www.twitch.com/", |
|
imgPos: [0,11], |
|
}, |
|
paypal: { |
|
name: "Paypal", |
|
urlPrefix: "http://www.paypal.com/", |
|
imgPos: [0,12], |
|
}, |
|
github: { |
|
name: "Github", |
|
urlPrefix: "http://www.github.com/", |
|
imgPos: [0,13], |
|
}, |
|
linkedin: { |
|
name: "LinkedIn", |
|
urlPrefix: "http://www.linkedin.com/", |
|
imgPos: [0,14], |
|
}, |
|
discord: { |
|
name: "Discord", |
|
urlPrefix: "http://www.discord.com/", |
|
imgPos: [0,15], |
|
}, |
|
mastadon: { |
|
name: "Mastadon", |
|
urlPrefix: "http://www.mastadon.com/", |
|
imgPos: [0,16], |
|
}, |
|
}; |
|
|
|
Vue.component('social-list', { |
|
props: ['platforms'], |
|
|
|
template: ` |
|
<ul class="social-list flex"> |
|
<span v-if="this.platforms.length" class="follow-label">Follow me: </span> |
|
<user-social-icon |
|
v-for="(item, index) in this.platforms" |
|
v-if="item.platform && item.handle" |
|
v-bind:key="index" |
|
v-bind:platform="item.platform" |
|
v-bind:username="item.handle" |
|
/> |
|
</ul> |
|
`, |
|
|
|
}); |
|
|
|
Vue.component('user-social-icon', { |
|
props: ['platform', 'username'], |
|
data: function() { |
|
const platformInfo = SOCIAL_PLATFORMS_URLS[this.platform.toLowerCase()] || SOCIAL_PLATFORMS_URLS["default"]; |
|
const imgRow = platformInfo.imgPos && platformInfo.imgPos[0] || 0; |
|
const imgCol = platformInfo.imgPos && platformInfo.imgPos[1] || 0; |
|
const useDefault = platformInfo.name === "default"; |
|
return { |
|
name: platformInfo.name, |
|
link: platformInfo.name !== "default" ? `${platformInfo.urlPrefix}/${this.username}` : '#', |
|
style: `--imgRow: -${imgRow}; --imgCol: -${imgCol};`, |
|
itemClass: { |
|
"user-social-item": true, |
|
"flex": true, |
|
"rounded": useDefault, |
|
"use-default": useDefault, |
|
}, |
|
labelClass: { |
|
"platform-label": true, |
|
"visually-hidden": !useDefault, |
|
"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 @{{username}} on {{platform}}</span> |
|
</a> |
|
</li> |
|
`, |
|
});
|
|
|