Design changes

src/components/d-abstract.js

@@ -3,7 +3,7 @@ import { body } from '../helpers/layout';
 
 const T = Template('d-abstract', `
 <style>
-  d-abstract {
+  :host {
     display: block;
     font-size: 23px;
     line-height: 1.7em;
@@ -11,7 +11,9 @@ const T = Template('d-abstract', `
   }
   ${body('d-abstract')}
 </style>
-`, false);
+
+<slot></slot>
+`);
 
 export class Abstract extends T(HTMLElement) {
 

src/components/d-appendix.js

@@ -1,29 +1,32 @@
 import { Template } from '../mixins/template';
-import { page } from '../helpers/layout';
+import { body } from '../helpers/layout';
 
 const T = Template('d-appendix', `
 <style>
 
 :host {
+  box-sizing: border-box;
   display: block;
+  width: 100%;
+
   font-size: 13px;
   line-height: 1.7em;
   margin-bottom: 0;
   border-top: 1px solid rgba(0,0,0,0.1);
   color: rgba(0,0,0,0.5);
-  background: rgb(250, 250, 250);
+  background: hsl(180, 5%, 98%);
   padding-top: 36px;
   padding-bottom: 48px;
 }
 
-${page('.l-body')}
+${body('.content')}
 
 </style>
 
-<div class="l-body">
-  <slot></slot>
+<div class='content'>
+<slot></slot>
 </div>
-`);
+`, true);
 
 export class Appendix extends T(HTMLElement) {
 

src/components/d-article.js

@@ -5,13 +5,29 @@ const T = Template('d-article', `
 <style></style>
 `, false);
 
-
+// export function addInferableTags(dom, frontMatter) {
+//   const title = frontMatter.title;
+//   if (title) {
+//     const titleTag = document.querySelector()
+//
+//   }
+// }
 
 export class Article extends T(HTMLElement) {
 
-  // constructor() {
-  //   super();
-  // }
+  constructor() {
+    super();
+
+    new MutationObserver( (mutations) => {
+      for (const mutation of mutations) {
+        for (const addedNode of mutation.addedNodes) {
+          if (addedNode.nodeName === 'HR') {
+            console.warn('Use of <hr> tags in distill articles is discouraged!');
+          }
+        }
+      }
+    }).observe(this, {childList: true});
+  }
 
   connectedCallback() {
     for (const [functionName, callback] of Object.entries(Controller.listeners)) {

src/components/d-bibliography.js

@@ -1,8 +1,8 @@
 import { Template } from '../mixins/template';
-import bibtexParse from 'bibtex-parse-js';
+import { parseBibtex } from '../helpers/bibtex';
 import { bibliography_cite } from '../helpers/citation';
 
-const T = Template('d-bibliography', `
+export const templateString = `
 <style>
   .references {
     font-size: 12px;
@@ -31,28 +31,33 @@ const T = Template('d-bibliography', `
 </style>
 
 <h3>References</h3>
-<ol></ol>
-`);
+<ol class='references' id='references-list' ></ol>
+`;
+const T = Template('d-bibliography', templateString);
 
-export function parseBibtex(bibtex) {
-  const bibliography = new Map();
-  const parsedEntries = bibtexParse.toJSON(bibtex);
-  for (const entry of parsedEntries) {
-    // normalize tags; note entryTags is an object, not Map
-    for (const tag in entry.entryTags) {
-      let value = entry.entryTags[tag];
-      value = value.replace(/[\t\n ]+/g, ' ');
-      value = value.replace(/{\\["^`.'acu~Hvs]( )?([a-zA-Z])}/g,
-        (full, x, char) => char);
-      value = value.replace(/{\\([a-zA-Z])}/g,
-        (full, char) => char);
-      entry.entryTags[tag] = value;
+export function parseBibliography(element) {
+  if (element.firstElementChild && element.firstElementChild.tagName === 'SCRIPT') {
+    const bibtex = element.firstElementChild.textContent;
+    const bibliography = parseBibtex(bibtex);
+    return bibliography;
+  }
+}
+
+export function renderBibliography(element, entries) {
+  if (entries.size) {
+    element.host.style.display = 'initial';
+    let list = element.querySelector('#references-list');
+    list.innerHTML = '';
+
+    for (const [key, entry] of entries) {
+      const listItem = document.createElement('li');
+      listItem.id = key;
+      listItem.innerHTML = bibliography_cite(entry);
+      list.appendChild(listItem);
     }
-    entry.entryTags.type = entry.entryType;
-    // add to bibliography
-    bibliography.set(entry.citationKey, entry.entryTags);
+  } else {
+    element.host.style.display = 'none';
   }
-  return bibliography;
 }
 
 export class Bibliography extends T(HTMLElement) {
@@ -67,6 +72,7 @@ export class Bibliography extends T(HTMLElement) {
       this.parseIfPossible();
       observer.observe(this, options);
     });
+    this.parseIfPossible();
     // ...and listen for changes
     observer.observe(this, options);
   }
@@ -82,10 +88,6 @@ export class Bibliography extends T(HTMLElement) {
     }
   }
 
-  connectedCallback() {
-    this.list = this.root.querySelector('ol');
-  }
-
   notify(bibliography) {
     const options = { detail: bibliography, bubbles: true };
     const event = new CustomEvent('onBibliographyChanged', options);
@@ -93,30 +95,7 @@ export class Bibliography extends T(HTMLElement) {
   }
 
   set entries(newEntries) {
-    if (newEntries.size) {
-      this.root.host.style.display = 'initial';
-      this.list.innerHTML = '';
-
-      for (const [key, entry] of newEntries) {
-        const listItem = document.createElement('li');
-        listItem.id = key;
-        listItem.innerHTML = bibliography_cite(entry);
-        this.list.appendChild(listItem);
-      }
-    } else {
-      this.root.host.style.display = 'none';
-    }
-
-  }
-
-  renderContent() {
-    // compute and store bibliography
-    // FrontMatter.bibliography = parseBibtex(this.bibtex);
-    // this.notify();
-    // Store.set('bibliography', bibliography);
-    // compute and store citations
-    // const citations = collectCitations();
-    // Store.set('citations', citations);
+    renderBibliography(this.root, newEntries);
   }
 
 }

src/components/d-byline.js

@@ -3,13 +3,13 @@ import { page } from '../helpers/layout';
 
 const T = Template('d-byline', `
 <style>
-  d-byline {
+  :host {
     box-sizing: border-box;
     font-size: 13px;
     line-height: 20px;
     display: block;
-    /* border-top: 1px solid rgba(0, 0, 0, 0.1);*/
-    /* border-bottom: 1px solid rgba(0, 0, 0, 0.1);*/
+    border-top: 1px solid rgba(0, 0, 0, 0.1);
+    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
     color: rgba(0, 0, 0, 0.6);
     padding-top: 20px;
     padding-bottom: 20px;
@@ -42,6 +42,7 @@ const T = Template('d-byline', `
   .date {
     display: block;
     text-align: left;
+    margin-top: 8px;
   }
   .year, .month {
     display: inline;
@@ -54,7 +55,7 @@ const T = Template('d-byline', `
     display: inline;
   }
 
-  @media(min-width: 1080px) {
+  @media screen and (min-width: 768px), print {
     d-byline {
       border-bottom: none;
     }
@@ -87,9 +88,11 @@ const T = Template('d-byline', `
     }
 
     .date {
+
       border-left: 1px solid rgba(0, 0, 0, 0.1);
       padding-left: 15px;
       margin-left: 15px;
+      margin-top: 0;
       display: inline-block;
     }
     .year, .month {
@@ -97,6 +100,7 @@ const T = Template('d-byline', `
     }
 
     .citation {
+      align-self: flex-end;
       border-left: 1px solid rgba(0, 0, 0, 0.15);
       padding-left: 15px;
       margin-left: 15px;
@@ -105,12 +109,16 @@ const T = Template('d-byline', `
     .citation div {
       display: block;
     }
+
+    .byline {
+      display: flex;
+    }
   }
 </style>
 
 <div class='byline'>
 </div>
-`, false);
+`, true);
 
 export function bylineTemplate(frontMatter) {
   return `
@@ -142,7 +150,7 @@ export function bylineTemplate(frontMatter) {
 export class Byline extends T(HTMLElement) {
 
   set frontMatter(frontMatter) {
-    const container = this.querySelector('.byline');
+    const container = this.root.querySelector('.byline');
     container.innerHTML = bylineTemplate(frontMatter);
   }
 

src/components/d-cite.js

@@ -28,7 +28,7 @@ const T = Template('d-cite', `
   }
 </style>
 
-<div style="display: none;" id="hover-box" class="dt-hover-box">
+<div id="hover-box" class="dt-hover-box">
 </div>
 
 <span id="citation-" class="citation">
@@ -37,9 +37,9 @@ const T = Template('d-cite', `
 </span>
 `);
 
-export function collectCitations() {
+export function collectCitations(dom=document) {
   const citations = new Set();
-  const citeTags = document.querySelectorAll('d-cite');
+  const citeTags = dom.querySelectorAll('d-cite');
   for (const tag of citeTags) {
     const keys = tag.getAttribute('key').split(',');
     for (const key of keys) {
@@ -53,11 +53,11 @@ export class Cite extends T(HTMLElement) {
 
   /* Lifecycle */
 
-  constructor() {
-    super();
-    // Cite.currentId += 1;
-    // this.citeId = Cite.currentId;
-  }
+  // constructor() {
+  //   super();
+  //   // Cite.currentId += 1;
+  //   // this.citeId = Cite.currentId;
+  // }
 
   connectedCallback() {
     // this.notify();
@@ -67,7 +67,8 @@ export class Cite extends T(HTMLElement) {
     this.innerSpan = this.root.querySelector('.citation-number');
     // this.outerSpan.id = `citation-${this.citeId}`;
     // this.hoverDiv.id = `dt-cite-hover-box-${this.citeId}`;
-    HoverBox.get_box(this.hoverDiv).bind(this.outerSpan);
+    // console.log(this, this.hoverDiv, this.outerSpan, this.innerSpan);
+    this.hoverbox = new HoverBox(this.hoverDiv, this.outerSpan);
 
   }
 

src/components/d-footnote.js

@@ -11,8 +11,8 @@ d-math[block] {
 
 </style>
 
-<div style="display: none;" class="dt-hover-box">
-  <slot id='slot'></slot>
+<div id="hover-box" class="dt-hover-box">
+  <slot id="slot"></slot>
 </div>
 
 <sup><span id="fn-" data-hover-ref="" style="cursor:pointer"></span></sup>
@@ -55,7 +55,7 @@ export class Footnote extends T(HTMLElement) {
     span.setAttribute('data-hover-ref', div.id);
     span.textContent = IdString;
 
-    HoverBox.get_box(div).bind(span);
+    this.hoverbox = new HoverBox(div, span);
   }
 
 }

src/components/d-front-matter.js

@@ -1,5 +1,17 @@
 import ymlParse from 'js-yaml';
 
+export function parseFrontmatter(element) {
+  const scriptTag = element.querySelector('script');
+  if (scriptTag) {
+    const yml = scriptTag.textContent;
+    const data = ymlParse.safeLoad(yml);
+    return data;
+  } else {
+    console.error('You added a frontmatter tag but did not provide a script tag with front matter data in it. Please take a look at our templates.');
+    return {};
+  }
+}
+
 export class FrontMatter extends HTMLElement {
 
   static get is() { return 'd-front-matter'; }
@@ -9,24 +21,12 @@ export class FrontMatter extends HTMLElement {
 
     const options = {childList: true, characterData: true, subtree: true};
     const observer = new MutationObserver( () => {
-      const data = this.parse();
+      const data = parseFrontmatter(this);
       this.notify(data);
     });
     observer.observe(this, options);
   }
 
-  parse(){
-    const scriptTag = this.querySelector('script');
-    if (scriptTag) {
-      const yml = scriptTag.textContent;
-      const data = ymlParse.safeLoad(yml);
-      return data;
-    } else {
-      console.error('You added a frontmatter tag but did not provide a script tag with front matter data in it. Please take a look at our templates.');
-      return {};
-    }
-  }
-
   notify(data) {
     const options = { detail: data, bubbles: true };
     const event = new CustomEvent('onFrontMatterChanged', options);

src/components/d-references.js

@@ -10,8 +10,4 @@ d-references {
 
 export  class References extends T(HTMLElement) {
 
-  connectedCallback() {
-    super.connectedCallback();
-  }
-
 }

src/components/d-title.js

@@ -1,5 +1,5 @@
 import { Template } from '../mixins/template';
-import { page } from '../helpers/layout';
+import { body } from '../helpers/layout';
 
 const T = Template('d-title', `
 <style>
@@ -8,23 +8,45 @@ const T = Template('d-title', `
   box-sizing: border-box;
   display: block;
   width: 100%;
-  margin-bottom: 100px;
+  margin-bottom: 64px;
 }
 
+
 ::slotted(h1) {
-  padding-top: 140px;
-  padding-bottom: 24px;
+  padding-top: 16px;
+  padding-bottom: 16px;
   margin: 0;
-  line-height: 1em;
-  font-size: 48px;
-  font-weight: 600;
+  line-height: 1.3;
+  font-size: 32px;
+  font-weight: 700;
+}
+
+@media screen and (min-width: 768px), print {
+  ::slotted(h1) {
+    font-size: 42px;
+    padding-bottom: 32px;
+  }
+}
+@media(min-width: 1024px) {
+  ::slotted(h1) {
+    padding-top: 64px;
+    padding-bottom: 64px;
+    font-size: 48px;
+  }
+}
+@media(min-width: 1280px) {
+  ::slotted(h1) {
+    padding-top: 96px;
+    padding-bottom: 64px;
+    font-size: 56px;
+  }
 }
 
 d-byline {
   border-top: 1px solid rgba(0, 0, 0, 0.1);
 }
 
-${page('::slotted(h1), ::slotted(h2)')}
+${body('::slotted(h1), ::slotted(h2)')}
 
 </style>