Extend HTML code view

[MichaelCurrin]

This is useful for toggling from markdown to HTML for where markdown is not valid, like a centered div on a Jekyll site or Docsify.

This is not so often needed, so it can be a toggle rather than cluttering the screen with this and standard.

[irenejoeunpark]

Hi @MichaelCurrin Can I work on this issue?
And if you could, can you please provide more details?

[MichaelCurrin]

Hi thanks for the interest.

I actually added this already with limited functionality, across views.

[MichaelCurrin]

But something useful would be to store that value in the store in store.ts

i.e. you could tick or untick that checkbox and it will be remembered when navigating across views. and also on the catalogue page, you would tick or untick one item and all the others on the same page would update too.

e.g.

[MichaelCurrin]

And then a small change on the HTML functionality would be to trim the newline from the end of every HTML block when the MD to HTML happens.

Compare these two with my selection to highlight the issue:

Such as in here

badge-generator/src/core/markdown.ts

Lines 70 to 73 in 771595c

	export function mdToHTML(value: string): string {
	return md.render(value);
	}

If you add .trim() in there to wrap that render.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/Trim

[irenejoeunpark]

And then a small change on the HTML functionality would be to trim the newline from the end of every HTML block when the MD to HTML happens.

Compare these two with my selection to highlight the issue:

Such in here

badge-generator/src/core/markdown.ts

Lines 70 to 73 in 771595c

	export function mdToHTML(value: string): string {
	return md.render(value);
	}

If you add .trim() to wrap that

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/Trim

Okay, I will work on that update! Thanks for the details

[irenejoeunpark]

Hi @MichaelCurrin, I keep getting errors running the application. Or I might not be using the correct way to run vue app.
Could you tell me what environment setup is needed and which command to use to run the application?

[MichaelCurrin]

Can you add a screen shot and what commands you are running?

Node 16
Any OS

yarn install
yarn start

[MichaelCurrin]

Test the app on the main branch with no changes.

Then test again with your changes

[irenejoeunpark]

Can you add a screen shot and what commands you are running?

Node 16 Any OS

yarn install
yarn start

I was using the wrong command. It is working now thanks! I will create PR as soon as I finish with my change and tests

[irenejoeunpark]

Hi @MichaelCurrin, PR #135 is created for those two changes.

[MichaelCurrin]

can you have a look at the PR for my requested changes?

In particular the view on the Catalogue page is confusing and I could not figure out myself how to sync the checkbox value across all items on the page.

Another solution I'd accept is to refactor the Catalogue page to have a single HTML checkbox option, maybe in a footer of the page that is always visible, or a in the navbar.