309 lines
7.9 KiB
Vue
309 lines
7.9 KiB
Vue
<template>
|
|
<div class="normal-page">
|
|
<div>
|
|
<aside class="card sidebar normal-page__sidebar">
|
|
<img
|
|
class="sidebar__item profile-picture"
|
|
:src="user.avatar_url"
|
|
:alt="user.username"
|
|
/>
|
|
<h1 class="sidebar__item username">{{ user.username }}</h1>
|
|
<nuxt-link
|
|
v-if="$auth.user && $auth.user.id !== user.id"
|
|
:to="`/create/report?id=${user.id}&t=user`"
|
|
class="sidebar__item report-button iconified-button"
|
|
>
|
|
<ReportIcon />
|
|
Report
|
|
</nuxt-link>
|
|
<div class="sidebar__item">
|
|
<Badge v-if="user.role === 'admin'" type="admin" color="red" />
|
|
<Badge
|
|
v-else-if="user.role === 'moderator'"
|
|
type="moderator"
|
|
color="yellow"
|
|
/>
|
|
<Badge v-else type="developer" color="green" />
|
|
</div>
|
|
<h3 class="sidebar__item">About me</h3>
|
|
<span v-if="user.bio" class="sidebar__item bio">{{ user.bio }}</span>
|
|
<div class="sidebar__item stats-block">
|
|
<div class="stats-block__item secondary-stat">
|
|
<SunriseIcon class="secondary-stat__icon" />
|
|
<span class="secondary-stat__text">
|
|
Joined {{ $dayjs(user.created).fromNow() }}
|
|
</span>
|
|
</div>
|
|
<div class="stats-block__item secondary-stat">
|
|
<UserIcon class="secondary-stat__icon" />
|
|
<span class="secondary-stat__text">User ID: {{ user.id }}</span>
|
|
</div>
|
|
</div>
|
|
<div class="sidebar__item stats-block">
|
|
<div class="stats-block__item primary-stat">
|
|
<DownloadIcon class="primary-stat__icon" />
|
|
<div class="primary-stat__text">
|
|
<span class="primary-stat__counter">{{ sumDownloads() }}</span>
|
|
<span class="primary-stat__label">downloads</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</aside>
|
|
</div>
|
|
<div class="normal-page__content">
|
|
<nav class="card user-navigation">
|
|
<ThisOrThat v-model="selectedProjectType" :items="projectTypes" />
|
|
<nuxt-link
|
|
v-if="$auth.user && $auth.user.id === user.id"
|
|
to="/create/project"
|
|
class="iconified-button brand-button-colors"
|
|
>
|
|
<PlusIcon />
|
|
Create a project
|
|
</nuxt-link>
|
|
</nav>
|
|
<Advertisement
|
|
type="banner"
|
|
small-screen="square"
|
|
ethical-ads-small
|
|
ethical-ads-big
|
|
/>
|
|
<div v-if="projects.length > 0">
|
|
<ProjectCard
|
|
v-for="project in selectedProjectType !== 'all'
|
|
? projects.filter((x) => x.project_type === selectedProjectType)
|
|
: projects"
|
|
:id="project.slug || project.id"
|
|
:key="project.id"
|
|
:name="project.title"
|
|
:description="project.description"
|
|
:created-at="project.published"
|
|
:updated-at="project.updated"
|
|
:downloads="project.downloads.toString()"
|
|
:follows="project.followers.toString()"
|
|
:icon-url="project.icon_url"
|
|
:categories="project.categories"
|
|
:client-side="project.client_side"
|
|
:server-side="project.server_side"
|
|
:status="project.status"
|
|
:type="project.project_type"
|
|
>
|
|
<nuxt-link
|
|
v-if="$auth.user && $auth.user.id === user.id"
|
|
class="iconified-button"
|
|
:to="`/${project.project_type}/${
|
|
project.slug ? project.slug : project.id
|
|
}/settings`"
|
|
>
|
|
<SettingsIcon />
|
|
Settings
|
|
</nuxt-link>
|
|
</ProjectCard>
|
|
</div>
|
|
<div v-else class="error">
|
|
<UpToDate class="icon" /><br />
|
|
<span v-if="$auth.user && $auth.user.id === user.id" class="text"
|
|
>You don't have any projects.<br />
|
|
Would you like to
|
|
<nuxt-link class="link" to="/create/project">create one</nuxt-link
|
|
>?</span
|
|
>
|
|
<span v-else class="text">This user has no projects!</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import ProjectCard from '~/components/ui/ProjectCard'
|
|
import ThisOrThat from '~/components/ui/ThisOrThat'
|
|
import Badge from '~/components/ui/Badge'
|
|
import Advertisement from '~/components/ads/Advertisement'
|
|
|
|
import ReportIcon from '~/assets/images/utils/report.svg?inline'
|
|
import SunriseIcon from '~/assets/images/utils/sunrise.svg?inline'
|
|
import DownloadIcon from '~/assets/images/utils/download-alt.svg?inline'
|
|
import SettingsIcon from '~/assets/images/utils/settings.svg?inline'
|
|
import PlusIcon from '~/assets/images/utils/plus.svg?inline'
|
|
import UpToDate from '~/assets/images/illustrations/up_to_date.svg?inline'
|
|
import UserIcon from '~/assets/images/utils/user.svg?inline'
|
|
|
|
export default {
|
|
auth: false,
|
|
components: {
|
|
ProjectCard,
|
|
SunriseIcon,
|
|
DownloadIcon,
|
|
ReportIcon,
|
|
Badge,
|
|
SettingsIcon,
|
|
PlusIcon,
|
|
ThisOrThat,
|
|
UpToDate,
|
|
UserIcon,
|
|
Advertisement,
|
|
},
|
|
async asyncData(data) {
|
|
try {
|
|
const [user, projects] = (
|
|
await Promise.all([
|
|
data.$axios.get(`user/${data.params.id}`, data.$auth.headers),
|
|
data.$axios.get(
|
|
`user/${data.params.id}/projects`,
|
|
data.$auth.headers
|
|
),
|
|
])
|
|
).map((it) => it.data)
|
|
|
|
return {
|
|
selectedProjectType: 'all',
|
|
user,
|
|
projects,
|
|
}
|
|
} catch {
|
|
data.error({
|
|
statusCode: 404,
|
|
message: 'User not found',
|
|
})
|
|
}
|
|
},
|
|
head() {
|
|
return {
|
|
title: this.user.username + ' - Modrinth',
|
|
meta: [
|
|
{
|
|
hid: 'og:type',
|
|
name: 'og:type',
|
|
content: 'website',
|
|
},
|
|
{
|
|
hid: 'og:title',
|
|
name: 'og:title',
|
|
content: this.user.username,
|
|
},
|
|
{
|
|
hid: 'apple-mobile-web-app-title',
|
|
name: 'apple-mobile-web-app-title',
|
|
content: this.user.username,
|
|
},
|
|
{
|
|
hid: 'og:description',
|
|
name: 'og:description',
|
|
content: this.user.bio,
|
|
},
|
|
{
|
|
hid: 'description',
|
|
name: 'description',
|
|
content:
|
|
this.user.bio +
|
|
' - View Minecraft mods on Modrinth today! Modrinth is a new and modern Minecraft modding platform.',
|
|
},
|
|
{
|
|
hid: 'og:url',
|
|
name: 'og:url',
|
|
content: `https://modrinth.com/user/${this.user.id}`,
|
|
},
|
|
{
|
|
hid: 'og:image',
|
|
name: 'og:image',
|
|
content:
|
|
this.user.avatar_url || 'https://cdn.modrinth.com/placeholder.png',
|
|
},
|
|
],
|
|
}
|
|
},
|
|
computed: {
|
|
projectTypes() {
|
|
const obj = { all: true }
|
|
|
|
for (const project of this.projects) {
|
|
obj[project.project_type] = true
|
|
}
|
|
|
|
return Object.keys(obj)
|
|
},
|
|
},
|
|
methods: {
|
|
formatNumber(x) {
|
|
return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',')
|
|
},
|
|
sumDownloads() {
|
|
let sum = 0
|
|
|
|
for (const projects of this.projects) {
|
|
sum += projects.downloads
|
|
}
|
|
|
|
return this.formatNumber(sum)
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.user-navigation {
|
|
align-items: center;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|
|
.sidebar__item:not(:last-child) {
|
|
margin: 0 0 0.75rem 0;
|
|
}
|
|
|
|
.profile-picture {
|
|
border-radius: var(--size-rounded-lg);
|
|
height: 8rem;
|
|
width: 8rem;
|
|
}
|
|
|
|
.username {
|
|
font-size: var(--font-size-xl);
|
|
}
|
|
|
|
.report-button {
|
|
display: inline-flex;
|
|
}
|
|
|
|
.bio {
|
|
display: block;
|
|
}
|
|
|
|
.stats-block__item {
|
|
margin-bottom: 0.25rem;
|
|
}
|
|
|
|
.secondary-stat {
|
|
align-items: center;
|
|
color: var(--color-text-secondary);
|
|
display: flex;
|
|
}
|
|
|
|
.secondary-stat__icon {
|
|
height: 1rem;
|
|
width: 1rem;
|
|
}
|
|
|
|
.secondary-stat__text {
|
|
margin-left: 0.25rem;
|
|
}
|
|
|
|
.primary-stat {
|
|
align-items: center;
|
|
display: flex;
|
|
}
|
|
|
|
.primary-stat__icon {
|
|
height: 1.25rem;
|
|
width: 1.25rem;
|
|
}
|
|
|
|
.primary-stat__text {
|
|
margin-left: 0.25rem;
|
|
}
|
|
|
|
.primary-stat__counter {
|
|
font-size: var(--font-size-lg);
|
|
font-weight: bold;
|
|
}
|
|
</style>
|