ToC component and other small tidmits.

delaford · Jan 21, 2019 · b9c4440 · b9c4440
1 parent fe904d1
commit b9c4440
Show file tree

Hide file tree

Showing 8 changed files with 149 additions and 73 deletions.
diff --git a/source/_assets/js/app.js b/source/_assets/js/app.js
@@ -1,7 +1,12 @@
+import TableOfContents from './components/TableOfContents.vue';
+
 window.Vue = require('vue');
 
-Vue.component('test', require('./components/test.vue'));
+Vue.component('table-of-contents', require('./components/TableOfContents.vue'));
 
 const app = new Vue({
-  el: '#app'
+	components: {
+	    TableOfContents,
+	},
+	el: '#app'
 });
diff --git a/source/_assets/js/components/TableOfContents.vue b/source/_assets/js/components/TableOfContents.vue
@@ -0,0 +1,50 @@
+<template>
+  <ul class="list-reset" v-if="links.length > 0">
+    <li class="mb-2" :class="link.isChild ? 'ml-2' : ''" v-for="link in links">
+      <a :href="link.href" class="text-grey-dark hover:text-grey-darkest">{{ link.text }}</a>
+    </li>
+  </ul>
+</template>
+
+<script>
+import _ from 'lodash'
+const anchorJS = require('anchor-js')
+const anchors = new anchorJS()
+
+function getHeadingText(element) {
+  let text = ''
+  for (var i = 0; i < element.childNodes.length; ++i) {
+    if (element.childNodes[i].nodeType === 3) {
+      text += element.childNodes[i].textContent;
+    }
+  }
+  return text
+}
+
+export default {
+  props: ['rows'],
+  data() {
+    return {
+      links: []
+    }
+  },
+  methods: {
+    scrollTo(el) {
+      const bounds = el.getBoundingClientRect()
+      document.body.scrollBy(0, 200)
+    }
+  },
+  mounted() {
+    anchors.options = { placement: 'left', class: 'text-grey-dark' }
+    anchors.add()
+    this.links = anchors.elements.filter((el) => _.includes(['H2', 'H3'], el.tagName)).map((el) => {
+      return {
+        isChild: el.tagName === 'H3',
+        text: getHeadingText(el),
+        href: el.querySelector('.anchorjs-link').getAttribute('href'),
+        el: el,
+      }
+    })
+  }
+}
+</script>
diff --git a/source/_assets/js/components/test.vue b/source/_assets/js/components/test.vue
diff --git a/source/_layouts/documentation.blade.php b/source/_layouts/documentation.blade.php
@@ -11,28 +11,33 @@
             @include('_nav.menu', ['items' => $page->navigation])
         </nav>
 
-          <div id="app" v-cloak class="pt-8 pb-0 w-full mt-7">
+        <div id="app" v-cloak class="pt-8 pb-0 w-full mt-7">
             <div class="markdown mb-1 px-6 max-w-lg mx-auto pl-0 ml-0 lg:mr-auto xl:mx-0 xl:px-12 xl:w-3/4">
-              <h1 class="page-title sm:text-lg md:text-5xl mb-0">{{ $page->title }}</h1>
-              @if ($page->description)
+                <h1 class="page-title sm:text-lg md:text-5xl mb-0">{{ $page->title }}</h1> @if ($page->description)
                 <div class="text-xl text-grey-dark mb-4 font-serif">
-                  {{ $page->description }}
+                    {{ $page->description }}
                 </div>
-              @endif
+                @endif
             </div>
 
-            {{-- Test Component --}}
-            <test></test>
-            {{-- End Test Component --}}
-
+            {{-- Main Container --}}
+            <div class="w-full max-w-screen-xl mx-auto px-6">
+              <div class="lg:flex -mx-6">
+                <div class="flex">
+                    <div class="markdown xl:px-12 w-full max-w-lg mx-auto lg:ml-0 lg:mr-auto xl:mx-0 documentation-page">
+                        @yield('content')
+                    </div>
+                </div>
 
