display readme and dockerfile if available

webapp/package-lock.json

@@ -5713,6 +5713,11 @@
       "integrity": "sha512-OeHeMc0JhFE9idD4ZdtNibzY0+TPHSpSSb9h8FqtP+YnoZZ1sl8Vc9b1sasjfymH3SonAF4QcA2+mzHPhMvIiw==",
       "dev": true
     },
+    "prism-es6": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/prism-es6/-/prism-es6-1.2.0.tgz",
+      "integrity": "sha512-A8JV9G2zKM8PWksT7YJcmnaWtYO6C9hSfxM/xv0RxB2aNc8rjv30WakzIw1gWyqLi2eiqquo2KmS7orxqlm+yg=="
+    },
     "private": {
       "version": "0.1.8",
       "resolved": "https://registry.npmjs.org/private/-/private-0.1.8.tgz",
@@ -7190,6 +7195,15 @@
       "resolved": "https://registry.npmjs.org/vue/-/vue-2.6.10.tgz",
       "integrity": "sha512-ImThpeNU9HbdZL3utgMCq0oiMzAkt1mcgy3/E6zWC/G6AaQoeuFdsl9nDhTDU3X1R6FK7nsIUuRACVcjI+A2GQ=="
     },
+    "vue-code-highlight": {
+      "version": "0.7.2",
+      "resolved": "https://registry.npmjs.org/vue-code-highlight/-/vue-code-highlight-0.7.2.tgz",
+      "integrity": "sha512-b9kvkgKu9TiZ6Y6bbPbuE6/a7nULgngfeBLgKm6yTVe58ABQkWZhNRZYjgMfuBdY1XJnLx/5zZGLRCw9Z9GoVw==",
+      "requires": {
+        "prism-es6": "^1.2.0",
+        "vue": "^2.5.16"
+      }
+    },
     "vue-functional-data-merge": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/vue-functional-data-merge/-/vue-functional-data-merge-3.1.0.tgz",

webapp/package.json

@@ -13,7 +13,8 @@
   "dependencies": {
     "bootstrap-vue": "^2.0.4",
     "marked": "^0.7.0",
-    "vue": "^2.5.11"
+    "vue": "^2.5.11",
+    "vue-code-highlight": "^0.7.2"
   },
   "browserslist": [
     "> 1%",

webapp/src/OcrdProjectListItem.vue

@@ -8,6 +8,9 @@
       <b-tab title="README">
         <div v-html="compiledReadme"></div>
       </b-tab>
+      <b-tab title="Dockerfile">
+        <vue-code-highlight>{{ repo.files.Dockerfile || '# NO DOCKERFILE' }}</vue-code-highlight>
+      </b-tab>
       <b-tab title="Git">
         <b-card-text>
           <p>
@@ -38,7 +41,12 @@
 
 <script>
 import marked from 'marked'
+import { component as VueCodeHighlight } from 'vue-code-highlight'
+
 export default {
+  components: {
+    VueCodeHighlight
+  },
   props: {
     repo: {required: true},
   },
@@ -48,7 +56,7 @@ export default {
     },
     compiledReadme() {
       let src = this.repo.files['README.md']
-      if (!src) src = '# NO README'
+      if (!src) src = '`# NO README`'
       return marked(src)
     }
   }
@@ -58,6 +66,6 @@ export default {
 <style>
 
 .ocrd-project-list-item {
-  max-width: 50%;
+  max-width: 30rem;
 }
 </style>

webapp/src/main.js

@@ -6,6 +6,17 @@ Vue.use(BootstrapVue)
 import 'bootstrap/dist/css/bootstrap.css'
 import 'bootstrap-vue/dist/bootstrap-vue.css'
 
+// import 'vue-code-highlight/themes/duotone-sea.css'
+import 'vue-code-highlight/themes/prism.css'
+import 'vue-code-highlight/themes/prism-coy.css'
+// import 'vue-code-highlight/themes/prism-dark.css'
+// import 'vue-code-highlight/themes/prism-funky.css'
+// import 'vue-code-highlight/themes/prism-okaidia.css'
+// import 'vue-code-highlight/themes/prism-solarizedlight.css'
+// import 'vue-code-highlight/themes/prism-tomorrow.css'
+// import 'vue-code-highlight/themes/prism-twilight.css'
+// import 'vue-code-highlight/themes/window.css'
+
 new Vue({
   el: '#ocrd-kwalitee',
   render: h => h(App)