update filter top and empty search page (#227)

* rename svg to fix icon not showing issue * fix search icon (#202) fix search icon * remove cosmos tag on azure-search-openai-demo-csharp(#204) remove cosmos tag on azure-search-openai-demo-csharp * Move Django to frameworks (#203) Move Django tag to frameworks * add font fallback and move reactjs to tools (#205) Add fallback font family Courier New, Courier, monospace in case Consolas is not rendered * Fix bug of showing the wrong template card header logo and title website after filtered and closed contribution card (#206) fix bug with unique key in loops * update submit template link to contribute page (#209) update contribute link * Squashed commit of the following: commit b838abc Author: hemarina <[email protected]> Date: Tue Oct 10 13:50:08 2023 -0700 add underline when page is selected commit 239bd8f Author: hemarina <[email protected]> Date: Mon Oct 9 16:18:48 2023 -0700 custom navbar * add filter top bar * test card sorted * update div css * debug filter top bar * add empty search page * cleaner timer * add condition for filter --------- Co-authored-by: Rajesh Kamal <[email protected]> Co-authored-by: Pamela Fox <[email protected]>
Azure · Oct 19, 2023 · cfbd128 · cfbd128
1 parent 8b9cdcc
commit cfbd128
Show file tree

Hide file tree

Showing 33 changed files with 849 additions and 137 deletions.
diff --git a/website/docusaurus.config.js b/website/docusaurus.config.js
@@ -73,40 +73,54 @@ const config = {
           width: 32,
           height: 32,
         },
-
-        // style: "primary",
-
         items: [
-          // FIXME: TEMPORARILY DISABLE DOCS, BLOG
-          //{ label: "Tutorial", position: "left", type: "doc", docId: "intro",},
-          //{ to: '/blog', label: 'Blog', position: 'left'},
-
-          { to: "/about", label: "About", position: "left" },
           {
-            label: "Contribute",
+            href: "/",
+            label: "Templates",
             position: "left",
-            type: "doc",
-            docId: "intro",
           },
 
-          // CONFIG:
-          // Make sure you have class defined in src/css/custom.css
           {
-            to: "https://learn.microsoft.com/azure/architecture/browse/",
-            label: "Architectures",
-            position: "right",
+            to: "/about",
+            label: "Getting Started",
+            position: "left",
           },
           {
             to: "https://learn.microsoft.com/azure/developer/azure-developer-cli/",
             label: "Docs",
-            position: "right",
+            position: "left",
           },
           {
-            href: "https://github.com/azure/awesome-azd",
+            to: "https://learn.microsoft.com/azure/architecture/browse/",
+            label: "Resources",
+            position: "left",
+          },
+          {
+            label: "Contribute",
+            position: "left",
+            type: "doc",
+            docId: "intro",
+          },
+
+          {
+            href: "https://github.com/Azure/repo/awesome-azd",
             position: "right",
             className: "header-github-link",
             "aria-label": "GitHub repository",
           },
+
+          // CONFIG:
+          // Make sure you have class defined in src/css/custom.css
+          {
+            to: "https://azure.github.io/awesome-azd/docs/intro",
+            label: "Submit your template!",
+            position: "right",
+            className: "button",
+            style: {
+              backgroundColor: "#7160E8",
+              color: "white",
+            },
+          },
         ],
       },
 
@@ -188,9 +202,9 @@ const config = {
 
         // CONFIG: theme = currently using `classic`
         //    See: https://docusaurus.io/docs/api/themes/@docusaurus/theme-classic
-        // theme: {
-        //   customCss: require.resolve('./src/css/custom.css'),
-        // },
+        theme: {
+          customCss: require.resolve("./src/css/custom.css"),
+        },
       }),
     ],
   ],

