From 575c3482d3696ba881bb2d753652e02ff712d540 Mon Sep 17 00:00:00 2001
From: Stephan Heunis <s.heunis@fz-juelich.de>
Date: Fri, 21 Feb 2025 13:36:25 +0100
Subject: [PATCH] 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               |  10 ++
 public/shacl_vue_logo.svg        |  84 +++++++++
 src/App.vue                      | 100 +----------
 src/components/AppFooter.vue     |  78 ++------
 src/components/AppHeader.vue     |  66 ++++---
 src/components/ShaclVue.vue      | 293 ++++++++++++++++---------------
 src/composables/configuration.js |  42 ++++-
 src/modules/utils.js             |  23 +++
 8 files changed, 358 insertions(+), 338 deletions(-)
 create mode 100644 public/shacl_vue_logo.svg

diff --git a/public/config.json b/public/config.json
index 8a5b509..a2fc048 100644
--- a/public/config.json
+++ b/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",
diff --git a/public/shacl_vue_logo.svg b/public/shacl_vue_logo.svg
new file mode 100644
index 0000000..ce1a35c
--- /dev/null
+++ b/public/shacl_vue_logo.svg
@@ -0,0 +1,84 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   version="1.1"
+   viewBox="0 0 285.89751 262.1539"
+   id="svg834"
+   sodipodi:docname="shacl_vue.svg"
+   inkscape:version="1.1.1 (c3084ef, 2021-09-22)"
+   width="285.89752"
+   height="262.1539"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs838" />
+  <sodipodi:namedview
+     id="namedview836"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     showgrid="false"
+     inkscape:zoom="0.75363192"
+     inkscape:cx="291.9197"
+     inkscape:cy="173.82491"
+     inkscape:window-width="1440"
+     inkscape:window-height="798"
+     inkscape:window-x="0"
+     inkscape:window-y="25"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg834" />
+  <g
+     id="g2754"
+     transform="translate(11.355959,59.400927)">
+    <g
+       transform="matrix(1.2528809,0,0,-1.2528809,161.756,25.534666)"
+       id="g826">
+      <path
+         d="M 7.9816046,14.366888 -22.669,-39.264 -51.80895,13.963629 -124.39961,1.1902026 -64.014426,-102.75402 -22.669,-134.98693 16.856526,-102.29905 75.491,0 Z"
+         fill="#41b883"
+         id="path824"
+         sodipodi:nodetypes="ccccccccc" />
+    </g>
+    <path
+       d="m 177.13948,124.33174 c -1.01433,-1.7475 -2.13362,-3.39583 -3.3032,-4.97292 l 1.16512,0.60347 c 0,0 -7.15478,-10.55481 11.82765,-42.872165 18.99045,-32.315637 32.6578,-31.31742 32.6578,-31.31742 l -1.51727,-0.857315 c 10.2555,0.867244 20.8697,-1.25871 30.46551,-6.811558 24.98446,-14.434878 33.52289,-46.4070996 19.08384,-71.394159 -14.45325,-24.980208 -46.40635,-33.53732 -71.39616,-19.079296 -10.2605,5.92405 -17.68966,14.837073 -21.94932,24.972901 l -0.0211,-1.094122 c 0,0 -4.59706,13.157223 -42.11471,13.05612 -37.518469,-0.0892 -44.49225,-16.06568 -44.49225,-16.06568 l 0.05946,1.630424 c -0.474307,-0.96083 -0.910966,-1.913035 -1.455355,-2.83983 C 71.705321,-57.69925 39.739501,-66.251892 14.751627,-51.800941 -10.231185,-37.350139 -18.772981,-5.3924303 -4.3345275,19.600878 6.4396676,38.218001 26.929724,47.699726 47.018829,45.334443 l -0.641765,0.382212 c 0,0 14.900434,-1.950505 33.752499,30.987771 14.88658,25.997384 10.856459,39.850474 8.520432,44.538834 -10.837431,16.0513 -12.338042,37.50127 -1.992686,55.39619 14.439351,24.99056 46.410521,33.53331 71.391931,19.08742 24.98675,-14.44254 33.54164,-46.41193 19.09023,-71.39512 z M 123.5215,98.946902 C 119.14634,97.976804 108.03652,92.990545 93.706186,67.97784 78.195737,40.877414 81.26673,28.248728 82.722508,24.791009 c 2.71192,-3.604418 4.876699,-7.541415 6.542158,-11.656981 l 0.0088,0.302647 c 0,0 4.45834,-11.3658452 41.513284,-11.2739555 33.15981,0.092006 42.18099,9.8250965 43.71842,11.8628405 0.74887,1.696766 1.58368,3.361948 2.52788,4.99777 1.79858,3.107964 3.87009,5.961763 6.16058,8.541792 1.33209,5.182993 1.83231,17.845172 -12.12928,41.600364 -14.05944,23.942385 -26.64193,28.701958 -32.41631,29.556291 -4.98518,-0.666546 -10.08298,-0.588164 -15.12655,0.225125 z"
+       fill="#0c479c"
+       id="path924"
+       style="fill:#34495e;fill-opacity:1;stroke-width:0.702033" />
+    <g
+       id="g928"
+       transform="matrix(0.59546034,0.37185665,-0.37185665,0.59546034,48.20801,-177.45852)">
+      <path
+         d="m 294.631,32.4 c -21.659,23.694 -22.118,58.544 -1.246,78.264 -10.316,-9.935 -10.093,-30.608 0.33,-50.387 1.342,-1.774 5.224,-5.961 10.898,-4.055 0.569,0.194 0.951,0.245 1.17,0.213 1.284,0.278 2.601,0.439 3.96,0.381 8.622,-0.393 15.288,-7.684 14.898,-16.307 -0.175,-3.868 -1.78,-7.292 -4.26,-9.92 20.007,-13.107 42.968,-14.61 52.375,-6.016 l 0.359,0.025 C 351.625,4.97 316.493,8.476 294.631,32.4 Z"
+         fill="#ffffff"
+         id="path926" />
+    </g>
+    <g
+       id="g934"
+       transform="matrix(0.59546034,0.37185665,-0.37185665,0.59546034,48.20801,-177.45852)">
+      <path
+         d="m 76.205,251.381 c -0.184,-0.19 -0.371,-0.406 -0.562,-0.598 0.121,0.125 0.235,0.279 0.378,0.407 z"
+         fill="#ffffff"
+         id="path930" />
+      <path
+         d="m 76.894,172.52 c -21.663,23.694 -22.114,58.541 -1.251,78.264 -10.313,-9.935 -10.092,-30.608 0.331,-50.387 1.345,-1.778 5.231,-5.961 10.906,-4.055 0.565,0.195 0.946,0.242 1.167,0.212 1.283,0.275 2.603,0.44 3.959,0.377 8.623,-0.392 15.288,-7.684 14.899,-16.303 -0.179,-3.867 -1.782,-7.296 -4.252,-9.92 19.995,-13.107 42.959,-14.617 52.366,-6.021 l 0.355,0.03 c -21.483,-19.631 -56.623,-16.126 -78.48,7.803 z"
+         fill="#ffffff"
+         id="path932" />
+    </g>
+    <g
+       id="g940"
+       transform="matrix(0.59546034,0.37185665,-0.37185665,0.59546034,48.20801,-177.45852)">
+      <path
+         d="m 306.701,370.015 c -0.187,-0.191 -0.374,-0.404 -0.564,-0.594 0.117,0.125 0.237,0.279 0.378,0.402 z"
+         fill="#ffffff"
+         id="path936" />
+      <path
+         d="m 307.39,291.145 c -21.666,23.704 -22.118,58.553 -1.254,78.276 -10.317,-9.935 -10.09,-30.611 0.331,-50.388 1.344,-1.781 5.227,-5.96 10.906,-4.053 0.568,0.189 0.941,0.242 1.166,0.212 1.282,0.277 2.605,0.44 3.963,0.381 8.617,-0.396 15.28,-7.692 14.891,-16.32 -0.176,-3.864 -1.781,-7.288 -4.252,-9.917 20.002,-13.103 42.959,-14.61 52.37,-6.016 l 0.355,0.029 c -21.483,-19.631 -56.625,-16.123 -78.476,7.796 z"
+         fill="#ffffff"
+         id="path938" />
+    </g>
+  </g>
+</svg>
diff --git a/src/App.vue b/src/App.vue
index 115b32d..535b3f7 100644
--- a/src/App.vue
+++ b/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>
\ No newline at end of file
+</script>
\ No newline at end of file
diff --git a/src/components/AppFooter.vue b/src/components/AppFooter.vue
index 1b10151..5bbbf70 100644
--- a/src/components/AppFooter.vue
+++ b/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>
diff --git a/src/components/AppHeader.vue b/src/components/AppHeader.vue
index 5c9b4f8..5a36ae0 100644
--- a/src/components/AppHeader.vue
+++ b/src/components/AppHeader.vue
@@ -5,13 +5,13 @@
                 <v-img
                     :width="36"
                     cover
