[#467] Add Title Component (#2102)

Implement Title Component

With a new focus on allowing users to use RepoSense as a portfolio
tool, more functionality supporting this focus is needed.

Let's allow users to add customizable content in Markdown/HTML format 
at the top of the report for a personalized introduction.

docs/ug/cli.md

@@ -31,7 +31,8 @@ The section below provides explanations for each of the flags.
 <div id="section-assets">
 
 **`--assets ASSETS_DIRECTORY`**: Specifies where to place assets for report generation.
-* Parameter: `ASSETS_DIRECTORY` The directory containing the assets files. A `favicon.ico` file can be placed here to customize the favicon of the dashboard.
+* Parameter: `ASSETS_DIRECTORY` The directory containing the assets files. A `favicon.ico` file can be placed here to customize the favicon of the dashboard,
+while a `title.md` file can be placed to customize the header of the report using [Markdown syntax](https://www.markdownguide.org/basic-syntax/).
 * Alias: `-a`
 * Example: `--assets ./assets` or `-a ./assets`
 

frontend/cypress/support.js

@@ -7,4 +7,8 @@ Cypress.Screenshot.defaults({
 
 beforeEach(() => {
   cy.visit('/');
+  cy.intercept({
+    method: 'GET',
+    url: '/title.md',
+  }, '# RepoSense Intro').as('getTitleMd');
 });

frontend/cypress/tests/general/general.cy.js

@@ -2,4 +2,8 @@ describe('general', () => {
   it('correctly replaces report title', () => {
     cy.title().should('eq', 'RepoSense Test Report');
   });
+
+  it('correctly contains given title', () => {
+    cy.get('h1').should('contain', 'RepoSense Intro');
+  });
 });

frontend/package.json

@@ -19,11 +19,13 @@
     "@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",

frontend/src/components/c-title.vue

@@ -0,0 +1,38 @@
+<template lang="pug">
+.title(v-html="markdownText", v-if="markdownText != ''")
+</template>
+
+<script lang="ts">
+import MarkdownIt from 'markdown-it';
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  data() {
+    return {
+      markdownText: '',
+    };
+  },
+  beforeMount() {
+    fetch('title.md').then((response) => {
+      if (!response.ok) { // file not found
+        return '';
+      }
+      return response.text();
+    }).then((text) => {
+      const md = new MarkdownIt({ html: true });
+      this.markdownText = md.render(text);
+    }).catch((error) => {
+      this.markdownText = (error as Error).toString();
+    });
+  },
+});
+</script>
+
+<style lang="scss" scoped>
+.title {
+  overflow-x: auto;
+  padding: 0 1.5rem;
+  // This is needed because the parent summary-wrapper center aligns everything
+  text-align: initial;
+}
+</style>

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

@@ -4,6 +4,7 @@
     c-resizer
       template(v-slot:left)
         #summary-wrapper
+          c-title(ref="cTitle")
           c-summary.tab-padding(
             ref="summary",
             v-bind:repos="users",
@@ -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,

src/main/java/reposense/report/ReportGenerator.java

@@ -87,7 +87,7 @@ public class ReportGenerator {
     private static final String LOG_ERROR_CLONING_OR_BRANCHING = "Exception met while cloning or checking out.";
     private static final String LOG_UNEXPECTED_ERROR = "Unexpected error stack trace for %s:\n>%s";
     private static final List<String> assetsFilesWhiteList =
-            Collections.unmodifiableList(Arrays.asList(new String[] {"favicon.ico"}));
+            Collections.unmodifiableList(Arrays.asList(new String[] {"favicon.ico", "title.md"}));
 
     private LocalDateTime earliestSinceDate = null;
     private ProgressTracker progressTracker = null;