Nuxt 3 Upgrade

api/index.js

@@ -1,10 +1,8 @@
 import express from "express";
-import livedoc from "./livedoc";
 import data from "./data";
 
 const app = express();
 
-app.use("/livedoc", livedoc);
 app.use("/data", data);
 
 export default app;

assets/fonts.css

@@ -2,97 +2,97 @@
 
 @font-face {
   font-family: "Maranallo";
-  src: url("~assets/fonts/Maranallo/Maranallo.ttf") format("truetype");
+  src: url("/fonts/Maranallo/Maranallo.ttf") format("truetype");
 }
 
 @font-face {
   font-family: "VTC Du Bois";
-  src: url("~assets/fonts/VTCDubois/VTCDuBois-Regular.woff") format("woff"),
-    url("~assets/fonts/VTCDubois/VTCDuBois-Regular.woff2") format("woff2");
+  src: url("/fonts/VTCDubois/VTCDuBois-Regular.woff") format("woff"),
+    url("/fonts/VTCDubois/VTCDuBois-Regular.woff2") format("woff2");
   font-weight: normal;
   font-style: normal;
 }
 
 @font-face {
   font-family: "VTC Du Bois Wide";
-  src: url("~assets/fonts/VTCDubois/VTCDuBois-BoldWide.woff") format("woff"),
-    url("~assets/fonts/VTCDubois/VTCDuBois-BoldWide.woff2") format("woff2");
+  src: url("/fonts/VTCDubois/VTCDuBois-BoldWide.woff") format("woff"),
+    url("/fonts/VTCDubois/VTCDuBois-BoldWide.woff2") format("woff2");
   font-weight: 700;
   font-style: normal;
 }
 
 @font-face {
   font-family: "VTC Du Bois Wide";
-  src: url("~assets/fonts/VTCDubois/VTCDuBois-LightWide.woff") format("woff"),
-    url("~assets/fonts/VTCDubois/VTCDuBois-LightWide.woff2") format("woff2");
+  src: url("/fonts/VTCDubois/VTCDuBois-LightWide.woff") format("woff"),
+    url("/fonts/VTCDubois/VTCDuBois-LightWide.woff2") format("woff2");
   font-weight: 300;
   font-style: normal;
 }
 
 @font-face {
   font-family: "VTC Du Bois Narrow";
-  src: url("~assets/fonts/VTCDubois/VTCDuBois-RegularNarrow.woff")
+  src: url("/fonts/VTCDubois/VTCDuBois-RegularNarrow.woff")
       format("woff"),
-    url("~assets/fonts/VTCDubois/VTCDuBois-RegularNarrow.woff2") format("woff2");
+    url("/fonts/VTCDubois/VTCDuBois-RegularNarrow.woff2") format("woff2");
   font-weight: normal;
   font-style: normal;
 }
 
 @font-face {
   font-family: "VTC Du Bois Narrow";
-  src: url("~assets/fonts/VTCDubois/VTCDuBois-LightNarrow.woff") format("woff"),
-    url("~assets/fonts/VTCDubois/VTCDuBois-LightNarrow.woff2") format("woff2");
+  src: url("/fonts/VTCDubois/VTCDuBois-LightNarrow.woff") format("woff"),
+    url("/fonts/VTCDubois/VTCDuBois-LightNarrow.woff2") format("woff2");
   font-weight: 300;
   font-style: normal;
 }
 
 @font-face {
   font-family: "Chancery Cursive";
-  src: url("~assets/fonts/Chancery/Chancery_Cursive_Italic.ttf")
+  src: url("/fonts/Chancery/Chancery_Cursive_Italic.ttf")
     format("truetype");
 }
 
 @font-face {
   font-family: "DxD Icons";
-  src: url("~assets/fonts/DxDIcons/DxDIcons-Regular.ttf") format("truetype");
+  src: url("/fonts/DxDIcons/DxDIcons-Regular.ttf") format("truetype");
 }
 
 @font-face {
   font-family: "VTC William";
-  src: url("~assets/fonts/William/VTCWilliam-Regular.woff") format("woff"),
-    url("~assets/fonts/William/VTCWilliam-Regular.woff2") format("woff2");
+  src: url("/fonts/William/VTCWilliam-Regular.woff") format("woff"),
+    url("/fonts/William/VTCWilliam-Regular.woff2") format("woff2");
   font-weight: normal;
   font-style: normal;
 }
 
 @font-face {
   font-family: "VTC William";
-  src: url("~assets/fonts/William/VTCWilliam-Bold.woff") format("woff"),
-    url("~assets/fonts/William/VTCWilliam-Bold.woff2") format("woff2");
+  src: url("/fonts/William/VTCWilliam-Bold.woff") format("woff"),
+    url("/fonts/William/VTCWilliam-Bold.woff2") format("woff2");
   font-weight: bold;
   font-style: normal;
 }
 
 @font-face {
   font-family: "VTC William";
-  src: url("~assets/fonts/William/VTCWilliam-BoldItalic.woff") format("woff"),
-    url("~assets/fonts/William/VTCWilliam-BoldItalic.woff2") format("woff2");
+  src: url("/fonts/William/VTCWilliam-BoldItalic.woff") format("woff"),
+    url("/fonts/William/VTCWilliam-BoldItalic.woff2") format("woff2");
   font-weight: bold;
   font-style: italic;
 }
 
 @font-face {
   font-family: "VTC William";
-  src: url("~assets/fonts/William/VTCWilliam-Italic.woff") format("woff"),
-    url("~assets/fonts/William/VTCWilliam-Italic.woff2") format("woff2");
+  src: url("/fonts/William/VTCWilliam-Italic.woff") format("woff"),
+    url("/fonts/William/VTCWilliam-Italic.woff2") format("woff2");
   font-weight: normal;
   font-style: italic;
 }
 
 @font-face {
   font-family: "VTC William Wide";
-  src: url("~assets/fonts/William/VTCWilliam-BoldWide.woff") format("woff"),
-    url("~assets/fonts/William/VTCWilliam-BoldWide.woff2") format("woff2");
+  src: url("/fonts/William/VTCWilliam-BoldWide.woff") format("woff"),
+    url("/fonts/William/VTCWilliam-BoldWide.woff2") format("woff2");
   font-weight: bold;
   font-style: normal;
 }

