feat(frontend): add basic framework

frontend/.editorconfig

@@ -0,0 +1,13 @@
+# editorconfig.org
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.md]
+trim_trailing_whitespace = false

frontend/.eslintignore

@@ -0,0 +1,89 @@
+# Created by .ignore support plugin (hsz.mobi)
+### Node template
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# TypeScript v1 declaration files
+typings/
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variables file
+.env
+
+# parcel-bundler cache (https://parceljs.org/)
+.cache
+
+# next.js build output
+.next
+
+# nuxt.js build output
+.nuxt
+
+# Nuxt generate
+dist
+
+# vuepress build output
+.vuepress/dist
+
+# Serverless directories
+.serverless
+
+# IDE
+.idea
+
+# Service worker
+sw.*
+node_modules
+.git
+
+# wasm
+wasm/**/*.js

frontend/.eslintrc.js

@@ -0,0 +1,51 @@
+module.exports = {
+	root: true,
+	env: {
+		browser: true,
+		node: true
+	},
+	extends: [
+		'@nuxtjs',
+		'plugin:nuxt/recommended',
+		'@nuxtjs/eslint-config-typescript'
+	],
+	// add your custom rules here
+	rules: {
+		'brace-style': ['error', 'stroustrup'],
+		semi: ['warn', 'always'],
+		curly: 'off',
+		'arrow-parens': 'off',
+		'space-before-function-paren': 'off',
+		'no-tabs': 'off',
+		'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
+		'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
+		'no-useless-escape': 'off',
+		'spaced-comment': 'off',
+		'no-unused-vars': 'warn',
+		'require-await': 'warn',
+		'no-trailing-spaces': 'warn',
+		'no-throw-literal': 'warn',
+		'new-cap': 'off',
+		'indent': 'off',
+		'@typescript-eslint/indent': ['warn', 'tab', { SwitchCase: 1 }],
+		'no-useless-constructor': 'off',
+		'@typescript-eslint/no-useless-constructor': 'error',
+		'vue/html-indent': ['warn', 'tab', { closeBracket: 0 }],
+		'vue/no-unused-components': 'warn',
+		'vue/singleline-html-element-content-newline': 'off',
+		'vue/attributes-order': 'off',
+		'vue/no-v-html': 'off',
+		'vue/html-self-closing': 'off',
+		'vue/script-indent': 'off',
+		'import/order': 'off',
+		'import/no-mutable-exports': 'off',
+		'object-curly-spacing': 'warn',
+		'space-in-parens': 'off',
+		'quote-props': 'off',
+		'unicorn/number-literal-case': 'off',
+		'no-new-func': 'off',
+		'operator-linebreak': ['warn', 'before'],
+		'camelcase': 'off',
+		'import/no-webpack-loader-syntax': 'off'
+	}
+};

frontend/.gitignore

@@ -0,0 +1,90 @@
+# Created by .ignore support plugin (hsz.mobi)
+### Node template
+# Logs
+/logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# TypeScript v1 declaration files
+typings/
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variables file
+.env
+
+# parcel-bundler cache (https://parceljs.org/)
+.cache
+
+# next.js build output
+.next
+
+# nuxt.js build output
+.nuxt
+
+# Nuxt generate
+dist
+
+# vuepress build output
+.vuepress/dist
+
+# Serverless directories
+.serverless
+
+# IDE / Editor
+.idea
+
+# Service worker
+sw.*
+
+# macOS
+.DS_Store
+
+# Vim swap files
+*.swp

frontend/README.md

