Update navbar usage and documentation (#790)

Following from commit 0efb692, the navbar in the documentation does not fill the entire width. This is because the navbar does not use the new header feature implemented in commit 0efb692. Let's update the documentation's header to use the new feature in commit 0efb692. Let's also update the test sites to utilize the new feature.
MarkBind · Mar 31, 2019 · ef167aa · ef167aa
2 parents 03263c5 + 11c25b2
commit ef167aa
Show file tree

Hide file tree

Showing 40 changed files with 101 additions and 114 deletions.
diff --git a/asset/css/markbind.css b/asset/css/markbind.css
@@ -116,11 +116,8 @@ footer {
 /* Side Navigation menus */
 
 .spacer-top {
-    /*
-      spacer-top class is a work around for MarkBind <navbar> component using "position: fixed".
-      This class can be removed once the component's position type is changed.
-    */
-    padding-top: 70px;
+    /* This class is to ensure adequate spacing of contents from the top of the page */
+    padding-top: 1rem;
 }
 
 .scrollable {

diff --git a/asset/js/vue-strap.min.js b/asset/js/vue-strap.min.js
diff --git a/docs/_markbind/headers/header.md b/docs/_markbind/headers/header.md
@@ -0,0 +1,18 @@
+<header>
+  <link rel="stylesheet" href="../css/main.css">
+  <navbar type="inverse">
+    <a slot="brand" href="../index.html" title="Home" class="navbar-brand"><img src="../images/logo-darkbackground.png" height="20" /></a>
+    <li><a href="../index.html" class="nav-link">HOME</a></li>
+    <li><a href="../userGuide/index.html" class="nav-link">DOCS</a></li>
+    <li><a href="../showcase.html" class="nav-link">SHOWCASE</a></li>
+    <li><a href="../about.html" class="nav-link">ABOUT</a></li>
+    <li>
+      <a href="https://github.com/MarkBind/markbind" target="_blank" class="nav-link"><md>:fab-github:</md></a>
+    </li>
+    <li slot="right">
+      <form class="navbar-form">
+        <searchbar :data="searchData" placeholder="Search" :on-hit="searchCallback" menu-align-right></searchbar>
+      </form>
+    </li>
+  </navbar>
+</header>
diff --git a/docs/about.md b/docs/about.md
@@ -1,10 +1,9 @@
 <frontmatter>
   title: "About Us"
+  header: header.md
   footer: footer.md
 </frontmatter>
 
-<include src="./common/header.md" />
-
 # About Us
 
 <span class="lead">MarkBind is a project **based in [National University of Singapore, School of Computing](http://www.comp.nus.edu.sg/)**, and is funded by an education grant from [NUS Center for Development of Teaching and Learning](http://www.cdtl.nus.edu.sg/).</span>

diff --git a/docs/common/header.md b/docs/common/header.md
diff --git a/docs/index.md b/docs/index.md
@@ -1,10 +1,9 @@
 <frontmatter>
   title: "Generate More Dynamic Websites from Markdown Text"
+  header: header.md
   footer: footer.md
 </frontmatter>
 
-<include src="./common/header.md" />
-
 <h1 class="display-3"><md>**MarkBind**</md></h1>
 
 <span class="lead">

diff --git a/docs/showcase.md b/docs/showcase.md
@@ -1,10 +1,9 @@
 <frontmatter>
   title: "Showcase"
+  header: header.md
   footer: footer.md
 </frontmatter>
 
-<include src="./common/header.md" />
-
 # Examples of MarkBind Websites
 
 ## Course Websites

diff --git a/docs/userGuide/addingPages.md b/docs/userGuide/addingPages.md
@@ -3,6 +3,7 @@
 
 <frontmatter>
   title: "User Guide: {{ title }}"
+  header: header.md
   footer: footer.md
   siteNav: userGuideSections.md
 </frontmatter>
@@ -11,8 +12,6 @@
 <md>[_User Guide → {{ title }}_]({{ filename }}.html)</md>
 </span>
 
-<include src="../common/header.md" />
-
 
 # {{ title }}
 

diff --git a/docs/userGuide/authoringContents.md b/docs/userGuide/authoringContents.md
@@ -1,12 +1,11 @@
 <variable name="title" id="title">Authoring Contents</variable>
 <frontmatter>
   title: "User Guide: {{ title }}"
+  header: header.md
   footer: footer.md
   siteNav: userGuideSections.md
 </frontmatter>
 
-<include src="../common/header.md" />
-
 # {{ title }}
 
 {% set pages = [

diff --git a/docs/userGuide/cliCommands.md b/docs/userGuide/cliCommands.md
@@ -1,11 +1,10 @@
 <frontmatter>
   title: "User Guide: Command Line Interface (CLI)"
+  header: header.md
   footer: footer.md
   siteNav: userGuideSections.md
 </frontmatter>
 
-<include src="../common/header.md" />
-
 # MarkBind CLI
 
 ### Overview

diff --git a/docs/userGuide/deployingTheSite.md b/docs/userGuide/deployingTheSite.md
@@ -1,13 +1,12 @@
 <variable name="title" id="title">Deploying the Site</variable>
 <frontmatter>
   title: "User Guide: {{ title }}"
+  header: header.md
   footer: footer.md
   siteNav: userGuideSections.md
   pageNav: default
 </frontmatter>
 
-<include src="../common/header.md" />
-
 # {{ title }}
 
 <span class="lead">

diff --git a/docs/userGuide/formattingContents.md b/docs/userGuide/formattingContents.md
@@ -3,6 +3,7 @@
 
 <frontmatter>
   title: "User Guide: {{ title }}"
+  header: header.md
   footer: footer.md
   siteNav: userGuideSections.md
   pageNav: 2
@@ -12,8 +13,6 @@
 <md>[_User Guide → {{ title }}_]({{ filename }}.html)</md>
 </span>
 
-<include src="../common/header.md" />
-
 # {{ title }}
 
 <span class="lead" id="overview">

diff --git a/docs/userGuide/fullSyntaxReference.md b/docs/userGuide/fullSyntaxReference.md
@@ -1,11 +1,10 @@
 <frontmatter>
   title: "User Guide: Full Syntax Reference"
+  header: header.md
   footer: footer.md
   siteNav: userGuideSections.md
 </frontmatter>
 
-<include src="../common/header.md" />
-
 # Full Syntax Reference
 
 {% set syntax_topics = {

diff --git a/docs/userGuide/gettingStarted.md b/docs/userGuide/gettingStarted.md
@@ -1,12 +1,11 @@
 <variable name="title" id="title">Getting Started</variable>
 <frontmatter>
   title: "User Guide - {{ title }}"
+  header: header.md
   footer: footer.md
   siteNav: userGuideSections.md
 </frontmatter>
 
-<include src="../common/header.md" />
-
 # {{ title }}
 
 <big>**Prerequisites**</big>

diff --git a/docs/userGuide/glossary.md b/docs/userGuide/glossary.md
@@ -1,11 +1,10 @@
 <frontmatter>
   title: "Glossary"
+  header: header.md
   footer: footer.md
   siteNav: userGuideSections.md
 </frontmatter>
 
-<include src="../common/header.md" />
-
 #### Live Preview
 
 <span id="live-preview">

diff --git a/docs/userGuide/makingTheSiteSearchable.md b/docs/userGuide/makingTheSiteSearchable.md
@@ -3,6 +3,7 @@
 
 <frontmatter>
   title: "User Guide: {{ title }}"
+  header: header.md
   footer: footer.md
   siteNav: userGuideSections.md
   pageNav: 2
@@ -12,8 +13,6 @@
 <md>[_User Guide → {{ title }}_]({{ filename }}.html)</md>
 </span>
 
-<include src="../common/header.md" />
-
 # {{ title }}
 
 <span class="lead" id="overview">

diff --git a/docs/userGuide/markBindInTheProjectWorkflow.md b/docs/userGuide/markBindInTheProjectWorkflow.md
@@ -1,12 +1,11 @@
 <variable name="title" id="title">MarkBind in the Project Workflow</variable>
 <frontmatter>
   title: "User Guide: {{ title }}"
+  header: header.md
   footer: footer.md
   siteNav: userGuideSections.md
 </frontmatter>
 
-<include src="../common/header.md" />
-
 # {{ title }}
 
 <span class="lead">

diff --git a/docs/userGuide/markBindSyntaxOverview.md b/docs/userGuide/markBindSyntaxOverview.md
@@ -3,6 +3,7 @@
 
 <frontmatter>
   title: "User Guide: {{ title }} "
+  header: header.md
   footer: footer.md
   siteNav: userGuideSections.md
 </frontmatter>
@@ -11,8 +12,6 @@
 [_User Guide → {{ title }}_]({{ filename }}.html)
 </span>
 
-<include src="../common/header.md" />
-
 # {{ title }}
 
 

diff --git a/docs/userGuide/readerFacingFeatures.md b/docs/userGuide/readerFacingFeatures.md
@@ -1,11 +1,10 @@
 <frontmatter>
   title: "User Guide: Reader-Facing Features"
+  header: header.md
   footer: footer.md
   siteNav: userGuideSections.md
 </frontmatter>
 
-<include src="../common/header.md" />
-
 # Reader-Facing Features
 
 <include src="fullSyntaxReference.md#dummy" optional />

diff --git a/docs/userGuide/reusingContents.md b/docs/userGuide/reusingContents.md
@@ -3,6 +3,7 @@
 
 <frontmatter>
   title: "User Guide: {{ title }}"
+  header: header.md
   footer: footer.md
   siteNav: userGuideSections.md
   pageNav: 4
@@ -12,8 +13,6 @@
 <md>[_User Guide → {{ title }}_]({{ filename }}.html)</md>
 </span>
 
-<include src="../common/header.md" />
-
 # {{ title }}
 
 <span class="lead" id="overview">

diff --git a/docs/userGuide/siteConfiguration.md b/docs/userGuide/siteConfiguration.md
@@ -1,12 +1,11 @@
 <frontmatter>
   title: "Configuring the Site"
+  header: header.md
   footer: footer.md
   siteNav: userGuideSections.md
   keywords: site.json
 </frontmatter>
 
-<include src="../common/header.md" />
-
 # Configuring the Site
 
 <span class="lead">

diff --git a/docs/userGuide/syntax/navBars.mbdf b/docs/userGuide/syntax/navBars.mbdf
@@ -2,11 +2,17 @@
 
 **Navbar allows visitors of your website to navigate through pages easily.**
 
+<box type="warning">
+  <markdown>
+Note: **Navbars** should be placed within a [header file]({{ baseUrl }}/userguide/tweakingthepagestructure.html#headers) to ensure that they are correctly positioned at the top of the page, above the [site navigation]({{ baseUrl }}/userGuide/tweakingThePageStructure.html#site-navigation-menus) and [page navigation]({{ baseUrl }}/userGuide/tweakingThePageStructure.html#page-navigation-menus) menus.
+  </markdown>
+</box>
+
 <include src="outputBox.md" boilerplate >
 <span id="code">
 
 ```html
-<navbar placement="top" type="inverse">
+<navbar type="inverse">
   <!-- Brand as slot -->
   <a slot="brand" href="/" title="Home" class="navbar-brand">MarkBind</a>
   <!-- You can use dropdown component -->
@@ -41,14 +47,13 @@
 
 Name | Type | Default | Description 
 --- | --- | --- | ---
-placement | `String` | `''` | Supports: `top`, `bottom`, `static`, or empty for normal. 
 type | `String` | `default` | Supports: `inverse`, `default`.
 
 
 <span id="short" class="d-none">
 
 ```html
-<navbar placement="top" type="inverse">
+<navbar type="inverse">
   <!-- Brand as slot -->
   <a slot="brand" href="/" title="Home" class="navbar-brand">MarkBind</a>
   <!-- You can use dropdown component -->

diff --git a/docs/userGuide/syntaxCheatSheet.md b/docs/userGuide/syntaxCheatSheet.md
@@ -1,11 +1,10 @@
 <frontmatter>
   title: "User Guide: Syntax Cheat Sheet"
+  header: header.md
   footer: footer.md
   siteNav: userGuideSections.md
 </frontmatter>
 
-<include src="../common/header.md" />
-
 # Syntax Cheat Sheet
 
 {% from "userGuide/fullSyntaxReference.md" import syntax_topics as topics %}

diff --git a/docs/userGuide/themes.md b/docs/userGuide/themes.md
@@ -1,12 +1,11 @@
 <variable name="title" id="title">Themes</variable>
 <frontmatter>
   title: "User Guide: {{ title }}"
+  header: header.md
   footer: footer.md
   siteNav: userGuideSections.md
 </frontmatter>
 
-<include src="../common/header.md" />
-
 # {{ title }}
 
 <span class="lead">

diff --git a/docs/userGuide/tipsAndTricks.md b/docs/userGuide/tipsAndTricks.md
@@ -2,12 +2,11 @@
 
 <frontmatter>
   title: "User Guide: {{ title | safe }}"
+  header: header.md
   footer: footer.md
   siteNav: userGuideSections.md
 </frontmatter>
 
-<include src="../common/header.md" />
-
 # {{ title | safe }}
 
 <span id="escapingCharacters">

diff --git a/docs/userGuide/tweakingThePageStructure.md b/docs/userGuide/tweakingThePageStructure.md
@@ -3,6 +3,7 @@
 
 <frontmatter>
   title: "User Guide: {{ title }}"
+  header: header.md
   footer: footer.md
   siteNav: userGuideSections.md
   pageNav: 3
@@ -12,8 +13,6 @@
 <md>[_User Guide → {{ title }}_]({{ filename }}.html)</md>
 </span>
 
-<include src="../common/header.md" />
-
 # Tweaking the Page Structure
 
 <span class="lead" id="overview">**MarkBind offers several ways to easily tweak the overall structure of a page**, for example, using headers, footers, scripts, or stylesheets.</span>