[#467] Add Title Component #2102

sopa301 · 2024-01-29T17:40:43Z

Fixes #467

Proposed commit message

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 format at the
top of the report for a personalized introduction.

Other information

The input file 'title.md' is inserted with the --assets flag when the jar file is used.

asdfghjkxd

LGTM!

ckcherry23 · 2024-01-31T13:23:01Z

Hi @sopa301, thanks for working on this! I have not tested your code yet, but after skimming through the changes, I have some thoughts.

I think this feature would be more extensible if we allow the user to specify the markdown content needed as a config file in the RepoSense build command rather than a file within the frontend directory itself.
I am not fully sure if we are still looking for a simple text intro or a navbar like the CS2103T website. Would help if prof @damithc can clarify.
If a navbar is more preferable, one approach that we could try out is to require YAML frontmatter in the markdown file provided by the user. The frontmatter obtained (for example, a list of links and the header color) using a tool like gray-matter could be inserted into a template header component as props and displayed accordingly on the report.

damithc · 2024-01-31T13:29:28Z

I am not fully sure if we are still looking for a simple text intro or a navbar like the CS2103T website. Would help if prof @damithc can clarify.

@sopa301 Can you provide screenshots of how it looks and how one is supposed to configure the content?

sopa301 · 2024-01-31T13:57:49Z

Currently, the content is obtained by looking for a title.md file in the markdown folder. I can rewrite it in the way that is suggested to give more flexibility.

Regarding prof @damithc 's query of how it looks:
Input file (an excerpt of the RepoSense README):

Html report (the whole screen):

The rest of the report can be accessed by scrolling down and the title can be removed from view by scrolling down.

damithc · 2024-01-31T14:24:52Z

The rest of the report can be accessed by scrolling down and the title can be removed from view by scrolling down.

Sounds promising @sopa301 Is there any live preview for me to see how it work?
I assume if the title.md is not present, the report looks same as before adding this feature?

…7-add-intro

sopa301 · 2024-02-01T14:47:25Z

Unfortunately I don't have a way to provide a live preview now. Also there's a bug in the tests, so the github preview doesn't work. I can show it to you in person next monday if I don't solve the bug by then. If someone knows of another way to host a preview do let me know!

If the title.md is empty, the report will look the same as before. I forgot to handle the case where the file is missing, but I think I'll rewrite the code to account for this scenario.

damithc · 2024-02-01T15:03:05Z

Unfortunately I don't have a way to provide a live preview now.

Generate the report locally and upload to a temp github.io site?

sopa301 · 2024-02-01T15:51:26Z

I managed to host the html file here, although I messed up somewhere and the data didn't get uploaded as well. I'll update the link if I got it fixed.

ckcherry23

LGTM!
I would recommend getting approval for the UI from Prof as well, either by deploying an example or demoing it during the lecture slot.

frontend/src/components/c-title.vue

Co-authored-by: Charisma Kausar <[email protected]>

vvidday

Thanks for your work on this @sopa301!

Just wanted to highlight some things about the usage of v-html: There are some pretty important security concerns we need to be mindful of when using this, since rendering HTML that's partly controlled by users has the potential to lead to XSS vulnerabilities.

Reference: Vue's docs and React's equivalent (React even deliberately named their property dangerouslySetInnerHTML)

Did some reading and it seems like it's OK in this case, as the library we're using (Markdown-it) claims to output safe HTML as long as the raw HTML option is disabled (which it is by default). Just wanted to highlight this point to make sure we are mindful of it if we want to introduce any more advanced features like custom styling in the future.

frontend/src/components/c-title.vue

frontend/src/shims-vue.d.ts

…into 467-add-intro

ckcherry23

@sopa301 Would it be possible to add tests for the title component?

vvidday

LGTM!
Will wait for approval re: the UI from prof as per @ckcherry23 above before merging

sopa301 · 2024-02-17T10:37:58Z

@sopa301 Would it be possible to add tests for the title component?

I can implement some tests to check for correct handling of exceptions. I think this would be a good time to try to integrate Jest since this component needs to handle negative cases and needs unit testing.

On the other hand, I don't think testing the markdown itself should be necessary, right?

ckcherry23 · 2024-02-17T13:06:49Z

On the other hand, I don't think testing the markdown itself should be necessary, right?

Yes, since rendering the Markdown is handled by an external library, we don't have to test it.

Since we have to do some setup for the unit tests, we could do that in a different PR.
We could also look into Vitest instead of Jest since it is recommended by Vue and see if it benefits us (eg. speed).

sopa301 · 2024-02-19T04:45:04Z

I have discussed this with Prof @damithc and he suggested allowing raw HTML so that we can do styling with the md file. The security risks might be reasonable because the users will host their own reports, so they will have full control over what they insert into the title. I have enabled it for now.

github-actions · 2024-02-19T06:23:17Z

The following links are for previewing this pull request:

Dashboard Preview: https://dashboard-2102-pr-reposense-reposense.surge.sh
Docs Preview: https://docs-2102-pr-reposense-reposense.surge.sh

damithc · 2024-03-13T03:18:57Z

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/).


