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

@@ -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

.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
+          npm run build

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 */}

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> */}

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>
   );
 }

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"
+    ]
   }
 ]