Make custom JS scripts version-bumpable like CSS

13 files changed, 65 insertions, 9 deletions

diff --git a/README.md b/README.md
index 176467ce..cf60af23 100644
--- a/README.md
+++ b/README.md
@@ -318,6 +318,29 @@ We can then loop over the `versions` array with something like:
 Note that the data file must have the `yaml` extension (not `yml`) and that
 we reference the array with a symbol (`:versions`).
 
+## Bumping versions of CSS and Javascript
+
+Whenever the custom CSS and Javascript files under `content/assets/` change,
+make sure to bump their version in the frontmatter.
+
+Always use Nanoc's way of including those files, do not hardcode them in the
+layouts. For example use:
+
+```erb
+<script async type="application/javascript" src="<%= @items['/assets/javascripts/badges.*'].path %>"></script>
+
+<link rel="stylesheet" href="<%= @items['/assets/stylesheets/toc.*'].path %>">
+```
+
+The links pointing to the files should be similar to:
+
+```erb
+<%= @items['/path/to/assets/file.*'].path %>
+```
+
+Nanoc will then build and render those links correctly according with what's
+defined in [`Rules`](/Rules).
+
 ## Review Apps for documentation merge requests
 
 If you are contributing to GitLab docs read how to [create a Review App with each
diff --git a/Rules b/Rules
index 55a330e7..c59e75ed 100644
--- a/Rules
+++ b/Rules
@@ -97,6 +97,11 @@ compile '/**/*.scss' do
   write item.identifier.without_ext + '-v' + rep.item[:version].to_s + '.css'
 end
 
+compile '/**/*.js' do
+  filter :erb
+  write item.identifier.without_ext + '-v' + rep.item[:version].to_s + '.js'
+end
+
 compile '/index.*' do
   filter :erb
   layout '/home.*'
diff --git a/content/assets/javascripts/404.js b/content/assets/javascripts/404.js
index 756d466d..8730f3ae 100644
--- a/content/assets/javascripts/404.js
+++ b/content/assets/javascripts/404.js
@@ -1,3 +1,7 @@
+---
+version: 1
+---
+
 document.addEventListener('DOMContentLoaded', function() {
   var el = document.getElementById('search-input');
   var path = window.location.pathname
diff --git a/content/assets/javascripts/badges.js b/content/assets/javascripts/badges.js
index 26d63a66..f9bf8bdd 100644
--- a/content/assets/javascripts/badges.js
+++ b/content/assets/javascripts/badges.js
@@ -1,3 +1,7 @@
+---
+version: 1
+---
+
 (function() {
   var BADGES_TITLES = {
     core: 'Available in GitLab Core, GitLab.com Free, and higher tiers',
diff --git a/content/assets/javascripts/classlist-polyfill.js b/content/assets/javascripts/classlist-polyfill.js
index 09b2e8b0..b56a0b6c 100644
--- a/content/assets/javascripts/classlist-polyfill.js
+++ b/content/assets/javascripts/classlist-polyfill.js
@@ -1,3 +1,7 @@
+---
+version: 1
+---
+
 /*
  * classList.js: Cross-browser full element.classList implementation.
  * 1.1.20170427
diff --git a/content/assets/javascripts/clipboardjs.js b/content/assets/javascripts/clipboardjs.js
index 6c5214d5..e0cb252c 100644
--- a/content/assets/javascripts/clipboardjs.js
+++ b/content/assets/javascripts/clipboardjs.js
@@ -1,3 +1,7 @@
+---
+version: 1
+---
+
 // add a copy button to every code // working
 $('pre').append($('<button class="clip-btn" title="Click to copy" data-selector="true"><i class="fa fa-clipboard" aria-hidden="true"></i></button>'));
 
diff --git a/content/assets/javascripts/docs.js b/content/assets/javascripts/docs.js
index a5e97a40..c5e5b969 100644
--- a/content/assets/javascripts/docs.js
+++ b/content/assets/javascripts/docs.js
@@ -1,3 +1,7 @@
+---
+version: 1
+---
+
 var NAV_INLINE_BREAKPOINT = 1100;
 
 var landingHeaderBar = document.getElementById('landing-header-bar');
diff --git a/content/assets/javascripts/instantsearch.js b/content/assets/javascripts/instantsearch.js
index 547fc72e..8e3c8578 100644
--- a/content/assets/javascripts/instantsearch.js
+++ b/content/assets/javascripts/instantsearch.js
@@ -1,3 +1,7 @@
+---
+version: 1
+---
+
 const search = instantsearch({
   appId: 'BH4D9OD16A',
   apiKey: 'ce1690e1421303458a1fcbea0cc4a927',
diff --git a/content/assets/javascripts/table-display-block.js b/content/assets/javascripts/table-display-block.js
index 9a9c0ba1..450dab6f 100644
--- a/content/assets/javascripts/table-display-block.js
+++ b/content/assets/javascripts/table-display-block.js
@@ -1,2 +1,6 @@
+---
+version: 1
+---
+
 var tableBlock = document.querySelector('table');
 tableBlock.classList.add('display-block');
diff --git a/layouts/404.html b/layouts/404.html
index 5ff4829b..2fa5034c 100644
--- a/layouts/404.html
+++ b/layouts/404.html
@@ -14,7 +14,7 @@
   <%= render '/footer.*' %>
   <script src="https://cdn.jsdelivr.net/jquery/3.2.1/jquery.min.js"></script>
   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
-  <script type="application/javascript" src="/assets/javascripts/badges.js"></script>
+  <script type="application/javascript" src="<%= @items['/assets/javascripts/badges.*'].path %>"></script>
   <!-- Algolia docsearch https://community.algolia.com/docsearch/ -->
   <script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/2/docsearch.min.js"></script>
   <script type="text/javascript">
@@ -34,7 +34,7 @@
       }
   });
   </script>
-  <script type="application/javascript" src="/assets/javascripts/404.js"></script>
+  <script type="application/javascript" src="<%= @items['/assets/javascripts/404.*'].path %>"></script>
   <%= render '/analytics.*' %>
   <%= render '/https_redirect.*' %>
   </body>
diff --git a/layouts/archives.html b/layouts/archives.html
index 260dcb13..af7468ef 100644
--- a/layouts/archives.html
+++ b/layouts/archives.html
@@ -29,8 +29,8 @@
   <script src="https://cdn.jsdelivr.net/jquery/3.2.1/jquery.min.js"></script>
   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
   <script src="https://cdn.jsdelivr.net/npm/clipboard@2/dist/clipboard.min.js"></script>
-  <script type="application/javascript" src="/assets/javascripts/clipboardjs.js"></script>
-  <script type="application/javascript" src="/assets/javascripts/badges.js"></script>
+  <script type="application/javascript" src="<%= @items['/assets/javascripts/clipboardjs.*'].path %>"></script>
+  <script type="application/javascript" src="<%= @items['/assets/javascripts/badges.*'].path %>"></script>
   <%= render '/footer.*' %>
   <%= render '/docsearch.*' %>
   <%= render '/analytics.*' %>
diff --git a/layouts/default.html b/layouts/default.html
index 60b78a27..0eb1e6ee 100644
--- a/layouts/default.html
+++ b/layouts/default.html
@@ -65,8 +65,8 @@
   <script src="https://cdn.jsdelivr.net/jquery/3.2.1/jquery.min.js"></script>
   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
   <script src="https://cdn.jsdelivr.net/npm/clipboard@2/dist/clipboard.min.js"></script>
-  <script type="application/javascript" src="/assets/javascripts/clipboardjs.js"></script>
-  <script type="application/javascript" src="/assets/javascripts/badges.js"></script>
+  <script type="application/javascript" src="<%= @items['/assets/javascripts/clipboardjs.*'].path %>"></script>
+  <script type="application/javascript" src="<%= @items['/assets/javascripts/badges.*'].path %>"></script>
   <%= render '/docsearch.*' %>
   <%= render '/https_redirect.*' %>
   <% if ENV['NANOC_ENV'] == 'production' %>
@@ -74,7 +74,7 @@
     <%= render '/analytics.*' %>
   <% end %>
   <% if @item[:table_display_block] %>
-    <script type="application/javascript" src="/assets/javascripts/table-display-block.js"></script>
+    <script type="application/javascript" src="<%= @items['/assets/javascripts/table-display-block.*'].path %>"></script>
   <% end %>
   <%= render '/footer.*' %>
 </body>
diff --git a/layouts/instantsearch.html b/layouts/instantsearch.html
index 7203506e..26c91246 100644
--- a/layouts/instantsearch.html
+++ b/layouts/instantsearch.html
@@ -17,9 +17,9 @@
       <div class="clear"></div>
     </div>
       <script src="https://cdn.jsdelivr.net/jquery/3.2.1/jquery.min.js"></script>
-      <script type="application/javascript" src="/assets/javascripts/instantsearch.js"></script>
+      <script type="application/javascript" src="<%= @items['/assets/javascripts/instantsearch.*'].path %>"></script>
       <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
-      <script type="application/javascript" src="/assets/javascripts/badges.js"></script>
+      <script type="application/javascript" src="<%= @items['/assets/javascripts/badges.*'].path %>"></script>
       <%= render '/footer.*' %>
       <%= render '/analytics.*' %>
       <%= render '/https_redirect.*' %>