more sticky heading adjustments

4 files changed, 29 insertions, 10 deletions

diff --git a/src/misc-templates.js b/src/misc-templates.js
index 10422a29..d7b24fbd 100644
--- a/src/misc-templates.js
+++ b/src/misc-templates.js
@@ -727,13 +727,17 @@ function unbound_generateStickyHeadingContainer({
   html,
   img,
 
+  class: classes,
   coverSrc,
   coverAlt,
   coverTags,
   title,
 }) {
   return html.tag('div',
-    {class: 'content-sticky-heading-container'},
+    {class: [
+      'content-sticky-heading-container',
+      coverSrc && 'has-cover',
+    ].concat(classes)},
     [
       html.tag('div', {class: 'content-sticky-heading-row'}, [
         html.tag('h1', title),
diff --git a/src/page/static.js b/src/page/static.js
index 2a0f5e53..1689d16b 100644
--- a/src/page/static.js
+++ b/src/page/static.js
@@ -10,15 +10,23 @@ export function write(staticPage) {
   const page = {
     type: 'page',
     path: ['staticPage', staticPage.directory],
-    page: ({html, transformMultiline}) => ({
+    page: ({
+      generateStickyHeadingContainer,
+      html,
+      transformMultiline,
+    }) => ({
       title: staticPage.name,
       stylesheet: staticPage.stylesheet,
 
       main: {
-        content: html.tag('div', {class: 'long-content'}, [
-          html.tag('h1', staticPage.name),
-          transformMultiline(staticPage.content),
-        ]),
+        content: [
+          generateStickyHeadingContainer({
+            class: ['long-content'],
+            title: staticPage.name,
+          }),
+          html.tag('div', {class: 'long-content'},
+            transformMultiline(staticPage.content)),
+        ],
       },
 
       nav: {simple: true},
diff --git a/src/static/client.js b/src/static/client.js
index dcb39226..15f21fdb 100644
--- a/src/static/client.js
+++ b/src/static/client.js
@@ -487,10 +487,12 @@ function updateStickyHeading() {
   } of stickyHeadingInfo) {
     let closestHeading = null;
 
-    if (contentCover.getBoundingClientRect().bottom < 0) {
-      stickyCoverContainer.classList.add('visible');
-    } else {
-      stickyCoverContainer.classList.remove('visible');
+    if (contentCover && stickyCoverContainer) {
+      if (contentCover.getBoundingClientRect().bottom < 0) {
+        stickyCoverContainer.classList.add('visible');
+      } else {
+        stickyCoverContainer.classList.remove('visible');
+      }
     }
 
     if (topOfViewInside(contentContainer)) {
diff --git a/src/upd8.js b/src/upd8.js
index bc574c62..f7abdcb8 100755
--- a/src/upd8.js
+++ b/src/upd8.js
@@ -562,6 +562,11 @@ function transformMultiline(text, {parseAttributes, transformInline}) {
       ) {
         lineTag = '';
       }
+
+      // for sticky headings!
+      if (elementMatch) {
+        lineContent = lineContent.replace(/<h2/, `<h2 class="content-heading"`)
+      }
     }
 
     let pushString = indentString.repeat(indentThisLine);