Updating Varie to use grid

Author: lukepolo

.babelrc

@@ -0,0 +1,4 @@
+# Browsers that we support
+# http://browserl.ist
+
+defaults

.browserslistrc

@@ -1,2 +1,5 @@
 APP_NAME=Varie Documentation
-APP_HOST=varie-docs.test
+APP_HOST=varie-docs.test
+
+DOC_SEARCH_API_KEY=
+RAVEN_URL=

.env.example

@@ -1,4 +1,3 @@
 .env
-.cache-loader
 public
-node_modules
+node_modules

.gitignore

@@ -1 +1 @@
-10.15.0
+10.15.3

.nvmrc

@@ -1,4 +1,2 @@
-public/
-package.json
-.cache-loader
+public
 resources/assets/font-awesome

.prettierignore

@@ -1,4 +1,15 @@
 {
+  "printWidth": 80,
+  "tabWidth": 2,
+  "useTabs": false,
+  "semi" : true,
+  "singleQuote": false,
   "trailingComma": "all",
-  "arrowParens": "always"
-}
+  "bracketSpacing" : true,
+  "jsxBracketSameLine": false,
+  "arrowParens": "always",
+  "rangeStart" : 0,
+  "requirePragma" : false,
+  "insertPragma" : false,
+  "proseWrap" : "preserve"
+}

.prettierrc

@@ -7,17 +7,15 @@
 */
 import Vue from "vue";
 import * as Raven from "raven-js";
-import { application } from "varie";
+import { Application } from "varie";
 import RavenVue from "raven-js/plugins/vue";
 import BaseLayout from "varie/BaseLayout.vue";
 import RouterInterface from "varie/lib/routing/RouterInterface";
 import StateServiceInterface from "varie/lib/state/StateServiceInterface";
 
