Add the first version of the history site
This commit is contained in:
Oliver-Akins
parent
e616466f98
commit
cd2349a449
16 changed files with 1696 additions and 0 deletions
7
site/README.md
Normal file
7
site/README.md
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
# Vue 3 + Vite
|
||||
|
||||
This template should help get you started developing with Vue 3 in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
|
||||
|
||||
## Recommended IDE Setup
|
||||
|
||||
- [VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=johnsoncodehk.volar)
|
||||
17
site/component_template.vue
Normal file
17
site/component_template.vue
Normal file
|
|
@ -0,0 +1,17 @@
|
|||
<script setup>
|
||||
// This starter template is using Vue 3 <script setup> SFCs
|
||||
// Check out https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup
|
||||
</script>
|
||||
|
||||
<template>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {return {}},
|
||||
mounted() {},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
</style>
|
||||
25
site/deploy.sh
Normal file
25
site/deploy.sh
Normal file
|
|
@ -0,0 +1,25 @@
|
|||
#!/bin/bash
|
||||
|
||||
# abort on errors
|
||||
set -e
|
||||
|
||||
# build
|
||||
npm run build
|
||||
|
||||
# navigate into the build output directory
|
||||
cd dist
|
||||
|
||||
# if you are deploying to a custom domain
|
||||
# echo 'oliver.akins.me' > CNAME
|
||||
|
||||
git init
|
||||
git add -A
|
||||
git commit -m 'deploy'
|
||||
|
||||
# if you are deploying to https://<USERNAME>.github.io
|
||||
# git push -f git@github.com:<USERNAME>/<USERNAME>.github.io.git master
|
||||
|
||||
# if you are deploying to https://<USERNAME>.github.io/<REPO>
|
||||
git push -f git@github.com:Oliver-Akins/Quote-Bracket.git rewrite:gh-pages
|
||||
|
||||
cd -
|
||||
12
site/index.html
Normal file
12
site/index.html
Normal file
|
|
@ -0,0 +1,12 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Quote Bracket History</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
<script type="module" src="/src/main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
630
site/package-lock.json
generated
Normal file
630
site/package-lock.json
generated
Normal file
|
|
@ -0,0 +1,630 @@
|
|||
{
|
||||
"name": "site",
|
||||
"version": "0.0.0",
|
||||
"lockfileVersion": 2,
|
||||
"requires": true,
|
||||
"packages": {
|
||||
"": {
|
||||
"version": "0.0.0",
|
||||
"dependencies": {
|
||||
"axios": "^0.21.4",
|
||||
"vue": "^3.2.13"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@vitejs/plugin-vue": "^1.9.0",
|
||||
"vite": "^2.5.10"
|
||||
}
|
||||
},
|
||||
"node_modules/@babel/parser": {
|
||||
"version": "7.15.7",
|
||||
"resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.15.7.tgz",
|
||||
"integrity": "sha512-rycZXvQ+xS9QyIcJ9HXeDWf1uxqlbVFAUq0Rq0dbc50Zb/+wUe/ehyfzGfm9KZZF0kBejYgxltBXocP+gKdL2g==",
|
||||
"bin": {
|
||||
"parser": "bin/babel-parser.js"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=6.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@vitejs/plugin-vue": {
|
||||
"version": "1.9.2",
|
||||
"resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-1.9.2.tgz",
|
||||
"integrity": "sha512-QnUQJvGmY+YT9xTidLcjr6NAjKWNdSuul1M+BZ6uwTQaO5vpAY9USBncXESATk742dYMZGJenegJgeJhG/HMNQ==",
|
||||
"dev": true,
|
||||
"engines": {
|
||||
"node": ">=12.0.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"vite": "^2.5.10"
|
||||
}
|
||||
},
|
||||
"node_modules/@vue/compiler-core": {
|
||||
"version": "3.2.19",
|
||||
"resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.2.19.tgz",
|
||||
"integrity": "sha512-8dOPX0YOtaXol0Zf2cfLQ4NU/yHYl2H7DCKsLEZ7gdvPK6ZSEwGLJ7IdghhY2YEshEpC5RB9QKdC5I07z8Dtjg==",
|
||||
"dependencies": {
|
||||
"@babel/parser": "^7.15.0",
|
||||
"@vue/shared": "3.2.19",
|
||||
"estree-walker": "^2.0.2",
|
||||
"source-map": "^0.6.1"
|
||||
}
|
||||
},
|
||||
"node_modules/@vue/compiler-dom": {
|
||||
"version": "3.2.19",
|
||||
"resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.2.19.tgz",
|
||||
"integrity": "sha512-WzQoE8rfkFjPtIioc7SSgTsnz9g2oG61DU8KHnzPrRS7fW/lji6H2uCYJfp4Z6kZE8GjnHc1Ljwl3/gxDes0cw==",
|
||||
"dependencies": {
|
||||
"@vue/compiler-core": "3.2.19",
|
||||
"@vue/shared": "3.2.19"
|
||||
}
|
||||
},
|
||||
"node_modules/@vue/compiler-sfc": {
|
||||
"version": "3.2.19",
|
||||
"resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.2.19.tgz",
|
||||
"integrity": "sha512-pLlbgkO1UHTO02MSpa/sFOXUwIDxSMiKZ1ozE5n71CY4DM+YmI+G3gT/ZHZ46WBId7f3VTF/D8pGwMygcQbrQA==",
|
||||
"dependencies": {
|
||||
"@babel/parser": "^7.15.0",
|
||||
"@vue/compiler-core": "3.2.19",
|
||||
"@vue/compiler-dom": "3.2.19",
|
||||
"@vue/compiler-ssr": "3.2.19",
|
||||
"@vue/ref-transform": "3.2.19",
|
||||
"@vue/shared": "3.2.19",
|
||||
"estree-walker": "^2.0.2",
|
||||
"magic-string": "^0.25.7",
|
||||
"postcss": "^8.1.10",
|
||||
"source-map": "^0.6.1"
|
||||
}
|
||||
},
|
||||
"node_modules/@vue/compiler-ssr": {
|
||||
"version": "3.2.19",
|
||||
"resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.2.19.tgz",
|
||||
"integrity": "sha512-oLon0Cn3O7WEYzzmzZavGoqXH+199LT+smdjBT3Uf3UX4HwDNuBFCmvL0TsqV9SQnIgKvBRbQ7lhbpnd4lqM3w==",
|
||||
"dependencies": {
|
||||
"@vue/compiler-dom": "3.2.19",
|
||||
"@vue/shared": "3.2.19"
|
||||
}
|
||||
},
|
||||
"node_modules/@vue/reactivity": {
|
||||
"version": "3.2.19",
|
||||
"resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.2.19.tgz",
|
||||
"integrity": "sha512-FtachoYs2SnyrWup5UikP54xDX6ZJ1s5VgHcJp4rkGoutU3Ry61jhs+nCX7J64zjX992Mh9gGUC0LqTs8q9vCA==",
|
||||
"dependencies": {
|
||||
"@vue/shared": "3.2.19"
|
||||
}
|
||||
},
|
||||
"node_modules/@vue/ref-transform": {
|
||||
"version": "3.2.19",
|
||||
"resolved": "https://registry.npmjs.org/@vue/ref-transform/-/ref-transform-3.2.19.tgz",
|
||||
"integrity": "sha512-03wwUnoIAeKti5IGGx6Vk/HEBJ+zUcm5wrUM3+PQsGf7IYnXTbeIfHHpx4HeSeWhnLAjqZjADQwW8uA4rBmVbg==",
|
||||
"dependencies": {
|
||||
"@babel/parser": "^7.15.0",
|
||||
"@vue/compiler-core": "3.2.19",
|
||||
"@vue/shared": "3.2.19",
|
||||
"estree-walker": "^2.0.2",
|
||||
"magic-string": "^0.25.7"
|
||||
}
|
||||
},
|
||||
"node_modules/@vue/runtime-core": {
|
||||
"version": "3.2.19",
|
||||
"resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.2.19.tgz",
|
||||
"integrity": "sha512-qArZSWKxWsgKfxk9BelZ32nY0MZ31CAW2kUUyVJyxh4cTfHaXGbjiQB5JgsvKc49ROMNffv9t3/qjasQqAH+RQ==",
|
||||
"dependencies": {
|
||||
"@vue/reactivity": "3.2.19",
|
||||
"@vue/shared": "3.2.19"
|
||||
}
|
||||
},
|
||||
"node_modules/@vue/runtime-dom": {
|
||||
"version": "3.2.19",
|
||||
"resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.2.19.tgz",
|
||||
"integrity": "sha512-hIRboxXwafeHhbZEkZYNV0MiJXPNf4fP0X6hM2TJb0vssz8BKhD9cF92BkRgZztTQevecbhk0gu4uAPJ3dxL9A==",
|
||||
"dependencies": {
|
||||
"@vue/runtime-core": "3.2.19",
|
||||
"@vue/shared": "3.2.19",
|
||||
"csstype": "^2.6.8"
|
||||
}
|
||||
},
|
||||
"node_modules/@vue/server-renderer": {
|
||||
"version": "3.2.19",
|
||||
"resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.2.19.tgz",
|
||||
"integrity": "sha512-A9FNT7fgQJXItwdzWREntAgWKVtKYuXHBKGev/H4+ByTu8vB7gQXGcim01QxaJshdNg4dYuH2tEBZXCNCNx+/w==",
|
||||
"dependencies": {
|
||||
"@vue/compiler-ssr": "3.2.19",
|
||||
"@vue/shared": "3.2.19"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"vue": "3.2.19"
|
||||
}
|
||||
},
|
||||
"node_modules/@vue/shared": {
|
||||
"version": "3.2.19",
|
||||
"resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.2.19.tgz",
|
||||
"integrity": "sha512-Knqhx7WieLdVgwCAZgTVrDCXZ50uItuecLh9JdLC8O+a5ayaSyIQYveUK3hCRNC7ws5zalHmZwfdLMGaS8r4Ew=="
|
||||
},
|
||||
"node_modules/axios": {
|
||||
"version": "0.21.4",
|
||||
"resolved": "https://registry.npmjs.org/axios/-/axios-0.21.4.tgz",
|
||||
"integrity": "sha512-ut5vewkiu8jjGBdqpM44XxjuCjq9LAKeHVmoVfHVzy8eHgxxq8SbAVQNovDA8mVi05kP0Ea/n/UzcSHcTJQfNg==",
|
||||
"dependencies": {
|
||||
"follow-redirects": "^1.14.0"
|
||||
}
|
||||
},
|
||||
"node_modules/csstype": {
|
||||
"version": "2.6.18",
|
||||
"resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.18.tgz",
|
||||
"integrity": "sha512-RSU6Hyeg14am3Ah4VZEmeX8H7kLwEEirXe6aU2IPfKNvhXwTflK5HQRDNI0ypQXoqmm+QPyG2IaPuQE5zMwSIQ=="
|
||||
},
|
||||
"node_modules/esbuild": {
|
||||
"version": "0.12.29",
|
||||
"resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.12.29.tgz",
|
||||
"integrity": "sha512-w/XuoBCSwepyiZtIRsKsetiLDUVGPVw1E/R3VTFSecIy8UR7Cq3SOtwKHJMFoVqqVG36aGkzh4e8BvpO1Fdc7g==",
|
||||
"dev": true,
|
||||
"hasInstallScript": true,
|
||||
"bin": {
|
||||
"esbuild": "bin/esbuild"
|
||||
}
|
||||
},
|
||||
"node_modules/estree-walker": {
|
||||
"version": "2.0.2",
|
||||
"resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz",
|
||||
"integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w=="
|
||||
},
|
||||
"node_modules/follow-redirects": {
|
||||
"version": "1.14.4",
|
||||
"resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.14.4.tgz",
|
||||
"integrity": "sha512-zwGkiSXC1MUJG/qmeIFH2HBJx9u0V46QGUe3YR1fXG8bXQxq7fLj0RjLZQ5nubr9qNJUZrH+xUcwXEoXNpfS+g==",
|
||||
"funding": [
|
||||
{
|
||||
"type": "individual",
|
||||
"url": "https://github.com/sponsors/RubenVerborgh"
|
||||
}
|
||||
],
|
||||
"engines": {
|
||||
"node": ">=4.0"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"debug": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/fsevents": {
|
||||
"version": "2.3.2",
|
||||
"resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
|
||||
"integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
|
||||
"dev": true,
|
||||
"hasInstallScript": true,
|
||||
"optional": true,
|
||||
"os": [
|
||||
"darwin"
|
||||
],
|
||||
"engines": {
|
||||
"node": "^8.16.0 || ^10.6.0 || >=11.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/function-bind": {
|
||||
"version": "1.1.1",
|
||||
"resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz",
|
||||
"integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/has": {
|
||||
"version": "1.0.3",
|
||||
"resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz",
|
||||
"integrity": "sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"function-bind": "^1.1.1"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 0.4.0"
|
||||
}
|
||||
},
|
||||
"node_modules/is-core-module": {
|
||||
"version": "2.6.0",
|
||||
"resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.6.0.tgz",
|
||||
"integrity": "sha512-wShG8vs60jKfPWpF2KZRaAtvt3a20OAn7+IJ6hLPECpSABLcKtFKTTI4ZtH5QcBruBHlq+WsdHWyz0BCZW7svQ==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"has": "^1.0.3"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/ljharb"
|
||||
}
|
||||
},
|
||||
"node_modules/magic-string": {
|
||||
"version": "0.25.7",
|
||||
"resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.25.7.tgz",
|
||||
"integrity": "sha512-4CrMT5DOHTDk4HYDlzmwu4FVCcIYI8gauveasrdCu2IKIFOJ3f0v/8MDGJCDL9oD2ppz/Av1b0Nj345H9M+XIA==",
|
||||
"dependencies": {
|
||||
"sourcemap-codec": "^1.4.4"
|
||||
}
|
||||
},
|
||||
"node_modules/nanocolors": {
|
||||
"version": "0.2.6",
|
||||
"resolved": "https://registry.npmjs.org/nanocolors/-/nanocolors-0.2.6.tgz",
|
||||
"integrity": "sha512-lP8hjPSXTQ7qpYl5hFPVTBXGdd7+Rn3oi8GqIPNZP63L09tewRzWYFxAy26B1BYOOYaPWgmVF/BFIhDAHihwUQ=="
|
||||
},
|
||||
"node_modules/nanoid": {
|
||||
"version": "3.1.25",
|
||||
"resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.1.25.tgz",
|
||||
"integrity": "sha512-rdwtIXaXCLFAQbnfqDRnI6jaRHp9fTcYBjtFKE8eezcZ7LuLjhUaQGNeMXf1HmRoCH32CLz6XwX0TtxEOS/A3Q==",
|
||||
"bin": {
|
||||
"nanoid": "bin/nanoid.cjs"
|
||||
},
|
||||
"engines": {
|
||||
"node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
|
||||
}
|
||||
},
|
||||
"node_modules/path-parse": {
|
||||
"version": "1.0.7",
|
||||
"resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz",
|
||||
"integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/postcss": {
|
||||
"version": "8.3.8",
|
||||
"resolved": "https://registry.npmjs.org/postcss/-/postcss-8.3.8.tgz",
|
||||
"integrity": "sha512-GT5bTjjZnwDifajzczOC+r3FI3Cu+PgPvrsjhQdRqa2kTJ4968/X9CUce9xttIB0xOs5c6xf0TCWZo/y9lF6bA==",
|
||||
"dependencies": {
|
||||
"nanocolors": "^0.2.2",
|
||||
"nanoid": "^3.1.25",
|
||||
"source-map-js": "^0.6.2"
|
||||
},
|
||||
"engines": {
|
||||
"node": "^10 || ^12 || >=14"
|
||||
},
|
||||
"funding": {
|
||||
"type": "opencollective",
|
||||
"url": "https://opencollective.com/postcss/"
|
||||
}
|
||||
},
|
||||
"node_modules/resolve": {
|
||||
"version": "1.20.0",
|
||||
"resolved": "https://registry.npmjs.org/resolve/-/resolve-1.20.0.tgz",
|
||||
"integrity": "sha512-wENBPt4ySzg4ybFQW2TT1zMQucPK95HSh/nq2CFTZVOGut2+pQvSsgtda4d26YrYcr067wjbmzOG8byDPBX63A==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"is-core-module": "^2.2.0",
|
||||
"path-parse": "^1.0.6"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/ljharb"
|
||||
}
|
||||
},
|
||||
"node_modules/rollup": {
|
||||
"version": "2.57.0",
|
||||
"resolved": "https://registry.npmjs.org/rollup/-/rollup-2.57.0.tgz",
|
||||
"integrity": "sha512-bKQIh1rWKofRee6mv8SrF2HdP6pea5QkwBZSMImJysFj39gQuiV8MEPBjXOCpzk3wSYp63M2v2wkWBmFC8O/rg==",
|
||||
"dev": true,
|
||||
"bin": {
|
||||
"rollup": "dist/bin/rollup"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=10.0.0"
|
||||
},
|
||||
"optionalDependencies": {
|
||||
"fsevents": "~2.3.2"
|
||||
}
|
||||
},
|
||||
"node_modules/source-map": {
|
||||
"version": "0.6.1",
|
||||
"resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
|
||||
"integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
|
||||
"engines": {
|
||||
"node": ">=0.10.0"
|
||||
}
|
||||
},
|
||||
"node_modules/source-map-js": {
|
||||
"version": "0.6.2",
|
||||
"resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-0.6.2.tgz",
|
||||
"integrity": "sha512-/3GptzWzu0+0MBQFrDKzw/DvvMTUORvgY6k6jd/VS6iCR4RDTKWH6v6WPwQoUO8667uQEf9Oe38DxAYWY5F/Ug==",
|
||||
"engines": {
|
||||
"node": ">=0.10.0"
|
||||
}
|
||||
},
|
||||
"node_modules/sourcemap-codec": {
|
||||
"version": "1.4.8",
|
||||
"resolved": "https://registry.npmjs.org/sourcemap-codec/-/sourcemap-codec-1.4.8.tgz",
|
||||
"integrity": "sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA=="
|
||||
},
|
||||
"node_modules/vite": {
|
||||
"version": "2.5.10",
|
||||
"resolved": "https://registry.npmjs.org/vite/-/vite-2.5.10.tgz",
|
||||
"integrity": "sha512-0ObiHTi5AHyXdJcvZ67HMsDgVpjT5RehvVKv6+Q0jFZ7zDI28PF5zK9mYz2avxdA+4iJMdwCz6wnGNnn4WX5Gg==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"esbuild": "^0.12.17",
|
||||
"postcss": "^8.3.6",
|
||||
"resolve": "^1.20.0",
|
||||
"rollup": "^2.38.5"
|
||||
},
|
||||
"bin": {
|
||||
"vite": "bin/vite.js"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=12.2.0"
|
||||
},
|
||||
"optionalDependencies": {
|
||||
"fsevents": "~2.3.2"
|
||||
}
|
||||
},
|
||||
"node_modules/vue": {
|
||||
"version": "3.2.19",
|
||||
"resolved": "https://registry.npmjs.org/vue/-/vue-3.2.19.tgz",
|
||||
"integrity": "sha512-6KAMdIfAtlK+qohTIUE4urwAv4A3YRuo8uAbByApUmiB0CziGAAPs6qVugN6oHPia8YIafHB/37K0O6KZ7sGmA==",
|
||||
"dependencies": {
|
||||
"@vue/compiler-dom": "3.2.19",
|
||||
"@vue/compiler-sfc": "3.2.19",
|
||||
"@vue/runtime-dom": "3.2.19",
|
||||
"@vue/server-renderer": "3.2.19",
|
||||
"@vue/shared": "3.2.19"
|
||||
}
|
||||
}
|
||||
},
|
||||
"dependencies": {
|
||||
"@babel/parser": {
|
||||
"version": "7.15.7",
|
||||
"resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.15.7.tgz",
|
||||
"integrity": "sha512-rycZXvQ+xS9QyIcJ9HXeDWf1uxqlbVFAUq0Rq0dbc50Zb/+wUe/ehyfzGfm9KZZF0kBejYgxltBXocP+gKdL2g=="
|
||||
},
|
||||
"@vitejs/plugin-vue": {
|
||||
"version": "1.9.2",
|
||||
"resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-1.9.2.tgz",
|
||||
"integrity": "sha512-QnUQJvGmY+YT9xTidLcjr6NAjKWNdSuul1M+BZ6uwTQaO5vpAY9USBncXESATk742dYMZGJenegJgeJhG/HMNQ==",
|
||||
"dev": true,
|
||||
"requires": {}
|
||||
},
|
||||
"@vue/compiler-core": {
|
||||
"version": "3.2.19",
|
||||
"resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.2.19.tgz",
|
||||
"integrity": "sha512-8dOPX0YOtaXol0Zf2cfLQ4NU/yHYl2H7DCKsLEZ7gdvPK6ZSEwGLJ7IdghhY2YEshEpC5RB9QKdC5I07z8Dtjg==",
|
||||
"requires": {
|
||||
"@babel/parser": "^7.15.0",
|
||||
"@vue/shared": "3.2.19",
|
||||
"estree-walker": "^2.0.2",
|
||||
"source-map": "^0.6.1"
|
||||
}
|
||||
},
|
||||
"@vue/compiler-dom": {
|
||||
"version": "3.2.19",
|
||||
"resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.2.19.tgz",
|
||||
"integrity": "sha512-WzQoE8rfkFjPtIioc7SSgTsnz9g2oG61DU8KHnzPrRS7fW/lji6H2uCYJfp4Z6kZE8GjnHc1Ljwl3/gxDes0cw==",
|
||||
"requires": {
|
||||
"@vue/compiler-core": "3.2.19",
|
||||
"@vue/shared": "3.2.19"
|
||||
}
|
||||
},
|
||||
"@vue/compiler-sfc": {
|
||||
"version": "3.2.19",
|
||||
"resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.2.19.tgz",
|
||||
"integrity": "sha512-pLlbgkO1UHTO02MSpa/sFOXUwIDxSMiKZ1ozE5n71CY4DM+YmI+G3gT/ZHZ46WBId7f3VTF/D8pGwMygcQbrQA==",
|
||||
"requires": {
|
||||
"@babel/parser": "^7.15.0",
|
||||
"@vue/compiler-core": "3.2.19",
|
||||
"@vue/compiler-dom": "3.2.19",
|
||||
"@vue/compiler-ssr": "3.2.19",
|
||||
"@vue/ref-transform": "3.2.19",
|
||||
"@vue/shared": "3.2.19",
|
||||
"estree-walker": "^2.0.2",
|
||||
"magic-string": "^0.25.7",
|
||||
"postcss": "^8.1.10",
|
||||
"source-map": "^0.6.1"
|
||||
}
|
||||
},
|
||||
"@vue/compiler-ssr": {
|
||||
"version": "3.2.19",
|
||||
"resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.2.19.tgz",
|
||||
"integrity": "sha512-oLon0Cn3O7WEYzzmzZavGoqXH+199LT+smdjBT3Uf3UX4HwDNuBFCmvL0TsqV9SQnIgKvBRbQ7lhbpnd4lqM3w==",
|
||||
"requires": {
|
||||
"@vue/compiler-dom": "3.2.19",
|
||||
"@vue/shared": "3.2.19"
|
||||
}
|
||||
},
|
||||
"@vue/reactivity": {
|
||||
"version": "3.2.19",
|
||||
"resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.2.19.tgz",
|
||||
"integrity": "sha512-FtachoYs2SnyrWup5UikP54xDX6ZJ1s5VgHcJp4rkGoutU3Ry61jhs+nCX7J64zjX992Mh9gGUC0LqTs8q9vCA==",
|
||||
"requires": {
|
||||
"@vue/shared": "3.2.19"
|
||||
}
|
||||
},
|
||||
"@vue/ref-transform": {
|
||||
"version": "3.2.19",
|
||||
"resolved": "https://registry.npmjs.org/@vue/ref-transform/-/ref-transform-3.2.19.tgz",
|
||||
"integrity": "sha512-03wwUnoIAeKti5IGGx6Vk/HEBJ+zUcm5wrUM3+PQsGf7IYnXTbeIfHHpx4HeSeWhnLAjqZjADQwW8uA4rBmVbg==",
|
||||
"requires": {
|
||||
"@babel/parser": "^7.15.0",
|
||||
"@vue/compiler-core": "3.2.19",
|
||||
"@vue/shared": "3.2.19",
|
||||
"estree-walker": "^2.0.2",
|
||||
"magic-string": "^0.25.7"
|
||||
}
|
||||
},
|
||||
"@vue/runtime-core": {
|
||||
"version": "3.2.19",
|
||||
"resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.2.19.tgz",
|
||||
"integrity": "sha512-qArZSWKxWsgKfxk9BelZ32nY0MZ31CAW2kUUyVJyxh4cTfHaXGbjiQB5JgsvKc49ROMNffv9t3/qjasQqAH+RQ==",
|
||||
"requires": {
|
||||
"@vue/reactivity": "3.2.19",
|
||||
"@vue/shared": "3.2.19"
|
||||
}
|
||||
},
|
||||
"@vue/runtime-dom": {
|
||||
"version": "3.2.19",
|
||||
"resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.2.19.tgz",
|
||||
"integrity": "sha512-hIRboxXwafeHhbZEkZYNV0MiJXPNf4fP0X6hM2TJb0vssz8BKhD9cF92BkRgZztTQevecbhk0gu4uAPJ3dxL9A==",
|
||||
"requires": {
|
||||
"@vue/runtime-core": "3.2.19",
|
||||
"@vue/shared": "3.2.19",
|
||||
"csstype": "^2.6.8"
|
||||
}
|
||||
},
|
||||
"@vue/server-renderer": {
|
||||
"version": "3.2.19",
|
||||
"resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.2.19.tgz",
|
||||
"integrity": "sha512-A9FNT7fgQJXItwdzWREntAgWKVtKYuXHBKGev/H4+ByTu8vB7gQXGcim01QxaJshdNg4dYuH2tEBZXCNCNx+/w==",
|
||||
"requires": {
|
||||
"@vue/compiler-ssr": "3.2.19",
|
||||
"@vue/shared": "3.2.19"
|
||||
}
|
||||
},
|
||||
"@vue/shared": {
|
||||
"version": "3.2.19",
|
||||
"resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.2.19.tgz",
|
||||
"integrity": "sha512-Knqhx7WieLdVgwCAZgTVrDCXZ50uItuecLh9JdLC8O+a5ayaSyIQYveUK3hCRNC7ws5zalHmZwfdLMGaS8r4Ew=="
|
||||
},
|
||||
"axios": {
|
||||
"version": "0.21.4",
|
||||
"resolved": "https://registry.npmjs.org/axios/-/axios-0.21.4.tgz",
|
||||
"integrity": "sha512-ut5vewkiu8jjGBdqpM44XxjuCjq9LAKeHVmoVfHVzy8eHgxxq8SbAVQNovDA8mVi05kP0Ea/n/UzcSHcTJQfNg==",
|
||||
"requires": {
|
||||
"follow-redirects": "^1.14.0"
|
||||
}
|
||||
},
|
||||
"csstype": {
|
||||
"version": "2.6.18",
|
||||
"resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.18.tgz",
|
||||
"integrity": "sha512-RSU6Hyeg14am3Ah4VZEmeX8H7kLwEEirXe6aU2IPfKNvhXwTflK5HQRDNI0ypQXoqmm+QPyG2IaPuQE5zMwSIQ=="
|
||||
},
|
||||
"esbuild": {
|
||||
"version": "0.12.29",
|
||||
"resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.12.29.tgz",
|
||||
"integrity": "sha512-w/XuoBCSwepyiZtIRsKsetiLDUVGPVw1E/R3VTFSecIy8UR7Cq3SOtwKHJMFoVqqVG36aGkzh4e8BvpO1Fdc7g==",
|
||||
"dev": true
|
||||
},
|
||||
"estree-walker": {
|
||||
"version": "2.0.2",
|
||||
"resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz",
|
||||
"integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w=="
|
||||
},
|
||||
"follow-redirects": {
|
||||
"version": "1.14.4",
|
||||
"resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.14.4.tgz",
|
||||
"integrity": "sha512-zwGkiSXC1MUJG/qmeIFH2HBJx9u0V46QGUe3YR1fXG8bXQxq7fLj0RjLZQ5nubr9qNJUZrH+xUcwXEoXNpfS+g=="
|
||||
},
|
||||
"fsevents": {
|
||||
"version": "2.3.2",
|
||||
"resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
|
||||
"integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
|
||||
"dev": true,
|
||||
"optional": true
|
||||
},
|
||||
"function-bind": {
|
||||
"version": "1.1.1",
|
||||
"resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz",
|
||||
"integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==",
|
||||
"dev": true
|
||||
},
|
||||
"has": {
|
||||
"version": "1.0.3",
|
||||
"resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz",
|
||||
"integrity": "sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"function-bind": "^1.1.1"
|
||||
}
|
||||
},
|
||||
"is-core-module": {
|
||||
"version": "2.6.0",
|
||||
"resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.6.0.tgz",
|
||||
"integrity": "sha512-wShG8vs60jKfPWpF2KZRaAtvt3a20OAn7+IJ6hLPECpSABLcKtFKTTI4ZtH5QcBruBHlq+WsdHWyz0BCZW7svQ==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"has": "^1.0.3"
|
||||
}
|
||||
},
|
||||
"magic-string": {
|
||||
"version": "0.25.7",
|
||||
"resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.25.7.tgz",
|
||||
"integrity": "sha512-4CrMT5DOHTDk4HYDlzmwu4FVCcIYI8gauveasrdCu2IKIFOJ3f0v/8MDGJCDL9oD2ppz/Av1b0Nj345H9M+XIA==",
|
||||
"requires": {
|
||||
"sourcemap-codec": "^1.4.4"
|
||||
}
|
||||
},
|
||||
"nanocolors": {
|
||||
"version": "0.2.6",
|
||||
"resolved": "https://registry.npmjs.org/nanocolors/-/nanocolors-0.2.6.tgz",
|
||||
"integrity": "sha512-lP8hjPSXTQ7qpYl5hFPVTBXGdd7+Rn3oi8GqIPNZP63L09tewRzWYFxAy26B1BYOOYaPWgmVF/BFIhDAHihwUQ=="
|
||||
},
|
||||
"nanoid": {
|
||||
"version": "3.1.25",
|
||||
"resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.1.25.tgz",
|
||||
"integrity": "sha512-rdwtIXaXCLFAQbnfqDRnI6jaRHp9fTcYBjtFKE8eezcZ7LuLjhUaQGNeMXf1HmRoCH32CLz6XwX0TtxEOS/A3Q=="
|
||||
},
|
||||
"path-parse": {
|
||||
"version": "1.0.7",
|
||||
"resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz",
|
||||
"integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==",
|
||||
"dev": true
|
||||
},
|
||||
"postcss": {
|
||||
"version": "8.3.8",
|
||||
"resolved": "https://registry.npmjs.org/postcss/-/postcss-8.3.8.tgz",
|
||||
"integrity": "sha512-GT5bTjjZnwDifajzczOC+r3FI3Cu+PgPvrsjhQdRqa2kTJ4968/X9CUce9xttIB0xOs5c6xf0TCWZo/y9lF6bA==",
|
||||
"requires": {
|
||||
"nanocolors": "^0.2.2",
|
||||
"nanoid": "^3.1.25",
|
||||
"source-map-js": "^0.6.2"
|
||||
}
|
||||
},
|
||||
"resolve": {
|
||||
"version": "1.20.0",
|
||||
"resolved": "https://registry.npmjs.org/resolve/-/resolve-1.20.0.tgz",
|
||||
"integrity": "sha512-wENBPt4ySzg4ybFQW2TT1zMQucPK95HSh/nq2CFTZVOGut2+pQvSsgtda4d26YrYcr067wjbmzOG8byDPBX63A==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"is-core-module": "^2.2.0",
|
||||
"path-parse": "^1.0.6"
|
||||
}
|
||||
},
|
||||
"rollup": {
|
||||
"version": "2.57.0",
|
||||
"resolved": "https://registry.npmjs.org/rollup/-/rollup-2.57.0.tgz",
|
||||
"integrity": "sha512-bKQIh1rWKofRee6mv8SrF2HdP6pea5QkwBZSMImJysFj39gQuiV8MEPBjXOCpzk3wSYp63M2v2wkWBmFC8O/rg==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"fsevents": "~2.3.2"
|
||||
}
|
||||
},
|
||||
"source-map": {
|
||||
"version": "0.6.1",
|
||||
"resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
|
||||
"integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
|
||||
},
|
||||
"source-map-js": {
|
||||
"version": "0.6.2",
|
||||
"resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-0.6.2.tgz",
|
||||
"integrity": "sha512-/3GptzWzu0+0MBQFrDKzw/DvvMTUORvgY6k6jd/VS6iCR4RDTKWH6v6WPwQoUO8667uQEf9Oe38DxAYWY5F/Ug=="
|
||||
},
|
||||
"sourcemap-codec": {
|
||||
"version": "1.4.8",
|
||||
"resolved": "https://registry.npmjs.org/sourcemap-codec/-/sourcemap-codec-1.4.8.tgz",
|
||||
"integrity": "sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA=="
|
||||
},
|
||||
"vite": {
|
||||
"version": "2.5.10",
|
||||
"resolved": "https://registry.npmjs.org/vite/-/vite-2.5.10.tgz",
|
||||
"integrity": "sha512-0ObiHTi5AHyXdJcvZ67HMsDgVpjT5RehvVKv6+Q0jFZ7zDI28PF5zK9mYz2avxdA+4iJMdwCz6wnGNnn4WX5Gg==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"esbuild": "^0.12.17",
|
||||
"fsevents": "~2.3.2",
|
||||
"postcss": "^8.3.6",
|
||||
"resolve": "^1.20.0",
|
||||
"rollup": "^2.38.5"
|
||||
}
|
||||
},
|
||||
"vue": {
|
||||
"version": "3.2.19",
|
||||
"resolved": "https://registry.npmjs.org/vue/-/vue-3.2.19.tgz",
|
||||
"integrity": "sha512-6KAMdIfAtlK+qohTIUE4urwAv4A3YRuo8uAbByApUmiB0CziGAAPs6qVugN6oHPia8YIafHB/37K0O6KZ7sGmA==",
|
||||
"requires": {
|
||||
"@vue/compiler-dom": "3.2.19",
|
||||
"@vue/compiler-sfc": "3.2.19",
|
||||
"@vue/runtime-dom": "3.2.19",
|
||||
"@vue/server-renderer": "3.2.19",
|
||||
"@vue/shared": "3.2.19"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
17
site/package.json
Normal file
17
site/package.json
Normal file
|
|
@ -0,0 +1,17 @@
|
|||
{
|
||||
"name": "site",
|
||||
"version": "0.0.0",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"build": "vite build",
|
||||
"serve": "vite preview"
|
||||
},
|
||||
"dependencies": {
|
||||
"axios": "^0.21.4",
|
||||
"vue": "^3.2.13"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@vitejs/plugin-vue": "^1.9.0",
|
||||
"vite": "^2.5.10"
|
||||
}
|
||||
}
|
||||
116
site/src/App.vue
Normal file
116
site/src/App.vue
Normal file
|
|
@ -0,0 +1,116 @@
|
|||
<script setup>
|
||||
import LoginView from "./views/Login.vue";
|
||||
import GuildSelect from "./views/GuildSelect.vue";
|
||||
import InputID from "./views/InputID.vue";
|
||||
import History from "./views/History.vue";
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<LoginView
|
||||
class="inner-view"
|
||||
v-if="state === `login`"
|
||||
@change-state="state = $event"
|
||||
/>
|
||||
<GuildSelect
|
||||
class="inner-view"
|
||||
v-else-if="state === `guild-select`"
|
||||
@set-guild="setGuild($event)"
|
||||
@change-state="state = $event"
|
||||
/>
|
||||
<InputID
|
||||
class="inner-view"
|
||||
v-else-if="state === `id-entry`"
|
||||
@set-guild="setGuild($event)"
|
||||
@change-state="state = $event"
|
||||
/>
|
||||
<History
|
||||
class="inner-view"
|
||||
v-else-if="state === `view-history`"
|
||||
:gid="gid"
|
||||
@set-guild="setGuild($event)"
|
||||
@change-state="state = $event"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {return {
|
||||
state: `login`,
|
||||
gid: null,
|
||||
}},
|
||||
methods: {
|
||||
setGuild(guild) {
|
||||
this.gid = guild;
|
||||
|
||||
// Don't set null as a parameter
|
||||
if (guild) {
|
||||
let url = new URL(window.location.href);
|
||||
let qs = url.searchParams;
|
||||
|
||||
qs.set(`gid`, guild);
|
||||
|
||||
window.history.replaceState(null, null, url);
|
||||
}
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
|
||||
let qs = new URLSearchParams(window.location.search);
|
||||
|
||||
if (qs.has(`gid`)) {
|
||||
this.gid = qs.get(`gid`);
|
||||
this.state = `view-history`;
|
||||
return;
|
||||
};
|
||||
|
||||
let hash = new URLSearchParams(window.location.hash);
|
||||
|
||||
if (hash.has(`access_token`)) {
|
||||
|
||||
// Check if the state is enabled
|
||||
if (this.discord.auth.useState) {
|
||||
|
||||
// Assert state validity
|
||||
if (sessionStorage.getItem(`qb-auth-state`) === hash.get(`state`)) {
|
||||
console.info(`State compare success`);
|
||||
sessionStorage.setItem(`qb-auth-token`, hash.get(`access_token`));
|
||||
sessionStorage.removeItem(`qb-auth-state`);
|
||||
window.location.hash = ``;
|
||||
} else {
|
||||
console.error(`State compare failed`);
|
||||
window.location.hash = ``;
|
||||
};
|
||||
} else {
|
||||
sessionStorage.setItem(`qb-auth-token`, hash.get(`access_token`));
|
||||
};
|
||||
};
|
||||
|
||||
if (sessionStorage.getItem(`qb-auth-token`)) {
|
||||
this.state = `guild-select`;
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
@import "css/themes/dark.css";
|
||||
@import "css/inputs.css";
|
||||
|
||||
html, body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
margin-top: 5px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
body {
|
||||
background: var(--primary-background);
|
||||
color: var(--light-text);
|
||||
font-family: var(--fonts);
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
}
|
||||
</style>
|
||||
164
site/src/components/GuildDropdown.vue
Normal file
164
site/src/components/GuildDropdown.vue
Normal file
|
|
@ -0,0 +1,164 @@
|
|||
<template>
|
||||
<div
|
||||
class="custom-select"
|
||||
:tabindex="tabindex"
|
||||
@blur="open = false"
|
||||
>
|
||||
<div
|
||||
class="selected"
|
||||
:class="{open: open}"
|
||||
@click.stop="open = !open"
|
||||
>
|
||||
<span v-if="selected === null">
|
||||
Select a Server
|
||||
</span>
|
||||
<div v-else class="guild-card">
|
||||
<img
|
||||
class="guild-icon"
|
||||
:src="`https://cdn.discordapp.com/icons/${selected.id}/${selected.icon}.png`"
|
||||
:alt="`${selected.name}'s Server Icon`"
|
||||
>
|
||||
{{ selected.name }}
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="items"
|
||||
:class="{selectHide: !open}"
|
||||
>
|
||||
<div
|
||||
class="item"
|
||||
v-for="(guild, i) of options"
|
||||
:key="i"
|
||||
@click.stop="handleSelect(guild)"
|
||||
>
|
||||
<div class="guild-card">
|
||||
<img
|
||||
v-if="guild.icon"
|
||||
class="guild-icon"
|
||||
:src="`https://cdn.discordapp.com/icons/${guild.id}/${guild.icon}.png`"
|
||||
:alt="`${guild.name}'s Server Icon`"
|
||||
>
|
||||
{{ guild.name }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
emits: [`setGuild`],
|
||||
props: {
|
||||
options: {
|
||||
required: true,
|
||||
type: Array,
|
||||
},
|
||||
defaultOption: {
|
||||
required: false,
|
||||
type: Number,
|
||||
default: 0,
|
||||
},
|
||||
tabindex: {
|
||||
required: false,
|
||||
type: Number,
|
||||
default: 0,
|
||||
},
|
||||
},
|
||||
data() {return {
|
||||
selected: null,
|
||||
open: false,
|
||||
}},
|
||||
methods: {
|
||||
handleSelect(guild) {
|
||||
this.$emit(`setGuild`, guild);
|
||||
this.selected = guild;
|
||||
this.open = false;
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
if (this.options?.length && this.defaultOption !== null) {
|
||||
this.selected = this.options[this.defaultOption];
|
||||
this.$emit('setGuild', this.selected);
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.guild-card {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.guild-icon {
|
||||
--size: 50px;
|
||||
border-radius: calc(var(--size) / 2);
|
||||
height: var(--size);
|
||||
margin-right: 10px;
|
||||
width: var(--size);
|
||||
}
|
||||
|
||||
.custom-select {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
outline: none;
|
||||
height: 47px;
|
||||
line-height: 47px;
|
||||
}
|
||||
|
||||
.selected {
|
||||
background-color: var(--tertiary-background);
|
||||
border-radius: 6px;
|
||||
border: 1px solid var(--accent-neutral);
|
||||
color: var(--light-text);
|
||||
padding-left: 8px;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.selected.open{
|
||||
border: 1px solid var(--accent-positive);
|
||||
border-radius: 6px 6px 0px 0px;
|
||||
}
|
||||
|
||||
.selected:after {
|
||||
position: absolute;
|
||||
content: "";
|
||||
top: 22px;
|
||||
right: 10px;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border: 4px solid transparent;
|
||||
border-color: #fff transparent transparent transparent;
|
||||
}
|
||||
|
||||
.items {
|
||||
color: #ffffff;
|
||||
border-radius: 0px 0px 6px 6px;
|
||||
overflow: hidden;
|
||||
border-right: 1px solid var(--accent-positive);
|
||||
border-left: 1px solid var(--accent-positive);
|
||||
border-bottom: 1px solid var(--accent-positive);
|
||||
position: absolute;
|
||||
background-color: var(--tertiary-background);
|
||||
left: 0;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.item{
|
||||
color: var(--light-text);
|
||||
padding-left: 8px;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.item:hover{
|
||||
background: #2b3035;
|
||||
}
|
||||
|
||||
.selectHide {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
51
site/src/css/inputs.css
Normal file
51
site/src/css/inputs.css
Normal file
|
|
@ -0,0 +1,51 @@
|
|||
button {
|
||||
background: var(--blurple);
|
||||
border-color: transparent;
|
||||
border-radius: var(--medium-border-radius);
|
||||
border-style: solid;
|
||||
border-width: 2px;
|
||||
color: var(--light-text);
|
||||
cursor: pointer;
|
||||
font-family: var(--fonts);
|
||||
font-size: larger;
|
||||
margin-bottom: 5px;
|
||||
outline: none;
|
||||
padding: 5px 10px;
|
||||
user-select: none;
|
||||
}
|
||||
button:hover:not(:disabled) {
|
||||
border-color: var(--accent-neutral);
|
||||
}
|
||||
button:active:not(:disabled) {
|
||||
border-color: var(--accent-positive);
|
||||
}
|
||||
button:disabled {
|
||||
background-color: var(--blurple-faded);
|
||||
color: #4D4D4D;
|
||||
}
|
||||
|
||||
|
||||
input[type="text"] {
|
||||
background: var(--tertiary-background);
|
||||
border-color: var(--accent-neutral);
|
||||
border-radius: var(--medium-border-radius);
|
||||
border-style: solid;
|
||||
color: var(--light-text);
|
||||
font-family: var(--fonts);
|
||||
font-size: larger;
|
||||
font-weight: bold;
|
||||
margin-bottom: 10px;
|
||||
outline: none;
|
||||
padding: 5px;
|
||||
}
|
||||
input[type="text"]:focus,
|
||||
input[type="text"]:active {
|
||||
border-color: var(--accent-positive);
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--accent-neutral);
|
||||
}
|
||||
a:visited {
|
||||
color: var(--accent-positive);
|
||||
}
|
||||
54
site/src/css/themes/dark.css
Normal file
54
site/src/css/themes/dark.css
Normal file
|
|
@ -0,0 +1,54 @@
|
|||
@import url('https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@500&family=Electrolize&display=swap');
|
||||
|
||||
:root {
|
||||
/* ===================================================================== */
|
||||
/* Default Themes for backgrounds and accent colours */
|
||||
--primary-background: #23272A;
|
||||
--primary-border: unset;
|
||||
--secondary-background: #2C2F33;
|
||||
--secondary-border: unset;
|
||||
--tertiary-background: #343A40;
|
||||
--tertiary-border: unset;
|
||||
|
||||
/* Border indicators for better support in high contrast themes */
|
||||
--large-border-radius: 10px;
|
||||
--medium-border-radius: 7px;
|
||||
--small-border-radius: 5px;
|
||||
|
||||
/* Text colours and the default font family */
|
||||
--fonts: 'Electrolize', 'Chakra Petch', sans-serif;
|
||||
--light-text: #E9ECEF;
|
||||
--dark-text: #000000;
|
||||
|
||||
/* Accent colours used for smaller sections on the site */
|
||||
--accent-positive: #1DB954;
|
||||
--accent-neutral: #7289DA;
|
||||
--accent-negative: #ED4245;
|
||||
|
||||
/* Scrollbar styling */
|
||||
--scrollbar-background: #0f0f0f;
|
||||
--scrollbar-handle: #4D4D4D;
|
||||
--scrollbar-handle-hover: #5E5E5E;
|
||||
|
||||
/* ===================================================================== */
|
||||
/* Additional Themes for the specific site */
|
||||
--blurple-faded: #383e77;
|
||||
|
||||
/* ===================================================================== */
|
||||
/* Discord branding colours */
|
||||
|
||||
/* Pre-Rebranding */
|
||||
--og-blurple: #7289da;
|
||||
--greyple: #99aab5;
|
||||
--dark-but-not-black: #2c2f33;
|
||||
--not-quite-black: #23272a;
|
||||
/* + black and white */
|
||||
|
||||
/* Post-Rebranding */
|
||||
--blurple: #5865f2;
|
||||
--green: #57f287;
|
||||
--yellow: #fee75c;
|
||||
--fuchsia: #eb459e;
|
||||
--red: #ed4245;
|
||||
/* + black and white */
|
||||
}
|
||||
33
site/src/main.js
Normal file
33
site/src/main.js
Normal file
|
|
@ -0,0 +1,33 @@
|
|||
import { createApp } from "vue";
|
||||
import App from "./App.vue";
|
||||
|
||||
let app = createApp(App);
|
||||
|
||||
app.mixin({
|
||||
data() {return {
|
||||
discord: {
|
||||
client: {
|
||||
id: `863968565353906226`,
|
||||
},
|
||||
auth: {
|
||||
base: `https://discord.com/api/oauth2/authorize`,
|
||||
scopes: [
|
||||
`identify`,
|
||||
`guilds`,
|
||||
],
|
||||
useState: true,
|
||||
},
|
||||
api: {
|
||||
base: `https://discord.com/api/v9`,
|
||||
getGuilds: `/users/@me/guilds`,
|
||||
},
|
||||
},
|
||||
private: {
|
||||
api: `http://localhost:3001`,
|
||||
},
|
||||
}},
|
||||
methods: {},
|
||||
computed: {},
|
||||
})
|
||||
|
||||
app.mount('#app');
|
||||
133
site/src/views/GuildSelect.vue
Normal file
133
site/src/views/GuildSelect.vue
Normal file
|
|
@ -0,0 +1,133 @@
|
|||
<script setup>
|
||||
import Dropdown from "../components/GuildDropdown.vue";
|
||||
|
||||
// This starter template is using Vue 3 <script setup> SFCs
|
||||
// Check out https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div id="guild-select">
|
||||
<div class="card">
|
||||
<h1>Quote Bracket</h1>
|
||||
<div v-if="loading">
|
||||
<h2>{{ message }}</h2>
|
||||
<button
|
||||
v-if="errored"
|
||||
@click.stop="$emit(`change-state`, `login`)"
|
||||
>
|
||||
Go Back
|
||||
</button>
|
||||
</div>
|
||||
<div v-else>
|
||||
<Dropdown
|
||||
:options="userGuilds"
|
||||
:default-option="null"
|
||||
@set-guild="selectGuild"
|
||||
/>
|
||||
<br>
|
||||
<button
|
||||
v-if="selectedGuild !== null"
|
||||
@click.stop="loadHistory"
|
||||
>
|
||||
Load History
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import axios from "axios";
|
||||
|
||||
export default {
|
||||
data() {return {
|
||||
userGuilds: [],
|
||||
loading: true,
|
||||
selectedGuild: null,
|
||||
message: `Loading Your Servers...`,
|
||||
errored: false,
|
||||
}},
|
||||
methods: {
|
||||
loadHistory() {
|
||||
this.$emit(`set-guild`, this.selectedGuild.id);
|
||||
this.$emit(`change-state`, `view-history`);
|
||||
},
|
||||
selectGuild(guild) {
|
||||
this.selectedGuild = guild;
|
||||
},
|
||||
},
|
||||
async mounted() {
|
||||
|
||||
// Get the user's guilds from Discord
|
||||
let token = sessionStorage.getItem(`qb-auth-token`);
|
||||
try {
|
||||
var response = await axios.get(
|
||||
`${this.discord.api.base}${this.discord.api.getGuilds}`,
|
||||
{ headers: { 'Authorization': `Bearer ${token}` } }
|
||||
);
|
||||
} catch (err) {
|
||||
this.message = `Error Getting Your Server List From Discord`;
|
||||
this.errored = true;
|
||||
return;
|
||||
};
|
||||
|
||||
let allGuilds = response.data;
|
||||
|
||||
if (200 <= response.status && response.status < 300) {
|
||||
|
||||
// Request the guild intersection from the server
|
||||
try {
|
||||
response = await axios.post(
|
||||
`${this.private.api}/guilds/compare`,
|
||||
response.data.map(g => g.id)
|
||||
);
|
||||
} catch (err) {
|
||||
this.message = `Error Comparing Server Lists`;
|
||||
this.errored = true;
|
||||
return;
|
||||
};
|
||||
|
||||
let intersectedGuilds = response.data;
|
||||
|
||||
if (intersectedGuilds.length === 1) {
|
||||
this.$emit(`set-guild`, intersectedGuilds[0]);
|
||||
this.$emit(`change-state`, `view-history`);
|
||||
return;
|
||||
};
|
||||
|
||||
// Find all the guild objects that were returned from the private API
|
||||
for (var guild of allGuilds) {
|
||||
if (intersectedGuilds.includes(guild.id)) {
|
||||
this.userGuilds.push(guild);
|
||||
};
|
||||
};
|
||||
this.loading = false;
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
#guild-select {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100vh;
|
||||
justify-content: center;
|
||||
width: 100vw;
|
||||
}
|
||||
|
||||
.card {
|
||||
background: var(--secondary-background);
|
||||
border-radius: 7px;
|
||||
padding: 15px;
|
||||
text-align: center;
|
||||
width: 33%;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 768px) {
|
||||
.card {
|
||||
width: 90%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
235
site/src/views/History.vue
Normal file
235
site/src/views/History.vue
Normal file
|
|
@ -0,0 +1,235 @@
|
|||
<script setup>
|
||||
// This starter template is using Vue 3 <script setup> SFCs
|
||||
// Check out https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div id="history">
|
||||
<div class="card">
|
||||
<h2>Quote Bracket History</h2>
|
||||
<div
|
||||
v-if="bracket"
|
||||
>
|
||||
<div class="flex-row controls">
|
||||
<button
|
||||
class="no-mobile"
|
||||
:disabled="isFirst"
|
||||
@click.stop="newestBracket"
|
||||
>
|
||||
Newest
|
||||
</button>
|
||||
<button
|
||||
:disabled="isFirst"
|
||||
@click.stop="newerBracket"
|
||||
>
|
||||
Newer
|
||||
</button>
|
||||
<span>{{ date }}</span>
|
||||
<button
|
||||
:disabled="isLast"
|
||||
@click.stop="olderBracket"
|
||||
>
|
||||
Older
|
||||
</button>
|
||||
<button
|
||||
class="no-mobile"
|
||||
:disabled="isLast"
|
||||
@click.stop="oldestBracket"
|
||||
>
|
||||
Oldest
|
||||
</button>
|
||||
</div>
|
||||
<div class="quotes">
|
||||
<div
|
||||
class="quote"
|
||||
v-for="(quote, i) in bracket.quotes"
|
||||
:key="i"
|
||||
:class="quoteClasses(i)"
|
||||
>
|
||||
<span class="text">
|
||||
{{ quote.text }}
|
||||
</span>
|
||||
<div class="metadata flex-row">
|
||||
<span class="votes">Votes: {{ quote.votes }}</span>
|
||||
<span
|
||||
class="streak"
|
||||
v-if="quote.win_streak > 0"
|
||||
>
|
||||
Win Streak: {{ quote.win_streak }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else>
|
||||
<p>
|
||||
There was an error loading the quote bracket information. Please
|
||||
wait a minute and then try again. If the issue continues, let
|
||||
Oliver know.
|
||||
</p>
|
||||
</div>
|
||||
<button
|
||||
@click.stop="resetGuild"
|
||||
>
|
||||
Pick a Different Server
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import axios from "axios";
|
||||
|
||||
export default {
|
||||
props: {
|
||||
gid: {
|
||||
required: true,
|
||||
}
|
||||
},
|
||||
data() {return {
|
||||
history: [],
|
||||
page: 0,
|
||||
}},
|
||||
computed: {
|
||||
bracket() {
|
||||
return this.history[this.page];
|
||||
},
|
||||
isFirst() {
|
||||
return this.page === this.history.length - 1;
|
||||
},
|
||||
isLast() {
|
||||
return this.page === 0;
|
||||
},
|
||||
date() {
|
||||
let date = new Date(this.bracket.date);
|
||||
return date.toLocaleString();
|
||||
},
|
||||
winners() {
|
||||
let max = -1;
|
||||
let quotes = [];
|
||||
|
||||
for (var qi in this.bracket.quotes) {
|
||||
let q = this.bracket.quotes[qi];
|
||||
if (q.votes === max) {
|
||||
quotes.push(qi);
|
||||
} else if (q.votes > max) {
|
||||
max = q.votes;
|
||||
quotes = [qi];
|
||||
};
|
||||
};
|
||||
|
||||
return quotes;
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
quoteClasses(qi) {
|
||||
if (this.winners.includes(`${qi}`)) {
|
||||
return [`winner`];
|
||||
};
|
||||
return [];
|
||||
},
|
||||
updateQuery() {
|
||||
let url = new URL(window.location.href);
|
||||
let qs = url.searchParams;
|
||||
|
||||
qs.set(`page`, this.page);
|
||||
|
||||
history.replaceState(null, null, url);
|
||||
},
|
||||
oldestBracket() {
|
||||
this.page = 0;
|
||||
this.updateQuery();
|
||||
},
|
||||
olderBracket() {
|
||||
this.page--;
|
||||
this.updateQuery();
|
||||
},
|
||||
newerBracket() {
|
||||
this.page++;
|
||||
this.updateQuery();
|
||||
},
|
||||
newestBracket() {
|
||||
this.page = this.history.length - 1;
|
||||
this.updateQuery();
|
||||
},
|
||||
resetGuild() {
|
||||
history.replaceState(null, null, `/`);
|
||||
|
||||
this.$emit(`set-guild`, null);
|
||||
this.$emit(`change-state`, `login`);
|
||||
},
|
||||
},
|
||||
async mounted() {
|
||||
let qs = new URLSearchParams(window.location.search);
|
||||
|
||||
try {
|
||||
let r = await axios.get(`${this.private.api}/${this.gid}/history`);
|
||||
if (r.status === 200) {
|
||||
this.history = r.data;
|
||||
};
|
||||
|
||||
if (qs.has(`page`)) {
|
||||
this.page = parseInt(qs.get(`page`));
|
||||
this.updateQuery();
|
||||
} else {
|
||||
this.newestBracket();
|
||||
};
|
||||
} catch (err) {};
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
#history {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100vh;
|
||||
justify-content: center;
|
||||
width: 100vw;
|
||||
}
|
||||
|
||||
.card {
|
||||
background: var(--secondary-background);
|
||||
border-radius: 7px;
|
||||
padding: 15px;
|
||||
text-align: center;
|
||||
width: 75%;
|
||||
}
|
||||
|
||||
.flex-row {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
|
||||
.quote {
|
||||
background: var(--tertiary-background);
|
||||
border-radius: var(--large-border-radius);
|
||||
margin-bottom: 10px;
|
||||
padding: 10px;
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
border-color: var(--tertiary-background);
|
||||
}
|
||||
.quote.winner {
|
||||
border-color: gold;
|
||||
}
|
||||
|
||||
.controls {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.quote .metadata {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 768px) {
|
||||
.no-mobile {
|
||||
display: none;
|
||||
}
|
||||
.card {
|
||||
width: 90%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
113
site/src/views/InputID.vue
Normal file
113
site/src/views/InputID.vue
Normal file
|
|
@ -0,0 +1,113 @@
|
|||
<script setup>
|
||||
// This starter template is using Vue 3 <script setup> SFCs
|
||||
// Check out https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div id="guild-id-input">
|
||||
<div class="card">
|
||||
<h1>Quote Bracket</h1>
|
||||
<div>
|
||||
<p>
|
||||
Enter a server ID in the box below in order to load the
|
||||
quote bracket history. If you need help finding out how to
|
||||
get the server's ID, you can read Discord's help article
|
||||
about getting IDs here:
|
||||
<a href="https://support.discord.com/hc/en-us/articles/206346498-Where-can-I-find-my-User-Server-Message-ID-">
|
||||
Where can I find my User/Server/Message ID?
|
||||
</a>
|
||||
</p>
|
||||
<div class="flex-row">
|
||||
<input
|
||||
type="text"
|
||||
name="Server ID"
|
||||
id="server-id"
|
||||
v-model="guildID"
|
||||
>
|
||||
</div>
|
||||
<div
|
||||
v-if="hasError"
|
||||
>
|
||||
The server ID you entered is invalid, please make sure that
|
||||
you entered it correctly.
|
||||
</div>
|
||||
<div class="flex-row">
|
||||
<button
|
||||
@click.stop="goBack"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
v-if="guildID && !hasError"
|
||||
@click.stop="loadHistory"
|
||||
>
|
||||
Load History
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {return {
|
||||
guildID: ``,
|
||||
}},
|
||||
computed: {
|
||||
hasError() {
|
||||
return this.guildID.match(/[^0-9]/g) != null;
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
goBack() {
|
||||
this.$emit(`change-state`, `login`);
|
||||
},
|
||||
loadHistory() {
|
||||
this.$emit(`set-guild`, this.guildID);
|
||||
this.$emit(`change-state`, `view-history`);
|
||||
},
|
||||
},
|
||||
async mounted() {},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
#guild-id-input {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100vh;
|
||||
justify-content: center;
|
||||
width: 100vw;
|
||||
}
|
||||
|
||||
.card {
|
||||
background: var(--secondary-background);
|
||||
border-radius: 7px;
|
||||
padding: 15px;
|
||||
text-align: center;
|
||||
width: 33%;
|
||||
}
|
||||
|
||||
.flex-row {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
|
||||
button {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
#server-id {
|
||||
text-align: center;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 768px) {
|
||||
.card {
|
||||
width: 90%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
82
site/src/views/Login.vue
Normal file
82
site/src/views/Login.vue
Normal file
|
|
@ -0,0 +1,82 @@
|
|||
<script setup>
|
||||
// This starter template is using Vue 3 <script setup> SFCs
|
||||
// Check out https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div id="login-view">
|
||||
<div class="card">
|
||||
<h1>Quote Bracket</h1>
|
||||
<button
|
||||
@click.stop="handleDiscordLogin"
|
||||
class="discord-login"
|
||||
>
|
||||
Login With Discord
|
||||
</button>
|
||||
<br>
|
||||
<button
|
||||
@click.stop="handleGuildID"
|
||||
class="server-id-login"
|
||||
>
|
||||
Enter a Server ID
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
computed: {},
|
||||
methods: {
|
||||
handleDiscordLogin() {
|
||||
let qs = new URLSearchParams();
|
||||
qs.set(`response_type`, `token`);
|
||||
qs.set(`client_id`, this.discord.client.id);
|
||||
qs.set(`scope`, this.discord.auth.scopes.join(` `));
|
||||
|
||||
// Construct the redirect URI for Discord
|
||||
qs.set(
|
||||
`redirect_uri`,
|
||||
window.location.origin + window.location.pathname
|
||||
);
|
||||
|
||||
// Add state for verifying the response redirect from Discord
|
||||
if (this.discord.auth.useState) {
|
||||
let state = Math.random().toString(36).substring(2, 15)
|
||||
+ Math.random().toString(36).substring(2, 15);
|
||||
sessionStorage.setItem(`qb-auth-state`, state);
|
||||
qs.set(`state`, state);
|
||||
};
|
||||
|
||||
window.location.href = `${this.discord.auth.base}?${qs.toString()}`;
|
||||
},
|
||||
handleGuildID() {
|
||||
this.$emit(`change-state`, `id-entry`)
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
#login-view {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100vh;
|
||||
justify-content: center;
|
||||
width: 100vw;
|
||||
}
|
||||
|
||||
.card {
|
||||
background: var(--secondary-background);
|
||||
border-radius: 7px;
|
||||
padding: 15px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 768px) {
|
||||
.card {
|
||||
width: 90%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
7
site/vite.config.js
Normal file
7
site/vite.config.js
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
import { defineConfig } from 'vite'
|
||||
import vue from '@vitejs/plugin-vue'
|
||||
|
||||
// https://vitejs.dev/config/
|
||||
export default defineConfig({
|
||||
plugins: [vue()]
|
||||
})
|
||||
Loading…
Add table
Add a link
Reference in a new issue