-                    src="../assets/shacl_vue.svg"
+                    :src="props.logo"
                     style="margin-left: 10px;"
                 ></v-img>
             </a>
         </template>
         <v-app-bar-title> 
-            <a @click="goToHome()" class="header-button"><code style="font-size: 1em;">shacl-vue</code></a>
+            <a @click="goToHome()" class="header-button"><code style="font-size: 1em;">{{ appName }}</code></a>
         </v-app-bar-title>
 
         <template v-slot:append>
@@ -37,28 +37,32 @@
                     ></v-btn>
                 </template>
             </v-tooltip>
-            <v-tooltip text="Documentation" location="bottom">
-                <template v-slot:activator="{ props }">
-                    <v-btn 
-                    icon="mdi-text-box"
-                    href="https://psychoinformatics-de.github.io/shacl-vue/docs/"
-                    target="_blank"
-                    v-bind="props"
-                    class="header-button"
-                    ></v-btn>
-                </template>
-            </v-tooltip>
-            <v-tooltip text="Source code" location="bottom">
-                <template v-slot:activator="{ props }">
-                    <v-btn 
-                    icon="mdi-code-not-equal-variant"
-                    href="https://github.com/psychoinformatics-de/shacl-vue"
-                    target="_blank"
-                    v-bind="props"
-                    class="header-button"
-                    ></v-btn>
-                </template>
-            </v-tooltip>
+            <span v-if="documentationUrl">
+                <v-tooltip text="Documentation" location="bottom">
+                    <template v-slot:activator="{ props }">
+                        <v-btn 
+                        icon="mdi-text-box"
+                        :href="documentationUrl"
+                        target="_blank"
+                        v-bind="props"
+                        class="header-button"
+                        ></v-btn>
+                    </template>
+                </v-tooltip>
+            </span>
+            <span v-if="sourceCodeUrl">
+                <v-tooltip text="Source code" location="bottom">
+                    <template v-slot:activator="{ props }">
+                        <v-btn 
+                        icon="mdi-code-not-equal-variant"
+                        :href="sourceCodeUrl"
+                        target="_blank"
+                        v-bind="props"
+                        class="header-button"
+                        ></v-btn>
+                    </template>
+                </v-tooltip>
+            </span>
         </template>
     </v-app-bar>
 
