Homepage base

components/ModResult.vue

@@ -363,6 +363,10 @@ export default {
         return []
       },
     },
+    isAd: {
+      type: Boolean,
+      default: false,
+    },
   },
 }
 </script>

layouts/default.vue

@@ -211,7 +211,7 @@ export default {
       theme: 'light',
     }
   },
-  mounted() {
+  beforeMount() {
     const theme = localStorage.getItem('data-theme')
       ? localStorage.getItem('data-theme')
       : 'light'

layouts/none.vue

@@ -0,0 +1,9 @@
+<template>
+  <nuxt />
+</template>
+
+<script>
+export default {}
+</script>
+
+<style></style>

package-lock.json

@@ -1943,6 +1943,28 @@
         }
       }
     },
+    "@nuxtjs/auth": {
+      "version": "4.9.1",
+      "resolved": "https://registry.npmjs.org/@nuxtjs/auth/-/auth-4.9.1.tgz",
+      "integrity": "sha512-h5VZanq2+P47jq3t0EnsZv800cg/ufOPC6JqvcyeDFJM99p58jHSODAjDuePo3PrZxd8hovMk7zusU5lOHgjvQ==",
+      "requires": {
+        "@nuxtjs/axios": "^5.9.5",
+        "body-parser": "^1.19.0",
+        "consola": "^2.11.3",
+        "cookie": "^0.4.0",
+        "is-https": "^1.0.0",
+        "js-cookie": "^2.2.1",
+        "lodash": "^4.17.15",
+        "nanoid": "^2.1.11"
+      },
+      "dependencies": {
+        "nanoid": {
+          "version": "2.1.11",
+          "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-2.1.11.tgz",
+          "integrity": "sha512-s/snB+WGm6uwi0WjsZdaVcuf3KJXlfGl2LcxgwkEwJF0D/BWzVWAZW/XY4bFaiR7s0Jk3FPvlnepg1H1b1UwlA=="
+        }
+      }
+    },
     "@nuxtjs/axios": {
       "version": "5.12.2",
       "resolved": "https://registry.npmjs.org/@nuxtjs/axios/-/axios-5.12.2.tgz",
@@ -7069,6 +7091,11 @@
         "is-extglob": "^2.1.1"
       }
     },
+    "is-https": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/is-https/-/is-https-1.0.0.tgz",
+      "integrity": "sha512-1adLLwZT9XEXjzhQhZxd75uxf0l+xI9uTSFaZeSESjL3E1eXSPpO+u5RcgqtzeZ1KCaNvtEwZSTO2P4U5erVqQ=="
+    },
     "is-nan": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/is-nan/-/is-nan-1.3.0.tgz",
@@ -7247,6 +7274,11 @@
       "integrity": "sha512-fiUvdfCaAXoQTHdKMgTvg6IkecXDcVz6V5rlftUTclF9IKBjMizvSdQaCl/z/6TApDeby5NL+axYou3i0mu1Pg==",
       "dev": true
     },
+    "js-cookie": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/js-cookie/-/js-cookie-2.2.1.tgz",
+      "integrity": "sha512-HvdH2LzI/EAZcUwA8+0nKNtWHqS+ZmijLA30RwZA0bo7ToCckjK5MkGhjED9KoRcXO6BaGI3I9UIzSA1FKFPOQ=="
+    },
     "js-tokens": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",

package.json

