diff --git a/apps/ui/README.md b/apps/ui/README.md index b2195f56..c5268eaa 100644 --- a/apps/ui/README.md +++ b/apps/ui/README.md @@ -1,31 +1,64 @@ -# ui2 +# AFB UI +## Commands https://vitejs.dev/guide/cli.html - **template of:** vite + vue + typescript - **tailwindcss:** v3.x -## Started +### Started + ```bash yarn # or `npm install` ``` ---- -## Develop +### Develop + ```bash yarn dev # or `npm run dev` ``` ---- -## Build +### Build + ```bash yarn build # or `npm run build` ``` --- -

- -

+ + +## About Vue apps + +In a Vite + Vue application, main.ts and index.ts have different roles: + +main.ts: This is the entry point of your Vue application. It's where you create the Vue instance and mount it to a DOM element. It's also where you import your root component, any global styles, plugins, and other global configurations. + +index.ts: This file is typically used for organizing exports from a directory. In the context of Vue Router, index.ts is often used to define and export the router instance, as shown in your code snippet. + +Here's a simplified example of how these files might be used: + +```ts +// router/index.ts +import { createRouter, createWebHistory } from 'vue-router' +import Home from '../views/Home.vue' + +const routes = [ + { + path: '/', + name: 'Home', + component: Home + } +] + +const router = createRouter({ + history: createWebHistory(process.env.BASE_URL), + routes +}) + +export default router +``` + +In the main.ts file, we import the router from router/index.ts and use it in our Vue application. diff --git a/apps/ui/index.html b/apps/ui/index.html index 11603f87..a7d96c41 100644 --- a/apps/ui/index.html +++ b/apps/ui/index.html @@ -1,10 +1,10 @@ - + - Vite App + AFB - Animal Food Bank
diff --git a/apps/ui/package.json b/apps/ui/package.json index 30a28de4..17d1c020 100644 --- a/apps/ui/package.json +++ b/apps/ui/package.json @@ -1,10 +1,10 @@ { - "name": "ui", + "name": "afb-ui", "version": "0.1.0", "scripts": { + "build": "vue-tsc --noEmit && vite build", "dev": "vite", "TODO": "postcss e.g. postcss styles.css -o src/styles.css", - "build": "vue-tsc --noEmit && vite build", "preview": "vite preview" }, "dependencies": { @@ -12,10 +12,15 @@ "@heroicons/vue": "^2.0.18", "@tailwindcss/aspect-ratio": "^0.4.2", "@tailwindcss/forms": "^0.5.6", - "vue": "^3.2.25" + "@types/vue-router": "^2.0.0", + "vue": "^3.3.7", + "vue-router": "^4.2.5", + "vue-service": "^1.0.3" }, "devDependencies": { "@vitejs/plugin-vue": "^2.0.0", + "@vue/cli-plugin-router": "~5.0.0", + "@vue/cli-service": "^5.0.8", "autoprefixer": "^10.4.16", "postcss": "^8.4.31", "postcss-import": "^15.1.0", diff --git a/apps/ui/powered-by-vitawind-bright.png b/apps/ui/powered-by-vitawind-bright.png deleted file mode 100644 index 5da40b0d..00000000 Binary files a/apps/ui/powered-by-vitawind-bright.png and /dev/null differ diff --git a/apps/ui/src/App.vue b/apps/ui/src/App.vue index 2a96fd2a..fc8a4fc7 100644 --- a/apps/ui/src/App.vue +++ b/apps/ui/src/App.vue @@ -14,25 +14,35 @@ --> - + + + + diff --git a/apps/ui/src/assets/img/afb_icon_black.png b/apps/ui/src/assets/img/afb_icon_black.png new file mode 100755 index 00000000..58570441 Binary files /dev/null and b/apps/ui/src/assets/img/afb_icon_black.png differ diff --git a/apps/ui/src/assets/img/afb_icon_colour.png b/apps/ui/src/assets/img/afb_icon_colour.png new file mode 100755 index 00000000..e765e2ae Binary files /dev/null and b/apps/ui/src/assets/img/afb_icon_colour.png differ diff --git a/apps/ui/src/assets/img/afb_icon_white.png b/apps/ui/src/assets/img/afb_icon_white.png new file mode 100755 index 00000000..b73ea8aa Binary files /dev/null and b/apps/ui/src/assets/img/afb_icon_white.png differ diff --git a/apps/ui/src/assets/img/afb_logo_horizontal_black.png b/apps/ui/src/assets/img/afb_logo_horizontal_black.png new file mode 100755 index 00000000..4438123e Binary files /dev/null and b/apps/ui/src/assets/img/afb_logo_horizontal_black.png differ diff --git a/apps/ui/src/assets/img/afb_logo_horizontal_colour.png b/apps/ui/src/assets/img/afb_logo_horizontal_colour.png new file mode 100755 index 00000000..75762bd2 Binary files /dev/null and b/apps/ui/src/assets/img/afb_logo_horizontal_colour.png differ diff --git a/apps/ui/src/assets/img/afb_logo_horizontal_white.png b/apps/ui/src/assets/img/afb_logo_horizontal_white.png new file mode 100755 index 00000000..4369718e Binary files /dev/null and b/apps/ui/src/assets/img/afb_logo_horizontal_white.png differ diff --git a/apps/ui/src/assets/img/afb_logo_vertical_black.png b/apps/ui/src/assets/img/afb_logo_vertical_black.png new file mode 100755 index 00000000..798eeb41 Binary files /dev/null and b/apps/ui/src/assets/img/afb_logo_vertical_black.png differ diff --git a/apps/ui/src/assets/img/afb_logo_vertical_colour.png b/apps/ui/src/assets/img/afb_logo_vertical_colour.png new file mode 100755 index 00000000..28c2aae8 Binary files /dev/null and b/apps/ui/src/assets/img/afb_logo_vertical_colour.png differ diff --git a/apps/ui/src/assets/img/afb_logo_vertical_white.png b/apps/ui/src/assets/img/afb_logo_vertical_white.png new file mode 100755 index 00000000..70244ea0 Binary files /dev/null and b/apps/ui/src/assets/img/afb_logo_vertical_white.png differ diff --git a/apps/ui/src/assets/img/favicons/android-icon-144x144.png b/apps/ui/src/assets/img/favicons/android-icon-144x144.png new file mode 100644 index 00000000..7a2f70a4 Binary files /dev/null and b/apps/ui/src/assets/img/favicons/android-icon-144x144.png differ diff --git a/apps/ui/src/assets/img/favicons/android-icon-192x192.png b/apps/ui/src/assets/img/favicons/android-icon-192x192.png new file mode 100644 index 00000000..d0ef1744 Binary files /dev/null and b/apps/ui/src/assets/img/favicons/android-icon-192x192.png differ diff --git a/apps/ui/src/assets/img/favicons/android-icon-36x36.png b/apps/ui/src/assets/img/favicons/android-icon-36x36.png new file mode 100644 index 00000000..c4dcc530 Binary files /dev/null and b/apps/ui/src/assets/img/favicons/android-icon-36x36.png differ diff --git a/apps/ui/src/assets/img/favicons/android-icon-48x48.png b/apps/ui/src/assets/img/favicons/android-icon-48x48.png new file mode 100644 index 00000000..b4d140c6 Binary files /dev/null and b/apps/ui/src/assets/img/favicons/android-icon-48x48.png differ diff --git a/apps/ui/src/assets/img/favicons/android-icon-72x72.png b/apps/ui/src/assets/img/favicons/android-icon-72x72.png new file mode 100644 index 00000000..557f19d4 Binary files /dev/null and b/apps/ui/src/assets/img/favicons/android-icon-72x72.png differ diff --git a/apps/ui/src/assets/img/favicons/android-icon-96x96.png b/apps/ui/src/assets/img/favicons/android-icon-96x96.png new file mode 100644 index 00000000..4fb75405 Binary files /dev/null and b/apps/ui/src/assets/img/favicons/android-icon-96x96.png differ diff --git a/apps/ui/src/assets/img/favicons/apple-icon-114x114.png b/apps/ui/src/assets/img/favicons/apple-icon-114x114.png new file mode 100644 index 00000000..5fd30056 Binary files /dev/null and b/apps/ui/src/assets/img/favicons/apple-icon-114x114.png differ diff --git a/apps/ui/src/assets/img/favicons/apple-icon-120x120.png b/apps/ui/src/assets/img/favicons/apple-icon-120x120.png new file mode 100644 index 00000000..73341f3b Binary files /dev/null and b/apps/ui/src/assets/img/favicons/apple-icon-120x120.png differ diff --git a/apps/ui/src/assets/img/favicons/apple-icon-144x144.png b/apps/ui/src/assets/img/favicons/apple-icon-144x144.png new file mode 100644 index 00000000..7a2f70a4 Binary files /dev/null and b/apps/ui/src/assets/img/favicons/apple-icon-144x144.png differ diff --git a/apps/ui/src/assets/img/favicons/apple-icon-152x152.png b/apps/ui/src/assets/img/favicons/apple-icon-152x152.png new file mode 100644 index 00000000..a47d08a3 Binary files /dev/null and b/apps/ui/src/assets/img/favicons/apple-icon-152x152.png differ diff --git a/apps/ui/src/assets/img/favicons/apple-icon-180x180.png b/apps/ui/src/assets/img/favicons/apple-icon-180x180.png new file mode 100644 index 00000000..c30a725b Binary files /dev/null and b/apps/ui/src/assets/img/favicons/apple-icon-180x180.png differ diff --git a/apps/ui/src/assets/img/favicons/apple-icon-57x57.png b/apps/ui/src/assets/img/favicons/apple-icon-57x57.png new file mode 100644 index 00000000..9949de1c Binary files /dev/null and b/apps/ui/src/assets/img/favicons/apple-icon-57x57.png differ diff --git a/apps/ui/src/assets/img/favicons/apple-icon-60x60.png b/apps/ui/src/assets/img/favicons/apple-icon-60x60.png new file mode 100644 index 00000000..883282d4 Binary files /dev/null and b/apps/ui/src/assets/img/favicons/apple-icon-60x60.png differ diff --git a/apps/ui/src/assets/img/favicons/apple-icon-72x72.png b/apps/ui/src/assets/img/favicons/apple-icon-72x72.png new file mode 100644 index 00000000..557f19d4 Binary files /dev/null and b/apps/ui/src/assets/img/favicons/apple-icon-72x72.png differ diff --git a/apps/ui/src/assets/img/favicons/apple-icon-76x76.png b/apps/ui/src/assets/img/favicons/apple-icon-76x76.png new file mode 100644 index 00000000..bcad7b73 Binary files /dev/null and b/apps/ui/src/assets/img/favicons/apple-icon-76x76.png differ diff --git a/apps/ui/src/assets/img/favicons/apple-icon-precomposed.png b/apps/ui/src/assets/img/favicons/apple-icon-precomposed.png new file mode 100644 index 00000000..f9193c96 Binary files /dev/null and b/apps/ui/src/assets/img/favicons/apple-icon-precomposed.png differ diff --git a/apps/ui/src/assets/img/favicons/apple-icon.png b/apps/ui/src/assets/img/favicons/apple-icon.png new file mode 100644 index 00000000..f9193c96 Binary files /dev/null and b/apps/ui/src/assets/img/favicons/apple-icon.png differ diff --git a/apps/ui/src/assets/img/favicons/browserconfig.xml b/apps/ui/src/assets/img/favicons/browserconfig.xml new file mode 100644 index 00000000..7d453d3b --- /dev/null +++ b/apps/ui/src/assets/img/favicons/browserconfig.xml @@ -0,0 +1,2 @@ + +#ffffff diff --git a/apps/ui/src/assets/img/favicons/favicon-16x16.png b/apps/ui/src/assets/img/favicons/favicon-16x16.png new file mode 100644 index 00000000..4360d5f9 Binary files /dev/null and b/apps/ui/src/assets/img/favicons/favicon-16x16.png differ diff --git a/apps/ui/src/assets/img/favicons/favicon-32x32.png b/apps/ui/src/assets/img/favicons/favicon-32x32.png new file mode 100644 index 00000000..acb280a7 Binary files /dev/null and b/apps/ui/src/assets/img/favicons/favicon-32x32.png differ diff --git a/apps/ui/src/assets/img/favicons/favicon-96x96.png b/apps/ui/src/assets/img/favicons/favicon-96x96.png new file mode 100644 index 00000000..4fb75405 Binary files /dev/null and b/apps/ui/src/assets/img/favicons/favicon-96x96.png differ diff --git a/apps/ui/src/assets/img/favicons/favicon.ico b/apps/ui/src/assets/img/favicons/favicon.ico new file mode 100644 index 00000000..2dace648 Binary files /dev/null and b/apps/ui/src/assets/img/favicons/favicon.ico differ diff --git a/apps/ui/src/assets/img/favicons/manifest.json b/apps/ui/src/assets/img/favicons/manifest.json new file mode 100644 index 00000000..758f8d2a --- /dev/null +++ b/apps/ui/src/assets/img/favicons/manifest.json @@ -0,0 +1,41 @@ +{ + "name": "App", + "icons": [ + { + "src": "\/android-icon-36x36.png", + "sizes": "36x36", + "type": "image\/png", + "density": "0.75" + }, + { + "src": "\/android-icon-48x48.png", + "sizes": "48x48", + "type": "image\/png", + "density": "1.0" + }, + { + "src": "\/android-icon-72x72.png", + "sizes": "72x72", + "type": "image\/png", + "density": "1.5" + }, + { + "src": "\/android-icon-96x96.png", + "sizes": "96x96", + "type": "image\/png", + "density": "2.0" + }, + { + "src": "\/android-icon-144x144.png", + "sizes": "144x144", + "type": "image\/png", + "density": "3.0" + }, + { + "src": "\/android-icon-192x192.png", + "sizes": "192x192", + "type": "image\/png", + "density": "4.0" + } + ] +} diff --git a/apps/ui/src/assets/img/favicons/ms-icon-144x144.png b/apps/ui/src/assets/img/favicons/ms-icon-144x144.png new file mode 100644 index 00000000..7a2f70a4 Binary files /dev/null and b/apps/ui/src/assets/img/favicons/ms-icon-144x144.png differ diff --git a/apps/ui/src/assets/img/favicons/ms-icon-150x150.png b/apps/ui/src/assets/img/favicons/ms-icon-150x150.png new file mode 100644 index 00000000..7c3ed729 Binary files /dev/null and b/apps/ui/src/assets/img/favicons/ms-icon-150x150.png differ diff --git a/apps/ui/src/assets/img/favicons/ms-icon-310x310.png b/apps/ui/src/assets/img/favicons/ms-icon-310x310.png new file mode 100644 index 00000000..55e1907a Binary files /dev/null and b/apps/ui/src/assets/img/favicons/ms-icon-310x310.png differ diff --git a/apps/ui/src/assets/img/favicons/ms-icon-70x70.png b/apps/ui/src/assets/img/favicons/ms-icon-70x70.png new file mode 100644 index 00000000..d9c85a51 Binary files /dev/null and b/apps/ui/src/assets/img/favicons/ms-icon-70x70.png differ diff --git a/apps/ui/src/assets/logo.png b/apps/ui/src/assets/logo.png deleted file mode 100644 index f3d2503f..00000000 Binary files a/apps/ui/src/assets/logo.png and /dev/null differ diff --git a/apps/ui/src/assets/powered-by-vitawind-bright.png b/apps/ui/src/assets/powered-by-vitawind-bright.png deleted file mode 100644 index 5da40b0d..00000000 Binary files a/apps/ui/src/assets/powered-by-vitawind-bright.png and /dev/null differ diff --git a/apps/ui/src/components/HelloWorld.vue b/apps/ui/src/components/HelloWorld.vue deleted file mode 100644 index 5b71b39d..00000000 --- a/apps/ui/src/components/HelloWorld.vue +++ /dev/null @@ -1,64 +0,0 @@ - - - - - diff --git a/apps/ui/src/main.ts b/apps/ui/src/main.ts index 97a04294..1982d84b 100644 --- a/apps/ui/src/main.ts +++ b/apps/ui/src/main.ts @@ -4,5 +4,6 @@ import 'vite/modulepreload-polyfill' import { createApp } from 'vue' import App from './App.vue' import './index.css' +import router from './router' -createApp(App).mount('#app') +createApp(App).use(router).mount('#app') diff --git a/apps/ui/src/router/index.ts b/apps/ui/src/router/index.ts new file mode 100644 index 00000000..544c9c45 --- /dev/null +++ b/apps/ui/src/router/index.ts @@ -0,0 +1,49 @@ +import { + createRouter, + createWebHistory +} from 'vue-router' +import MakeRequestView from '../views/MakeRequestView.vue' +import AboutView from '../views/AboutView.vue' +import DashboardView from '../views/DashboardView.vue' +import NotFoundView from '../views/NotFoundView.vue' + +// TODO: Revisit lazy-loading suggestion from ? (component as a function that returns AboutVue) +// import AboutView from '../views/AboutView.vue'; + + +type Route = { + path: string; + name: string; + component: any; +} + + +const routes: Route[] = [ + { + path: '/dashboard', + component: DashboardView, + name: 'DashboardView', + }, + { + path: '/requests', + component: MakeRequestView, + name: 'MakeRequestView', + }, + { + path: '/about', + component: AboutView, + name: 'AboutView', + }, + { + path: '/:pathMatch(.*)*', + component: NotFoundView, + name: 'NotFoundView' + }, +] + +const router = createRouter({ + history: createWebHistory(), + routes +}) + +export default router diff --git a/apps/ui/src/views/AboutView.vue b/apps/ui/src/views/AboutView.vue new file mode 100644 index 00000000..3fa28070 --- /dev/null +++ b/apps/ui/src/views/AboutView.vue @@ -0,0 +1,5 @@ + diff --git a/apps/ui/src/views/DashboardView.vue b/apps/ui/src/views/DashboardView.vue new file mode 100644 index 00000000..27bb686e --- /dev/null +++ b/apps/ui/src/views/DashboardView.vue @@ -0,0 +1,16 @@ + + + diff --git a/apps/ui/src/views/MakeRequestView.vue b/apps/ui/src/views/MakeRequestView.vue new file mode 100644 index 00000000..e826f170 --- /dev/null +++ b/apps/ui/src/views/MakeRequestView.vue @@ -0,0 +1,16 @@ + + + diff --git a/apps/ui/src/views/NotFoundView.vue b/apps/ui/src/views/NotFoundView.vue new file mode 100644 index 00000000..c24f97fe --- /dev/null +++ b/apps/ui/src/views/NotFoundView.vue @@ -0,0 +1,13 @@ + + + + + diff --git a/apps/ui/vite.config.ts b/apps/ui/vite.config.ts index 2e9d7bc1..88887f50 100644 --- a/apps/ui/vite.config.ts +++ b/apps/ui/vite.config.ts @@ -1,11 +1,16 @@ -import { defineConfig } from 'vite' -import vue from '@vitejs/plugin-vue' +import { defineConfig } from "vite"; +import vue from "@vitejs/plugin-vue"; // https://vitejs.dev/config/ export default defineConfig({ - base: '/static/', + base: "/", + resolve: { + alias: { + "@": "src", + }, + }, server: { - host: 'localhost', + host: "localhost", port: 3000, open: false, watch: { @@ -17,7 +22,7 @@ export default defineConfig({ // https://github.com/MrBin99/django-vite#vitejs // https://vitejs.dev/guide/backend-integration.html build: { - outDir: 'dist/', + outDir: "dist/", emptyOutDir: true, // https://stackoverflow.com/questions/74177078/styles-is-missing-after-i-bundle-my-project-with-vite @@ -30,12 +35,12 @@ export default defineConfig({ // ViteJS can use to determine which files to compile. You need to // tell it directly. rollupOptions: { - input: 'src/main.ts', + input: "src/main.ts", // See: https://ilikerobots.medium.com/django-vue-vite-rest-not-required-ca63cfa558fd // output: { // dir: '..//static/vue/', // entryFileNames: '[name].js', // } - } - } -}) + }, + }, +});