@@ -98,11 +102,18 @@
 <script setup>
     import { inject, onBeforeMount, ref} from 'vue'
     import { useToken } from '@/composables/tokens'
+
+    const props = defineProps({
+        logo: String
+    })
+
     const { token, setToken, clearToken } = useToken()
     const submitFn = inject('submitFn')
     const canSubmit = inject('canSubmit')
+    const appName = inject('appName')
+    const documentationUrl = inject('documentationUrl')
+    const sourceCodeUrl = inject('sourceCodeUrl')
     const visible = ref(false)
-    
     const tokenDialog = ref(false)
     const tokenExists = ref(false)
     const tokenval = ref("")
@@ -153,13 +164,10 @@
 <style scoped>
 
     .header-button {
-        color: black;
+        color: #1d1d1d;
     }
     .header-button:hover {
         text-decoration: none;
         cursor:pointer;
     }
-
-    
-
 </style>
\ No newline at end of file
diff --git a/src/components/ShaclVue.vue b/src/components/ShaclVue.vue
index 44e9b64..98fdd1a 100644
--- a/src/components/ShaclVue.vue
+++ b/src/components/ShaclVue.vue
@@ -1,101 +1,107 @@
 <template>
-    <span v-if="page_ready">
-        <v-card>
-            <v-layout>
-                <v-navigation-drawer
-                    theme="dark"
-                    color="#41b883"
-                    v-model="drawer"
-                    permanent
-                >
-                    <v-list nav selectable :disabled="formOpen" v-model:selected="selectedItem">
-                        <v-list-item  value="data"><h4>Data Types</h4></v-list-item>
-                        <!-- <v-text-field variant="outlined" append-inner-icon="mdi-magnify" density="compact"></v-text-field> -->
-                        <v-list-item
-                            v-for="node in idFilteredNodeShapeNames"
-                            :prepend-icon="getClassIcon(nodeShapeNames[node])"
-                            :title="node"
-                            @click="selectType(nodeShapeNames[node], true)">
-                        </v-list-item>
-                    </v-list>
-                </v-navigation-drawer>
-                <v-main style="min-height: 90vh">
-                    <v-container fluid>
-                        <v-row>
-                            <v-col
-                                :cols="formOpen ? 3 : 12"
-                                class="transition-all"
-                                :class="formOpen ? 'opacity-column' : ''"
-                            >
-                                
-                                <span v-if="selectedIRI">
-                                    <h2 class="mx-4 mb-4 truncate-heading">
-                                        {{ toCURIE(selectedIRI, allPrefixes) }}
-                                        &nbsp;&nbsp; <v-btn icon="mdi-plus" size="x-small" variant="tonal" @click="addInstanceItem()"></v-btn>
-                                    </h2>
-
-                                    <p class="mx-4 mb-4" v-html="formattedDescription"></p>
-                                    
-                                    <span v-if="classRecordsLoading">
-                                        <v-skeleton-loader type="list-item-avatar"></v-skeleton-loader>
-                                    </span>
-                                    <span v-else>
-                                        <div v-if="instanceItemsComp.length">
-                                            <span v-for="r in instanceItemsComp">
-                                                <NodeShapeViewer :classIRI="selectedIRI" :quad="r.props.quad" :key="selectedIRI + '-' + r.title + '-' + itemsTrigger" :formOpen="formOpen" :variant="r.title == queried_id ? 'outlined' : 'tonal'"></NodeShapeViewer>
-                                            </span>
-                                        </div>
-                                        <div v-else style="margin-top: 1em; margin-left: 1em;">
-                                            <em>No items</em>
-                                        </div>
-                                    </span>
-                                </span>
-                                <span v-else style="margin-top: 1em; margin-left: 1em;">
-                                    <em>Select a data type</em>
-                                </span>
-
-                            </v-col>
-                            <v-col v-if="formOpen" cols="9">
-                                <v-expansion-panels variant="accordion" v-model="currentOpenForm" class="custompanels">
-                                    <v-expansion-panel
-                                        v-for="(f, i) in openForms"
-                                        :key="f.shapeIRI + '-'+ f.nodeIDX + '-expansionpanel'"
-                                        :value="'panel' + (i+1).toString()"
-                                        :disabled="f.disabled"
+    <AppHeader v-if="config_ready" :logo="configVarsMain.appTheme.logo" />
+    <v-main>
+        <v-container fluid>
+            <span v-if="page_ready">
+                <v-card>
+                    <v-layout>
+                        <v-navigation-drawer
+                            theme="dark"
+                            :color="configVarsMain.appTheme.panel_color"
+                            v-model="drawer"
+                            permanent
+                        >
+                            <v-list nav selectable :disabled="formOpen" v-model:selected="selectedItem">
+                                <v-list-item  value="data"><h4>Data Types</h4></v-list-item>
+                                <!-- <v-text-field variant="outlined" append-inner-icon="mdi-magnify" density="compact"></v-text-field> -->
+                                <v-list-item
+                                    v-for="node in idFilteredNodeShapeNames"
+                                    :prepend-icon="getClassIcon(nodeShapeNames[node])"
+                                    :title="node"
+                                    @click="selectType(nodeShapeNames[node], true)">
+                                </v-list-item>
+                            </v-list>
+                        </v-navigation-drawer>
+                        <v-main style="min-height: 90vh">
+                            <v-container fluid>
+                                <v-row>
+                                    <v-col
+                                        :cols="formOpen ? 3 : 12"
+                                        class="transition-all"
+                                        :class="formOpen ? 'opacity-column' : ''"
                                     >