components/chapter-slots/dubois.vue

@@ -10,17 +10,54 @@
 </template>
 
 <script>
-import ChapterSlots from "~/components/mixins/ChapterSlots";
 import Chart63 from "~/components/chapters/dubois/63charts/Chart63";
 import StudentCharts from "../chapters/dubois/studentCharts/StudentCharts";
 import studentData from "~/api/static/data/chartOne.json";
+import DocsRenderer from "../docs-renderer/DocsRenderer";
 
 export default {
+  props: {
+    docContent: Array,
+  },
+  created() {
+    this.$store.commit("currentChapter/initializeChapterState", {
+      initialState: this.$options.chapterState,
+    });
+  },
+  mounted() {},
+  computed: {
+    chapterState() {
+      const obj = {};
+      Object.keys(this.$options.chapterState).forEach((key) =>
+        Object.defineProperty(obj, key, {
+          get: () => this.$store.state.currentChapter.chapterState[key],
+          set: (value) => {
+            this.$store.commit("currentChapter/updateChapterState", {
+              key,
+              value,
+            });
+          },
+          enumerable: true,
+        })
+      );
+      return obj;
+    },
+  },
   components: {
+    Slots: {
+      render(createElement) {
+        return createElement(DocsRenderer, {
+          props: {
+            docContent: this.$parent.docContent,
+          },
+          scopedSlots: this.$scopedSlots,
+          on: this.$parent.$listeners,
+        });
+      },
+    },
     Chart63,
     StudentCharts,
   },
-  mixins: [ChapterSlots],
   data() {
     return {
       studentData,
@@ -34,5 +71,3 @@ export default {
   methods: {},
 };
 </script>
-
-<style scoped></style>

components/chapter-slots/peabody.vue

@@ -74,32 +74,67 @@
 </template>
 
 <script>
-import ChapterSlots from "@/components/mixins/ChapterSlots";
 import PeabodyTutorial from "@/components/chapters/peabody/PeabodyTutorialOld.vue";
 import MoveBorder from "../global/MoveBorder";
 import MapScroller from "../global/MapScroller.vue";
 import Captioned from "../global/docs-inclusions/Captioned.vue";
 import HoverText from "../global/HoverText";
-import StaticData from "@/components/data-access/StaticData";
 import PeabodyGrid from "../chapters/peabody/grid/PeabodyGrid.vue";
 import EventKey from "../chapters/peabody/key/EventKeyBox";
 import EventLegend from "../chapters/peabody/key/EventLegend";
 import LocalImage from "../global/docs-inclusions/LocalImage";
+import DocsRenderer from "../docs-renderer/DocsRenderer";
 
 export default {
+  props: {
+    docContent: Array,
+  },
+  created() {
+    this.$store.commit("currentChapter/initializeChapterState", {
+      initialState: this.$options.chapterState,
+    });
+  },
+  mounted() {},
+  computed: {
+    chapterState() {
+      const obj = {};
+      Object.keys(this.$options.chapterState).forEach((key) =>
+        Object.defineProperty(obj, key, {
+          get: () => this.$store.state.currentChapter.chapterState[key],
+          set: (value) => {
+            this.$store.commit("currentChapter/updateChapterState", {
+              key,
+              value,
+            });
+          },
+          enumerable: true,
+        })
+      );
+      return obj;
+    },
+  },
   components: {
+    Slots: {
+      render(createElement) {
+        return createElement(DocsRenderer, {
+          props: {
+            docContent: this.$parent.docContent,
+          },
+          scopedSlots: this.$scopedSlots,
+          on: this.$parent.$listeners,
+        });
+      },
+    },
     LocalImage,
     EventLegend,
     EventKey,
-    StaticData,
     PeabodyTutorial,
     MapScroller,
     MoveBorder,
     Captioned,
     HoverText,
     PeabodyGrid,
   },
-  mixins: [ChapterSlots],
   data() {
     return {
       selected: 1,

components/chapter-slots/playfair.vue

@@ -21,20 +21,57 @@
 </template>
 
 <script>
-import ChapterSlots from "@/components/mixins/ChapterSlots";
 import DifferenceVisual from "@/components/chapters/playfair/DifferenceVisual.vue";
 import PChart from "@/components/chapters/playfair/PChart.vue";
 import BySide from "@/components/chapters/playfair/BySide.vue";
 import HoverText from "../global/HoverText";
+import DocsRenderer from "../docs-renderer/DocsRenderer";
 
 export default {
+  props: {
+    docContent: Array,
+  },
+  created() {
+    this.$store.commit("currentChapter/initializeChapterState", {
+      initialState: this.$options.chapterState,
+    });
+  },
+  mounted() {},
+  computed: {
+    chapterState() {
+      const obj = {};
+      Object.keys(this.$options.chapterState).forEach((key) =>
+        Object.defineProperty(obj, key, {
+          get: () => this.$store.state.currentChapter.chapterState[key],
+          set: (value) => {
+            this.$store.commit("currentChapter/updateChapterState", {
+              key,
+              value,
+            });
+          },
+          enumerable: true,
+        })
+      );
+      return obj;
+    },
+  },
   components: {
+    Slots: {
+      render(createElement) {
+        return createElement(DocsRenderer, {
+          props: {
+            docContent: this.$parent.docContent,
+          },
+          scopedSlots: this.$scopedSlots,
+          on: this.$parent.$listeners,
+        });
+      },
+    },
     DifferenceVisual,
     PChart,
     BySide,
     HoverText,
   },
-  mixins: [ChapterSlots],
   data() {
     return {
       slots: {

components/chapter-slots/sandbox.vue

@@ -3,14 +3,49 @@
 </template>
 
 <script>
-import ChapterSlots from "@/components/mixins/ChapterSlots";
+import DocsRenderer from "../docs-renderer/DocsRenderer";
 
 export default {
-  components: {},
-  mixins: [ChapterSlots],
-  data() {},
-  chapterState: {},
-  methods: {},
+  props: {
+    docContent: Array,
+  },
+  created() {
+    this.$store.commit("currentChapter/initializeChapterState", {
+      initialState: this.$options.chapterState,
+    });
+  },
+  mounted() {},
+  computed: {
+    chapterState() {
+      const obj = {};
+      Object.keys(this.$options.chapterState).forEach((key) =>
+        Object.defineProperty(obj, key, {
+          get: () => this.$store.state.currentChapter.chapterState[key],
+          set: (value) => {
+            this.$store.commit("currentChapter/updateChapterState", {
+              key,
+              value,
+            });
+          },
+          enumerable: true,
+        })
+      );
+      return obj;
+    },
+  },
+  components: {
+    Slots: {
+      render(createElement) {
+        return createElement(DocsRenderer, {
+          props: {
+            docContent: this.$parent.docContent,
+          },
+          scopedSlots: this.$scopedSlots,
+          on: this.$parent.$listeners,
+        });
+      },
+    },
+  },
 };
 </script>
 

components/chapters/peabody/index.js → components/chapters/peabody/index.ts

@@ -12,3 +12,4 @@ export default [
   PeabodyTimelineView,
   PeabodyTutorial,
 ];
+