[#467] Add Title Component

frontend/package.json

@@ -19,15 +19,18 @@
  "@fortawesome/free-brands-svg-icons": "^6.0.0",
  "@fortawesome/free-solid-svg-icons": "^6.0.0",
  "@fortawesome/vue-fontawesome": "^3.0.3",
+ "@types/markdown-it": "^13.0.7",
  "@types/minimatch": "^5.1.2",
  "@types/seedrandom": "^3.0.5",
  "core-js": "^3.6.5",
  "highlight.js": "^10.5.0",
  "jszip": "^3.5.0",
+ "markdown-it": "^14.0.0",
  "minimatch": "^5.0.1",
  "muicss": "^0.10.3",
  "normalize.css": "^8.0.1",
  "pug-lint-vue": "^0.4.0",
+ "raw-loader": "^4.0.2",
  "seedrandom": "^3.0.5",
  "vue": "^3.2.47",
  "vue-loading-overlay": "^5.0.3",

frontend/src/components/c-title.vue

@@ -0,0 +1,32 @@
+<template lang="pug">
+div(v-html="markdownText")
+</template>
+
+<script lang="ts">
+import MarkdownIt from 'markdown-it';
+import { defineComponent } from 'vue';
+import titleText from '../markdown/title.md';
+
+const emptyHtml = '<div />';
+
+export default defineComponent({
+ data() {
+ return {
+ markdownText: this.getMarkDownText(),
+ };
+ },
+ methods: {
+ getMarkDownText() {
+ let output = emptyHtml;
+ try {
+ output = new MarkdownIt()
+ .render(titleText);
+ } catch (e) {
+ // We don't want to crash the app if the markdown is invalid,
+ // so we just return an empty div
+ }
+ return output;
+ },
+ },
+});
+</script>

frontend/src/shims-vue.d.ts

@@ -4,3 +4,8 @@ declare module '*.vue' {
  const component: DefineComponent<{}, {}, any>
  export default component
 }
+
+declare module '*.md' {
+ const str: string
+ export default str
+}

frontend/src/styles/panels.scss

@@ -9,7 +9,6 @@
  display: flex;
  height: 100vh;
  left: 0;
- position: absolute;
  top: 0;
  width: 100%;
  z-index: z-index('app-wrapper');

frontend/src/views/c-home.vue

@@ -1,5 +1,6 @@
 <template lang="pug">
 #home
+ c-title
  template(v-if="userUpdated")
  c-resizer
  template(v-slot:left)
@@ -69,6 +70,7 @@
 <script lang='ts'>
 import { defineComponent } from 'vue';
 
+import cTitle from '../components/c-title.vue';
 import cResizer from '../components/c-resizer.vue';
 import cZoom from './c-zoom.vue';
 import cSummary from './c-summary.vue';
@@ -77,6 +79,7 @@ import cAuthorship from './c-authorship.vue';
 const home = defineComponent({
  name: 'c-home',
  components: {
+ cTitle,
  cResizer,
  cZoom,
  cSummary,

frontend/vue.config.js

@@ -15,6 +15,15 @@ module.exports = {
  files: ['src/**/*.{vue,scss}'],
  }),
  ],
+ module: {
+ rules: [
+ // Markdown Loader
+ {
+ test: /\.md$/,
+ loader: "raw-loader",
+ },
+ ],
+ }
  },
  chainWebpack: (config) => {
  // Pug Loader