-                                        <v-expansion-panel-title> <h2><em>Editing: {{ toCURIE(f.shapeIRI, allPrefixes) }} </em></h2></v-expansion-panel-title>
-                                        <v-expansion-panel-text density="compact">
-                                            <span v-if="idRecordLoading">
+                                        
+                                        <span v-if="selectedIRI">
+                                            <h2 class="mx-4 mb-4 truncate-heading">
+                                                {{ toCURIE(selectedIRI, allPrefixes) }}
+                                                &nbsp;&nbsp; <v-btn icon="mdi-plus" size="x-small" variant="tonal" @click="addInstanceItem()"></v-btn>
+                                            </h2>
+
+                                            <p class="mx-4 mb-4" v-html="formattedDescription"></p>
+                                            
+                                            <span v-if="classRecordsLoading">
                                                 <v-skeleton-loader type="list-item-avatar"></v-skeleton-loader>
                                             </span>
                                             <span v-else>
-                                                <FormEditor :key="f.shapeIRI + '-'+ f.nodeIDX + '-form-' + f.formType" :shape_iri="f.shapeIRI" :node_idx="f.nodeIDX"></FormEditor>
+                                                <div v-if="instanceItemsComp.length">
+                                                    <span v-for="r in instanceItemsComp">
+                                                        <NodeShapeViewer :classIRI="selectedIRI" :quad="r.props.quad" :key="selectedIRI + '-' + r.title + '-' + itemsTrigger" :formOpen="formOpen" :variant="r.title == queried_id ? 'outlined' : 'tonal'"></NodeShapeViewer>
+                                                    </span>
+                                                </div>
+                                                <div v-else style="margin-top: 1em; margin-left: 1em;">
+                                                    <em>No items</em>
+                                                </div>
                                             </span>
