[FLINK-3577] [docs] Display anchor links when hovering over headers.

This closes apache#1762
Adebski · Mar 10, 2016 · 5fbedff · 5fbedff
1 parent f6e6924
commit 5fbedff
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 1 deletion.
diff --git a/LICENSE b/LICENSE
@@ -233,6 +233,7 @@ The Apache Flink project bundles the following files under the MIT License:
  - moment.js v2.10.6 (http://momentjs.com/docs/) - Copyright (c) 2011-2014 Tim Wood, Iskren Chernev, Moment.js contributors
  - moment-duration-format v1.3.0 (https://github.com/jsmreese/moment-duration-format) - Copyright (c) 2013 John Madhavan-Reese
  - qtip2 v2.2.1 (http://qtip2.com) - Copyright (c) 2012 Craig Michael Thompson
+ - AnchorJS (https://github.com/bryanbraun/anchorjs) - Copyright (c) 2013 Craig Michael Thompson
 
 All rights reserved.
 

diff --git a/docs/_layouts/base.html b/docs/_layouts/base.html
@@ -73,7 +73,8 @@
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
     <!-- Include all compiled plugins (below), or include individual files as needed -->
     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
-    <script src="{{ site.baseurl }}/page/js/codetabs.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/anchor-js/3.1.0/anchor.min.js"></script>
+    <script src="{{ site.baseurl }}/page/js/flink.js"></script>
 
     <!-- Google Analytics -->
     <script>

diff --git a/docs/page/css/flink.css b/docs/page/css/flink.css
@@ -225,3 +225,14 @@ th {
 td {
 	padding: 5px;
 }
+
+/*=============================================================================
+            AnchorJS (anchor links when hovering over headers)
+=============================================================================*/
+
+.anchorjs-link:hover {
+    text-decoration: none;
+}
+*:hover > .anchorjs-link {
+    transition: color .25s linear;
+}
diff --git a/docs/page/js/codetabs.js → docs/page/js/flink.js b/docs/page/js/codetabs.js → docs/page/js/flink.js
@@ -111,6 +111,13 @@ $(function() {
   codeTabs();
   viewSolution();
 
+  // Display anchor links when hovering over headers. For documentation of the
+  // configuration options, see the AnchorJS documentation.
+  anchors.options = {
+      placement: 'right'
+  };
+  anchors.add();
+
   $(window).bind('hashchange', function() {
     maybeScrollToHash();
   });