update social links when scrolling

en-GB/index.html

@@ -97,13 +97,13 @@
           }
         }
       </style>
-      <a href="https://www.reddit.com/submit?url=https://pomax.github.io/bezierinfo&title=A Primer on Bézier Curves&text=A free, online book for when you really need to know how to do Bézier things.">
+      <a class="social reddit" href="https://www.reddit.com/submit?url=https://pomax.github.io/bezierinfo&title=A Primer on Bézier Curves&text=A free, online book for when you really need to know how to do Bézier things.">
         <img src="https://www.redditstatic.com/spreddit1.gif" alt="submit to reddit" title="submit to reddit">
       </a>
-      <a href="https://news.ycombinator.com/submitlink?u=https://pomax.github.io/bezierinfo&t=A Primer on Bézier Curves">
+      <a class="social hn" href="https://news.ycombinator.com/submitlink?u=https://pomax.github.io/bezierinfo&t=A Primer on Bézier Curves">
         <img src="https://news.ycombinator.com/y18.gif" alt="submit to hacker news" title="submit to hacker news">
       </a>
-      <a href="https://twitter.com/intent/tweet?hashtags=bezier,curves,maths&original_referer=https://pomax.github.io/bezierinfo&text=Reading%20%22A%20Primer%20on%20Bezier%20Curves%22%20by%20@TheRealPomax%20over%20on%20https://pomax.github.io/bezierinfo">
+      <a class="social twitter" href="https://twitter.com/intent/tweet?hashtags=bezier,curves,maths&original_referer=https://pomax.github.io/bezierinfo&text=Reading%20%22A%20Primer%20on%20Bezier%20Curves%22%20by%20@TheRealPomax%20over%20on%20https://pomax.github.io/bezierinfo">
         <img src="images/twitter.ico" alt="tweet your read" title="tweet your read">
       </a>
     </div>

index.html

@@ -97,13 +97,13 @@
           }
         }
       </style>
-      <a href="https://www.reddit.com/submit?url=https://pomax.github.io/bezierinfo&title=A Primer on Bézier Curves&text=A free, online book for when you really need to know how to do Bézier things.">
+      <a class="social reddit" href="https://www.reddit.com/submit?url=https://pomax.github.io/bezierinfo&title=A Primer on Bézier Curves&text=A free, online book for when you really need to know how to do Bézier things.">
         <img src="https://www.redditstatic.com/spreddit1.gif" alt="submit to reddit" title="submit to reddit">
       </a>
-      <a href="https://news.ycombinator.com/submitlink?u=https://pomax.github.io/bezierinfo&t=A Primer on Bézier Curves">
+      <a class="social hn" href="https://news.ycombinator.com/submitlink?u=https://pomax.github.io/bezierinfo&t=A Primer on Bézier Curves">
         <img src="https://news.ycombinator.com/y18.gif" alt="submit to hacker news" title="submit to hacker news">
       </a>
-      <a href="https://twitter.com/intent/tweet?hashtags=bezier,curves,maths&original_referer=https://pomax.github.io/bezierinfo&text=Reading%20%22A%20Primer%20on%20Bezier%20Curves%22%20by%20@TheRealPomax%20over%20on%20https://pomax.github.io/bezierinfo">
+      <a class="social twitter" href="https://twitter.com/intent/tweet?hashtags=bezier,curves,maths&original_referer=https://pomax.github.io/bezierinfo&text=Reading%20%22A%20Primer%20on%20Bezier%20Curves%22%20by%20@TheRealPomax%20over%20on%20https://pomax.github.io/bezierinfo">
         <img src="images/twitter.ico" alt="tweet your read" title="tweet your read">
       </a>
     </div>

index.template.html

@@ -97,13 +97,13 @@
           }
         }
       </style>
