Add social links and anchor links for each header.

_includes/adding-removing.html

@@ -1,4 +1,4 @@
-<h2>Adding and removing items</h2>
+<h2>Adding and removing items<a href="#adding-removing"></a></h2>
 <p>You can add and remove elements from shuffle after it has been created. This also works for infinite scrolling.</p>
 
 <h3>Add a collection</h3>

_includes/advanced-filters.html

@@ -1,4 +1,4 @@
-<h2>Advanced Filtering</h2>
+<h2>Advanced Filtering<a href="#advanced-filters"></a></h2>
 
 <p>By passing a function to shuffle, you can customize the filtering to your hearts content. Shuffle will iterate over each item and give your function the element wrapped in jQuery and the shuffle instance. Return <code>true</code> to keep the element or <code>false</code> to hide it.</p>
 

_includes/changelog.html

@@ -1,5 +1,7 @@
-<h2>Changes</h2>
+<h2>Changes<a href="#changelog"></a></h2>
 <ul>
+  <li>4.12.14 - Register with bower as <code>shufflejs</code>.</li>
+  <li>4.10.14 - Add AMD support.</li>
   <li>4.8.14 - Separate Modernizr into its own file and custom Shuffle build.</li>
   <li>3.8.14 - Add Bootstrap 3 demo. Fixed issue with percentage width items.</li>
   <li>10.4.13 - Moved some Shuffle instance properties to constants. Converted from 4 to 2 space indentation. Added events enum and pulled out some strings to constants.</li>

_includes/events.html

@@ -1,4 +1,4 @@
-<h2>Events</h2>
+<h2>Events<a href="#events"></a></h2>
 <p>A list of events shuffle triggers:</p>
 <ul>
   <li><code class="language-javascript">'loading.shuffle'</code></li>

_includes/features.html

@@ -1,4 +1,4 @@
-<h2>Features</h2>
+<h2>Features<a href="#features"></a></h2>
 
 <ul>
   <li>Fast - Only one forced synchronous layout (aka reflow) on init, sort, or shuffle.</li>

_includes/options.html

@@ -1,4 +1,4 @@
-<h2>Options</h2>
+<h2>Options<a href="#options"></a></h2>
 
 <p>Settings you can change (these are the defaults)</p>
 <pre rel="JavaScript"><code class="language-javascript">// Overrideable options

_includes/sorting.html

@@ -1,4 +1,4 @@
-<h2>Sorting</h2>
+<h2>Sorting<a href="#sorting"></a></h2>
 
 <p>You can order the elements based off a function you supply. In the demo above, each item has a <code>data-date-created</code> and <code>data-title</code> attribute. When the select option menu changes, a sort object is passed to shuffle.</p>
 

_includes/usage.html

@@ -1,4 +1,4 @@
-<h2>Usage</h2>
+<h2>Usage<a href="#usage"></a></h2>
 
 <h3>The HTML Structure</h3>
 <p>The only real important thing here is the <code class="language-markup token attr-name">data-groups</code> attribute. It has to be a <a href="http://jsonlint.com/">valid JSON</a> array of strings. Optionally, it can be a string delimeted by a value you provide. See <code>delimeter</code> in the <a href="#options">options</a>.</p>

_scss/_helpers.scss

@@ -1,3 +1,5 @@
+.text-center { text-align: center; }
+
 .ib {
   display: inline-block;
 }

_scss/_main.scss

@@ -172,6 +172,12 @@ span.demo-link-container::before {
   margin-top: 10px;
 }
 
+#be-social {
+  h2 {
+    margin-bottom: 32px;
+  }
+}
+
 
 // FAQ
 

_scss/_type.scss

@@ -77,6 +77,26 @@ h4 {
   }
 }
 
+h1 > a,
+h2 > a,
+h3 > a {
+  display: none;
+}
+
+h1:hover > a,
+h2:hover > a,
+h3:hover > a {
+  position: absolute;
+  display: block;
+  top: 0;
+  left: -40px;
+  height: 50px;
+  width: 50px;
+  background: url('../img/link.svg') no-repeat;
+  overflow: hidden;
+  text-indent: -999em;
+}
+
 
 
 .unstyled {

css/style.css

@@ -426,6 +426,26 @@ h4 {
     margin: 2vw 0;
   }
 }
