Merge pull request #62 from RobbinBaauw/dev

[Release] 0.2.0

.travis.yml

@@ -6,7 +6,11 @@ matrix:
     node_js:
         - "8"
         - "10"
+        - "11"
     before_script:
+        - cd cshub-shared
+        - npm install
+        - cd ..
         - cd cshub-client
     script:
         - npm install
@@ -18,9 +22,13 @@ matrix:
     node_js:
         - "8"
         - "10"
+        - "11"
     before_script:
+        - cd cshub-shared
+        - npm install
+        - cd ..
         - cd cshub-server/src/
-        - cp settings_baseline.ts settings.ts
+        - cp SettingsBaseline.ts settings.ts
         - cd ..
     script:
         - npm install

cshub-client/.env.development

@@ -1,2 +1,2 @@
-VUE_APP_API_URL=https://api-test.cshub.nl:3001
+VUE_APP_API_URL=https://api-dev.cshub.nl
 VUE_APP_DEBUG=true

cshub-client/.env.production

@@ -1,2 +1,2 @@
-VUE_APP_API_URL=https://api.cshub.nl
+VUE_APP_API_URL=https://api-dev.cshub.nl
 VUE_APP_DEBUG=false

cshub-client/.gitignore

@@ -2,6 +2,8 @@
 node_modules
 /dist
 
+*.local
+
 # Log files
 npm-debug.log*
 yarn-debug.log*

cshub-client/babel.config.js

@@ -7,4 +7,4 @@ module.exports = {
       }
     ]
   ]
-}
+};

cshub-client/package.json

@@ -1,39 +1,45 @@
 {
   "name": "cshub-client",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "private": true,
   "scripts": {
     "serve": "vue-cli-service serve",
     "build": "vue-cli-service build",
+    "dev-build": "vue-cli-service build --mode development",
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
     "@babel/polyfill": "^7.0.0-rc.1",
     "animate.css": "^3.7.0",
     "axios": "^0.18.0",
-    "jquery": "^3.3.1",
-    "katex": "^0.7.1",
-    "moment": "^2.22.2",
+    "dayjs": "^1.7.7",
+    "katex": "^0.7.0",
+    "localforage": "^1.7.3",
+    "lodash": "^4.17.11",
+    "quill": "^2.0.0-dev.3",
     "quill-delta": "^4.1.0",
     "register-service-worker": "^1.0.0",
     "rxjs": "^6.3.3",
-    "vee-validate": "^2.1.0-beta.9",
+    "vee-validate": "^2.1.2",
     "vue": "^2.5.17",
+    "vue-class-component": "^6.3.2",
+    "vue-property-decorator": "^7.2.0",
     "vue-router": "^3.0.1",
-    "vuetify": "^1.3.0-alpha.2",
+    "vuetify": "^1.3.5",
     "vuex": "^3.0.1",
     "vuex-typex": "^3.0.1"
   },
   "devDependencies": {
-    "@mdi/font": "^2.8.94",
-    "@types/jquery": "^3.3.12",
+    "@fortawesome/fontawesome-free": "^5.5.0",
     "@types/katex": "^0.5.0",
-    "@vue/cli-plugin-babel": "^3.0.4",
-    "@vue/cli-plugin-pwa": "^3.0.4",
-    "@vue/cli-plugin-typescript": "^3.0.4",
-    "@vue/cli-service": "^3.0.4",
-    "typescript": "^3.0.0",
-    "vue-cli-plugin-vuetify": "^0.2.0",
+    "@types/quill": "^2.0.1",
+    "@types/lodash": "^4.14.117",
+    "@vue/cli-plugin-babel": "^3.1.1",
+    "@vue/cli-plugin-pwa": "^3.1.1",
+    "@vue/cli-plugin-typescript": "^3.1.1",
+    "@vue/cli-service": "^3.1.2",
+    "typescript": "^3.1.6",
+    "vue-cli-plugin-vuetify": "^0.2.1",
     "vue-template-compiler": "^2.5.17"
   }
 }

cshub-client/postcss.config.js

@@ -2,4 +2,4 @@ module.exports = {
   plugins: {
     autoprefixer: {}
   }
-}
+};

cshub-client/public/index.html

@@ -6,8 +6,23 @@
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
     <title>CSHub</title>
+
     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900">
-    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
+    <link rel="stylesheet" href="/assets/highlight.min.css">
+    <link rel="stylesheet" href="/assets/mathquill.min.css">
+
+    <style>
+        @font-face {
+            font-family: "Sailed-Light", "SansSerif";
+            url(/assets/Sailec-Light.otf)
+        }
+    </style>
+
+    <script src="https://code.jquery.com/jquery-3.3.1.min.js"
+            integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT"
+            crossorigin="anonymous"></script>
+    <script src="/assets/highlight.pack.min.js"></script>
+    <script src="/assets/mathquill.min.js"></script>
 </head>
 <body>
 <noscript>
