Javascript refactoring, add search field to index

.eslintrc

@@ -0,0 +1,14 @@
+{
+  "root": true,
+  "extends": "airbnb",
+  "globals": {
+    "wp": true
+  },
+  "env": {
+    "amd": true,
+    "browser": true,
+    "jquery": true,
+    "node": true
+  },
+  "parser": "babel-eslint"
+}

.styleci.yml

@@ -0,0 +1,34 @@
+preset: laravel
+
+risky: true
+
+enabled:
+  - unalign_double_arrow
+  - combine_consecutive_unsets
+  - concat_with_spaces
+  - dir_constant
+  - ereg_to_preg
+  - linebreak_after_opening_tag
+  - modernize_types_casting
+  - no_blank_lines_before_namespace
+  - no_empty_comment
+  - no_php4_constructor
+  - no_short_echo_tag
+  - no_useless_else
+  - ordered_class_elements
+  - ordered_imports
+  - php_unit_construct
+  - php_unit_dedicate_assert
+  - php_unit_strict
+  - phpdoc_order
+  - phpdoc_property
+  - phpdoc_separation
+  - random_api_migration
+  - semicolon_after_instruction
+  - strict_comparison
+  - strict_param
+
+disabled:
+  - concat_without_spaces
+  - single_blank_line_before_namespace
+  - not_operator_with_successor_space

app/Providers/AppServiceProvider.php

@@ -13,9 +13,6 @@ class AppServiceProvider extends ServiceProvider
      */
     public function boot()
     {
-        Action::hook('the_title', function ($title) {
-            return 'Koselig - ' . $title;
-        });
     }
 
     /**

public/build/rev-manifest.json

@@ -1,4 +1,4 @@
 {
   "css/app.css": "css/app-7af4a9b9dd.css",
-  "js/app.js": "js/app-a09bb827c1.js"
+  "js/app.js": "js/app-b10bd0110d.js"
 }

resources/assets/js/app.es6

@@ -1,20 +1,34 @@
-
 /**
  * First we will load all of this project's JavaScript dependencies which
  * include Vue and Vue Resource. This gives a great starting point for
  * building robust, powerful web applications using Vue and Laravel.
  */
+
 import './bootstrap.es6';
 
+/**
+ * Setup the routes of the application to allow for class-based
+ * controllers. CommonController is always fired regardless of page classes,
+ * class names should be the camel cased name, ie. post-25 -> Post25.
+ */
+
+import Router from './util/Router.es6';
+import CommonController from './controllers/CommonController.es6';
+import PostController from './controllers/PostController.es6';
+
+document.addEventListener('DOMContentLoaded', () => new Router([
+    new CommonController,
+    new PostController
+]).loadEvents());
+
 /**
  * Next, we will create a fresh Vue application instance and attach it to
  * the body of the page. From here, you may begin adding components to
  * the application, or feel free to tweak this setup for your needs.
  */
 
-Vue.component('example', require('./components/Example.vue'));
-Vue.component('rabbit', require('./components/Rabbit.vue'));
+// Vue.component('example', require('./components/Example.vue'));
 
-const app = new Vue({
-    el: '#app'
-});
+// const app = new Vue({
+//    el: '#app'
+// });

resources/assets/js/controllers/CommonController.es6

@@ -0,0 +1,13 @@
+/**
+ * This controller is fired on every pageload.
+ */
+export default class CommonController {
+    init() {
+
+    }
+
+    finalize() {
+
+    }
+
+}

resources/assets/js/controllers/PostController.es6

@@ -0,0 +1,13 @@
+/**
+ * This controller is fired on post pageload.
+ */
+export default class PostController {
+    init() {
+
+    }
+
+    finalize() {
+
+    }
+
+}

resources/assets/js/util/Router.es6

@@ -0,0 +1,36 @@
+import _ from 'lodash';
+
+export default class Router {
+    constructor(routes) {
+        this.routes = Object.assign(...routes.map(d => ({ [d.constructor.name]: d })));
+    }
+
+    fire(route, fn = 'init', args = []) {
+        const fire = route !== '' && this.routes[route]
+            && typeof this.routes[route][fn] === 'function';
+
+        if (fire) {
+            this.routes[route][fn](...args);
+        }
+    }
+
+    loadEvents() {
+        // Fire common init JS
+        this.fire('CommonController');
+
+        // Fire page-specific init JS, and then finalize JS
+        document.body.className
+            .split(/\s+/g)
+            .map(_.camelCase)
+            .map(_.upperFirst)
+            .map((v) => v.concat('Controller'))
+            .forEach((className) => {
+                console.log(className);
+                this.fire(className);
+                this.fire(className, 'finalize');
+            });
+
+        // Fire common finalize JS
+        this.fire('CommonController', 'finalize');
+    }
+}

resources/views/partials/search.blade.php

@@ -0,0 +1,10 @@
+<form role="search" method="get" class="search-form" action="{{ url('/') }}">
+    <div class="input-group col-md-4 pull-right">
+        <input type="search" class="search-field form-control" placeholder="Search &hellip;" value="{{ Request::get('s') }}" name="s">
+        <span class="input-group-btn">
+            <button class="btn btn-default" type="button">Search</button>
+        </span>
+    </div>
+</form>
+
+<div class="clearfix" style="margin-bottom: 10px;"></div>

resources/views/post.blade.php

@@ -21,6 +21,7 @@
                 </div>
                 <div class="panel-footer">
                     - <a href="{{ $post->author->link() }}">{{ $post->author->display_name }}</a>
+                    ({{ $post->categories->map(function ($a) { return $a->name; })->implode(', ') }})
                 </div>
             </div>
 
@@ -37,6 +38,8 @@
                     </div>
                 </div>
             @endunless
+
+            {!! Koselig\Models\Post::navigation() !!}
         </div>
     </div>
 @stop

resources/views/templates/main.blade.php

@@ -3,7 +3,7 @@
     <head>
         <meta charset="utf-8">
         <meta http-equiv="X-UA-Compatible" content="IE=edge">
-        <meta name="viewport" content="width=device-width, initial-scale=1">
+        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
         @wphead
 
         <!-- CSRF Token -->

resources/views/welcome.blade.php

@@ -4,12 +4,13 @@
     <div class="container">
         <div class="col-md-8 col-md-offset-2">
             <div class="header">
-                <rabbit></rabbit>
                 <h1>It's working - congratulations!</h1>
             </div>
 
             <div class="clearfix"></div>
 
+            @include('partials.search')
+
             <div class="panel panel-default">
                 <div class="panel-heading">Welcome to Koselig</div>
                 <div class="panel-body">
@@ -19,16 +20,22 @@
                 </div>
             </div>
 
-            <div class="panel panel-default">
-                <div class="panel-heading">Posts</div>
-                <div class="panel-body">
-                    <ul>
-                        @loop
-                            <li><a href="{{ $loop->link }}">{{ $loop->title }}</a> - {{ $loop->author->display_name }}</li>
-                        @endloop
-                    </ul>
+            @if(Query::hasPosts())
+                <div class="panel panel-default">
+                    <div class="panel-heading">Posts</div>
+                    <div class="panel-body">
+                        <ul>
+                            @loop
+                                <li><a href="{{ $loop->link }}">{{ $loop->title }}</a> - {{ $loop->author->display_name }}</li>
+                            @endloop
+                        </ul>
+                    </div>
                 </div>
-            </div>
+            @else
+                <div class="alert alert-warning">
+                    Sorry, no results were found!
+                </div>
+            @endif
         </div>
     </div>
 @stop