+h1 > a,
+h2 > a,
+h3 > a {
+  display: none;
+}
+
+h1:hover > a,
+h2:hover > a,
+h3:hover > a {
+  position: absolute;
+  display: block;
+  top: 0;
+  left: -40px;
+  height: 50px;
+  width: 50px;
+  background: url("../img/link.svg") no-repeat;
+  overflow: hidden;
+  text-indent: -999em;
+}
+
 .unstyled {
   list-style-type: none;
   padding: 0;
@@ -2049,6 +2069,10 @@ span.demo-link-container::before {
   margin-top: 10px;
 }
 
+#be-social h2 {
+  margin-bottom: 32px;
+}
+
 .search-section {
   margin-top: 1em;
   margin-bottom: 1em;
@@ -2278,6 +2302,10 @@ button:active {
     font-size: .75em;
   }
 }
+.text-center {
+  text-align: center;
+}
+
 .ib {
   display: inline-block;
 }

img/link.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 96 96" enable-background="new 0 0 96 96">
+<g fill="#34495e">
+	<path d="M68.1,28.3c-2.4-2.5-5.6-3.9-9.1-4c-3.7-0.1-7.1,1.5-9.7,4.1l-6,6c1.4-0.3,2.9-0.3,4.3-0.1c0.7,0.1,1.3,0.2,2,0.4   c0,0,0,0,0,0c0.8,0.3,1.7,0.1,2.3-0.5l1.6-1.6c1.2-1.2,2.8-2.1,4.6-2.2c2.3-0.2,4.4,0.7,5.9,2.5c2.4,2.8,2,7-0.6,9.6l-8,8   c-0.8,0.8-1.9,1.4-3,1.8c-0.6,0.2-1.1,0.2-1.7,0.3l-0.2,0c-0.5,0-0.9,0-1.4-0.1c-1.3-0.3-2.5-0.9-3.5-1.9c-0.8-0.8-1.4-1.9-1.8-3   c-0.3,0.2-0.6,0.4-0.9,0.7l-1.6,1.6c-1.4,1.4-1.4,3.6-0.1,4.9c0,0,0,0,0,0c1.1,1.1,2.3,1.9,3.6,2.5c0.5,0.3,1.1,0.5,1.8,0.7   c0.7,0.2,1.3,0.4,2,0.4c0.6,0.1,1.2,0.1,1.8,0.1c2.1,0,4.2-0.5,6.1-1.5c1-0.5,1.9-1.2,2.6-1.9c0.2-0.1,0.3-0.3,0.5-0.4l7.9-7.9   C72.6,41.7,73,33.5,68.1,28.3z"/>
+	<path d="M48.7,61.8c-0.7-0.1-1.3-0.2-2-0.4c0,0,0,0,0,0c-1-0.3-2.1-0.1-2.9,0.7l-1.5,1.5c-1.2,1.2-2.8,2-4.5,2.2   c-2.1,0.2-4.1-0.5-5.5-2c-1.5-1.5-2.2-3.5-2-5.5c0.1-1.7,1-3.3,2.2-4.5l8-8c0.8-0.8,1.9-1.4,3-1.8c0.5-0.2,1.1-0.2,1.7-0.3l0.3,0   c0.5,0,0.9,0,1.4,0.1c1.3,0.3,2.5,0.9,3.5,1.9c0.8,0.8,1.4,1.9,1.7,3c0.3-0.2,0.6-0.4,0.8-0.7l1.6-1.6c1.3-1.3,1.4-3.6,0.1-4.9   c0,0,0,0,0,0c-1.1-1.1-2.3-1.9-3.6-2.5c-0.5-0.3-1.1-0.5-1.8-0.7c-0.7-0.2-1.3-0.4-2-0.4c-2.7-0.4-5.5,0.1-7.9,1.4   c-1,0.5-1.9,1.2-2.6,1.8c-0.2,0.1-0.3,0.2-0.5,0.4l-7.9,7.9c-5,5-5.4,13.2-0.5,18.3c2.4,2.5,5.6,3.9,9.1,4c3.7,0.1,7.1-1.5,9.7-4.1   l5.8-5.8c-0.7,0.1-1.3,0.2-2,0.2C49.9,61.9,49.3,61.9,48.7,61.8z"/>
+</g>
+</svg>

