feat(compiler): customize readme mermaid diagram colors

[Tardigrada777]

Apply colors from the docs.markdown.targetComponent to the my-component node in the mermaid diagram.

fixes: #2876

What is the current behavior?

Currently, the background and text colors of the target node (my-component) in the Mermaid diagram are hardcoded, preventing users from customizing them.

GitHub Issue Number: #2876

What is the new behavior?

Users can now specify the background and text color of the target component in the 'docs' option within the Config. The compiler will then pick up these values and apply them to the generated Mermaid diagram.

Documentation

Users can specify colors in config:

export const config: Config {
  docs: {
    markdown: {
      targetComponent: {
        background: '#f0f0f0',
        textColor: '#f2f3f4',
      },
    },
  },
  // other options
}

Does this introduce a breaking change?

• Yes
• No

Testing

Just specify these colors in the config and run npm run build. Newly generated readme.md files will contain Mermaid diagram with specified colors for the target component.

Other information

I also added "run" to the one of the commands in CONTRIBUTING.md. There was a typo saying: "run npm install.jest".

[tanner-reits]

This looks good! Only additional ask I have would be to add some unit tests for the depsToMarkdown method. I know there aren't any test files/cases for that right now, so let me know if you have questions (don't worry about testing all functionality, just the bits you changed). If you don't have time/capacity, I'm happy to hop in an take care of that!

[tanner-reits]

Alright, I may have mislead you here, so I apologize. When testing the warning I realized that this method executes for every component with dependencies, so it's a bit annoying that the warning logs for every instance. So, that made me realize we should probably move this logic to the validateConfig method (and update appropriate tests). That way, by this point, we know that the value from the config is valid and the warning will only log once per build.

Again, very sorry I didn't catch this on the first review 😞

[Tardigrada777]

No prob @tanner-reits
You are right, I didn't run the build command after the last changes... I could catch it too.
I'll have a look 🙂

[tanner-reits]

@Tardigrada777 This is looking really close! Ran into one build issue testing things out related to the logger not being defined on the config that gets passed to the validateDocs function.

Made a tiny patch (attached to this comment) that fixes that issue and updates the logged message slightly. Check it out and let me know what you think!

Changes-On-2de6d4.patch

[Tardigrada777]

@tanner-reits I think that's totally fine to pass the logger instance to the validate function explicitly. Though it's weird, I saw in other files that logger is part of the validated config object. May be I'm wrong, at least in validate-config.ts:92 I see that the config is being created like that: bootstrapConfig.logger || config.logger || createNodeLogger(). May be that's the reason why logger is not in the config object.

If you can apply the patch, please, go ahead. If you need my assistance, please, let me know.