frontend: scaffold Quasar SPA with Vite

.gitignore

@@ -1,5 +1,6 @@
 node_modules/
 dist/
+.quasar/
 .env
 .env.local
 .dev.vars

frontend/.env.example

@@ -0,0 +1,3 @@
+GITHUB_CLIENT_ID=
+GITLAB_CLIENT_ID=
+WORKER_URL=http://localhost:8787

frontend/.eslintrc.cjs

@@ -0,0 +1,20 @@
+/* eslint-env node */
+module.exports = {
+  root: true,
+  parserOptions: {
+    ecmaVersion: 'latest',
+    sourceType: 'module',
+  },
+  env: {
+    browser: true,
+    node: true,
+    'vue/setup-compiler-macros': true,
+  },
+  extends: [
+    'plugin:vue/vue3-essential',
+    'eslint:recommended',
+    'prettier',
+  ],
+  plugins: ['vue'],
+  rules: {},
+}

frontend/.prettierrc.json

@@ -0,0 +1,6 @@
+{
+  "singleQuote": true,
+  "semi": false,
+  "trailingComma": "all",
+  "printWidth": 100
+}

frontend/index.html

@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title><%= productName %></title>
+
+    <meta charset="utf-8" />
+    <meta name="description" content="<%= productDescription %>" />
+    <meta name="format-detection" content="telephone=no" />
+    <meta name="msapplication-tap-highlight" content="no" />
+    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width<% if (ctx.mode.cordova || ctx.mode.capacitor) { %>, viewport-fit=cover<% } %>" />
+
+    <link rel="icon" type="image/png" sizes="128x128" href="icons/favicon-128x128.png" />
+    <link rel="icon" type="image/png" sizes="96x96" href="icons/favicon-96x96.png" />
+    <link rel="icon" type="image/png" sizes="32x32" href="icons/favicon-32x32.png" />
+    <link rel="icon" type="image/png" sizes="16x16" href="icons/favicon-16x16.png" />
+    <link rel="icon" type="image/ico" href="favicon.ico" />
+  </head>
+  <body>
+    <!-- quasar:entry-point -->
+  </body>
+</html>

frontend/package.json

@@ -1,10 +1,34 @@
 {
   "name": "git-extract-frontend",
   "version": "0.1.0",
+  "description": "A Quasar Project",
+  "productName": "git-extract-frontend",
   "private": true,
   "scripts": {
     "dev": "quasar dev",
     "build": "quasar build",
-    "lint": "eslint --ext .js,.vue src/"
+    "lint": "eslint --ext .js,.vue src/",
+    "format": "prettier --write \"**/*.{js,vue,scss,html,md,json}\""
+  },
+  "dependencies": {
+    "@quasar/extras": "^1.16.12",
+    "pinia": "^2.1.7",
+    "quasar": "^2.16.0",
+    "vue": "^3.4.18",
+    "vue-router": "^4.3.0"
+  },
+  "devDependencies": {
+    "@quasar/app-vite": "^1.9.1",
+    "autoprefixer": "^10.4.19",
+    "eslint": "^8.57.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-vue": "^9.25.0",
+    "prettier": "^3.2.5",
+    "sass": "^1.77.6"
+  },
+  "engines": {
+    "node": "^20 || ^18",
+    "npm": ">= 6.13.4",
+    "yarn": ">= 1.21.1"
   }
 }

frontend/quasar.config.js

@@ -0,0 +1,44 @@
+/* eslint-env node */
+const { configure } = require('quasar/wrappers')
+
+module.exports = configure(function (/* ctx */) {
+  return {
+    eslint: {
+      fix: true,
+      warnings: true,
+      errors: true,
+    },
+
+    boot: [],
+
+    css: ['app.scss'],
+
+    extras: ['roboto-font', 'material-icons'],
+
+    build: {
+      target: {
+        browser: ['es2019', 'edge88', 'firefox78', 'chrome87', 'safari13.1'],
+        node: 'node20',
+      },
+
+      vueRouterMode: 'hash',
+
+      env: {
+        GITHUB_CLIENT_ID: process.env.GITHUB_CLIENT_ID,
+        GITLAB_CLIENT_ID: process.env.GITLAB_CLIENT_ID,
+        WORKER_URL: process.env.WORKER_URL,
+      },
+    },
+
+    devServer: {
+      open: true,
+    },
+
+    framework: {
+      config: {},
+      plugins: [],
+    },
+
+    animations: [],
+  }
+})