-            <div class="flex">
-              <div class="markdown xl:px-12 w-full max-w-lg mx-auto lg:ml-0 lg:mr-auto xl:mx-0 xl:w-3/4 documentation-page">
-                @yield('content')
+                <div class="hidden xl:text-sm xl:block xl:w-1/4 xl:px-6 z-0">
+                    <div class="flex flex-col justify-between overflow-y-auto sticky top-16 max-h-(screen-16) pt-12 pb-4 -mt-12">
+                        <table-of-contents class="mb-8"></table-of-contents>
+                    </div>
+                </div>
               </div>
             </div>
-            <script src="/js/app.js"></script>
-          </div>
+        </div>
     </div>
+    <script src="/js/app.js"></script>
 </section>
 @endsection
diff --git a/source/_layouts/master.blade.php b/source/_layouts/master.blade.php
@@ -41,36 +41,31 @@
     </head>
 
     <body class="font-sans font-normal text-black leading-normal">
-        <header class="flex bg-grey-lightest border-b border-grey-lighter fixed pin-t pin-x z-100 h-16 items-center" role="banner">
+        <header class="flex bg-grey-lightest border-b border-grey-lighter fixed pin-t pin-x z-50 h-16 items-center" role="banner">
 
             <div class="w-full max-w-screen-xl relative mx-auto px-6">
                 <div class="-mx-6 flex items-center">
                     <div class="flex items-center justify-center lg:w-1/4 xl:w-1/5 lg:pr-8 px-3">
                         <img style="max-width:32px;max-height:32px;min-width:32px;min-height:32px;" class="lg:w-12 lg:h-12 block" src="/assets/img/human.png" alt="{{ $page->siteName }} logo" />
                     </div>
 
-                    <div id="js-search-input" class="lg:w-1/2">
-                        <div class="relative">
+                    <div id="js-search-input" class="lg:w-1/2 sm:w-full">
+                        <div class="relative sm:w-full">
                             <input
-                            id="docsearch-input"
-                            class="docsearch-input relative block h-10 transition-fast sm:w-1/2 md:w-full bg-white outline-none rounded text-grey-darker border border-grey focus:border-blue-light focus:bg-blue-lightest px-4 pb-0"
-                            name="docsearch"
-                            type="text"
-                            placeholder="Search the docs...">
+                                id="docsearch-input"
+                                class="docsearch-input relative block h-10 transition-fast sm:w-1/2 md:w-full bg-white outline-none rounded text-grey-darker border border-grey focus:border-blue-light focus:bg-blue-lightest px-4 pb-0 sm:w-full"
+                                name="docsearch"
+                                type="text"
+                                placeholder="Search the docs...">
                         </div>
                     </div>
 
                     @yield('nav-toggle')
                 </div>
             </div>
-
-
-
         </header>
 
-        <main role="main" class="w-full flex-auto">
-            @yield('body')
-        </main>
+        @yield('body')
 
         <script src="{{ mix('js/main.js', 'assets/build') }}"></script>
 

diff --git a/source/_nav/menu-toggle.blade.php b/source/_nav/menu-toggle.blade.php
@@ -1,4 +1,4 @@
-<div class="flex justify-center items-center w-full lg:hidden focus:outline-none"
+<div class="flex justify-center items-center lg:hidden focus:outline-none px-5"
     onclick="navMenu.toggle()"
 >
     <svg id="js-nav-menu-show" xmlns="http://www.w3.org/2000/svg"

diff --git a/source/js/app.js b/source/js/app.js
diff --git a/source/mix-manifest.json b/source/mix-manifest.json
@@ -1,5 +1,5 @@
 {
-    "/js/app.js": "/js/app.js?id=3263d972b6665d3753f4",
+    "/js/app.js": "/js/app.js?id=7d8a1260bea114fad785",
     "/css/main.css": "/css/main.css?id=c515db132c44b6aafe3e",
     "/js/main.js": "/js/main.js?id=82aedf2bfe414313fdbd"
 }