Layout refactor (#150)

* Revert recent commits

* Move things around, and do preparation work for nested page systems.

* Fixed issue on side bar not appearing

.github/ISSUE_TEMPLATE/bug_report.md

@@ -1,24 +0,0 @@
----
-name: Bug report
-about: Create a report to help us improve labrinth
-title: ''
-labels: bug
-assignees: ''
-
----
-
-**Describe the bug**
-A clear and concise description of what the bug is.
-
-**To Reproduce**
-Steps to reproduce the behavior:
-1. Go to '...'
-2. Click on '....'
-3. Scroll down to '....'
-4. See error
-
-**Expected behavior**
-A clear and concise description of what you expected to happen.
-
-**Additional context**
-Add any other context about the problem here.

.github/ISSUE_TEMPLATE/feature_request.md

@@ -1,20 +0,0 @@
----
-name: Feature request
-about: Suggest an idea for this project
-title: ''
-labels: feature request
-assignees: ''
-
----
-
-**Is your feature request related to a problem? Please describe.**
-A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
-
-**Describe the solution you'd like**
-A clear and concise description of what you want to happen.
-
-**Describe alternatives you've considered**
-A clear and concise description of any alternative solutions or features you've considered.
-
-**Additional context**
-Add any other context or screenshots about the feature request here.

assets/styles/components.scss

@@ -408,3 +408,15 @@
   }
 
 }
+
+.section-header {
+  @extend %card;
+  padding: var(--spacing-card-md) var(--spacing-card-lg);
+  margin-bottom: var(--spacing-card-md);
+  h3 {
+    margin: auto 0;
+    color: var(--color-text-dark);
+    font-weight: var(--font-weight-extrabold);
+  }
+}
+

components/layout/ModPage.vue

@@ -8,7 +8,7 @@
               :src="
                 mod.icon_url
                   ? mod.icon_url
-                  : 'https://cdn.modrinth.com/placeholder.svg'
+                  : 'https://cdn.modrinth.com/placeholder.svg?inline'
               "
               alt="mod - icon"
             />
@@ -38,7 +38,7 @@
           </div>
           <div class="buttons">
             <nuxt-link
-              v-if="this.$auth.user && this.$auth.user.id"
+              v-if="this.$auth.user"
               :to="`/report/create?id=${mod.id}&t=mod`"
               class="iconified-button"
             >
@@ -346,7 +346,7 @@
 
 <script>
 import axios from 'axios'
-import Categories from '~/components/ui/Categories'
+import Categories from '~/components/ui/search/Categories'
 import MFooter from '~/components/layout/MFooter'
 
 import CalendarIcon from '~/assets/images/utils/calendar.svg?inline'
@@ -364,7 +364,7 @@ import ExternalIcon from '~/assets/images/utils/external.svg?inline'
 
 import ForgeIcon from '~/assets/images/categories/forge.svg?inline'
 import FabricIcon from '~/assets/images/categories/fabric.svg?inline'
-import Advertisement from '~/components/ui/Advertisement'
+import Advertisement from '~/components/Advertisement'
 
 export default {
   name: 'ModPage',
@@ -676,10 +676,11 @@ export default {
     overflow-y: hidden;
   }
 }
-
+/*
 @media screen and (max-width: 1400px) {
   .mod-info {
     display: none;
   }
 }
+*/
 </style>

components/ui/ConfirmPopup.vue

@@ -35,13 +35,8 @@
 </template>
 
 <script>
