Refactor configuration handling

The goal here was to allow configuration to be used more seamlessly in
the app header component and main shaclvue component in order to drive
text values such as app name and urls and color themes and more. Before,
the appheader and appfooter were children of the main App.vue component,
along with the ShaclVue component. In order to prevent the convoluted
provide/inject setup that was necessary before, the header and footer were
moved into ShaclVue, becoming its children, and the main App.vue component
is now a single simple entrypoint for the ShaclVue component, without any
configuration or logic attached to it. New configuration options were
introduced:
- app name
- docs url
- source code url
- app theme: link color
- app theme: hover color
- app theme: active color
- app theme: left hand side panel color
- app theme: logo name
This also makes future additions to the theme easier and compartmenalized.

public/config.json

@@ -1,4 +1,14 @@
 {
+    "app_name": "shacl-vue",
+    "documentation_url": "",
+    "source_code_url": "",
+    "app_theme": {
+        "link_color": "#41b883",
+        "hover_color": "#1565C0",
+        "active_color": "#D32F2F",
+        "panel_color": "#41b883",
+        "logo": "shacl_vue_logo.svg"
+    },
     "shapes_url": "dlschemas_shacl.ttl",
     "use_default_shapes": false,
     "data_url": "dlschemas_data.ttl",

src/App.vue

@@ -1,106 +1,10 @@
 <template>
   <v-app>
-      <AppHeader />
-      <v-main>
-          <v-container fluid v-if="!explore">
-              <div class="banner">
-                  <div class="banner-column" style="text-align: left; margin-left: 8em;">
-                      <h1 style="color: #3451B2">shacl-vue (alpha)</h1>
-                      <h1>Automatic generation of user interfaces from SHACL</h1>
-                      <br>
-                      <div class="banner-buttons">
-                      <v-btn
-                          rounded="xl" size="large" style="margin-right: 1em"
-                          @click="startExploring()"
-                      >🚀 Explore</v-btn>
-                      <v-btn
-                          rounded="xl" size="large" style="margin-right: 1em"
-                          href="https://psychoinformatics-de.github.io/shacl-vue/docs/"
-                          target="_blank"
-                      ><v-icon>mdi-text-box</v-icon>&nbsp;&nbsp;Docs</v-btn>
-                      <v-btn
-                          rounded="xl" size="large"
-                          href="https://github.com/psychoinformatics-de/shacl-vue"
-                          target="_blank"
-                      ><v-icon>mdi-github</v-icon>&nbsp;&nbsp;Code</v-btn>
-                      </div>
-                  </div>
-                  <div class="banner-column" style="margin-right: 6em;">
-                      <v-img
-                      class="mx-auto"
-                      width="40%"
-                      src="./assets/shacl_vue.svg"
-                      ></v-img>
-                  </div>
-              </div> 
-          </v-container>
-          <v-container fluid v-if="explore">
-              <ShaclVue :configUrl="null"></ShaclVue>
-          </v-container>
-      </v-main>
+    <ShaclVue :configUrl="null"></ShaclVue>
   </v-app>
 </template>
 
 
 <script setup>
-  import { ref, provide } from 'vue'
-  const explore = ref(true)
-  function startExploring() {
-      explore.value = true;
-  }
-  const canSubmit = ref(true)
-  const submitButtonPressed = ref(false)
-  function submitFn() {
-      submitButtonPressed.value = true
-  }
-  provide('submitButtonPressed', submitButtonPressed)
-  provide('submitFn', submitFn)
-  provide('canSubmit', canSubmit)
 
-</script>
-
-<style scoped>
-  .banner {
-      display: flex;
-      flex-direction: row;
-      width: 100%;
-      margin: auto;
-  }
-  .banner-column {
-      display: flex;
-      flex-direction: column;
-      flex: 1;
-      margin: 4em;
-      color: #34495e;
-  }
-  .banner-column h1 {
-      font-size: 2.5em;
-  }
-  .banner-buttons {
-      display: flex;
-      flex-direction: row;
-      width: 100%;
-      margin: auto;
-      margin-top: 1em;
-  }
-</style>
-
-<style>
-    a {
-        color: #41b883;
-        text-decoration: none;
-    }
-
-    a:hover {
-        color: #1565C0;
-        text-decoration: underline;
-    }
-
-    a:visited {
-        color: #42be86;
-    }
-
-    a:active {
-        color: #D32F2F;
-    }
-</style>
+</script>

src/components/AppFooter.vue

@@ -1,79 +1,23 @@
 <template>
-  <v-footer height="40" app>
-    <a
-      v-for="item in items"
-      :key="item.title"
-      :href="item.href"
-      :title="item.title"
+  <v-footer height="50">
+    <div
+      class="text-caption text-disabled"
+      style="text-align: center; margin: auto;"
+    >
+      <span class="d-none d-sm-inline-block">Powered by</span>
+      <a      
+      href="item.href"
+      title="shacl-vue"
       class="d-inline-block mx-2 social-link"
       rel="noopener noreferrer"
       target="_blank"
     >
-      <v-icon
-        :icon="item.icon"
-        :size="item.icon === '$vuetify' ? 24 : 16"
-      />
+      <v-icon size="24"><v-img src="/shacl_vue_logo.svg"></v-img></v-icon>
     </a>
-
-    <div
-      class="text-caption text-disabled"
-      style="position: absolute; right: 16px;"
-    >
-      &copy; 2016-{{ (new Date()).getFullYear() }} <span class="d-none d-sm-inline-block">Vuetify, LLC</span>
-      —
-      <a
-        class="text-decoration-none on-surface"
-        href="https://vuetifyjs.com/about/licensing/"
-        rel="noopener noreferrer"
-        target="_blank"
-      >
-        MIT License
-      </a>
+    <span class="d-none d-sm-inline-block">shacl-vue</span>
     </div>
   </v-footer>
 </template>
 
 <script setup>
-  const items = [
-    {
-      title: 'Vuetify Documentation',
-      icon: `$vuetify`,
-      href: 'https://vuetifyjs.com/',
-    },
-    {
-      title: 'Vuetify Support',
-      icon: 'mdi-shield-star-outline',
-      href: 'https://support.vuetifyjs.com/',
-    },
-    {
-      title: 'Vuetify X',
-      icon: `svg:M2.04875 3.00002L9.77052 13.3248L1.99998 21.7192H3.74882L10.5519 14.3697L16.0486 21.7192H22L13.8437 10.8137L21.0765 3.00002H19.3277L13.0624 9.76874L8.0001 3.00002H2.04875ZM4.62054 4.28821H7.35461L19.4278 20.4308H16.6937L4.62054 4.28821Z`,
-      href: 'https://x.com/vuetifyjs',
-    },
-    {
-      title: 'Vuetify GitHub',
-      icon: `mdi-github`,
-      href: 'https://github.com/vuetifyjs/vuetify',
-    },
-    {
-      title: 'Vuetify Discord',
-      icon: `mdi-discord`,
-      href: 'https://community.vuetifyjs.com/',
-    },
-    {
-      title: 'Vuetify Reddit',
-      icon: `mdi-reddit`,
-      href: 'https://reddit.com/r/vuetifyjs',
-    },
-  ]
 </script>
-
-<style scoped lang="sass">
-  .social-link :deep(.v-icon)
-    color: rgba(var(--v-theme-on-background), var(--v-disabled-opacity))
-    text-decoration: none
-    transition: .2s ease-in-out
-
-    &:hover
-      color: rgba(25, 118, 210, 1)
-</style>