-                                        </v-expansion-panel-text>
-                                    </v-expansion-panel>
-                                </v-expansion-panels>
-                            </v-col>
-                        </v-row>
-                    </v-container>
-                </v-main>
-            </v-layout>
-        </v-card>
-        <v-dialog v-model="submitDialog" max-width="500">
-            <SubmitComp></SubmitComp>
-        </v-dialog>
-        <v-dialog v-model="noSubmitDialog" max-width="500" @click:outside="noSubmitDialog = false">
-            <v-card>
-                <v-card-title>Nothing to submit</v-card-title>
-                <v-card-text>You have no changes to submit</v-card-text>
-                <v-card-actions>
-                    <v-btn @click="noSubmitDialog = false">Close</v-btn>
-                </v-card-actions>
-            </v-card>
-        </v-dialog>
-    </span>
-    <span v-else>
-        <v-skeleton-loader type="article"></v-skeleton-loader>
-    </span>
+                                        </span>
+                                        <span v-else style="margin-top: 1em; margin-left: 1em;">
+                                            <em>Select a data type</em>
+                                        </span>
+
+                                    </v-col>
+                                    <v-col v-if="formOpen" cols="9">
+                                        <v-expansion-panels variant="accordion" v-model="currentOpenForm" class="custompanels">
+                                            <v-expansion-panel
+                                                v-for="(f, i) in openForms"
+                                                :key="f.shapeIRI + '-'+ f.nodeIDX + '-expansionpanel'"
+                                                :value="'panel' + (i+1).toString()"
+                                                :disabled="f.disabled"
+                                            >
+                                                <v-expansion-panel-title> <h2><em>Editing: {{ toCURIE(f.shapeIRI, allPrefixes) }} </em></h2></v-expansion-panel-title>
+                                                <v-expansion-panel-text density="compact">
+                                                    <span v-if="idRecordLoading">
+                                                        <v-skeleton-loader type="list-item-avatar"></v-skeleton-loader>
+                                                    </span>
+                                                    <span v-else>
+                                                        <FormEditor :key="f.shapeIRI + '-'+ f.nodeIDX + '-form-' + f.formType" :shape_iri="f.shapeIRI" :node_idx="f.nodeIDX"></FormEditor>
+                                                    </span>
+                                                </v-expansion-panel-text>
+                                            </v-expansion-panel>
+                                        </v-expansion-panels>
+                                    </v-col>
+                                </v-row>
+                            </v-container>
+                        </v-main>
+                    </v-layout>
+                </v-card>
+                <v-dialog v-model="submitDialog" max-width="500">
+                    <SubmitComp></SubmitComp>
+                </v-dialog>
+                <v-dialog v-model="noSubmitDialog" max-width="500" @click:outside="noSubmitDialog = false">
+                    <v-card>
+                        <v-card-title>Nothing to submit</v-card-title>
+                        <v-card-text>You have no changes to submit</v-card-text>
+                        <v-card-actions>
+                            <v-btn @click="noSubmitDialog = false">Close</v-btn>
+                        </v-card-actions>
+                    </v-card>
+                </v-dialog>
+            </span>
+            <span v-else>
+                <v-skeleton-loader type="article"></v-skeleton-loader>
+            </span>
+        </v-container>
+    </v-main>
+    <AppFooter />
 </template>
 
 
