Merge branch 'vuejs'

assets/js/app.js

@@ -1,9 +1,8 @@
-(function ($) {
+window.Vue = require('vue');
-    $('html.no-js').addClass('js').removeClass('no-js');
 
-    $('.nav-toggle').on('click', function (e) {
+import Navbar from './components/Navbar';
-        e.preventDefault();
 
-        $(this).siblings('.nav-right').toggleClass('is-active');
+const app = new Vue({
-    });
+  el: '#app',
-})(jQuery);
+  components: { Navbar },
+})

assets/js/components/Navbar.vue

@@ -0,0 +1,80 @@
+<template>
+    <div class="navbar border-bottom border-b border-grey-light mb-6" role="banner">
+        <header class="container mx-auto px-4">
+            <div class="sm:flex">
+                <div class="w-full sm:w-1/3 lg:w-1/4 flex items-center">
+                    <div class="w-3/4 py-5">
+                        <a href="/" title="Home" class="text-grey-darkest no-underline hover:underline">
+                            {{ siteName }}
+                        </a>
+                    </div>
+
+                    <div class="w-1/4 text-right sm:hidden">
+                        <button type="button" class="nav-toggle appearance-none" @click="mobileNavHidden = !mobileNavHidden">
+                            <svg class="fill-current text-grey-dark w-6 h-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M16.4 9H3.6c-.552 0-.6.447-.6 1 0 .553.048 1 .6 1h12.8c.552 0 .6-.447.6-1 0-.553-.048-1-.6-1zm0 4H3.6c-.552 0-.6.447-.6 1 0 .553.048 1 .6 1h12.8c.552 0 .6-.447.6-1 0-.553-.048-1-.6-1zM3.6 7h12.8c.552 0 .6-.447.6-1 0-.553-.048-1-.6-1H3.6c-.552 0-.6.447-.6 1 0 .553.048 1 .6 1z"/></svg>
+                        </button>
+                    </div>
+                </div>
+
+                <nav
+                    class="w-full -mx-4 mt-px sm:mt-0 sm:mx-0 block sm:flex sm:flex-wrap sm:flex-1 sm:justify-end bg-white absolute sm:relative border-b sm:border-b-0"
+                    :class="{hidden: mobileNavHidden}"
+                    role="navigation"
+                >
+                    <a
+                        v-for="item in navItems"
+                        :href="item.href"
+                        class="block p-4 border-l-3 sm:border-l-0 sm:border-b-2 border-transparent hover:border-grey-light sm:ml-4 sm:mr-0 sm:p-0 hover:no-underline"
+                        :class="{
+                            'border-blue hover:border-blue': pageUrl.match(new RegExp(item.pattern)),
+                        }"
+                    >
+                        <span class="flex items-center h-full">
+                            {{ item.title }}
+                        </span>
+                    </a>
+                </nav>
+            </div>
+        </header>
+    </div>
+</template>
+
+<script>
+  export default {
+    props: ['siteName', 'pageUrl'],
+
+    data() {
+      return {
+        mobileNavHidden: true,
+
+        navItems: [
+          {
+            title: 'About',
+            href: '/',
+            pattern: '^/.$',
+          },
+          {
+            title: 'Talks',
+            href: '/talks',
+            pattern: '^/talks/?',
+          },
+          {
+            title: 'Blog',
+            href: '/blog',
+            pattern: '^/blog/?',
+          },
+          {
+            title: 'Book',
+            href: '/test-driven-drupal',
+            pattern: '^/test-driven-drupal/?$',
+          },
+          {
+            title: 'Contact',
+            href: '/contact',
+            pattern: '^/contact/?',
+          }
+        ]
+      }
+    }
+  }
+</script>

package.json

@@ -13,11 +13,11 @@
     "cross-env": "^5.1.5",
     "font-awesome": "^4.7.0",
     "highlightjs": "^9.10.0",
-    "jquery.2": "^1.0.0",
     "laravel-mix": "^2.1.11",
     "laravel-mix-purgecss": "^2.1.2",
     "laravel-mix-tailwind": "^0.1.0",
     "tailwindcss": "^0.6",
-    "tailwindcss-visuallyhidden": "^1.0.1"
+    "tailwindcss-visuallyhidden": "^1.0.1",
+    "vue": "^2.5.17"
   }
 }

source/_layouts/app.html.twig

@@ -35,13 +35,6 @@
             {% block body %}{% endblock %}
         </div>
 
-        <script>
-            document.querySelector('.nav-toggle').onclick = function() {
-                document.querySelector('.navbar nav').classList.toggle('hidden').toggle('block');
-                return false;
-            };
-        </script>
-
         {% if site.google_analytics_tracking_id %}
             <script>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) })(window,document,'script','//www.google-analytics.com/analytics.js','ga'); ga('create', '{{ site.google_analytics_tracking_id }}', 'auto'); ga('send', 'pageview');</script>
         {% endif %}

