diff --git a/frontend/.gitignore b/frontend/.gitignore index befff2d31..2ce339e01 100644 --- a/frontend/.gitignore +++ b/frontend/.gitignore @@ -90,3 +90,7 @@ sw.* # Vim swap files *.swp + +.nuxt/ +.output/ +dist \ No newline at end of file diff --git a/frontend/components/NuxtLogo.vue b/frontend/components/NuxtLogo.vue deleted file mode 100644 index f038904c4..000000000 --- a/frontend/components/NuxtLogo.vue +++ /dev/null @@ -1,19 +0,0 @@ - - - diff --git a/frontend/components/Tutorial.vue b/frontend/components/Tutorial.vue deleted file mode 100644 index 500cf2ff1..000000000 --- a/frontend/components/Tutorial.vue +++ /dev/null @@ -1,122 +0,0 @@ - - - - diff --git a/frontend/components/app_footer/NavLink.vue b/frontend/components/app_footer/NavLink.vue new file mode 100644 index 000000000..e5180f1eb --- /dev/null +++ b/frontend/components/app_footer/NavLink.vue @@ -0,0 +1,24 @@ + + \ No newline at end of file diff --git a/frontend/components/app_footer/index.vue b/frontend/components/app_footer/index.vue new file mode 100644 index 000000000..5be458eb5 --- /dev/null +++ b/frontend/components/app_footer/index.vue @@ -0,0 +1,33 @@ + + \ No newline at end of file diff --git a/frontend/components/app_header/NavLink.vue b/frontend/components/app_header/NavLink.vue new file mode 100644 index 000000000..e5180f1eb --- /dev/null +++ b/frontend/components/app_header/NavLink.vue @@ -0,0 +1,24 @@ + + \ No newline at end of file diff --git a/frontend/components/app_header/index.vue b/frontend/components/app_header/index.vue new file mode 100644 index 000000000..f037b6665 --- /dev/null +++ b/frontend/components/app_header/index.vue @@ -0,0 +1,20 @@ + + + \ No newline at end of file diff --git a/frontend/components/button.vue b/frontend/components/button.vue new file mode 100644 index 000000000..a968d0eed --- /dev/null +++ b/frontend/components/button.vue @@ -0,0 +1,17 @@ + + diff --git a/frontend/components/dropdown.vue b/frontend/components/dropdown.vue new file mode 100644 index 000000000..4b8833eab --- /dev/null +++ b/frontend/components/dropdown.vue @@ -0,0 +1,77 @@ + + + + + diff --git a/frontend/config/dev.env.js b/frontend/config/dev.env.js deleted file mode 100644 index c9558f850..000000000 --- a/frontend/config/dev.env.js +++ /dev/null @@ -1,10 +0,0 @@ -const merge = require('webpack-merge') -const prodEnv = require('./prod.env') - -module.exports = merge(prodEnv, { - NODE_ENV: '"localhost"', - API_URL: '"http://localhost:5000/api/v1"', - SOCKET_URL: '"http://localhost:5000"', - KEYCLOAK_JSON_URL: '"http://localhost:8080/static/keycloak.json"', - REFRESH_TOKEN_SECONDS_LEFT: 180 -}) diff --git a/frontend/config/index.js b/frontend/config/index.js deleted file mode 100644 index 2a7218d7b..000000000 --- a/frontend/config/index.js +++ /dev/null @@ -1,52 +0,0 @@ -// see http://vuejs-templates.github.io/webpack for documentation. -const path = require('path') - -module.exports = { - build: { - env: require('./prod.env'), - index: path.resolve(__dirname, '../dist/index.html'), - assetsRoot: path.resolve(__dirname, '../dist'), - assetsSubDirectory: 'static', - assetsPublicPath: '/', - productionSourceMap: true, - // Gzip off by default as many popular static hosts such as - // Surge or Netlify already gzip all static assets for you. - // Before setting to `true`, make sure to: - // npm install --save-dev compression-webpack-plugin - productionGzip: false, - productionGzipExtensions: ['js', 'css'], - // Run the build command with an extra argument to - // View the bundle analyzer report after build finishes: - // `npm run build --report` - // Set to `true` or `false` to always turn it on or off - bundleAnalyzerReport: process.env.npm_config_report - }, - dev: { - env: require('./dev.env'), - port: 8080, - autoOpenBrowser: true, - assetsSubDirectory: 'static', - assetsPublicPath: '/', - proxyTable: {}, - // CSS Sourcemaps off by default because relative paths are "buggy" - // with this option, according to the CSS-Loader README - // (https://github.com/webpack/css-loader#sourcemaps) - // In our experience, they generally work as expected, - // just be aware of this issue when enabling this option. - cssSourceMap: false - }, - prod: { - env: require('./prod.env'), - port: 8080, - autoOpenBrowser: true, - assetsSubDirectory: 'static', - assetsPublicPath: '/', - proxyTable: {}, - // CSS Sourcemaps off by default because relative paths are "buggy" - // with this option, according to the CSS-Loader README - // (https://github.com/webpack/css-loader#sourcemaps) - // In our experience, they generally work as expected, - // just be aware of this issue when enabling this option. - cssSourceMap: false - } -} diff --git a/frontend/config/prod.env.js b/frontend/config/prod.env.js deleted file mode 100644 index 1f3621c8f..000000000 --- a/frontend/config/prod.env.js +++ /dev/null @@ -1,10 +0,0 @@ -const merge = require('webpack-merge') -const prodEnv = require('./prod.env') - -module.exports = merge(prodEnv, { - NODE_ENV: '"production"', - API_URL: '"/api/v1"', - SOCKET_URL: '""', - KEYCLOAK_JSON_URL: '"/static/keycloak/keycloak.json"', - REFRESH_TOKEN_SECONDS_LEFT: 1700 -}) diff --git a/frontend/layouts/default.vue b/frontend/layouts/default.vue new file mode 100644 index 000000000..3123e3538 --- /dev/null +++ b/frontend/layouts/default.vue @@ -0,0 +1,12 @@ + + diff --git a/frontend/nuxt.config.ts b/frontend/nuxt.config.ts index 11a92bf0f..4532ce028 100644 --- a/frontend/nuxt.config.ts +++ b/frontend/nuxt.config.ts @@ -5,6 +5,7 @@ export default defineNuxtConfig({ devServer: { port: 8080, }, + devtools: { enabled: true }, app: { head: { charset: 'utf-8', @@ -14,7 +15,7 @@ export default defineNuxtConfig({ baseURL: '/', }, - css: ['~/assets/css/main.scss'], // Global CSS + css: ['~/assets/css/main.scss'], vite: { optimizeDeps: { @@ -25,11 +26,11 @@ export default defineNuxtConfig({ }, }, - plugins: [], + plugins: ['~/plugins/font-awesome.ts'], components: true, buildModules: [ - '@nuxt/typescript-build', // TypeScript support + '@nuxt/typescript-build', ], modules: [ diff --git a/frontend/package-lock.json b/frontend/package-lock.json index 4c6880adf..d4fe33621 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -10,6 +10,9 @@ "dependencies": { "@bcgov/bc-sans": "^2.1.0", "@bcgov/design-tokens": "^3.1.1", + "@fortawesome/fontawesome-svg-core": "^6.6.0", + "@fortawesome/free-solid-svg-icons": "^6.6.0", + "@fortawesome/vue-fontawesome": "^3.0.8", "@headlessui/vue": "^1.7.22", "@nuxt/content": "^2.13.2", "@nuxt/image": "^1.7.0", @@ -1020,6 +1023,49 @@ "node": ">=14" } }, + "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-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-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/@headlessui/tailwindcss": { "version": "0.2.1", "resolved": "https://registry.npmjs.org/@headlessui/tailwindcss/-/tailwindcss-0.2.1.tgz", diff --git a/frontend/package.json b/frontend/package.json index dcb88b961..3600faeda 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -18,6 +18,9 @@ "dependencies": { "@bcgov/bc-sans": "^2.1.0", "@bcgov/design-tokens": "^3.1.1", + "@fortawesome/fontawesome-svg-core": "^6.6.0", + "@fortawesome/free-solid-svg-icons": "^6.6.0", + "@fortawesome/vue-fontawesome": "^3.0.8", "@headlessui/vue": "^1.7.22", "@nuxt/content": "^2.13.2", "@nuxt/image": "^1.7.0", diff --git a/frontend/pages/index.vue b/frontend/pages/index.vue index d8766ff87..7be5f9965 100644 --- a/frontend/pages/index.vue +++ b/frontend/pages/index.vue @@ -1,10 +1,68 @@ + diff --git a/frontend/plugins/font-awesome.ts b/frontend/plugins/font-awesome.ts new file mode 100644 index 000000000..13077aff9 --- /dev/null +++ b/frontend/plugins/font-awesome.ts @@ -0,0 +1,10 @@ +import { library } from '@fortawesome/fontawesome-svg-core'; +import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'; +import { defineNuxtPlugin } from '#app'; +import { faCheck, faBars } from '@fortawesome/free-solid-svg-icons'; + +library.add(faCheck, faBars); + +export default defineNuxtPlugin((nuxtApp) => { + nuxtApp.vueApp.component('font-awesome-icon', FontAwesomeIcon); +}); diff --git a/frontend/public/images/top-nav.png b/frontend/public/images/top-nav.png new file mode 100644 index 000000000..e8d6c357a Binary files /dev/null and b/frontend/public/images/top-nav.png differ