SSR mode

.env.sample

@@ -1,3 +1,14 @@
-DISCORD_CLIENT=``
-DISCORD_SECRET=``
-BACK_URL=``
+# Discord client, place your value before 'abc', idk why the fuck dotenv keep parsing wrong value
+DISCORD_CLIENT="12345678abc"
+# Discord secret
+DISCORD_SECRET="abcdefg"
+# Discord webhook url
+DISCORD_WEBHOOK="https://discord.com/api/webhooks/..."
+# Discord guild
+DISCORD_GUILD= "799491033917816842"
+# Where does the site host on
+HOST_URL="http://localhost:8080"
+# MongoDB connect string
+DB_URL="mongodb://127.0.0.1:27017/techmania"
+# Your secret for JWT
+JWT_SECRET="abcdefg"

package.json

@@ -7,16 +7,23 @@
   "private": true,
   "scripts": {
     "lint": "eslint --ext .js,.vue ./",
-    "dev": "quasar dev",
-    "build": "quasar build",
-    "icons": "icongenie g -i ./public/assets/notes/basic.png"
+    "dev": "quasar dev -m ssr",
+    "build": "quasar build -m ssr",
+    "heroku-postbuild": "yarn && yarn build",
+    "icons": "icongenie g -i ./public/assets/notes/basic.png",
+    "start": "cd dist/ssr && yarn start"
   },
   "dependencies": {
     "@quasar/extras": "^1.0.0",
     "axios": "^0.18.1",
+    "body-parser": "^1.19.0",
     "core-js": "^3.6.5",
     "dotenv": "^8.2.0",
+    "form-data": "^4.0.0",
+    "jsonwebtoken": "^8.5.1",
+    "mongoose": "^5.12.3",
     "quasar": "^1.0.0",
+    "vue-dayjs-plugin": "^1.0.0",
     "vue-i18n": "^8.0.0",
     "vuex-persistedstate": "3.0.1"
   },
@@ -49,8 +56,8 @@
     "last 5 Opera versions"
   ],
   "engines": {
-    "node": ">= 10.18.1",
-    "npm": ">= 6.13.4",
-    "yarn": ">= 1.21.1"
+    "node": ">= 12.18.3",
+    "npm": ">= 6.14.11",
+    "yarn": ">= 1.22.5"
   }
 }

quasar.conf.js

