feat: Dashboards learned "text" block type, for including readme content

type: text
props:
  file: my-readme.md

Will now display a rendered markdown text file.

src/charts/allCharts.ts

@@ -11,6 +11,7 @@ import line from './line.vue'
 import pie from './pie.vue'
 import sankey from './sankey.vue'
 import scatter from './scatter.vue'
+import text from './text.vue'
 import transit from './transit.vue'
 import vega from './vega.vue'
 
@@ -32,6 +33,7 @@ export const plotlyCharts = {
   line,
   pie,
   sankey,
+  text,
   transit,
   scatter,
   vega,

src/charts/text.vue

@@ -0,0 +1,66 @@
+<template lang="pug">
+.curate-content.markdown(
+  v-if="readmeContent"
+  v-html="readmeContent"
+)
+
+</template>
+
+<script lang="ts">
+import { Vue, Component, Watch, Prop } from 'vue-property-decorator'
+import markdown from 'markdown-it'
+
+import { FileSystemConfig } from '@/Globals'
+import HTTPFileSystem from '@/js/HTTPFileSystem'
+
+const mdRenderer = new markdown({
+  html: true,
+  linkify: true,
+  typographer: true,
+})
+
+@Component({})
+export default class VueComponent extends Vue {
+  @Prop({ required: true }) fileSystemConfig!: FileSystemConfig
+  @Prop({ required: true }) subfolder!: string
+  @Prop({ required: true }) files!: string[]
+  @Prop({ required: true }) config!: any
+
+  private readmeContent = ''
+
+  private async mounted() {
+    try {
+      const fileApi = new HTTPFileSystem(this.fileSystemConfig)
+
+      const filename = `${this.subfolder}/${this.config.file}`
+      const text = await fileApi.getFileText(filename)
+      this.readmeContent = mdRenderer.render(text)
+    } catch (e: any) {
+      console.log({ e })
+      let error = '' + e
+      if (e.statusText) error = e.statusText
+
+      this.readmeContent = `${this.config.file}: ${error}`
+    }
+
+    this.$emit('isLoaded')
+  }
+}
+</script>
+
+<style scoped lang="scss">
+@import '@/styles.scss';
+
+.dash-element {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  display: flex;
+  flex-direction: column;
+}
+
+@media only screen and (max-width: 640px) {
+}
+</style>

src/views/FolderBrowser.vue

@@ -128,7 +128,11 @@ export default class VueComponent extends Vue {
 
   private globalState = globalStore.state
 
-  private mdRenderer = new markdown()
+  private mdRenderer = new markdown({
+    html: true,
+    linkify: true,
+    typographer: true,
+  })
 
   private myState: IMyState = {
     errorStatus: '',
@@ -231,6 +235,7 @@ export default class VueComponent extends Vue {
 
     this.myState.svnProject = svnProject
     this.myState.subfolder = this.xsubfolder || ''
+    this.myState.readme = ''
 
     if (!this.myState.svnProject) return
     this.myState.svnRoot = new HTTPFileSystem(this.myState.svnProject)
@@ -269,10 +274,9 @@ export default class VueComponent extends Vue {
   }
 
   private async showReadme() {
+    this.myState.readme = ''
     const readme = 'readme.md'
-    if (this.myState.files.indexOf(readme) === -1) {
-      this.myState.readme = ''
-    } else {
+    if (this.myState.files.map(f => f.toLocaleLowerCase()).indexOf(readme) > -1) {
       if (!this.myState.svnRoot) return
       const text = await this.myState.svnRoot.getFileText(this.myState.subfolder + '/' + readme)
       this.myState.readme = this.mdRenderer.render(text)