Merge branch 'master' into develop

* master:
  Update docs
  Fix lint issue
  Fix release version
  Fix TopBar
  Add MC to integrations
  Add TopBar
  Docs: Add Product Hunt info (#4900)

docs/config/configuration.md

@@ -10,7 +10,7 @@ When mermaid starts, configuration is extracted to determine a configuration to
 
 - The default configuration
 - Overrides at the site level are set by the initialize call, and will be applied to all diagrams in the site/app. The term for this is the **siteConfig**.
-- Frontmatter (v\<MERMAID_RELEASE_VERSION>+) - diagram authors can update select configuration parameters in the frontmatter of the diagram. These are applied to the render config.
+- Frontmatter (v10.5.0+) - diagram authors can update select configuration parameters in the frontmatter of the diagram. These are applied to the render config.
 - Directives (Deprecated by Frontmatter) - diagram authors can update select configuration parameters directly in the diagram code via directives. These are applied to the render config.
 
 **The render config** is configuration that is used when rendering by applying these configurations.

docs/config/directives.md

@@ -7,7 +7,7 @@
 # Directives
 
 > **Warning**
-> Directives are deprecated from v\<MERMAID_RELEASE_VERSION>. Please use the `config` key in frontmatter to pass configuration. See [Configuration](./configuration.md) for more details.
+> Directives are deprecated from v10.5.0. Please use the `config` key in frontmatter to pass configuration. See [Configuration](./configuration.md) for more details.
 
 ## Directives
 

docs/ecosystem/integrations-community.md

@@ -4,7 +4,9 @@
 >
 > ## Please edit the corresponding file in [/packages/mermaid/src/docs/ecosystem/integrations-community.md](../../packages/mermaid/src/docs/ecosystem/integrations-community.md).
 
-# Integrations - community
+# Integrations
+
+## Official integration: [Mermaid Chart](./mermaid-chart.md)
 
 We're excited about the growth of the Mermaid community, and the number of plugins and integrations that have been created with Mermaid.
 

docs/ecosystem/mermaid-chart.md

@@ -6,6 +6,10 @@
 
 # Mermaid Chart
 
+<br />
+
+<a href="https://www.producthunt.com/posts/mermaid-chart?utm_source=badge-featured&utm_medium=badge&utm_souce=badge-mermaid&#0045;chart" target="_blank"><img src="https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=416671&theme=light" alt="Mermaid&#0032;Chart - A&#0032;smarter&#0032;way&#0032;to&#0032;create&#0032;diagrams | Product Hunt" style="width: 250px; height: 54px;" width="250" height="54" /></a>
+
 ## About
 
 [Mermaid Chart](https://www.mermaidchart.com) was born out of the Mermaid open source project and was founded by Knut Sveidqvist together with Open Core Ventures. The lead developers from Mermaid have joined the company and there is a strong connection between the project we all love and Mermaid Chart. Mermaid Chart brings resources to the open source development of Mermaid and makes it possible to work with Mermaid professionally.

docs/news/announcements.md

@@ -6,8 +6,18 @@
 
 # Announcements
 
-## [How to Make a Git Graph with Mermaid Chart](https://www.mermaidchart.com/blog/posts/how-to-make-a-git-graph-with-mermaid-chart/)
+<br />
 
-22 September 2023 · 7 mins
+<a href="https://www.producthunt.com/posts/mermaid-chart?utm_source=badge-featured&utm_medium=badge&utm_souce=badge-mermaid&#0045;chart" target="_blank"><img src="https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=416671&theme=light" alt="Mermaid&#0032;Chart - A&#0032;smarter&#0032;way&#0032;to&#0032;create&#0032;diagrams | Product Hunt" style="width: 250px; height: 54px;" width="250" height="54" /></a>
 
-A git graph is one of the more useful forms of diagrams for developers and DevOps professionals.
+## Calling all fans of Mermaid and Mermaid Chart! 🎉
+
+We’ve officially made our Product Hunt debut, and would love any and all support from the community!
+
+[Click here](https://www.producthunt.com/posts/mermaid-chart?utm_source=badge-featured&utm_medium=badge&utm_souce=badge-mermaid-chart) to check out our Product Hunt launch.
+
+Feel free to drop us a comment and let us know what you think. All new sign ups will receive a 30-day free trial of our Pro subscription, plus 25% off your first year.
+
+We’re on a mission to make text-based diagramming fun again. And we need your help to make that happen.
+
+Your support means the world to us. Thank you for being part of the diagramming movement.

docs/syntax/entityRelationshipDiagram.md

@@ -90,7 +90,7 @@ Mermaid syntax for ER diagrams is compatible with PlantUML, with an extension to
 
 Where:
 
-- `first-entity` is the name of an entity. Names must begin with an alphabetic character or an underscore (from v\<MERMAID_RELEASE_VERSION>+), and may also contain digits and hyphens.
+- `first-entity` is the name of an entity. Names must begin with an alphabetic character or an underscore (from v10.5.0+), and may also contain digits and hyphens.
 - `relationship` describes the way that both entities inter-relate. See below.
 - `second-entity` is the name of the other entity.
 - `relationship-label` describes the relationship from the perspective of the first entity.
@@ -198,7 +198,7 @@ erDiagram
 
 The `type` values must begin with an alphabetic character and may contain digits, hyphens, underscores, parentheses and square brackets. The `name` values follow a similar format to `type`, but may start with an asterisk as another option to indicate an attribute is a primary key. Other than that, there are no restrictions, and there is no implicit set of valid data types.
 
-### Entity Name Aliases (v\<MERMAID_RELEASE_VERSION>+)
+### Entity Name Aliases (v10.5.0+)
 
 An alias can be added to an entity using square brackets. If provided, the alias will be showed in the diagram instead of the entity name.
 

packages/mermaid/package.json

@@ -40,7 +40,7 @@
     "types:verify-config": "ts-node-esm scripts/create-types-from-json-schema.mts --verify",
     "checkCircle": "npx madge --circular ./src",
     "release": "pnpm build",
-    "prepublishOnly": "cpy '../../README.*' ./ --cwd=. && pnpm -w run build"
+    "prepublishOnly": "cpy '../../README.*' ./ --cwd=. && pnpm docs:release-version && pnpm -w run build"
   },
   "repository": {
     "type": "git",

packages/mermaid/scripts/update-release-version.mts

@@ -21,7 +21,7 @@ const versionPlaceholder = '<MERMAID_RELEASE_VERSION>';
 const main = async () => {
   const sourceDirGlob = posix.join('.', SOURCE_DOCS_DIR, '**');
   const mdFileGlobs = getGlobs([posix.join(sourceDirGlob, '*.md')]);
-  mdFileGlobs.push('!**/community/development.md');
+  mdFileGlobs.push('!**/community/development.md', '!**/community/code.md');
   const mdFiles = await getFilesFromGlobs(mdFileGlobs);
   mdFiles.sort();
   const mdFilesWithPlaceholder: string[] = [];

packages/mermaid/src/docs/.vitepress/components/TopBar.vue

@@ -0,0 +1,14 @@
+<template>
+  <div
+    class="w-full top-bar bg-gradient-to-r from-[#bd34fe] to-[#ff3670] flex items-center text-center justify-center p-1 text-white"
+  >
+    <a
+      href="https://www.producthunt.com/posts/mermaid-chart?utm_source=badge-featured&amp;utm_medium=badge&amp;utm_souce=badge-mermaid-chart"
+      target="_blank"
+    >
+      We've made our Product Hunt debut! &nbsp;
+      <span class="underline">Show us some love and help spread the word</span>, plus receive 25%
+      off on annual Pro subscription!</a
+    >
+  </div>
+</template>

packages/mermaid/src/docs/.vitepress/theme/index.ts

@@ -6,6 +6,9 @@ import Mermaid from './Mermaid.vue';
 import Contributors from '../components/Contributors.vue';
 // @ts-ignore
 import HomePage from '../components/HomePage.vue';
+// @ts-ignore
+import TopBar from '../components/TopBar.vue';
+
 import { getRedirect } from './redirect.js';
 
 import { h } from 'vue';
@@ -18,6 +21,7 @@ export default {
   ...DefaultTheme,
   Layout() {
     return h(Theme.Layout, null, {
+      'home-hero-before': () => h(TopBar),
       'home-features-after': () => h(HomePage),
     });
   },

packages/mermaid/src/docs/config/configuration.md

@@ -4,7 +4,7 @@ When mermaid starts, configuration is extracted to determine a configuration to
 
 - The default configuration
 - Overrides at the site level are set by the initialize call, and will be applied to all diagrams in the site/app. The term for this is the **siteConfig**.
-- Frontmatter (v<MERMAID_RELEASE_VERSION>+) - diagram authors can update select configuration parameters in the frontmatter of the diagram. These are applied to the render config.
+- Frontmatter (v10.5.0+) - diagram authors can update select configuration parameters in the frontmatter of the diagram. These are applied to the render config.
 - Directives (Deprecated by Frontmatter) - diagram authors can update select configuration parameters directly in the diagram code via directives. These are applied to the render config.
 
 **The render config** is configuration that is used when rendering by applying these configurations.

packages/mermaid/src/docs/config/directives.md

@@ -1,7 +1,7 @@
 # Directives
 
 ```warning
-Directives are deprecated from v<MERMAID_RELEASE_VERSION>. Please use the `config` key in frontmatter to pass configuration. See [Configuration](./configuration.md) for more details.
+Directives are deprecated from v10.5.0. Please use the `config` key in frontmatter to pass configuration. See [Configuration](./configuration.md) for more details.
 ```
 
 ## Directives

packages/mermaid/src/docs/ecosystem/integrations-community.md

@@ -2,7 +2,9 @@
 outline: 'deep' # shows all h3 headings in outline in Vitepress
 ---
 
-# Integrations - community
+# Integrations
+
+## Official integration: [Mermaid Chart](./mermaid-chart.md)
 
 We're excited about the growth of the Mermaid community, and the number of plugins and integrations that have been created with Mermaid.
 

packages/mermaid/src/docs/ecosystem/mermaid-chart.md

@@ -4,6 +4,10 @@ outline: 'deep' # shows all h3 headings in outline in Vitepress
 
 # Mermaid Chart
 
+<br />
+
+<a href="https://www.producthunt.com/posts/mermaid-chart?utm_source=badge-featured&utm_medium=badge&utm_souce=badge-mermaid&#0045;chart" target="_blank"><img src="https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=416671&theme=light" alt="Mermaid&#0032;Chart - A&#0032;smarter&#0032;way&#0032;to&#0032;create&#0032;diagrams | Product Hunt" style="width: 250px; height: 54px;" width="250" height="54" /></a>
+
 ## About
 
 [Mermaid Chart](https://www.mermaidchart.com) was born out of the Mermaid open source project and was founded by Knut Sveidqvist together with Open Core Ventures. The lead developers from Mermaid have joined the company and there is a strong connection between the project we all love and Mermaid Chart. Mermaid Chart brings resources to the open source development of Mermaid and makes it possible to work with Mermaid professionally.

packages/mermaid/src/docs/index.md

@@ -9,6 +9,7 @@ hero:
   name: Mermaid
   text: Diagramming and charting tool
   tagline: JavaScript based diagramming and charting tool that renders Markdown-inspired text definitions to create and modify diagrams dynamically.
+
   image:
     src: /mermaid-logo.svg
     alt: Mermaid
@@ -30,7 +31,7 @@ features:
   - title: 🏆 Award winning!
     details: 2019 JavaScript Open Source Award winner for "The Most Exciting Use of Technology".
     link: https://osawards.com/javascript/2019
-  - title: 🥰 Mermaid + Mermaid Chart
-    details: Mermaid Chart is a major supporter of the Mermaid project.
-    link: https://www.mermaidchart.com/
+  - title: 🎉 We are on Product Hunt!
+    details: We would love any and all support from the Mermaid community!
+    link: https://www.producthunt.com/posts/mermaid-chart
 ---

packages/mermaid/src/docs/news/announcements.md

@@ -1,7 +1,17 @@
 # Announcements
 
-## [How to Make a Git Graph with Mermaid Chart](https://www.mermaidchart.com/blog/posts/how-to-make-a-git-graph-with-mermaid-chart/)
+<br />
 
-22 September 2023 · 7 mins
+<a href="https://www.producthunt.com/posts/mermaid-chart?utm_source=badge-featured&utm_medium=badge&utm_souce=badge-mermaid&#0045;chart" target="_blank"><img src="https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=416671&theme=light" alt="Mermaid&#0032;Chart - A&#0032;smarter&#0032;way&#0032;to&#0032;create&#0032;diagrams | Product Hunt" style="width: 250px; height: 54px;" width="250" height="54" /></a>
 
-A git graph is one of the more useful forms of diagrams for developers and DevOps professionals.
+## Calling all fans of Mermaid and Mermaid Chart! 🎉
+
+We’ve officially made our Product Hunt debut, and would love any and all support from the community!
+
+[Click here](https://www.producthunt.com/posts/mermaid-chart?utm_source=badge-featured&utm_medium=badge&utm_souce=badge-mermaid-chart) to check out our Product Hunt launch.
+
+Feel free to drop us a comment and let us know what you think. All new sign ups will receive a 30-day free trial of our Pro subscription, plus 25% off your first year.
+
+We’re on a mission to make text-based diagramming fun again. And we need your help to make that happen.
+
+Your support means the world to us. Thank you for being part of the diagramming movement.

packages/mermaid/src/docs/syntax/entityRelationshipDiagram.md

@@ -56,7 +56,7 @@ Mermaid syntax for ER diagrams is compatible with PlantUML, with an extension to
 
 Where:
 
-- `first-entity` is the name of an entity. Names must begin with an alphabetic character or an underscore (from v<MERMAID_RELEASE_VERSION>+), and may also contain digits and hyphens.
+- `first-entity` is the name of an entity. Names must begin with an alphabetic character or an underscore (from v10.5.0+), and may also contain digits and hyphens.
 - `relationship` describes the way that both entities inter-relate. See below.
 - `second-entity` is the name of the other entity.
 - `relationship-label` describes the relationship from the perspective of the first entity.
@@ -144,7 +144,7 @@ erDiagram
 
 The `type` values must begin with an alphabetic character and may contain digits, hyphens, underscores, parentheses and square brackets. The `name` values follow a similar format to `type`, but may start with an asterisk as another option to indicate an attribute is a primary key. Other than that, there are no restrictions, and there is no implicit set of valid data types.
 
-### Entity Name Aliases (v<MERMAID_RELEASE_VERSION>+)
+### Entity Name Aliases (v10.5.0+)
 
 An alias can be added to an entity using square brackets. If provided, the alias will be showed in the diagram instead of the entity name.