add font loader and switcher, move fonts to /public, move eslint config

hyvyys · Aug 27, 2019 · 528668d · 528668d
1 parent 3329de8
commit 528668d
Show file tree

Hide file tree

Showing 94 changed files with 340 additions and 111 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -0,0 +1,21 @@
+module.exports = {
+  root: true,
+  env: {
+    node: true
+  },
+  extends: ["plugin:vue/essential", "eslint:recommended"],
+  rules: {
+    "comma-dangle": ["error", "always-multiline"]
+  },
+  parserOptions: {
+    parser: "babel-eslint"
+  },
+  overrides: [
+    {
+      files: ["**/__tests__/*.{j,t}s?(x)"],
+      env: {
+        jest: true
+      }
+    }
+  ]
+};
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -20,7 +20,8 @@
     "opentype.js": "^1.1.0",
     "vue": "^2.6.10",
     "vue-router": "^3.0.3",
-    "vuebar": "github:hyvyys/vuebar"
+    "vuebar": "github:hyvyys/vuebar",
+    "vuex": "^3.1.1"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "^3.11.0",
@@ -41,30 +42,6 @@
     "vue-template-compiler": "^2.6.10",
     "ware-loader": "^0.2.4"
   },
-  "eslintConfig": {
-    "root": true,
-    "env": {
-      "node": true
-    },
-    "extends": [
-      "plugin:vue/essential",
-      "eslint:recommended"
-    ],
-    "rules": {},
-    "parserOptions": {
-      "parser": "babel-eslint"
-    },
-    "overrides": [
-      {
-        "files": [
-          "**/__tests__/*.{j,t}s?(x)"
-        ],
-        "env": {
-          "jest": true
-        }
-      }
-    ]
-  },
   "postcss": {
     "plugins": {
       "autoprefixer": {}

diff --git a/src/assets/fonts/Rywalka-Regular.ttf → public/fonts/Rywalka-Regular.ttf b/src/assets/fonts/Rywalka-Regular.ttf → public/fonts/Rywalka-Regular.ttf
diff --git a/..._latin_vietnamese_greek-ext_greek-100.eot → ..._latin_vietnamese_greek-ext_greek-100.eot b/..._latin_vietnamese_greek-ext_greek-100.eot → ..._latin_vietnamese_greek-ext_greek-100.eot
diff --git a/..._latin_vietnamese_greek-ext_greek-100.svg → ..._latin_vietnamese_greek-ext_greek-100.svg b/..._latin_vietnamese_greek-ext_greek-100.svg → ..._latin_vietnamese_greek-ext_greek-100.svg
diff --git a/..._latin_vietnamese_greek-ext_greek-100.ttf → ..._latin_vietnamese_greek-ext_greek-100.ttf b/..._latin_vietnamese_greek-ext_greek-100.ttf → ..._latin_vietnamese_greek-ext_greek-100.ttf
diff --git a/...latin_vietnamese_greek-ext_greek-100.woff → ...latin_vietnamese_greek-ext_greek-100.woff b/...latin_vietnamese_greek-ext_greek-100.woff → ...latin_vietnamese_greek-ext_greek-100.woff
diff --git a/...atin_vietnamese_greek-ext_greek-100.woff2 → ...atin_vietnamese_greek-ext_greek-100.woff2 b/...atin_vietnamese_greek-ext_greek-100.woff2 → ...atin_vietnamese_greek-ext_greek-100.woff2
diff --git a/..._vietnamese_greek-ext_greek-100italic.eot → ..._vietnamese_greek-ext_greek-100italic.eot b/..._vietnamese_greek-ext_greek-100italic.eot → ..._vietnamese_greek-ext_greek-100italic.eot
diff --git a/..._vietnamese_greek-ext_greek-100italic.svg → ..._vietnamese_greek-ext_greek-100italic.svg b/..._vietnamese_greek-ext_greek-100italic.svg → ..._vietnamese_greek-ext_greek-100italic.svg
diff --git a/..._vietnamese_greek-ext_greek-100italic.ttf → ..._vietnamese_greek-ext_greek-100italic.ttf b/..._vietnamese_greek-ext_greek-100italic.ttf → ..._vietnamese_greek-ext_greek-100italic.ttf
diff --git a/...vietnamese_greek-ext_greek-100italic.woff → ...vietnamese_greek-ext_greek-100italic.woff b/...vietnamese_greek-ext_greek-100italic.woff → ...vietnamese_greek-ext_greek-100italic.woff
diff --git a/...ietnamese_greek-ext_greek-100italic.woff2 → ...ietnamese_greek-ext_greek-100italic.woff2 b/...ietnamese_greek-ext_greek-100italic.woff2 → ...ietnamese_greek-ext_greek-100italic.woff2
diff --git a/..._latin_vietnamese_greek-ext_greek-300.eot → ..._latin_vietnamese_greek-ext_greek-300.eot b/..._latin_vietnamese_greek-ext_greek-300.eot → ..._latin_vietnamese_greek-ext_greek-300.eot
diff --git a/..._latin_vietnamese_greek-ext_greek-300.svg → ..._latin_vietnamese_greek-ext_greek-300.svg b/..._latin_vietnamese_greek-ext_greek-300.svg → ..._latin_vietnamese_greek-ext_greek-300.svg
diff --git a/..._latin_vietnamese_greek-ext_greek-300.ttf → ..._latin_vietnamese_greek-ext_greek-300.ttf b/..._latin_vietnamese_greek-ext_greek-300.ttf → ..._latin_vietnamese_greek-ext_greek-300.ttf
diff --git a/...latin_vietnamese_greek-ext_greek-300.woff → ...latin_vietnamese_greek-ext_greek-300.woff b/...latin_vietnamese_greek-ext_greek-300.woff → ...latin_vietnamese_greek-ext_greek-300.woff
diff --git a/...atin_vietnamese_greek-ext_greek-300.woff2 → ...atin_vietnamese_greek-ext_greek-300.woff2 b/...atin_vietnamese_greek-ext_greek-300.woff2 → ...atin_vietnamese_greek-ext_greek-300.woff2
diff --git a/..._vietnamese_greek-ext_greek-300italic.eot → ..._vietnamese_greek-ext_greek-300italic.eot b/..._vietnamese_greek-ext_greek-300italic.eot → ..._vietnamese_greek-ext_greek-300italic.eot
diff --git a/..._vietnamese_greek-ext_greek-300italic.svg → ..._vietnamese_greek-ext_greek-300italic.svg b/..._vietnamese_greek-ext_greek-300italic.svg → ..._vietnamese_greek-ext_greek-300italic.svg
diff --git a/..._vietnamese_greek-ext_greek-300italic.ttf → ..._vietnamese_greek-ext_greek-300italic.ttf b/..._vietnamese_greek-ext_greek-300italic.ttf → ..._vietnamese_greek-ext_greek-300italic.ttf
diff --git a/...vietnamese_greek-ext_greek-300italic.woff → ...vietnamese_greek-ext_greek-300italic.woff b/...vietnamese_greek-ext_greek-300italic.woff → ...vietnamese_greek-ext_greek-300italic.woff
diff --git a/...ietnamese_greek-ext_greek-300italic.woff2 → ...ietnamese_greek-ext_greek-300italic.woff2 b/...ietnamese_greek-ext_greek-300italic.woff2 → ...ietnamese_greek-ext_greek-300italic.woff2
diff --git a/..._latin_vietnamese_greek-ext_greek-500.eot → ..._latin_vietnamese_greek-ext_greek-500.eot b/..._latin_vietnamese_greek-ext_greek-500.eot → ..._latin_vietnamese_greek-ext_greek-500.eot
diff --git a/..._latin_vietnamese_greek-ext_greek-500.svg → ..._latin_vietnamese_greek-ext_greek-500.svg b/..._latin_vietnamese_greek-ext_greek-500.svg → ..._latin_vietnamese_greek-ext_greek-500.svg
diff --git a/..._latin_vietnamese_greek-ext_greek-500.ttf → ..._latin_vietnamese_greek-ext_greek-500.ttf b/..._latin_vietnamese_greek-ext_greek-500.ttf → ..._latin_vietnamese_greek-ext_greek-500.ttf
diff --git a/...latin_vietnamese_greek-ext_greek-500.woff → ...latin_vietnamese_greek-ext_greek-500.woff b/...latin_vietnamese_greek-ext_greek-500.woff → ...latin_vietnamese_greek-ext_greek-500.woff
diff --git a/...atin_vietnamese_greek-ext_greek-500.woff2 → ...atin_vietnamese_greek-ext_greek-500.woff2 b/...atin_vietnamese_greek-ext_greek-500.woff2 → ...atin_vietnamese_greek-ext_greek-500.woff2
diff --git a/..._vietnamese_greek-ext_greek-500italic.eot → ..._vietnamese_greek-ext_greek-500italic.eot b/..._vietnamese_greek-ext_greek-500italic.eot → ..._vietnamese_greek-ext_greek-500italic.eot
diff --git a/..._vietnamese_greek-ext_greek-500italic.svg → ..._vietnamese_greek-ext_greek-500italic.svg b/..._vietnamese_greek-ext_greek-500italic.svg → ..._vietnamese_greek-ext_greek-500italic.svg
diff --git a/..._vietnamese_greek-ext_greek-500italic.ttf → ..._vietnamese_greek-ext_greek-500italic.ttf b/..._vietnamese_greek-ext_greek-500italic.ttf → ..._vietnamese_greek-ext_greek-500italic.ttf
diff --git a/...vietnamese_greek-ext_greek-500italic.woff → ...vietnamese_greek-ext_greek-500italic.woff b/...vietnamese_greek-ext_greek-500italic.woff → ...vietnamese_greek-ext_greek-500italic.woff
diff --git a/...ietnamese_greek-ext_greek-500italic.woff2 → ...ietnamese_greek-ext_greek-500italic.woff2 b/...ietnamese_greek-ext_greek-500italic.woff2 → ...ietnamese_greek-ext_greek-500italic.woff2
diff --git a/..._latin_vietnamese_greek-ext_greek-700.eot → ..._latin_vietnamese_greek-ext_greek-700.eot b/..._latin_vietnamese_greek-ext_greek-700.eot → ..._latin_vietnamese_greek-ext_greek-700.eot
diff --git a/..._latin_vietnamese_greek-ext_greek-700.svg → ..._latin_vietnamese_greek-ext_greek-700.svg b/..._latin_vietnamese_greek-ext_greek-700.svg → ..._latin_vietnamese_greek-ext_greek-700.svg
diff --git a/..._latin_vietnamese_greek-ext_greek-700.ttf → ..._latin_vietnamese_greek-ext_greek-700.ttf b/..._latin_vietnamese_greek-ext_greek-700.ttf → ..._latin_vietnamese_greek-ext_greek-700.ttf
diff --git a/...latin_vietnamese_greek-ext_greek-700.woff → ...latin_vietnamese_greek-ext_greek-700.woff b/...latin_vietnamese_greek-ext_greek-700.woff → ...latin_vietnamese_greek-ext_greek-700.woff
diff --git a/...atin_vietnamese_greek-ext_greek-700.woff2 → ...atin_vietnamese_greek-ext_greek-700.woff2 b/...atin_vietnamese_greek-ext_greek-700.woff2 → ...atin_vietnamese_greek-ext_greek-700.woff2
diff --git a/..._vietnamese_greek-ext_greek-700italic.eot → ..._vietnamese_greek-ext_greek-700italic.eot b/..._vietnamese_greek-ext_greek-700italic.eot → ..._vietnamese_greek-ext_greek-700italic.eot
diff --git a/..._vietnamese_greek-ext_greek-700italic.svg → ..._vietnamese_greek-ext_greek-700italic.svg b/..._vietnamese_greek-ext_greek-700italic.svg → ..._vietnamese_greek-ext_greek-700italic.svg
diff --git a/..._vietnamese_greek-ext_greek-700italic.ttf → ..._vietnamese_greek-ext_greek-700italic.ttf b/..._vietnamese_greek-ext_greek-700italic.ttf → ..._vietnamese_greek-ext_greek-700italic.ttf
diff --git a/...vietnamese_greek-ext_greek-700italic.woff → ...vietnamese_greek-ext_greek-700italic.woff b/...vietnamese_greek-ext_greek-700italic.woff → ...vietnamese_greek-ext_greek-700italic.woff
diff --git a/...ietnamese_greek-ext_greek-700italic.woff2 → ...ietnamese_greek-ext_greek-700italic.woff2 b/...ietnamese_greek-ext_greek-700italic.woff2 → ...ietnamese_greek-ext_greek-700italic.woff2
diff --git a/..._latin_vietnamese_greek-ext_greek-800.eot → ..._latin_vietnamese_greek-ext_greek-800.eot b/..._latin_vietnamese_greek-ext_greek-800.eot → ..._latin_vietnamese_greek-ext_greek-800.eot
diff --git a/..._latin_vietnamese_greek-ext_greek-800.svg → ..._latin_vietnamese_greek-ext_greek-800.svg b/..._latin_vietnamese_greek-ext_greek-800.svg → ..._latin_vietnamese_greek-ext_greek-800.svg
diff --git a/..._latin_vietnamese_greek-ext_greek-800.ttf → ..._latin_vietnamese_greek-ext_greek-800.ttf b/..._latin_vietnamese_greek-ext_greek-800.ttf → ..._latin_vietnamese_greek-ext_greek-800.ttf
diff --git a/...latin_vietnamese_greek-ext_greek-800.woff → ...latin_vietnamese_greek-ext_greek-800.woff b/...latin_vietnamese_greek-ext_greek-800.woff → ...latin_vietnamese_greek-ext_greek-800.woff
diff --git a/...atin_vietnamese_greek-ext_greek-800.woff2 → ...atin_vietnamese_greek-ext_greek-800.woff2 b/...atin_vietnamese_greek-ext_greek-800.woff2 → ...atin_vietnamese_greek-ext_greek-800.woff2
diff --git a/..._vietnamese_greek-ext_greek-800italic.eot → ..._vietnamese_greek-ext_greek-800italic.eot b/..._vietnamese_greek-ext_greek-800italic.eot → ..._vietnamese_greek-ext_greek-800italic.eot
diff --git a/..._vietnamese_greek-ext_greek-800italic.svg → ..._vietnamese_greek-ext_greek-800italic.svg b/..._vietnamese_greek-ext_greek-800italic.svg → ..._vietnamese_greek-ext_greek-800italic.svg
diff --git a/..._vietnamese_greek-ext_greek-800italic.ttf → ..._vietnamese_greek-ext_greek-800italic.ttf b/..._vietnamese_greek-ext_greek-800italic.ttf → ..._vietnamese_greek-ext_greek-800italic.ttf
diff --git a/...vietnamese_greek-ext_greek-800italic.woff → ...vietnamese_greek-ext_greek-800italic.woff b/...vietnamese_greek-ext_greek-800italic.woff → ...vietnamese_greek-ext_greek-800italic.woff
diff --git a/...ietnamese_greek-ext_greek-800italic.woff2 → ...ietnamese_greek-ext_greek-800italic.woff2 b/...ietnamese_greek-ext_greek-800italic.woff2 → ...ietnamese_greek-ext_greek-800italic.woff2
diff --git a/..._latin_vietnamese_greek-ext_greek-900.eot → ..._latin_vietnamese_greek-ext_greek-900.eot b/..._latin_vietnamese_greek-ext_greek-900.eot → ..._latin_vietnamese_greek-ext_greek-900.eot
diff --git a/..._latin_vietnamese_greek-ext_greek-900.svg → ..._latin_vietnamese_greek-ext_greek-900.svg b/..._latin_vietnamese_greek-ext_greek-900.svg → ..._latin_vietnamese_greek-ext_greek-900.svg
diff --git a/..._latin_vietnamese_greek-ext_greek-900.ttf → ..._latin_vietnamese_greek-ext_greek-900.ttf b/..._latin_vietnamese_greek-ext_greek-900.ttf → ..._latin_vietnamese_greek-ext_greek-900.ttf
diff --git a/...latin_vietnamese_greek-ext_greek-900.woff → ...latin_vietnamese_greek-ext_greek-900.woff b/...latin_vietnamese_greek-ext_greek-900.woff → ...latin_vietnamese_greek-ext_greek-900.woff
diff --git a/...atin_vietnamese_greek-ext_greek-900.woff2 → ...atin_vietnamese_greek-ext_greek-900.woff2 b/...atin_vietnamese_greek-ext_greek-900.woff2 → ...atin_vietnamese_greek-ext_greek-900.woff2
diff --git a/..._vietnamese_greek-ext_greek-900italic.eot → ..._vietnamese_greek-ext_greek-900italic.eot b/..._vietnamese_greek-ext_greek-900italic.eot → ..._vietnamese_greek-ext_greek-900italic.eot
diff --git a/..._vietnamese_greek-ext_greek-900italic.svg → ..._vietnamese_greek-ext_greek-900italic.svg b/..._vietnamese_greek-ext_greek-900italic.svg → ..._vietnamese_greek-ext_greek-900italic.svg
diff --git a/..._vietnamese_greek-ext_greek-900italic.ttf → ..._vietnamese_greek-ext_greek-900italic.ttf b/..._vietnamese_greek-ext_greek-900italic.ttf → ..._vietnamese_greek-ext_greek-900italic.ttf
diff --git a/...vietnamese_greek-ext_greek-900italic.woff → ...vietnamese_greek-ext_greek-900italic.woff b/...vietnamese_greek-ext_greek-900italic.woff → ...vietnamese_greek-ext_greek-900italic.woff
diff --git a/...ietnamese_greek-ext_greek-900italic.woff2 → ...ietnamese_greek-ext_greek-900italic.woff2 b/...ietnamese_greek-ext_greek-900italic.woff2 → ...ietnamese_greek-ext_greek-900italic.woff2
diff --git a/...tin_vietnamese_greek-ext_greek-italic.eot → ...tin_vietnamese_greek-ext_greek-italic.eot b/...tin_vietnamese_greek-ext_greek-italic.eot → ...tin_vietnamese_greek-ext_greek-italic.eot
diff --git a/...tin_vietnamese_greek-ext_greek-italic.svg → ...tin_vietnamese_greek-ext_greek-italic.svg b/...tin_vietnamese_greek-ext_greek-italic.svg → ...tin_vietnamese_greek-ext_greek-italic.svg
diff --git a/...tin_vietnamese_greek-ext_greek-italic.ttf → ...tin_vietnamese_greek-ext_greek-italic.ttf b/...tin_vietnamese_greek-ext_greek-italic.ttf → ...tin_vietnamese_greek-ext_greek-italic.ttf
diff --git a/...in_vietnamese_greek-ext_greek-italic.woff → ...in_vietnamese_greek-ext_greek-italic.woff b/...in_vietnamese_greek-ext_greek-italic.woff → ...in_vietnamese_greek-ext_greek-italic.woff
diff --git a/...n_vietnamese_greek-ext_greek-italic.woff2 → ...n_vietnamese_greek-ext_greek-italic.woff2 b/...n_vietnamese_greek-ext_greek-italic.woff2 → ...n_vietnamese_greek-ext_greek-italic.woff2
diff --git a/...in_vietnamese_greek-ext_greek-regular.eot → ...in_vietnamese_greek-ext_greek-regular.eot b/...in_vietnamese_greek-ext_greek-regular.eot → ...in_vietnamese_greek-ext_greek-regular.eot
diff --git a/...in_vietnamese_greek-ext_greek-regular.svg → ...in_vietnamese_greek-ext_greek-regular.svg b/...in_vietnamese_greek-ext_greek-regular.svg → ...in_vietnamese_greek-ext_greek-regular.svg
diff --git a/...in_vietnamese_greek-ext_greek-regular.ttf → ...in_vietnamese_greek-ext_greek-regular.ttf b/...in_vietnamese_greek-ext_greek-regular.ttf → ...in_vietnamese_greek-ext_greek-regular.ttf
diff --git a/...n_vietnamese_greek-ext_greek-regular.woff → ...n_vietnamese_greek-ext_greek-regular.woff b/...n_vietnamese_greek-ext_greek-regular.woff → ...n_vietnamese_greek-ext_greek-regular.woff
diff --git a/..._vietnamese_greek-ext_greek-regular.woff2 → ..._vietnamese_greek-ext_greek-regular.woff2 b/..._vietnamese_greek-ext_greek-regular.woff2 → ..._vietnamese_greek-ext_greek-regular.woff2
diff --git a/src/components/FontLoader.vue b/src/components/FontLoader.vue
@@ -3,64 +3,105 @@
     <UiSelect
       v-if="gui"
       class="font-select dark"
-      :value="fonts[selectedFontIndex]"
+      v-model="selectedFont"
+      :keys="fontOptionKeys"
       :options="fonts"
-    />
+    >
+      <div slot="option" slot-scope="props" :style="optionStyle">
+        <div class="font-family">{{ props.option && props.option.family }}</div>
+        <div
+          class="font-family-sample"
+          :style="optionSampleStyle(props.option)"
+        >{{ props.option && sampleText }}</div>
+      </div>
+    </UiSelect>
+
     <FileDrop @files-dropped="loadFonts" />
   </div>
 </template>
 
 <script>
-var opentype = require("opentype.js");
-import util from "util";
-const loadFont = util.promisify(opentype.load);
-
 import UiSelect from "keen-ui/src/UiSelect.vue";
 
-import FileDrop from "@/components/FileDrop";
+import eventBus from "@/eventBus";
+
+import FileDrop from "@/components/FileDrop.vue";
+import FontParser from "@/models/FontParser";
+import styles from "@/utils/styles";
+import { Promise } from "q";
 
 export default {
   name: "FontTester",
   components: {
     FileDrop,
-    UiSelect
+    UiSelect,
   },
   props: {
     gui: {
       type: Boolean,
-      default: true
-    }
+      default: true,
+    },
   },
   data() {
     return {
-      selectedFontIndex: 0,
-      fonts: ["Alegreya Sans"]
+      fontOptionKeys: {
+        class: "class",
+        label: "family",
+        image: "image",
+      },
+      selectedFont: { family: "" },
+      fonts: [],
+      sampleText: "Abg123",
+      optionStyle: `
+        display: flex;
+        align-items: baseline;
+        width: 100%;
+        `,
+      optionSampleStyle: option => `
+        flex: 1;
+        font-family: ${option.family};
+        font-weight: normal;
+        text-align: right;
+        `,
     };
   },
   computed: {},
-  watch: {},
-  beforeMount() {},
+  watch: {
+    selectedFont() {
+      this.updateFont();
+    },
+  },
+  beforeMount() {
+    const dir = "/fonts/";
+    const fonts = [
+      "alegreya-sans/alegreya-sans-v10-latin-ext_cyrillic_cyrillic-ext_latin_vietnamese_greek-ext_greek-regular.ttf",
+      "Rywalka-Regular.ttf",
+    ];
+    this.loadFonts({ urls: fonts.map(f => dir + f) });
+  },
   methods: {
-    async loadFonts(files) {
-      let first = true;
-      for (let file of files) {
-        let url = URL.createObjectURL(file);
-        await loadFont(url)
-          .then(font => {
-            // processFont(font, url);
-            // if (first) {
-            //   fontSelect.selectedIndex = fontSelect.options.length - 1;
-            //   fireEvent(fontSelect, "change");
-            //   first = false;
-            // }
-            console.log(font);
-          })
-          .catch(err => {
-            // console.error("Font could not be loaded: " + err);
+    async loadFonts({ files = [], urls = [] } = {}) {
+      if (!urls.length) urls = files.map(file => URL.createObjectURL(file));
+
+      Promise.all(urls.map(url => FontParser.parse(url)))
+        .then(fonts => {
+          fonts.forEach(font => {
+            this.fonts.push(font);
+            styles.add(font.fontFace);
           });
-      }
-    }
-  }
+          this.selectedFont = fonts[0];
+          // this.selectFont()
+        })
+        .catch(error => {
+          console.log(error);
+        });
+    },
+
+    updateFont() {
+      eventBus.$emit("font-change", this.selectedFont.family);
+    },
+    /* ^^^ methods ^^^ */
+  },
 };
 </script>
 
@@ -72,7 +113,28 @@ export default {
   @include flex();
 
   .ui-select.font-select {
-    margin-bottom: .75em;
+    .ui-select__display {
+      @include pseudo();
+      &::before {
+        z-index: -1;
+        mix-blend-mode: hard-light;
+        background: rgba(#333, 0.8);
+        border-radius: 3px;
+        box-shadow: inset 0 0 5px #000;
+        pointer-events: none;
+      }
+      padding: 2px 8px;
+      width: 10em;
+      border-radius: 3px;
+    }
+    margin-bottom: 0.1em;
+  }
+
+  .option {
+    display: flex;
+    .font-family-sample {
+      flex: 1;
+    }
   }
 }
 </style>
diff --git a/src/components/FontSample.vue b/src/components/FontSample.vue
@@ -4,7 +4,7 @@
     class="font-sample"
     contenteditable
     spellcheck="false"
-    :style="`font-size: ${fontSize}${fontSizeUnit}`"
+    :style="`font-family: ${fontFamily}, ${fallbackFontFamily}; font-size: ${fontSize}${fontSizeUnit}`"
     @input="onInput"
     v-html="html"
   />
@@ -18,9 +18,9 @@ export default {
   props: {
     html: {
       type: String,
-      default: "",
+      default: ""
     },
-    ...settings,
+    ...settings
   },
   methods: {
     onInput(e) {
@@ -30,8 +30,8 @@ export default {
     notifyWindow() {
       // trigger resize event so that Fitter can be positioned
       window.dispatchEvent(new Event("resize"));
-    },
-  },
+    }
+  }
 };
 </script>
 

diff --git a/src/components/SiteHeader.vue b/src/components/SiteHeader.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="site-header">
-    <div class="flex dark">
+    <div class="dark">
       <div class="logo">
         <SiteLogo class />
       </div>
@@ -72,12 +72,6 @@ $header-background: linear-gradient(to right, $light, $accent);
   background-size: 100vw 150px;
 }
 
-.flex {
-  flex: 1;
-  display: flex;
-  align-items: stretch;
-}
-
 .site-header {
   display: flex;
   align-items: stretch;
@@ -91,9 +85,11 @@ $header-background: linear-gradient(to right, $light, $accent);
   .light {
     background: $light;
   }
+
   .dark {
     flex: 1;
     display: flex;
+    margin-top: -8px;
     align-items: center;
   }
 

diff --git a/src/components/layout/Fitter.vue b/src/components/layout/Fitter.vue
@@ -16,6 +16,7 @@
 
 <script>
 import throttle from "lodash.throttle";
+import viewport from "@/utils/viewport";
 
 export default {
   name: "Fitter",
@@ -49,11 +50,6 @@ export default {
   },
   methods: {
     position() {
-      const viewportHeight = Math.max(
-        document.documentElement.clientHeight,
-        window.innerHeight || 0
-      );
-
       const header = window.document.querySelector(this.topSelector);
       if (header) {
         const { bottom } = header.getBoundingClientRect();
@@ -65,7 +61,7 @@ export default {
       const footer = window.document.querySelector(this.bottomSelector);
       if (footer) {
         const { top } = footer.getBoundingClientRect();
-        this.bottom = Math.max(0, viewportHeight - top);
+        this.bottom = Math.max(0, viewport.height - top);
       } else {
         console.error(`Fitter didn't find element ${this.bottomSelector}.`);
       }

diff --git a/src/eventBus.js b/src/eventBus.js
@@ -0,0 +1,5 @@
+import Vue from "vue";
+
+const bus = new Vue();
+
+export default bus;
diff --git a/src/main.js b/src/main.js
@@ -1,14 +1,13 @@
 import Vue from "vue";
+Vue.config.productionTip = false;
+
 import Vuebar from "vuebar";
+Vue.use(Vuebar);
 
 import "./scss/styles.scss";
-
 import App from "./App.vue";
 import router from "./router";
 
-Vue.config.productionTip = false;
-Vue.use(Vuebar);
-
 new Vue({
   router,
   render: h => h(App)