From 22da7ca1bc0a6b289ef9dd81c93b958bc8baaa81 Mon Sep 17 00:00:00 2001
From: hemarina <104857065+hemarina@users.noreply.github.com>
Date: Fri, 9 Feb 2024 14:42:25 -0800
Subject: [PATCH] Fix github_bot error on release and authors showing bug
 (#304)

* update node to fix yml error

* add permissions

* update cardPanel authors to next line when children div exceed parent div
---
 .github/workflows/release.yml                 |   6 +-
 .github/workflows/test-deploy.yml             |   8 +-
 .../components/gallery/ShowcaseCard/index.tsx |  13 +-
 .../gallery/ShowcaseCardPanel/index.tsx       |  13 +-
 .../gallery/ShowcaseMultipleAuthors/index.tsx | 256 ++++++++----------
 website/static/templates.json                 | 105 +++----
 6 files changed, 200 insertions(+), 201 deletions(-)

diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml
index 1baf10b..f363bd6 100644
--- a/.github/workflows/release.yml
+++ b/.github/workflows/release.yml
@@ -4,6 +4,10 @@ name: Release Awesome Azd
 on:
   workflow_dispatch:
 
+permissions:
+  id-token: write
+  contents: read
+  
 jobs:
   deploy:
     name: Deploy Site To GitHub Pages
@@ -12,7 +16,7 @@ jobs:
       - uses: actions/checkout@v4
       - uses: actions/setup-node@v4
         with:
-          node-version: 18
+          node-version: 20
           cache: npm
           cache-dependency-path: website/package-lock.json
       - name: Build website
diff --git a/.github/workflows/test-deploy.yml b/.github/workflows/test-deploy.yml
index e648efc..90d6f02 100644
--- a/.github/workflows/test-deploy.yml
+++ b/.github/workflows/test-deploy.yml
@@ -7,6 +7,10 @@ on:
     # Review gh actions docs if you want to further define triggers, paths, etc
     # https://docs.github.com/en/actions/using-workflows/workflow-syntax-for-github-actions#on
 
+permissions:
+  id-token: write
+  contents: read
+
 jobs:
   test-deploy:
     name: Test deployment
@@ -15,11 +19,11 @@ jobs:
       - uses: actions/checkout@v4
       - uses: actions/setup-node@v4
         with:
-          node-version: 18
+          node-version: 20
           cache: npm
           cache-dependency-path: website/package-lock.json
       - name: Build website
         working-directory: website
         run: |
           npm ci
-          npm run build
\ No newline at end of file
+          npm run build
diff --git a/website/src/components/gallery/ShowcaseCard/index.tsx b/website/src/components/gallery/ShowcaseCard/index.tsx
index 4cdde4e..5f3af54 100644
--- a/website/src/components/gallery/ShowcaseCard/index.tsx
+++ b/website/src/components/gallery/ShowcaseCard/index.tsx
@@ -216,16 +216,15 @@ function ShowcaseCard({ user }: { user: User }): JSX.Element {
             paddingTop: "2px",
             alignItems: "center",
             columnGap: "3px",
+            overflow: "hidden",
           }}
         >
           <div className={styleCSS.cardTextBy}>by</div>
-          <div style={{ fontSize: "12px" }}>
-            <ShowcaseMultipleAuthors
-              key={"author_" + user.title}
-              user={user}
-              cardPanel={false}
-            />
-          </div>
+          <ShowcaseMultipleAuthors
+            key={"author_" + user.title}
+            user={user}
+            cardPanel={false}
+          />
         </div>
         <div className={styleCSS.cardDescription}>{user.description}</div>
         {/* Panel is Fluent UI 8. Must use ThemeProvider */}
diff --git a/website/src/components/gallery/ShowcaseCardPanel/index.tsx b/website/src/components/gallery/ShowcaseCardPanel/index.tsx
index 6393151..9400616 100644
--- a/website/src/components/gallery/ShowcaseCardPanel/index.tsx
+++ b/website/src/components/gallery/ShowcaseCardPanel/index.tsx
@@ -158,16 +158,15 @@ export default function ShowcaseCardPanel({ user }: { user: User }) {
           alignItems: "center",
           columnGap: "5px",
           padding: "10px 0",
+          flexWrap: "wrap",
         }}
       >
         <div className={styles.cardDescription}>by</div>
-        <div style={{ fontSize: "14px", fontWeight: "400" }}>
-          <ShowcaseMultipleAuthors
-            key={"author_" + user.title}
-            user={user}
-            cardPanel={true}
-          />
-        </div>
+        <ShowcaseMultipleAuthors
+          key={"author_" + user.title}
+          user={user}
+          cardPanel={true}
+        />
         <div className={styles.textColor}>•</div>
         {/* <div>Last Update: </div>
         <div>•</div> */}
