135 lines
4.5 KiB
Vue
135 lines
4.5 KiB
Vue
<template>
|
|
<NotFound v-if="!profile"/>
|
|
<div v-else class="container">
|
|
<div class="mb-3 d-flex justify-content-between align-items-center flex-column flex-md-row">
|
|
<h2 class="text-nowrap">
|
|
<Avatar :user="profile"/>
|
|
@{{username}}
|
|
</h2>
|
|
<div class="list-group" v-if="Object.keys(profiles).length > 1">
|
|
<LocaleLink v-for="(options, locale) in locales" :key="locale" v-if="profiles[locale] !== undefined"
|
|
:locale="locale" :link="`/@${username}`"
|
|
:class="['list-group-item list-group-item-action small px-3 py-2 text-center', locale === config.locale ? 'active disabled' : '']">
|
|
{{options.name}}
|
|
</LocaleLink>
|
|
</div>
|
|
</div>
|
|
|
|
<section v-if="profile.description.trim().length">
|
|
<p v-for="line in profile.description.split('\n')" class="mb-1">
|
|
{{ line }}
|
|
</p>
|
|
</section>
|
|
|
|
<section v-if="profile.age || Object.keys(profile.links).length">
|
|
<ul class="list-inline">
|
|
<li v-if="profile.age" class="list-inline-item">
|
|
<Icon v="birthday-cake"/>
|
|
{{ profile.age }}
|
|
</li>
|
|
<li v-for="link in profile.links" class="list-inline-item pr-2">
|
|
<ProfileLink :link="link"/>
|
|
</li>
|
|
</ul>
|
|
</section>
|
|
|
|
<section v-if="Object.keys(profile.flags).length">
|
|
<ul class="list-inline">
|
|
<li v-for="(name, flag) in profile.flags" class="list-inline-item pr-2">
|
|
<Flag :name="name" :src="`/flags/${flag}.png`"/>
|
|
</li>
|
|
</ul>
|
|
</section>
|
|
|
|
<section class="d-flex">
|
|
<div class="w-50" v-if="Object.keys(profile.names).length">
|
|
<h3>
|
|
<Icon v="signature"/>
|
|
<T>profile.names</T>
|
|
</h3>
|
|
|
|
<ul class="list-unstyled">
|
|
<li v-for="(opinion, name) in profile.names"><Opinion :word="name" :opinion="opinion"/></li>
|
|
</ul>
|
|
</div>
|
|
<div class="w-50" v-if="Object.keys(profile.pronouns).length">
|
|
<h3>
|
|
<Icon v="tags"/>
|
|
<T>profile.pronouns</T>
|
|
</h3>
|
|
|
|
<ul class="list-unstyled">
|
|
<li v-for="(opinion, pronoun) in profile.pronouns"><Opinion :word="buildTemplate(pronoun).name('')" :opinion="opinion" :link="`/${pronoun}`"/></li>
|
|
</ul>
|
|
</div>
|
|
</section>
|
|
|
|
<section>
|
|
<h3>
|
|
<Icon v="scroll-old"/>
|
|
<T>profile.words</T>
|
|
</h3>
|
|
|
|
<div class="d-flex">
|
|
<div v-for="group in profile.words" v-if="Object.keys(profile.words).length" class="w-25">
|
|
<ul class="list-unstyled">
|
|
<li v-for="(opinion, word) in group"><Opinion :word="word" :opinion="opinion"/></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { head } from "../src/helpers";
|
|
import { templates } from "~/src/data";
|
|
import { buildTemplate } from "../src/buildTemplate";
|
|
import LocaleLink from "../components/LocaleLink";
|
|
|
|
export default {
|
|
components: {LocaleLink},
|
|
data() {
|
|
return {
|
|
username: this.$route.params.pathMatch,
|
|
profiles: {},
|
|
}
|
|
},
|
|
async asyncData({ app, route }) {
|
|
return {
|
|
profiles: await app.$axios.$get(`/profile/get/${route.params.pathMatch}`),
|
|
};
|
|
},
|
|
methods: {
|
|
buildTemplate(link) {
|
|
return buildTemplate(templates, link);
|
|
},
|
|
},
|
|
computed: {
|
|
profile() {
|
|
for (let locale in this.profiles) {
|
|
if (locale === this.config.locale) {
|
|
return this.profiles[locale];
|
|
}
|
|
}
|
|
|
|
return null;
|
|
},
|
|
},
|
|
head() {
|
|
return head({
|
|
title: `@${this.username}`,
|
|
banner: `banner/@${this.username}.png`,
|
|
});
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.avatar {
|
|
width: 100%;
|
|
max-width: 5rem;
|
|
max-height: 5rem;
|
|
}
|
|
</style>
|