reusable navbar template

loopbackio · Apr 15, 2020 · 27b91ce · 27b91ce
1 parent 091c32f
commit 27b91ce
Show file tree

Hide file tree

Showing 10 changed files with 90 additions and 224 deletions.
diff --git a/contribute.html b/contribute.html
@@ -31,41 +31,7 @@
 
 <body>
     <!-- Navbar -->
-    <nav class="navbar navbar-expand-lg navbar-light fixed-top">
-        <a class="navbar-brand" href="index.html">
-            <img src="images/global/loopback-full-logo-blue.svg" width=150px>
-        </a>
-        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
-            aria-expanded="false" aria-label="Toggle navigation">
-            <span class="navbar-toggler-icon"></span>
-        </button>
-
-        <div class="collapse navbar-collapse" id="navbarSupportedContent">
-            <ul class="navbar-nav ml-auto">
-                <li class="nav-item">
-                    <a class="nav-link" href="getting-started.html">Getting Started</a>
-                </li>
-                <li class="nav-item">
-                    <a class="nav-link" href="/doc/en/lb4">Docs</a>
-                </li>
-                <li class="nav-item">
-                    <a class="nav-link highlighted" href="contribute.html">Contribute</a>
-                </li>
-                <li class="nav-item">
-                    <a class="nav-link" href="resources.html">Resources</a>
-                </li>
-                <li class="nav-item">
-                    <a class="nav-link" href="openapi-to-graphql.html">GraphQL</a>
-                </li>
-                <li class="nav-item">
-                    <a class="nav-link" href="https://strongloop.com/strongblog/tag_LoopBack.html" target="_blank" rel="noopener noreferrer">Blog</a>
-                </li>
-                <li class="nav-item">
-                    <a class="nav-link" href="https://ibm.biz/apitest" target="_blank" rel="noopener noreferrer">Test Your APIs</a>
-                </li>
-            </ul>
-        </div>
-    </nav> 
+    <div id="navbar-template"></div>
 
     <div class="r-masthead">
         <div class="container-fluid"></div>
@@ -235,13 +201,19 @@ <h3 class="section-heading" style="padding-top: 48px;">Governance</h3>
         </div>
     </footer>
 
-    <script src="dist/jquery/jquery-3.3.1.slim.min.js"></script>
+    <script src="/dist/jquery/jquery-3.4.1.min.js" crossorigin="anonymous"></script>    
     <script src="dist/popper/1.14.0/umd/popper.min.js"></script>
     <!-- Bootstrap core JavaScript -->
     <script src="dist/bootstrap/js/bootstrap.min.js"></script>
 
     <!-- GitHub button -->
     <script async defer src="https://buttons.github.io/buttons.js"></script>
+    <!-- Load the NavBar template -->
+    <script>
+        $(function(){
+            $("#navbar-template").load("navbar-template.html"); 
+        });
+    </script>
 
 </body>
 

diff --git a/dist/jquery/jquery-3.4.1.min.js b/dist/jquery/jquery-3.4.1.min.js
diff --git a/getting-started.html b/getting-started.html
@@ -29,42 +29,8 @@
 
 <body>
     <!-- Navbar -->
-    <nav class="navbar navbar-expand-lg navbar-light fixed-top">
-        <a class="navbar-brand" href="index.html">
-            <img src="images/global/loopback-full-logo-blue.svg" width=150px>
-        </a>
-        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
-            aria-expanded="false" aria-label="Toggle navigation">
-            <span class="navbar-toggler-icon"></span>
-        </button>
-
-        <div class="collapse navbar-collapse" id="navbarSupportedContent">
-            <ul class="navbar-nav ml-auto">
-                <li class="nav-item">
-                    <a class="nav-link highlighted" href="getting-started.html">Getting Started</a>
-                </li>
-                <li class="nav-item">
-                    <a class="nav-link" href="/doc/en/lb4">Docs</a>
-                </li>
-                <li class="nav-item">
-                    <a class="nav-link" href="contribute.html">Contribute</a>
-                </li>
-                <li class="nav-item">
-                    <a class="nav-link" href="resources.html">Resources</a>
-                </li>
-                <li class="nav-item">
-                    <a class="nav-link" href="openapi-to-graphql.html">GraphQL</a>
-                </li>
-                <li class="nav-item">
-                    <a class="nav-link" href="https://strongloop.com/strongblog/tag_LoopBack.html" target="_blank" rel="noopener noreferrer">Blog</a>
-                </li>
-                <li class="nav-item">
-                    <a class="nav-link" href="https://ibm.biz/apitest" target="_blank" rel="noopener noreferrer">Test Your APIs</a>
-                </li>
-            </ul>
-
-        </div>
-    </nav>
+    <div id="navbar-template"></div>
+
     <!-- Header -->
     <div class="gs-masthead">
         <div class="container-fluid"></div>