@@ -115,7 +121,8 @@
         getSubjectTriples,
         toIRI,
         addCodeTagsToText, 
-        findObjectByKey
+        findObjectByKey,
+        adjustHexColor
     } from '../modules/utils';
     import {SHACL, RDF, RDFS, DLTHINGS, XSD} from '@/modules/namespaces'
 
@@ -123,14 +130,30 @@
         configUrl: String
     })
 
+    const canSubmit = ref(true)
+    const submitButtonPressed = ref(false)
+    function submitFn() {
+        submitButtonPressed.value = true
+    }
+    provide('submitButtonPressed', submitButtonPressed)
+    provide('submitFn', submitFn)
+    provide('canSubmit', canSubmit)
+
+    const appName = ref("shacl-vue")
+    const documentationUrl = ref("https://psychoinformatics-de.github.io/shacl-vue/docs/")
+    const sourceCodeUrl = ref("https://github.com/psychoinformatics-de/shacl-vue")
+    provide('appName', appName)
+    provide('documentationUrl', documentationUrl)
+    provide('sourceCodeUrl', sourceCodeUrl)
+
     const activatedInstancesSelectEditor = ref(null)
     provide('activatedInstancesSelectEditor', activatedInstancesSelectEditor)
     const lastSavedNode = ref(null)
     provide('lastSavedNode', lastSavedNode)
     const itemsTrigger = ref(false)
     const queried_id = ref(null)
-    const showShapesWoID = ref(true)
-    const { config, configFetched, configError} = useConfig(props.configUrl);
+    const config_ready = ref(false)
+    const { config, configFetched, configError, configVarsMain, loadConfigVars} = useConfig(props.configUrl);
     const classRecordsLoading = ref(false)
     const idRecordLoading = ref(false)
     provide('config', config)
@@ -216,13 +239,9 @@
     provide('page_ready', page_ready)
     const allPrefixes = reactive({});
     provide('allPrefixes', allPrefixes)
-    const submitButtonPressed = inject('submitButtonPressed')
-    const canSubmit = inject('canSubmit')
     const noSubmitDialog = ref(false)
     const submitDialog = ref(false)
     provide('submitDialog', submitDialog)