frontend/src/App.vue

@@ -0,0 +1,3 @@
+<template>
+  <router-view />
+</template>

frontend/src/css/app.scss

@@ -0,0 +1 @@
+// app global css / scss goes here

frontend/src/css/quasar.variables.scss

@@ -0,0 +1,25 @@
+// Quasar SCSS (& Sass) Variables
+// --------------------------------------------------
+// To customize the look and feel of this app, you can override
+// the Sass/SCSS variables found in Quasar's source Sass files
+
+// Check documentation for full list of Quasar variables
+
+// Your own variables (that are not Quasar variables) should not be added here, but in a
+// temporary sass file (e.g. app.variables.scss) and imported in app.scss
+
+// It's highly recommended to change the default colors
+// to match your app's branding.
+// Tip: Use the "Theme Builder" on Quasar's documentation website.
+
+$primary: #1976d2;
+$secondary: #26a69a;
+$accent: #9c27b0;
+
+$dark: #1d1d1d;
+$dark-page: #121212;
+
+$positive: #21ba45;
+$negative: #c10015;
+$info: #31ccec;
+$warning: #f2c037;

frontend/src/layouts/MainLayout.vue

@@ -0,0 +1,24 @@
+<template>
+  <q-layout view="lHh Lpr lFf">
+    <q-header elevated>
+      <q-toolbar>
+        <q-btn flat dense round icon="menu" aria-label="Menu" @click="toggleLeftDrawer" />
+        <q-toolbar-title>git-extract</q-toolbar-title>
+      </q-toolbar>
+    </q-header>
+
+    <q-page-container>
+      <router-view />
+    </q-page-container>
+  </q-layout>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+
+const leftDrawerOpen = ref(false)
+
+function toggleLeftDrawer() {
+  leftDrawerOpen.value = !leftDrawerOpen.value
+}
+</script>

frontend/src/pages/ErrorNotFound.vue

@@ -0,0 +1,9 @@
+<template>
+  <div class="fullscreen bg-blue text-white text-center q-pa-md flex flex-center">
+    <div>
+      <div style="font-size: 30vh">404</div>
+      <div class="text-h2" style="opacity: 0.4">Oops. Nothing here...</div>
+      <q-btn class="q-mt-xl" color="white" text-color="blue" unelevated to="/" label="Go Home" no-caps />
+    </div>
+  </div>
+</template>

frontend/src/pages/IndexPage.vue

@@ -0,0 +1,5 @@
+<template>
+  <q-page class="flex flex-center">
+    <div class="text-h4">git-extract</div>
+  </q-page>
+</template>

frontend/src/router/index.js

@@ -0,0 +1,19 @@
+import { route } from 'quasar/wrappers'
+import { createRouter, createMemoryHistory, createWebHistory, createWebHashHistory } from 'vue-router'
+import routes from './routes'
+
+export default route(function (/* { store, ssrContext } */) {
+  const createHistory = process.env.SERVER
+    ? createMemoryHistory
+    : process.env.VUE_ROUTER_MODE === 'history'
+      ? createWebHistory
+      : createWebHashHistory
+
+  const Router = createRouter({
+    scrollBehavior: () => ({ left: 0, top: 0 }),
+    routes,
+    history: createHistory(process.env.VUE_ROUTER_BASE),
+  })
+
+  return Router
+})

frontend/src/router/routes.js

@@ -0,0 +1,13 @@
+const routes = [
+  {
+    path: '/',
+    component: () => import('layouts/MainLayout.vue'),
+    children: [{ path: '', component: () => import('pages/IndexPage.vue') }],
+  },
+  {
+    path: '/:catchAll(.*)*',
+    component: () => import('pages/ErrorNotFound.vue'),
+  },
+]
+
+export default routes

frontend/src/stores/example-store.js

@@ -0,0 +1,17 @@
+import { defineStore } from 'pinia'
+
+export const useExampleStore = defineStore('example', {
+  state: () => ({
+    counter: 0,
+  }),
+
+  getters: {
+    doubleCount: (state) => state.counter * 2,
+  },
+
+  actions: {
+    increment() {
+      this.counter++
+    },
+  },
+})