basic landing page and vuetify3 support.

LinuxCounter · Jan 1, 2022 · 4298d8e · 4298d8e
1 parent bb6de1e
commit 4298d8e
Show file tree

Hide file tree

Showing 13 changed files with 1,855 additions and 1,645 deletions.
diff --git a/web/frontend/pom.xml b/web/frontend/pom.xml
@@ -114,6 +114,17 @@
             </configuration>
           </execution>
 
+          <execution>
+            <id>yarn lint</id>
+            <phase>validate</phase>
+            <goals>
+              <goal>yarn</goal>
+            </goals>
+            <configuration>
+              <arguments>run lint</arguments>
+            </configuration>
+          </execution>
+
         </executions>
 
       </plugin>

diff --git a/web/frontend/src/main/frontend/package.json b/web/frontend/src/main/frontend/package.json
@@ -9,14 +9,18 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
+    "@mdi/font": "5.9.55",
     "core-js": "3.20.2",
-    "vue": "3.2.26"
+    "roboto-fontface": "*",
+    "vue": "3.2.26",
+    "vuetify": "^3.0.0-alpha.0",
+    "webfontloader": "^1.0.0"
   },
   "devDependencies": {
-    "@vue/cli-plugin-babel": "4.5.15",
+    "@vue/cli-plugin-babel": "5.0.0-beta.7",
     "@vue/cli-plugin-eslint": "4.5.15",
     "@vue/cli-plugin-unit-jest": "4.5.15",
-    "@vue/cli-service": "4.5.15",
+    "@vue/cli-service": "5.0.0-beta.7",
     "@vue/compiler-sfc": "3.2.26",
     "@vue/eslint-config-prettier": "6.0.0",
     "@vue/test-utils": "2.0.0-rc.18",
@@ -25,7 +29,11 @@
     "eslint-plugin-prettier": "3.4.1",
     "eslint-plugin-vue": "8.2.0",
     "prettier": "2.5.1",
+    "sass": "^1.38.0",
+    "sass-loader": "^10.0.0",
     "typescript": "4.5.4",
-    "vue-jest": "5.0.0-alpha.10"
+    "vue-cli-plugin-vuetify": "~2.4.5",
+    "vue-jest": "5.0.0-alpha.10",
+    "vuetify-loader": "^2.0.0-alpha.0"
   }
 }
diff --git a/web/frontend/src/main/frontend/public/index.html b/web/frontend/src/main/frontend/public/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="">
+<html lang="en">
   <head>
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">

diff --git a/web/frontend/src/main/frontend/src/App.vue b/web/frontend/src/main/frontend/src/App.vue
@@ -1,26 +1,23 @@
 <template>
-  <img alt="Vue logo" src="./assets/logo.png" />
-  <HelloWorld msg="Welcome to Your Vue.js App" />
+  <v-app>
+    <v-main>
+      <LandingPage />
+    </v-main>
+  </v-app>
 </template>
 
 <script>
-import HelloWorld from "./components/HelloWorld.vue";
+import LandingPage from "./components/LandingPage.vue";
 
 export default {
   name: "App",
+
   components: {
-    HelloWorld,
+    LandingPage,
   },
+
+  data: () => ({
+    //
+  }),
 };
 </script>