diff --git a/website/src/components/gallery/ShowcaseMultipleAuthors/index.tsx b/website/src/components/gallery/ShowcaseMultipleAuthors/index.tsx
index 5feca09..3b14657 100644
--- a/website/src/components/gallery/ShowcaseMultipleAuthors/index.tsx
+++ b/website/src/components/gallery/ShowcaseMultipleAuthors/index.tsx
@@ -24,89 +24,89 @@ function ShowcaseMultipleWebsites(
   colorMode: string
 ) {
   if (i != length - 1) {
-    return (
-      <div key={key}>
-        {cardPanel ? (
-          <FluentUILink
-            key={i}
-            href={websiteLink}
-            className={styles.cardAuthorPanel}
-            target="_blank"
-            style={{
-              display: "flex",
-              alignItems: "center",
-              columnGap: "5px",
-            }}
-          >
-            {authorName}
-            {colorMode != "dark" ? (
-              <img
-                src={useBaseUrl("/img/redirect.svg")}
-                alt="Redirect"
-                height={13}
-              />
-            ) : (
-              <img
-                src={useBaseUrl("/img/redirectDark.svg")}
-                alt="Redirect"
-                height={13}
-              />
-            )}
-            ,
-          </FluentUILink>
+    return cardPanel ? (
+      <FluentUILink
+        key={i}
+        href={websiteLink}
+        className={styles.cardAuthorPanel}
+        target="_blank"
+        style={{
+          display: "flex",
+          alignItems: "center",
+          columnGap: "5px",
+          fontSize: "14px",
+          fontWeight: "400",
+          flexShrink: 0,
+        }}
+      >
+        {authorName}
+        {colorMode != "dark" ? (
+          <img
+            src={useBaseUrl("/img/redirect.svg")}
+            alt="Redirect"
+            height={13}
+          />
         ) : (
-          <FluentUILink
-            key={i}
-            className={styles.cardAuthor}
-            href={websiteLink}
-            target="_blank"
-          >
-            {authorName},
-          </FluentUILink>
+          <img
+            src={useBaseUrl("/img/redirectDark.svg")}
+            alt="Redirect"
+            height={13}
+          />
         )}
-      </div>
+        ,
+      </FluentUILink>
+    ) : (
+      <FluentUILink
+        key={i}
+        className={styles.cardAuthor}
+        href={websiteLink}
+        target="_blank"
+        style={{ flexShrink: 0, fontSize: "12px" }}
+      >
+        {authorName},
+      </FluentUILink>
     );
   } else {
-    return (
-      <div key={key}>
-        {cardPanel ? (
-          <FluentUILink
-            key={i}
-            className={styles.cardAuthorPanel}
-            href={websiteLink}
-            target="_blank"
-            style={{
-              display: "flex",
-              alignItems: "center",
-              columnGap: "5px",
-            }}
-          >
-            {authorName}
-            {colorMode != "dark" ? (
-              <img
-                src={useBaseUrl("/img/redirect.svg")}
-                alt="Redirect"
-                height={13}
-              />
-            ) : (
-              <img
-                src={useBaseUrl("/img/redirectDark.svg")}
-                alt="Redirect"
-                height={13}
-              />
-            )}
-          </FluentUILink>
+    return cardPanel ? (
+      <FluentUILink
+        key={i}
+        className={styles.cardAuthorPanel}
+        href={websiteLink}
+        target="_blank"
+        style={{
+          display: "flex",
+          alignItems: "center",
+          columnGap: "5px",
+          fontSize: "14px",
+          fontWeight: "400",
+          flexShrink: 0,
+        }}
+      >
+        {authorName}
+        {colorMode != "dark" ? (
+          <img
+            src={useBaseUrl("/img/redirect.svg")}
+            alt="Redirect"
+            height={13}
+          />
         ) : (
-          <FluentUILink
-            key={i}
-            className={styles.cardAuthor}
-            href={websiteLink}
-            target="_blank"
-          >
-            {authorName}
-          </FluentUILink>
+          <img
+            src={useBaseUrl("/img/redirectDark.svg")}
+            alt="Redirect"
+            height={13}
+          />
         )}
-      </div>
+      </FluentUILink>
+    ) : (
+      <FluentUILink
+        key={i}
+        className={styles.cardAuthor}
+        href={websiteLink}
+        target="_blank"
+        style={{ flexShrink: 0, fontSize: "12px" }}
+      >
+        {authorName}
+      </FluentUILink>
     );
   }
 }
@@ -132,68 +132,52 @@ export default function ShowcaseMultipleAuthors({
         "The number of multiple authors and websites are not equal."
       );
     }
-    return (
-      <div
-        style={{
-          display: "-webkit-box",
-          overflow: "hidden",
-          WebkitLineClamp: "1",
-          WebkitBoxOrient: "horizontal",
-          gap: "3px",
-        }}
-      >
-        {multiWebsites.map((value, index) => {
-          return ShowcaseMultipleWebsites(
-            index,
-            multiAuthors[index],
-            multiWebsites[index],
-            multiWebsites.length,
-            i++,
-            cardPanel,
-            colorMode
-          );
-        })}
-      </div>
-    );
+    return multiWebsites.map((value, index) => {
+      return ShowcaseMultipleWebsites(
+        index,
+        multiAuthors[index],
+        multiWebsites[index],
+        multiWebsites.length,
+        i++,
+        cardPanel,
+        colorMode
+      );
+    });
   }
 
-  return (
-    <div>
-      {cardPanel ? (
-        <FluentUILink
-          className={styles.cardAuthorPanel}
-          href={websites}
-          target="_blank"
-          style={{
-            display: "flex",
-            alignItems: "center",
-            columnGap: "5px",
-          }}
-        >
-          {authors}
-          {colorMode != "dark" ? (
-            <img
-              src={useBaseUrl("/img/redirect.svg")}
-              alt="Redirect"
-              height={13}
-            />
-          ) : (
-            <img
-              src={useBaseUrl("/img/redirectDark.svg")}
-              alt="Redirect"
-              height={13}
-            />
-          )}
-        </FluentUILink>
+  return cardPanel ? (
+    <FluentUILink
+      className={styles.cardAuthorPanel}
+      href={websites}
+      target="_blank"
+      style={{
+        display: "flex",
+        alignItems: "center",
+        columnGap: "5px",
+        fontSize: "14px",
+        fontWeight: "400",
+        flexShrink: 0,
+      }}
+    >
+      {authors}
+      {colorMode != "dark" ? (
+        <img src={useBaseUrl("/img/redirect.svg")} alt="Redirect" height={13} />
       ) : (
-        <FluentUILink
-          className={styles.cardAuthor}
-          href={websites}
-          target="_blank"
-        >
-          {authors}
-        </FluentUILink>
+        <img
+          src={useBaseUrl("/img/redirectDark.svg")}
+          alt="Redirect"
+          height={13}
+        />
       )}
-    </div>
+    </FluentUILink>
+  ) : (
+    <FluentUILink
+      className={styles.cardAuthor}
+      href={websites}
+      target="_blank"
+      style={{ fontSize: "12px", flexShrink: 0 }}
+    >
+      {authors}
+    </FluentUILink>
   );
 }
diff --git a/website/static/templates.json b/website/static/templates.json
index 076b51c..3448a00 100644
--- a/website/static/templates.json
+++ b/website/static/templates.json
@@ -710,49 +710,6 @@
       "msft"
     ]
   },
-  {
-    "title": "SAP Cloud SDK on Azure Functions Quickstart (TypeScript)",
-    "description": "This repos serves as quick-start project showcasing SAP Cloud SDK for JavaScript OData consumption running on Azure Functions. Its primary purpose is to set you up for success for your SAP extension project on Azure and reduce the lead time to your first successful deployment as much as possible with developer friendly commands.",
-    "preview": "./templates/images/functions-javascript-sap-cloud-sdk-quickstart.png",
-    "website": "https://github.com/MartinPankraz, https://github.com/lechnerc77",
-    "author": "Martin Pankraz, Christian Lechner",
-    "source": "https://github.com/Azure-Samples/functions-javascript-sap-cloud-sdk-quickstart",
-    "tags": [
-      "typescript",
-      "nodejs",
-      "bicep",
-      "webapps",
-      "apim",
-      "keyvault",
-      "appinsights",
-      "nestjs",
-      "sap",
-      "sapcap",
-      "msft"
-    ]
-  },
-  {
-    "title": "SAP CAP on Azure App Service Quickstart",
-    "description": "This repos serves as quick-start project showcasing SAP Cloud Application Programming Model (CAP) for Node.js OData consumption from SAP S/4HANA running on Azure App Services backed with Azure Cosmos DB for PostgreSQL. SAP offers a native module cds-dbs for PostgreSQL integration.",
-    "preview": "./templates/images/app-service-javascript-sap-cap-quickstart.png",
-    "website": "https://github.com/MartinPankraz, https://github.com/vobu",
-    "author": "Martin Pankraz, Volker Buzek",
-    "source": "https://github.com/Azure-Samples/app-service-javascript-sap-cap-quickstart",
-    "tags": [
-      "nodejs",
-      "bicep",
-      "webapps",
-      "apim",
-      "keyvault",
-      "appinsights",
-      "nestjs",
-      "sap",
-      "cosmosdb",
-      "azuredb-postgreSQL",
-      "sapcloudsdk",
-      "msft"
-    ]
-  },
   {
     "title": "Service Bus messages processing to Dataverse",
     "description": "Starter solution to process Service Bus messages to Dataverse, C# for the Azure Functions app processing the messages, Azure Service Bus for the reception of the messages, and Azure Monitor for monitoring and logging.",
@@ -1358,7 +1315,7 @@
     "website": "https://github.com/MiguelElGallo",
     "author": "Miguel P. Z.",
     "source": "https://github.com/MiguelElGallo/simple-fastapi-snow-azd",
-    "tags": ["python", "fastapi", "functions", "bicep", "community", "new"]
+    "tags": ["python", "fastapi", "functions", "bicep", "community"]
   },
   {
     "title": "Python (Flask) Web App with MySQL and Key Vault",
@@ -1375,7 +1332,6 @@
       "webapps",
       "azuredb-mySQL",
       "keyvault",
-      "new",
       "community"
     ]
   },
@@ -1395,7 +1351,6 @@
       "eventhub",
       "azurestorage",
       "vnets",
-      "new",
       "msft"
     ]
   },
@@ -1406,7 +1361,7 @@
     "website": "https://github.com/Azure-Samples",
     "author": "Azure Cosmos DB Content Team",
     "source": "https://github.com/azure-samples/orleans-url-shortener",
-    "tags": ["bicep", "dotnetCsharp", "cosmosdb", "msft", "new", "aca"]
+    "tags": ["bicep", "dotnetCsharp", "cosmosdb", "msft", "aca"]
   },
   {
     "title": "Azure OpenAI priority-based load balancer with Azure Container Apps",
@@ -1424,7 +1379,16 @@
     "website": "https://github.com/Azure-Samples",
     "author": "AKS Content Team",
     "source": "https://github.com/azure-samples/aks-store-demo",
-    "tags": ["terraform", "aks", "openai", "ai", "msft", "new", "kubernetes", "helm" ]
+    "tags": [
+      "terraform",
+      "aks",
+      "openai",
+      "ai",
+      "msft",
+      "new",
+      "kubernetes",
+      "helm"
+    ]
   },
   {
     "title": "Setting up Azure OpenAI as a central capability within your organization",
@@ -1446,5 +1410,50 @@
       "msft",
       "new"
     ]
+  },
+  {
+    "title": "SAP Cloud SDK on Azure Functions Quickstart (TypeScript)",
+    "description": "This repos serves as quick-start project showcasing SAP Cloud SDK for JavaScript OData consumption running on Azure Functions. Its primary purpose is to set you up for success for your SAP extension project on Azure and reduce the lead time to your first successful deployment as much as possible with developer friendly commands.",
+    "preview": "./templates/images/functions-javascript-sap-cloud-sdk-quickstart.png",
+    "website": "https://github.com/MartinPankraz, https://github.com/lechnerc77",
+    "author": "Martin Pankraz, Christian Lechner",
+    "source": "https://github.com/Azure-Samples/functions-javascript-sap-cloud-sdk-quickstart",
+    "tags": [
+      "typescript",
+      "nodejs",
+      "bicep",
+      "webapps",
+      "apim",
+      "keyvault",
+      "appinsights",
+      "nestjs",
+      "sap",
+      "sapcap",
+      "msft",
+      "new"
+    ]
+  },
+  {
+    "title": "SAP CAP on Azure App Service Quickstart",
+    "description": "This repos serves as quick-start project showcasing SAP Cloud Application Programming Model (CAP) for Node.js OData consumption from SAP S/4HANA running on Azure App Services backed with Azure Cosmos DB for PostgreSQL. SAP offers a native module cds-dbs for PostgreSQL integration.",
+    "preview": "./templates/images/app-service-javascript-sap-cap-quickstart.png",
+    "website": "https://github.com/MartinPankraz, https://github.com/vobu",
+    "author": "Martin Pankraz, Volker Buzek",
+    "source": "https://github.com/Azure-Samples/app-service-javascript-sap-cap-quickstart",
+    "tags": [
+      "nodejs",
+      "bicep",
+      "webapps",
+      "apim",
+      "keyvault",
+      "appinsights",
+      "nestjs",
+      "sap",
+      "cosmosdb",
+      "azuredb-postgreSQL",
+      "sapcloudsdk",
+      "msft",
+      "new"
+    ]
   }
 ]