Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Make mermaid diagram colors configurable #2876

Closed
oddcelot opened this issue Apr 7, 2021 · 3 comments · Fixed by #5980
Closed

Make mermaid diagram colors configurable #2876

oddcelot opened this issue Apr 7, 2021 · 3 comments · Fixed by #5980
Assignees
@Tardigrada777
Labels
Good First Issue This is a good first issue for someone wantng to contribute to Stencil!

Comments

@oddcelot
Copy link

oddcelot commented Apr 7, 2021

Just stumbled upon this line in the markdown generator. Are there any overrides for the colors used here? 🤔

stencil/src/compiler/docs/readme/markdown-dependencies.ts

Line 41 in 45388e9

content.push(` style ${cmp.tag} fill:#f9f,stroke:#333,stroke-width:4px`);

Maybe we could make this configurable via stencil.config.ts

Would make for great design cohesion, when using the docs in storybook for example 🙃
@ionitron-bot ionitron-bot bot added the triage label Apr 7, 2021
@splitinfinities splitinfinities added Good First Issue This is a good first issue for someone wantng to contribute to Stencil! Integration: Auto documentation labels Nov 13, 2021
@ionitron-bot ionitron-bot bot removed the triage label Nov 13, 2021
@Tardigrada777
Copy link
Contributor

Tardigrada777 commented Jun 15, 2024 •
edited
Loading

I'm interested in taking on this issue. Here's a preliminary implementation plan, open to discussion and refinement:

  • Add a new docs field in the configuration, including a markdown subfield for color customization.
  • Extend the generateReadmeDocs function to pass the configuration down to the depsToMarkdown function.
  • Implement the use of custom colors in depsToMarkdown, falling back to defaults if not specified.

My current understanding is that these colors correspond to the nodes representing individual components in the dependency tree diagram:

 content.push(`  style ${cmp.tag} fill:#f9f,stroke:#333,stroke-width:4px`);

Please, let me know if I can start working on it. Thanks.

@christian-bromann
Copy link
Member

@Tardigrada777 this sounds great! Let me know if I can support with anything in this endeavor. Join our Discord channel and ping me there 😉

Tardigrada777 added a commit to Tardigrada777/stencil that referenced this issue Sep 7, 2024
@Tardigrada777
feat(compiler): add docs option to the config
4261d8a 
Apply colors from the `docs.markdown.targetComponent` to
the my-component node in the mermaid diagram.

fixes: ionic-team#2876
@Tardigrada777 Tardigrada777 mentioned this issue Sep 7, 2024
Merged
2 tasks
tanner-reits pushed a commit to Tardigrada777/stencil that referenced this issue Sep 9, 2024
@Tardigrada777 @tanner-reits
feat(compiler): add docs option to the config
b5a10f3 
Apply colors from the `docs.markdown.targetComponent` to
the my-component node in the mermaid diagram.

fixes: ionic-team#2876
github-merge-queue bot pushed a commit that referenced this issue Sep 11, 2024
@Tardigrada777 @tanner-reits
feat(compiler): customize readme mermaid diagram colors (#5980)
9ca8951 
* feat(compiler): add docs option to the config

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

fixes: #2876

* feat(compiler): add docs option to the config

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

fixes: #2876

* format(): prettier

* refactor: refactor after code review, add tests for depsToMarkdown func

* feat: move validation logic for config.docs to validateConfig

* fix: deps

* fix(compiler): build error & logger message

---------

Co-authored-by: Tanner Reits <tanner@ionic.io>
@christian-bromann
Copy link
Member

The suggested patch has been released in Stencil v4.22.0 🎉

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@Tardigrada777 Tardigrada777

Labels
Good First Issue This is a good first issue for someone wantng to contribute to Stencil!
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

feat(compiler): customize readme mermaid diagram colors Tardigrada777/stencil
5 participants
@christian-bromann @splitinfinities @rwaskiewicz @oddcelot @Tardigrada777