index.html

@@ -8,7 +8,7 @@ prism: true
 ---
 <section id="downloads">
   <div class="container-fluid">
-    <h2>Downloads</h2>
+    <h2>Downloads<a href="#downloads"></a></h2>
     <div class="row-fluid">
       <nav class="span6" role="secondary">
         <a href="{{ site.baseurl }}/dist/jquery.shuffle.js">jquery.shuffle.js</a>
@@ -21,7 +21,7 @@ prism: true
 
 <section id="demo">
   <div class="container-fluid">
-    <h2>Example</h2>
+    <h2>Example<a href="#demo"></a></h2>
   </div>
 
   <div class="container-fluid filter">
@@ -66,7 +66,7 @@ prism: true
 
 <section id="demos">
   <div class="container-fluid">
-    <h2>Demos</h2>
+    <h2>Demos<a href="#demos"></a></h2>
     {% include demo-list.html %}
   </div>
 </section>
@@ -115,7 +115,7 @@ prism: true
 
 <section id="extra-features">
   <div class="container-fluid">
-    <h2>Extra Features</h2>
+    <h2>Extra Features<a href="#extra-features"></a></h2>
 
     <p>Shuffle likely will not grow much farther than the current feature set. If you need something with drag and drop, filling in gaps, more layout modes, etc., I suggest looking into <a target="_blank" href="http://packery.metafizzy.co/">packery</a> or <a target="_blank" href="http://isotope.metafizzy.co/">isotope</a>.</p>
   </div>
@@ -123,7 +123,7 @@ prism: true
 
 <section id="dependencies">
   <div class="container-fluid">
-    <h2>Dependencies</h2>
+    <h2>Dependencies<a href="#dependencies"></a></h2>
 
     <ul>
         <li><a target="_blank" href="http://jquery.com">jQuery 1.9+</a></li>
@@ -140,7 +140,7 @@ prism: true
 
 <section id="browsers">
   <div class="container-fluid">
-    <h2>Supported Browsers</h2>
+    <h2>Supported Browsers<a href="#browsers"></a></h2>
 
     <ul>
         <li>Chrome</li>
@@ -156,15 +156,16 @@ prism: true
   </div>
 </section>
 
-<section id="links">
+<section id="be-social">
   <div class="container-fluid">
-    <h2>Links</h2>
+    <h2>Be Social<a href="#be-social"></a></h2>
+    <div class="text-center">
+      <iframe src="http://ghbtns.com/github-btn.html?user=Vestride&repo=Shuffle&type=watch&count=true&size=large" height="30" width="170" frameborder="0" scrolling="0" style="width:170px; height: 30px;" allowTransparency="true" seamless></iframe>
 
-    <ul>
-        <li><a href="https://github.com/Vestride/Shuffle">GitHub Repo</a></li>
-        <li><a href="http://isotope.metafizzy.co/">Inspired by Isotope</a></li>
-        <li><a href="http://github.com/Vestride">Me</a></li>
-    </ul>
+      <a href="https://twitter.com/share" class="twitter-share-button" data-url="http://vestride.github.io/Shuffle/" data-via="Vestride" data-size="large">Tweet</a>
+
+      <div class="g-plusone" data-href="http://vestride.github.io/Shuffle/" data-size="standard" data-annotation="bubble"></div>
+    </div>
   </div>
 </section>
 
@@ -177,3 +178,14 @@ prism: true
 
 
 {% include credit-jake.html %}
+
+<script>
+
+!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');
+
+(function() {
+  var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
+  po.src = 'https://apis.google.com/js/platform.js';
+  var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
+})();
+</script>