@@ -0,0 +1,20 @@
+# frontend
+
+## Build Setup
+
+```bash
+# install dependencies
+$ npm install
+
+# serve with hot reload at localhost:3000
+$ npm run dev
+
+# build for production and launch server
+$ npm run build
+$ npm run start
+
+# generate static project
+$ npm run generate
+```
+
+For detailed explanation on how things work, check out [Nuxt.js docs](https://nuxtjs.org).

frontend/assets/README.md

@@ -0,0 +1,7 @@
+# ASSETS
+
+**This directory is not required, you can delete it if you don't want to use it.**
+
+This directory contains your un-compiled assets such as LESS, SASS, or JavaScript.
+
+More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/assets#webpacked).

frontend/assets/variables.scss

@@ -0,0 +1,4 @@
+// Ref: https://github.com/nuxt-community/vuetify-module#customvariables
+//
+// The variables you want to modify
+// $font-size-root: 20px;

frontend/components/README.md

@@ -0,0 +1,7 @@
+# COMPONENTS
+
+**This directory is not required, you can delete it if you don't want to use it.**
+
+The components directory contains your Vue.js Components.
+
+_Nuxt.js doesn't supercharge these components._

frontend/jsconfig.json

@@ -0,0 +1,12 @@
+{
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "~/*": ["./*"],
+      "@/*": ["./*"],
+      "~~/*": ["./*"],
+      "@@/*": ["./*"]
+    }
+  },
+  "exclude": ["node_modules", ".nuxt", "dist"]
+}

frontend/layouts/README.md

@@ -0,0 +1,7 @@
+# LAYOUTS
+
+**This directory is not required, you can delete it if you don't want to use it.**
+
+This directory contains your Application Layouts.
+
+More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/views#layouts).

frontend/layouts/default.vue

@@ -0,0 +1,117 @@
+<template>
+	<v-app dark>
+		<v-navigation-drawer
+			v-model="drawer"
+			:mini-variant="miniVariant"
+			:clipped="clipped"
+			fixed
+			app
+		>
+			<v-list>
+				<v-list-item
+					v-for="(item, i) in items"
+					:key="i"
+					:to="item.to"
+					router
+					exact
+				>
+					<v-list-item-action>
+						<v-icon>{{ item.icon }}</v-icon>
+					</v-list-item-action>
+					<v-list-item-content>
+						<v-list-item-title v-text="item.title" />
+					</v-list-item-content>
+				</v-list-item>
+			</v-list>
+		</v-navigation-drawer>
+		<v-app-bar
+			:clipped-left="clipped"
+			fixed
+			app
+		>
+			<v-app-bar-nav-icon @click.stop="drawer = !drawer" />
+			<v-btn
+				icon
+				@click.stop="miniVariant = !miniVariant"
+			>
+				<v-icon>mdi-{{ `chevron-${miniVariant ? 'right' : 'left'}` }}</v-icon>
+			</v-btn>
+			<v-btn
+				icon
+				@click.stop="clipped = !clipped"
+			>
+				<v-icon>mdi-application</v-icon>
+			</v-btn>
+			<v-btn
+				icon
+				@click.stop="fixed = !fixed"
+			>
+				<v-icon>mdi-minus</v-icon>
+			</v-btn>
+			<v-toolbar-title v-text="title" />
+			<v-spacer />
+			<v-btn
+				icon
+				@click.stop="rightDrawer = !rightDrawer"
+			>
+				<v-icon>mdi-menu</v-icon>
+			</v-btn>
+		</v-app-bar>
+		<v-content>
+			<v-container>
+				<nuxt />
+			</v-container>
+		</v-content>
+		<v-navigation-drawer
+			v-model="rightDrawer"
+			:right="right"
+			temporary
+			fixed
+		>
+			<v-list>
+				<v-list-item @click.native="right = !right">
+					<v-list-item-action>
+						<v-icon light>
+							mdi-repeat
+						</v-icon>
+					</v-list-item-action>
+					<v-list-item-title>Switch drawer (click me)</v-list-item-title>
+				</v-list-item>
+			</v-list>
+		</v-navigation-drawer>
+		<v-footer
+			:absolute="!fixed"
+			app
+		>
+			<span>&copy; {{ new Date().getFullYear() }}</span>
+		</v-footer>
+	</v-app>
+</template>
+
+<script>
+export default {
+	data () {
+		return {
+			clipped: false,
+			drawer: false,
+			fixed: false,
+			items: [
+				{
+					icon: 'mdi-apps',
+					title: 'Welcome',
+					to: '/'
+				},
+				{
+					icon: 'mdi-chart-bubble',
+					title: 'Inspire',
+					to: '/inspire'
+				}
+			],
+			miniVariant: false,
+			right: true,
+			rightDrawer: false,
+			title: 'Vuetify.js'
+		};
+	}
+};
+</script>