@@ -16,5 +31,13 @@
 </noscript>
 <div id="app"></div>
 <!-- built files will be auto injected -->
+    <script async src="https://www.googletagmanager.com/gtag/js?id=UA-128424047-1"></script>
+    <script>
+        window.dataLayer = window.dataLayer || [];
+        function gtag(){dataLayer.push(arguments);}
+        gtag('js', new Date());
+
+        gtag('config', 'UA-128424047-1');
+    </script>
 </body>
 </html>

cshub-client/public/manifest.json

@@ -12,4 +12,4 @@
   "display": "standalone",
   "background_color": "#000000",
   "theme_color": "#00A6D8"
-}
+}

cshub-client/src/App.vue

@@ -48,64 +48,86 @@
 
 <script lang="ts">
     import {Route} from "vue-router";
+    import {Component, Watch} from "vue-property-decorator";
+    import Vue from "vue";
 
     import NavDrawer from "./components/global/NavDrawer.vue";
     import Toolbar from "./components/global/Toolbar.vue";
 
-    import Vue from "vue";
     import uiState from "./store/ui";
-    import {Routes} from "./views/router/router";
     import {LocalStorageData} from "./store/localStorageData";
 
-    export default Vue.extend({
+    import {Routes} from "./views/router/router";
+
+    @Component({
         name: "App",
         components: {NavDrawer, Toolbar},
-        computed: {
-            drawerComputed: {
-                get(): boolean {
-                    return uiState.drawerState;
-                },
-                set(newValue: boolean) {
-                    uiState.setDrawerState(newValue);
-                }
+    })
+    export default class App extends Vue {
+
+        /**
+         * Data
+         */
+        private drawerActive = true;
+        private activeclass = "animated fadeInLeft";
+        private dialogOpen = false;
+
+        /**
+         * Computed properties
+         */
+        get drawerComputed(): boolean {
+            return uiState.drawerState;
+        }
+        set drawerComputed(newValue: boolean) {
+            uiState.setDrawerState(newValue);
+        }
+
+        /**
+         * Watchers
+         */
+        @Watch("$route")
+        private routeChanged(to: Route, from: Route) {
+            const excludeTransition = (from.fullPath === Routes.INDEX && to.name === "post") ||
+                (to.fullPath === Routes.INDEX && from.name === "post") ||
+                (from.name === "user" && to.name === "post") ||
+                (from.name === "admin" && to.name === "post") ||
+                (to.fullPath === Routes.SEARCH) ||
+                (from.fullPath === Routes.SEARCH);
+
+            if (excludeTransition) {
+                this.activeclass = "";
+            } else {
+                this.activeclass = "animated fadeInLeft";
             }
-        },
-        data() {
-            return {
-                drawerActive: true as boolean,
-                activeclass: "animated fadeInLeft" as string,
-                dialogOpen: false
-            };
-        },
-        mounted() {
+        }
+
+        /**
+         * Lifecycle hooks
+         */
+        private mounted() {
             if (localStorage.getItem(LocalStorageData.DIALOGOPENED) !== "true") {
                 this.dialogOpen = true;
             }
-        },
-        methods: {
-            closeDialog() {
-                this.dialogOpen = false;
-                localStorage.setItem(LocalStorageData.DIALOGOPENED, "true");
-            }
-        },
-        watch: {
-            $route(to: Route, from: Route) {
-                if (from.fullPath === Routes.INDEX && to.name === "post") {
-                    this.activeclass = "";
-                } else if (to.fullPath === Routes.INDEX && from.name === "post") {
-                    this.activeclass = "";
-                } else {
-                    this.activeclass = "animated fadeInLeft";
-                }
-            }
         }
-    });
+
+        /**
+         * Methods
+         */
+        private closeDialog() {
+            this.dialogOpen = false;
+            localStorage.setItem(LocalStorageData.DIALOGOPENED, "true");
+        }
+    }
 </script>
 <style>
     #app {
         background: white;
     }
 
+    .v-icon {
+        font-size: 17px !important;
+    }
+
     a {
         text-decoration: none !important;
     }
@@ -127,4 +149,15 @@
         border-radius: 10px;
         background: #6d6d6d;
     }
+
+    @font-face {
+        font-family: 'SailecLight';
+        src: url("../public/assets/Sailec-Light.otf");
+    }
+
+    .ql-editor {
+        border: none;
+        font-family: 'SailecLight', sans-serif;
+    }
+
 </style>