social, dev bar, github ear

docs/js/site/social-updater.js

@@ -3,23 +3,22 @@
  * are updated to reflect the section someone is reading, rather than always pointing to
  * base article itself.
  */
-(function tryToBind() {
-  if (!document.querySelector(`map[name="rhtimap"]`)) {
-    return setTimeout(tryToBind, 300);
-  }
-
 class Tracker {
   constructor() {
-      this.section = false;
+    this.name = `A Primer on Bézier Curves`;
+    this.sectionTitle = false;
     this.hash = false;
     this.socials = ["rdt", "hn", "twt"];
   }
 
-    update(data) {
+  update(section) {
-      this.section = data.section;
+    let a = section.querySelector(`h1 > a`);
-      this.hash = data.hash;
+    this.hash = a.hash;
+    this.sectionTitle = a.textContent;
     this.socials.forEach((social) => {
-        var area = document.querySelector(`map area.sclnk-${social}`);
+      var area = document.querySelector(
+        `map[name=rhtimap] area.sclnk-${social}`
+      );
       area.href = this[`get_${social}`]();
     });
   }
@@ -31,9 +30,9 @@
   }
 
   getTitle() {
-      var title = `A Primer on Bézier Curves`;
+    let title = ``;
-      if (this.section) {
+    if (this.sectionTitle) {
-        title = `${this.section}-${title}`;
+      title = `${this.name} — ${this.sectionTitle}`;
     }
     return encodeURIComponent(title);
   }
@@ -54,7 +53,7 @@
   get_twt() {
     var text =
       encodeURIComponent(
-          `Reading "${this.section}" by @TheRealPomax over on `
+        `Reading "${this.sectionTitle}" by @TheRealPomax over on `
       ) + this.url;
     return `https://twitter.com/intent/tweet?original_referer=${this.url}&text=${text}&hashtags=bezier,curves,maths`;
   }
@@ -62,30 +61,26 @@
 
 // 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();
+const tracker = new Tracker();
-  var anchors = Array.from(document.querySelectorAll("section h2 a"));
+const sections = Array.from(document.querySelectorAll("#chapters section"));
-  var sections = anchors.map((a) => a.parentNode);
+let prevScroll = 0;
-  var sectionData = sections.map((section) => {
-    return {
-      section: section.textContent,
-      hash: section.querySelector("a").hash,
-    };
-  });
-
 window.addEventListener(
-    "scroll",
+  `scroll`,
-    function (evt) {
+  (evt) => {
-      var min = 99999999999999999;
+    // which direction are we scrolling?
-      var element = false;
+    const diff = window.scrollY - prevScroll;
-      sections.forEach((s, pos) => {
+    prevScroll = window.scrollY;
-        var v = Math.abs(s.getBoundingClientRect().top);
+    const vh = window.innerHeight,
-        if (v < min) {
+      t = 0.33,
-          min = v;
+      vht = t * vh,
-          element = pos;
+      vhb = (1 - t) * vh;
+    for (let s = 0, e = sections.length; s < e; s++) {
+      let section = sections[s];
+      let bbox = section.getBoundingClientRect();
+      if (bbox.top < vht && bbox.bottom > vhb) {
+        tracker.update(section);
+      }
     }
-      });
-      tracker.update(sectionData[element]);
   },
   { passive: true }
 );
-})();

docs/placeholder-style.css

@@ -281,3 +281,61 @@ hr {
   border-top: 1px solid black;
   margin: 1em 0 2em 0;
 }
+
+div.scl img[usemap] {
+  cursor: pointer;
+}
+
+div.dev, div.scl, div.github {
+  z-index: 10;
+}
+
+div.dev {
+  background: rgb(43, 49, 95);
+  color: rgb(81, 181, 255);
+  position: fixed;
+  transform: rotate(-45deg);
+  width: 22em;
+  text-align: center;
+  top: 4em;
+  left: -6em;
+  font-variant: small-caps;
+  font-weight: bolder;
+  font-family: Helvetica;
+  box-shadow: 0px 5px 7px 2px rgba(0, 0, 0, 0.3);
+  opacity: 0.2;
+}
+
+div.scl {
+  position:fixed;
+  top: 0.25em;
+  left: 0.25em;
+  padding: 4px
+}
+
+div.github {
+  --scale: 0;
+  position: fixed;
+  top: 0;
+  right: 0;
+  height: 0;
+  overflow: visible;
+  transform-origin: top right;
+  transform: scale(var(--scale));
+}
+@media screen and (min-width: 992px) {
+  div.github { --scale: 0.4; }
+}
+@media screen and (min-width: 1200px) {
+  div.github { --scale: 0.5; }
+}
+@media screen and (min-width: 1470px) {
+  div.github { --scale: 0.75; }
+}
+@media screen and (min-width: 1600px) {
+  div.github { --scale: 0.9; }
+}
+
+div.github img area {
+  cursor: pointer;
+}

src/fragments/dev-ribbon.html

@@ -0,0 +1,12 @@
+<div class="dev" style="display:none;">
+    DEV PREVIEW ONLY
+    <script>
+        (function () {
+            var loc = window.location.toString();
+            if (loc.includes('localhost') || loc.includes('BezierInfo-2')) {
+                var e = document.querySelector('div.dev');
+                e.removeAttribute("style");
+            }
+        }());
+    </script>
+</div>

src/fragments/github.html

@@ -0,0 +1,6 @@
+<div class="github">
+    <img src="images/ribbon.png" alt="This page on GitHub" style="border:none;" useMap="#githubmap" width="200" height="149" />
+    <map name="githubmap">
+        <area shape="poly" coords="30,0, 200,0, 200,114" href="http://github.com/pomax/BezierInfo-2" alt="This page on GitHub" />
+    </map>
+</div>

src/fragments/meta.html

@@ -0,0 +1,23 @@
+<!-- And a slew of SEO related meta elements, because being discoverable is important -->
+<meta name="description" content="{{ description }}" />
+
+<!-- opengraph information -->
+<meta property="og:title" content="{{ title }}" />
+<meta property="og:image" content="https://pomax.github.io/bezierinfo/images/og-image.png" />
+<meta property="og:type" content="text" />
+<meta property="og:url" content="https://pomax.github.io/bezierinfo" />
+<meta property="og:description" content="{{ description }}" />
+<meta property="og:locale" content="{{ locale }}}}" />
+<meta property="og:type" content="article" />
+<meta property="og:published_time" content="2013-06-13 12:00:00" />
+<meta property="og:author" content="Mike 'Pomax' Kamermans" />
+<meta property="og:section" content="Bézier Curves" />
+<meta property="og:tag" content="Bézier Curves" />
+
+<!-- twitter card information -->
+<meta name="twitter:card" content="summary" />
+<meta name="twitter:site" content="@TheRealPomax" />
+<meta name="twitter:creator" content="@TheRealPomax" />
+<meta name="twitter:image" content="https://pomax.github.io/bezierinfo/images/og-image.png" />
+<meta name="twitter:url" content="https://pomax.github.io/bezierinfo" />
+<meta name="twitter:description" content="{{ description }}" />

src/fragments/noscript.html

@@ -0,0 +1,28 @@
+<noscript>
+    <div class="note">
+        <header>
+            <h2>This site (obviously) works best with JS enabled</h2>
+            <h3>But it's not required.</h3>
+        </header>
+
+        <p>
+            If you can read this &lt;noscript&gt; content, you have scripts disabled: thankfully,
+            this site is not going to force you to turn it on just to see any content. Everything
+            will work just fine, you can still read the text, navigate to sections, and see the
+            graphics that are used to illustrate the concepts that individual sections talk about.
+        </p>
+
+        <p>
+            <strong>However</strong>, a big part of this primer's experience is the fact that all
+            graphics are interactive, and for that to work, HTML Custom Elements need to work,
+            which requires Javascript to be enabled. If anything, you'll probably want to allow
+            scripts to run just for this site, and keep blocking everything else (although that
+            does mean you won't see comments, which use Disqus's comment syste, and you won't get
+            convenient "share a link to the section you're reading right now" buttons, if that's
+            something you like to do. You'll also be blocking my non-google pagehit tracker, which
+            lets me see who's linking to the primer, which you probably don't care about, but lets
+            me strike up conversations with folks who I would otherwise never know thought the
+            primer was worth linking to, and I like talking to people who care enough to link)
+        </p>
+    </div>
+</noscript>

src/fragments/share.html

@@ -0,0 +1,17 @@
+<!-- Because people probably want to share this article -->
+<div class="notforprint scl">
+    <img src="images/icons.gif" usemap="#rhtimap" title="Share this on social media" />
+    <map name="rhtimap">
+        <area class="sclnk-rdt" shape="rect" coords="0, 0, 19, 15"
+            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."
+            alt="submit to reddit" title="submit to reddit">
+        <area class="sclnk-hn" shape="rect" coords="0, 20, 19, 35"
+            href="https://news.ycombinator.com/submitlink?u=https://pomax.github.io/bezierinfo&t=A Primer on Bézier Curves"
+            alt="submit to hacker news" title="submit to hacker news">
+        <area class="sclnk-twt" shape="rect" coords="0, 40, 19, 55"
+            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"
+            alt="tweet your read" title="tweet your read">
+    </map>
+</div>
+
+<script src="./js/site/social-updater.js" async defer></script>

src/index.template.html

@@ -13,29 +13,7 @@
     <link rel="preload" href="images/paper.png" as="image" />
     <link rel="stylesheet" href="placeholder-style.css" />
 
-    <!-- And a slew of SEO related meta elements, because being discoverable is important -->
+    {% include "./fragments/meta.html" %}
-    <meta name="description" content="{{ description }}" />
-
-    <!-- opengraph information -->
-    <meta property="og:title" content="{{ title }}" />
-    <meta property="og:image" content="https://pomax.github.io/bezierinfo/images/og-image.png" />
-    <meta property="og:type" content="text" />
-    <meta property="og:url" content="https://pomax.github.io/bezierinfo" />
-    <meta property="og:description" content="{{ description }}" />
-    <meta property="og:locale" content="{{ locale }}}}" />
-    <meta property="og:type" content="article" />
-    <meta property="og:published_time" content="2013-06-13 12:00:00" />
-    <meta property="og:author" content="Mike 'Pomax' Kamermans" />
-    <meta property="og:section" content="Bézier Curves" />
-    <meta property="og:tag" content="Bézier Curves" />
-
-    <!-- twitter card information -->
-    <meta name="twitter:card" content="summary" />
-    <meta name="twitter:site" content="@TheRealPomax" />
-    <meta name="twitter:creator" content="@TheRealPomax" />
-    <meta name="twitter:image" content="https://pomax.github.io/bezierinfo/images/og-image.png" />
-    <meta name="twitter:url" content="https://pomax.github.io/bezierinfo" />
-    <meta name="twitter:description" content="{{ description }}" />
 
     <!-- my own referral/page hit tracker, because Google knows enough -->
     <script src="./js/site/referrer.js" type="module" async></script>
@@ -54,46 +32,19 @@
   </head>
 
   <body>
+    {% include "./fragments/dev-ribbon.html" %}
+    {% include "./fragments/github.html" %}
+    {% include "./fragments/share.html" %}
     <header>
       <h1>{{ title }}</h1>
       <h2>{{ subtitle }}</h2>
-
       <span>{{ langSwitchLabel }}</span>
-
       <ul class="lang-switcher">
         {{ langSwitcher }}
       </ul>
-
       <p>{{ langHelpLabel }}</p>
 
-      <noscript>
+      {% include "./fragments/noscript.html" %}
-        <div class="note">
-          <header>
-            <h2>This site (obviously) works best with JS enabled</h2>
-            <h3>But it's not required.</h3>
-          </header>
-
-          <p>
-            If you can read this &lt;noscript&gt; content, you have scripts disabled: thankfully,
-            this site is not going to force you to turn it on just to see any content. Everything
-            will work just fine, you can still read the text, navigate to sections, and see the
-            graphics that are used to illustrate the concepts that individual sections talk about.
-          </p>
-
-          <p>
-            <strong>However</strong>, a big part of this primer's experience is the fact that all
-            graphics are interactive, and for that to work, HTML Custom Elements need to work,
-            which requires Javascript to be enabled. If anything, you'll probably want to allow
-            scripts to run just for this site, and keep blocking everything else (although that
-            does mean you won't see comments, which use Disqus's comment syste, and you won't get
-            convenient "share a link to the section you're reading right now" buttons, if that's
-            something you like to do. You'll also be blocking my non-google pagehit tracker, which
-            lets me see who's linking to the primer, which you probably don't care about, but lets
-            me strike up conversations with folks who I would otherwise never know thought the
-            primer was worth linking to, and I like talking to people who care enough to link)
-          </p>
-        </div>
-      </noscript>
 
       <nav aria-labelledby="toc">
         <h1 id="toc">{{ tocLabel }}</h1>
@@ -107,11 +58,9 @@
       <section id="changelog">
         <h1>{{ changelogTitle }}</h1>
         <p>{{ changelogDescription }}</p>
-
         <!-- non-JS content reveals are nice -->
         <label for="changelogtoggle">{{ toggleLabel }}</label>
         <input type="checkbox" id="changelogtoggle">
-
         <section>{{ changelog }}</section>
       </section>
 
@@ -126,6 +75,7 @@
       Go do something cool with it!
     </footer>
 
+    <!-- fix firefox's scroll position algorithm. Due to how it works, it cannot be async/defer -->
     <script src="./js/site/fix-scroll.js"></script>
   </body>
 </html>