remove popular tag in ChatGPT and RAG with Azure OpenAI and Cognitive Search for JavaScript

website/src/components/Feature.js

@@ -1,8 +1,12 @@
+/**
+ * Copyright (c) Microsoft Corporation. All rights reserved.
+ * Licensed under the MIT License.
+ */
+
 import React from "react";
 import styles from "./styles.module.css";
 import {
   Card,
-  shorthands,
   makeStyles,
   Link,
   CardFooter,
@@ -27,7 +31,9 @@ export default function Feature({ Svg, title, description, link, content }) {
   return (
     <Card className={styles.card}>
       <CardHeader
-        header={<img width="80px" height="80px" src={useBaseUrl(Svg)} alt={title} />}
+        header={
+          <img width="80px" height="80px" src={useBaseUrl(Svg)} alt={title} />
+        }
       />
       <div className={styles.cardContent}>
         <div className={style.subtitle1}>{title}</div>

website/src/components/HomepageFeatures.js

@@ -1,6 +1,11 @@
-import React from 'react';
-import styles from './styles.module.css';
-import Feature from '@site/src/components/Feature';
+/**
+ * Copyright (c) Microsoft Corporation. All rights reserved.
+ * Licensed under the MIT License.
+ */
+
+import React from "react";
+import styles from "./styles.module.css";
+import Feature from "@site/src/components/Feature";
 
 /**
  * Fixed data that is rendered as a 'Feature' component on Homepage
@@ -45,19 +50,18 @@ const FeatureList = [
   },
 ];
 
-
 /**
  * Component that renders FeaturesList data in a container
  * with each data item represented as a Feature in a responsive grid
  */
 export default function HomepageFeatures() {
   return (
     <div className={styles.features}>
-        <div className={styles.row}>
-          {FeatureList.map((props, idx) => (
-            <Feature key={idx} {...props} />
-          ))}
-        </div>
+      <div className={styles.row}>
+        {FeatureList.map((props, idx) => (
+          <Feature key={idx} {...props} />
+        ))}
+      </div>
     </div>
   );
 }

website/src/components/Svg/index.tsx

@@ -1,40 +1,41 @@
 /**
-* Copyright (c) Microsoft Corporation. All rights reserved.
-* Licensed under the MIT License.
+ * Copyright (c) Microsoft Corporation. All rights reserved.
+ * Licensed under the MIT License.
  */
 
- import React, {type ReactNode, type ComponentProps} from 'react';
- import clsx from 'clsx';
- import styles from './styles.module.css';
-
- export type SvgIconProps = ComponentProps<'svg'> & {
-   viewBox?: string;
-   size?: 'inherit' | 'small' | 'medium' | 'large';
-   color?: 'inherit' | 'primary' | 'secondary' | 'success' | 'error' | 'warning';
-   svgClass?: string; // Class attribute on the child
-   colorAttr?: string; // Applies a color attribute to the SVG element.
-   children: ReactNode; // Node passed into the SVG element.
- };
-
- export default function Svg(props: SvgIconProps): JSX.Element {
-   const {
-     svgClass,
-     colorAttr,
-     children,
-     color = 'inherit',
-     size = 'medium',
-     viewBox = '0 0 24 24',
-     ...rest
-   } = props;
-
-   return (
-     <svg
-       viewBox={viewBox}
-       color={colorAttr}
-       aria-hidden
-       className={clsx(styles.svgIcon, styles[color], styles[size], svgClass)}
-       {...rest}>
-       {children}
-     </svg>
-   );
- }
+import React, { type ReactNode, type ComponentProps } from "react";
+import clsx from "clsx";
+import styles from "./styles.module.css";
+
+export type SvgIconProps = ComponentProps<"svg"> & {
+  viewBox?: string;
+  size?: "inherit" | "small" | "medium" | "large";
+  color?: "inherit" | "primary" | "secondary" | "success" | "error" | "warning";
+  svgClass?: string; // Class attribute on the child
+  colorAttr?: string; // Applies a color attribute to the SVG element.
+  children: ReactNode; // Node passed into the SVG element.
+};
+
+export default function Svg(props: SvgIconProps): JSX.Element {
+  const {
+    svgClass,
+    colorAttr,
+    children,
+    color = "inherit",
+    size = "medium",
+    viewBox = "0 0 24 24",
+    ...rest
+  } = props;
+
+  return (
+    <svg
+      viewBox={viewBox}
+      color={colorAttr}
+      aria-hidden
+      className={clsx(styles.svgIcon, styles[color], styles[size], svgClass)}
+      {...rest}
+    >
+      {children}
+    </svg>
+  );
+}

website/src/components/Svg/styles.module.css

@@ -3,7 +3,7 @@
 * Licensed under the MIT License.
  */
 
- .svgIcon {
+.svgIcon {
   user-select: none;
   width: 1em;
   height: 1em;
@@ -49,4 +49,4 @@
 
 .inherit {
   color: inherit;
-}
+}

website/src/components/gallery/ShowcaseCard/index.tsx

@@ -60,7 +60,7 @@ const darkTheme: PartialTheme = {
   },
 };
 
-function ShowcaseCard({ user }: { user: User }):JSX.Element {
+function ShowcaseCard({ user }: { user: User }): JSX.Element {
   const styles = useStyles();
   const tags = user.tags;
   const source = user.source;
@@ -94,7 +94,6 @@ function ShowcaseCard({ user }: { user: User }):JSX.Element {
             <img
               src={headerLogo}
               alt="Logo"
-              alt="Logo"
               height={16}
               style={{ margin: "5px 0px", fontWeight: "550" }}
             />
@@ -156,7 +155,12 @@ function ShowcaseCard({ user }: { user: User }):JSX.Element {
             <div className={styleCSS.headerText}>{headerText}</div>
             {tags.includes("new") ? (
               <>
-                <img src={star} alt="Star" height={16} />
+                <img
+                  src={star}
+                  alt="Star"
+                  height={16}
+                  style={{ paddingLeft: "10px" }}
+                />
                 <div
                   style={{
                     color: "#11910D",
@@ -170,7 +174,12 @@ function ShowcaseCard({ user }: { user: User }):JSX.Element {
             ) : null}
             {tags.includes("popular") ? (
               <>
-                <img src={fire} alt="Fire" height={16} />
+                <img
+                  src={fire}
+                  alt="Fire"
+                  height={16}
+                  style={{ paddingLeft: "10px" }}
+                />
                 <div
                   style={{
                     color: "#F7630C",
@@ -252,7 +261,6 @@ function ShowcaseCard({ user }: { user: User }):JSX.Element {
           id={"input_" + user.title}
           size="small"
           spellCheck={false}
-          spellCheck={false}
           defaultValue={azdInitCommand}
           className={styleCSS.input}
         />

website/src/components/gallery/ShowcaseCard/styles.module.css

@@ -48,48 +48,48 @@
   color: #616161;
 }
 
-.input{
+.input {
   flex: 1;
   border: 1px solid #d1d1d1 !important;
   font-size: 11px;
-  font-family: Consolas,Courier New, Courier, monospace !important;
+  font-family: Consolas, Courier New, Courier, monospace !important;
   -webkit-text-fill-color: #707070;
 }
 
-.copyIconButton{
+.copyIconButton {
   padding: 0px !important;
   min-height: 20px !important;
   min-width: 23px !important;
   background-color: var(--ifm-color-purple) !important;
   border-color: var(--ifm-color-purple) !important;
 }
 
-.copyIconButton:hover{
+.copyIconButton:hover {
   background-color: #5a4cb9 !important;
 }
 
-.cardTitle{
+.cardTitle {
   vertical-align: middle !important;
   font-size: 16px !important;
   color: var(--ifm-color-purple-light) !important;
   font-weight: 600 !important;
 }
 
-[data-theme="dark"] .cardTitle{
-  color: #A79CF1 !important;
+[data-theme="dark"] .cardTitle {
+  color: #a79cf1 !important;
 }
 
-[data-theme="dark"] .copyIconButton{
+[data-theme="dark"] .copyIconButton {
   background-color: #292929 !important;
   border-color: #666666 !important;
 }
 
-[data-theme="dark"] .copyIconButton:hover{
+[data-theme="dark"] .copyIconButton:hover {
   background-color: #3e3e3e !important;
 }
 
-[data-theme="dark"] .input{
-  -webkit-text-fill-color: #D6D6D6;
+[data-theme="dark"] .input {
+  -webkit-text-fill-color: #d6d6d6;
   border: 1px solid #141414 !important;
   background-color: #141414;
 }

website/src/components/gallery/ShowcaseCardPanel/index.tsx

@@ -544,9 +544,9 @@ function ShowcaseCardAzureTag({
         >
           <img
             src={
-              colorMode != "dark" || tagObject.darkmodeAzureIcon == null
+              colorMode != "dark" || tagObject.darkModeAzureIcon == null
                 ? useBaseUrl(tagObject.azureIcon)
-                : useBaseUrl(tagObject.darkmodeAzureIcon)
+                : useBaseUrl(tagObject.darkModeAzureIcon)
             }
             alt="Azure Service Icon"
             height={20}

website/src/components/gallery/ShowcaseCardPanel/styles.module.css

@@ -40,12 +40,13 @@
   color: #616161;
 }
 
-.color{
-  color:var(--ifm-color-purple-light) !important;
+.color {
+  color: var(--ifm-color-purple-light) !important;
 }
 
 .purple {
-  filter:invert(37%) sepia(47%) saturate(1651%) hue-rotate(221deg) brightness(86%) contrast(90%) !important;
+  filter: invert(37%) sepia(47%) saturate(1651%) hue-rotate(221deg)
+    brightness(86%) contrast(90%) !important;
   color: black;
 }
 
@@ -54,8 +55,9 @@
     brightness(90%) contrast(93%) !important;
 }
 
-[data-theme="dark"] .purple{
-  filter:invert(82%) sepia(32%) saturate(6544%) hue-rotate(203deg) brightness(101%) contrast(89%) !important;
+[data-theme="dark"] .purple {
+  filter: invert(82%) sepia(32%) saturate(6544%) hue-rotate(203deg)
+    brightness(101%) contrast(89%) !important;
 }
 
 [data-theme="dark"] .purple:hover {

website/src/components/gallery/ShowcaseContributionCard/index.tsx

@@ -1,6 +1,6 @@
 /**
-* Copyright (c) Microsoft Corporation. All rights reserved.
-* Licensed under the MIT License.
+ * Copyright (c) Microsoft Corporation. All rights reserved.
+ * Licensed under the MIT License.
  */
 
 import React from "react";

website/src/components/gallery/ShowcaseContributionCard/styles.module.css

@@ -6,7 +6,7 @@
 /* Keep for future change on light vs dark theme */
 .submitButton {
   flex: 1;
-  background-color: #7160E8 !important;
+  background-color: #7160e8 !important;
   white-space: nowrap;
   font-weight: 550 !important;
   font-size: 12px !important;

website/src/components/gallery/ShowcaseEmptyResult/index.tsx

@@ -1,10 +1,10 @@
 /**
-* Copyright (c) Microsoft Corporation. All rights reserved.
-* Licensed under the MIT License.
+ * Copyright (c) Microsoft Corporation. All rights reserved.
+ * Licensed under the MIT License.
  */
 
 import React from "react";
-import {InputValue} from "../ShowcaseTemplateSearch";
+import { InputValue } from "../ShowcaseTemplateSearch";
 import useBaseUrl from "@docusaurus/useBaseUrl";
 import { Text, Link as FluentUILink } from "@fluentui/react-components";
 import styles from "./styles.module.css";

website/src/components/gallery/ShowcaseEmptyResult/styles.module.css

@@ -6,5 +6,5 @@
 /* Keep for future change on light vs dark theme */
 .colorLink {
   padding-left: 10px !important;
-  color:var(--ifm-color-purple) !important;
-}
+  color: var(--ifm-color-purple) !important;
+}