Merge pull request #3 from tableflip/topbar-partial

Pull the topbar into a partial
tableflip · Jun 13, 2017 · 5f95647 · 5f95647
2 parents 5d21980 + d962edf
commit 5f95647
Show file tree

Hide file tree

Showing 9 changed files with 47 additions and 94 deletions.
diff --git a/content/bundles.html b/content/bundles.html
@@ -6,24 +6,8 @@
   <title>Bundles - libp2p</title>
 </head>
 <body>
-<header>
-  <div class="wrap">
-      <a class="logo static" href="/">
-          <img width="60" height="72" src="/img/logo_small.png" alt="">
-          <b>lib</b>p2p</a>
-      <a href='#' class='bars'><i class="fa fa-bars" aria-hidden="true"></i></a>
-      <a href='#' class="close"><i class="fa fa-times" aria-hidden="true"></i></a>
-      <nav>
-          <ul>
-              <li><a href="/implementations">Implementations</a></li>
-              <li><a href="/bundles" class="active">Bundles</a></li>
-              <li><a href="/media">Media</a></li>
-              <li><a href="https://github.com/libp2p" target="_blank">Github</a></li>
-              <li><a href="https://github.com/libp2p/specs" target="_blank">Specifications</a></li>
-          </ul>
-      </nav>
-  </div>
-</header>
+
+{{ partial "topbar.html" . }}
 
 <main>
     <article class="center bundles">

diff --git a/content/implementations.html b/content/implementations.html
@@ -6,24 +6,8 @@
   <title>Implementations - libp2p</title>
 </head>
 <body>
-<header>
-  <div class="wrap">
-    <a class="logo static" href="/">
-      <img width="60" height="72" src="/img/logo_small.png" alt="">
-      <b>lib</b>p2p</a>
-    <a href='#' class='bars'><i class="fa fa-bars" aria-hidden="true"></i></a>
-    <a href='#' class="close"><i class="fa fa-times" aria-hidden="true"></i></a>
-    <nav>
-      <ul>
-        <li><a href="/implementations" class="active">Implementations</a></li>
-        <li><a href="/bundles">Bundles</a></li>
-        <li><a href="/media">Media</a></li>
-        <li><a href="https://github.com/libp2p" target="_blank">Github</a></li>
-        <li><a href="https://github.com/libp2p/specs" target="_blank">Specifications</a></li>
-      </ul>
-    </nav>
-  </div>
-</header>
+
+{{ partial "topbar.html" . }}
 
 <main>
 <article class="center implementations">

diff --git a/content/index.html b/content/index.html
@@ -6,24 +6,8 @@
   <title>libp2p</title>
 </head>
 <body>
-<header>
-    <div class="wrap">
-        <a class="logo" href="/">
-            <img width="60" height="72" src="/img/logo_small.png" alt="">
-            <b>lib</b>p2p</a>
-        <a href='#' class='bars'><i class="fa fa-bars" aria-hidden="true"></i></a>
-        <a href='#' class="close"><i class="fa fa-times" aria-hidden="true"></i></a>
-        <nav>
-            <ul>
-                <li><a href="/implementations">Implementations</a></li>
-                <li><a href="/bundles">Bundles</a></li>
-                <li><a href="/media">Media</a></li>
-                <li><a href="https://github.com/libp2p" target="_blank">Github</a></li>
-                <li><a href="https://github.com/libp2p/specs" target="_blank">Specifications</a></li>
-            </ul>
-        </nav>
-    </div>
-</header>
+
+{{ partial "topbar.html" . }}
 
 <main>
     <article class="a-modular-network-stack">

diff --git a/content/media.html b/content/media.html
@@ -6,24 +6,8 @@
   <title>Media - libp2p</title>
 </head>
 <body>
