diff --git a/client/index.html b/client/index.html index dfcf4b6..66a72e6 100644 --- a/client/index.html +++ b/client/index.html @@ -4,10 +4,10 @@ - Wanderhome Personality Quiz | V.S. + Wanderhome Quiz | V.S. - -
+ +
diff --git a/client/package-lock.json b/client/package-lock.json index 19dd69a..adb6d31 100644 --- a/client/package-lock.json +++ b/client/package-lock.json @@ -14,6 +14,7 @@ "vue-router": "^4.1.4" }, "devDependencies": { + "@tailwindcss/typography": "^0.5.4", "@vitejs/plugin-vue": "^3.0.3", "autoprefixer": "^10.4.8", "postcss": "^8.4.16", @@ -93,6 +94,20 @@ "node": ">= 8" } }, + "node_modules/@tailwindcss/typography": { + "version": "0.5.4", + "resolved": "https://registry.npmjs.org/@tailwindcss/typography/-/typography-0.5.4.tgz", + "integrity": "sha512-QEdg40EmGvE7kKoDei8zr5sf4D1pIayHj4R31bH3lX8x2BtTiR+jNejYPOkhbmy3DXgkMF9jC8xqNiGFAuL9Sg==", + "dev": true, + "dependencies": { + "lodash.castarray": "^4.4.0", + "lodash.isplainobject": "^4.0.6", + "lodash.merge": "^4.6.2" + }, + "peerDependencies": { + "tailwindcss": ">=3.0.0 || insiders" + } + }, "node_modules/@vitejs/plugin-vue": { "version": "3.0.3", "resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-3.0.3.tgz", @@ -1013,6 +1028,24 @@ "node": ">=10" } }, + "node_modules/lodash.castarray": { + "version": "4.4.0", + "resolved": "https://registry.npmjs.org/lodash.castarray/-/lodash.castarray-4.4.0.tgz", + "integrity": "sha512-aVx8ztPv7/2ULbArGJ2Y42bG1mEQ5mGjpdvrbJcJFU3TbYybe+QlLS4pst9zV52ymy2in1KpFPiZnAOATxD4+Q==", + "dev": true + }, + "node_modules/lodash.isplainobject": { + "version": "4.0.6", + "resolved": "https://registry.npmjs.org/lodash.isplainobject/-/lodash.isplainobject-4.0.6.tgz", + "integrity": "sha512-oSXzaWypCMHkPC3NvBEaPHf0KsA5mvPrOPgQWDsbg8n7orZ290M0BmC/jgRZ4vcJ6DTAhjrsSYgdsW/F+MFOBA==", + "dev": true + }, + "node_modules/lodash.merge": { + "version": "4.6.2", + "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz", + "integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==", + "dev": true + }, "node_modules/magic-string": { "version": "0.25.9", "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.25.9.tgz", @@ -1621,6 +1654,17 @@ "fastq": "^1.6.0" } }, + "@tailwindcss/typography": { + "version": "0.5.4", + "resolved": "https://registry.npmjs.org/@tailwindcss/typography/-/typography-0.5.4.tgz", + "integrity": "sha512-QEdg40EmGvE7kKoDei8zr5sf4D1pIayHj4R31bH3lX8x2BtTiR+jNejYPOkhbmy3DXgkMF9jC8xqNiGFAuL9Sg==", + "dev": true, + "requires": { + "lodash.castarray": "^4.4.0", + "lodash.isplainobject": "^4.0.6", + "lodash.merge": "^4.6.2" + } + }, "@vitejs/plugin-vue": { "version": "3.0.3", "resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-3.0.3.tgz", @@ -2207,6 +2251,24 @@ "integrity": "sha512-9JROoBW7pobfsx+Sq2JsASvCo6Pfo6WWoUW79HuB1BCoBXD4PLWJPqDF6fNj67pqBYTbAHkE57M1kS/+L1neOg==", "dev": true }, + "lodash.castarray": { + "version": "4.4.0", + "resolved": "https://registry.npmjs.org/lodash.castarray/-/lodash.castarray-4.4.0.tgz", + "integrity": "sha512-aVx8ztPv7/2ULbArGJ2Y42bG1mEQ5mGjpdvrbJcJFU3TbYybe+QlLS4pst9zV52ymy2in1KpFPiZnAOATxD4+Q==", + "dev": true + }, + "lodash.isplainobject": { + "version": "4.0.6", + "resolved": "https://registry.npmjs.org/lodash.isplainobject/-/lodash.isplainobject-4.0.6.tgz", + "integrity": "sha512-oSXzaWypCMHkPC3NvBEaPHf0KsA5mvPrOPgQWDsbg8n7orZ290M0BmC/jgRZ4vcJ6DTAhjrsSYgdsW/F+MFOBA==", + "dev": true + }, + "lodash.merge": { + "version": "4.6.2", + "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz", + "integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==", + "dev": true + }, "magic-string": { "version": "0.25.9", "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.25.9.tgz", diff --git a/client/package.json b/client/package.json index 53c4501..b0d9206 100644 --- a/client/package.json +++ b/client/package.json @@ -15,6 +15,7 @@ "vue-router": "^4.1.4" }, "devDependencies": { + "@tailwindcss/typography": "^0.5.4", "@vitejs/plugin-vue": "^3.0.3", "autoprefixer": "^10.4.8", "postcss": "^8.4.16", diff --git a/client/src/App.vue b/client/src/App.vue index d33fdf8..72154ba 100644 --- a/client/src/App.vue +++ b/client/src/App.vue @@ -1,16 +1,22 @@ diff --git a/client/src/components/Content.vue b/client/src/components/Content.vue new file mode 100644 index 0000000..5658987 --- /dev/null +++ b/client/src/components/Content.vue @@ -0,0 +1,19 @@ + + + \ No newline at end of file diff --git a/client/src/components/Navbar.vue b/client/src/components/Navbar.vue deleted file mode 100644 index f3d7cb6..0000000 --- a/client/src/components/Navbar.vue +++ /dev/null @@ -1,17 +0,0 @@ - \ No newline at end of file diff --git a/client/src/components/icons/AccountQuestion.vue b/client/src/components/icons/AccountQuestion.vue new file mode 100644 index 0000000..b6a8750 --- /dev/null +++ b/client/src/components/icons/AccountQuestion.vue @@ -0,0 +1,23 @@ + + + + \ No newline at end of file diff --git a/client/src/components/icons/Home.vue b/client/src/components/icons/Home.vue new file mode 100644 index 0000000..507f3ba --- /dev/null +++ b/client/src/components/icons/Home.vue @@ -0,0 +1,23 @@ + + + + \ No newline at end of file diff --git a/client/src/components/icons/Information.vue b/client/src/components/icons/Information.vue new file mode 100644 index 0000000..b70b490 --- /dev/null +++ b/client/src/components/icons/Information.vue @@ -0,0 +1,23 @@ + + + + \ No newline at end of file diff --git a/client/src/components/icons/Menu.vue b/client/src/components/icons/Menu.vue index d739a80..293054f 100644 --- a/client/src/components/icons/Menu.vue +++ b/client/src/components/icons/Menu.vue @@ -8,7 +8,7 @@ import SvgIcon from '@jamescoyle/vue-icon' import { mdiMenu } from '@mdi/js' export default { - name: "menu", + name: "MdiMenu", components: { SvgIcon @@ -16,7 +16,7 @@ export default { data() { return { - path: mdiMenu, + path: mdiMenu } } } diff --git a/client/src/components/navbar/Index.vue b/client/src/components/navbar/Index.vue new file mode 100644 index 0000000..87fac2c --- /dev/null +++ b/client/src/components/navbar/Index.vue @@ -0,0 +1,38 @@ + + + \ No newline at end of file diff --git a/client/src/components/navbar/MobileLink.vue b/client/src/components/navbar/MobileLink.vue new file mode 100644 index 0000000..9a49da4 --- /dev/null +++ b/client/src/components/navbar/MobileLink.vue @@ -0,0 +1,56 @@ + + + \ No newline at end of file diff --git a/client/src/components/navbar/Navlink.vue b/client/src/components/navbar/Navlink.vue new file mode 100644 index 0000000..d4a7391 --- /dev/null +++ b/client/src/components/navbar/Navlink.vue @@ -0,0 +1,59 @@ + + + + + \ No newline at end of file diff --git a/client/src/components/sidebar/Index.vue b/client/src/components/sidebar/Index.vue new file mode 100644 index 0000000..17a061c --- /dev/null +++ b/client/src/components/sidebar/Index.vue @@ -0,0 +1,26 @@ + + + \ No newline at end of file diff --git a/client/src/components/sidebar/Navlink.vue b/client/src/components/sidebar/Navlink.vue new file mode 100644 index 0000000..0a33ec3 --- /dev/null +++ b/client/src/components/sidebar/Navlink.vue @@ -0,0 +1,52 @@ + + + \ No newline at end of file diff --git a/client/src/fonts/UncialAntiqua-Regular.ttf b/client/src/fonts/UncialAntiqua-Regular.ttf new file mode 100644 index 0000000..9bf2a7e Binary files /dev/null and b/client/src/fonts/UncialAntiqua-Regular.ttf differ diff --git a/client/src/main.js b/client/src/main.js index e1e7cb4..4be2a79 100644 --- a/client/src/main.js +++ b/client/src/main.js @@ -1,5 +1,7 @@ import { createApp } from 'vue' import '@/style.css' import App from '@/App.vue' -import router from '@/router' -createApp(App).use(router).mount('#app') +import Router from '@/router' +const app = createApp(App) +app.use(Router) +app.mount('#app') diff --git a/client/src/router/index.js b/client/src/router/index.js index 13091b2..562f842 100644 --- a/client/src/router/index.js +++ b/client/src/router/index.js @@ -1,30 +1,127 @@ import { createRouter, createWebHistory } from 'vue-router' - +import { mdiAccountGroupOutline, mdiAccountQuestion, mdiCodeTags, mdiHandCoin, mdiHome, mdiInformation } from '@mdi/js' +import About from '@/views/about/Index.vue' +import AboutPage from '@/views/about/About.vue' +import Acknowledgements from '@/views/about/Acknowledgements.vue' +import Wanderhome from '@/views/about/Wanderhome.vue' import Home from '@/views/Home.vue' -import About from '@/views/About.vue' import Quiz from '@/views/Quiz.vue' const routes = [ { path: '/', name: 'Home', - component: Home - }, - { - path: '/about', - name: 'About', - component: About + component: Home, + meta: { + index: 0, + svgPath: mdiHome, + title: 'Home' + } }, { path: '/quiz', name: 'Quiz', - component: Quiz + component: Quiz, + meta: { + index: 1, + svgPath: mdiAccountQuestion, + title: 'Take the Quiz' + } + }, + { + path: '/about', + name: 'About', + component: About, + meta: { + index: 2, + svgPath: mdiInformation, + title: 'About' + }, + children: [ + { + path: '', + name: 'About', + component: AboutPage, + meta: { + index: 0, + parentIndex: 2, + svgPath: mdiInformation, + title: 'Background' + } + }, + { + path: 'wanderhome', + name: 'Wanderhome', + component: Wanderhome, + meta: { + index: 1, + parentIndex: 2, + svgPath: mdiHandCoin, + title: 'About Wanderhome' + } + }, + { + path: 'acknowledgements', + name: 'Acknowledgements', + component: Acknowledgements, + meta: { + index: 2, + parentIndex: 2, + svgPath: mdiAccountGroupOutline, + title: 'Acknowledgements' + } + }, + { + path: 'https://git.vsnt.uk/', + name: 'SourceCode', + meta: { + index: 3, + parentIndex: 2, + svgPath: mdiCodeTags, + title: 'View Source Code' + } + } + ] } ] -const router = createRouter({ +const Router = createRouter({ history: createWebHistory(), routes }) -export default router \ No newline at end of file +Router.beforeEach((to, from, next) => { + if (to.meta.title != 'Home') { + document.title = `Wanderhome Quiz | V.S. - ${to.meta.title}` + } else { + document.title = `Wanderhome Quiz | V.S.` + } + next() +}) + +Router.afterEach( (to, from) => { + const enterActiveClass = 'transition-all duration-300 ease-in' + const leaveActiveClass = 'transition-all duration-300 ease-out' + const baseFromClass = 'transform opacity-0 scale-75' + if ( to.fullPath.split('/')[1] !== from.fullPath.split('/')[1] || !from.matched.length ) { + const fromIndex = from.meta.parentIndex ? from.meta.parentIndex : from.meta.index + const toIndex = to.meta.parentIndex ? to.meta.parentIndex : to.meta.index + const slideInDirection = toIndex < fromIndex ? '-translate-x-1/3' : 'translate-x-1/3' + const slideOutDirection = toIndex < fromIndex ? 'translate-x-1/3' : '-translate-x-1/3' + to.meta.mainEnterActiveClass = enterActiveClass + to.meta.mainLeaveActiveClass = leaveActiveClass + to.meta.mainEnterFromClass = baseFromClass + ' ' + slideInDirection + to.meta.mainLeaveToClass = baseFromClass + ' ' + slideOutDirection + } else if ( to.fullPath.split('/')[1] == from.fullPath.split('/')[1] && from.matched.length ) { + const fromIndex = from.meta.index + const toIndex = to.meta.index + const slideInDirection = toIndex < fromIndex ? '-translate-y-1/3' : 'translate-y-1/3' + const slideOutDirection = toIndex < fromIndex ? 'translate-y-1/3' : '-translate-y-1/3' + to.meta.panelEnterActiveClass = enterActiveClass + to.meta.panelLeaveActiveClass = leaveActiveClass + to.meta.panelEnterFromClass = baseFromClass + ' ' + slideInDirection + to.meta.panelLeaveToClass = baseFromClass + ' ' + slideOutDirection + } +}) + +export default Router \ No newline at end of file diff --git a/client/src/style.css b/client/src/style.css index bd6213e..c53c78e 100644 --- a/client/src/style.css +++ b/client/src/style.css @@ -1,3 +1,28 @@ @tailwind base; @tailwind components; -@tailwind utilities; \ No newline at end of file +@tailwind utilities; + +@font-face { + font-family: UncialAntiqua; + src: local("Uncial Antiqua"),url("./fonts/UncialAntiqua-Regular.ttf"); +} + +.uncial-antiqua { + font-family: 'UncialAntiqua'; +} + +.text-leader { + @apply text-lg; + @apply font-light; + @apply leading-relaxed; + @apply mt-6; + @apply mb-4; + @apply text-orange-900; +} + +p { + @apply text-base; + @apply leading-relaxed; + @apply mt-4; + @apply mb-4; +} \ No newline at end of file diff --git a/client/src/views/About.vue b/client/src/views/About.vue deleted file mode 100644 index 627e2e2..0000000 --- a/client/src/views/About.vue +++ /dev/null @@ -1,7 +0,0 @@ - \ No newline at end of file diff --git a/client/src/views/Home.vue b/client/src/views/Home.vue index ad15c5b..8fa377c 100644 --- a/client/src/views/Home.vue +++ b/client/src/views/Home.vue @@ -1,7 +1,47 @@ + \ No newline at end of file diff --git a/client/src/views/Quiz.vue b/client/src/views/Quiz.vue index 8938220..9877981 100644 --- a/client/src/views/Quiz.vue +++ b/client/src/views/Quiz.vue @@ -1,7 +1,20 @@ + \ No newline at end of file diff --git a/client/src/views/about/About.vue b/client/src/views/about/About.vue new file mode 100644 index 0000000..b88ec75 --- /dev/null +++ b/client/src/views/about/About.vue @@ -0,0 +1,46 @@ + + + \ No newline at end of file diff --git a/client/src/views/about/Acknowledgements.vue b/client/src/views/about/Acknowledgements.vue new file mode 100644 index 0000000..58cd719 --- /dev/null +++ b/client/src/views/about/Acknowledgements.vue @@ -0,0 +1,30 @@ + + \ No newline at end of file diff --git a/client/src/views/about/Index.vue b/client/src/views/about/Index.vue new file mode 100644 index 0000000..fd4038d --- /dev/null +++ b/client/src/views/about/Index.vue @@ -0,0 +1,35 @@ + + \ No newline at end of file diff --git a/client/src/views/about/Wanderhome.vue b/client/src/views/about/Wanderhome.vue new file mode 100644 index 0000000..75e4384 --- /dev/null +++ b/client/src/views/about/Wanderhome.vue @@ -0,0 +1,24 @@ + + \ No newline at end of file diff --git a/client/tailwind.config.cjs b/client/tailwind.config.cjs index 6cd0427..3fd8ac3 100644 --- a/client/tailwind.config.cjs +++ b/client/tailwind.config.cjs @@ -13,5 +13,7 @@ module.exports = { }, extend: {}, }, - plugins: [], + plugins: [ + require('@tailwindcss/typography'), + ], }