frontend/layouts/error.vue

@@ -0,0 +1,44 @@
+<template>
+	<v-app dark>
+		<h1 v-if="error.statusCode === 404">
+			{{ pageNotFound }}
+		</h1>
+		<h1 v-else>
+			{{ otherError }}
+		</h1>
+		<NuxtLink to="/">
+			Home page
+		</NuxtLink>
+	</v-app>
+</template>
+
+<script>
+export default {
+	layout: 'empty',
+	props: {
+		error: {
+			type: Object,
+			default: null
+		}
+	},
+	data () {
+		return {
+			pageNotFound: '404 Not Found',
+			otherError: 'An error occurred'
+		};
+	},
+	head () {
+		const title
+      = this.error.statusCode === 404 ? this.pageNotFound : this.otherError;
+		return {
+			title
+		};
+	}
+};
+</script>
+
+<style scoped>
+h1 {
+  font-size: 20px;
+}
+</style>

frontend/middleware/README.md

@@ -0,0 +1,8 @@
+# MIDDLEWARE
+
+**This directory is not required, you can delete it if you don't want to use it.**
+
+This directory contains your application middleware.
+Middleware let you define custom functions that can be run before rendering either a page or a group of pages.
+
+More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/routing#middleware).

frontend/nuxt.config.js

