EJS 1.0 support via ejsify + page title change + refactoring

+ Designer-friendly development via EJS! (Closes #37) + Support for changing the page's title (Closes #45) + Made `v-link`'s prettier + Added `js/Include` in attempt to hack #46, but it seems webpack might be needed (#44) - rm'd `App.vue`, `Button.vue` and `Input.vue` (Per #37)
okTurtles · Apr 5, 2016 · ef0f34a · ef0f34a
1 parent 70be619
commit ef0f34a
Show file tree

Hide file tree

Showing 17 changed files with 214 additions and 247 deletions.
diff --git a/.Gruntfile.babel.js b/.Gruntfile.babel.js
@@ -21,7 +21,7 @@ module.exports = grunt => {
   grunt.initConfig({
     pkg: grunt.file.readJSON('package.json'),
     files: {
-      frontend: ['frontend/**/*.{vue,js}', '!frontend/_static/**']
+      frontend: ['frontend/**/*.{vue,ejs,js}', '!frontend/_static/**']
     },
 
     watch: {
@@ -47,7 +47,7 @@ module.exports = grunt => {
     browserify: {
       dev: {
         options: {
-          transform: ['vueify', 'babelify'],
+          transform: ['vueify', 'ejsify', 'babelify'],
           browserifyOptions: {
             debug: process.env.NODE_ENV === 'development' // enables source maps
           }

diff --git a/frontend/simple/App.vue b/frontend/simple/App.vue
diff --git a/frontend/simple/components/Button.vue b/frontend/simple/components/Button.vue
diff --git a/frontend/simple/components/Input.vue b/frontend/simple/components/Input.vue
diff --git a/frontend/simple/components/UserGroupView.vue b/frontend/simple/components/UserGroupView.vue
diff --git a/frontend/simple/components/UserProfileView.vue b/frontend/simple/components/UserProfileView.vue
diff --git a/frontend/simple/index.html b/frontend/simple/index.html
@@ -1,14 +1,44 @@
 <!doctype html>
 <html class="no-js" lang="">
-    <head>
-        <!--# include file="/head.html" -->
-    </head>
-    <body>
-        <!--[if lt IE 8]>
-            <p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
-        <![endif]-->
-        <div id="app" class="wrapper"></div>
-        <script src="/js/vendor/jquery-1.12.0.min.js"></script>
-        <script src="/simple/app.js"></script>
-    </body>
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="x-ua-compatible" content="ie=edge">
+    <title v-if="!$route.title">Group Income Simple</title>
+    <template v-else>
+      <title>{{ $route.title }}</title>
+    </template>
+    <meta name="description" content="">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <!-- TODO: should these be here? am guessing not? -->
+    <link href='//fonts.googleapis.com/css?family=Lato:300,700' rel='stylesheet' type='text/css'>
+    <link rel="stylesheet" href="/css/normalize.css">
+    <link rel="stylesheet" href="/css/main.css">
+    <script src="/js/vendor/modernizr-2.8.3.min.js"></script>
+  </head>
+  <body>
+    <!--[if lt IE 8]>
+      <p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
+    <![endif]-->
+    <div id="app" class="wrapper">
+      <header>
+        <div class="groupincome-logo">
+          <img class="black" src="/images/groupincome-logo-black.png">
+        </div>
+        <nav>
+          <ul>
+            <li><a v-link="'/new-user'">New User</a></li>
+            <li><a v-link="'/user'">User Profile</a></li>
+            <li><a v-link="'/user-group'">User Group</a></li>
+            <li><a v-link="'/new-income'">New Income</a></li>
+            <li><a v-link="'/pay-group'">Pay Group</a></li>
+            <li><a v-link="'/ejs-page'">EJS page test</a></li>
+          </ul>
+        </nav>
+      </header>
+      <div class="container">
+        <router-view></router-view>
+      </div>
+    </div>
+    <script src="/simple/app.js"></script>
+  </body>
 </html>
diff --git a/frontend/simple/js/Include.js b/frontend/simple/js/Include.js
@@ -0,0 +1,24 @@
+const _ = require('lodash')
+export default {
+  install (Vue, options) {
+    var include = function (path) {
+      console.log(`include ${path} is template? ${__dirname}`) // TODO: delete out once it works
+      // no prefix I tried works, probably b/c of browserify. Might need webpack for this to work
+      var str = require('./' + path)
+      // ejsify will return a template *function*
+      return _.isString(str) ? str : str()
+    }
+    // none of these work, at least not with browserify
+    Vue.filter('include', include)
+    Vue.component('include', {
+      template: '{{ file }}',
+      props: {
+        file: {
+          type: String,
+          required: true,
+          coerce: include
+        }
+      }
+    })
+  }
+}
diff --git a/frontend/simple/js/utils.js b/frontend/simple/js/utils.js
@@ -0,0 +1,5 @@
+// wrap to prevent fragment instances:
+// http://vuejs.org/guide/components.html#Fragment-Instance
+export function wrap (s, tag = 'div') {
+  return `<${tag}>${s}</${tag}>`
+}
diff --git a/frontend/simple/main.js b/frontend/simple/main.js
@@ -2,34 +2,40 @@ var Promise = global.Promise = require('bluebird') // see comment in backend/ind
 var superagent = require('superagent') // fix superagent so that .end() returns a promise
 superagent.Request.prototype.end = Promise.promisify(superagent.Request.prototype.end)
 
-// load components
 import Vue from 'vue'
 import Router from 'vue-router'
-// import { domain, fromNow } from './filters'
-import App from './App.vue'
-import UserProfileView from './components/UserProfileView.vue'
-import UserGroupView from './components/UserGroupView.vue'
-import NewIncomeView from './components/NewIncomeView.vue'
-import PayGroupView from './components/PayGroupView.vue'
-
-// install router
+import UserProfileView from './views/UserProfileView.vue'
+import UserGroupView from './views/UserGroupView.vue'
+import NewIncomeView from './views/NewIncomeView.vue'
+import PayGroupView from './views/PayGroupView.vue'
+import Include from './js/Include'
+import { wrap } from './js/utils'
+
+Vue.config.debug = process.env.NODE_ENV === 'development'
 Vue.use(Router)
+Vue.use(Include)
 
-// routing
 var router = new Router({
   hashbang: false,
   history: true,
   root: '/simple'
 })
 
 router.map({
-  '/': { component: UserGroupView },
-  '/new-user': { component: UserProfileView },
+  '/': { component: { template: wrap(require('./views/test.ejs')()) } },
+  '/new-user': {
+    component: UserProfileView,
+    title: 'Create User' // https://github.com/okTurtles/group-income-simple/issues/45
+  },
   '/user': { component: UserProfileView },
   '/user/:username': { component: UserProfileView },
   '/user-group': { component: UserGroupView },
   '/new-income': { component: NewIncomeView },
-  '/pay-group': { component: PayGroupView }
+  '/pay-group': { component: PayGroupView },
+  '/ejs-page': {
+    component: { template: wrap(require('./views/test.ejs')()) },
+    title: 'EJS Test Page'
+  }
 })
 
 router.beforeEach(function () {
@@ -40,17 +46,5 @@ router.redirect({
   '*': '/' // TODO: make this a 404
 })
 
-router.start(App, '#app')
-
-// alt from https://github.com/vuejs/vuex/blob/master/examples/todomvc/main.js
-/*
-import Vue from 'vue'
-import store from './vuex/store'
-import App from './components/App.vue'
-
-new Vue({
-  store, // inject store to all children
-  el: 'body',
-  components: { App }
-})
-*/
+var App = Vue.extend({})
+router.start(App, 'html') // bind to html so we can change the title and head section
diff --git a/frontend/simple/components/NewIncomeView.vue → frontend/simple/views/NewIncomeView.vue b/frontend/simple/components/NewIncomeView.vue → frontend/simple/views/NewIncomeView.vue
diff --git a/frontend/simple/components/PayGroupView.vue → frontend/simple/views/PayGroupView.vue b/frontend/simple/components/PayGroupView.vue → frontend/simple/views/PayGroupView.vue