Use Hugo to generate relative paths to arrow image

arvindsv · Jun 14, 2019 · 392ebfd · 392ebfd
1 parent 8e873a6
commit 392ebfd
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 22 deletions.
diff --git a/content/menu/index.md b/content/menu/index.md
@@ -18,6 +18,7 @@ headless: true
 
 
   <li class="level1 has-children">
+    {{< figure src="/images/arrow.png" class="menu-arrow" >}}
     <a href="#"><b>GoCD Tour</b></a>
     <ul>
       <li class="level2"><a href="{{< relref "introduction/concepts_in_go.md" >}}">Concepts in GoCD</a></li>
@@ -35,6 +36,7 @@ headless: true
   </li>
 
   <li class="level1 has-children">
+    {{< figure src="/images/arrow.png" class="menu-arrow" >}}
     <a href="#"><b>Installation</b></a>
     <ul>
       <li class="level2"><a href="{{< relref "installation/_index.md" >}}">Installing GoCD</a></li>
@@ -74,6 +76,7 @@ headless: true
   </li>
 
   <li class="level1 has-children">
+    {{< figure src="/images/arrow.png" class="menu-arrow" >}}
     <a href="#"><b>Configuration</b></a>
     <ul>
       <li class="level2"><a href="{{< relref "configuration/quick_pipeline_setup.md" >}}">Setup a New Pipeline</a></li>
@@ -115,6 +118,7 @@ headless: true
   </li>
 
   <li class="level1 has-children">
+    {{< figure src="/images/arrow.png" class="menu-arrow" >}}
     <a href="#"><b>Advanced Usage</b></a>
     <ul>
       <li class="level2"><a href="{{< relref "advanced_usage/pipelines_as_code.md" >}}">Pipelines as code</a></li>
@@ -141,6 +145,7 @@ headless: true
   </li>
 
   <li class="level1 has-children">
+    {{< figure src="/images/arrow.png" class="menu-arrow" >}}
     <a href="#"><b>GoCD on Kubernetes</b></a>
     <ul>
       <li class="level2"><a href="{{< relref "gocd_on_kubernetes/introduction.md" >}}">Introduction</a></li>
@@ -165,6 +170,7 @@ headless: true
   </li>
 
   <li class="level1 has-children">
+    {{< figure src="/images/arrow.png" class="menu-arrow" >}}
     <a href="#"><b>Plugins in GoCD</b></a>
     <ul>
       <li class="level2"><a href="{{< relref "extension_points/_index.md" >}}">Available extension points</a></li>
@@ -178,6 +184,7 @@ headless: true
   </li>
 
   <li class="level1 has-children">
+    {{< figure src="/images/arrow.png" class="menu-arrow" >}}
     <a href="#"><b>FAQ/Troubleshooting</b></a>
     <ul>
       <li class="level2"><a href="{{< relref "faq/artifact_integrity.md" >}}">Artifact integrity verification</a></li>
@@ -203,6 +210,7 @@ headless: true
   </li>
 
   <li class="level1 has-children">
+    {{< figure src="/images/arrow.png" class="menu-arrow" >}}
     <a href="#"><b>Beta features</b></a>
     <ul>
       <li class="level2"><a href="{{< relref "beta/comment_on_pipeline_run.md" >}}">Comment on a pipeline run</a></li>

diff --git a/static/javascripts/_common-to-all-pages.js b/static/javascripts/_common-to-all-pages.js
@@ -90,25 +90,8 @@ $(document).ready(function(){
   });
 });
 
-function getPathName() {
-    const currentHref = $(location).attr("href");
-    const element = $('<a>', {
-        href: currentHref
-    });
-
-    let pathname = element.prop('pathname');
-    if (currentHref.indexOf("localhost:1313") >= 0) {
-        return "";
-    }
-    return "/" + element.prop('pathname').split("/")[1]
-}
-
 // START: Menu collapse
 (function() {
-  var addArrowsToAllTopLevelItems = function() {
-    $(".book-menu nav li.level1.has-children").prepend(`<img class="menu-arrow" src="${getPathName()}/images/arrow.png">`);
-  };
-
   var showOnlyTopLevelItems = function() {
     $(".book-menu nav li.level1").removeClass("active").children("ul").hide();
   };
@@ -144,7 +127,6 @@ function getPathName() {
 
 
   $(document).ready(function() {
-    addArrowsToAllTopLevelItems();
     showOnlyTopLevelItems();
     openParentListOfLinkOfCurrentPageInMenu();
 

diff --git a/themes/hugo-book/assets/book.scss b/themes/hugo-book/assets/book.scss
@@ -113,16 +113,22 @@ ul.pagination {
     background: $gray-100;
 
     li.level1 {
-      margin-left: 14px;
+      margin-left: 16px;
 
       &.has-children {
         margin-left: 0px;
 
-        & .menu-arrow {
-          width: 10px;
+        figure.menu-arrow {
+          margin: 0;
+          display: inline-block;
+
+          img {
+            margin-right: 2px;
+            width: 10px;
+          }
         }
 
-        &.active .menu-arrow {
+        &.active figure.menu-arrow img {
           transform: rotate(90deg);
         }
       }