@@ -329,12 +295,18 @@ <h3 style="color:white">Ready to continue your journey?
         </div>
     </footer>
 
-    <!-- Scripts -->
-    <script src="dist/jquery/jquery-3.3.1.slim.min.js"></script>
+    <script src="/dist/jquery/jquery-3.4.1.min.js" crossorigin="anonymous"></script>    
     <script src="dist/popper/1.14.0/umd/popper.min.js"></script>
     <!-- Bootstrap core JavaScript -->
     <script src="dist/bootstrap/js/bootstrap.min.js"></script>
+
     <!-- GitHub button -->
     <script async defer src="https://buttons.github.io/buttons.js"></script>
+    <!-- Load the NavBar template -->
+    <script>
+        $(function(){
+            $("#navbar-template").load("navbar-template.html"); 
+        });
+    </script>
 
 </body>
diff --git a/getting-started/index.html b/getting-started/index.html
@@ -3,7 +3,6 @@
 title: Getting Started
 item: getting-started
 permalink: /lb3/getting-started
-redirect_from: /getting-started
 ---
       <main class="c-content">
         <section class="c-section">

diff --git a/index.html b/index.html
@@ -23,47 +23,12 @@
 
       gtag('config', 'UA-150726441-2');
     </script>
-
 </head>
 
 <body>
     <!-- Navbar -->
-    <nav class="navbar navbar-expand-lg navbar-light fixed-top">
-        <a class="navbar-brand" href="#">
-            <img src="images/global/loopback-full-logo-blue.svg" width=150px>
-        </a>
-        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
-            aria-expanded="false" aria-label="Toggle navigation">
-            <span class="navbar-toggler-icon"></span>
-        </button>
-
-        <div class="collapse navbar-collapse" id="navbarSupportedContent">
-            <ul class="navbar-nav ml-auto">
-                <li class="nav-item">
-                    <a class="nav-link" href="getting-started.html">Getting Started</a>
-                </li>
-                <li class="nav-item">
-                    <a class="nav-link" href="/doc/en/lb4">Docs</a>
-                </li>
-                <li class="nav-item">
-                    <a class="nav-link" href="contribute.html">Contribute</a>
-                </li>
-                <li class="nav-item">
-                    <a class="nav-link" href="resources.html">Resources</a>
-                </li>
-                <li class="nav-item">
-                    <a class="nav-link" href="openapi-to-graphql.html">GraphQL</a>
-                </li>
-                <li class="nav-item">
-                    <a class="nav-link" href="https://strongloop.com/strongblog/tag_LoopBack.html" target="_blank" rel="noopener noreferrer">Blog</a>
-                </li>
-                <li class="nav-item">
-                    <a class="nav-link" href="https://ibm.biz/apitest" target="_blank" rel="noopener noreferrer">Test Your APIs</a>
-                </li>
-            </ul>
-
-        </div>
-    </nav>
+    <div id="navbar-template"></div>
+
     <!--Header alert -->
     <div class="header-alert">
         <p class="centered-regular">LoopBack won API World's 2019 Best in API Middleware category, see <a href="https://strongloop.com/strongblog/loopback-2019-api-award-api-middleware/" target="_blank" rel="noopener noreferrer">our announcement post.</a></p>