@@ -0,0 +1,97 @@
+import colors from 'vuetify/es5/util/colors';
+
+export default {
+	server: {
+		port: 8080
+	},
+
+	/*
+  ** Nuxt rendering mode
+  ** See https://nuxtjs.org/api/configuration-mode
+  */
+	mode: 'spa',
+	/*
+  ** Nuxt target
+  ** See https://nuxtjs.org/api/configuration-target
+  */
+	target: 'static',
+	/*
+  ** Headers of the page
+  ** See https://nuxtjs.org/api/configuration-head
+  */
+	head: {
+		titleTemplate: '%s - ' + process.env.npm_package_name,
+		title: process.env.npm_package_name || '',
+		meta: [
+			{ charset: 'utf-8' },
+			{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
+			{ hid: 'description', name: 'description', content: process.env.npm_package_description || '' }
+		],
+		link: [
+			{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
+		]
+	},
+	/*
+  ** Global CSS
+  */
+	css: [
+	],
+	/*
+  ** Plugins to load before mounting the App
+  ** https://nuxtjs.org/guide/plugins
+  */
+	plugins: [
+	],
+	/*
+  ** Auto import components
+  ** See https://nuxtjs.org/api/configuration-components
+  */
+	components: true,
+	/*
+  ** Nuxt.js dev-modules
+  */
+	buildModules: [
+		'@nuxt/typescript-build',
+		'@nuxtjs/vuetify'
+	],
+	/*
+  ** Nuxt.js modules
+  */
+	modules: [
+		// Doc: https://axios.nuxtjs.org/usage
+		'@nuxtjs/axios',
+		'@nuxtjs/pwa'
+	],
+	/*
+  ** Axios module configuration
+  ** See https://axios.nuxtjs.org/options
+  */
+	axios: {},
+	/*
+  ** vuetify module configuration
+  ** https://github.com/nuxt-community/vuetify-module
+  */
+	vuetify: {
+		customVariables: ['~/assets/variables.scss'],
+		theme: {
+			dark: true,
+			themes: {
+				dark: {
+					primary: colors.blue.darken2,
+					accent: colors.grey.darken3,
+					secondary: colors.amber.darken3,
+					info: colors.teal.lighten1,
+					warning: colors.amber.base,
+					error: colors.deepOrange.accent4,
+					success: colors.green.accent3
+				}
+			}
+		}
+	},
+	/*
+  ** Build configuration
+  ** See https://nuxtjs.org/api/configuration-build/
+  */
+	build: {
+	}
+};

frontend/package.json

@@ -0,0 +1,29 @@
+{
+  "name": "frontend",
+  "version": "1.0.0",
+  "private": true,
+  "scripts": {
+    "dev": "nuxt",
+    "build": "nuxt-ts build",
+    "start": "nuxt-ts start",
+    "export": "nuxt-ts export",
+    "serve": "nuxt-ts serve",
+    "lint": "eslint --fix --ext .ts,.js,.vue ."
+  },
+  "dependencies": {
+    "@nuxt/typescript-runtime": "^0.4.10",
+    "@nuxtjs/axios": "^5.11.0",
+    "@nuxtjs/pwa": "^3.0.0-beta.20",
+    "nuxt": "^2.13.0"
+  },
+  "devDependencies": {
+    "@nuxt/typescript-build": "^1.0.3",
+    "@nuxtjs/eslint-config": "^3.0.0",
+    "@nuxtjs/eslint-config-typescript": "^2.0.0",
+    "@nuxtjs/eslint-module": "^2.0.0",
+    "@nuxtjs/vuetify": "^1.11.2",
+    "babel-eslint": "^10.1.0",
+    "eslint": "^7.2.0",
+    "eslint-plugin-nuxt": "^1.0.0"
+  }
+}

frontend/pages/README.md

@@ -0,0 +1,6 @@
+# PAGES
+
+This directory contains your Application Views and Routes.
+The framework reads all the `*.vue` files inside this directory and creates the router of your application.
+
+More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/routing).

frontend/pages/index.vue

@@ -0,0 +1,14 @@
+<template>
+	<v-layout
+		column
+		justify-center
+		align-center
+	>
+		Hello
+	</v-layout>
+</template>
+
+<script>
+export default {
+};
+</script>

frontend/plugins/README.md

@@ -0,0 +1,7 @@
+# PLUGINS
+
+**This directory is not required, you can delete it if you don't want to use it.**
+
+This directory contains Javascript plugins that you want to run before mounting the root Vue.js application.
+
+More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/plugins).

frontend/static/README.md

@@ -0,0 +1,11 @@
+# STATIC
+
+**This directory is not required, you can delete it if you don't want to use it.**
+
+This directory contains your static files.
+Each file inside this directory is mapped to `/`.
+Thus you'd want to delete this README.md before deploying to production.
+
+Example: `/static/robots.txt` is mapped as `/robots.txt`.
+
+More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/assets#static).

frontend/store/README.md

@@ -0,0 +1,10 @@
+# STORE
+
+**This directory is not required, you can delete it if you don't want to use it.**
+
+This directory contains your Vuex Store files.
+Vuex Store option is implemented in the Nuxt.js framework.
+
+Creating a file in this directory automatically activates the option in the framework.
+
+More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/vuex-store).

frontend/tsconfig.json

@@ -0,0 +1,36 @@
+{
+  "compilerOptions": {
+    "target": "es2018",
+    "module": "esnext",
+    "moduleResolution": "node",
+    "lib": [
+      "esnext",
+      "esnext.asynciterable",
+      "dom"
+    ],
+    "esModuleInterop": true,
+    "allowJs": true,
+    "sourceMap": true,
+    "strict": true,
+    "noEmit": true,
+    "experimentalDecorators": true,
+    "baseUrl": ".",
+    "paths": {
+      "~/*": [
+        "./*"
+      ],
+      "@/*": [
+        "./*"
+      ]
+    },
+    "types": [
+      "@types/node",
+      "@nuxt/types"
+    ]
+  },
+  "exclude": [
+    "node_modules",
+    ".nuxt",
+    "dist"
+  ]
+}