Rdf highlighting

apps/bank/src/assets/highlightjs-turtle/turtle.js

@@ -0,0 +1,114 @@
+/*
+Language: Turtle
+Author: Redmer KRONEMEIJER <[email protected]>
+Contributors: Mark ELLIS <[email protected]>, Vladimir ALEXIEV <[email protected]>
+*/
+function hljsDefineTurtle(hljs) {
+  var KEYWORDS = {
+    keyword: "BASE|2 PREFIX|5 @base|10 @prefix|10",
+    literal: "true false",
+    built_in: "a",
+  };
+
+  var IRI_LITERAL = {
+    className: "literal",
+    relevance: 1,
+    begin: /</,
+    end: />/,
+  };
+
+  var PN_CHARS_BASE =
+      "A-Za-z\u00C0-\u00D6\u00D8-\u00F6\u00F8-\u02FF\u0370-\u037D\u037F-\u1FFF\u200C-\u200D\u2070-\u218F\u2C00-\u2FEF\u3001-\uD7FF\uF900-\uFDCF\uFDF0-\uFFFD\u10000-\uEFFFF";
+  var PN_CHARS_U = PN_CHARS_BASE + "_";
+  var PN_CHARS = "-" + PN_CHARS_U + "0-9\u00B7\u0300-\u036F\u203F-\u2040";
+  var BLANK_NODE_LABEL =
+      "_:" + PN_CHARS_U + "0-9?";
+  var PN_PREFIX =
+      "" + PN_CHARS_BASE + "?";
+  var PERCENT = "%[0-9A-Fa-f][0-9A-Fa-f]";
+  var PN_LOCAL_ESC = "\\\\[_~.!$&'()*+,;=/?#@%-]";
+  var PLX = PERCENT + "|" + PN_LOCAL_ESC;
+  var PNAME_NS = "(" + PN_PREFIX + ")?:";
+  var PN_LOCAL =
+      "([" +
+      PN_CHARS_U +
+      ":0-9]|" +
+      PLX +
+      ")([" +
+      PN_CHARS +
+      ".:]|" +
+      PLX +
+      ")*([" +
+      PN_CHARS +
+      ":]|" +
+      PLX +
+      ")?";
+  var PNAME_LN = PNAME_NS + PN_LOCAL;
+  var PNAME_NS_or_LN = PNAME_NS + "(" + PN_LOCAL + ")?";
+
+  var PNAME = {
+    begin: PNAME_NS_or_LN,
+    relevance: 0,
+    className: "symbol",
+  };
+
+  var BLANK_NODE = {
+    begin: BLANK_NODE_LABEL,
+    relevance: 10,
+    className: "template-variable",
+  };
+
+  var LANGTAG = {
+    begin: /@[a-zA-Z]+([a-zA-Z0-9-]+)*/,
+    className: "type",
+    relevance: 0,
+  };
+
+  var DATATYPE = {
+    begin: "\\^\\^" + PNAME_LN,
+    className: "type",
+    relevance: 10,
+  };
+
+  var TRIPLE_APOS_STRING = {
+    begin: /'''/,
+    end: /'''/,
+    className: "string",
+    relevance: 0,
+  };
+
+  var TRIPLE_QUOTE_STRING = {
+    begin: /"""/,
+    end: /"""/,
+    className: "string",
+    relevance: 0,
+  };
+
+  var APOS_STRING_LITERAL = JSON.parse(JSON.stringify(hljs.APOS_STRING_MODE));
+  APOS_STRING_LITERAL.relevance = 0;
+
+  var QUOTE_STRING_LITERAL = JSON.parse(JSON.stringify(hljs.QUOTE_STRING_MODE));
+  QUOTE_STRING_LITERAL.relevance = 0;
+
+  return {
+    name: "Turtle",
+    case_insensitive: true,
+    keywords: KEYWORDS,
+    aliases: ["turtle", "ttl", "n3"],
+    contains: [
+      LANGTAG,
+      DATATYPE,
+      IRI_LITERAL,
+      BLANK_NODE,
+      PNAME,
+      TRIPLE_APOS_STRING,
+      TRIPLE_QUOTE_STRING,
+      APOS_STRING_LITERAL,
+      QUOTE_STRING_LITERAL,
+      hljs.C_NUMBER_MODE,
+      hljs.HASH_COMMENT_MODE,
+    ],
+  };
+}
+
+module.exports = hljsDefineTurtle;

apps/bank/src/components/BusinessDataPanel.spec.ts

@@ -3,7 +3,11 @@ import {Store, Writer} from 'n3';
 import BusinessDataPanel from "@/components/BusinessDataPanel.vue";
 
 jest.mock('@/assets/check.svg', () => 'mocked-check-icon-path');
