Ginger Wong
5 years ago
10 changed files with 248 additions and 22 deletions
|
After Width: | Height: | Size: 1.1 KiB |
|
After Width: | Height: | Size: 14 KiB |
@ -1,10 +1,18 @@
@@ -1,10 +1,18 @@
|
||||
{ |
||||
"title": "Owncast Demo Server", |
||||
"logo": "/img/logo.png", |
||||
"logo": "/img/logo128.png", |
||||
"description": "This is a demo server for Owncast. You can read more about it at owncast.online. You can edit this description in your web config file. <br><br>Blathers is an owl with brown feathers. His face is white and he has a yellow beak. His arms are wing shaped and he has yellow talons. His eyes are very big with small black irises. He also has big pink cheek circles on his cheeks. His belly appears to be checkered in diamonds with light brown and white squares, similar to an argyle vest, which is traditionally associated with academia. His green bowtie further alludes to his academic nature.", |
||||
"tags": [ |
||||
"music", |
||||
"software", |
||||
"animal crossing" |
||||
], |
||||
"socialHandles": [ |
||||
{ "platform": "twitter", "handle": "abc" }, |
||||
{ "platform": "instagram", "handle": "abc" }, |
||||
{ "platform": "facebook", "handle": "" }, |
||||
{ "platform": "tiktok", "handle": "abc" }, |
||||
{ "platform": "soundcloud", "handle": "abc" }, |
||||
{ "platform": "newone", "handle": "abc" } |
||||
] |
||||
} |
||||
@ -0,0 +1,138 @@
@@ -0,0 +1,138 @@
|
||||
Vue.component('owncast-footer', { |
||||
template: ` |
||||
<footer class="flex border-t border-gray-500 border-solid"> |
||||
<span> |
||||
<a href="https://github.com/gabek/owncast" target="_blank">About Owncast</a> |
||||
</span> |
||||
</footer> |
||||
`,
|
||||
}); |
||||
|
||||
|
||||
const SOCIAL_PLATFORMS_URLS = { |
||||
default: { |
||||
name: "default", |
||||
urlPrefix: "", |
||||
imgPos: [0,0], // [row,col]
|
||||
}, |
||||
|
||||
facebook: { |
||||
name: "Facebook", |
||||
urlPrefix: "http://www.facebook.com/", |
||||
imgPos: [0,1], // [row,col]
|
||||
}, |
||||
twitter: { |
||||
name: "Twitter", |
||||
urlPrefix: "http://www.twitter.com/", |
||||
imgPos: [0,2], // [row,col]
|
||||
}, |
||||
instagram: { |
||||
name: "Instagram", |
||||
urlPrefix: "http://www.instagram.com/", |
||||
imgPos: [0,3], // [row,col]
|
||||
}, |
||||
instagram: { |
||||
name: "Snapchat", |
||||
urlPrefix: "http://www.snapchat.com/", |
||||
imgPos: [0,4], // [row,col]
|
||||
}, |
||||
tiktok: { |
||||
name: "TikTok", |
||||
urlPrefix: "http://www.tiktok.com/", |
||||
imgPos: [0,5], // [row,col]
|
||||
}, |
||||
soundcloud: { |
||||
name: "Soundcloud", |
||||
urlPrefix: "http://www.soundcloud.com/", |
||||
imgPos: [0,6], // [row,col]
|
||||
}, |
||||
basecamp: { |
||||
name: "Base Camp", |
||||
urlPrefix: "http://www.basecamp.com/", |
||||
imgPos: [0,7], // [row,col]
|
||||
}, |
||||
patreon: { |
||||
name: "Patreon", |
||||
urlPrefix: "http://www.patreon.com/", |
||||
imgPos: [0,1], // [row,col]
|
||||
}, |
||||
youtube: { |
||||
name: "YouTube", |
||||
urlPrefix: "http://www.youtube.com/", |
||||
imgPos: [0,9 ], // [row,col]
|
||||
}, |
||||
spotify: { |
||||
name: "Spotify", |
||||
urlPrefix: "http://www.spotify.com/", |
||||
imgPos: [0,10], // [row,col]
|
||||
}, |
||||
twitch: { |
||||
name: "Twitch", |
||||
urlPrefix: "http://www.twitch.com/", |
||||
imgPos: [0,11], // [row,col]
|
||||
}, |
||||
paypal: { |
||||
name: "Paypal", |
||||
urlPrefix: "http://www.paypal.com/", |
||||
imgPos: [0,12], // [row,col]
|
||||
}, |
||||
github: { |
||||
name: "Github", |
||||
urlPrefix: "http://www.github.com/", |
||||
imgPos: [0,13], // [row,col]
|
||||
}, |
||||
linkedin: { |
||||
name: "LinkedIn", |
||||
urlPrefix: "http://www.linkedin.com/", |
||||
imgPos: [0,14], // [row,col]
|
||||
}, |
||||
discord: { |
||||
name: "Discord", |
||||
urlPrefix: "http://www.discord.com/", |
||||
imgPos: [0,15], // [row,col]
|
||||
}, |
||||
mastadon: { |
||||
name: "Mastadon", |
||||
urlPrefix: "http://www.mastadon.com/", |
||||
imgPos: [0,16], // [row,col]
|
||||
}, |
||||
}; |
||||
|
||||
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: ` |
||||
<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> |
||||
`,
|
||||
}); |
||||
Loading…
Reference in new issue