Commit 0305f4b3 authored by Wolf's avatar Wolf 💯
Browse files

added contributors - progress1

parent 39ed899c
<template>
<div
class="contributor-label"
:class="{'contributor-label--withCount': Boolean(count)}"
:style="`background: ${CONTRIBUTOR_LABELS[label].background}; color: ${CONTRIBUTOR_LABELS[label].text}`"
>
{{ label }}
<span v-if="count">({{ count }})</span>
</div>
</template>
<script lang="ts">
import {defineComponent} from '@nuxtjs/composition-api'
import {CONTRIBUTOR_LABELS} from '~/helpers/var'
export default defineComponent({
props: {
label: {
type: String,
default: '',
},
count: Number,
},
setup() {
return {CONTRIBUTOR_LABELS}
},
})
</script>
<style lang="scss">
.contributor-label {
padding: 5px;
border-radius: 6px;
text-transform: uppercase;
font-size: 0.7rem;
font-weight: 600;
cursor: pointer;
&--withCount {
font-size: 1.1rem;
padding: 7px 15px;
}
}
@media (max-width: 600px) {
.contributor-label {
&--withCount {
font-size: 0.8rem;
}
}
}
</style>
<template>
<div class="contributors">
<h1>Contributors</h1>
<div class="contributors__subtitle">
We're a decentralized project, running on more than
{{ $accessor.shuffledContributors.length }} people contributing regularly
to Hive
</div>
<div class="contributors__labels">
<ContributorsContributorLabel
v-for="label in contributorLabels"
:key="label.value"
:class="{
'contributors__label--inactive':
$route.query.t && $route.query.t !== label.value,
}"
:label="label.value"
:count="label.count"
@click.native="filterLabel(label.value)"
/>
</div>
<div class="contributors__container">
<ContributorsContributor
v-for="contributor in $accessor.contributors"
:key="contributor.id"
class="contributors__contributor"
:contributor="contributor"
/>
</div>
</div>
</template>
<script lang="ts">
import {
defineComponent,
useAsync,
computed,
ref,
watch,
useRoute,
} from '@nuxtjs/composition-api'
import {shuffleArray, routerPush} from '~/helpers/util'
import {CONTRIBUTORS, CONTRIBUTOR_LABELS} from '~/helpers/var'
import {IContributor} from '~/types'
export default defineComponent({
props: {
full: {
type: Boolean,
default: true,
},
},
setup(_props, {root}) {
const route = useRoute()
const contributorLabels = computed(() =>
Object.keys(CONTRIBUTOR_LABELS)
.filter((l) => {
return root.$accessor.shuffledContributors.filter(
(c) => !c.inactive && c.labels.includes(l as any),
)[0]
})
.map((l) => {
return {
value: l,
count: root.$accessor.shuffledContributors.filter(
(c) => !c.inactive && c.labels.includes(l as any),
).length,
}
}),
)
const filteredContributors = ref([] as any)
const getFilteredContributors = (key) => {
root.$accessor.setContributors(
root.$accessor.shuffledContributors.filter(
(e) => !e.inactive && (!key || e.labels.includes(key)),
),
)
}
useAsync(() => {
if (root.$accessor.contributors.length <= 0)
getFilteredContributors(route.value.query.t)
})
watch(
() => route.value.query.t,
(newT) => getFilteredContributors(newT),
)
return {
filteredContributors: filteredContributors as IContributor[],
contributorLabels,
}
},
methods: {
async filterLabel(key: string) {
if (this.$route.query.t === key) {
await routerPush(this, `/about`)
} else {
await routerPush(this, `/about?t=${key}`)
}
},
},
})
</script>
<style lang="scss">
.contributors {
display: flex;
flex-flow: column nowrap;
align-items: center;
max-width: 1000px;
width: 100%;
&__subtitle {
margin-bottom: 10px;
}
&__labels {
display: flex;
flex-flow: row wrap;
margin-top: 20px;
margin-bottom: 15px;
.contributor-label {
margin-right: 12px;
margin-bottom: 8px;
}
}
&__label {
&--inactive {
opacity: 0.333;
&:hover {
opacity: 0.75;
}
}
}
&__container {
display: flex;
flex-flow: row wrap;
justify-content: space-between;
width: 100%;
}
&__contributor {
margin: 15px;
}
}
</style>
<template>
<div class="contributors-contributor">
<img
class="contributors-contributor__image"
:src="
contributor.image
? getImage(contributor.image)
: `https://images.hive.blog/u/${contributor.social.hive}/avatar/large`
"
/>
<a
class="contributors-contributor__name"
:href="`${links.hive}${contributor.social.hive}`"
target="_blank"
rel="nofollow noopener noreferrer"
>{{ contributor.name }}</a
>
<div class="contributors-contributor__label">
{{ contributor.labels.join(' & ') }}
</div>
<div class="contributors-contributor__socials">
<a
v-for="social in Object.entries(contributor.social)"
:key="social[0]"
:href="`${links[social[0]]}${social[1]}`"
target="_blank"
rel="nofollow noopener noreferrer"
>
<fa-icon
class="contributors-contributor__icon"
:icon="['fab', social[0]]"
/>
</a>
</div>
</div>
</template>
<script lang="ts">
import {defineComponent} from '@nuxtjs/composition-api'
import {IContributor} from '~/types/index'
export default defineComponent({
props: {
contributor: {
type: Object,
default: {} as IContributor,
},
},
setup() {
const getImage = (image) => {
try {
return require(`~/assets/images/contributors/${image}`)
} catch (error) {
return ''
}
}
const links = {
linkedin: 'https://www.linkedin.com/in/',
hive: 'https://hive.blog/@',
twitter: 'https://twitter.com/',
}
return {getImage, links}
},
})
</script>
<style lang="scss">
.contributors-contributor {
display: flex;
flex-flow: column nowrap;
padding: 14px;
background: #e2e2ec;
border-radius: 5px;
&__image {
height: 180px;
width: 180px;
object-fit: contain;
border-radius: 10px;
}
&__name {
font-size: 1.2rem;
font-weight: 700;
padding: 6px 10px;
margin: 10px 4px 10px 4px;
background: #f0f0f7;
color: #555562;
border-radius: 14px 14px 1px 1px;
text-align: center;
cursor: pointer;
}
&__labels {
display: flex;
}
&__label {
font-size: 0.8rem;
color: #787885;
text-align: center;
}
&__socials {
display: flex;
align-items: center;
justify-content: center;
margin-top: 5px;
}
&__icon {
height: 20px;
width: 20px;
cursor: pointer;
margin: 5px 6px;
opacity: 1;
color: #787885;
}
}
</style>
import {IContributor, ContributorLabel} from '~/types'
/**
* id: Hive account name
* name: Display name
*/
export const CONTRIBUTORS: IContributor[] = [
{
id: 'blocktrades',
name: 'Dan Notestein',
social: {
hive: 'blocktrades',
linkedin: 'dannotestein',
},
labels: [ContributorLabel.coreDeveloper, ContributorLabel.blockProducer],
},
{
id: 'mahdiyari',
name: 'Mahdi Yari',
social: {
hive: 'mahdiyari',
twitter: 'MahdiYari4',
},
labels: [ContributorLabel.developer, ContributorLabel.blockProducer],
},
{
id: 'gtg',
name: 'Gandalf',
social: {
hive: 'gtg',
},
labels: [ContributorLabel.coreDeveloper, ContributorLabel.blockProducer],
},
{
id: 'bartekwrona',
name: 'Bartek Wrona',
image: 'bartekwrona.png',
social: {
hive: 'bartek',
},
labels: [ContributorLabel.coreDeveloper],
},
{
id: 'wolf',
name: 'Wolf',
social: {
hive: 'therealwolf',
twitter: 'nftimo',
},
labels: [ContributorLabel.developer, ContributorLabel.blockProducer],
},
{
id: 'brianoflondon',
name: 'Brian of London',
social: {
hive: 'brianoflondon',
},
labels: [ContributorLabel.marketing, ContributorLabel.developer],
},
{
id: 'goodkarma',
name: 'Good Karma',
social: {
hive: 'good-karma',
},
labels: [ContributorLabel.developer, ContributorLabel.blockProducer],
},
{
id: 'roelandp',
name: 'Roeland P.',
social: {
hive: 'roelandp',
},
labels: [ContributorLabel.developer, ContributorLabel.blockProducer],
},
{
id: 'howo',
name: 'Howo',
social: {
hive: 'howo',
},
labels: [ContributorLabel.coreDeveloper, ContributorLabel.blockProducer],
},
{
id: 'ausbitbank',
name: 'Ausbitbank',
social: {
hive: 'ausbitbank',
},
labels: [ContributorLabel.developer, ContributorLabel.blockProducer],
},
{
id: 'pharesim',
name: 'Pharesim',
social: {
hive: 'pharesim',
},
labels: [ContributorLabel.blockProducer],
},
{
id: 'themarkymark',
name: 'Marky',
social: {
hive: 'themarkymark',
},
labels: [ContributorLabel.blockProducer],
},
{
id: 'arcange',
name: 'Arcange',
social: {
hive: 'arcange',
},
labels: [ContributorLabel.developer, ContributorLabel.blockProducer],
},
{
id: 'yabapmatt',
name: 'Matt Rosen',
social: {
hive: 'yabapmatt',
},
labels: [ContributorLabel.developer, ContributorLabel.blockProducer],
},
{
id: 'anyx',
name: 'Anyx',
social: {
hive: 'anyx',
},
labels: [ContributorLabel.blockProducer],
},
{
id: 'someguy123',
name: 'Someguy',
social: {
hive: 'someguy123',
},
labels: [ContributorLabel.developer, ContributorLabel.blockProducer],
},
{
id: 'stoodkev',
name: 'Stoodkev',
social: {
hive: 'stoodkev',
},
labels: [ContributorLabel.developer, ContributorLabel.blockProducer],
},
{
id: 'abit',
name: 'Abit',
social: {
hive: 'abit',
},
labels: [ContributorLabel.coreDeveloper, ContributorLabel.blockProducer],
},
{
id: 'emrebeyler',
name: 'Emre',
social: {
hive: 'emrebeyler',
},
labels: [ContributorLabel.developer, ContributorLabel.blockProducer],
},
{
id: 'aggroed',
name: 'Aggroed',
social: {
hive: 'aggroed',
},
labels: [ContributorLabel.marketing, ContributorLabel.blockProducer],
},
{
id: 'drakos',
name: 'Drakos',
social: {
hive: 'drakos',
},
labels: [ContributorLabel.developer, ContributorLabel.blockProducer],
},
{
id: 'crimsonclad',
name: 'Crimsonclad',
social: {
hive: 'crimsonclad',
},
labels: [ContributorLabel.marketing, ContributorLabel.blockProducer],
},
{
id: 'theycallmedan',
name: 'Dan Hensley',
social: {
hive: 'theycallmedan',
},
labels: [ContributorLabel.marketing],
},
{
id: 'fredrikaa',
name: 'Fredrikaa',
social: {
hive: 'fredrikaa',
},
labels: [ContributorLabel.marketing, ContributorLabel.blockProducer],
},
{
id: 'guiltyparties',
name: 'Guiltyparties',
social: {
hive: 'guiltyparties',
},
labels: [ContributorLabel.blockProducer],
},
{
id: 'acidyo',
name: 'Acid',
social: {
hive: 'acidyo',
},
labels: [ContributorLabel.blockProducer],
},
{
id: 'lordbutterfly',
name: 'Lord Butterfly',
social: {
hive: 'lordbutterfly',
},
labels: [ContributorLabel.marketing],
},
{
id: 'smooth',
name: 'Smooth',
social: {
hive: 'smooth',
},
labels: [ContributorLabel.blockProducer],
},
]
export const CONTRIBUTOR_LABELS = {
[ContributorLabel.coreDeveloper]: {
background: '#7eaafa8c',
text: 'rgb(54 100 182)',
},
[ContributorLabel.marketing]: {
background: '#faa07e8c',
text: 'rgb(166 77 43)',
},
[ContributorLabel.developer]: {
background: '#7ed2fa8c',
text: '#0426378c',
},
[ContributorLabel.blockProducer]: {
background: '#917efa8c',
text: '#0c062d8c',
},
}
/*
[ContributorLabel.coreDeveloper]: {
background: '#faea7e8c',
text: 'rgb(117 104 20)',
},
social: {
background: '#7efac08c',
text: 'rgb(20 121 75)',
},
*/
......@@ -5,6 +5,7 @@ export * from './navigation'
export * from './socialmedias'
export * from './statswebsites'
export * from './wallets'
export * from './contributors'
export const INFOBAR = {
show: false,
......
......@@ -10,10 +10,10 @@
{{ $t(`about.title`) }} 3<span style="color: #e31337">.</span>0