From ecf486b5084424df71a44c77a195c8acba18feed Mon Sep 17 00:00:00 2001
From: Jonathan Reinink <jonathan@reinink.ca>
Date: Thu, 26 Oct 2017 08:43:30 -0400
Subject: [PATCH] Integrate poor man's Turbolinks with Vue

---
 docs/source/_layouts/master.blade.php | 76 ++++-----------------------
 docs/source/js/nav.js                 | 55 +++++++++++++++++++
 2 files changed, 64 insertions(+), 67 deletions(-)
 create mode 100644 docs/source/js/nav.js

diff --git a/docs/source/_layouts/master.blade.php b/docs/source/_layouts/master.blade.php
index ff1d8cb7e..cba9cb55a 100644
--- a/docs/source/_layouts/master.blade.php
+++ b/docs/source/_layouts/master.blade.php
@@ -14,73 +14,12 @@
         </style>
         {{-- <link rel="stylesheet" href="https://use.typekit.net/iqy1okj.css"> --}}
         <link rel="stylesheet" href="/css/main.css">
-        <script type="text/javascript" src="/js/prism.js" defer=""></script>
         <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
-        <script type="text/javascript">
-            $.when($.ready).then(function() {
-              $('.nav').on('click', 'a', function (event) {
+        <script src="/js/nav.js"></script>
 
-                if (event.metaKey) {
-                    return
-                }
-
-                // Prevent following link
-                event.preventDefault()
-
-                // Get desired link
-                var href = $(this).attr('href')
-
-                // Make Ajax request to get the page content
-                $.ajax({
-                  method: 'GET',
-                  url: href,
-                  cache: false,
-                  dataType: 'html',
-                }).done(function(html) {
-
-                  // Parse the HTML response
-                  var title = $(html).filter('title').text()
-                  var nav = $(html).find('.nav').html()
-                  var content = $(html).find('.content').html()
-
-                  // Update the page
-                  $('title').text(title)
-                  $('.nav').html(nav)
-                  $('.content').html(content)
-
-                  // Rerun PrismJS
-                  Prism.highlightAll();
-
-                  // Scroll to the top of the page
-                  $(document).scrollTop(0)
-
-                  // Add page load to brower history
-                  window.history.pushState({
-                    "title": title,
-                    "nav": $(html).find('.nav').html(),
-                    "content": $(html).find('.content').html()
-                  }, '', href)
-                })
-              })
-
-              // Load page history (for back/forward nav)
-              window.onpopstate = function(e) {
-                  if(e.state){
-
-                    // Update the page
-                    $('title').text(e.state.title)
-                    $('.nav').html(e.state.nav)
-                    $('.content').html(e.state.content)
-
-                    // Rerun PrismJS
-                    Prism.highlightAll();
-                  }
-              };
-            });
-        </script>
     </head>
     <body class="font-sans font-normal text-slate-darker leading-normal">
-        <div id="app" class="min-h-screen">
+        <div class="min-h-screen">
             <div class="fixed pin-y pin-l bg-smoke-light w-full max-w-xs flex-none overflow-y-scroll border-r-2 border-smoke">
                 <div class="text-center border-b border-smoke p-8">
                     <svg class="h-8 mr-4" viewBox="0 0 60 36" xmlns="http://www.w3.org/2000/svg"><defs><linearGradient x1="0%" y1="0%" y2="100%" id="a"><stop stop-color="#2383AE" offset="0%"></stop><stop stop-color="#6DD7B9" offset="100%"></stop></linearGradient></defs><path d="M15 12c2-8 7-12 15-12 12 0 13.5 9 19.5 10.5 4 1 7.5-.5 10.5-4.5-2 8-7 12-15 12-12 0-13.5-9-19.5-10.5-4-1-7.5.5-10.5 4.5zM0 30c2-8 7-12 15-12 12 0 13.5 9 19.5 10.5 4 1 7.5-.5 10.5-4.5-2 8-7 12-15 12-12 0-13.5-9-19.5-10.5-4-1-7.5.5-10.5 4.5z" fill="url(#a)" fill-rule="evenodd"></path></svg>
@@ -97,7 +36,7 @@
                             <svg class="pointer-events-none text-slate h-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M12.9 14.32a8 8 0 1 1 1.41-1.41l5.35 5.33-1.42 1.42-5.33-5.34zM8 14A6 6 0 1 0 8 2a6 6 0 0 0 0 12z"/></svg>
                         </div>
                     </div>
-                    <nav class="nav text-base">
+                    <nav id="nav" class="text-base">
                         <div class="mb-8">
                             <p class="mb-4 text-slate-light uppercase tracking-wide font-bold text-xs">Introduction</p>
                             <ul>
@@ -238,11 +177,14 @@
                 </div>
             </div>
             <div class="ml-80">
-                <div class="content px-6 py-8 w-full max-w-lg mx-auto">
-                    @yield('body')
+                <div id="content" class="px-6 py-8 w-full max-w-lg mx-auto">
+                    <div id="app">
+                        @yield('body')
+                    </div>
+                    <script src="/js/app.js"></script>
+                    <script src="/js/prism.js"></script>
                 </div>
             </div>
         </div>
-        <script src="/js/app.js"></script>
     </body>
 </html>
diff --git a/docs/source/js/nav.js b/docs/source/js/nav.js
new file mode 100644
index 000000000..c47e73e1f
--- /dev/null
+++ b/docs/source/js/nav.js
@@ -0,0 +1,55 @@
+$.when($.ready).then(function() {
+  $('#nav').on('click', 'a', function (event) {
+
+    // Allow opening links in new tabs
+    if (event.metaKey) {
+        return
+    }
+
+    // Prevent following link
+    event.preventDefault()
+
+    // Get desired link
+    var href = $(this).attr('href')
+
+    // Make Ajax request to get the page content
+    $.ajax({
+      method: 'GET',
+      url: href,
+      cache: false,
+      dataType: 'html',
+    }).done(function(html) {
+
+      // Parse the HTML response
+      var title = $(html).filter('title').text()
+      var nav = $(html).find('#nav').html()
+      var content = $(html).find('#content').html()
+
+      // Update the page
+      $('title').text(title)
+      $('#nav').html(nav)
+      $('#content').html(content)
+
+      // Scroll to the top of the page
+      $(document).scrollTop(0)
+
+      // Add page load to brower history
+      window.history.pushState({
+        "title": title,
+        "nav": $(html).find('#nav').html(),
+        "content": $(html).find('#content').html()
+      }, '', href)
+    })
+  })
+
+  // Load page history (for back/forward nav)
+  window.onpopstate = function(e) {
+      if(e.state){
+
+        // Update the page
+        $('title').text(e.state.title)
+        $('#nav').html(e.state.nav)
+        $('#content').html(e.state.content)
+      }
+  }
+})