@@ -13,7 +13,7 @@ module.exports = function (/* ctx */) {
     supportTS: false,
 
     // https://quasar.dev/quasar-cli/prefetch-feature
-    // preFetch: true,
+    preFetch: true,
 
     // app boot file (/src/boot)
     // --> boot files are part of "main.js"
@@ -22,7 +22,9 @@ module.exports = function (/* ctx */) {
       'i18n',
       'axios',
       'mixin',
-      'analytics'
+      { path: 'analytics', server: false },
+      { path: 'persist', server: false },
+      { path: 'day', server: false }
     ],
 
     // https://quasar.dev/quasar-cli/quasar-conf-js#Property%3A-css
@@ -48,9 +50,14 @@ module.exports = function (/* ctx */) {
     build: {
       vueRouterMode: 'hash', // available values: 'hash', 'history'
       env: {
-        BACK_URL: process.env.BACK_URL,
+        // I don't know why the fuck dotenv always parse wrong value, this trick should fix it
         DISCORD_CLIENT: process.env.DISCORD_CLIENT,
-        DISCORD_SECRET: process.env.DISCORD_SECRET
+        DISCORD_SECRET: process.env.DISCORD_SECRET,
+        DISCORD_WEBHOOK: process.env.DISCORD_WEBHOOK,
+        DISCORD_GUILD: process.env.DISCORD_GUILD,
+        HOST_URL: process.env.HOST_URL,
+        DB_URL: process.env.DB_URL,
+        JWT_SECRET: process.env.JWT_SECRET
       },
       // transpile: false,
 
@@ -117,7 +124,7 @@ module.exports = function (/* ctx */) {
       // directives: [],
 
       // Quasar plugins
-      plugins: ['Notify', 'SessionStorage'],
+      plugins: ['Notify', 'LocalStorage', 'Meta'],
       cssAddon: true
     },
 

src-ssr/controllers/meta.js

@@ -0,0 +1,30 @@
+const patterns = require('../models/patterns.js')
+
+module.exports = {
+  async pattern (req, res) {
+    try {
+      const result = await patterns.findById(req.params.id).populate('submitter', 'name').lean()
+      if (result === null) {
+        res.status(404).send({ success: false, message: 'Not found' })
+      } else {
+        const img = result.previews.length > 0 ? `http://i3.ytimg.com/vi/${result.previews[0].ytid}/hqdefault.jpg` : 'https://raw.githubusercontent.com/techmania-team/techmania-team.github.io/master/public/assets/Logo_black.png'
+        res.send(
+          `
+          <meta name="title" content="${result.name} | TECHMANIA">
+          <meta name="description" content="TECHMANIA >> Patterns >>  ${result.name}">
+          <meta name="og:type" content="website" data-dynamic="true" data-qmeta="ogType">
+          <meta name="og:url" content="${new URL('/patterns/' + result._id, process.env.HOST_URL).toString()}">
+          <meta name="og:title" content="${result.name} | TECHMANIA">
+          <meta name="og:description" content="TECHMANIA >> Patterns >>  ${result.name}">
+          <meta name="og:image" content="${img}">
+          <meta name="twitter:title" content="${result.name} | TECHMANIA">
+          <meta name="twitter:url" content="${new URL('/patterns/' + result._id, process.env.HOST_URL).toString()}">
+          <meta name="twitter:description" content="TECHMANIA >> Patterns >> ${result.name}">
+          `
+        )
+      }
+    } catch (error) {
+      res.status(500).send({ success: false, message: 'Server Error' })
+    }
+  }
+}

src-ssr/controllers/patterns.js

@@ -0,0 +1,161 @@
+const axios = require('axios')
+const mongoose = require('mongoose')
+const patterns = require('../models/patterns.js')
+
+module.exports = {
+  async create (req, res) {
+    try {
+      const infoidx = req.user.accessInfo.findIndex(info => info.jwt === req.token)
+      // check in discord guild or not
+      const response = await axios.get('https://discord.com/api/users/@me/guilds', {
+        headers: { Authorization: `Bearer ${req.user.accessInfo[infoidx].discord}` }
+      })
+      const inGuild = response.data.find(guild => guild.id.toString() === process.env.DISCORD_GUILD.toString())
+      if (!inGuild) {
+        res.status(403).send({ success: false, message: 'Not in guild' })
+        return
+      } else {
+        const result = await patterns.create({
+          submitter: req.user._id,
+          name: req.body.name,
+          composer: req.body.composer,
+          keysounded: req.body.keysounded,
+          difficulties: req.body.difficulties,
+          link: req.body.link,
+          previews: req.body.previews,
+          description: req.body.description
+        })
+        let strPreveiw = ''
+        for (const preview of req.body.previews) {
+          strPreveiw += `https://www.youtube.com/watch?v=${preview.ytid}\n`
+        }
+        const controls = ['Touch', 'Key', 'KM']
+        let strDifficulty = ''
+        for (const difficulty of req.body.difficulties) {
+          strDifficulty += `${controls[difficulty.control]} - ${difficulty.name}: lv.${difficulty.level}\n`
+        }
+        await axios.post(process.env.DISCORD_WEBHOOK, {
+          username: 'TECHMANIA',
+          avatar_url: 'https://avatars.githubusercontent.com/u/77661148?s=200&v=4',
+          content: `New pattern submitted by <@${req.user.discord}>`,
+          embeds: [{
+            url: new URL(`/patterns/${result._id}`, process.env.HOST_URL).toString(),
+            image: { url: `http://i3.ytimg.com/vi/${req.body.previews[0].ytid}/hqdefault.jpg` },
+            title: req.body.name,
+            color: '15158332',
+            fields: [
+              { name: 'Composer', value: req.body.composer, inline: true },
+              { name: 'Keysounded', value: req.body.keysounded === true ? 'Yes' : 'No', inline: true },
+              { name: 'Previews', value: strPreveiw, inline: false },
+              { name: 'Difficulties', value: strDifficulty, inline: false },
+              { name: 'Download', value: req.body.link, inline: false },
+              { name: 'Description', value: req.body.description, inline: false }
+            ]
+          }]
+        })
+        res.status(200).send({ success: true, message: '' })
+      }
+    } catch (error) {
+      console.log(error)
+      res.status(500).send({ success: false, message: 'Server Error' })
+    }
+  },
+  async search (req, res) {
+    try {
+      const query = {}
+      let skip = 0
+      let limit = 0
+      if (req.query.submitter) {
+        query.submitter = mongoose.Types.ObjectId(req.query.submitter)
+      }
+      if (req.query.start) {
+        skip = parseInt(req.query.start)
+        skip = isNaN(skip) ? 0 : skip
+      }
+      if (req.query.limit) {
+        limit = parseInt(req.query.limit)
+        limit = isNaN(limit) ? 0 : limit
+      }
+      const result = await patterns.find(query, {}, { skip, limit }).sort('-submitDate').populate('submitter', 'name').lean()
+      res.status(200).send({ success: true, message: '', result })
+    } catch (error) {
+      console.log(error)
+      res.status(500).send({ success: false, message: 'Server Error' })
+    }
+  },
+  async searchID (req, res) {
+    try {
+      const result = await patterns.findById(req.params.id).populate('submitter', 'name').lean()
+      if (result === null) {
+        res.status(404).send({ success: false, message: 'Not found' })
+      } else {
+        res.status(200).send({ success: true, message: '', result })
+      }
+    } catch (error) {
+      res.status(500).send({ success: false, message: 'Server Error' })
+    }
+  },
+  async del (req, res) {
+    try {
+      const infoidx = req.user.accessInfo.findIndex(info => info.jwt === req.token)
+      // check in discord guild or not
+      const response = await axios.get('https://discord.com/api/users/@me/guilds', {
+        headers: { Authorization: `Bearer ${req.user.accessInfo[infoidx].discord}` }
+      })
+      const inGuild = response.data.find(guild => guild.id.toString() === process.env.DISCORD_GUILD.toString())
+      if (!inGuild) {
+        res.status(403).send({ success: false, message: 'Not in guild' })
+        return
+      } else {
+        await patterns.findOneAndDelete({ _id: mongoose.Types.ObjectId(req.params.id), submitter: req.user._id })
+        res.status(200).send({ success: true, message: '' })
+      }
+    } catch (error) {
+      console.log(error)
+      res.status(500).send({ success: false, message: 'Server Error' })
+    }
+  },
+  async update (req, res) {
+    try {
+      const infoidx = req.user.accessInfo.findIndex(info => info.jwt === req.token)
+      // check in discord guild or not
+      const response = await axios.get('https://discord.com/api/users/@me/guilds', {
+        headers: { Authorization: `Bearer ${req.user.accessInfo[infoidx].discord}` }
+      })
+      const inGuild = response.data.find(guild => guild.id.toString() === process.env.DISCORD_GUILD.toString())
+      if (!inGuild) {
+        res.status(403).send({ success: false, message: 'Not in guild' })
+        return
+      } else {
+        await patterns.findOneAndUpdate({
+          _id: mongoose.Types.ObjectId(req.params.id),
+          submitter: req.user._id,
+          name: req.body.name,
+          composer: req.body.composer,
+          keysounded: req.body.keysounded,
+          difficulties: req.body.difficulties,
+          link: req.body.link,
+          previews: req.body.previews,
+          description: req.body.description,
+          updateDate: Date.now()
+        })
+        res.status(200).send({ success: true, message: '' })
+      }
+    } catch (error) {
+      console.log(error)
+      res.status(500).send({ success: false, message: 'Server Error' })
+    }
+  },
+  async indexvideo (req, res) {
+    try {
+      const result = await patterns.aggregate([
+        { $unwind: '$previews' },
+        { $project: { 'previews.ytid': 1 } },
+        { $sample: { size: 7 } }
+      ])
+      res.status(200).send({ success: true, message: '', result })
+    } catch (error) {
+
+    }
+  }
+}