diff --git a/website/src/components/gallery/ShowcaseCard/index.tsx b/website/src/components/gallery/ShowcaseCard/index.tsx
@@ -285,29 +285,24 @@ const useStyles = makeStyles({
     color: "#424242",
     fontWeight: "600",
   },
-  cardFooterAzdCommand: {
-    fontSize: "11px",
-    fontFamily: '"Consolas-Regular", Helvetica',
-    color: "#606060",
-  },
 });
 
 function ShowcaseCard({ user }: { user: User }) {
   const styles = useStyles();
   const tags = user.tags;
   const source = user.source;
-  const star = useBaseUrl("/img/sparkle.svg");
-  const fire = useBaseUrl("/img/fire.svg");
+  const star = useBaseUrl("/img/Sparkle.svg");
+  const fire = useBaseUrl("/img/Fire.svg");
   let azdInitCommand =
     "azd init -t " + source.replace("https://github.com/", "");
-  let headerLogo = useBaseUrl("/img/community.svg");
+  let headerLogo = useBaseUrl("/img/Community.svg");
   let headerText = "COMMUNITY AUTHORED";
 
   // Panel
   const [isOpen, { setTrue: openPanel, setFalse: dismissPanel }] =
     useBoolean(false);
   if (tags.includes("msft")) {
-    headerLogo = useBaseUrl("/img/microsoft.svg");
+    headerLogo = useBaseUrl("/img/Microsoft.svg");
     headerText = "MICROSOFT AUTHORED";
   }
   const onRenderNavigationContent: IRenderFunction<IPanelProps> =
@@ -324,6 +319,7 @@ function ShowcaseCard({ user }: { user: User }) {
           >
             <img
               src={headerLogo}
+              alt="Logo"
               height={16}
               style={{ margin: "5px 0px", fontWeight: "550" }}
             />
@@ -390,7 +386,7 @@ function ShowcaseCard({ user }: { user: User }) {
               alignItems: "center",
             }}
           >
-            <img src={headerLogo} height={16} />
+            <img src={headerLogo} height={16} alt="logo" />
             <div
               style={{
                 fontWeight: "600",
@@ -520,12 +516,13 @@ function ShowcaseCard({ user }: { user: User }) {
         <Input
           id={"input_" + user.title}
           size="small"
+          spellCheck={false}
           defaultValue={azdInitCommand}
           style={{
             flex: "1",
             border: "1px solid #d1d1d1",
             fontSize: "11px",
-            fontFamily: "Consolas",
+            fontFamily: "Consolas, Courier New, Courier, monospace",
             WebkitTextFillColor: "#717171",
           }}
         />
@@ -544,7 +541,7 @@ function ShowcaseCard({ user }: { user: User }) {
                 navigator.clipboard.writeText(azdInitCommand);
               }}
             >
-              <img src={useBaseUrl("/img/copy.svg")} height={20} alt="Copy" />
+              <img src={useBaseUrl("/img/Copy.svg")} height={20} alt="Copy" />
             </Button>
           </PopoverTrigger>
 
@@ -639,7 +636,7 @@ export function ShowcaseContributionCard(): React.ReactElement {
           }}
           onClick={() => {
             window.open(
-              "https://github.com/Azure/awesome-azd/compare",
+              "https://azure.github.io/awesome-azd/docs/intro",
               "_blank"
             );
           }}
@@ -684,7 +681,7 @@ function ShowcaseCardPanel({ user }: { user: User }) {
 
   const templateURL = user.source.replace("https://github.com/", "");
   const azdInitCommand = "azd init -t " + templateURL;
-  const copySVG = useBaseUrl("/img/copy.svg");
+  const copySVG = useBaseUrl("/img/Copy.svg");
   const chevronSVG = useBaseUrl("/img/leftChevron.svg");
   const pivotStyles: IPivotStyles = {
     linkIsSelected: [

diff --git a/website/src/css/custom.css b/website/src/css/custom.css
@@ -6,7 +6,7 @@
 
 /* You can override the default Infima variables here. */
 :root {
-  --ifm-color-primary: #245e94;
+  --ifm-color-primary: #7160E8;
   --ifm-color-primary-dark: #205585;
   --ifm-color-primary-darker: #1f507e;
   --ifm-color-primary-darkest: #194268;
@@ -17,45 +17,61 @@
   --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
 }
 
-/* For readability concerns, you should choose a lighter palette in dark mode. */
-[data-theme='dark'] {
-  --ifm-color-primary: #33d4f4;
-  --ifm-color-primary-dark: #17cef2;
-  --ifm-color-primary-darker: #0dc9ee;
-  --ifm-color-primary-darkest: #0ba5c4;
-  --ifm-color-primary-light: #4fdaf6;
-  --ifm-color-primary-lighter: #5dddf6;
-  --ifm-color-primary-lightest: #87e6f9;
-  --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
+.navbar{
+  font-size: 16px;
 }
 
-/* For readability - FIXME: is there a better way to handle it? */
-[data-theme='dark'] .navbar__brand {
-  color: black;
+.navbar .navbar__inner .navbar__items .navbar__link--active{
+  text-decoration-line: underline;
+  text-underline-offset: 20px;
+  text-decoration-thickness: 4px;
 }
-[data-theme='dark'] .navbar__link {
-  color: black;
+
+/* .navbar .navbar__inner .navbar__items .navbar_item .navbar__link .templatePage{
+  text-decoration-line: underline;
+  text-underline-offset: 20px;
+  text-decoration-thickness: 4px;
+} */
+
+.templatePage:hover::before{
+  text-decoration-line: underline;
+  text-underline-offset: 20px;
+  text-decoration-thickness: 4px;
+  color:var(--ifm-color-primary);
+
 }
 
 .header-github-link:hover {
   opacity: 0.6;
 }
 
-.header-github-link::before {
+.header-github-link:before {
   content: '';
   width: 24px;
   height: 24px;
   display: flex;
-  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='white' d='M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'/%3E%3C/svg%3E")
+  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'/%3E%3C/svg%3E")
     no-repeat;
 }
 
-[data-theme='dark'] .header-github-link::before {
+html[data-theme='dark'] .header-github-link:before {
   background: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='white' d='M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'/%3E%3C/svg%3E")
     no-repeat;
 }
 
+/* For readability concerns, you should choose a lighter palette in dark mode. */
+/* [data-theme='dark'] {
+  --ifm-color-primary: #7160E8;
+  --ifm-color-primary-dark: #17cef2;
+  --ifm-color-primary-darker: #0dc9ee;
+  --ifm-color-primary-darkest: #0ba5c4;
+  --ifm-color-primary-light: #4fdaf6;
+  --ifm-color-primary-lighter: #5dddf6;
+  --ifm-color-primary-lightest: #87e6f9;
+  --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
+} */
 
+/* For readability - FIXME: is there a better way to handle it? */
 .docusaurus-highlight-code-line {
   background-color: rgba(0, 0, 0, 0.1);
   display: block;

diff --git a/website/src/data/tags.tsx b/website/src/data/tags.tsx
@@ -183,15 +183,10 @@ export const Tags: { [type in TagType]: Tag } = {
     description: "Template contains Python app code",
     type: "Language",
   },
-  django: {
-    label: "Django",
-    description: "Template contains Django web app code",
-    type: "Language",
-  },
   reactjs: {
     label: "React.js",
     description: "Template architecture uses React.js",
-    type: "Language",
+    type: "Tools",
   },
   nodejs: {
     label: "Node.js",
@@ -238,6 +233,11 @@ export const Tags: { [type in TagType]: Tag } = {
     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",

diff --git a/website/src/data/users.tsx b/website/src/data/users.tsx
@@ -20,11 +20,11 @@ import templates from '../../static/templates.json'
 // Add your site to this list
 // prettier-ignore
 
-const Users: User[] = templates as User[]
+export const unsortedUsers: User[] = templates as User[]
 
 export const TagList = Object.keys(Tags) as TagType[];
 function sortUsers() {
-  let result = Users;
+  let result = unsortedUsers;
   // Sort by site name
   result = sortBy(result, (user) => user.title.toLowerCase());
   return result;

diff --git a/website/src/pages/about/index.module.css b/website/src/pages/about/index.module.css
@@ -8,6 +8,8 @@
   text-align: center;
   position: relative;
   overflow: hidden;
+  background-color: #245e94;
+  color:#245e94;
 }
 
 @media screen and (max-width: 996px) {