Improvements to pages and posts

public/js/modules/utils.js

@@ -205,6 +205,35 @@ export function breakLinksAtSlash(root = document.querySelector('main')) {
     }
 }
 
+/**
+ * Function that attempts to add the author metadata to the header
+ * of the page; it won't work all the time, but it gives it a bit of a
+ * better shot of getting it right
+ */
+function addAuthor(){
+    const content = document.querySelector('.blog-content');
+    const children = content.children;
+    const authorRex = /\s*Authored\s*by:\s*/gi;
+    const titleMeta = document.querySelector('meta[name="citation_title"]');
+    let bylineEl = [...children].find(el => {
+        return  authorRex.test(el.innerText);
+    });
+    if (!bylineEl){
+        return;
+    }
+    let byline = bylineEl.innerText.trim();
+    let bylineNorm = byline.replace(authorRex,'').replace(' and ',',');
+    let names = bylineNorm.split(/,+\s*/gi);
+    names.forEach(name => {
+        let parts = name.split(/\s+/);
+        let nameArr = [parts.pop(), parts.join(' ')];
+        if (nameArr.length > 0){
+            let authorMeta = `<meta name="citation_author" content="${nameArr.join(', ')}"/>`;
+            titleMeta.insertAdjacentHTML('beforebegin', authorMeta);
+        }
+    });
+}
+
 /**
  * Driver
  */
@@ -221,5 +250,6 @@ export function breakLinksAtSlash(root = document.querySelector('main')) {
     let blogContent = document.querySelector('.blog-content');
     if (blogContent){
         blogContent.querySelectorAll('img').forEach(cleanStyles);
+        addAuthor();
     }
 })();

public/sass/components/_buttons.scss

@@ -55,4 +55,19 @@ a.btn-primary {
 .open > .dropdown-toggle.btn-default:hover {
   color: $color_white;
   background-color: #1f1f1f ;
+}
+
+.icon-button{
+  border:none;
+  appearance:none;
+  box-shadow:none;
+  background:none;
+  height:2.5rem;
+  width:2.5rem;
+  a{
+    all:unset;
+    display:block;
+    height:100%;
+    width:100%;
+  }
 }

public/sass/pages/_nines.scss

@@ -16,20 +16,32 @@
 
 // Standard content block
   .blog-content{
+    --padding-right: 5rem;
     max-width: $reading-width;
     font-family: $serif;
     margin:0 auto;
-      background: $color_white;
-      border: 1px solid #F2F2F2;
-     box-shadow: $box-shadow-sm;
-    padding: 2rem 5rem 4.5rem 5rem;
+    background: $color_white;
+    border: 1px solid #F2F2F2;
+    box-shadow: $box-shadow-sm;
+    padding: 2rem var(--padding-right) 4.5rem 5rem;
+    position:relative;
+    .icon-button{
+      position:absolute;
+      left:100%;
+      transform: translateX(-150%);
+      & + *{
+        margin-top:0;
+      }
+    }
+
     @media (max-width: $breakpoint_sm){
       padding-left: 2rem;
       padding-right:2rem;
     }
     & > * + *{
       margin-top:ms(1);
     }
+
   }
 
   // Normal paragraphs