add two tags, reorder tags.tsx (#244)

fix #238 reorder tags.tsx
Azure · Nov 8, 2023 · 6b87ef0 · 6b87ef0
1 parent add7e29
commit 6b87ef0
Show file tree

Hide file tree

Showing 3 changed files with 95 additions and 77 deletions.
diff --git a/website/src/components/Feature.js b/website/src/components/Feature.js
@@ -1,5 +1,4 @@
 import React from "react";
-import clsx from "clsx";
 import styles from "./styles.module.css";
 import {
   Card,
@@ -11,6 +10,7 @@ import {
   typographyStyles,
 } from "@fluentui/react-components";
 import { useColorMode } from "@docusaurus/theme-common";
+import useBaseUrl from "@docusaurus/useBaseUrl";
 
 const useStyles = makeStyles({
   subtitle1: typographyStyles.subtitle1,
@@ -27,7 +27,7 @@ export default function Feature({ Svg, title, description, link, content }) {
   return (
     <Card className={styles.card}>
       <CardHeader
-        header={<img width="80px" height="80px" src={Svg} alt={title} />}
+        header={<img width="80px" height="80px" src={useBaseUrl(Svg)} alt={title} />}
       />
       <div className={styles.cardContent}>
         <div className={style.subtitle1}>{title}</div>

diff --git a/website/src/data/tags.tsx b/website/src/data/tags.tsx
@@ -122,7 +122,9 @@ export type TagType =
   | "azurebot"
   | "ade"
   | "platformengineering"
-  | "semantickernel";
+  | "semantickernel"
+  | "webcomponents"
+  | "microfrontend";
 
 // LIST OF AVAILABLE TAGS
 // Each tag in lit about must have a defined object here
@@ -183,12 +185,6 @@ export const Tags: { [type in TagType]: Tag } = {
     description: "Template contains Python app code",
     type: "Language",
   },
-  reactjs: {
-    label: "React.js",
-    description: "Template architecture uses React.js",
-    type: "Tools",
-    type: "Tools",
-  },
   nodejs: {
     label: "Node.js",
     description: "Template architecture uses Node.js",
@@ -200,54 +196,12 @@ export const Tags: { [type in TagType]: Tag } = {
     type: "Language",
   },
 
-  // ---- Templating Options
-  bicep: {
-    label: "Bicep",
-    description: "Template uses Bicep for Infra as Code",
-    type: "Infrastructure as Code",
-  },
-  terraform: {
-    label: "Terraform",
-    description: "Template uses Terraform for Infra as Code",
-    type: "Infrastructure as Code",
-  },
+  // ---- Tools
 
-  // ---- 3rd Party Services
-  mongodb: {
-    label: "MongoDB",
-    description: "Template architecture uses MongoDB",
-    type: "Database",
-  },
-  fastapi: {
-    label: "FastAPI",
-    description: "Template architecture uses FastAPI web framework",
-    type: "Framework",
-  },
-  fhir: {
-    label: "FHIR Service",
-    description:
-      "Template architecture uses Fast Healthcare Interoperability Resources (FHIR) service",
-    type: "Service",
-  },
-  flask: {
-    label: "Flask",
-    description: "Template architecture uses Flask web framework",
-    type: "Framework",
-  },
-  django: {
-    label: "Django",
-    description: "Template architecture uses Django web framework",
-    type: "Framework",
-  },
-  django: {
-    label: "Django",
-    description: "Template architecture uses Django web framework",
-    type: "Framework",
-  },
-  nestjs: {
-    label: "NestJS",
-    description: "Template architecture uses NestJS framework",
-    type: "Framework",
+  reactjs: {
+    label: "React.js",
+    description: "Template architecture uses React.js",
+    type: "Tools",
   },
   sap: {
     label: "SAP",
@@ -260,21 +214,11 @@ export const Tags: { [type in TagType]: Tag } = {
     description: "Template architecture uses SAP Cloud SDK",
     type: "Tools",
   },
-  spring: {
-    label: "Spring",
-    description: "Template architecture uses Spring framework",
-    type: "Framework",
-  },
   thymeleaf: {
     label: "Thymeleaf",
     description: "Template architecture uses Thymeleaf template engine",
     type: "Tools",
   },
-  dataverse: {
-    label: "Dataverse",
-    description: "Template architecture uses Microsoft Dataverse",
-    type: "Service",
-  },
   chatgpt: {
     label: "ChatGPT",
     description: "Template architecture uses ChatGPT model",
@@ -291,27 +235,68 @@ export const Tags: { [type in TagType]: Tag } = {
       "Template architecture uses Kubernetes Event Driven Autoscaling (KEDA)",
     type: "Tools",
   },
-  kubernetes: {
-    label: "Kubernetes",
-    description: "Template architecture uses Kubernetes",
-    type: "Platform",
-  },
-  webapps: {
-    label: "Web Apps",
-    description: "Template architecture uses Web Apps",
-    type: "Service",
-  },
   dapr: {
     label: "Dapr",
     description:
       "Template architecture uses Distributed Application Runtime (dapr)",
     type: "Tools",
   },
+  webcomponents: {
+    label: "Web Components",
+    description: "Template architecture uses Web Components",
+    type: "Tools",
+  },
+
+  // ---- Infrastructure as Code
+  bicep: {
+    label: "Bicep",
+    description: "Template uses Bicep for Infra as Code",
+    type: "Infrastructure as Code",
+  },
+  terraform: {
+    label: "Terraform",
+    description: "Template uses Terraform for Infra as Code",
+    type: "Infrastructure as Code",
+  },
+
+  // ---- Database
+  mongodb: {
+    label: "MongoDB",
+    description: "Template architecture uses MongoDB",
+    type: "Database",
+  },
   prometheus: {
     label: "Prometheus",
     description: "Template architecture uses Prometheus",
     type: "Database",
   },
+
+  // ---- Framework
+  fastapi: {
+    label: "FastAPI",
+    description: "Template architecture uses FastAPI web framework",
+    type: "Framework",
+  },
+  flask: {
+    label: "Flask",
+    description: "Template architecture uses Flask web framework",
+    type: "Framework",
+  },
+  django: {
+    label: "Django",
+    description: "Template architecture uses Django web framework",
+    type: "Framework",
+  },
+  nestjs: {
+    label: "NestJS",
+    description: "Template architecture uses NestJS framework",
+    type: "Framework",
+  },
+  spring: {
+    label: "Spring",
+    description: "Template architecture uses Spring framework",
+    type: "Framework",
+  },
   streamlit: {
     label: "Streamlit",
     description: "Template architecture uses Streamlit library",
@@ -322,6 +307,37 @@ export const Tags: { [type in TagType]: Tag } = {
     description: "Template architecture uses Semantic Kernel",
     type: "Framework",
   },
+  microfrontend: {
+    label: "Micro Frontend",
+    description: "Template architecture uses Micro Frontend",
+    type: "Framework",
+  },
+
+  // ---- Platform
+  kubernetes: {
+    label: "Kubernetes",
+    description: "Template architecture uses Kubernetes",
+    type: "Platform",
+  },
+
+  // ---- Service
+  fhir: {
+    label: "FHIR Service",
+    description:
+      "Template architecture uses Fast Healthcare Interoperability Resources (FHIR) service",
+    type: "Service",
+  },
+  dataverse: {
+    label: "Dataverse",
+    description: "Template architecture uses Microsoft Dataverse",
+    type: "Service",
+  },
+  webapps: {
+    label: "Web Apps",
+    description: "Template architecture uses Web Apps",
+    type: "Service",
+  },
+
   // ---- Azure Services
   ahds: {
     label: "Azure Health Data Service",
@@ -447,7 +463,7 @@ export const Tags: { [type in TagType]: Tag } = {
     label: "Azure OpenAI Service",
     description: "Template architecture uses Azure OpenAI Service",
     azureIcon: "./img/Azure-OpenAI-Service.svg",
-    darkmodeAzureIcon:"./img/Azure-OpenAI-Service-white.svg",
+    darkmodeAzureIcon: "./img/Azure-OpenAI-Service-white.svg",
     url: "https://azure.microsoft.com/products/ai-services/openai-service",
     type: "Service",
   },

diff --git a/website/static/templates.json b/website/static/templates.json
@@ -1149,6 +1149,8 @@
       "ai",
       "popular",
       "typescript",
+      "webcomponents",
+      "microfrontend",
       "new"
     ]
   }