diff --git a/README.md b/README.md index 6d0f4be..980a9f1 100644 --- a/README.md +++ b/README.md @@ -1,7 +1,9 @@ -### Zac-Mainframe -A great Web Interface to manage my own developed software +# Zac-Mainframe + +**A great Web Interface to manage my own developed software.** ## Vue.js Init + This template should help get you started developing with Vue 3 in Vite. ## Recommended IDE Setup diff --git a/package-lock.json b/package-lock.json index a028168..e16be2e 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,14 +1,22 @@ { "name": "zac-mainframe", - "version": "0.0.0", + "version": "0.0.1", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "zac-mainframe", - "version": "0.0.0", + "version": "0.0.1", "dependencies": { + "@fortawesome/fontawesome-free": "^6.6.0", + "@fortawesome/fontawesome-svg-core": "^6.6.0", + "@fortawesome/free-brands-svg-icons": "^6.6.0", + "@fortawesome/free-regular-svg-icons": "^6.6.0", + "@fortawesome/free-solid-svg-icons": "^6.6.0", + "@fortawesome/vue-fontawesome": "^3.0.8", + "js-confetti": "^0.12.0", "vue": "^3.4.29", + "vue-cookies": "^1.8.4", "vue-router": "^4.3.3" }, "devDependencies": { @@ -550,6 +558,82 @@ "node": "^12.22.0 || ^14.17.0 || >=16.0.0" } }, + "node_modules/@fortawesome/fontawesome-common-types": { + "version": "6.6.0", + "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.6.0.tgz", + "integrity": "sha512-xyX0X9mc0kyz9plIyryrRbl7ngsA9jz77mCZJsUkLl+ZKs0KWObgaEBoSgQiYWAsSmjz/yjl0F++Got0Mdp4Rw==", + "license": "MIT", + "engines": { + "node": ">=6" + } + }, + "node_modules/@fortawesome/fontawesome-free": { + "version": "6.6.0", + "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-free/-/fontawesome-free-6.6.0.tgz", + "integrity": "sha512-60G28ke/sXdtS9KZCpZSHHkCbdsOGEhIUGlwq6yhY74UpTiToIh8np7A8yphhM4BWsvNFtIvLpi4co+h9Mr9Ow==", + "license": "(CC-BY-4.0 AND OFL-1.1 AND MIT)", + "engines": { + "node": ">=6" + } + }, + "node_modules/@fortawesome/fontawesome-svg-core": { + "version": "6.6.0", + "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-6.6.0.tgz", + "integrity": "sha512-KHwPkCk6oRT4HADE7smhfsKudt9N/9lm6EJ5BVg0tD1yPA5hht837fB87F8pn15D8JfTqQOjhKTktwmLMiD7Kg==", + "license": "MIT", + "dependencies": { + "@fortawesome/fontawesome-common-types": "6.6.0" + }, + "engines": { + "node": ">=6" + } + }, + "node_modules/@fortawesome/free-brands-svg-icons": { + "version": "6.6.0", + "resolved": "https://registry.npmjs.org/@fortawesome/free-brands-svg-icons/-/free-brands-svg-icons-6.6.0.tgz", + "integrity": "sha512-1MPD8lMNW/earme4OQi1IFHtmHUwAKgghXlNwWi9GO7QkTfD+IIaYpIai4m2YJEzqfEji3jFHX1DZI5pbY/biQ==", + "license": "(CC-BY-4.0 AND MIT)", + "dependencies": { + "@fortawesome/fontawesome-common-types": "6.6.0" + }, + "engines": { + "node": ">=6" + } + }, + "node_modules/@fortawesome/free-regular-svg-icons": { + "version": "6.6.0", + "resolved": "https://registry.npmjs.org/@fortawesome/free-regular-svg-icons/-/free-regular-svg-icons-6.6.0.tgz", + "integrity": "sha512-Yv9hDzL4aI73BEwSEh20clrY8q/uLxawaQ98lekBx6t9dQKDHcDzzV1p2YtBGTtolYtNqcWdniOnhzB+JPnQEQ==", + "license": "(CC-BY-4.0 AND MIT)", + "dependencies": { + "@fortawesome/fontawesome-common-types": "6.6.0" + }, + "engines": { + "node": ">=6" + } + }, + "node_modules/@fortawesome/free-solid-svg-icons": { + "version": "6.6.0", + "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-6.6.0.tgz", + "integrity": "sha512-IYv/2skhEDFc2WGUcqvFJkeK39Q+HyPf5GHUrT/l2pKbtgEIv1al1TKd6qStR5OIwQdN1GZP54ci3y4mroJWjA==", + "license": "(CC-BY-4.0 AND MIT)", + "dependencies": { + "@fortawesome/fontawesome-common-types": "6.6.0" + }, + "engines": { + "node": ">=6" + } + }, + "node_modules/@fortawesome/vue-fontawesome": { + "version": "3.0.8", + "resolved": "https://registry.npmjs.org/@fortawesome/vue-fontawesome/-/vue-fontawesome-3.0.8.tgz", + "integrity": "sha512-yyHHAj4G8pQIDfaIsMvQpwKMboIZtcHTUvPqXjOHyldh1O1vZfH4W03VDPv5RvI9P6DLTzJQlmVgj9wCf7c2Fw==", + "license": "MIT", + "peerDependencies": { + "@fortawesome/fontawesome-svg-core": "~1 || ~6", + "vue": ">= 3.0.0 < 4" + } + }, "node_modules/@humanwhocodes/config-array": { "version": "0.11.14", "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.14.tgz", @@ -2324,6 +2408,12 @@ "dev": true, "license": "ISC" }, + "node_modules/js-confetti": { + "version": "0.12.0", + "resolved": "https://registry.npmjs.org/js-confetti/-/js-confetti-0.12.0.tgz", + "integrity": "sha512-1R0Akxn3Zn82pMqW65N1V2NwKkZJ75bvBN/VAb36Ya0YHwbaSiAJZVRr/19HBxH/O8x2x01UFAbYI18VqlDN6g==", + "license": "MIT" + }, "node_modules/js-yaml": { "version": "4.1.0", "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.0.tgz", @@ -3279,6 +3369,12 @@ } } }, + "node_modules/vue-cookies": { + "version": "1.8.4", + "resolved": "https://registry.npmjs.org/vue-cookies/-/vue-cookies-1.8.4.tgz", + "integrity": "sha512-9zjvACKE4W0kEb8OQtXzpizKhf6zfFOG/Z1TEUjSJn4Z4rintuAHo8y/FpCUhTWHMmPe8E+Fko+/tiXVM+5jOw==", + "license": "MIT" + }, "node_modules/vue-eslint-parser": { "version": "9.4.3", "resolved": "https://registry.npmjs.org/vue-eslint-parser/-/vue-eslint-parser-9.4.3.tgz", diff --git a/package.json b/package.json index ab36dff..f9aa7ea 100644 --- a/package.json +++ b/package.json @@ -13,7 +13,15 @@ "format": "prettier --write src/" }, "dependencies": { + "@fortawesome/fontawesome-free": "^6.6.0", + "@fortawesome/fontawesome-svg-core": "^6.6.0", + "@fortawesome/free-brands-svg-icons": "^6.6.0", + "@fortawesome/free-regular-svg-icons": "^6.6.0", + "@fortawesome/free-solid-svg-icons": "^6.6.0", + "@fortawesome/vue-fontawesome": "^3.0.8", + "js-confetti": "^0.12.0", "vue": "^3.4.29", + "vue-cookies": "^1.8.4", "vue-router": "^4.3.3" }, "devDependencies": { diff --git a/src/App.vue b/src/App.vue index 7905b05..8c82a5e 100644 --- a/src/App.vue +++ b/src/App.vue @@ -1,85 +1,85 @@ diff --git a/src/assets/main.css b/src/assets/main.css index 36fb845..f3eb420 100644 --- a/src/assets/main.css +++ b/src/assets/main.css @@ -1,7 +1,8 @@ @import './base.css'; +/* VUE STYLE */ #app { - max-width: 1280px; + /* max-width: 1280px; */ margin: 0 auto; padding: 2rem; font-weight: normal; @@ -33,3 +34,73 @@ a, padding: 0 2rem; } } + +/* SIDEBAR NAVIGATION */ +.sidenav { + position: fixed; + z-index: 1; + top: 60px; /* 60px is the height of the header navbar */ + left: 0; + height: 100%; + width: 200px; /* 200px is the width of the header vl position */ + background-color: #111; + overflow-x: hidden; + padding-top: 20px; +} + +.sidenav a { + padding: 6px 8px 6px 16px; + text-decoration: none; + font-size: 25px; + color: #818181; + display: block; +} + +.sidenav a:hover { + color: #f1f1f1; +} + +.main { + margin-left: 200px; /* 200px is the width of the header vl position */ + /* padding: 0px 10px; */ +} + +@media screen and (max-height: 450px) { + .sidenav { + padding-top: 15px; + } + .sidenav a { + font-size: 18px; + } +} + +/* ROUTE HIGHLIGHT */ +.router-link-exact-active { + border-left: 5px solid rgb(0, 255, 140); +} + +/* FADE TRANSITION */ +.fade-enter-active, +.fade-leave-active { + transition: opacity 0.3s ease; +} + +.fade-enter-from, +.fade-leave-to { + opacity: 0; +} + +/* SLIDE FADE TRANSITION */ +.slide-fade-enter-active { + transition: all 0.3s ease-out; +} + +.slide-fade-leave-active { + transition: all 0.4s cubic-bezier(1, 0.5, 0.8, 1); +} + +.slide-fade-enter-from, +.slide-fade-leave-to { + transform: translateX(20px); + opacity: 0; +} diff --git a/src/components/HelloWorld.vue b/src/components/HelloWorld.vue deleted file mode 100644 index 38d821e..0000000 --- a/src/components/HelloWorld.vue +++ /dev/null @@ -1,41 +0,0 @@ - - - - - diff --git a/src/components/TheWelcome.vue b/src/components/TheWelcome.vue deleted file mode 100644 index 49d8f73..0000000 --- a/src/components/TheWelcome.vue +++ /dev/null @@ -1,88 +0,0 @@ - - - diff --git a/src/components/WelcomeItem.vue b/src/components/WelcomeItem.vue deleted file mode 100644 index 6d7086a..0000000 --- a/src/components/WelcomeItem.vue +++ /dev/null @@ -1,87 +0,0 @@ - - - diff --git a/src/components/icons/IconCommunity.vue b/src/components/icons/IconCommunity.vue deleted file mode 100644 index 2dc8b05..0000000 --- a/src/components/icons/IconCommunity.vue +++ /dev/null @@ -1,7 +0,0 @@ - diff --git a/src/components/icons/IconDocumentation.vue b/src/components/icons/IconDocumentation.vue deleted file mode 100644 index 6d4791c..0000000 --- a/src/components/icons/IconDocumentation.vue +++ /dev/null @@ -1,7 +0,0 @@ - diff --git a/src/components/icons/IconEcosystem.vue b/src/components/icons/IconEcosystem.vue deleted file mode 100644 index c3a4f07..0000000 --- a/src/components/icons/IconEcosystem.vue +++ /dev/null @@ -1,7 +0,0 @@ - diff --git a/src/components/icons/IconSupport.vue b/src/components/icons/IconSupport.vue deleted file mode 100644 index 7452834..0000000 --- a/src/components/icons/IconSupport.vue +++ /dev/null @@ -1,7 +0,0 @@ - diff --git a/src/components/icons/IconTooling.vue b/src/components/icons/IconTooling.vue deleted file mode 100644 index 660598d..0000000 --- a/src/components/icons/IconTooling.vue +++ /dev/null @@ -1,19 +0,0 @@ - - diff --git a/src/main.ts b/src/main.ts index 5a5dbdb..7320b9b 100644 --- a/src/main.ts +++ b/src/main.ts @@ -1,11 +1,18 @@ -import './assets/main.css' - import { createApp } from 'vue' +import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome' +import { library } from '@fortawesome/fontawesome-svg-core' +import { fas } from '@fortawesome/free-solid-svg-icons' +import { fab } from '@fortawesome/free-brands-svg-icons' + import App from './App.vue' import router from './router' +import cookies from 'vue-cookies' +import './assets/main.css' -const app = createApp(App) +library.add(fas, fab) -app.use(router) - -app.mount('#app') +createApp(App) + .use(router) + .use(cookies, { expires: '1d' }) + .component('font-awesome-icon', FontAwesomeIcon) + .mount('#app') diff --git a/src/router/index.ts b/src/router/index.ts index a49ae50..81d522b 100644 --- a/src/router/index.ts +++ b/src/router/index.ts @@ -1,21 +1,49 @@ import { createRouter, createWebHistory } from 'vue-router' -import HomeView from '../views/HomeView.vue' + +import IndexView from '../views/IndexView.vue' +import HomeView from '../views/Index/HomeView.vue' +import AboutView from '../views/Index/AboutView.vue' + +import DiscordView from '../views/DiscordView.vue' +import DashboardView from '../views/Discord/DashboardView.vue' +import ConfigView from '../views/Discord/ConfigView.vue' const router = createRouter({ history: createWebHistory(import.meta.env.BASE_URL), routes: [ { path: '/', - name: 'home', - component: HomeView + name: 'index', + component: IndexView, + children: [ + { + path: '', + name: 'home', + component: HomeView + }, + { + path: '/about', + name: 'about', + component: AboutView + } + ] }, { - path: '/about', - name: 'about', - // route level code-splitting - // this generates a separate chunk (About.[hash].js) for this route - // which is lazy-loaded when the route is visited. - component: () => import('../views/AboutView.vue') + path: '/discord', + name: 'discord', + component: DiscordView, + children: [ + { + path: '', + name: 'dashboard', + component: DashboardView + }, + { + path: '/config', + name: 'config', + component: ConfigView + } + ] } ] }) diff --git a/src/views/AboutView.vue b/src/views/AboutView.vue deleted file mode 100644 index 756ad2a..0000000 --- a/src/views/AboutView.vue +++ /dev/null @@ -1,15 +0,0 @@ - - - diff --git a/src/views/Discord/ConfigView.vue b/src/views/Discord/ConfigView.vue new file mode 100644 index 0000000..1630d71 --- /dev/null +++ b/src/views/Discord/ConfigView.vue @@ -0,0 +1,5 @@ + \ No newline at end of file diff --git a/src/views/Discord/DashboardView.vue b/src/views/Discord/DashboardView.vue new file mode 100644 index 0000000..5d0acfc --- /dev/null +++ b/src/views/Discord/DashboardView.vue @@ -0,0 +1,5 @@ + \ No newline at end of file diff --git a/src/views/DiscordView.vue b/src/views/DiscordView.vue new file mode 100644 index 0000000..11d08ce --- /dev/null +++ b/src/views/DiscordView.vue @@ -0,0 +1,18 @@ + + + \ No newline at end of file diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue deleted file mode 100644 index d5c0217..0000000 --- a/src/views/HomeView.vue +++ /dev/null @@ -1,9 +0,0 @@ - - - diff --git a/src/views/Index/AboutView.vue b/src/views/Index/AboutView.vue new file mode 100644 index 0000000..8eb20a5 --- /dev/null +++ b/src/views/Index/AboutView.vue @@ -0,0 +1,5 @@ + \ No newline at end of file diff --git a/src/views/Index/HomeView.vue b/src/views/Index/HomeView.vue new file mode 100644 index 0000000..4ef88c3 --- /dev/null +++ b/src/views/Index/HomeView.vue @@ -0,0 +1,5 @@ + diff --git a/src/views/IndexView.vue b/src/views/IndexView.vue new file mode 100644 index 0000000..0f1b32f --- /dev/null +++ b/src/views/IndexView.vue @@ -0,0 +1,21 @@ + + + \ No newline at end of file diff --git a/vite.config.ts b/vite.config.ts index 5c45e1d..9349918 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -5,12 +5,13 @@ import vue from '@vitejs/plugin-vue' // https://vitejs.dev/config/ export default defineConfig({ - plugins: [ - vue(), - ], + plugins: [vue()], resolve: { alias: { '@': fileURLToPath(new URL('./src', import.meta.url)) } + }, + server: { + port: 3100 } })