Merge branch 'develop'

CHANGELOG.md

@@ -1,10 +1,20 @@
+# v0.2.0
+## 02/26/2017
+
+1. [](#improved)
+    * Add [vuejs](http://vuejs.org/)
+    * Add vue example component (`/js/vue/components/Example.vue`)
+    * Support `.vue` files
+2. [](#bugfix)
+    * Remove footer from item template
+
 # v0.1.9
 ## 02/24/2017
 
 1. [](#improved)
-    * Removed bower (use yarn instead) [PR #3](https://github.com/robbinfellow/haywire-grav/pull/3)
-    * Modified gulp imports [PR #3](https://github.com/robbinfellow/haywire-grav/pull/3)
-    * Improved `item.yaml` template
+    * Remove bower (use yarn instead) [PR #3](https://github.com/robbinfellow/haywire-grav/pull/3)
+    * Modify gulp imports [PR #3](https://github.com/robbinfellow/haywire-grav/pull/3)
+    * Improve `item.yaml` template
 2. [](#bugfix)
     * Gulp should require jquery first [PR #3](https://github.com/robbinfellow/haywire-grav/pull/3)
 

README.md

@@ -2,7 +2,7 @@
 
 # Boilerplate/theme for getgrav CMS
 
-Haywire is a modern starter theme/boilerplate for [Grav](https://getgrav.org/). The idea behind the theme is to help developers get started quickly on their new getgrav projects using modern frameworks and tools such as [yarn](https://yarnpkg.com/), [laravel-elixir](https://laravel.com/docs/5.3/elixir), [bootstrap](https://github.com/twbs/bootstrap-sass).
+Haywire is a modern starter theme for [Grav](https://getgrav.org/). The idea behind the theme is to help developers get started quickly on their new grav projects using modern frameworks and tools such as [yarn](https://yarnpkg.com/), [laravel-elixir](https://laravel.com/docs/5.3/elixir), [vuejs](http://vuejs.org/), [bootstrap](https://github.com/twbs/bootstrap-sass).
 
 **_It is recommended that you install the [admin-plugin package](https://github.com/getgrav/grav-plugin-admin) when using this theme._**
 
@@ -16,6 +16,7 @@ Haywire is a modern starter theme/boilerplate for [Grav](https://getgrav.org/).
 * Bootstrap-sass
 * Laravel-elixir
 * Gulp
+* Vuejs
 
 ## Installation / Usage
 

_demo/pages/01.home/default.md

@@ -4,4 +4,4 @@ visible: true
 ---
 
 # Hello, world!
-> Haywire is a modern starter theme for Grav developers. The idea behind the theme is to help developers get up and running quickly on new grav projects using modern frameworks and tools such as yarn, laravel-elixir, bootstrap.
+> Haywire is a modern starter theme for [Grav](https://getgrav.org/). The idea behind the theme is to help developers get started quickly on their new grav projects using modern frameworks and tools such as [yarn](https://yarnpkg.com/), [laravel-elixir](https://laravel.com/docs/5.3/elixir), [vuejs](http://vuejs.org/), [bootstrap](https://github.com/twbs/bootstrap-sass).

blueprints.yaml

@@ -1,14 +1,14 @@
 name: Haywire
-version: 0.1.9
-description: Starter theme/boilerplate for developers to get up and running quickly on new projects using modern frameworks and tools such as yarn, laravel-elixir & bootstrap-sass.
+version: 0.2.0
+description: Starter theme/boilerplate for developers to get up and running quickly on new projects using modern frameworks and tools such as yarn, laravel-elixir, vuejs & bootstrap-sass.
 icon: empire
 author:
   name: Robbin Johansson
   email: robbinfellow@gmail.com
   url: http://haywire.me
 homepage: https://github.com/robbinfellow/haywire-grav
 demo: http://haywire.me/haywire-grav-demo/
-keywords: haywire, boilerplate, starter-theme, yarn, laravel-elixir, bootstrap-sass, gulp
+keywords: haywire, boilerplate, starter-theme, vuejs, vue, yarn, laravel-elixir, bootstrap-sass, gulp
 bugs: https://github.com/robbinfellow/haywire-grav/issues
 docs: https://github.com/robbinfellow/haywire-grav/blob/master/README.md
 license: MIT

gulpfile.js

@@ -1,5 +1,7 @@
 const elixir = require('laravel-elixir');
 
+require('laravel-elixir-vue-2');
+
 var vendorScripts = [
     './node_modules/jquery/dist/jquery.js',
     './node_modules/bootstrap-sass/assets/javascripts/bootstrap.js'
@@ -9,6 +11,10 @@ var mainScripts = [
     './js/_main.js'
 ];
 
+var vueScripts = [
+    './js/vue/app.js'
+];
+
 var mainSass = './scss/main.scss';
 
 elixir.config.publicDir = './dist/';
@@ -18,4 +24,5 @@ elixir(function(mix) {
 
     mix.scripts(vendorScripts, './dist/js/vendor.js');
     mix.scripts(mainScripts, './dist/js/main.js');
+    mix.webpack(vueScripts, './dist/js/vue.js');
 });

js/_main.js

@@ -1,3 +1,3 @@
 $().ready(function() {
-// Custom jQuery
+	// Happy coding! :)
 });

js/vue/app.js

@@ -0,0 +1,7 @@
+require('./bootstrap');
+
+Vue.component('example', require('./components/Example.vue'));
+
+const app = new Vue({
+    el: '#app'
+});

js/vue/bootstrap.js

@@ -0,0 +1,16 @@
+window._ = require('lodash');
+
+/**
+ * We'll load jQuery and the Bootstrap jQuery plugin which provides support
+ * for JavaScript based Bootstrap features such as modals and tabs. This
+ * code may be modified to fit the specific needs of your application.
+ */
+//window.$ = window.jQuery = require('jquery');
+
+/**
+ * Vue is a modern JavaScript library for building interactive web interfaces
+ * using reactive data binding and reusable components. Vue's API is clean
+ * and simple, leaving you to focus on building your next great project.
+ */
+window.Vue = require('vue');
+require('vue-resource');

js/vue/components/Example.vue

@@ -0,0 +1,40 @@
+<template>
+<div class="row">
+    <div class="col-sm-12">
+        <div class="panel panel-default">
+            <div class="panel-heading">Example Component</div>
+
+            <div v-if="myVar" class="panel-body">
+                I'm an example vue-component!
+            </div>
+            <div v-else class="panel-body">
+                {{msg}}
+            </div>
+        </div>
+    </div>
+</div>
+</template>
+
+<script>
+    export default {
+        mounted() {
+            this.myExample();
+            console.log('Component mounted.')
+        },
+
+        data: function(){
+            return {
+                myVar: false,
+                msg: 'This is an error!'
+            }
+        },
+
+        // props: ['content'],
+
+        methods: {
+            myExample(){
+               this.myVar = true; 
+            }
+        }
+    }
+</script>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "haywire",
-  "version": "0.1.9",
+  "version": "0.2.0",
   "main": "index.js",
   "repository": "https://github.com/robbinfellow/haywire-grav.git",
   "author": "Robbin Johansson <robbinfellow@gmail.com>",
@@ -11,6 +11,11 @@
     "gulp": "^3.9.1",
     "jquery": "^3.1.1",
     "laravel-elixir": "^6.0.0-15",
-    "laravel-elixir-browserify-official": "^0.1.3"
+    "laravel-elixir-browserify-official": "^0.1.3",
+    "laravel-elixir-vue-2": "^0.3.0",
+    "laravel-elixir-webpack-official": "^1.0.10",
+    "lodash": "^4.17.4",
+    "vue": "^2.1.10",
+    "vue-resource": "^1.2.0"
   }
 }

scss/template/_footer.scss

@@ -1,4 +1,5 @@
 #footer {
 	background: #f3f3f3;
-	margin-top: 30px;
+	margin-top: 50px;
+	padding: 50px 0px;
 }

templates/default.html.twig

@@ -10,43 +10,46 @@
 		</div>
 	</div>
 
-			<div class="row posts">
+	{# Display example vue-component #}
+	<example></example>
 
-				{% for post in page.find('/blog').children.order('date', 'desc').slice(0, 3) %}
+	<div class="row posts">
 
-					<div class="col-sm-12 post npl npr">
+		{% for post in page.find('/blog').children.order('date', 'desc').slice(0, 3) %}
 
-							<div class="col-md-9 post-content">
+			<div class="col-sm-12 post npl npr">
 
-								<h3 class="mtxs"><a href="{{ base_url }}{{ post.route }}">{{ post.title }}</a></h3>
-								{% if post.summary %}
-									<div class="summary">
-										{{ post.summary(320) }}
-									</div>
-								{% else %}
-									<div class="summary">
-										<em>This post has no summary!</em>
-									</div>
-								{% endif %}
+				<div class="col-md-9 post-content">
 
-							</div>
+					<h3 class="mtxs"><a href="{{ base_url }}{{ post.route }}">{{ post.title }}</a></h3>
+					{% if post.summary %}
+						<div class="summary">
+							{{ post.summary(320) }}
+						</div>
+					{% else %}
+						<div class="summary">
+							<em>This post has no summary!</em>
+						</div>
+					{% endif %}
 
-							<div class="col-md-3 paxs">
+				</div>
 
-								<a href="{{ base_url }}{{ post.route }}">
-									{% if post.header.featured_image %}
-										<img width="100%" src="{{ base_url }}/blog/{{ post.folder }}/{{ post.header.featured_image }}">
-									{% else %}
-										<img width="100%" src="https://unsplash.it/800/">
-									{% endif %}
-								</a>
+				<div class="col-md-3">
 
-							</div>
+					<a href="{{ base_url }}{{ post.route }}">
+						{% if post.header.featured_image %}
+							<img width="100%" src="{{ base_url }}/blog/{{ post.folder }}/{{ post.header.featured_image }}">
+						{% else %}
+							<img width="100%" src="https://unsplash.it/800/">
+						{% endif %}
+					</a>
 
-						</div>
-
-				{% endfor %}
+				</div>
 
 			</div>
+
+		{% endfor %}
+
+	</div>
 
 {% endblock %}

templates/partials/base.html.twig

@@ -8,6 +8,9 @@
 </head>
 <body class="{{ page.header.body_classes }}">
 
+{# Wrapping our content in #app to allow vue components #}
+<div id="app">
+
     <div class="container">
 
         <div class="col-sm-8 col-sm-offset-2">
@@ -18,13 +21,23 @@
 
             {% block content %}{% endblock %}
 
-            {% block footer %}
-                {% include 'partials/footer.html.twig' %}
-            {% endblock %}
-
         </div>
 
     </div>
 
+    {% if page.template != 'item' %}
+
+        {% block footer %}
+            {% include 'partials/footer.html.twig' %}
+        {% endblock %}
+
+    {% endif %}
+
+</div>
+
+{% block bottom %}
+    {{ assets.js('bottom') }}
+{% endblock %}
+
 </body>
 </html>

templates/partials/footer.html.twig

@@ -1,5 +1,5 @@
-<div class="row">
-	<footer id="footer" class="col-sm-12 pal mtl mbxl">
+<footer id="footer" class="text-center">
+	<div class="container">
 		/* Footer content goes here */
-	</footer>
-</div>
+	</div>
+</footer>

templates/partials/head.html.twig

@@ -13,5 +13,6 @@
 {% block javascripts %}
     {% do assets.addJs('theme://dist/js/vendor.js', 100) %}
     {% do assets.addJs('theme://dist/js/main.js', 10) %}
+    {% do assets.addJs('theme://dist/js/vue.js', {group: 'bottom'}) %}
 {% endblock %}
 {{ assets.js() }}

templates/partials/header.html.twig

@@ -4,7 +4,7 @@
     </div>
     <div id="navbar">
         {% block header_navigation %}
-        {% include 'partials/navigation.html.twig' %}
+        	{% include 'partials/navigation.html.twig' %}
         {% endblock %}
     </div>
 </header>