AstralRinth/pages/user/_id.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 class="stats-block__item primary-stat">
            <HeartIcon class="primary-stat__icon" />
            <div class="primary-stat__text">
              <span class="primary-stat__counter">{{ sumFollows() }}</span>
              <span class="primary-stat__label">followers of projects</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 HeartIcon from '~/assets/images/utils/heart.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,
    HeartIcon,
    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)
    },
    sumFollows() {
      let sum = 0

      for (const projects of this.projects) {
        sum += projects.followers
      }

      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>