@@ -449,14 +414,19 @@ <h3 style="color:white">Ready to build amazing things?
         </div>
     </footer>
 
-    <script src="dist/jquery/jquery-3.3.1.slim.min.js"></script>
+    <script src="/dist/jquery/jquery-3.4.1.min.js" crossorigin="anonymous"></script>    
     <script src="dist/popper/1.14.0/umd/popper.min.js"></script>
     <!-- Bootstrap core JavaScript -->
     <script src="dist/bootstrap/js/bootstrap.min.js"></script>
 
     <!-- GitHub button -->
     <script async defer src="https://buttons.github.io/buttons.js"></script>
-
+    <!-- Load the NavBar template -->
+    <script>
+        $(function(){
+            $("#navbar-template").load("navbar-template.html"); 
+        });
+    </script>
 
 </body>
 

diff --git a/navbar-template.html b/navbar-template.html
@@ -0,0 +1,36 @@
+<nav class="navbar navbar-expand-lg navbar-light fixed-top">
+    <a class="navbar-brand" href="index.html">
+        <img src="images/global/loopback-full-logo-blue.svg" width=150px>
+    </a>
+    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
+        aria-expanded="false" aria-label="Toggle navigation">
+        <span class="navbar-toggler-icon"></span>
+    </button>
+
+    <div class="collapse navbar-collapse" id="navbarSupportedContent">
+        <ul class="navbar-nav ml-auto">
+            <li class="nav-item">
+                <a class="nav-link" href="/getting-started.html">Getting Started</a>
+            </li>
+            <li class="nav-item">
+                <a class="nav-link" href="/doc/en/lb4">Docs</a>
+            </li>
+            <li class="nav-item">
+                <a class="nav-link" href="/contribute.html">Contribute</a>
+            </li>
+            <li class="nav-item">
+                <a class="nav-link" href="/resources.html">Resources</a>
+            </li>
+            <li class="nav-item">
+                <a class="nav-link" href="openapi-to-graphql.html">GraphQL</a>
+            </li>
+            <li class="nav-item">
+                <a class="nav-link" href="https://strongloop.com/strongblog/tag_LoopBack.html" target="_blank" rel="noopener noreferrer">Blog</a>
+            </li>
+            <li class="nav-item">
+                <a class="nav-link" href="https://ibm.biz/apitest" target="_blank" rel="noopener noreferrer">Test Your APIs</a>
+            </li>
+        </ul>
+
+    </div>
+</nav>
diff --git a/openapi-to-graphql.html b/openapi-to-graphql.html
@@ -35,41 +35,7 @@
 
 <body>
     <!-- Navbar -->
-    <nav class="navbar navbar-expand-lg navbar-light fixed-top">
-        <a class="navbar-brand" href="index.html">
-            <img src="images/global/loopback-full-logo-blue.svg" width=150px>
-        </a>
-        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
-            aria-expanded="false" aria-label="Toggle navigation">
-            <span class="navbar-toggler-icon"></span>
-        </button>
-
-        <div class="collapse navbar-collapse" id="navbarSupportedContent">
-            <ul class="navbar-nav ml-auto">
-                <li class="nav-item">
-                    <a class="nav-link" href="getting-started.html">Getting Started</a>
-                </li>
-                <li class="nav-item">
-                    <a class="nav-link" href="/doc/en/lb4">Docs</a>
-                </li>
-                <li class="nav-item">
-                    <a class="nav-link" href="contribute.html">Contribute</a>
-                </li>
-                <li class="nav-item">
-                    <a class="nav-link" href="resources.html">Resources</a>
-                </li>
-                <li class="nav-item">
-                    <a class="nav-link highlighted" href="openapi-to-graphql.html">GraphQL</a>
-                </li>
-                <li class="nav-item">
-                    <a class="nav-link" href="https://strongloop.com/strongblog/tag_LoopBack.html" target="_blank" rel="noopener noreferrer">Blog</a>
-                </li>
-                <li class="nav-item">
-                    <a class="nav-link" href="https://ibm.biz/apitest" target="_blank" rel="noopener noreferrer">Test Your APIs</a>
-                </li>
-            </ul>
-        </div>
-    </nav>
+    <div id="navbar-template"></div>
 
     <!-- Header -->
     <div class="openapi-to-graphql-masthead">