@sopa301 Noticed while passing: There should not be a line break here (in markdown files, we should not wrap lines to a specific length).

@sopa301 Further comments:

There should be more details of this feature. For example, code for an example title component.

Doesn't feel like this is the right place to document this feature. Perhaps add as a separate section in https://reposense.org/ug/customizingReports.html ?

Also, perhaps add a title component to our preview dashboard?

Thanks for the review prof, I'll work on it!

damithc · 2024-03-14T11:27:11Z

Feature in action https://nus-tic2002-ay2324s2.github.io/ip-dashboard/?search=&sort=groupTitle&sortWithin=title&timeframe=commit&mergegroup=&groupSelect=groupByRepos&breakdown=true&checkedFileTypes=java~md~fxml~sh~bat~gradle~txt&since=2024-01-15

sopa301 added 3 commits January 30, 2024 01:13

Add title component

8cc525f

Remove testing code

a223766

Add handling for invalid files

31ef993

sopa301 added the s.Ongoing label Jan 29, 2024

sopa301 changed the title ~~[467] Add Title Component~~ [#467] Add Title Component Jan 29, 2024

sopa301 added 4 commits January 30, 2024 01:44

Update package-lock

0511528

Remove extra component usage

caeee3c

Remove console statement

6f6251c

Remove faulty package-lock

5157f59

sopa301 marked this pull request as ready for review January 30, 2024 07:07

sopa301 removed the s.Ongoing label Jan 30, 2024

sopa301 requested a review from a team January 30, 2024 07:08

asdfghjkxd approved these changes Jan 31, 2024

View reviewed changes

ckcherry23 requested a review from a team January 31, 2024 13:24

ckcherry23 added the s.ToReview label Jan 31, 2024

sopa301 added 3 commits January 31, 2024 22:27

Add test title

39c5d07

Add EOL

d726113

Merge branch 'master' of https://github.com/sopa301/RepoSense into 46…

14b6d34

…7-add-intro

sopa301 added 5 commits February 7, 2024 00:45

Fix scrolling and test bugs

b3343dc

Fix line length

0ff36c5

Merge branch 'master' into 467-add-intro

bcdacef

Make title load from --assets folder

b3fdd84

Make title path more general

293ad11

Fix style

6ca0305

ckcherry23 approved these changes Feb 15, 2024

View reviewed changes

frontend/src/components/c-title.vue Outdated Show resolved Hide resolved

ckcherry23 requested a review from a team February 15, 2024 19:39

ckcherry23 added s.FinalReview and removed s.ToReview labels Feb 15, 2024

sopa301 and others added 2 commits February 16, 2024 15:04

Update frontend/src/components/c-title.vue

f7d7a6d

Co-authored-by: Charisma Kausar <[email protected]>

Merge branch 'master' into 467-add-intro

65fc7ea

vvidday requested changes Feb 17, 2024

View reviewed changes

frontend/src/components/c-title.vue Outdated Show resolved Hide resolved

frontend/src/shims-vue.d.ts Outdated Show resolved Hide resolved

sopa301 added 3 commits February 17, 2024 16:15

Remove unneeded code and fix promise bug

a083ef0

Merge branch '467-add-intro' of https://github.com/sopa301/RepoSense …

2032cdc

…into 467-add-intro

Fix style

a19362d

ckcherry23 reviewed Feb 17, 2024

View reviewed changes

vvidday approved these changes Feb 17, 2024

View reviewed changes

Remove unused code

644fd83

Add test

ae772a4

Enable raw HTML

e07a12e

ckcherry23 approved these changes Feb 19, 2024

View reviewed changes

ckcherry23 added s.ToMerge and removed s.FinalReview labels Feb 19, 2024

ckcherry23 mentioned this pull request Feb 19, 2024

Align report title with right panel #2127

Open

ckcherry23 merged commit b103e28 into reposense:master Feb 19, 2024
10 checks passed

sopa301 mentioned this pull request Feb 19, 2024

[#1872] Update Node version to 18 #2081

Merged

damithc reviewed Mar 13, 2024

View reviewed changes

sopa301 mentioned this pull request Mar 16, 2024

Add More Documentation for Title Component #2158

Closed

sopa301 mentioned this pull request May 12, 2024

[#2170] Add Blurbs for Repos #2191

Merged

1 task

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[#467] Add Title Component #2102

[#467] Add Title Component #2102

sopa301 commented Jan 29, 2024 •

edited

Loading

asdfghjkxd left a comment

ckcherry23 commented Jan 31, 2024

damithc commented Jan 31, 2024

sopa301 commented Jan 31, 2024 •

edited

Loading

damithc commented Jan 31, 2024

sopa301 commented Feb 1, 2024

damithc commented Feb 1, 2024

sopa301 commented Feb 1, 2024

ckcherry23 left a comment

vvidday left a comment

ckcherry23 left a comment

vvidday left a comment •

edited

Loading

sopa301 commented Feb 17, 2024 •

edited

Loading

ckcherry23 commented Feb 17, 2024

sopa301 commented Feb 19, 2024 •

edited

Loading

github-actions bot commented Feb 19, 2024

damithc Mar 13, 2024

damithc Mar 13, 2024

damithc Mar 13, 2024

sopa301 Mar 13, 2024

damithc commented Mar 14, 2024

[#467] Add Title Component #2102

[#467] Add Title Component #2102

Conversation

sopa301 commented Jan 29, 2024 • edited Loading

Proposed commit message

Other information

asdfghjkxd left a comment

Choose a reason for hiding this comment

ckcherry23 commented Jan 31, 2024

damithc commented Jan 31, 2024

sopa301 commented Jan 31, 2024 • edited Loading

damithc commented Jan 31, 2024

sopa301 commented Feb 1, 2024

damithc commented Feb 1, 2024

sopa301 commented Feb 1, 2024

ckcherry23 left a comment

Choose a reason for hiding this comment

vvidday left a comment

Choose a reason for hiding this comment

ckcherry23 left a comment

Choose a reason for hiding this comment

vvidday left a comment • edited Loading

Choose a reason for hiding this comment

sopa301 commented Feb 17, 2024 • edited Loading

ckcherry23 commented Feb 17, 2024

sopa301 commented Feb 19, 2024 • edited Loading

github-actions bot commented Feb 19, 2024

damithc Mar 13, 2024

Choose a reason for hiding this comment

damithc Mar 13, 2024

Choose a reason for hiding this comment

damithc Mar 13, 2024

Choose a reason for hiding this comment

sopa301 Mar 13, 2024

Choose a reason for hiding this comment

damithc commented Mar 14, 2024

sopa301 commented Jan 29, 2024 •

edited

Loading

sopa301 commented Jan 31, 2024 •

edited

Loading

vvidday left a comment •

edited

Loading

sopa301 commented Feb 17, 2024 •

edited

Loading

sopa301 commented Feb 19, 2024 •

edited

Loading