GH #15 add 404 page template

Localize wpApiSettings to use with cookie auth
Add style for page not found

functions.php

@@ -7,17 +7,21 @@ function rest_theme_scripts() {
 	$base_url  = esc_url_raw( home_url() );
 	$base_path = rtrim( parse_url( $base_url, PHP_URL_PATH ), '/' );
 	if ( defined( 'RT_VUE_DEV' ) && RT_VUE_DEV ) {
-		wp_enqueue_script( 'rest-theme-vue', 'http://localhost:8081/dist/build.js', array( 'jquery', 'wp-api' ), '1.0.0', true );
+		wp_enqueue_script( 'rest-theme-vue', 'http://localhost:8080/dist/build.js', array( 'jquery', 'wp-api' ), '1.0.0', true );
 	} else {
 		wp_enqueue_script( 'rest-theme-vue', get_template_directory_uri() . '/dist/build.js', array( 'jquery', 'wp-api' ), '1.0.0', true );
 	}
 	wp_localize_script( 'rest-theme-vue', 'rtwp', array(
 		'root'      => esc_url_raw( rest_url() ),
 		'base_url'  => $base_url,
 		'base_path' => $base_path ? $base_path . '/' : '/',
-		'nonce'     => wp_create_nonce( 'wp_rest' ),
 		'site_name' => get_bloginfo( 'name' ),
 	) );
+
+	wp_localize_script( 'wp-api', 'wpApiSettings', array(
+		'root' => esc_url_raw( rest_url() ),
+		'nonce' => wp_create_nonce( 'wp_rest' ),
+	) );
 }
 
 add_action( 'wp_enqueue_scripts', 'rest_theme_scripts' );

sass/_site_layout.scss

@@ -15,4 +15,7 @@ body{
 /* .slide-fade-leave-active for <2.1.8 */ {
   transform: translateX(10px);
   opacity: 0;
+}
+.error-not-found{
+	padding-top: rem-calc(20);
 }

src/components/404.vue

@@ -0,0 +1,40 @@
+<template>
+	<div class="row">
+		<div class="column medium-12 small-12">
+		<section class="error-not-found">
+			<header>
+				<h1>
+					Oops! That page can’t be found.
+				</h1>
+			</header>
+			<div class="page-content">
+				<p>
+					It looks like nothing was found at this location.
+				</p>
+			</div>
+		</section>
+		</div>
+	</div>
+</template>
+
+<script>
+
+export default {
+
+  mounted: function () {
+
+  },
+  data() {
+      return {
+
+      }
+  },
+  methods: {
+
+  }
+}
+</script>
+
+<style>
+
+</style>

src/main.js

@@ -18,7 +18,9 @@ Vue.component('theme-header', header)
 import footer from './components/theme-footer.vue'
 Vue.component('theme-footer', footer)
 import page from './components/page.vue'
-
+Vue.component( 'page', page )
+import notFound from './components/404.vue'
+Vue.component( 'notFound', notFound );
 //Create main vue component
 var App = Vue.extend({
 	template: '<div id="page" class="hfeed site"><theme-header></theme-header>' +
@@ -43,6 +45,7 @@ const router = new VueRouter({
 		{ path: '/blog/:name', name:'post', component: post },
 		{ path: '/page/:name', name:'page', component: page },
 		{ path: '/', redirect: '/blog' },
+		{ path: '*', component: notFound },
 
 	]
 });

style.css

@@ -666,7 +666,7 @@ sub {
 		Fields
 ---------------------------*/input[type="text"],input[type="email"],input[type="url"],input[type="password"],input[type="search"],input[type="tel"],textarea {color: #666;border: 1px solid #ccc;border-radius: 0.1875rem;font-family: Roboto, sans-serif;line-height: 1.5;}input[type="text"]:focus,input[type="email"]:focus,input[type="url"]:focus,input[type="password"]:focus,input[type="search"]:focus,input[type="tel"]:focus,textarea:focus {color: #111;}input[type="text"],input[type="email"],input[type="url"],input[type="password"],input[type="search"] {padding: 3px;}select {color: #404040;font-family: Roboto, sans-serif;font-size: 16px;line-height: 1.5;}textarea {max-width: 100%;line-height: 1.5;outline: none;background: #fafafa;box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.1) inset;}/*--------------------------------------------------------------
 # Site Layout
---------------------------------------------------------------*/body {text-rendering: optimizeLegibility;-webkit-font-smoothing: antialiased;background-color: #FFFFFF;}/* Enter and leave animations can use different *//* durations and timing functions.              */.slide-fade-enter-active {transition: all .3s ease;}.slide-fade-leave-active {transition: all 0.3s cubic-bezier(1, 0.5, 0.8, 1);}.slide-fade-enter,.slide-fade-leave-to {transform: translateX(10px);opacity: 0;}/*--------------------------------------------------------------
+--------------------------------------------------------------*/body {text-rendering: optimizeLegibility;-webkit-font-smoothing: antialiased;background-color: #FFFFFF;}/* Enter and leave animations can use different *//* durations and timing functions.              */.slide-fade-enter-active {transition: all .3s ease;}.slide-fade-leave-active {transition: all 0.3s cubic-bezier(1, 0.5, 0.8, 1);}.slide-fade-enter,.slide-fade-leave-to {transform: translateX(10px);opacity: 0;}.error-not-found {padding-top: 1.25rem;}/*--------------------------------------------------------------
 # Navigation
 --------------------------------------------------------------*/#site-navigation {clear: both;display: block;float: left;width: 100%;min-height: 50px;}#site-navigation ul {list-style: none;margin: 0;padding-left: 0;text-align: center;height: 50px;padding: 0px;}#site-navigation ul ul {float: left;position: absolute;top: 2.1875rem;left: -999em;z-index: 99999;background: #FFFFFF;}#site-navigation ul ul ul {left: -999rem;top: 0;}#site-navigation ul ul li:hover > ul,#site-navigation ul ul li.focus > ul {left: 100%;}#site-navigation ul ul a {width: 200px;}#site-navigation ul ul:hover > a,#site-navigation ul ul.focus > a {color: #a9a8b5;}#site-navigation ul li:hover > ul,#site-navigation ul li.focus > ul {left: auto;}#site-navigation li {display: inline-block;position: relative;height: 100%;}#site-navigation li:hover > a,#site-navigation li.focus > a {color: #a9a8b5;}#site-navigation a {display: block;text-decoration: none;padding-right: 0.625rem;height: 100%;line-height: 50px;padding: 0 1.5rem;}.site-name,.menu-toggle {line-height: 50px;}.site-name {display: block;}/*--------------------------------------------------------------
 # Header