Tooltips, alternate ad text, better error messages

assets/styles/components.scss

@@ -112,3 +112,96 @@
     color: var(--color-grey-2);
   }
 }
+
+.tooltip {
+  display: block !important;
+  z-index: 10000;
+
+  .tooltip-inner {
+    background: var(--color-grey-2);
+    color: var(--color-text);
+    padding: 5px 10px 4px;
+  }
+
+  .tooltip-arrow {
+    width: 0;
+    height: 0;
+    border-style: solid;
+    position: absolute;
+    margin: 5px;
+    border-color: var(--color-grey-2);
+    z-index: 1;
+  }
+
+  &[x-placement^="top"] {
+    margin-bottom: 5px;
+
+    .tooltip-arrow {
+      border-width: 5px 5px 0 5px;
+      border-left-color: transparent !important;
+      border-right-color: transparent !important;
+      border-bottom-color: transparent !important;
+      bottom: -5px;
+      left: calc(50% - 5px);
+      margin-top: 0;
+      margin-bottom: 0;
+    }
+  }
+
+  &[x-placement^="bottom"] {
+    margin-top: 5px;
+
+    .tooltip-arrow {
+      border-width: 0 5px 5px 5px;
+      border-left-color: transparent !important;
+      border-right-color: transparent !important;
+      border-top-color: transparent !important;
+      top: -5px;
+      left: calc(50% - 5px);
+      margin-top: 0;
+      margin-bottom: 0;
+    }
+  }
+
+  &[x-placement^="right"] {
+    margin-left: 5px;
+
+    .tooltip-arrow {
+      border-width: 5px 5px 5px 0;
+      border-left-color: transparent !important;
+      border-top-color: transparent !important;
+      border-bottom-color: transparent !important;
+      left: -5px;
+      top: calc(50% - 5px);
+      margin-left: 0;
+      margin-right: 0;
+    }
+  }
+
+  &[x-placement^="left"] {
+    margin-right: 5px;
+
+    .tooltip-arrow {
+      border-width: 5px 0 5px 5px;
+      border-top-color: transparent !important;
+      border-right-color: transparent !important;
+      border-bottom-color: transparent !important;
+      right: -5px;
+      top: calc(50% - 5px);
+      margin-left: 0;
+      margin-right: 0;
+    }
+  }
+
+  &[aria-hidden='true'] {
+    visibility: hidden;
+    opacity: 0;
+    transition: opacity .15s, visibility .15s;
+  }
+
+  &[aria-hidden='false'] {
+    visibility: visible;
+    opacity: 1;
+    transition: opacity .15s;
+  }
+}

components/EthicalAd.vue

@@ -1,10 +1,19 @@
 <template>
-  <div
+  <div>
-    class="ethical-ad"
+    <div
-    data-ea-publisher="modrinth-com"
+      v-if="!showAlt"
-    :data-ea-type="type"
+      class="ethical-ad"
-    data-ea-manual="true"
+      data-ea-publisher="modrinth-com"
-  />
+      :data-ea-type="type"
+      data-ea-manual="true"
+    />
+    <div v-else class="alt">
+      <p>
+        A privacy-focused ad used to fund this site used to be here. Please
+        disable your content blocker to support Modrinth and it's authors.
+      </p>
+    </div>
+  </div>
 </template>
 
 <script>
@@ -16,13 +25,35 @@ export default {
       default: 'text',
     },
   },
