Improve Metrics insights Text formatting for issues, discussions, etc.

[Andre601]

Recently tried out the insights option of the metrics page.

There, I noticed that for issues, Pull requests, etc. the formatting is not always the same as in the source itself.

As an example, insights displays the following for an issue comment I made a while back:

Meanwhile, on GitHub is the issue actually looking like this:

A few things are noticeable:

1. Quotes aren't indicated as such. At most do they have an indent.
2. Code blocks are missing.
3. Newlines don't seem to be respected, as seen with the image.

I assume this could be because of markdown rendering? Iirc does GitHub's public events API return content as markdown in the case of comments and such...
Whatever the issue is, I hope this can be further improved as the insights option is rather nice.

[Andre601]

Something else I noticed:

If a comment contains checkboxes, either checked or unchecked, and you hover over them does your cursor show the "loading" icon despite the site no longer loading.
Is stuff still loading in the background for this to show?

[lowlighter]

I assume this could be because of markdown rendering? Iirc does GitHub's public events API return content as markdown in the case of comments and such...

GitHub does indeed return markdown content, which means that the app needs to handle the conversion to html by itself.
We use markedjs/marked for parsing, and the css is a loose adaptation of primer/css, which may be missing some styles and maybe newer design updates, since it's been quite some time since the web app redesign.

Code blocks are missing.

Code blocks should be doable too, though we may need to add some lazy loading rendering, because loading all highlighting syntaxes for all languages would have some scalability and performance issues.

Is stuff still loading in the background for this to show?

Actually insights option is just a html rendering of a json output from the regular metrics, but with a static configuration. So there's no stuff loading in the background, but it could be some remnants of the css of other page of the web app (since it shares some part of css).

The code snippet below contains the current insights configuration:

metrics/source/app/metrics/index.mjs

Lines 212 to 246 in 3553137

	//Metrics insights
	metrics.insights = async function({login}, {graphql, rest, conf}, {Plugins, Templates}) {
	const q = {
	template:"classic",
	achievements:true,
	"achievements.threshold":"X",
	isocalendar:true,
	"isocalendar.duration":"full-year",
	languages:true,
	"languages.limit":0,
	activity:true,
	"activity.limit":100,
	"activity.days":0,
	notable:true,
	followup:true,
	"followup.sections":"repositories, user",
	habits:true,
	"habits.from":100,
	"habits.days":7,
	"habits.facts":false,
	"habits.charts":true,
	introduction:true,
	}
	const plugins = {
	achievements:{enabled:true},
	isocalendar:{enabled:true},
	languages:{enabled:true, extras:false},
	activity:{enabled:true, markdown:"extended"},
	notable:{enabled:true},
	followup:{enabled:true},
	habits:{enabled:true, extras:false},
	introduction:{enabled:true},
	}
	return metrics({login, q}, {graphql, rest, plugins, conf, convert:"json"}, {Plugins, Templates})
	}

Whatever the issue is, I hope this can be further improved as the insights option is rather nice.

Overall, these issues does not requires too much changes or refactoring I think. I'll add an issue for tracking these changes.
I may work on it the next time I'll do a small metrics backlog rush, unless someone else wants to work on it in the meantime 👍

Glad you enjoy this feature though 😄 !