-
+jest.mock('highlight.js/styles/stackoverflow-light.css', () => 'mocked-check-icon-path');
+jest.mock('highlight.js/lib/core', () => ({
+    highlightBlock: jest.fn(),
+    registerLanguage: jest.fn()
+}));
 describe('BusinessDataPanel.vue', () => {
     let store: Store;
     let writer: Writer;

apps/bank/src/components/BusinessDataPanel.vue

@@ -1,6 +1,15 @@
 <script setup lang="ts">
-import { Store, Writer } from 'n3';
-import { ref } from 'vue';
+import {Store, Writer} from 'n3';
+import {onMounted, ref} from 'vue';
+import hljs from "highlight.js/lib/core";
+import hljsDefineTurtle from '../assets/highlightjs-turtle/turtle.js';
+import 'highlight.js/styles/stackoverflow-light.css';
+
+hljs.registerLanguage('turtle', hljsDefineTurtle);
+
+onMounted(() => {
+  hljs.highlightBlock(document.querySelector('.turtle'));
+});
 
 const props = defineProps({
   store: Store
@@ -20,8 +29,8 @@ if (props.store) {
 </script>
 
 <template>
-  <div class="card bg-gray-50 border-round" style="background: rgba(232, 236, 239, 0.7); padding:0.5rem">
-    <p class="m-0">{{ displayText }} </p>
+  <div class="p-1">
+    <pre><code ref="codeBlock" class="turtle border-round bg-gray-50">{{ displayText }}</code></pre>
   </div>
   <div class="success-message border-round">
     <p>Looks good: Automatic processing returned positive!

apps/bank/src/components/DemandProcessor.spec.ts

@@ -4,6 +4,7 @@ import PrimeVue from "primevue/config";
 import ToastService from "primevue/toastservice";
 import ConfirmationService from "primevue/confirmationservice";
 
+jest.mock('highlight.js/styles/stackoverflow-light.css', () => 'mocked-check-icon-path');
 describe('DemandProcessor.vue', () => {
   it('should render DemandProcessor', async() => {
     const wrapper = mount(DemandProcessor, {

apps/bank/src/components/DemandProcessor.vue

@@ -71,7 +71,7 @@
   </div>
 
 
-  <Dialog v-model:visible="isDialogVisible" modal header="Requested business assessment data" :style="{ width: '55rem' }">
+  <Dialog v-model:visible="isDialogVisible" modal header="Requested business assessment data" :style="{ width: '80%' }">
     <div v-if="!businessDataFetched">
       <Skeleton width="100%" height="300px" ></Skeleton>
       <Skeleton width="100%" height="50px" class="mb-5 mt-2"></Skeleton>

apps/bank/src/router/accessRequestHandledCallback.spec.ts

@@ -1,4 +1,5 @@
 import onResult from "@/router/accessRequestHandledCallback";
+jest.mock('highlight.js/styles/stackoverflow-light.css', () => 'mocked-check-icon-path');
 
 describe('accessRequestHandledCallback', () => {
   it('should memorize callback uri', async () => {

package.json

@@ -16,25 +16,22 @@
     "build": "lerna run build",
     "test": "lerna run test",
     "lint": "lerna run lint",
-
     "version": "lerna version",
     "prepublish": "run-s libs:build",
     "publish": "lerna publish from-package",
-
     "apps:build": "lerna run build --scope \"@apps/*\"",
     "apps:lint": "lerna run lint --scope \"@apps/*\"",
     "apps:test": "lerna run test --scope \"@apps/*\"",
-
     "libs:build": "lerna run build --scope \"@datev-research/*\"",
     "libs:lint": "lerna run lint --scope \"@datev-research/*\"",
     "libs:test": "lerna run test --scope \"@datev-research/*\"",
-
     "prepare": "husky"
   },
   "dependencies": {
     "@vueuse/components": "^11.1.0",
     "@vueuse/core": "^11.1.0",
     "axios": "^1.7.2",
+    "highlight.js": "^11.9.0",
     "jose": "^5.4.0",
     "n3": "^1.16.2",
     "primeflex": "^3.3.1",
@@ -48,8 +45,8 @@
   "devDependencies": {
     "@fullhuman/postcss-purgecss": "^4.0.0",
     "@fullhuman/vue-cli-plugin-purgecss": "~6.0.0",
-    "@types/n3": "^1.10.4",
     "@types/jest": "^29.0.0",
+    "@types/n3": "^1.10.4",
     "@typescript-eslint/eslint-plugin": "^5.4.0",
     "@typescript-eslint/parser": "^5.4.0",
     "@vue/cli-plugin-babel": "~5.0.0",
@@ -62,11 +59,11 @@
     "eslint": "^7.32.0",
     "eslint-plugin-vue": "^8.0.3",
     "husky": "^9.1.6",
-    "lerna": "^8.1.9",
     "jest": "^29.0.0",
-    "ts-jest": "^29.0.0",
+    "lerna": "^8.1.9",
     "sass": "^1.72.0",
     "sass-loader": "^16.0.2",
+    "ts-jest": "^29.0.0",
     "typescript": "^5.4.5"
   },
   "workspaces": [