Optics and vertical space savings

src/components/LDN.vue

@@ -2,24 +2,25 @@
     <Card v-bind:class="{ margined: true, highlight: isHighlighted }">
       <template #content>
         <div>
-          <i class="text-primary">{{ uri }} </i>
+          <i >Representation of {{ uri }} :</i>
         </div>
         <Divider />
-        <span v-if="!error" style="white-space: pre-line">
-          {{ ldn }}
-        </span>
+        <pre v-if="!error" class="text-primary" >{{ ldn }}</pre>
         <span v-else style="color: red">
           {{ error }}
         </span>
-      </template>
-      <template #footer>
+        <!--
         <Button
           icon="pi pi-times"
           label="Delete"
-          class="p-button-text p-button-rounded p-button-raised"
+          class="p-button-text p-button-rounded p-button-danger p-button-raised"
           @click="deleteResource(uri, authFetch)"
         />
+        -->
       </template>
+<!--      <template #footer>
+
+      </template> -->
     </Card>
 </template>
 
@@ -111,7 +112,7 @@ export default defineComponent({
   /* add 'border-color: transparent' if you wish no border to show initially */
 }
 .highlight {
-  -webkit-animation: borderBlink 1s step-end 3;
-  animation: borderBlink 1s step-end 3;
+  -webkit-animation: borderBlink 0.3s step-end 3;
+  animation: borderBlink 0.3s step-end 3;
 }
-</style>
+</style>

src/components/Messenger.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="grid">
+  <div class="grid" v-if="!versteckt">
     <div class="col lg:col-6 lg:col-offset-3">
       <div class="p-inputgroup">
         <!-- list go here -->
@@ -9,6 +9,7 @@
           @keyup.enter="sub"
         />
         <Button @click="sub"> watch </Button>
+        <Button v-on:click="versteckt = true" > hide </Button>
       </div>
     </div>
   </div>
@@ -43,6 +44,11 @@ import LDN from "@/components/LDN.vue";
 export default defineComponent({
   name: "Messenger",
   components: { LDN },
+  data: function() {
+      return {
+        versteckt: false
+    }
+  },
   async setup() {
     // const toast = useToast();
     const { authFetch } = useSolidSession();

src/lib/n3Extensions.ts

@@ -212,7 +212,7 @@ export const toTTL = (
 
   // n3Writer.addQuads(n3Store.getQuads(null, null, null, null))
   n3Writer.end((error, text) => (result = text));
-  return `# Parsed from underlying RDF graph.\n ${result}`;
+  return `${result}`;
 };
 
 /*