Merge pull request #4226 from mermaid-js/updates-homepage

Updates to the Homepage

cSpell.json

@@ -47,6 +47,7 @@
     "graphviz",
     "grav",
     "greywolf",
+    "huynh",
     "inkdrop",
     "jaoude",
     "jison",
@@ -90,6 +91,7 @@
     "sidharthv",
     "sphinxcontrib",
     "statediagram",
+    "steph",
     "stylis",
     "substate",
     "sveidqvist",

packages/mermaid/src/docs/.vitepress/config.ts

@@ -29,6 +29,12 @@ export default defineConfig({
     socialLinks: [
       { icon: 'github', link: 'https://github.com/mermaid-js/mermaid' },
       { icon: 'slack', link: 'https://mermaid-talk.slack.com' },
+      {
+        icon: {
+          svg: '<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 490.16 490.16"><defs><mask id="Mask"><rect x="0" y="0" width="490.16" height="490.16" fill="white" /><path fill="black" d="M407.48,111.18A165.2,165.2,0,0,0,245.08,220,165.2,165.2,0,0,0,82.68,111.18a165.5,165.5,0,0,0,72.06,143.64,88.81,88.81,0,0,1,38.53,73.45v50.86H296.9V328.27a88.8,88.8,0,0,1,38.52-73.45,165.41,165.41,0,0,0,72.06-143.64Z"/><path fill="black" d="M160.63,328.27a56.09,56.09,0,0,0-24.27-46.49,198.74,198.74,0,0,1-28.54-23.66A196.87,196.87,0,0,1,82.53,227V379.13h78.1Z"/><path fill="black" d="M329.53,328.27a56.09,56.09,0,0,1,24.27-46.49,198.74,198.74,0,0,0,28.54-23.66A196.87,196.87,0,0,0,407.63,227V379.13h-78.1Z"/></mask><style>.cls-1{fill:#76767B;}.cls-1:hover{fill:#FF3570}</style></defs><rect class="cls-1" width="490.16" height="490.16" rx="84.61" mask="url(#Mask)" /></svg>',
+        },
+        link: 'https://www.mermaidchart.com/',
+      },
     ],
   },
 });

packages/mermaid/src/docs/index.md

@@ -23,15 +23,15 @@ features:
   - title: ➕ Easy to use!
     details: Easily create and render detailed diagrams and charts with the Mermaid Live Editor.
     link: https://mermaid.live/
-  - title: 🎥 Video Tutorials!
-    details: Curated list of video tutorials and examples created by the community.
-    link: ../../config/Tutorials.html
   - title: 🧩 Integrations available!
     details: Use Mermaid with your favorite applications, check out the integrations list.
     link: ../../ecosystem/integrations.md
   - 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/
 ---
 
 <script setup>
@@ -149,6 +149,12 @@ const members = [
     title: "Developer",
     links: [{ icon: "github", link: "https://github.com/spopida" }],
   },
+    {
+    avatar: "https://avatars.githubusercontent.com/u/35910788?v=4",
+    name: "Steph Huynh",
+    title: "Developer",
+    links: [{ icon: "github", link: "https://github.com/huynhicode" }],
+  },
 ];
 
 </script>