Pagination

assets/styles/global.scss

@@ -1,5 +1,3 @@
-@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap');
-
 :root {
   /**
     * Colors

layouts/default.vue

@@ -3,7 +3,7 @@
     <aside>
       <div class="logo-wrapper">
         <img class="logo" src="~/assets/images/logo.svg" />
-        <h1>modrinth</h1>
+        <span class="name">modrinth</span>
       </div>
       <nav>
         <section class="links">
@@ -157,8 +157,6 @@
 </template>
 
 <style lang="scss">
-@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@600&display=swap');
-
 .layout {
   display: flex;
   min-height: 100vh;
@@ -186,9 +184,10 @@
         width: auto;
       }
 
-      h1 {
+      .name {
-        margin-left: 10px;
+        font-family: 'Montserrat Alternates';
-        font-family: 'Montserrat', sans-serif;
+        margin-left: 0.4rem;
+        font-size: 1.3rem;
       }
     }
 

nuxt.config.js

@@ -24,7 +24,19 @@ export default {
         content: process.env.npm_package_description || '',
       },
     ],
-    link: [{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }],
+    link: [
+      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
+      {
+        rel: 'stylesheet',
+        href:
+          'https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap',
+      },
+      {
+        rel: 'stylesheet',
+        href:
+          'https://fonts.googleapis.com/css2?family=Montserrat+Alternates:wght@600&display=swap',
+      },
+    ],
     script: [
       {
         src: 'https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js',

pages/mods.vue

@@ -10,7 +10,7 @@
             type="search"
             name="search"
             placeholder="Search mods"
-            @input="onSearchChange"
+            @input="onSearchChange(true)"
           />
           <svg
             viewBox="0 0 24 24"
@@ -24,29 +24,51 @@
             <line x1="21" y1="21" x2="16.65" y2="16.65" />
           </svg>
         </div>
-        <div class="pagination column-grow-1 columns paginates">
+        <div
+          v-if="pages.length > 1"
+          class="pagination column-grow-1 columns paginates"
+        >
           <svg
+            :class="{ 'disabled-paginate': currentPage === 1 }"
             viewBox="0 0 24 24"
             fill="none"
             stroke="currentColor"
             stroke-width="2"
             stroke-linecap="round"
             stroke-linejoin="round"
+            @click="currentPage !== 1 ? switchPage(currentPage - 1) : null"
           >
             <polyline points="15 18 9 12 15 6"></polyline>
           </svg>
-          <p>1</p>
+          <p
-          <p>2</p>
+            v-for="(item, index) in pages"
-          <p>3</p>
+            :key="'page-' + item"
-          <p>...</p>
+            :class="{
-          <p>10</p>
+              'active-page-number': currentPage !== item,
+            }"
+            @click="currentPage !== item ? switchPage(item) : null"
+          >
+            <span v-if="pages[index - 1] + 1 !== item && item !== 1">...</span>
+            <span :class="{ 'disabled-page-number': currentPage === item }">{{
+              item
+            }}</span>
+          </p>
+
           <svg
+            :class="{
+              'disabled-paginate': currentPage === pages[pages.length - 1],
+            }"
             viewBox="0 0 24 24"
             fill="none"
             stroke="currentColor"
             stroke-width="2"
             stroke-linecap="round"
             stroke-linejoin="round"
+            @click="
+              currentPage !== pages[pages.length - 1]
+                ? switchPage(currentPage + 1)
+                : null
+            "
           >
             <polyline points="9 18 15 12 9 6"></polyline>
           </svg>
@@ -304,6 +326,8 @@ export default {
       query: '',
       filters: [],
       results: [],
+      pages: [],
+      currentPage: 1,
     }
   },
   async created() {
@@ -322,9 +346,16 @@ export default {
         this.filters.push(element.id)
       }
 
-      await this.onSearchChange()
+      await this.onSearchChange(true)
     },
-    async onSearchChange() {
+    async switchPage(pageNumber) {
+      this.currentPage = pageNumber
+
+      await this.onSearchChange(false)
+    },
+    async onSearchChange(resetPageNumber) {
+      if (resetPageNumber) this.currentPage = 1
+
       const config = {
         headers: {
           Accept: 'application/json',
@@ -349,6 +380,10 @@ export default {
           params.push(`facets=${JSON.stringify(facets)}`)
         }
 
+        if (this.currentPage !== 1) {
+          params.push(`offset=${(this.currentPage - 1) * 10}`)
+        }
+
         if (params.length > 0) {
           for (let i = 0; i < params.length; i++) {
             url += i === 0 ? `?${params[i]}` : `&${params[i]}`
@@ -356,9 +391,27 @@ export default {
         }
 
         const res = await axios.get(url, config)
-
         this.results = res.data.hits
+
+        const pageAmount = Math.ceil(res.data.nb_hits / res.data.limit)
+
+        if (pageAmount > 4) {
+          if (this.currentPage > 4) {
+            this.pages = [
+              1,
+              this.currentPage - 1,
+              this.currentPage,
+              this.currentPage + 1,
+              pageAmount,
+            ]
+          } else {
+            this.pages = [1, 2, 3, 4, pageAmount]
+          }
+        } else {
+          this.pages = Array.from({ length: pageAmount }, (_, i) => i + 1)
+        }
       } catch (err) {
+        // eslint-disable-next-line no-console
         console.error(err)
       }
     },
@@ -446,4 +499,20 @@ export default {
     border-left: 4px solid var(--color-brand);
   }
 }
+
+.disabled-paginate {
+  cursor: default;
+  color: var(--color-grey-3);
+}
+
+.active-page-number {
+  cursor: pointer;
+}
+
+.disabled-page-number {
+  cursor: default;
+  padding: 2px 3px;
+  border-radius: 3px;
+  background-color: var(--color-grey-3);
+}
 </style>