From 7225f88f42ec48a488eec0182ee51fc4e86a6231 Mon Sep 17 00:00:00 2001
From: Glen Cheney <cheney.glen@gmail.com>
Date: Sat, 12 Apr 2014 14:49:41 -0700
Subject: [PATCH] Add social links and anchor links for each header.

---
 _includes/adding-removing.html  |  2 +-
 _includes/advanced-filters.html |  2 +-
 _includes/changelog.html        |  4 +++-
 _includes/events.html           |  2 +-
 _includes/features.html         |  2 +-
 _includes/options.html          |  2 +-
 _includes/sorting.html          |  2 +-
 _includes/usage.html            |  2 +-
 _scss/_helpers.scss             |  2 ++
 _scss/_main.scss                |  6 ++++++
 _scss/_type.scss                | 20 +++++++++++++++++
 css/style.css                   | 28 ++++++++++++++++++++++++
 img/link.svg                    |  6 ++++++
 index.html                      | 38 ++++++++++++++++++++++-----------
 14 files changed, 97 insertions(+), 21 deletions(-)
 create mode 100644 img/link.svg

diff --git a/_includes/adding-removing.html b/_includes/adding-removing.html
index ad1dcd2..6a68562 100644
--- a/_includes/adding-removing.html
+++ b/_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>
diff --git a/_includes/advanced-filters.html b/_includes/advanced-filters.html
index f6ab919..381722d 100644
--- a/_includes/advanced-filters.html
+++ b/_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>
 
diff --git a/_includes/changelog.html b/_includes/changelog.html
index 6103c2b..acbe596 100644
--- a/_includes/changelog.html
+++ b/_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>
diff --git a/_includes/events.html b/_includes/events.html
index 9ec137a..357570c 100644
--- a/_includes/events.html
+++ b/_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>
diff --git a/_includes/features.html b/_includes/features.html
index 47b83cd..426a5f3 100644
--- a/_includes/features.html
+++ b/_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>
diff --git a/_includes/options.html b/_includes/options.html
index 8f45059..b3fcf46 100644
--- a/_includes/options.html
+++ b/_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
diff --git a/_includes/sorting.html b/_includes/sorting.html
index 86cf532..defb653 100644
--- a/_includes/sorting.html
+++ b/_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>
 
diff --git a/_includes/usage.html b/_includes/usage.html
index 623116b..f8e03c6 100644
--- a/_includes/usage.html
+++ b/_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>
diff --git a/_scss/_helpers.scss b/_scss/_helpers.scss
index 57ca264..20062e1 100644
--- a/_scss/_helpers.scss
+++ b/_scss/_helpers.scss
@@ -1,3 +1,5 @@
+.text-center { text-align: center; }
+
 .ib {
   display: inline-block;
 }
diff --git a/_scss/_main.scss b/_scss/_main.scss
index a3fbc15..469ee73 100644
--- a/_scss/_main.scss
+++ b/_scss/_main.scss
@@ -172,6 +172,12 @@ span.demo-link-container::before {
   margin-top: 10px;
 }
 
+#be-social {
+  h2 {
+    margin-bottom: 32px;
+  }
+}
+
 
 // FAQ
 
diff --git a/_scss/_type.scss b/_scss/_type.scss
index bb5e50b..a7d2be2 100644
--- a/_scss/_type.scss
+++ b/_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 {
diff --git a/css/style.css b/css/style.css
index c5ba49c..277181f 100644
--- a/css/style.css
+++ b/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;
 }
diff --git a/img/link.svg b/img/link.svg
new file mode 100644
index 0000000..e6879be
--- /dev/null
+++ b/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>
diff --git a/index.html b/index.html
index bae6870..0bcc690 100644
--- a/index.html
+++ b/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>