From f59c3f6bda2f0c47511d5836c049f8b09e3c5c00 Mon Sep 17 00:00:00 2001 From: SebClem Date: Tue, 24 May 2022 23:04:35 +0200 Subject: [PATCH] :tada: Prettier ? --- .env.development | 4 +- .eslintrc.cjs | 14 +- .husky/.gitignore | 1 + .husky/pre-commit | 4 + env.d.ts | 1 + package.json | 15 +- src/assets/base.css | 74 ------- src/assets/logo.svg | 1 - src/components/HeaderComponent.vue | 52 ++++- src/main.ts | 2 + src/plugins/webfontloader.ts | 10 +- src/router/index.ts | 2 +- src/shims-vuetify.d.ts | 6 +- src/stores/coockiesStorage.ts | 23 ++ src/stores/user.ts | 19 +- src/views/HomeView.vue | 4 +- src/views/oauth/OauthCallbackView.vue | 7 +- src/views/oauth/OauthRedirectView.vue | 7 +- tsconfig.json | 4 + tsconfig.pinia-plugin-persist.json | 5 + vite.config.ts | 15 +- yarn.lock | 291 +++++++++++++++++++++++++- 22 files changed, 447 insertions(+), 114 deletions(-) create mode 100644 .husky/.gitignore create mode 100755 .husky/pre-commit delete mode 100644 src/assets/base.css delete mode 100644 src/assets/logo.svg create mode 100644 src/stores/coockiesStorage.ts create mode 100644 tsconfig.pinia-plugin-persist.json diff --git a/.env.development b/.env.development index 8f8c98d..cd0b752 100644 --- a/.env.development +++ b/.env.development @@ -1,2 +1,4 @@ VITE_OAUTH_REDIRECT_URL="https://discord.com/api/oauth2/authorize?client_id=238351507634913280&redirect_uri=http%3A%2F%2Flocalhost%3A3000%2Foauth2%2Fcallback&response_type=code&scope=identify" -VITE_API_BASE_URL="http://localhost:8080/api/v2/" \ No newline at end of file +VITE_API_BASE_URL="http://localhost:8080/api/v2/" + +VITE_DISCORD_USER_AVATAR_URL="https://cdn.discordapp.com/avatars/" \ No newline at end of file diff --git a/.eslintrc.cjs b/.eslintrc.cjs index a718c90..6b7235f 100644 --- a/.eslintrc.cjs +++ b/.eslintrc.cjs @@ -2,14 +2,14 @@ require("@rushstack/eslint-patch/modern-module-resolution"); module.exports = { - "root": true, - "extends": [ + root: true, + extends: [ "plugin:vue/vue3-essential", "eslint:recommended", "@vue/eslint-config-typescript/recommended", - "@vue/eslint-config-prettier" + "@vue/eslint-config-prettier", ], - "env": { - "vue/setup-compiler-macros": true - } -} + env: { + "vue/setup-compiler-macros": true, + }, +}; diff --git a/.husky/.gitignore b/.husky/.gitignore new file mode 100644 index 0000000..31354ec --- /dev/null +++ b/.husky/.gitignore @@ -0,0 +1 @@ +_ diff --git a/.husky/pre-commit b/.husky/pre-commit new file mode 100755 index 0000000..36af219 --- /dev/null +++ b/.husky/pre-commit @@ -0,0 +1,4 @@ +#!/bin/sh +. "$(dirname "$0")/_/husky.sh" + +npx lint-staged diff --git a/env.d.ts b/env.d.ts index 58b5c5b..52dcd03 100644 --- a/env.d.ts +++ b/env.d.ts @@ -2,6 +2,7 @@ interface ImportMetaEnv { readonly VITE_OAUTH_REDIRECT_URL: string; readonly VITE_API_BASE_URL: string; + readonly VITE_DISCORD_USER_AVATAR_URL: string; // more env variables... } diff --git a/package.json b/package.json index aa0658c..e117186 100644 --- a/package.json +++ b/package.json @@ -9,14 +9,20 @@ "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore", "dev": "vite", "preview": "vite preview --port 5050", - "typecheck": "vue-tsc --noEmit -p tsconfig.vitest.json --composite false" + "typecheck": "vue-tsc --noEmit -p tsconfig.vitest.json --composite false", + "postinstall": "husky install", + "prepublishOnly": "pinst --disable", + "postpublish": "pinst --enable" }, "dependencies": { "@mdi/font": "5.9.55", + "@types/js-cookie": "^3.0.2", "@vue/cli": "^5.0.4", "axios": "^0.27.2", "jose": "^4.8.1", + "js-cookie": "^3.0.1", "pinia": "^2.0.13", + "pinia-plugin-persistedstate": "^1.6.0", "roboto-fontface": "*", "vue": "^3.2.33", "vue-router": "^4.0.14", @@ -36,7 +42,10 @@ "@vuetify/vite-plugin": "^1.0.0-alpha.0", "eslint": "^8.5.0", "eslint-plugin-vue": "^8.2.0", + "husky": ">=6", "jsdom": "^19.0.0", + "lint-staged": ">=10", + "pinst": ">=2", "prettier": "^2.5.1", "sass": "^1.38.0", "sass-loader": "^10.0.0", @@ -46,5 +55,9 @@ "vue-cli-plugin-vuetify": "~2.4.8", "vue-tsc": "^0.34.7", "vuetify-loader": "^2.0.0-alpha.0" + }, + "lint-staged": { + "*.{vue,js,jsx,cjs,mjs,ts,tsx,cts,mts}": "eslint --cache --fix", + "*.{vue,js,jsx,cjs,mjs,ts,tsx,cts,mts,css,scss,md}": "prettier --write" } } diff --git a/src/assets/base.css b/src/assets/base.css deleted file mode 100644 index 71dc55a..0000000 --- a/src/assets/base.css +++ /dev/null @@ -1,74 +0,0 @@ -/* color palette from */ -:root { - --vt-c-white: #ffffff; - --vt-c-white-soft: #f8f8f8; - --vt-c-white-mute: #f2f2f2; - - --vt-c-black: #181818; - --vt-c-black-soft: #222222; - --vt-c-black-mute: #282828; - - --vt-c-indigo: #2c3e50; - - --vt-c-divider-light-1: rgba(60, 60, 60, 0.29); - --vt-c-divider-light-2: rgba(60, 60, 60, 0.12); - --vt-c-divider-dark-1: rgba(84, 84, 84, 0.65); - --vt-c-divider-dark-2: rgba(84, 84, 84, 0.48); - - --vt-c-text-light-1: var(--vt-c-indigo); - --vt-c-text-light-2: rgba(60, 60, 60, 0.66); - --vt-c-text-dark-1: var(--vt-c-white); - --vt-c-text-dark-2: rgba(235, 235, 235, 0.64); -} - -/* semantic color variables for this project */ -:root { - --color-background: var(--vt-c-white); - --color-background-soft: var(--vt-c-white-soft); - --color-background-mute: var(--vt-c-white-mute); - - --color-border: var(--vt-c-divider-light-2); - --color-border-hover: var(--vt-c-divider-light-1); - - --color-heading: var(--vt-c-text-light-1); - --color-text: var(--vt-c-text-light-1); - - --section-gap: 160px; -} - -@media (prefers-color-scheme: dark) { - :root { - --color-background: var(--vt-c-black); - --color-background-soft: var(--vt-c-black-soft); - --color-background-mute: var(--vt-c-black-mute); - - --color-border: var(--vt-c-divider-dark-2); - --color-border-hover: var(--vt-c-divider-dark-1); - - --color-heading: var(--vt-c-text-dark-1); - --color-text: var(--vt-c-text-dark-2); - } -} - -*, -*::before, -*::after { - box-sizing: border-box; - margin: 0; - position: relative; - font-weight: normal; -} - -body { - min-height: 100vh; - color: var(--color-text); - background: var(--color-background); - transition: color 0.5s, background-color 0.5s; - line-height: 1.6; - font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, - Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; - font-size: 15px; - text-rendering: optimizeLegibility; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; -} diff --git a/src/assets/logo.svg b/src/assets/logo.svg deleted file mode 100644 index 145b6d1..0000000 --- a/src/assets/logo.svg +++ /dev/null @@ -1 +0,0 @@ -Artboard 46 diff --git a/src/components/HeaderComponent.vue b/src/components/HeaderComponent.vue index 328441b..aad38ea 100644 --- a/src/components/HeaderComponent.vue +++ b/src/components/HeaderComponent.vue @@ -3,9 +3,59 @@ Claptrap Bot + + mdi-exit-to-app + + + + + + + + + + + + + + + + - + diff --git a/src/main.ts b/src/main.ts index dc007c6..99aa462 100644 --- a/src/main.ts +++ b/src/main.ts @@ -4,8 +4,10 @@ import router from "./router"; import vuetify from "./plugins/vuetify"; import { loadFonts } from "./plugins/webfontloader"; import { createPinia } from "pinia"; +import piniaPluginPersistedstate from "pinia-plugin-persistedstate"; loadFonts(); const pinia = createPinia(); +pinia.use(piniaPluginPersistedstate); createApp(App).use(router).use(vuetify).use(pinia).mount("#app"); diff --git a/src/plugins/webfontloader.ts b/src/plugins/webfontloader.ts index e6abbe7..e86aa7d 100644 --- a/src/plugins/webfontloader.ts +++ b/src/plugins/webfontloader.ts @@ -4,12 +4,14 @@ * webfontloader documentation: https://github.com/typekit/webfontloader */ -export async function loadFonts () { - const webFontLoader = await import(/* webpackChunkName: "webfontloader" */'webfontloader') +export async function loadFonts() { + const webFontLoader = await import( + /* webpackChunkName: "webfontloader" */ "webfontloader" + ); webFontLoader.load({ google: { - families: ['Roboto:100,300,400,500,700,900&display=swap'], + families: ["Roboto:100,300,400,500,700,900&display=swap"], }, - }) + }); } diff --git a/src/router/index.ts b/src/router/index.ts index da034bf..5616515 100644 --- a/src/router/index.ts +++ b/src/router/index.ts @@ -18,7 +18,7 @@ const router = createRouter({ name: "home", component: HomeView, meta: { - requiresAuth: true, + requiresAuth: false, }, }, { diff --git a/src/shims-vuetify.d.ts b/src/shims-vuetify.d.ts index e4a5d5c..edeacab 100644 --- a/src/shims-vuetify.d.ts +++ b/src/shims-vuetify.d.ts @@ -1,3 +1,3 @@ -declare module 'vuetify' -declare module 'vuetify/lib/components' -declare module 'vuetify/lib/directives' +declare module "vuetify"; +declare module "vuetify/lib/components"; +declare module "vuetify/lib/directives"; diff --git a/src/stores/coockiesStorage.ts b/src/stores/coockiesStorage.ts new file mode 100644 index 0000000..bb9318a --- /dev/null +++ b/src/stores/coockiesStorage.ts @@ -0,0 +1,23 @@ +import Cookies from "js-cookie"; + +export const cookiesStorage: Storage = { + length: 0, + clear() { + return; + }, + key(index) { + return null; + }, + removeItem(key) { + Cookies.remove(key); + }, + setItem(key, state) { + return Cookies.set(key, state, { + expires: 7, + sameSite: "strict", + }); + }, + getItem(key) { + return Cookies.get(key) as string; + }, +}; diff --git a/src/stores/user.ts b/src/stores/user.ts index 42e39bc..3b0b822 100644 --- a/src/stores/user.ts +++ b/src/stores/user.ts @@ -1,11 +1,14 @@ import { defineStore } from "pinia"; import * as jose from "jose"; import axios from "axios"; +import { cookiesStorage } from "./coockiesStorage"; export const useUserStore = defineStore("user", { state: () => ({ userName: "", discordId: "", + discriminator: "", + avatar: "", token: "", loginFail: false, }), @@ -24,6 +27,7 @@ export const useUserStore = defineStore("user", { return true; }, getTokenPayload: (state) => { + const token = state.token; return jose.decodeJwt(state.token); }, }, @@ -39,18 +43,16 @@ export const useUserStore = defineStore("user", { this.token = response.data.token; const payload = this.getTokenPayload; - if (payload.sub) { - this.userName = payload.sub; - } - if (payload.discord_id) { - this.discordId = payload.discord_id as string; - } + + this.userName = payload.sub as string; + this.discordId = payload.discord_id as string; + this.discriminator = payload.discriminator as string; + this.avatar = payload.avatar as string; this.loginFail = false; console.log("Loggin success !"); return true; } catch (reason) { - console.log("Loggin fail !"); console.log(reason); this.token = ""; @@ -61,4 +63,7 @@ export const useUserStore = defineStore("user", { } }, }, + persist: { + storage: cookiesStorage, + }, }); diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue index dcccf0b..8dc5acc 100644 --- a/src/views/HomeView.vue +++ b/src/views/HomeView.vue @@ -9,8 +9,8 @@