Add initial "logo" component

still just proving some concepts at this point

package.json

@@ -4,7 +4,7 @@
   "private": true,
   "scripts": {
     "serve": "vue-cli-service serve",
-    "build": "vue-cli-service build"
+    "build": "vue-cli-service build --target lib --name byjove src/index.js"
   },
   "dependencies": {
     "vue": "^2.6.10",
@@ -14,5 +14,6 @@
   "devDependencies": {
     "@vue/cli-service": "^3.0.5",
     "vue-template-compiler": "^2.6.10"
-  }
+  },
+  "main": "./dist/byjove.umd.js"
 }

src/appsettings.js

@@ -0,0 +1,17 @@
+
+import packageData from "../package.json"
+
+var appsettings = {
+    systemTitle: "Rattail",
+    appTitle: "Rattail-Mobile",
+    version: packageData.version,
+    production: false,
+    watermark: 'url("/tailbone/img/testing.png")',
+
+    // NOTE: you're encouraged to set this to a proper/working URL, but in fact
+    // the value shown here will *not* work.  the logo component does not
+    // require you to set this at all, in which case it uses a default image.
+    //logo: 'assets/logo.png',
+};
+
+export default appsettings;

src/components/index.js

@@ -0,0 +1,5 @@
+import ByjoveLogo from './logo'
+
+export {
+    ByjoveLogo,
+}

src/components/logo/ByjoveLogo.vue

@@ -0,0 +1,27 @@
+<template>
+  <div class="logo">
+    <img v-if="appsettings.logo" :alt="alternateText" :src="appsettings.logo" />
+    <img v-if="!appsettings.logo" :alt="alternateText" src="../../assets/logo.png" />
+  </div>
+</template>
+
+<script>
+export default {
+    name: 'ByjoveLogo',
+    props: {
+        appsettings: Object,
+    },
+    computed: {
+        alternateText: function() {
+            return this.appsettings.systemTitle + " logo"
+        },
+    },
+}
+</script>
+
+<style scoped>
+img {
+    max-height: 200px;
+    max-width: 300px;
+}
+</style>

src/components/logo/index.js

@@ -0,0 +1,6 @@
+import Vue from 'vue'
+import ByjoveLogo from './ByjoveLogo'
+
+Vue.component('byjove-logo', ByjoveLogo)
+
+export default ByjoveLogo

src/index.js

@@ -0,0 +1,6 @@
+
+import * as components from './components'
+
+export * from './components'
+
+export default {}

src/views/Home.vue

@@ -1,18 +1,25 @@
 <template>
   <div class="home">
-    <img alt="Vue logo" src="../assets/logo.png">
+    <byjove-logo :appsettings="appsettings"></byjove-logo>
     <HelloWorld msg="Welcome to Your Vue.js App"/>
   </div>
 </template>
 
 <script>
-// @ is an alias to /src
+import appsettings from '@/appsettings'
-import HelloWorld from '@/components/HelloWorld.vue'
+import {ByjoveLogo} from '@/components'
+import HelloWorld from '@/components/HelloWorld'
 
 export default {
     name: 'home',
     components: {
+        ByjoveLogo,
         HelloWorld
+    },
+    data() {
+        return {
+            appsettings: appsettings,
         }
+    },
 }
 </script>