-      <a href="https://www.reddit.com/submit?url=https://pomax.github.io/bezierinfo&title=A Primer on Bézier Curves&text=A free, online book for when you really need to know how to do Bézier things.">
+      <a class="social reddit" href="https://www.reddit.com/submit?url=https://pomax.github.io/bezierinfo&title=A Primer on Bézier Curves&text=A free, online book for when you really need to know how to do Bézier things.">
         <img src="https://www.redditstatic.com/spreddit1.gif" alt="submit to reddit" title="submit to reddit">
       </a>
-      <a href="https://news.ycombinator.com/submitlink?u=https://pomax.github.io/bezierinfo&t=A Primer on Bézier Curves">
+      <a class="social hn" href="https://news.ycombinator.com/submitlink?u=https://pomax.github.io/bezierinfo&t=A Primer on Bézier Curves">
         <img src="https://news.ycombinator.com/y18.gif" alt="submit to hacker news" title="submit to hacker news">
       </a>
-      <a href="https://twitter.com/intent/tweet?hashtags=bezier,curves,maths&original_referer=https://pomax.github.io/bezierinfo&text=Reading%20%22A%20Primer%20on%20Bezier%20Curves%22%20by%20@TheRealPomax%20over%20on%20https://pomax.github.io/bezierinfo">
+      <a class="social twitter" href="https://twitter.com/intent/tweet?hashtags=bezier,curves,maths&original_referer=https://pomax.github.io/bezierinfo&text=Reading%20%22A%20Primer%20on%20Bezier%20Curves%22%20by%20@TheRealPomax%20over%20on%20https://pomax.github.io/bezierinfo">
         <img src="images/twitter.ico" alt="tweet your read" title="tweet your read">
       </a>
     </div>

ja-JP/index.html

@@ -97,13 +97,13 @@
           }
         }
       </style>
-      <a href="https://www.reddit.com/submit?url=https://pomax.github.io/bezierinfo&title=A Primer on Bézier Curves&text=A free, online book for when you really need to know how to do Bézier things.">
+      <a class="social reddit" href="https://www.reddit.com/submit?url=https://pomax.github.io/bezierinfo&title=A Primer on Bézier Curves&text=A free, online book for when you really need to know how to do Bézier things.">
         <img src="https://www.redditstatic.com/spreddit1.gif" alt="submit to reddit" title="submit to reddit">
       </a>
-      <a href="https://news.ycombinator.com/submitlink?u=https://pomax.github.io/bezierinfo&t=A Primer on Bézier Curves">
+      <a class="social hn" href="https://news.ycombinator.com/submitlink?u=https://pomax.github.io/bezierinfo&t=A Primer on Bézier Curves">
         <img src="https://news.ycombinator.com/y18.gif" alt="submit to hacker news" title="submit to hacker news">
       </a>
-      <a href="https://twitter.com/intent/tweet?hashtags=bezier,curves,maths&original_referer=https://pomax.github.io/bezierinfo&text=Reading%20%22A%20Primer%20on%20Bezier%20Curves%22%20by%20@TheRealPomax%20over%20on%20https://pomax.github.io/bezierinfo">
+      <a class="social twitter" href="https://twitter.com/intent/tweet?hashtags=bezier,curves,maths&original_referer=https://pomax.github.io/bezierinfo&text=Reading%20%22A%20Primer%20on%20Bezier%20Curves%22%20by%20@TheRealPomax%20over%20on%20https://pomax.github.io/bezierinfo">
         <img src="images/twitter.ico" alt="tweet your read" title="tweet your read">
       </a>
     </div>

lib/site/social-updater.js

