feat: convert hub to nuxt project (#731)

BREAKING CHANGE: breaks the url patterns because it removes the `#` fragmet notation

.gitignore

@@ -1,24 +1,93 @@
-.DS_Store
-node_modules
-/dist
-
-# local env files
-.env.local
-.env.*.local
-.env
-
-# Log files
+# Created by .ignore support plugin (hsz.mobi)
+### Node template
+# Logs
+/logs
+*.log
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
 
-# Editor directories and files
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# TypeScript v1 declaration files
+typings/
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variables file
+.env
+
+# parcel-bundler cache (https://parceljs.org/)
+.cache
+
+# next.js build output
+.next
+
+# nuxt.js build output
+.nuxt
+
+# Nuxt generate
+dist
+
+# vuepress build output
+.vuepress/dist
+
+# Serverless directories
+.serverless
+
+# IDE / Editor
 .idea
-.vscode
-*.suo
-*.ntvs*
-*.njsproj
-*.sln
-*.sw*
-
-.vercel
+
+# Service worker
+sw.*
+
+# macOS
+.DS_Store
+
+# Vim swap files
+*.swp
+
+# Service worker
+static/sw.js

.nvmrc

@@ -0,0 +1 @@
+lts/gallium

README.md

@@ -1,6 +1,8 @@
 # Warframe Hub
 
-[![Build Status](https://travis-ci.com/WFCD/warframe-hub.svg?branch=dev)](https://travis-ci.com/WFCD/warframe-hub) 
+[![Vercel](https://vercelbadge.vercel.app/api/wfcd/warframe-hub)](https://vercel.com/wfcd/warframe-hub)
+[![Actions](https://github.com/WFCD/warframe-hub/actions/workflows/ci.yaml/badge.svg)](https://github.com/WFCD/warframe-hub/actions/workflows/ci.yaml)
+[![Release](https://github.com/WFCD/warframe-hub/actions/workflows/release.yml/badge.svg)](https://github.com/WFCD/warframe-hub/actions/workflows/release.yml)
 [![Supported by the Warframe Community Developers](https://img.shields.io/badge/Warframe_Comm_Devs-supported-blue.svg?color=2E96EF&logo=data%3Aimage%2Fsvg%2Bxml%3Bbase64%2CPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyOTgiIGhlaWdodD0iMTczIiB2aWV3Qm94PSIwIDAgMjk4IDE3MyI%2BPHBhdGggZD0iTTE4NSA2N2MxNSA4IDI4IDE2IDMxIDE5czIzIDE4LTcgNjBjMCAwIDM1LTMxIDI2LTc5LTE0LTctNjItMzYtNzAtNDUtNC01LTEwLTEyLTE1LTIyLTUgMTAtOSAxNC0xNSAyMi0xMyAxMy01OCAzOC03MiA0NS05IDQ4IDI2IDc5IDI2IDc5LTMwLTQyLTEwLTU3LTctNjBsMzEtMTkgMzYtMjIgMzYgMjJ6TTU1IDE3M2wtMTctM2MtOC0xOS0yMC00NC0yNC01MC01LTctNy0xMS0xNC0xNWwxOC0yYzE2LTMgMjItNyAzMi0xMyAxIDYgMCA5IDIgMTQtNiA0LTIxIDEwLTI0IDE2IDMgMTQgNSAyNyAyNyA1M3ptMTYtMTFsLTktMi0xNC0yOWEzMCAzMCAwIDAgMC04LThoN2wxMy00IDQgN2MtMyAyLTcgMy04IDZhODYgODYgMCAwIDAgMTUgMzB6bTE3MiAxMWwxNy0zYzgtMTkgMjAtNDQgMjQtNTAgNS03IDctMTEgMTQtMTVsLTE4LTJjLTE2LTMtMjItNy0zMi0xMy0xIDYgMCA5LTIgMTQgNiA0IDIxIDEwIDI0IDE2LTMgMTQtNSAyNy0yNyA1M3ptLTE2LTExbDktMiAxNC0yOWEzMCAzMCAwIDAgMSA4LThoLTdsLTEzLTQtNCA3YzMgMiA3IDMgOCA2YTg2IDg2IDAgMCAxLTE1IDMwem0tNzktNDBsLTYtNmMtMSAzLTMgNi02IDdsNSA1YTUgNSAwIDAgMSAyIDB6bS0xMy0yYTQgNCAwIDAgMSAxLTJsMi0yYTQgNCAwIDAgMSAyLTFsNC0xNy0xNy0xMC04IDcgMTMgOC0yIDctNyAyLTgtMTItOCA4IDEwIDE3em0xMiAxMWE1IDUgMCAwIDAtNC0yIDQgNCAwIDAgMC0zIDFsLTMwIDI3YTUgNSAwIDAgMCAwIDdsNCA0YTYgNiAwIDAgMCA0IDIgNSA1IDAgMCAwIDMtMWwyNy0zMWMyLTIgMS01LTEtN3ptMzkgMjZsLTMwLTI4LTYgNmE1IDUgMCAwIDEgMCAzbDI2IDI5YTEgMSAwIDAgMCAxIDBsNS0yIDItMmMxLTIgMy01IDItNnptNS00NWEyIDIgMCAwIDAtNCAwbC0xIDEtMi00YzEtMy01LTktNS05LTEzLTE0LTIzLTE0LTI3LTEzLTIgMS0yIDEgMCAyIDE0IDIgMTUgMTAgMTMgMTNhNCA0IDAgMCAwLTEgMyAzIDMgMCAwIDAgMSAxbC0yMSAyMmE3IDcgMCAwIDEgNCAyIDggOCAwIDAgMSAyIDNsMjAtMjFhNyA3IDAgMCAwIDEgMSA0IDQgMCAwIDAgNCAwYzEtMSA2IDMgNyA0aC0xYTMgMyAwIDAgMCAwIDQgMiAyIDAgMCAwIDQgMGw2LTZhMyAzIDAgMCAwIDAtM3oiIGZpbGw9IiMyZTk2ZWYiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvc3ZnPg%3D%3D)](https://github.com/WFCD/banner/blob/master/PROJECTS.md)
 [![Discord](https://img.shields.io/discord/256087517353213954.svg?logo=discord)](https://discord.gg/jGZxH9f)
 

src/components/AsyncItemThumb.vue → components/AsyncItemThumb.vue

@@ -1,11 +1,11 @@
 <template>
   <span>
-    <div v-if="!img">{{ this.alt }}</div>
+    <div v-if="!img">{{ alt }}</div>
     <div v-else>
-      <img :src="img" :alt="this.alt" :id="this.id" class="async-thumb" :width="`${this.width}px`" />
-      <b-tooltip :target="this.id" triggers="hover" placement="bottom">
-        <img :src="img" :alt="this.alt" :id="this.id" class="async-thumb" :width="`${this.width * 5}px`" />
-        <div>{{ this.alt }}</div>
+      <img :id="id" :src="img" :alt="alt" class="async-thumb" :width="`${width}px`" />
+      <b-tooltip :target="id" triggers="hover" placement="bottom">
+        <img :id="id" :src="img" :alt="alt" class="async-thumb" :width="`${width * 5}px`" />
+        <div>{{ alt }}</div>
       </b-tooltip>
     </div>
   </span>
@@ -19,10 +19,10 @@
 
 <script>
 import fetch from 'node-fetch';
-import utilities from '@/utilities';
+import utilities from '@/services/utilities';
 
 export default {
-  name: 'item-thumb',
+  name: 'ItemThumb',
   props: {
     alt: {
       type: String,
@@ -43,8 +43,11 @@ export default {
       img: null,
     };
   },
+  created() {
+    this.fetch();
+  },
   methods: {
-    fetch: async function () {
+    async fetch() {
       const stripped = (this.ikey || this.alt)
         .replace(/\d+\s+/i, '')
         .replace('Blueprint', '')
@@ -56,16 +59,13 @@ export default {
       const url = `https://api.warframestat.us/items/search/${stripped.toLowerCase()}`;
       const data = (await fetch(url).then((d) => d.json())).filter((d) => d.name === stripped);
       if (!data || !data[0]?.imageName || '') {
-        return;
+        // empty on purpose?
       } else {
         this.img = `https://cdn.warframestat.us/o_webp,progressive_true,rs_${
           this.width * 8
         }/https://cdn.warframestat.us/img/${data[0].imageName}`;
       }
     },
   },
-  created: function () {
-    this.fetch();
-  },
 };
 </script>

src/components/CodexCard.vue → components/CodexCard.vue

@@ -1,6 +1,6 @@
 <template>
-  <b-card no-body :header="this.item.name">
-    <b-card-img :src="this.wfcdn(this.item.imageName)" :alt="this.item.name" top />
+  <b-card no-body :header="item.name">
+    <b-card-img :src="wfcdn(item.imageName)" :alt="item.name" top />
     <b-card-body>
       <b-card-text>
         <slot name="t1">
@@ -10,9 +10,7 @@
       <b-card-text>
         <slot name="t2"></slot>
       </b-card-text>
-      <b-button v-if="this.link" :href="this.link" target="_blank" variant="primary">
-        Wiki <i class="fas fa-link" />
-      </b-button>
+      <b-button v-if="link" :href="link" target="_blank" variant="primary"> Wiki <i class="fas fa-link" /> </b-button>
       <b-button v-else @click="modal.open()"> Wiki <i class="fas fa-link" /> </b-button>
       <b-button v-if="!!link2" :href="link2.a" target="_blank" variant="primary">
         {{ link2.title }} <i class="fas fa-link" />
@@ -22,7 +20,7 @@
 </template>
 
 <script>
-import { cdn, wfcdn, optimize } from '@/utilities';
+import { cdn, wfcdn, optimize } from '@/services/utilities';
 
 export default {
   name: 'CodexCard',

src/components/Collapsible.vue → components/Collapsible.vue

@@ -1,37 +1,28 @@
 <template>
   <div>
-    <b-btn variant="primary" v-b-toggle="`collapsible-${this.cid}`" style="margin-bottom: 4px">
+    <b-btn v-b-toggle="`collapsible-${cid}`" variant="primary" style="margin-bottom: 4px">
       {{ headertext }} <i class="fas fa-chevron-down"></i>
     </b-btn>
-    <b-collapse :id="`collapsible-${this.cid}`" @hidden="reflow()" @shown="reflow()">
+    <b-collapse :id="`collapsible-${cid}`" @hidden="reflow()" @shown="reflow()">
       <b-card>
         <slot></slot>
       </b-card>
     </b-collapse>
   </div>
 </template>
 <script>
-import util from '@/utilities';
+import util from '@/services/utilities';
 
 export default {
-  name: 'collapsible-panel',
+  name: 'CollapsiblePanel',
   props: ['headertext'],
-  data: function () {
+  data() {
     return {
       id: 0,
     };
   },
-  methods: {
-    reflow: function () {
-      // eslint-disable-next-line no-console
-      console.error('triggered reflow --- this does nothing, needs to trigger the resize for the grid item');
-    },
-    makeid: function () {
-      return util.makeid();
-    },
-  },
   computed: {
-    cid: function () {
+    cid() {
       if (this.id) {
         return this.id;
       } else {
@@ -40,5 +31,14 @@ export default {
       return this.id;
     },
   },
+  methods: {
+    reflow() {
+      // eslint-disable-next-line no-console
+      console.error('triggered reflow --- this does nothing, needs to trigger the resize for the grid item');
+    },
+    makeid() {
+      return util.makeid();
+    },
+  },
 };
 </script>

src/components/DropdownNavItem.vue → components/DropdownNavItem.vue

@@ -1,41 +1,31 @@
 <template>
   <span>
-    <b-dd-item v-if="isLocal && !labelIfMobile && !$isMobile()" :to="target" exact>
+    <b-dd-item v-if="isLocal && !labelIfMobile && !$device.isMobileOrTablet" :to="target" exact>
       <i :class="`${icon} faIcon`"></i>
       {{ label }}
     </b-dd-item>
-    <b-dd-item v-if="isLocal && !labelIfMobile && $isMobile()" :to="target" exact>
+    <b-dd-item v-if="isLocal && !labelIfMobile && $device.isMobileOrTablet" :to="target" exact>
       <i :class="`${icon} faIcon`"></i>
       {{ label }}
     </b-dd-item>
-    <b-dd-item v-if="isLocal && labelIfMobile && !$isMobile()" :to="target" exact>
+    <b-dd-item v-if="isLocal && labelIfMobile && !$device.isMobileOrTablet" :to="target" exact>
       <i :class="`${icon} faIcon`"></i>
       {{ label }}
     </b-dd-item>
     <b-dd-item
       v-else-if="!isLocal"
+      v-b-tooltip.bottom
       :href="target"
       rel="noopener"
       target="_blank"
-      v-b-tooltip.bottom
-      :title="labelIfMobile && !$isMobile() ? label : ''"
+      :title="labelIfMobile && !$device.isMobileOrTablet ? label : ''"
     >
       <i :class="`${icon} faIcon`"></i>
-      {{ labelIfMobile ? ($isMobile() ? label : '') : label }}
+      {{ labelIfMobile ? ($device.isMobileOrTablet ? label : '') : label }}
     </b-dd-item>
   </span>
 </template>
 
-<style scoped>
-.b-nav-dropdown .dropdown-menu .dropdown-item i,
-.b-nav-dropdown .dropdown-menu .dropdown-header i {
-  margin-top: 3px;
-  margin-right: 10px;
-  width: 1em;
-  text-align: center;
-}
-</style>
-
 <script>
 export default {
   name: 'DropdownItem',
@@ -66,3 +56,13 @@ export default {
   },
 };
 </script>
+
+<style scoped>
+.b-nav-dropdown .dropdown-menu .dropdown-item i,
+.b-nav-dropdown .dropdown-menu .dropdown-header i {
+  margin-top: 3px;
+  margin-right: 10px;
+  width: 1em;
+  text-align: center;
+}
+</style>

src/components/FishImg.vue → components/FishImg.vue

@@ -5,15 +5,15 @@
     :title="title"
     :height="height"
     :width="width"
-    v-bind:class="{ invert: invert === 'true' }"
+    :class="{ invert: invert === 'true' }"
     fluid
     :alt="title"
   />
 </template>
 
 <script>
 import HubImg from '@/components/HubImg';
-import { optimize, cdn } from '@/utilities';
+import { optimize, cdn } from '@/services/utilities';
 
 const imgs = {
   fish: {
@@ -157,6 +157,9 @@ const imgs = {
 
 export default {
   name: 'FishImg',
+  components: {
+    HubImg,
+  },
   props: {
     type: {
       type: String,
@@ -183,9 +186,6 @@ export default {
       default: 'false',
     },
   },
-  components: {
-    HubImg,
-  },
   data() {
     return {
       src: imgs[this.type][this.item],