+  data() {
+    return {
+      showAlt: false,
+    }
+  },
   mounted() {
     try {
       // eslint-disable-next-line no-undef
-      ethicalads.load()
+      if (typeof ethicalads === 'undefined') {
+        this.$notify({
+          group: 'ads',
+          title: 'Please disable your Content Blocker',
+          text:
+            'Modrinth uses privacy-focused ads, from EthicalAds. Ads are the only way that our site is able to pay modders and support itself. Our ads are non-intrusive and minimal, and we only have one per page. We can assure you that none of your data is sold or used for tracking purposes.',
+          type: 'error',
+        })
 
-      const element = document.getElementsByClassName('ethical-ad')
+        this.showAlt = true
-      element[0].className = 'ethical-ad loaded ' + this.$colorMode.preference
+      } else {
+        const element = document.getElementsByClassName('ethical-ad')[0]
+
+        element.className = 'ethical-ad'
+        element.innerHTML = ''
+
+        // eslint-disable-next-line no-undef
+        ethicalads.load()
+
+        element.className = 'ethical-ad loaded ' + this.$colorMode.preference
+      }
     } catch (err) {
       // eslint-disable-next-line no-console
       console.error(err)
@@ -31,7 +62,7 @@ export default {
 }
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
 [data-ea-type='text'] {
   min-height: 70px;
 }
@@ -39,4 +70,13 @@ export default {
   margin: auto 10px;
   min-height: 260px;
 }
+
+.alt {
+  font-size: 14px;
+  border-radius: var(--size-rounded-sm);
+  background-color: var(--color-grey-1);
+  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.15);
+  padding: 0.7em 1em;
+  margin: 1em 1em 2em 1em;
+}
 </style>

components/ModPage.vue

@@ -57,78 +57,83 @@
       </div>
       <slot />
     </div>
-    <section class="mod-info">
+    <div>
-      <div class="mod-stats">
+      <section class="mod-info">
-        <h3>Info</h3>
+        <div class="mod-stats">
-        <p>{{ mod.downloads }} Downloads</p>
+          <h3>Info</h3>
-        <p>Created {{ $dayjs(mod.published).fromNow() }}</p>
+          <p>{{ mod.downloads }} Downloads</p>
-        <p>Updated {{ $dayjs(mod.updated).fromNow() }}</p>
+          <p>Created {{ $dayjs(mod.published).fromNow() }}</p>
-      </div>
+          <p>Updated {{ $dayjs(mod.updated).fromNow() }}</p>
-      <div>
+        </div>
-        <h3>Members</h3>
+        <div>
-        <div
+          <h3>Members</h3>
-          v-for="member in members"
+          <div
-          :key="member.user_id"
+            v-for="member in members"
-          class="team-member columns"
+            :key="member.user_id"
-        >
+            class="team-member columns"
-          <img :src="member.avatar_url" alt="profile-picture" />
+          >
-          <div class="member-info">
+            <img :src="member.avatar_url" alt="profile-picture" />
-            <nuxt-link :to="'/user/' + member.user_id">
+            <div class="member-info">
-              <h4>{{ member.name }}</h4>
+              <nuxt-link :to="'/user/' + member.user_id">
+                <h4>{{ member.name }}</h4>
+              </nuxt-link>
+              <p>{{ member.role }}</p>
+            </div>
+          </div>
+        </div>
+        <div v-if="versions.length > 0">
+          <h3>Featured Versions</h3>
+          <div
+            v-for="version in versions"
+            :key="version.id"
+            class="featured-version columns"
+          >
+            <div class="version-info">
+              <div class="columns">
+                <h4 class="limit-text-width">
+                  {{ version.name }}
+                </h4>
+                <p
+                  v-if="version.version_type === 'release'"
+                  class="badge green"
+                >
+                  Release
+                </p>
+                <p v-if="version.version_type === 'beta'" class="badge yellow">
+                  Beta
+                </p>
+                <p v-if="version.version_type === 'alpha'" class="badge red">
+                  Alpha
+                </p>
+              </div>
+              <div class="columns info-2">
+                <p class="version-number limit-text-width">
+                  {{ version.version_number }}
+                </p>
+                <FabricIcon
+                  v-if="version.loaders.includes('fabric')"
+                  stroke="#AC6C3A"
+                />
+                <ForgeIcon
+                  v-if="version.loaders.includes('forge')"
+                  stroke="#8B81E6"
+                />
+                <p
+                  v-if="version.game_versions.length > 0"
+                  class="game-version limit-text-width"
+                >
+                  {{ version.game_versions[0] }}
+                </p>
+              </div>
+            </div>
+            <nuxt-link :to="'/mod/' + mod.id + '/version/' + version.id">
+              <DownloadIcon />
             </nuxt-link>
-            <p>{{ member.role }}</p>
           </div>
+          <EthicalAd type="image" />
         </div>
-      </div>
+      </section>
-      <div v-if="versions.length > 0">
+    </div>
-        <h3>Featured Versions</h3>
-        <div
-          v-for="version in versions"
-          :key="version.id"
-          class="featured-version columns"
-        >
-          <div class="version-info">
-            <div class="columns">
-              <h4 class="limit-text-width">
-                {{ version.name }}
-              </h4>
-              <p v-if="version.version_type === 'release'" class="badge green">
-                Release
-              </p>
-              <p v-if="version.version_type === 'beta'" class="badge yellow">
-                Beta
-              </p>
-              <p v-if="version.version_type === 'alpha'" class="badge red">
-                Alpha
-              </p>
-            </div>
-            <div class="columns info-2">
-              <p class="version-number limit-text-width">
-                {{ version.version_number }}
-              </p>
-              <FabricIcon
-                v-if="version.loaders.includes('fabric')"
-                stroke="#AC6C3A"
-              />
-              <ForgeIcon
-                v-if="version.loaders.includes('forge')"
-                stroke="#8B81E6"
-              />
-              <p
-                v-if="version.game_versions.length > 0"
-                class="game-version limit-text-width"
-              >
-                {{ version.game_versions[0] }}
-              </p>
-            </div>
-          </div>
-          <nuxt-link :to="'/mod/' + mod.id + '/version/' + version.id">
-            <DownloadIcon />
-          </nuxt-link>
-        </div>
-        <EthicalAd type="image" />
-      </div>
-    </section>
   </div>
 </template>
 
@@ -243,7 +248,6 @@ export default {
 
 .mod-info {
   top: 1rem;
-  max-height: calc(100vh - 3rem);
   position: sticky;
   min-width: 270px;
   max-width: 270px;

components/ModResult.vue

@@ -21,11 +21,22 @@
         <DownloadIcon stroke="#3cdb36" />
         <p>{{ formatNumber(downloads) }}</p>
       </div>
-      <div class="result-image columns">
+      <div
+        v-tooltip="
+          $dayjs(createdAt).format('[Created on] YYYY-MM-DD [at] HH:mm A')
+        "
+        class="result-image columns"
+      >
         <CalendarIcon fill="#099fef" />
         <p>{{ $dayjs(createdAt).fromNow() }}</p>
       </div>
-      <div v-if="updatedAt" class="result-image columns">
+      <div
+        v-if="updatedAt"
+        v-tooltip="
+          $dayjs(updatedAt).format('[Updated on] YYYY-MM-DD [at] HH:mm A')
+        "
+        class="result-image columns"
+      >
         <svg
           viewBox="0 0 24 24"
           fill="none"

layouts/default.vue

@@ -222,6 +222,13 @@
       </nav>
     </aside>
     <main>
+      <notifications group="main" position="bottom right" />
+      <notifications
+        group="ads"
+        position="bottom right"
+        :duration="-1"
+        :ignore-duplicates="true"
+      />
       <div class="alpha-alert">
         Modrinth is in early alpha. You can join our
         <a href="https://discord.gg/gFRbNQ2">discord</a> for updates!
@@ -610,7 +617,8 @@ export default {
   background-color: var(--color-grey-1);
 
   a {
-    color: var(--color-grey-3);
+    text-decoration: underline;
+    color: var(--color-grey-5);
   }
 }
 

layouts/home.vue

@@ -23,13 +23,13 @@
         <h4 class="pages">Pages</h4>
         <nuxt-link to="/">Home</nuxt-link>
         <nuxt-link to="/mods">Mods</nuxt-link>
-        <nuxt-link to="/packs">Packs</nuxt-link>
+        <nuxt-link to="/modpacks">Packs</nuxt-link>
         <nuxt-link to="/about">About</nuxt-link>
         <nuxt-link to="/guides">Guides</nuxt-link>
       </div>
       <div class="column">
         <h4 class="developers">Developers</h4>
-        <nuxt-link to="/developers">Documentation</nuxt-link>
+        <nuxt-link to="/documentation">Documentation</nuxt-link>
         <a href="https://github.com/modrinth">Open Source</a>
         <a href="https://github.com/modrinth/knossos/issues">Issues</a>
       </div>

nuxt.config.js

@@ -93,7 +93,7 @@ export default {
    ** Plugins to load before mounting the App
    ** https://nuxtjs.org/guide/plugins
    */
-  plugins: [],
+  plugins: ['~/plugins/vue-tooltip.js', '~/plugins/vue-notification.js'],
   /*
    ** Auto import components
    ** See https://nuxtjs.org/api/configuration-components
@@ -159,7 +159,9 @@ export default {
    ** Build configuration
    ** See https://nuxtjs.org/api/configuration-build/
    */
-  build: {},
+  build: {
+    transpile: ['vue-tooltip', 'vue-notification'],
+  },
   loading: {
     color: 'green',
     height: '5px',

package-lock.json

@@ -9452,6 +9452,11 @@
       "integrity": "sha512-Nc3IT5yHzflTfbjgqWcCPpo7DaKy4FnpB0l/zCAW0Tc7jxAiuqSxHasntB3D7887LSrA93kDJ9IXovxJYxyLCA==",
       "dev": true
     },
+    "popper.js": {
+      "version": "1.16.1",
+      "resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.16.1.tgz",
+      "integrity": "sha512-Wb4p1J4zyFTbM+u6WuO4XstYx4Ky9Cewe4DWrel7B0w6VVICvPwdOpotjzcf6eD8TsckVnIMNONQyPIUFOUbCQ=="
+    },
     "posix-character-classes": {
       "version": "0.1.1",
       "resolved": "https://registry.npmjs.org/posix-character-classes/-/posix-character-classes-0.1.1.tgz",
@@ -12680,6 +12685,16 @@
       "resolved": "https://registry.npmjs.org/uuid/-/uuid-3.4.0.tgz",
       "integrity": "sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A=="
     },
+    "v-tooltip": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/v-tooltip/-/v-tooltip-2.0.3.tgz",
+      "integrity": "sha512-KZZY3s+dcijzZmV2qoDH4rYmjMZ9YKGBVoUznZKQX0e3c2GjpJm3Sldzz8HHH2Ud87JqhZPB4+4gyKZ6m98cKQ==",
+      "requires": {
+        "lodash": "^4.17.15",
+        "popper.js": "^1.16.0",
+        "vue-resize": "^0.4.5"
+      }
+    },
     "v8-compile-cache": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/v8-compile-cache/-/v8-compile-cache-2.1.1.tgz",
@@ -12815,6 +12830,16 @@
       "resolved": "https://registry.npmjs.org/vue-no-ssr/-/vue-no-ssr-1.1.1.tgz",
       "integrity": "sha512-ZMjqRpWabMPqPc7gIrG0Nw6vRf1+itwf0Itft7LbMXs2g3Zs/NFmevjZGN1x7K3Q95GmIjWbQZTVerxiBxI+0g=="
     },
+    "vue-notification": {
+      "version": "1.3.20",
+      "resolved": "https://registry.npmjs.org/vue-notification/-/vue-notification-1.3.20.tgz",
+      "integrity": "sha512-vPj67Ah72p8xvtyVE8emfadqVWguOScAjt6OJDEUdcW5hW189NsqvfkOrctxHUUO9UYl9cTbIkzAEcPnHu+zBQ=="
+    },
+    "vue-resize": {
+      "version": "0.4.5",
+      "resolved": "https://registry.npmjs.org/vue-resize/-/vue-resize-0.4.5.tgz",
+      "integrity": "sha512-bhP7MlgJQ8TIkZJXAfDf78uJO+mEI3CaLABLjv0WNzr4CcGRGPIAItyWYnP6LsPA4Oq0WE+suidNs6dgpO4RHg=="
+    },
     "vue-router": {
       "version": "3.4.7",
       "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-3.4.7.tgz",

package.json

@@ -19,7 +19,9 @@
     "@nuxtjs/sitemap": "^2.4.0",
     "marked": "^1.2.0",
     "nuxt": "^2.14.7",
+    "v-tooltip": "^2.0.3",
     "vue-multiselect": "^2.1.6",
+    "vue-notification": "^1.3.20",
     "xss": "^1.0.8"
   },
   "devDependencies": {

pages/mod/_id/version/_version.vue

@@ -54,10 +54,6 @@
     </div>
     <Popup :show-popup="showPopup">
       <h3 class="popup-title">Upload Files</h3>
-      <div v-if="currentError" class="error">
-        <h4>Error</h4>
-        <p>{{ currentError }}</p>
-      </div>
       <FileInput
         input-id="version-files"
         input-accept="application/*"
@@ -157,7 +153,6 @@ export default {
   data() {
     return {
       showPopup: false,
-      currentError: null,
       filesToUpload: [],
     }
   },
@@ -173,7 +168,6 @@ export default {
     },
     async uploadFiles() {
       this.$nuxt.$loading.start()
-      this.currentError = null
 
       const formData = new FormData()
 
@@ -200,7 +194,12 @@ export default {
 
         await this.$router.go(null)
       } catch (err) {
-        this.currentError = err.response.data.description
+        this.$notify({
+          group: 'main',
+          title: 'An Error Occurred',
+          text: err.response.data.description,
+          type: 'error',
+        })
         window.scrollTo({ top: 0, behavior: 'smooth' })
       }
 
@@ -394,10 +393,4 @@ export default {
     background-color: var(--color-bg);
   }
 }
-
-.error {
-  margin: 20px 0;
-  border-left: #e04e3e 7px solid;
-  padding: 5px 20px 20px 20px;
-}
 </style>

pages/mod/_id/versions.vue

@@ -261,7 +261,6 @@ export default {
   data() {
     return {
       showPopup: false,
-      currentError: null,
       createdVersion: {},
     }
   },
@@ -278,7 +277,6 @@ export default {
     },
     async createVersion() {
       this.$nuxt.$loading.start()
-      this.currentError = null
 
       const formData = new FormData()
 
@@ -310,7 +308,12 @@ export default {
 
         await this.$router.go(null)
       } catch (err) {
-        this.currentError = err.response.data.description
+        this.$notify({
+          group: 'main',
+          title: 'An Error Occurred',
+          text: err.response.data.description,
+          type: 'error',
+        })
         window.scrollTo({ top: 0, behavior: 'smooth' })
       }
 

pages/mod/create.vue

@@ -1,10 +1,6 @@
 <template>
   <div class="content">
     <h2>Create Mod</h2>
-    <section v-if="currentError" class="error">
-      <h3>Error</h3>
-      <p>{{ currentError }}</p>
-    </section>
     <section>
       <h3>Initial Data</h3>
       <div class="initial">
@@ -315,7 +311,6 @@ export default {
   data() {
     return {
       previewImage: null,
-      currentError: null,
       compiledBody: '',
       releaseChannels: ['beta', 'alpha', 'release'],
       currentVersionIndex: -1,
@@ -334,7 +329,6 @@ export default {
   methods: {
     async createMod() {
       this.$nuxt.$loading.start()
-      this.currentError = null
 
       const formData = new FormData()
 
@@ -386,7 +380,13 @@ export default {
 
         await this.$router.replace('/dashboard/projects')
       } catch (err) {
-        this.currentError = err.response.data.description
+        this.$notify({
+          group: 'main',
+          title: 'An Error Occurred',
+          text: err.response.data.description,
+          type: 'error',
+        })
+
         window.scrollTo({ top: 0, behavior: 'smooth' })
       }
 
@@ -438,10 +438,6 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.error {
-  border-left: #e04e3e 7px solid;
-}
-
 section {
   box-shadow: 0 2px 3px 1px var(--color-grey-2);
   margin: 50px 25px;

pages/user/_id.vue

@@ -11,7 +11,7 @@
         <p v-if="user.role === 'developer'" class="badge green">Developer</p>
       </div>
     </div>
-    <div data-ea-publisher="modrinth-com" data-ea-type="text" />
+    <EthicalAd />
     <div class="user-mods">
       <SearchResult
         v-for="result in mods"
@@ -35,10 +35,12 @@
 <script>
 import axios from 'axios'
 import SearchResult from '@/components/ModResult'
+import EthicalAd from '@/components/EthicalAd'
 
 export default {
   auth: false,
   components: {
+    EthicalAd,
     SearchResult,
   },
   async asyncData(data) {

plugins/vue-notification.js

@@ -0,0 +1,4 @@
+import Vue from 'vue'
+import Notifications from 'vue-notification/dist/ssr.js'
+
+Vue.use(Notifications)

plugins/vue-tooltip.js

@@ -0,0 +1,4 @@
+import Vue from 'vue'
+import VTooltip from 'v-tooltip'
+
+Vue.use(VTooltip)