@@ -0,0 +1,87 @@
+/**
+ * This file is responsible for making sure that the reddit, hn, twitter, etc. linkouts
+ * are updated to reflect the section someone is reading, rather than always pointing to
+ * base article itself.
+ */
+(function tryToBind() {
+
+  if (document.querySelectorAll("section h2 a").length < 30) {
+    return setTimeout(tryToBind, 300);
+  }
+
+  class Tracker {
+    constructor() {
+      this.section = false;
+      this.hash = false;
+      this.socials = ["Reddit","HN","Twitter"];
+    }
+
+    update(data) {
+      this.section = data.section;
+      this.hash = data.hash;
+      this.socials.forEach(social => {
+        var a = document.querySelector("a.social." + social.toLowerCase());
+        a.href = this["get"+social]();
+      });
+    }
+
+    getURL() {
+      var url = "https://pomax.github.io/bezierinfo";
+      if (this.hash) {
+        url += this.hash;
+      }
+      return encodeURIComponent(url);
+    }
+
+    getTitle() {
+      var title = "A Primer on Bézier Curves";
+      if (this.section) {
+       title = this.section + " - " + title;
+      }
+      return encodeURIComponent(title);
+    }
+
+    getReddit() {
+      var url = this.getURL();
+      var title = this.getTitle();
+      var text = encodeURIComponent("A free, online book for when you really need to know how to do Bézier things.");
+      return `https://www.reddit.com/submit?url=${url}&title=${title}&text=${text}`;
+    }
+
+    getHN() {
+      var url = this.getURL();
+      var title = this.getTitle();
+      return `https://news.ycombinator.com/submitlink?u=${url}&t=${title}`;
+    }
+
+    getTwitter() {
+      var url = this.getURL();
+      var text = encodeURIComponent(`Reading "${this.section}" by @TheRealPomax over on `) + url;
+      return `https://twitter.com/intent/tweet?hashtags=bezier,curves,maths&original_referer=${url}&text=${text}`;
+    }
+  };
+
+
+  // we set the section and fragmentid based on which ever section's heading is nearest
+  // the top of the screen, either just off-screen or in-screen
+  var tracker = new Tracker();
+  var anchors = Array.from(document.querySelectorAll("section h2 a"));
+  var sections = anchors.map(a => a.parentNode);
+  var sectionData = sections.map(section => {
+    return {
+      section: section.textContent,
+      hash: section.querySelector("a").hash
+    };
+  });
+
+  window.addEventListener("scroll", function(evt) {
+    var min = 99999999999999999;
+    var element = false;
+    sections.forEach( (s,pos) => {
+      var v = Math.abs(s.getBoundingClientRect().top);
+      if (v < min) { min = v; element = pos; }
+    });
+    tracker.update(sectionData[element]);
+  }, { passive: true });
+
+}());

zh-CN/index.html

@@ -97,13 +97,13 @@
           }
         }
       </style>
-      <a href="https://www.reddit.com/submit?url=https://pomax.github.io/bezierinfo&title=A Primer on Bézier Curves&text=A free, online book for when you really need to know how to do Bézier things.">
+      <a class="social reddit" href="https://www.reddit.com/submit?url=https://pomax.github.io/bezierinfo&title=A Primer on Bézier Curves&text=A free, online book for when you really need to know how to do Bézier things.">
         <img src="https://www.redditstatic.com/spreddit1.gif" alt="submit to reddit" title="submit to reddit">
       </a>
-      <a href="https://news.ycombinator.com/submitlink?u=https://pomax.github.io/bezierinfo&t=A Primer on Bézier Curves">
+      <a class="social hn" href="https://news.ycombinator.com/submitlink?u=https://pomax.github.io/bezierinfo&t=A Primer on Bézier Curves">
         <img src="https://news.ycombinator.com/y18.gif" alt="submit to hacker news" title="submit to hacker news">
       </a>
-      <a href="https://twitter.com/intent/tweet?hashtags=bezier,curves,maths&original_referer=https://pomax.github.io/bezierinfo&text=Reading%20%22A%20Primer%20on%20Bezier%20Curves%22%20by%20@TheRealPomax%20over%20on%20https://pomax.github.io/bezierinfo">
+      <a class="social twitter" href="https://twitter.com/intent/tweet?hashtags=bezier,curves,maths&original_referer=https://pomax.github.io/bezierinfo&text=Reading%20%22A%20Primer%20on%20Bezier%20Curves%22%20by%20@TheRealPomax%20over%20on%20https://pomax.github.io/bezierinfo">
         <img src="images/twitter.ico" alt="tweet your read" title="tweet your read">
       </a>
     </div>