@@ -254,14 +220,19 @@ <h5 class="card-title">Git repository</h5>
         </div>
     </footer>
 
-    <script src="dist/jquery/jquery-3.3.1.slim.min.js"></script>
+    <script src="/dist/jquery/jquery-3.4.1.min.js" crossorigin="anonymous"></script>    
     <script src="dist/popper/1.14.0/umd/popper.min.js"></script>
     <!-- Bootstrap core JavaScript -->
     <script src="dist/bootstrap/js/bootstrap.min.js"></script>
 
     <!-- GitHub button -->
     <script async defer src="https://buttons.github.io/buttons.js"></script>
-
+    <!-- Load the NavBar template -->
+    <script>
+        $(function(){
+            $("#navbar-template").load("navbar-template.html"); 
+        });
+    </script>
 
 </body>
 

diff --git a/resources.html b/resources.html
@@ -30,41 +30,7 @@
 
 <body>
     <!-- Navbar -->
-    <nav class="navbar navbar-expand-lg navbar-light fixed-top">
-        <a class="navbar-brand" href="index.html">
-            <img src="images/global/loopback-full-logo-blue.svg" width=150px>
-        </a>
-        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
-            aria-expanded="false" aria-label="Toggle navigation">
-            <span class="navbar-toggler-icon"></span>
-        </button>
-
-        <div class="collapse navbar-collapse" id="navbarSupportedContent">
-            <ul class="navbar-nav ml-auto">
-                <li class="nav-item">
-                    <a class="nav-link" href="getting-started.html">Getting Started</a>
-                </li>
-                <li class="nav-item">
-                    <a class="nav-link" href="/doc/en/lb4">Docs</a>
-                </li>
-                <li class="nav-item">
-                    <a class="nav-link" href="contribute.html">Contribute</a>
-                </li>
-                <li class="nav-item">
-                    <a class="nav-link highlighted" href="resources.html">Resources</a>
-                </li>
-                <li class="nav-item">
-                    <a class="nav-link" href="openapi-to-graphql.html">GraphQL</a>
-                </li>
-                <li class="nav-item">
-                    <a class="nav-link" href="https://strongloop.com/strongblog/tag_LoopBack.html" target="_blank" rel="noopener noreferrer">Blog</a>
-                </li>
-                <li class="nav-item">
-                    <a class="nav-link" href="https://ibm.biz/apitest" target="_blank" rel="noopener noreferrer">Test Your APIs</a>
-                </li>
-            </ul>
-        </div>
-    </nav> 
+    <div id="navbar-template"></div>
 
      <!-- Header -->
      <div class="r-masthead">
@@ -453,11 +419,18 @@ <h3 style="padding-top: 80px;">Show off your LoopBack integration!
     </footer>
 
     <!-- Scripts -->
-    <script src="dist/jquery/jquery-3.3.1.slim.min.js"></script>
+    <script src="/dist/jquery/jquery-3.4.1.min.js" crossorigin="anonymous"></script>    
     <script src="dist/popper/1.14.0/umd/popper.min.js"></script>
     <!-- Bootstrap core JavaScript -->
     <script src="dist/bootstrap/js/bootstrap.min.js"></script>
+
     <!-- GitHub button -->
     <script async defer src="https://buttons.github.io/buttons.js"></script>
+    <!-- Load the NavBar template -->
+    <script>
+        $(function(){
+            $("#navbar-template").load("navbar-template.html"); 
+        });
+    </script>
 
 </body>
diff --git a/resources/index.html b/resources/index.html
@@ -3,7 +3,6 @@
 title: Resources
 item: resources
 permalink: /lb3/resources
-redirect_from: /resources
 ---
       <main class="c-content">
         <section class="c-section">