@@ -12,6 +12,7 @@
     "lint": "npm run lint:js"
   },
   "dependencies": {
+    "@nuxtjs/auth": "^4.9.1",
     "@nuxtjs/axios": "^5.12.2",
     "nuxt": "^2.14.5",
     "vue-multiselect": "^2.1.6"

pages/index.vue

@@ -0,0 +1,161 @@
+<template>
+  <div>
+    <header class="columns">
+      <img class="logo" src="~/assets/images/logo.svg" alt="logo" />
+      <div class="links">
+        <nuxt-link to="/" no-prefetch>Home</nuxt-link>
+        <nuxt-link to="/mods" no-prefetch>Mods</nuxt-link>
+        <nuxt-link to="/modpacks" no-prefetch>Packs</nuxt-link>
+        <nuxt-link to="/about" no-prefetch>About</nuxt-link>
+      </div>
+    </header>
+    <div class="main-hero columns">
+      <div class="main-left">
+        <h1 class="typewriter">{{ currentText }}</h1>
+        <h1>modding platform</h1>
+      </div>
+      <div class="main-right columns">
+        <img class="char" src="~/assets/images/logo.svg" alt="logo" />
+      </div>
+    </div>
+    <div class="slanted-hero"></div>
+  </div>
+</template>
+
+<script>
+export default {
+  layout: 'none',
+  data() {
+    return {
+      currentText: 'Open source',
+      texts: ['Open source', 'Easy to use', 'Developer focused', 'API Based'],
+    }
+  },
+  beforeMount() {
+    document.documentElement.setAttribute('data-theme', 'light')
+
+    this.startNext(0)
+  },
+  methods: {
+    startNext(i) {
+      const startIndex = i % this.texts.length
+
+      this.typeWriter(this.texts[startIndex], 0, () => {
+        this.startNext(startIndex + 1)
+      })
+    },
+    typeWriter(text, i, callback) {
+      if (!text || i >= text.length) {
+        setTimeout(callback, 1000 + Math.random() * 500)
+        return
+      }
+
+      this.currentText = text.substring(0, i + 1)
+      setTimeout(
+        () => this.typeWriter(text, i + 1, callback),
+        150 + Math.random() * 50
+      )
+    },
+  },
+}
+</script>
+
+<style lang="scss">
+header {
+  width: 100%;
+
+  .logo {
+    margin: 25px 50px;
+    height: 100px;
+  }
+
+  .links {
+    margin: auto 0;
+
+    a {
+      text-transform: uppercase;
+      font-weight: bold;
+      margin: 0 25px;
+
+      &:hover,
+      &:focus {
+        background-color: var(--color-grey-1);
+        color: var(--color-text);
+      }
+
+      &.nuxt-link-active {
+        border-bottom: 3px var(--color-brand) solid;
+      }
+    }
+  }
+}
+
+.main-hero {
+  height: 600px;
+
+  .main-left {
+    width: 50%;
+    padding-top: 75px;
+    padding-left: 100px;
+
+    .typewriter {
+      display: inline-block;
+      color: var(--color-brand);
+      border-right: 0.15em solid var(--color-brand);
+      animation: caret 1s steps(1) infinite;
+
+      @keyframes caret {
+        50% {
+          border-color: transparent;
+        }
+      }
+    }
+
+    h1 {
+      margin: 0;
+      font-size: 4em;
+    }
+  }
+  .main-right {
+    width: 50%;
+    padding-left: 20%;
+
+    .char {
+      image-rendering: pixelated;
+      height: 400px;
+    }
+  }
+}
+
+.slanted-hero {
+  background: var(--color-brand);
+  height: 500px;
+  position: relative;
+  z-index: 1;
+
+  &:before,
+  &:after {
+    background: inherit;
+    content: '';
+    display: block;
+    height: 50%;
+    left: 0;
+    position: absolute;
+    right: 0;
+    z-index: -1;
+    -webkit-backface-visibility: hidden;
+  }
+
+  &:before {
+    top: 0;
+    transform: skewY(5deg);
+    transform-origin: 100% 0;
+  }
+
+  &:after {
+    bottom: 0;
+    transform: skewY(-5deg);
+    transform-origin: 100%;
+  }
+}
+</style>

pages/mods.vue

@@ -54,7 +54,7 @@
       </section>
       <div class="results column-grow-4">
         <SearchResult
-          v-for="result in results"
+          v-for="(result, index) in results"
           :id="result.mod_id"
           :key="result.mod_id"
           :author="result.author"
@@ -68,6 +68,7 @@
           :author-url="result.author_url"
           :page-url="result.page_url"
           :categories="result.categories"
+          :is-ad="index % 5"
         />
       </div>
       <section v-if="pages.length > 1" class="search-bottom">