-application.boot().then((app) => {
+new Application().boot().then((app) => {
   if ($config.get("app.env") === "production") {
-    Raven.config(
-      "https://[email protected]/8",
-    )
+    Raven.config($config.get("raven.url"))
       .addPlugin(RavenVue)
       .install();
   }

app/app.ts

@@ -12,4 +12,6 @@ import ApplicationInterface from "varie/lib/foundation/ApplicationInterface";
 declare global {
   const $config: ConfigInterface;
   const $app: ApplicationInterface;
+
+  type AnyClass = { new (): any };
 }

app/globals.ts

@@ -0,0 +1,31 @@
+import Vue from "vue";
+
+/*
+|--------------------------------------------------------------------------
+| Vue Constructor Properties
+|--------------------------------------------------------------------------
+|
+| You can add additional properties to let typescript do its work
+|
+*/
+declare module "vue/types/options" {
+  interface ComponentOptions<V extends Vue> {
+    $inject?: Array<string>;
+
+    // ...
+  }
+}
+
+/*
+|--------------------------------------------------------------------------
+| Vue Component Properties
+|--------------------------------------------------------------------------
+|
+| You can add additional properties to let typescript do its work
+|
+*/
+declare module "vue/types/vue" {
+  interface Vue {
+    // ...
+  }
+}

app/index.d.ts

@@ -1,3 +1 @@
-import LoadingScreen from "./LoadingScreen";
-
-export default [LoadingScreen];
+export default [];

app/middleware/LoadingScreen.ts

@@ -1,4 +1,5 @@
-import ServiceProvider from "varie/lib/support/ServiceProvider";
+import { ServiceProvider } from "varie";
+
 /*
 |--------------------------------------------------------------------------
 | App Service Provider
@@ -8,11 +9,11 @@ import ServiceProvider from "varie/lib/support/ServiceProvider";
 |
 */
 export default class AppProviderServiceProvider extends ServiceProvider {
-  public boot() {
-    //
+  public async boot() {
+    // ...
   }
 
-  public register() {
-    //
+  public async register() {
+    // ...
   }
 }

app/middleware/index.ts

@@ -1,5 +1,5 @@
 import { injectable } from "inversify";
-import ServiceProvider from "varie/lib/support/ServiceProvider";
+import { ServiceProvider } from "varie";
 import DocumentationService from "@app/services/DocumentationService";
 
 /*

app/providers/AppServiceProvider.ts

@@ -1,6 +1,6 @@
 import Routes from "@routes";
-import VueRouterService from "varie/lib/routing/VueRouterService";
-import ServiceProvider from "varie/lib/routing/RoutingServiceProvider";
+import RouterInterface from "varie/lib/routing/RouterInterface";
+import { RoutingServiceProvider as ServiceProvider } from "varie";
 
 /*
 |--------------------------------------------------------------------------
@@ -9,7 +9,19 @@ import ServiceProvider from "varie/lib/routing/RoutingServiceProvider";
 |
 */
 export default class RoutingServiceProvider extends ServiceProvider {
-  public $router: VueRouterService;
+  public $router: RouterInterface;
+
+  public async boot() {
+    super.boot();
+
+    // ...
+  }
+
+  public async register() {
+    super.register();
+
+    // ...
+  }
 
   map() {
     this.$router.register(Routes);

app/providers/DocumentationServiceProvider.ts

@@ -1,5 +1,5 @@
 import MenuStore from "@store/menu/MenuStore";
-import ServiceProvider from "varie/lib/state/StateServiceProvider";
+import { StateServiceProvider as ServiceProvider } from "varie";
 import StateServiceInterface from "varie/lib/state/StateServiceInterface";
 
 /*
@@ -11,7 +11,19 @@ import StateServiceInterface from "varie/lib/state/StateServiceInterface";
 export default class StateServiceProvider extends ServiceProvider {
   public $store: StateServiceInterface;
 
-  map() {
+  public async boot() {
+    super.boot();
+
+    // ...
+  }
+
+  public async register() {
+    super.register();
+
+    // ...
+  }
+
+  public map() {
     this.$store.registerStore(MenuStore);
   }
 }

app/providers/RouteServiceProvider.ts

@@ -35,6 +35,7 @@ export default class DocumentationService {
       // ADDING MOBILE SEARCH TO MENU
       return `<div><ul class="search-area"><li><input id="menu-search" type="text" placeholder="Search" name="search"></li></ul>${menuTemplate}</div>`;
     } catch (err) {
+      console.info(err);
       this.$router.push("/404");
     }
   }
@@ -55,22 +56,25 @@ export default class DocumentationService {
     }
   }
 
-  pageMenu(version : string, page : string) {
+  pageMenu(version: string, page: string) {
     let markdownPage = require(`@resources/docs/${version}/${page}.md`);
 
-    let routeName = this.$router.currentRoute;
-
-    let menu = `<h1 class="text-capitalize">${routeName.params.page.replace('-',' ')}</h1>`;
+    let menu = `<h1 class="text-capitalize">${page.replace("-", " ")}</h1>`;
 
     let matches = markdownPage.match(/<h(1|2|3).*/g);
 
-    matches.forEach((menuItem) => {
-      menu += menuItem.replace(/<h(\d) id="(.*)">(.*)<.*>/, "<li class='documentation__content__links__level--$1'><a href=\"#$2\">$3</a></li>\n")
-    })
+    if (matches) {
+      matches.forEach((menuItem) => {
+        menu += menuItem.replace(
+          /<h(\d) id="(.*)">(.*)<.*>/,
+          "<li class='documentation__content__links__level--$1'><a href=\"#$2\">$3</a></li>\n",
+        );
+      });
+    }
 
     menu = this._renderRouterLinks(menu, version);
 
-    return `<ul class="documentation__content__links">${menu}</ul>`
+    return `<ul class="documentation__content__links">${menu}</ul>`;
   }
 
   private _renderRouterLinks(html, version) {
@@ -88,7 +92,7 @@ export default class DocumentationService {
             hash : "#$1"
           }'`.replace(/\r?\n|\r/g, ""),
       )
-      .replace(/<li(.*)>(<a.*)<\/li>/g, '<li $1>$2</li>')
+      .replace(/<li(.*)>(<a.*)<\/li>/g, "<li $1>$2</li>")
       .replace(/<a (:to.*)>(.*)<.*\/a>/g, "<router-link $1>$2</router-link>")
       .replace(/%7B%7Bversion%7D%7D/g, version);
   }

app/providers/StateServiceProvider.ts

@@ -0,0 +1,10 @@
+module.exports = {
+  presets: [
+    [
+      "varie-app",
+      {
+        jsx: true,
+      },
+    ],
+  ],
+};

app/services/DocumentationService.ts

@@ -0,0 +1,13 @@
+export default {
+  /*
+  |--------------------------------------------------------------------------
+  | Duration
+  |--------------------------------------------------------------------------
+  |
+  | How long a notification will show up, 0 will make it
+  | a forever living notification.
+  |
+  */
+
+  duration: 0,
+};