Docs: add icon explanations

[siddharthisrani]

📑 Summary

Added explanations for icons used in the documentation.

Resolves #5346

📏 Design Decisions

• Included a note explaining the meaning of the 🔥 and -beta icons.

📋 Tasks

Make sure you

• 📖 have read the contribution guidelines
• 💻 have added necessary unit/e2e tests.
• 📓 have added documentation. Make sure MERMAID_RELEASE_VERSION is used for all new features.
• 🔖 targeted develop branch

[netlify]

✅ Deploy Preview for mermaid-js ready!

Name	Link
🔨 Latest commit	131e919
🔍 Latest deploy log	https://app.netlify.com/sites/mermaid-js/deploys/66b11a2eb9ca7a000875d61c
😎 Deploy Preview	https://deploy-preview-5681--mermaid-js.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 5.85%. Comparing base (3f4c346) to head (131e919).

Additional details and impacted files

@@           Coverage Diff           @@
##           develop   #5681   +/-   ##
=======================================
  Coverage     5.85%   5.85%           
=======================================
  Files          274     274           
  Lines        41112   41112           
  Branches       488     488           
=======================================
  Hits          2408    2408           
  Misses       38704   38704           

Flag	Coverage Δ
unit	5.85% <ø> (ø)

Flags with carried forward coverage won't be shown. Click here to find out more.

[argos-ci]

The latest updates on your projects. Learn more about Argos notifications ↗︎

Build	Status	Details	Updated (UTC)
default (Inspect)	✅ No changes detected	-	Aug 5, 2024, 6:44 PM

[sidharthv96]

Can the note be moved to a more general page, so that we don't have to duplicate it inside each diagram pages?

[siddharthisrani]

Thank you for the feedback, @sidharthv96 .
I agree that having a central location for the icon explanations would be more efficient. I will move the note to a more general page and link to it from the individual diagram pages. I'll update the PR accordingly.

[siddharthisrani]

Hi @sidharthv96 ,

I have updated the PR.

Description

1. Implemented a method to dynamically include common markdown content across multiple files using VitePress's <script setup> feature.
2. This approach enhances maintainability and ensures consistency across our documentation.

Please review the changes and let me know if there are any further adjustments needed.

[sidharthv96]

Can the note be moved to a more general page, so that we don't have to duplicate it inside each diagram pages?

I meant having the note once in a general page, like the main readme, so that we don't have to duplicate the notes in every page.

If we do need to duplicate (which I don't think we should), we should use something like vitepress's footer, so that we can inject it in one place, rather than importing in every diagram.

Also, because we don't use only vitest, including should be done using our custom tag <!--@include: ./examples.md -->.

[siddharthisrani]

Hi @sidharthv96,

I've explored two approaches to include the notes without duplicating them in every diagram page:

Linking to a General Notes Page:

1. Created icons-note.md in the syntax folder.
   2 .Updated individual markdown files to refer to the general notes page.

Example code and screenshot below:
For an explanation of the icons used in this documentation, please refer to the [General Icon Explanations](./icons-note.md).

Using the custom include method:

1. Created icons-note.md in the syntax folder.
2. Used the custom include tag in the individual markdown files. <!--@include: ./icons-note.md-->

Example code and screenshot below:

Please let me know which approach you prefer or if there are any other adjustments needed.

[sidharthv96]

What I don't understand is why we need the note under every diagram.
What if we add a title to the 🔥 icon, so that it'll show "Newly Added" when user hovers over it?

And whether we should change the icon to something else, so that it's obvious without an explanation.