add separate VP component to update VP id and links

source/generate_who.py

@@ -84,7 +84,7 @@ def generate_markdown(pmc_members, committers):
     pmc_members.sort(key=lambda x: locale.strxfrm(x[0].lower()))
     committers.sort(key=lambda x: locale.strxfrm(x[0].lower()))
     repo_path = get_repo_path()
-    with open(repo_path + "/src/pages/who.md", "w", encoding="utf-8") as f:
+    with open(repo_path + "/src/pages/who.mdx", "w", encoding="utf-8") as f:
         f.write("""---
 title: Apache CloudStack Project Membership
 ---
@@ -95,10 +95,13 @@ def generate_markdown(pmc_members, committers):
 
 Board Minutes: https://whimsy.apache.org/board/minutes/CloudStack.html
 
-""")
+````mdx-code-block
+import VP from "@site/src/components/VP";
+
+<VP/>
+````
 
-        pmc_chair = "Nicolás Vázquez (nvazquez)"
-        f.write(f"**PMC Chair**: {pmc_chair}\n\n")
+""")
 
         f.write("The following data is subject to change. The up-to-date information can be found on <a href=\"http://people.apache.org/committers-by-project.html#cloudstack-pmc\">the Apache Peoples site</a>:\n\n")
 

src/components/VP/index.tsx

@@ -0,0 +1,55 @@
+import React from "react";
+
+const pmc_chair_quote = `"Earlier this year, I was selected by my fellow PMC members as the project’s VP. The main role of the VP is to report
+        quarterly to the Apache Software Foundation Board,
+        representing CloudStack and providing updates on the health
+        and status of the project. I am grateful for the opportunity
+        to serve as the CloudStack VP and to work with amazing people
+        from the community to continue making CloudStack an even
+        greater cloud orchestration platform!"`
+
+const pmc_chair_name = "Nicolás Vázquez"
+const pmc_chair_picture = "/img/authors/nicolas.png"
+const pmc_chair_githandle = "nvazquez"
+const pmc_chair_linked = "nvazquezuy"
+
+const git_link = "https://github.com/"+pmc_chair_githandle
+const linked_link = "https://www.linkedin.com/in/"+pmc_chair_linked
+
+export default function VP(): JSX.Element {
+    return <>
+      <div className="row">
+        <div className="col col--3">
+
+<img src={pmc_chair_picture} alt={pmc_chair_name} className="blog-image"/>
+
+        </div>
+        <div className="col col--9">
+
+          <div className="row">
+            <div className="col">
+          <p>
+		PMC Chair: <b>{pmc_chair_name}</b>
+	  </p>
+	    </div>
+	    <div className="col col--2">
+	  <p>
+                <a href={git_link} target="_blank">
+		  <img src="/img/git_logo.svg" width="20px" alt=""/>
+		</a>
+		&nbsp;&nbsp;
+                <a href={linked_link} target="_blank">
+		  <img src="/img/social/LinkedIn-Blue.png" width="20px" alt=""/>
+		</a>
+	  </p>
+	    </div>
+	  </div>
+          <p>
+
+            {pmc_chair_quote}
+
+          </p>
+	</div>
+      </div>
+    </>
+}

src/pages/who.md → src/pages/who.mdx

@@ -8,7 +8,11 @@ PMC Information: https://projects.apache.org/committee.html?cloudstack
 
 Board Minutes: https://whimsy.apache.org/board/minutes/CloudStack.html
 
-**PMC Chair**: Nicolás Vázquez (nvazquez)
+````mdx-code-block
+import VP from "@site/src/components/VP";
+
+<VP/>
+````
 
 The following data is subject to change. The up-to-date information can be found on <a href="http://people.apache.org/committers-by-project.html#cloudstack-pmc">the Apache Peoples site</a>: