Add support for external bibtex files

src/components/d-bibliography.js

@@ -36,13 +36,11 @@ export const templateString = `
 <h3>References</h3>
 <ol class='references' id='references-list' ></ol>
 `;
-const T = Template('d-bibliography', templateString);
 
 export function parseBibliography(element) {
   if (element.firstElementChild && element.firstElementChild.tagName === 'SCRIPT') {
     const bibtex = element.firstElementChild.textContent;
-    const bibliography = parseBibtex(bibtex);
-    return bibliography;
+    return parseBibtex(bibtex);
   }
 }
 
@@ -63,6 +61,7 @@ export function renderBibliography(element, entries) {
   }
 }
 
+const T = Template('d-bibliography', templateString);
 export class Bibliography extends T(HTMLElement) {
 
   constructor() {
@@ -81,13 +80,20 @@ export class Bibliography extends T(HTMLElement) {
   }
 
   parseIfPossible() {
-    if (this.firstElementChild && this.firstElementChild.tagName === 'SCRIPT') {
-      const newBibtex = this.firstElementChild.textContent;
+    const scriptTag = this.querySelector('script');
+    if (!scriptTag) return;
+    if (scriptTag.type == 'text/bibtex') {
+      const newBibtex = scriptTag.textContent;
       if (this.bibtex !== newBibtex) {
         this.bibtex = newBibtex;
         const bibliography = parseBibtex(this.bibtex);
         this.notify(bibliography);
       }
+    } else if (scriptTag.type == 'text/json') {
+      const bibliography = new Map(JSON.parse(scriptTag.textContent));
+      this.notify(bibliography);
+    } else {
+      console.warn('Unsupported bibliography script tag type: ' + scriptTag.type);
     }
   }
 
@@ -101,4 +107,25 @@ export class Bibliography extends T(HTMLElement) {
     renderBibliography(this.root, newEntries);
   }
 
+  /* observe 'src' attribute */
+
+  static get observedAttributes() {
+    return ['src'];
+  }
+
+  receivedBibtex(event) {
+    const bibliography = parseBibtex(event.target.response);
+    this.notify(bibliography);
+  }
+
+  attributeChangedCallback(name, oldValue, newValue) {
+    var oReq = new XMLHttpRequest();
+    oReq.onload = (e) => this.receivedBibtex(e);
+    oReq.onerror = () => console.warn(`Could not load Bibtex! (tried ${newValue})`);
+    oReq.responseType = 'text';
+    oReq.open('GET', newValue, true);
+    oReq.send();
+  }
+
+
 }

src/components/d-front-matter.js

@@ -1,5 +1,3 @@
-// import ymlParse from 'js-yaml';
-
 export function parseFrontmatter(element) {
   const scriptTag = element.querySelector('script');
   if (scriptTag) {

src/transforms.js

@@ -22,10 +22,10 @@ import Meta from './transforms/meta';
 import { makeStyleTag } from './styles/styles';
 import TOC from './transforms/toc';
 import Typeset from './transforms/typeset';
-// import Bibliography from './transforms/bibliography';
+import Bibliography from './transforms/bibliography';
 
 const transforms = [
-  HTML, makeStyleTag, TOC, Byline, Polyfills, Mathematics, Meta, Typeset//, Bibliography
+  HTML, makeStyleTag, TOC, Byline, Polyfills, Mathematics, Meta, Typeset, Bibliography
 ];
 
 /* Distill Transforms */
@@ -42,11 +42,12 @@ const distillTransforms = [
 export function render(dom, data) {
   // first, we collect static data from the dom
   for (const extract of extractors) {
-    // console.warn('Running extractor: ', extract);
+    console.warn('Running extractor...');
     extract(dom, data);
   }
   // secondly we use it to transform parts of the dom
   for (const transform of transforms) {
+    console.warn('Running transform...');
     // console.warn('Running transform: ', transform);
     transform(dom, data);
   }

src/transforms/bibliography.js

@@ -1,26 +1,39 @@
 import { renderBibliography, templateString } from '../components/d-bibliography';
+import { parseBibtex } from '../helpers/bibtex';
+import fs from 'fs';
 
 export default function(dom, data) {
   const bibliographyTag = dom.querySelector('d-bibliography');
   if (!bibliographyTag) {
-    console.warn('No bibliography tag found!');
+    console.warn('No bibliography tag present!');
     return;
   }
 
-  const bibliographyEntries = new Map(data.citations.map( citationKey => {
-    const entry = data.bibliography.get(citationKey);
-    return [citationKey, entry];
-  }));
-
-  const prerenderedBibliography = dom.createElement('d-bibliography-prerendered');
-
-  const template = dom.createElement('template');
-  template.innerHTML = templateString;
-  const clone = dom.importNode(template.content, true);
-  prerenderedBibliography.innerHTML = template.content;
-  renderBibliography(prerenderedBibliography, bibliographyEntries, dom);
-
-  bibliographyTag.parentElement.insertBefore(bibliographyTag, prerenderedBibliography);
-  bibliographyTag.parentElement.removeChild(bibliographyTag);
+  const src = bibliographyTag.getAttribute('src');
+  if (src) {
+    const path = data.inputDirectory + '/' + src;
+    const text = fs.readFileSync(path, 'utf-8');
+    const bibliography = parseBibtex(text);
+    const scriptTag = dom.createElement('script');
+    scriptTag.type = 'text/json';
+    scriptTag.textContent = JSON.stringify([...bibliography]);
+    bibliographyTag.appendChild(scriptTag);
+    bibliographyTag.removeAttribute('src');
+  }
+  // const bibliographyEntries = new Map(data.citations.map( citationKey => {
+  //   const entry = data.bibliography.get(citationKey);
+  //   return [citationKey, entry];
+  // }));
+  //
+  // const prerenderedBibliography = dom.createElement('d-bibliography-prerendered');
+  //
+  // const template = dom.createElement('template');
+  // template.innerHTML = templateString;
+  // const clone = dom.importNode(template.content, true);
+  // prerenderedBibliography.innerHTML = template.content;
+  // renderBibliography(prerenderedBibliography, bibliographyEntries, dom);
+  //
+  // bibliographyTag.parentElement.insertBefore(bibliographyTag, prerenderedBibliography);
+  // bibliographyTag.parentElement.removeChild(bibliographyTag);
 
 }

src/transforms/polyfills.js

@@ -42,11 +42,5 @@ export default function render(dom) {
   polyfillScriptTag.id = 'polyfills';
 
   // insert at appropriate position--before any other script tag
-  const head = dom.querySelector('head');
-  const firstScriptTag = dom.querySelector('script');
-  if (firstScriptTag) {
-    head.insertBefore(polyfillScriptTag, firstScriptTag);
-  } else {
-    head.appendChild(polyfillScriptTag);
-  }
+  dom.head.insertBefore(polyfillScriptTag, dom.head.firstChild);
 }

src/transforms/toc.js

@@ -3,7 +3,9 @@ import { renderTOC } from '../components/d-toc';
 export default function(dom) {
   const article = dom.querySelector('d-article');
   const toc = dom.querySelector('d-toc');
-  const headings = article.querySelectorAll('h2, h3');
-  renderTOC(toc, headings);
-  toc.setAttribute('prerendered', 'true');
+  if (toc) {
+    const headings = article.querySelectorAll('h2, h3');
+    renderTOC(toc, headings);
+    toc.setAttribute('prerendered', 'true');
+  }
 }