-  <header>
-    <div class="wrap">
-      <a class="logo static" href="/">
-        <img width="60" height="72" src="/img/logo_small.png" alt="">
-        <b>lib</b>p2p</a>
-      <a href='#' class='bars'><i class="fa fa-bars" aria-hidden="true"></i></a>
-      <a href='#' class="close"><i class="fa fa-times" aria-hidden="true"></i></a>
-      <nav>
-        <ul>
-          <li><a href="/implementations">Implementations</a></li>
-          <li><a href="/bundles">Bundles</a></li>
-          <li><a href="/media" class="active">Media</a></li>
-          <li><a href="https://github.com/libp2p" target="_blank">Github</a></li>
-          <li><a href="https://github.com/libp2p/specs" target="_blank">Specifications</a></li>
-        </ul>
-      </nav>
-    </div>
-  </header>
+
+{{ partial "topbar.html" . }}
 
   <main>
     <div class="pseudo-header"></div>

diff --git a/js/index.js b/js/index.js
@@ -1,8 +1,10 @@
 var $ = require('jquery')
 var data = require('../data/bundles.json')
 var initPage = require('./lib/init-page')
+var initLogo = require('./lib/logo')
 
 initPage()
+initLogo()
 
 $(function () {
   $('svg.contributors')[0].pauseAnimations()

diff --git a/js/lib/init-page.js b/js/lib/init-page.js
@@ -1,11 +1,11 @@
 var fadeInArcticle = require('./fade-in-article')
 var scrollToHash = require('./scroll-to-hash')
-var initTopbar = require('./topbar')
+var initMobileNav = require('./mobile-nav')
 var initTriangles = require('./triangle')
 
 module.exports = function initPage () {
   fadeInArcticle()
   scrollToHash()
-  initTopbar()
+  initMobileNav()
   initTriangles()
 }
diff --git a/js/lib/logo.js b/js/lib/logo.js
@@ -0,0 +1,15 @@
+var $ = require('jquery')
+
+module.exports = function initLogoAnimation () {
+  $(window).scroll(function (e) {
+    var $logo = $('header .logo')
+
+    if ($(window).outerWidth() > 767 && !$logo.hasClass('static')) {
+      if ($(window).scrollTop() > 300) {
+        $logo.addClass('show')
+      } else {
+        $logo.removeClass('show')
+      }
+    }
+  })
+}
diff --git a/js/lib/topbar.js → js/lib/mobile-nav.js b/js/lib/topbar.js → js/lib/mobile-nav.js
@@ -1,25 +1,6 @@
 var $ = require('jquery')
 
-module.exports = function topbar () {
-  initMobileNav()
-  initLogoAnimation()
-}
-
-function initLogoAnimation () {
-  $(window).scroll(function (e) {
-    var $logo = $('header .logo')
-
-    if ($(window).outerWidth() > 767 && !$logo.hasClass('static')) {
-      if ($(window).scrollTop() > 300) {
-        $logo.addClass('show')
-      } else {
-        $logo.removeClass('show')
-      }
-    }
-  })
-}
-
-function initMobileNav () {
+module.exports = function initMobileNav () {
   $('.bars', 'header').on('click', function (e) {
     e.preventDefault()
     $('.bars', 'header').hide()

diff --git a/layouts/partials/topbar.html b/layouts/partials/topbar.html
@@ -0,0 +1,19 @@
+<header>
+  <div class="wrap">
+    <a class="logo {{ if (not (eq .URL "/")) }}static{{end}}" href="/">
+      <img width="60" height="72" src="/img/logo_small.png" alt="">
+      <b>lib</b>p2p
+    </a>
+    <a href='#' class='bars'><i class="fa fa-bars" aria-hidden="true"></i></a>
+    <a href='#' class="close"><i class="fa fa-times" aria-hidden="true"></i></a>
+    <nav>
+      <ul>
+        <li><a href="/implementations" {{ if eq .URL "/implementations/" }}class="active"{{ end }}>Implementations</a></li>
+        <li><a href="/bundles" {{ if eq .URL "/bundles/" }}class="active"{{ end }}>Bundles</a></li>
+        <li><a href="/media" {{ if eq .URL "/media/" }}class="active"{{ end }}>Media</a></li>
+        <li><a href="https://github.com/libp2p" target="_blank">Github</a></li>
+        <li><a href="https://github.com/libp2p/specs" target="_blank">Specifications</a></li>
+      </ul>
+    </nav>
+  </div>
+</header>