source/_layouts/default.html.twig

@@ -1,7 +1,7 @@
 {% extends 'app' %}
 
 {% block body %}
-    {% include 'navbar' %}
+    <navbar site-name="{{ site.title }}" page-url="{{ page.url }}"></navbar>
 
     <div class="container mx-auto px-4">
         <div class="md:flex -mx-4">

source/_partials/nav-item.html.twig

@@ -1,5 +0,0 @@
-<a href="{{ href }}" class="block p-4 border-l-3 sm:border-l-0 sm:border-b-2 sm:ml-4 sm:mr-0 sm:p-0 hover:no-underline {{ page.url matches '#' ~ pattern ~ '#' ? 'border-blue' : 'border-transparent hover:border-grey-light' }} {{ loop.first ? 'border-t border-grey-lighter sm:border-t-0 sm:border-transparent' }}">
-    <span class="flex items-center h-full">
-        {{- title -}}
-    </span>
-</a>

source/_partials/navbar.html.twig

@@ -1,51 +0,0 @@
-<div class="navbar border-bottom border-b border-grey-light mb-6" role="banner">
-    <header class="container mx-auto px-4">
-        <div class="sm:flex">
-            <div class="w-full sm:w-1/3 lg:w-1/4 flex items-center">
-                <div class="w-3/4 py-5">
-                    <a href="/" title="Home" class="text-grey-darkest no-underline hover:underline">
-                        {{ site.title }}
-                    </a>
-                </div>
-
-                <div class="w-1/4 text-right sm:hidden">
-                    <button type="button" class="nav-toggle appearance-none">
-                        <svg class="fill-current text-grey-dark w-6 h-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M16.4 9H3.6c-.552 0-.6.447-.6 1 0 .553.048 1 .6 1h12.8c.552 0 .6-.447.6-1 0-.553-.048-1-.6-1zm0 4H3.6c-.552 0-.6.447-.6 1 0 .553.048 1 .6 1h12.8c.552 0 .6-.447.6-1 0-.553-.048-1-.6-1zM3.6 7h12.8c.552 0 .6-.447.6-1 0-.553-.048-1-.6-1H3.6c-.552 0-.6.447-.6 1 0 .553.048 1 .6 1z"/></svg>
-                    </button>
-                </div>
-            </div>
-
-            <nav class="hidden block w-full -mx-4 sm:w-2/3 lg:w-3/4 sm:flex sm:flex-wrap sm:justify-end bg-white absolute sm:relative mt-px border-b sm:border-b-0" role="navigation">
-                {% include 'nav-item' with {
-                    title: 'About',
-                    href: '/',
-                    pattern: '^/.$',
-                } %}
-
-                {% include 'nav-item' with {
-                    title: 'Talks',
-                    href: '/talks',
-                    pattern: '^/talks/?',
-                } %}
-
-                {% include 'nav-item' with {
-                    title: 'Blog',
-                    href: '/blog',
-                    pattern: '^/blog/?',
-                } %}
-
-                {% include 'nav-item' with {
-                    title: 'Book',
-                    href: '/test-driven-drupal',
-                    pattern: '^/test-driven-drupal/?$',
-                } %}
-
-                {% include 'nav-item' with {
-                    title: 'Contact',
-                    href: '/contact',
-                    pattern: '^/contact/?',
-                } %}
-            </nav>
-        </div>
-    </header>
-</div>

source/test-driven-drupal.md

@@ -42,7 +42,7 @@ If you have questions or would like to suggest something for me to include in th
 Enter your email address to subscribe to the Test Driven Drupal mailing list.
 </div>
 
-{% include 'pages/book/signup-form' %}
+<!-- {% include 'pages/book/signup-form' %} -->
 
 [0]: {{site.url}}/blog/tags/testing
 [1]: {{site.url}}/talks/tdd-test-driven-drupal

webpack.mix.js

@@ -5,15 +5,15 @@ require('laravel-mix-tailwind');
 
 mix.disableNotifications()
     .sass('assets/sass/app.sass', 'source/dist/css')
-    .combine([
+    .js([
-        'node_modules/jquery/dist/jquery.js',
+        // 'node_modules/highlightjs/highlight.pack.js',
-        'node_modules/highlightjs/highlight.pack.js',
         'assets/js/app.js',
     ], 'source/dist/js/all.js')
     .copyDirectory('node_modules/font-awesome/fonts', 'source/dist/fonts')
     .tailwind()
     .purgeCss({
         globs: [
+            path.join(__dirname, 'assets/js/**/*.{js,vue}'),
             path.join(__dirname, 'output_*/**/*.html'),
         ],
         whitelistPatterns: [/language/, /hljs/],