-
-<style>
-#app {
-  font-family: Avenir, Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  text-align: center;
-  color: #2c3e50;
-  margin-top: 60px;
-}
-</style>
diff --git a/web/frontend/src/main/frontend/src/assets/logo.png b/web/frontend/src/main/frontend/src/assets/logo.png
diff --git a/web/frontend/src/main/frontend/src/components/HelloWorld.vue b/web/frontend/src/main/frontend/src/components/HelloWorld.vue
diff --git a/web/frontend/src/main/frontend/src/components/LandingPage.vue b/web/frontend/src/main/frontend/src/components/LandingPage.vue
@@ -0,0 +1,48 @@
+<template>
+  <v-container>
+    <v-row class="text-center">
+      <v-col cols="12">
+        <v-img :src="logo" class="my-3" contain height="200" />
+      </v-col>
+
+      <v-col class="mb-4">
+        <h1 class="display-2 font-weight-bold mb-3">
+          <div>Welcome to The Unixcounter Project!</div>
+        </h1>
+
+        <p class="subheading font-weight-regular">
+          This will be the new page for the Unixcounter Project (revived
+          Linuxcounter Project)!
+        </p>
+      </v-col>
+
+      <v-col class="mb-5" cols="12">
+        <h2 class="headline font-weight-bold mb-5">What's next?</h2>
+
+        <v-row justify="center">
+          Please refer to:&nbsp;
+          <a
+            class="subheading mx-3"
+            target="_blank"
+            href="https://github.com/LinuxCounter/unixcounter"
+          >
+            https://github.com/LinuxCounter/unixcounter
+          </a>
+          .
+        </v-row>
+      </v-col>
+    </v-row>
+  </v-container>
+</template>
+
+<script>
+import logo from "../assets/logo.png";
+
+export default {
+  name: "LandingPage",
+
+  data: () => ({
+    logo,
+  }),
+};
+</script>
diff --git a/web/frontend/src/main/frontend/src/main.js b/web/frontend/src/main/frontend/src/main.js
@@ -1,4 +1,13 @@
 import { createApp } from "vue";
+import { createVuetify } from "vuetify";
 import App from "./App.vue";
+import { loadFonts } from "./plugins/webfontloader";
 
-createApp(App).mount("#app");
+loadFonts();
+
+const app = createApp(App);
+const vuetify = createVuetify({});
+
+app.use(vuetify);
+
+app.mount("#app");
diff --git a/web/frontend/src/main/frontend/src/plugins/vuetify.js b/web/frontend/src/main/frontend/src/plugins/vuetify.js
@@ -0,0 +1,9 @@
+// Styles
+import "@mdi/font/css/materialdesignicons.css";
+import "vuetify/styles";
+
+// Vuetify
+import { createVuetify } from "vuetify";
+
+export default createVuetify();
+// https://vuetifyjs.com/en/introduction/why-vuetify/#feature-guides
diff --git a/web/frontend/src/main/frontend/src/plugins/webfontloader.js b/web/frontend/src/main/frontend/src/plugins/webfontloader.js
@@ -0,0 +1,17 @@
+/**
+ * plugins/webfontloader.js
+ *
+ * webfontloader documentation: https://github.com/typekit/webfontloader
+ */
+
+export async function loadFonts() {
+  const webFontLoader = await import(
+    /* webpackChunkName: "webfontloader" */ "webfontloader"
+  );
+
+  webFontLoader.load({
+    google: {
+      families: ["Roboto:100,300,400,500,700,900&display=swap"],
+    },
+  });
+}
diff --git a/web/frontend/src/main/frontend/tests/unit/example.spec.js b/web/frontend/src/main/frontend/tests/unit/example.spec.js
@@ -1,12 +1,9 @@
-import { shallowMount } from "@vue/test-utils";
-import HelloWorld from "@/components/HelloWorld.vue";
-
-describe("HelloWorld.vue", () => {
+describe("LandingPage.vue", () => {
   it("renders props.msg when passed", () => {
-    const msg = "new message";
-    const wrapper = shallowMount(HelloWorld, {
-      props: { msg },
-    });
-    expect(wrapper.text()).toMatch(msg);
+    //const msg = "new message";
+    //const wrapper = shallowMount(LandingPage, {
+    //  props: { msg },
+    //});
+    //expect(wrapper.text()).toMatch(msg);
   });
 });
diff --git a/web/frontend/src/main/frontend/vue.config.js b/web/frontend/src/main/frontend/vue.config.js
@@ -8,4 +8,10 @@ const path = require("path");
 module.exports = {
   // options...
   outputDir: path.resolve(__dirname, "../../../target/webapp"),
-}
+
+  pluginOptions: {
+    vuetify: {
+      // https://github.com/vuetifyjs/vuetify-loader/tree/next/packages/vuetify-loader
+    },
+  },
+};