-import Popup from '~/components/ui/Popup'
-
 export default {
   name: 'ConfirmPopup',
-  components: {
-    Popup,
-  },
   props: {
     confirmationText: {
       type: String,

components/ui/Pagination.vue

@@ -43,9 +43,9 @@
 </template>
 
 <script>
-import GapIcon from '~/assets/images/utils/gap.svg'
-import LeftArrowIcon from '~/assets/images/utils/left-arrow.svg'
-import RightArrowIcon from '~/assets/images/utils/right-arrow.svg'
+import GapIcon from '~/assets/images/utils/gap.svg?inline'
+import LeftArrowIcon from '~/assets/images/utils/left-arrow.svg?inline'
+import RightArrowIcon from '~/assets/images/utils/right-arrow.svg?inline'
 
 export default {
   name: 'Pagination',

components/ui/Popup.vue

@@ -32,6 +32,7 @@ export default {
   opacity: 0.6;
   overflow-x: hidden;
 }
+
 .popup-body {
   position: fixed;
   top: 50%;

components/ui/ProjectCard.vue

@@ -3,7 +3,11 @@
     <div class="icon">
       <nuxt-link v-if="isModrinth" :to="'/mod/' + id">
         <img
-          :src="iconUrl ? iconUrl : 'https://cdn.modrinth.com/placeholder.svg'"
+          :src="
+            iconUrl
+              ? iconUrl
+              : 'https://cdn.modrinth.com/placeholder.svg?inline'
+          "
           :alt="name"
         />
       </nuxt-link>
@@ -103,7 +107,7 @@
 </template>
 
 <script>
-import Categories from '~/components/ui/Categories'
+import Categories from '~/components/ui/search/Categories'
 
 import CalendarIcon from '~/assets/images/utils/calendar.svg?inline'
 import DownloadIcon from '~/assets/images/utils/download.svg?inline'

middleware/auth.js

@@ -6,14 +6,10 @@ export default async function (context) {
     }
 
     if (context.route.query.code) {
-      const date = new Date()
-      date.setFullYear(new Date().getFullYear() + 1)
-
       context.app.$cookies.set('auth-token', context.route.query.code, {
         secure: true,
         sameSite: 'Strict',
         httpOnly: true,
-        expires: date,
       })
 
       await context.store.dispatch('auth/fetchUser', {
@@ -36,7 +32,7 @@ export default async function (context) {
 
   if (!context.$auth.user) {
     return context.redirect(
-      `https://api.modrinth.com/api/v1/auth/init?url=https://modrinth.com${context.route.path}`
+      `https://api.modrinth.com/api/v1/auth/init?url=https://modrinth.com${context.route.fullPath}`
     )
   }
 }

package-lock.json

@@ -5,6 +5,7 @@
   "requires": true,
   "packages": {
     "": {
+      "name": "knossos",
       "version": "1.0.0",
       "dependencies": {
         "@nuxtjs/axios": "^5.12.5",

pages/dashboard.vue

@@ -11,6 +11,10 @@
             <NotificationsIcon />
             Notifications
           </nuxt-link>
+          <nuxt-link :to="'/dashboard/follows'" class="tab last">
+            <FollowIcon />
+            Followed Mods
+          </nuxt-link>
           <nuxt-link
             v-if="
               $auth.user.role === 'admin' || $auth.user.role === 'moderator'
@@ -29,7 +33,7 @@
         <m-footer class="footer" />
       </div>
       <div class="content">
-        <slot />
+        <NuxtChild />
       </div>
     </div>
   </div>
@@ -39,6 +43,7 @@ import ModIcon from '~/assets/images/sidebar/mod.svg?inline'
 import ModerationIcon from '~/assets/images/sidebar/admin.svg?inline'
 import SettingsIcon from '~/assets/images/sidebar/settings.svg?inline'
 import NotificationsIcon from '~/assets/images/sidebar/notifications.svg?inline'
+import FollowIcon from '~/assets/images/utils/heart.svg?inline'
 
 export default {
   name: 'DashboardPage',
@@ -47,22 +52,12 @@ export default {
     ModerationIcon,
     SettingsIcon,
     NotificationsIcon,
+    FollowIcon,
   },
 }
 </script>
 
 <style lang="scss" scoped>
-.section-header {
-  @extend %card;
-  padding: var(--spacing-card-md) var(--spacing-card-lg);
-  margin-bottom: var(--spacing-card-md);
-  h3 {
-    margin: auto 0;
-    color: var(--color-text-dark);
-    font-weight: var(--font-weight-extrabold);
-  }
-}
-
 .footer {
   padding-top: 0;
 }

pages/dashboard/follows.vue

@@ -1,5 +1,5 @@
 <template>
-  <DashboardPage>
+  <div>
     <div class="section-header">
       <h3 class="column-grow-1">Followed mods</h3>
     </div>
@@ -9,18 +9,18 @@
         :id="mod.id"
         :key="mod.id"
         :author="mod.author"
-        :name="mod.title"
-        :description="mod.description"
-        :latest-version="mod.latest_version"
-        :created-at="mod.published"
-        :updated-at="mod.updated"
-        :downloads="mod.downloads.toString()"
-        :icon-url="mod.icon_url"
         :author-url="mod.author_url"
-        :page-url="mod.page_url"
         :categories="mod.categories"
+        :created-at="mod.published"
+        :description="mod.description"
+        :downloads="mod.downloads.toString()"
         :edit-mode="true"
+        :icon-url="mod.icon_url"
         :is-modrinth="true"
+        :latest-version="mod.latest_version"
+        :name="mod.title"
+        :page-url="mod.page_url"
+        :updated-at="mod.updated"
       >
         <div class="buttons">
           <button
@@ -34,27 +34,26 @@
       </ModCard>
     </div>
     <div v-else class="error">
-      <FollowIllustration class="icon"></FollowIllustration><br />
+      <FollowIllustration class="icon"></FollowIllustration>
+      <br />
       <span class="text"
         >You don't have any followed mods. <br />
-        Why don't you <nuxt-link to="/mods" class="link">search</nuxt-link> for
+        Why don't you <nuxt-link class="link" to="/mods">search</nuxt-link> for
         new ones?</span
       >
     </div>
-  </DashboardPage>
+  </div>
 </template>
 
 <script>
 import axios from 'axios'
 
-import DashboardPage from '@/components/wrapper/DashboardPage'
 import ModCard from '~/components/ui/ProjectCard'
 import FollowIcon from '~/assets/images/utils/heart.svg?inline'
 import FollowIllustration from '~/assets/images/illustrations/follow_illustration.svg?inline'
 
 export default {
   components: {
-    DashboardPage,
     ModCard,
     FollowIcon,
     FollowIllustration,
@@ -76,17 +75,9 @@ export default {
   },
   methods: {
     async unfavMod(index) {
-      const config = {
-        headers: {
-          Authorization: this.$auth.getToken('local')
-            ? this.$auth.getToken('local')
-            : '',
-        },
-      }
-
       await axios.delete(
         `https://api.modrinth.com/api/v1/mod/${this.mods[index].id}/follow`,
-        config
+        this.$auth.headers
       )
 
       this.mods.splice(index, 1)
@@ -111,6 +102,7 @@ export default {
   margin-left: auto;
   padding: 0.5rem;
 }
+
 .error {
   display: flex;
   flex-direction: column;

pages/dashboard/misc/revoke-token.vue

@@ -1,5 +1,5 @@
 <template>
-  <DashboardPage>
+  <div>
     <div class="section-header columns">
       <h3 class="column-grow-1">Revoke your Modrinth token</h3>
     </div>
@@ -23,10 +23,11 @@
       <ol>
         <li>
           <a
-            target="_blank"
             href="https://github.com/settings/connections/applications/3acffb2e808d16d4b226"
-            >Head to the Modrinth Application page on GitHub.</a
+            target="_blank"
           >
+            Head to the Modrinth Application page on GitHub.
+          </a>
           Make sure to be logged into the GitHub account you used for Modrinth!
         </li>
         <li>
@@ -36,22 +37,19 @@
       </ol>
       <p>Once you have completed the steps, press the continue button below.</p>
       <p>
-        <strong
-          >This will log you out of Modrinth, however when you log back in your
-          token will be regenerated.</strong
-        >
+        <strong>
+          This will log you out of Modrinth, however when you log back in your
+          token will be regenerated.
+        </strong>
       </p>
       <button @click="logout">Continue</button>
     </section>
-  </DashboardPage>
+  </div>
 </template>
 
 <script>
-import DashboardPage from '@/components/wrapper/DashboardPage'
 export default {
-  components: {
-    DashboardPage,
-  },
+  components: {},
   methods: {
     async logout() {
       this.$cookies.set('auth-token-reset', true)
@@ -103,10 +101,12 @@ label {
     flex: 3;
     height: fit-content;
   }
+
   button {
     :hover {
       cursor: pointer;
     }
+
     height: fit-content;
     flex: 1;
   }

pages/dashboard/moderation.vue

@@ -1,5 +1,5 @@
 <template>
-  <DashboardPage>
+  <div>
     <div class="section-header">
       <h3 class="column-grow-1">Mods</h3>
     </div>
@@ -9,19 +9,19 @@
         :id="mod.id"
         :key="mod.id"
         :author="mod.author"
-        :name="mod.title"
-        :description="mod.description"
-        :latest-version="mod.latest_version"
-        :created-at="mod.published"
-        :updated-at="mod.updated"
-        :downloads="mod.downloads.toString()"
-        :icon-url="mod.icon_url"
         :author-url="mod.author_url"
-        :page-url="mod.page_url"
         :categories="mod.categories"
+        :created-at="mod.published"
+        :description="mod.description"
+        :downloads="mod.downloads.toString()"
         :edit-mode="true"
-        :status="mod.status"
+        :icon-url="mod.icon_url"
         :is-modrinth="true"
+        :latest-version="mod.latest_version"
+        :name="mod.title"
+        :page-url="mod.page_url"
+        :status="mod.status"
+        :updated-at="mod.updated"
       >
         <div class="buttons">
           <button
@@ -79,22 +79,21 @@
       </div>
     </div>
     <div v-else class="error">
-      <Security class="icon"></Security><br />
+      <Security class="icon"></Security>
+      <br />
       <span class="text">You are up-to-date!</span>
     </div>
-  </DashboardPage>
+  </div>
 </template>
 
 <script>
 import axios from 'axios'
 
-import DashboardPage from '@/components/wrapper/DashboardPage'
 import ModCard from '~/components/ui/ProjectCard'
 import Security from '~/assets/images/illustrations/security.svg?inline'
 
 export default {
   components: {
-    DashboardPage,
     ModCard,
     Security,
   },

pages/dashboard/notifications.vue

@@ -1,5 +1,5 @@
 <template>
-  <DashboardPage>
+  <div>
     <div class="section-header columns">
       <h3 class="column-grow-1">My notifications</h3>
     </div>
@@ -44,21 +44,19 @@
       </div>
     </div>
     <div v-else class="error">
-      <UpToDate class="icon"></UpToDate><br />
+      <UpToDate class="icon"></UpToDate>
+      <br />
       <span class="text">You are up-to-date!</span>
     </div>
-  </DashboardPage>
+  </div>
 </template>
 
 <script>
 import axios from 'axios'
-
-import DashboardPage from '@/components/wrapper/DashboardPage'
 import UpToDate from '~/assets/images/illustrations/up_to_date.svg?inline'
 
 export default {
   components: {
-    DashboardPage,
     UpToDate,
   },
   async asyncData(data) {
@@ -136,6 +134,7 @@ export default {
     margin: 0;
   }
 }
+
 .error {
   display: flex;
   flex-direction: column;

pages/dashboard/projects.vue

@@ -1,5 +1,5 @@
 <template>
-  <DashboardPage>
+  <div>
     <div class="section-header columns">
       <h3 class="column-grow-1">My mods</h3>
       <nuxt-link class="brand-button column" to="/mod/create">
@@ -42,19 +42,16 @@
         <nuxt-link class="link" to="/mod/create">create one</nuxt-link>?</span
       >
     </div>
-  </DashboardPage>
+  </div>
 </template>
 
 <script>
 import axios from 'axios'
-
-import DashboardPage from '@/components/wrapper/DashboardPage'
 import ModCard from '~/components/ui/ProjectCard'
 import UpToDate from '~/assets/images/illustrations/up_to_date.svg?inline'
 
 export default {
   components: {
-    DashboardPage,
     ModCard,
     UpToDate,
   },

pages/dashboard/settings.vue

@@ -1,6 +1,6 @@
 /* eslint-disable vue/attribute-hyphenation */
 <template>
-  <DashboardPage>
+  <div>
     <ConfirmPopup
       ref="delete_popup"
       title="Are you sure you want to delete your account?"
@@ -108,16 +108,16 @@
         </div>
       </label>
     </section>
-  </DashboardPage>
+  </div>
 </template>
 
 <script>
-import DashboardPage from '@/components/wrapper/DashboardPage'
 import axios from 'axios'
+import ConfirmPopup from '~/components/ui/ConfirmPopup'
 
 export default {
   components: {
-    DashboardPage,
+    ConfirmPopup,
   },
   fetch() {
     this.username = this.$auth.user.username

pages/mod/_id/edit.vue

@@ -304,8 +304,8 @@
 import axios from 'axios'
 import Multiselect from 'vue-multiselect'
 
-import MFooter from '~/components/layout/MFooter'
 import FileInput from '~/components/ui/FileInput'
+import MFooter from '~/components/layout/MFooter'
 
 export default {
   components: {

pages/mod/_id/index.vue

@@ -17,7 +17,7 @@
 
 <script>
 import axios from 'axios'
-import ModPage from '@/components/wrapper/ModPage'
+import ModPage from '~/components/layout/ModPage'
 
 export default {
   components: { ModPage },

pages/mod/_id/newversion.vue

@@ -129,7 +129,7 @@
 import axios from 'axios'
 
 import Multiselect from 'vue-multiselect'
-import ModPage from '@/components/wrapper/ModPage'
+import ModPage from '~/components/layout/ModPage'
 
 export default {
   components: {

pages/mod/_id/settings.vue

@@ -248,7 +248,7 @@
 
 <script>
 import axios from 'axios'
-import ModPage from '@/components/wrapper/ModPage'
+import ModPage from '~/components/layout/ModPage'
 
 import DropdownIcon from '~/assets/images/utils/dropdown.svg?inline'
 

pages/mod/_id/version/_version/edit.vue

@@ -116,8 +116,8 @@
 <script>
 import axios from 'axios'
 
-import ModPage from '@/components/wrapper/ModPage'
 import Multiselect from 'vue-multiselect'
+import ModPage from '~/components/layout/ModPage'
 
 export default {
   components: {

pages/mod/_id/version/_version/index.vue

@@ -147,9 +147,9 @@
 <script>
 import axios from 'axios'
 
-import ModPage from '@/components/wrapper/ModPage'
+import ModPage from '~/components/layout/ModPage'
 
-import Categories from '~/components/ui/Categories'
+import Categories from '~/components/ui/search/Categories'
 import FileInput from '~/components/ui/FileInput'
 import TrashIcon from '~/assets/images/utils/trash.svg?inline'
 import EditIcon from '~/assets/images/utils/edit.svg?inline'

pages/mod/_id/versions.vue

@@ -92,7 +92,7 @@
 <script>
 import axios from 'axios'
 
-import ModPage from '@/components/wrapper/ModPage'
+import ModPage from '~/components/layout/ModPage'
 
 import DownloadIcon from '~/assets/images/utils/download.svg?inline'
 import ForgeIcon from '~/assets/images/categories/forge.svg?inline'

pages/mod/create.vue

@@ -502,8 +502,8 @@
 import axios from 'axios'
 import Multiselect from 'vue-multiselect'
 
-import MFooter from '~/components/layout/MFooter'
 import FileInput from '~/components/ui/FileInput'
+import MFooter from '~/components/layout/MFooter'
 
 import ForgeIcon from '~/assets/images/categories/forge.svg?inline'
 import FabricIcon from '~/assets/images/categories/fabric.svg?inline'

pages/mods.vue

@@ -290,7 +290,7 @@
 import Multiselect from 'vue-multiselect'
 import axios from 'axios'
 import SearchResult from '~/components/ui/ProjectCard'
-import Pagination from '~/components/ui/search/Pagination'
+import Pagination from '~/components/ui/Pagination'
 import SearchFilter from '~/components/ui/search/SearchFilter'
 
 import MFooter from '~/components/layout/MFooter'
@@ -313,7 +313,7 @@ import FabricLoader from '~/assets/images/categories/fabric.svg?inline'
 import SearchIcon from '~/assets/images/utils/search.svg?inline'
 import ExitIcon from '~/assets/images/utils/exit.svg?inline'
 
-import Advertisement from '~/components/ui/Advertisement'
+import Advertisement from '~/components/Advertisement'
 
 export default {
   auth: false,

pages/user/_id.vue

@@ -89,7 +89,7 @@ import MFooter from '~/components/layout/MFooter'
 import ReportIcon from '~/assets/images/utils/report.svg?inline'
 import CalendarIcon from '~/assets/images/utils/calendar.svg?inline'
 import DownloadIcon from '~/assets/images/utils/download.svg?inline'
-import Advertisement from '~/components/ui/Advertisement'
+import Advertisement from '~/components/Advertisement'
 
 export default {
   auth: false,