Bump csv-parse from 2.5.0 to 4.4.6

.gitignore

@@ -11,6 +11,7 @@
 *.xml
 *.env
 dist/
+server-express/docsconfig.json
 .DS_Store
 .idea
 .project

client/src/api.js

@@ -58,5 +58,10 @@ export default {
         clearAuthorization()
         throw err
       })
+  },
+
+  //Google Docs stuff!
+  getDoc(docID) {
+    return axios.get(`${url}/doc/${docID}`)
   }
 }

client/src/components/ChapterScaffold.vue

@@ -23,7 +23,7 @@
         </section>
       </div>
       <aside class="chapter__notebook-col">
-        <Notebook class="chapter__notebook"/>
+        <Notebook class="chapter__notebook --stick"/>
       </aside>
     </section>
   </main>
@@ -182,13 +182,13 @@ a.blue-hover:hover {
 .chapter__notebook-col {
   grid-column: 3 / span 1;
   box-sizing: border-box;
-  position: relative;
 }
 
 .chapter__notebook {
-  position: sticky;
   width: 100%;
   height: 100vh;
+  top: 8vh;
+  position: sticky;
 }
 
 .centered {

client/src/docs-integration/DocRenderer.js

@@ -0,0 +1,151 @@
+import api from "../api";
+import registeredComponents from "./registered-components";
+import {register} from "register-service-worker";
+
+export default {
+  data () {
+    return {
+      docJson: null,
+    }
+  },
+  props: {
+    sectionRegex: {
+      type: RegExp,
+      default () {
+        return /<b>Section:(.+)<\/b>/g
+      }
+    },
+    sectionComponent: {
+      type: Object
+    },
+    sectionTitleProp: {
+      type: String,
+      default: "title"
+    },
+    footnoteRefComponent: {
+      type: Object
+    },
+    footnoteRefProp: {
+      type: String,
+      default: "number"
+    },
+    components: {
+      type: Object,
+      default () {
+        return registeredComponents;
+      }
+    },
+    docId: String
+  },
+  render (h) {
+    const title = (this.docJson && this.docJson.metadata) ? this.docJson.metadata.title : this.docId;
+
+    const parseInner = innerData => {
+      if (innerData) {
+        const dummy = document.createElement("template");
+        dummy.innerHTML = innerData;
+        const map = (arraylike, func) => Array.prototype.map.call(arraylike, func);
+        const nodeToVDOM = node => {
+          if (node.nodeType == Node.TEXT_NODE) {
+            //Footnotes and inline components checking goes here
+            return node.data;
+          }
+          const attrs = Object.fromEntries(
+            map(node.attributes,
+              (({name, value}) => ([name, value]))
+            )
+          );
+          if (node.hasChildNodes) {
+            return h(node.tagName, { attrs }, map(node.childNodes, nodeToVDOM));
+          }
+          return h(node.tagName, { attrs });
+        }
+        return map(dummy.content.childNodes, nodeToVDOM);
+      }
+    }
+
+    const createFromObj = (obj) => {
+      const tag = Object.keys(obj)[0].toLowerCase();
+      const data = obj[tag];
+      if (tag == "table") {
+        if (data.headers.length == 1 && data.rows.length == 0) {
+          const slotName = data.headers[0];
+          return h('div', this.$slots[slotName]);
+        }
+        if (data.headers.length >= 1 && data.headers[0] == "Component") {
+          const componentName = data.headers[1];
+          if (componentName in this.components) {
+            const component = registeredComponents[componentName];
+            console.dir(component.props);
+            let props = {};
+            data.rows.forEach( ([propName, value]) => {
+              if (propName in component.props) {
+                const coerced = component.props[propName](value);
+                props[propName] = coerced;
+              }
+            })
+            return h(component, {
+              props
+            });
+          }
+        }
+      }
+      if (tag == "ol" || tag == "ul") {
+        return h(tag, data.map(itemHTML => h("li", {domProps: {innerHTML: itemHTML}})));
+      }
+      if (tag == "img") {
+        const {source, title, alt} = data;
+        return h(tag, {attrs: {src: source, title, alt}});
+      }
+      if (typeof data == "string") {
+        return h(tag, parseInner(data));
+      }
+    }
+
+    if (this.docJson && this.docJson.content) {
+      const content = this.docJson.content;
+
+      if (this.sectionRegex && this.sectionComponent) {
+        const sections = [];
+        content.forEach( (el, index) => {
+          const [key, value] = Object.entries(el)[0];
+          if (typeof value == "string") {
+            const firstMatch = this.sectionRegex.exec(value);
+            if (firstMatch && firstMatch.length >= 1) {
+              let pushObj = { index };
+              if (firstMatch.length == 2) {
+                pushObj.title = firstMatch[1];
+              }
+              sections.push(pushObj);
+            }
+          }
+        });
+        if (sections.length > 0) {
+         return h('div',
+           sections.map( ({index, title}, arrIndex)  =>
+              (
+               h(this.sectionComponent, {
+                 props: {[this.sectionTitleProp]: title}
+               },
+                 content
+                   .slice(index + 1, sections[arrIndex + 1] ? sections[arrIndex + 1].index : content.length)
+                   .map(createFromObj)
+               )
+             )
+           ));
+        }
+      }
+
+      return h('div', content.map(createFromObj))
+    }
+  },
+  created() {
+    if (this.docId) {
+      api.getDoc(this.docId).then(resp => {
+        this.docJson = resp.data;
+      }).catch(err => {
+        console.error(err)
+      })
+    }
+  }
+}

client/src/docs-integration/TestComponent.vue

@@ -0,0 +1,20 @@
+<template>
+  <div>
+    <span v-for="i in count" v-html="word"></span>
+  </div>
+</template>
+
+<script>
+  export default {
+    props: {
+      count: Number,
+      word: String
+    }
+  }
+</script>
+
+<style scoped>
+  span {
+    margin-right: 2px;
+  }
+</style>

client/src/docs-integration/registered-components.js

@@ -0,0 +1,4 @@
+import TestComponent from "./TestComponent";
+export default {
+  Test: TestComponent
+}

client/src/views/PeabodyChapter.vue

@@ -13,7 +13,7 @@
           Emerson and Nathaniel Hawthorne. (Hawthorne
           was actually married to her sister, Sophia). But Peabody had impact in
           her own right: the bookstore that she ran
-          out of her home, in Boston, functioned as the de facto salon for the
+          out of her home, in Boston, functioned as the defacto salon for the
           transcendentalist movement. She edited and
           published the first version of Henry David Thoreau’s essay on civil
           disobedience. And she was an educational
@@ -217,7 +217,7 @@
           <FootnoteRef :number="5"></FootnoteRef>
         </p>
         <Scrollytell :scroll-slots="2"
-                     :top="210"
+                     :top="310"
                      :margin="'70vh'"
                      @scroll="onOverlayScroll">
           <template v-slot:fixed="{scrolled, progress}">
@@ -801,7 +801,7 @@
         if (this.overlayScroll.scrolled == 1) {
           const scale = d3.scaleLinear()
             .domain([0.25, 0.7])
-            .range([0, -350]);
+            .range([0, -310]);
           scale.clamp(true);
           const top = scale(this.overlayScroll.progress);
           if (top) styles.transform = `translateY(${top}px)`;
@@ -834,7 +834,6 @@
         this.overlayPos = Number(`${year - this.century}.${type}`);
       },
       onOverlayScroll({scrolled, progress}) {
-        console.log("got to scroll handler");
         this.overlayScroll.scrolled = scrolled;
         this.overlayScroll.progress = progress;
       },

client/src/views/Sandbox.vue

@@ -1,28 +1,35 @@
 <template lang="html">
-  <div>
-    <PeabodyGrid :staticDataset="'1'" :mutableDataset="'1'">
-
-    </PeabodyGrid>
-    <PeabodyMutable :width="'400px'" :mutableDataset="'1'"></PeabodyMutable>
-  </div>
+  <DocRenderer docId="1wizLoDtZKwD8a39D6qv_mg8vhh4HtFiZ14q6rvH8LfY" :section-component="sectionComponent" :section-title-prop="'title'">
+    <template v-slot:TestSlot>
+      <b>Test slot!</b>
+    </template>
+    <template v-slot:AnotherSlot>
+      <p>Another slot goes here</p>
+    </template>
+  </DocRenderer>
 </template>
 
 <script>
+
+import Section from '@/components/chapters/Section';
 import Picline from '@/components/vis/Picline'
 import PicCollage from '@/components/vis/PicCollage'
 import EventSquare from '@/components/vis/peabody/newpeabodygrid/EventSquare'
 import PeabodyGrid from '@/components/vis/peabody/newpeabodygrid/PeabodyGrid'
 import PeabodyMutable from "../components/vis/peabody/PeabodyMutable";
+import DocRenderer from "../docs-integration/DocRenderer"
 
 export default {
   components: {
+    DocRenderer,
     PeabodyGrid,
     PeabodyMutable,
     Picline,
     PicCollage,
     EventSquare
   },
   data: () => ({
+    sectionComponent: Section,
     newImgYear: 1858,
     newImgPic: "bad/badder",
     focusedImg: "0",