Fix search, barely

themes/academic/assets/js/academic-search.js

@@ -50,11 +50,11 @@ function updateURL(url) {
 
 // Pre-process new search query.
 function initSearch(force, fuse) {
-  let query = $("#search-query").val();
+  let query = document.querySelector("#search-query").value;
 
   // If query deleted, clear results.
-  if ( query.length < 1) {
+  if (query.length < 1) {
-    $('#search-hits').empty();
+    document.querySelector('#search-hits').innerHTML = "";
   }
 
   // Check for timer event (enter key not pressed) and query less than minimum length required.
@@ -62,7 +62,7 @@ function initSearch(force, fuse) {
     return;
 
   // Do search.
-  $('#search-hits').empty();
+  document.querySelector('#search-hits').innerHTML = "";
   searchAcademic(query, fuse);
   let newURL = window.location.protocol + "//" + window.location.host + window.location.pathname + '?q=' + encodeURIComponent(query) + window.location.hash;
   updateURL(newURL);
@@ -74,16 +74,17 @@ function searchAcademic(query, fuse) {
   // console.log({"results": results});
 
   if (results.length > 0) {
-    $('#search-hits').append('<h3 class="mt-0">' + results.length + ' ' + i18n.results + '</h3>');
+    document.querySelector('#search-hits').insertAdjacentHTML('beforeend', '<h3 class="mt-0">' + results.length + ' ' + i18n.results + '</h3>');
     parseResults(query, results);
   } else {
-    $('#search-hits').append('<div class="search-no-results">' + i18n.no_results + '</div>');
+    document.querySelector('#search-hits').insertAdjacentHTML('beforeend', '<div class="search-no-results">' + i18n.no_results + '</div>');
   }
 }
 
 // Parse search results.
 function parseResults(query, results) {
-  $.each( results, function(key, value) {
+  console.log(results);
+  results.forEach(function (value, key) {
     let content_key = value.item.section;
     let content = "";
     let snippet = "";
@@ -99,7 +100,7 @@ function parseResults(query, results) {
     if ( fuseOptions.tokenize ) {
       snippetHighlights.push(query);
     } else {
-      $.each( value.matches, function(matchKey, matchValue) {
+      value.matches.forEach(function(matchValue, matchKey) {
         if (matchValue.key == "content") {
           let start = (matchValue.indices[0][0]-summaryLength>0) ? matchValue.indices[0][0]-summaryLength : 0;
           let end = (matchValue.indices[0][1]+summaryLength<content.length) ? matchValue.indices[0][1]+summaryLength : content.length;
@@ -114,7 +115,7 @@ function parseResults(query, results) {
     }
 
     // Load template.
-    let template = $('#search-hit-fuse-template').html();
+    let template = document.querySelector('#search-hit-fuse-template').innerHTML;
 
     // Localize content types.
     if (content_key in content_type) {
@@ -127,16 +128,15 @@ function parseResults(query, results) {
       title: value.item.title,
       type: content_key,
       relpermalink: value.item.relpermalink,
-      snippet: snippet
+      snippet: snippet,
     };
     let output = render(template, templateData);
-    $('#search-hits').append(output);
+    document.querySelector('#search-hits').insertAdjacentHTML('beforeend', output);
 
     // Highlight search terms in result.
-    $.each( snippetHighlights, function(hlKey, hlValue){
+    snippetHighlights.forEach(function (hlValue, hlKey) {
-      $("#summary-"+key).mark(hlValue);
+      new Mark(document.querySelector("#summary-" + key)).mark(hlValue);
     });
-
   });
 }
 
@@ -158,27 +158,24 @@ function render(template, data) {
 // If Academic's in-built search is enabled and Fuse loaded, then initialize it.
 if (typeof Fuse === 'function') {
 // Wait for Fuse to initialize.
-  $.getJSON(search_config.indexURI, function (search_index) {
+  fetch(search_config.indexURI).then((response) => response.json()).then(function (search_index) {
     let fuse = new Fuse(search_index, fuseOptions);
 
     // On page load, check for search query in URL.
     if (query = getSearchQuery('q')) {
-      $("body").addClass('searching');
+      document.querySelector("body").classList.add('searching');
-      $('.search-results').css({opacity: 0, visibility: "visible"}).animate({opacity: 1},200);
+      document.querySelector("#search-query").value = query;
-      $("#search-query").val(query);
+      document.querySelector("#search-query").focus();
-      $("#search-query").focus();
       initSearch(true, fuse);
     }
 
     // On search box key up, process query.
-    $('#search-query').keyup(function (e) {
+    document.querySelector('#search-query').addEventListener('keyup', function (e) {
-      clearTimeout($.data(this, 'searchTimer')); // Ensure only one timer runs!
+      clearTimeout(this.dataset.searchTimer);
       if (e.keyCode == 13) {
         initSearch(true, fuse);
       } else {
-        $(this).data('searchTimer', setTimeout(function () {
+        this.dataset.searchTimer = setTimeout(function () { initSearch(false, fuse); }, 250);
-          initSearch(false, fuse);
-        }, 250));
       }
     });
   });

themes/academic/assets/js/academic.js

@@ -5,150 +5,14 @@
  *  Core JS functions and initialization.
  **************************************************/
 
-(function ($) {
+// Filter by search term.
-
+let $quickSearch = $('.filter-search').keyup(debounce(function () {
-  /* ---------------------------------------------------------------------------
-   * Responsive scrolling for URL hashes.
-   * --------------------------------------------------------------------------- */
-
-  // Dynamically get responsive navigation bar height for offsetting Scrollspy.
-  function getNavBarHeight() {
-    let $navbar = $('#navbar-main');
-    let navbar_offset = $navbar.outerHeight();
-    console.debug('Navbar height: ' + navbar_offset);
-    return navbar_offset;
-  }
-
-  /**
-   * Responsive hash scrolling.
-   * Check for a URL hash as an anchor.
-   * If it exists on current page, scroll to it responsively.
-   * If `target` argument omitted (e.g. after event), assume it's the window's hash.
-   */
-  function scrollToAnchor(target) {
-    // If `target` is undefined or HashChangeEvent object, set it to window's hash.
-    // Decode the hash as browsers can encode non-ASCII characters (e.g. Chinese symbols).
-    target = (typeof target === 'undefined' || typeof target === 'object') ? decodeURIComponent(window.location.hash) : target;
-
-    // If target element exists, scroll to it taking into account fixed navigation bar offset.
-    if ($(target).length) {
-      // Escape special chars from IDs, such as colons found in Markdown footnote links.
-      target = '#' + $.escapeSelector(target.substring(1));  // Previously, `target = target.replace(/:/g, '\\:');`
-
-      let elementOffset = Math.ceil($(target).offset().top - getNavBarHeight());  // Round up to highlight right ID!
-      $('body').addClass('scrolling');
-      $('html, body').animate({
-        scrollTop: elementOffset
-      }, 600, function () {
-        $('body').removeClass('scrolling');
-      });
-    } else {
-      console.debug('Cannot scroll to target `#' + target + '`. ID not found!');
-    }
-  }
-
-  // Make Scrollspy responsive.
-  function fixScrollspy() {
-    let $body = $('body');
-    let data = $body.data('bs.scrollspy');
-    if (data) {
-      data._config.offset = getNavBarHeight();
-      $body.data('bs.scrollspy', data);
-      $body.scrollspy('refresh');
-    }
-  }
-
-  function removeQueryParamsFromUrl() {
-    if (window.history.replaceState) {
-      let urlWithoutSearchParams = window.location.protocol + "//" + window.location.host + window.location.pathname + window.location.hash;
-      window.history.replaceState({path: urlWithoutSearchParams}, '', urlWithoutSearchParams);
-    }
-  }
-
-  // Check for hash change event and fix responsive offset for hash links (e.g. Markdown footnotes).
-  window.addEventListener("hashchange", scrollToAnchor);
-
-  /* ---------------------------------------------------------------------------
-   * Add smooth scrolling to all links inside the main navbar.
-   * --------------------------------------------------------------------------- */
-
-  $('#navbar-main li.nav-item a.nav-link').on('click', function (event) {
-    // Store requested URL hash.
-    let hash = this.hash;
-
-    // If we are on a widget page and the navbar link is to a section on the same page.
-    if (this.pathname === window.location.pathname && hash && $(hash).length && ($(".js-widget-page").length > 0)) {
-      // Prevent default click behavior.
-      event.preventDefault();
-
-      // Use jQuery's animate() method for smooth page scrolling.
-      // The numerical parameter specifies the time (ms) taken to scroll to the specified hash.
-      let elementOffset = Math.ceil($(hash).offset().top - getNavBarHeight());  // Round up to highlight right ID!
-
-      // Uncomment to debug.
-      // let scrollTop = $(window).scrollTop();
-      // let scrollDelta = (elementOffset - scrollTop);
-      // console.debug('Scroll Delta: ' + scrollDelta);
-
-      $('html, body').animate({
-        scrollTop: elementOffset
-      }, 800);
-    }
-  });
-
-  /* ---------------------------------------------------------------------------
-   * Hide mobile collapsable menu on clicking a link.
-   * --------------------------------------------------------------------------- */
-
-  $(document).on('click', '.navbar-collapse.show', function (e) {
-    //get the <a> element that was clicked, even if the <span> element that is inside the <a> element is e.target
-    let targetElement = $(e.target).is('a') ? $(e.target) : $(e.target).parent();
-
-    if (targetElement.is('a') && targetElement.attr('class') != 'dropdown-toggle') {
-      $(this).collapse('hide');
-    }
-  });
-
-  /* ---------------------------------------------------------------------------
-   * Filter publications.
-   * --------------------------------------------------------------------------- */
-
-  // Active publication filters.
-  let pubFilters = {};
-
-  // Search term.
-  let searchRegex;
-
-  // Filter values (concatenated).
-  let filterValues;
-
-  // Publication container.
-  let $grid_pubs = $('#container-publications');
-
-  // Initialise Isotope.
-  $grid_pubs.isotope({
-    itemSelector: '.isotope-item',
-    percentPosition: true,
-    masonry: {
-      // Use Bootstrap compatible grid layout.
-      columnWidth: '.grid-sizer'
-    },
-    filter: function () {
-      let $this = $(this);
-      let searchResults = searchRegex ? $this.text().match(searchRegex) : true;
-      let filterResults = filterValues ? $this.is(filterValues) : true;
-      return searchResults && filterResults;
-    }
-  });
-
-  // Filter by search term.
-  let $quickSearch = $('.filter-search').keyup(debounce(function () {
   searchRegex = new RegExp($quickSearch.val(), 'gi');
   $grid_pubs.isotope();
-  }));
+}));
 
-  // Debounce input to prevent spamming filter requests.
+// Debounce input to prevent spamming filter requests.
-  function debounce(fn, threshold) {
+function debounce(fn, threshold) {
   let timeout;
   threshold = threshold || 100;
   return function debounced() {
@@ -162,18 +26,18 @@
 
     timeout = setTimeout(delayed, threshold);
   };
-  }
+}
 
-  // Flatten object by concatenating values.
+// Flatten object by concatenating values.
-  function concatValues(obj) {
+function concatValues(obj) {
   let value = '';
   for (let prop in obj) {
     value += obj[prop];
   }
   return value;
-  }
+}
 
-  $('.pub-filters').on('change', function () {
+$('.pub-filters').on('change', function () {
   let $this = $(this);
 
   // Get group key.
@@ -198,10 +62,10 @@
       window.location.hash = '';
     }
   }
-  });
+});
 
-  // Filter publications according to hash in URL.
+// Filter publications according to hash in URL.
-  function filter_publications() {
+function filter_publications() {
   let urlHash = window.location.hash.replace('#', '');
   let filterValue = '*';
 
@@ -220,13 +84,13 @@
 
   // Set selected option.
   $('.pubtype-select').val(filterValue);
-  }
+}
 
-  /* ---------------------------------------------------------------------------
+/* ---------------------------------------------------------------------------
-  * Google Maps or OpenStreetMap via Leaflet.
+* Google Maps or OpenStreetMap via Leaflet.
-  * --------------------------------------------------------------------------- */
+* --------------------------------------------------------------------------- */
 
-  function initMap() {
+function initMap() {
   if ($('#map').length) {
     let map_provider = $('#map-provider').val();
     let lat = $('#map-lat').val();
@@ -283,13 +147,13 @@
       marker.bindPopup(address + '<p><a href="https://www.openstreetmap.org/directions?engine=osrm_car&route=' + url + '">Routing via OpenStreetMap</a></p>');
     }
   }
-  }
+}
 
-  /* ---------------------------------------------------------------------------
+/* ---------------------------------------------------------------------------
  * GitHub API.
  * --------------------------------------------------------------------------- */
 
-  function printLatestRelease(selector, repo) {
+function printLatestRelease(selector, repo) {
   $.getJSON('https://api.github.com/repos/' + repo + '/tags').done(function (json) {
     let release = json[0];
     $(selector).append(' ' + release.name);
@@ -297,13 +161,13 @@
     let err = textStatus + ", " + error;
     console.log("Request Failed: " + err);
   });
-  }
+}
 
-  /* ---------------------------------------------------------------------------
+/* ---------------------------------------------------------------------------
-  * Toggle search dialog.
+* Toggle search dialog.
-  * --------------------------------------------------------------------------- */
+* --------------------------------------------------------------------------- */
 
-  function toggleSearchDialog() {
+function toggleSearchDialog() {
   if ($('body').hasClass('searching')) {
     // Clear search query and hide search modal.
     $('[id=search-query]').blur();
@@ -330,22 +194,22 @@
     $('.search-results').css({opacity: 0, visibility: 'visible'}).animate({opacity: 1}, 200);
     $('#search-query').focus();
   }
-  }
+}
 
-  /* ---------------------------------------------------------------------------
+/* ---------------------------------------------------------------------------
-  * Change Theme Mode (0: Day, 1: Night, 2: Auto).
+* Change Theme Mode (0: Day, 1: Night, 2: Auto).
-  * --------------------------------------------------------------------------- */
+* --------------------------------------------------------------------------- */
 
-  function canChangeTheme() {
+function canChangeTheme() {
   // If the theme changer component is present, then user is allowed to change the theme variation.
   return $('.js-theme-selector').length;
-  }
+}
 
-  function getThemeMode() {
+function getThemeMode() {
   return parseInt(localStorage.getItem('dark_mode') || 2);
-  }
+}
 
-  function changeThemeModeClick(newMode) {
+function changeThemeModeClick(newMode) {
   console.info('Request to set theme.');
   if (!canChangeTheme()) {
     console.info('Cannot set theme - admin disabled theme selector.');
@@ -381,9 +245,9 @@
       break;
   }
   renderThemeVariation(isDarkTheme);
-  }
+}
 
-  function showActiveTheme(mode){
+function showActiveTheme(mode){
   switch (mode) {
     case 0:
       // Dark.
@@ -404,9 +268,9 @@
       $('.js-set-theme-auto').removeClass('dropdown-item-active');
       break;
   }
-  }
+}
 
-  function getThemeVariation() {
+function getThemeVariation() {
   if (!canChangeTheme()) {
     return isSiteThemeDark;  // Use the site's default theme variation based on `light` in the theme file.
   }
@@ -432,16 +296,16 @@
       break;
   }
   return isDarkTheme;
-  }
+}
 
-  /**
+/**
  * Render theme variation (day or night).
  *
  * @param {int} isDarkTheme - TODO: convert to boolean.
  * @param {boolean} init
  * @returns {undefined}
  */
-  function renderThemeVariation(isDarkTheme, init = false) {
+function renderThemeVariation(isDarkTheme, init = false) {
   // Is code highlighting enabled in site config?
   const codeHlEnabled = $('link[title=hl-light]').length > 0;
   const codeHlLight = $('link[title=hl-light]')[0];
@@ -494,9 +358,9 @@
       }
     }
   }
-  }
+}
 
-  function initThemeVariation() {
+function initThemeVariation() {
   // If theme changer component present, set its icon according to the theme mode (day, night, or auto).
   if (canChangeTheme) {
     let themeMode = getThemeMode();
@@ -518,13 +382,13 @@
   // Render the day or night theme.
   let isDarkTheme = getThemeVariation();
   renderThemeVariation(isDarkTheme, true);
-  }
+}
 
-  /* ---------------------------------------------------------------------------
+/* ---------------------------------------------------------------------------
-  * Normalize Bootstrap Carousel Slide Heights.
+* Normalize Bootstrap Carousel Slide Heights.
-  * --------------------------------------------------------------------------- */
+* --------------------------------------------------------------------------- */
 
-  function normalizeCarouselSlideHeights() {
+function normalizeCarouselSlideHeights() {
   $('.carousel').each(function () {
     // Get carousel slides.
     let items = $('.carousel-item', this);
@@ -536,16 +400,16 @@
     }).get());
     items.css('min-height', maxHeight + 'px');
   })
-  }
+}
 
-  /* ---------------------------------------------------------------------------
+/* ---------------------------------------------------------------------------
- * Fix Hugo's Goldmark output and Mermaid code blocks.
+* Fix Hugo's Goldmark output and Mermaid code blocks.
- * --------------------------------------------------------------------------- */
+* --------------------------------------------------------------------------- */
 
-  /**
+/**
  * Fix Hugo's Goldmark output.
  */
-  function fixHugoOutput() {
+function fixHugoOutput() {
   // Fix Goldmark table of contents.
   // - Must be performed prior to initializing ScrollSpy.
   $('#TableOfContents').addClass('nav flex-column');
@@ -554,13 +418,13 @@
 
   // Fix Goldmark task lists (remove bullet points).
   $("input[type='checkbox'][disabled]").parents('ul').addClass('task-list');
-  }
+}
 
-  /**
+/**
  * Fix Mermaid.js clash with Highlight.js.
  * Refactor Mermaid code blocks as divs to prevent Highlight parsing them and enable Mermaid to parse them.
  */
-  function fixMermaid() {
+function fixMermaid() {
   let mermaids = [];
   [].push.apply(mermaids, document.getElementsByClassName('language-mermaid'));
   for (let i = 0; i < mermaids.length; i++) {
@@ -570,13 +434,13 @@
       return $("<div />").append($(this).contents()).addClass('mermaid');
     });
   }
-  }
+}
 
-  /* ---------------------------------------------------------------------------
+/* ---------------------------------------------------------------------------
  * On document ready.
  * --------------------------------------------------------------------------- */
 
-  $(document).ready(function () {
+$(document).ready(function () {
   fixHugoOutput();
   fixMermaid();
 
@@ -629,13 +493,13 @@
       renderThemeVariation(isDarkTheme);
     }
   });
-  });
+});
 
-  /* ---------------------------------------------------------------------------
+/* ---------------------------------------------------------------------------
  * On window loaded.
  * --------------------------------------------------------------------------- */
 
-  $(window).on('load', function () {
+$(window).on('load', function () {
   // Filter projects.
   $('.projects-container').each(function (index, container) {
     let $container = $(container);
@@ -754,13 +618,13 @@
     }
   });
 
-  });
+});
 
-  // Normalize Bootstrap carousel slide heights.
+// Normalize Bootstrap carousel slide heights.
-  $(window).on('load resize orientationchange', normalizeCarouselSlideHeights);
+$(window).on('load resize orientationchange', normalizeCarouselSlideHeights);
 
-  // Automatic main menu dropdowns on mouse over.
+// Automatic main menu dropdowns on mouse over.
-  $('body').on('mouseenter mouseleave', '.dropdown', function (e) {
+$('body').on('mouseenter mouseleave', '.dropdown', function (e) {
   var dropdown = $(e.target).closest('.dropdown');
   var menu = $('.dropdown-menu', dropdown);
   dropdown.addClass('show');
@@ -792,6 +656,6 @@
     clearTimeout(resizeTimer);
     resizeTimer = setTimeout(fixScrollspy, 200);
   });
-  });
+});
 
 })(jQuery);

themes/academic/assets/scss/ansol.scss

@@ -327,3 +327,17 @@ article.article h1 {
   font-weight: 300;
   line-height: 2.5rem;
 }
+
+.searching .search-results { display: block; }
+.search-results { display: none; }
+
+.search-results {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  overflow: scroll;
+  background-color: white;
+}
+

themes/academic/layouts/_default/baseof.html

@@ -4,7 +4,7 @@
   <body>
     <nav class="main">
       <div class="body-width">
-        <a class="menu" href="#" onclick="this.parentNode.parentNode.classList.toggle('menu--expanded')"><img src="{{ (resources.Get "images/menu.svg").Permalink }}"></a>
+        <a class="menu" href="#" onclick="this.parentNode.parentNode.classList.toggle('menu--expanded'); return false;"><img src="{{ (resources.Get "images/menu.svg").Permalink }}"></a>
         <a href="{{ (site.GetPage "").Permalink }}"><img src="{{ (resources.Get "images/logo.svg").Permalink }}" alt="Associação Nacional para o Software Livre" /></a>
         <ul class='sections'>
           <li><a href="{{ (site.GetPage "Section" "noticias").Permalink }}">Notícias</a></li>
@@ -13,13 +13,14 @@
           <li><a href="{{ (site.GetPage "Section" "eventos").Permalink }}">Eventos</a></li>
           <li><a href="{{ (site.GetPage "sobre").Permalink }}">Sobre</a></li>
         </ul>
-        <a class='nav-search' href="#" class="js-search">Pesquisar</a>
+        <a class='nav-search' href="#" onclick="document.querySelector('body').classList.toggle('searching'); return false;">Pesquisar</a>
       </div>
     </nav>
     <main>
       {{ block "main" . }}{{ end }}
     </main>
 
+    {{ partial "search" . }}
     {{ partial "site_js" . }}
 
     <footer>

themes/academic/layouts/partials/search.html

@@ -7,7 +7,7 @@
               <h1>{{ i18n "search" }}</h1>
             </div>
             <div class="col-6 col-search-close">
-          <a class="js-search" href="#"><i class="fas fa-times-circle text-muted" aria-hidden="true"></i></a>
+              <a class="js-search" href="#" onclick="document.querySelector('body').classList.toggle('searching'); return false;">Fechar</a>
             </div>
           </div>
 
@@ -22,11 +22,9 @@
 
         </section>
         <section class="section-search-results">
-
           <div id="search-hits">
             <!-- Search results will appear here -->
           </div>
-
         </section>
       </div>
-</aside>
+    </aside>

themes/academic/layouts/partials/site_js.html

@@ -32,10 +32,9 @@
       const search_config = {{ $search_config | jsonify | safeJS }};
       const i18n = {{ $search_i18n | jsonify | safeJS }};
       const content_type = {
-        'post': {{ i18n "posts" }},
+        'noticias': {{ i18n "noticias" }},
-        'project': {{ i18n "projects" }},
+        'eventos': {{ i18n "eventos" }},
-        'publication' : {{ i18n "publications" }},
+        'iniciativas' : {{ i18n "iniciativas" }},
-        'talk' : {{ i18n "talks" }},
         'slides' : {{ i18n "slides" | default (i18n "btn_slides") }}
       };
     </script>
@@ -70,21 +69,10 @@
     {{ printf "<script src=\"%s\" integrity=\"%s\" crossorigin=\"anonymous\"></script>" (printf $js.mark.url $js.mark.version) $js.mark.sri | safeHTML }}
     {{ end }}
 
-    {{ $js_comment := printf "/* Source Themes Academic v%s | https://sourcethemes.com/academic/ */\n" site.Data.academic.version }}
-    {{ $js_bundle_head := $js_comment | resources.FromString "js/bundle-head.js" }}
-    {{ $js_linebreak := "\n" | resources.FromString "js/linebreak.js" }}{{/* Fix no line break after Bootstrap JS causing error. */}}
-    {{ $js_academic := resources.Get "js/academic.js" }}
     {{ $js_academic_search := resources.Get "js/academic-search.js" }}
-    {{ $js_bootstrap := resources.Get "js/vendor/bootstrap.min.js" }}
+    {{ $js_fuse := resources.Get "js/vendor/fuse.min.js" }}
-    {{ $js_bundle := slice $js_bootstrap $js_linebreak $js_academic }}
+    {{ $js_mark := resources.Get "js/vendor/mark.min.js" }}
-    {{ if eq site.Params.search.engine 1 }}
+    {{ $js_bundle := slice $js_mark $js_fuse $js_academic_search | resources.Concat "js/academic.min.js" }}
-      {{ $js_bundle = $js_bundle | append $js_academic_search }}
-    {{ end }}
-    {{ range site.Params.plugins_js }}
-      {{ $js_bundle = $js_bundle | append (resources.Get (printf "js/%s.js" .)) }}
-    {{ end }}
-    {{ $js_bundle := $js_bundle | resources.Concat "js/academic-bundle-pre.js" | minify }}
-    {{ $js_bundle := slice $js_bundle_head $js_bundle | resources.Concat "js/academic.min.js" | fingerprint "md5" }}
     <script src="{{ $js_bundle.RelPermalink }}"></script>
 
     {{ partial "custom_js" . }}