Merge branch 'master' into minor-regex-enhancements

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-authorship-file.vue

@@ -347,78 +347,5 @@ export default defineComponent({
       padding-left: 4rem;
     }
   }
-
-  .segment {
-    border-left: .25rem solid mui-color('green');
-
-    .code {
-      background-color: mui-color('github', 'authored-code-background');
-      padding-left: 1rem;
-    }
-
-    .line-number {
-      color: mui-color('grey');
-      float: left;
-      // Not allowing user to select text
-      -webkit-touch-callout: none;
-      /* iOS Safari */
-      -webkit-user-select: none;
-      /* Safari */
-      -khtml-user-select: none;
-      /* Konqueror HTML */
-      -moz-user-select: none;
-      /* Firefox */
-      -ms-user-select: none;
-      /* Internet Explorer/Edge */
-      user-select: none;
-      /* Non-prefixed version, currently supported by Chrome and Opera */
-      width: 2rem;
-
-      // overwrite all hljs colors
-      [class^='hljs'] {
-        color: mui-color('grey');
-      }
-    }
-
-    .line-content {
-      padding-left: 2rem;
-      word-break: break-word;
-    }
-
-    &.untouched {
-      $grey: mui-color('grey', '400');
-      border-left: .25rem solid $grey;
-      height: 20px;
-      /* height of a single line of code */
-      position: relative;
-
-      &.active {
-        height: auto;
-
-        .code {
-          background-color: mui-color('white');
-        }
-      }
-
-      .closer {
-        cursor: pointer;
-        // custom margin for position of toggle icon
-        margin: .2rem 0 0 -.45rem;
-        position: absolute;
-
-        &.bottom {
-          //custom margin for position of toggle icon at the bottom of segment
-          margin: -1.05rem 0 0 -.45rem;
-        }
-
-        .icon {
-          background-color: mui-color('white');
-          color: mui-color('grey');
-          width: .75em;
-        }
-      }
-    }
-  }
-
 }
 </style>

frontend/src/components/c-segment.vue

@@ -69,6 +69,79 @@ export default defineComponent({
 });
 </script>
 
-<style lang="css">
+<style lang="scss" scoped>
 @import '../styles/hightlight-js-style.css';
+@import '../styles/_colors.scss';
+
+.segment {
+  border-left: .25rem solid mui-color('green');
+
+  .code {
+    background-color: mui-color('github', 'authored-code-background');
+    padding-left: 1rem;
+  }
+
+  .line-number {
+    color: mui-color('grey');
+    float: left;
+    // Not allowing user to select text
+    -webkit-touch-callout: none;
+    /* iOS Safari */
+    -webkit-user-select: none;
+    /* Safari */
+    -khtml-user-select: none;
+    /* Konqueror HTML */
+    -moz-user-select: none;
+    /* Firefox */
+    -ms-user-select: none;
+    /* Internet Explorer/Edge */
+    user-select: none;
+    /* Non-prefixed version, currently supported by Chrome and Opera */
+    width: 2rem;
+
+    // overwrite all hljs colors
+    [class^='hljs'] {
+      color: mui-color('grey');
+    }
+  }
+
+  .line-content {
+    padding-left: 2rem;
+    word-break: break-word;
+  }
+
+  &.untouched {
+    $grey: mui-color('grey', '400');
+    border-left: .25rem solid $grey;
+    height: 20px;
+    /* height of a single line of code */
+    position: relative;
+
+    &.active {
+      height: auto;
+
+      .code {
+        background-color: mui-color('white');
+      }
+    }
+
+    .closer {
+      cursor: pointer;
+      // custom margin for position of toggle icon
+      margin: .2rem 0 0 -.45rem;
+      position: absolute;
+
+      &.bottom {
+        //custom margin for position of toggle icon at the bottom of segment
+        margin: -1.05rem 0 0 -.45rem;
+      }
+
+      .icon {
+        background-color: mui-color('white');
+        color: mui-color('grey');
+        width: .75em;
+      }
+    }
+  }
+}
 </style>

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,