-    const configPrefixes = ref({})
-    const configClassIcons = ref({})
 
     // When user clicks the submit button
     watch(submitButtonPressed, (newValue) => {
@@ -244,15 +263,16 @@
                 ID_IRI.value = config.value.id_iri
                 console.log(`ID_IRI is: ${ID_IRI.value}`)
             }
-            if (config.value.hasOwnProperty("show_shapes_wo_id")) {
-                showShapesWoID.value = config.value.show_shapes_wo_id
-            }
-            if (config.value.hasOwnProperty("prefixes")) {
-                configPrefixes.value = config.value.prefixes
-            }
-            if (config.value.hasOwnProperty("class_icons")) {
-                configClassIcons.value = config.value.class_icons
-            }
+            // Load all variables from config that are necessary for the main shaclvue component
+            loadConfigVars()
+            appName.value = configVarsMain.appName
+            documentationUrl.value = configVarsMain.documentationUrl
+            sourceCodeUrl.value = configVarsMain.sourceCodeUrl
+            document.documentElement.style.setProperty("--link-color", configVarsMain.appTheme.link_color);
+            document.documentElement.style.setProperty("--hover-color", configVarsMain.appTheme.hover_color);
+            document.documentElement.style.setProperty("--visited-color", adjustHexColor(configVarsMain.appTheme.link_color, -1));
+            document.documentElement.style.setProperty("--active-color", configVarsMain.appTheme.active_color);
+            config_ready.value = true
             await getGraphData()
             await getClassData()
             await getSHACLschema()
@@ -288,7 +308,7 @@
 
     const idFilteredNodeShapeNames = computed(() =>{
 
-        if (showShapesWoID.value === true) {
+        if (configVarsMain.showShapesWoID === true) {
             return nodeShapeNamesArray.value
         }
         var shapeNames = []
@@ -310,9 +330,9 @@
             // Get all prefixes and derive context from it
             Object.assign(allPrefixes, shapePrefixes, graphPrefixes, classPrefixes)
             var allPrefixKeys = Object.keys(allPrefixes)
-            Object.keys(configPrefixes.value).forEach(p => {
+            Object.keys(configVarsMain.prefixes).forEach(p => {
                 if (allPrefixKeys.indexOf(p) < 0) {
-                    allPrefixes[p] = configPrefixes.value[p]
+                    allPrefixes[p] = configVarsMain.prefixes[p]
                 }
             });
             console.log("ALL PREFIXES READY")
@@ -408,9 +428,9 @@
     }
 
     function getClassIcon(class_iri) {
-        if (configClassIcons.value) {
-            if (configClassIcons.value[class_iri] ) {
-                return configClassIcons.value[class_iri]
+        if (configVarsMain.classIcons) {
+            if (configVarsMain.classIcons[class_iri] ) {
+                return configVarsMain.classIcons[class_iri]
             }
         }
         return "mdi-circle-outline"
@@ -548,12 +568,6 @@
             "formType": formType,
             "disabled": false,
             "activatedInstancesSelectEditor": null,
-            // "activatedInstancesSelectEditor": {
-            //     nodeshape_iri: null,
-            //     node_iri: null,
-            //     predicate_iri: null,
-            //     predicate_idx: null,
-            // }
         })
     }
 
@@ -580,7 +594,7 @@
 
 <style>
     .code-style {
-        color: red;
+        color: #ff0000;
         background-color: #f5f5f5;
         padding: 0.1em 0.2em;
         font-family: monospace;
@@ -596,32 +610,27 @@
         margin: 0 !important;
         padding: 0 !important;
     }
-</style>
 
-<style scoped>
-    .banner {
-        display: flex;
-        flex-direction: row;
-        width: 100%;
-        margin: auto;
+    a {
+        color: var(--link-color);
+        text-decoration: none;
     }
-    .banner-column {
-        display: flex;
-        flex-direction: column;
-        flex: 1;
-        margin: 4em;
-        color: #34495e;
+
+    a:hover {
+        color: var(--hover-color);
+        text-decoration: underline;
     }
-    .banner-column h1 {
-        font-size: 2.5em;
+
+    a:visited {
+        color: var(--visited-color);
     }
-    .banner-buttons {
-        display: flex;
-        flex-direction: row;
-        width: 100%;
-        margin: auto;
-        margin-top: 1em;
+
+    a:active {
+        color: var(--active-color);
     }
+</style>
+
+<style scoped>
     .truncate-heading {
         white-space: nowrap; /* Prevent text wrapping */
         overflow: hidden;    /* Hide overflowed text */
diff --git a/src/composables/configuration.js b/src/composables/configuration.js
index 82c8dcb..b45b5c9 100644
--- a/src/composables/configuration.js
+++ b/src/composables/configuration.js
@@ -3,10 +3,28 @@
  * Composable for managing the application configuration
  */
 
-import { ref, onMounted } from 'vue'
+import { isObject, snakeToCamel, snakeToPascal } from '@/modules/utils';
+import { ref, onMounted, reactive, toRaw } from 'vue'
 const basePath = import.meta.env.BASE_URL || '/';
 
+const mainVarsToLoad = {
+    "show_shapes_wo_id": true,
+    "prefixes": {},
+    "class_icons": {},
+    "app_name": "",
+    "documentation_url": "",
+    "source_code_url": "",
+    "app_theme": {
+        "link_color": "#41b883",
+        "hover_color": "#1565C0",
+        "active_color": "#D32F2F",
+        "panel_color": "#41b883",
+        "logo": "shacl_vue_logo.svg",
+    }
+}
+
 export function useConfig(url) {
+    console.log("Using config...")
     const defaultURL = `${basePath}config.json`
     var configURL
     if (url) {
@@ -21,13 +39,16 @@ export function useConfig(url) {
     const config = ref(null);
     const configFetched = ref(false);
     const configError = ref(false);
+    const configVarsMain = reactive({});
+    for (const [key, value] of Object.entries(mainVarsToLoad)) {
+        configVarsMain[snakeToCamel(key)] = value
+    }
 
     onMounted(async () => {
         try {
             const response = await fetch(configURL, {cache: "no-cache"});
             if (!response.ok) {
                 configError.value = true;
-                console.log(`Provided config file path: ${configURL}`)
                 throw new Error(`Error fetching config file: ${response.statusText}`);
             }
             config.value = await response.json();
@@ -40,9 +61,26 @@ export function useConfig(url) {
         }
     });
 
+    function loadConfigVars () {
+        // only supports one level of recursion into objects
+        for (const [key, val] of Object.entries(mainVarsToLoad)) {
+            if (config.value.hasOwnProperty(key)) {
+                if (isObject(config.value[key])) {
+                    configVarsMain[snakeToCamel(key)] = val
+                    for (const [k, v] of Object.entries(config.value[key])) {
+                        if (v) configVarsMain[snakeToCamel(key)][k] = v
+                    }
+                } else {
+                    configVarsMain[snakeToCamel(key)] = config.value[key]
+                }
+            }
+        }
+    }
     return {
         config,
         configFetched,
         configError,
+        configVarsMain,
+        loadConfigVars,
     };
 }
\ No newline at end of file
diff --git a/src/modules/utils.js b/src/modules/utils.js
index 07b8548..a7502f9 100644
--- a/src/modules/utils.js
+++ b/src/modules/utils.js
@@ -342,3 +342,26 @@ export function getPrefLabel(node, graphData, allPrefixes, from) {
   }
   return prefLabel
 }
+
+export function snakeToPascal(snakeStr) {
+  return snakeStr
+      .split('_')
+      .map(word => word.charAt(0).toUpperCase() + word.slice(1))
+      .join('');
+}
+
+export function snakeToCamel(snakeStr) {
+  return snakeStr
+      .split('_')
+      .map((word, index) => index === 0 ? word.toLowerCase() : word.charAt(0).toUpperCase() + word.slice(1))
+      .join('');
+}
+
+export function adjustHexColor(hexColor, amount) {
+  // Remove the '#' if present
+  let colorInt = parseInt(hexColor.replace('#', ''), 16);
+  // Adjust the color value
+  colorInt = Math.max(0, Math.min(0xFFFFFF, colorInt + amount));
+  // Convert back to hex and ensure it's always 6 digits
+  return `#${colorInt.toString(16).padStart(6, '0')}`;
+}
\ No newline at end of file