adding support for template refs:

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

@@ -5,7 +5,7 @@
 
 import React from "react";
 import styleCSS from "./styles.module.css";
-import { type User } from "../../../data/tags";
+import { type Template } from "../../../data/tags";
 import useBaseUrl from "@docusaurus/useBaseUrl";
 import {
   Card,
@@ -60,7 +60,7 @@ const darkTheme: PartialTheme = {
   },
 };
 
-function ShowcaseCard({ user }: { user: User }): JSX.Element {
+function ShowcaseCard({ user }: { user: Template }): JSX.Element {
   const styles = useStyles();
   const title = user.title;
   const tags = user.tags;

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

@@ -5,7 +5,7 @@
 
 import React from "react";
 import styles from "./styles.module.css";
-import { Tags, type User, type TagType } from "../../../data/tags";
+import { Tags, type Template, type TagType } from "../../../data/tags";
 import { TagList } from "../../../data/users";
 import { sortBy } from "@site/src/utils/jsUtils";
 import useBaseUrl from "@docusaurus/useBaseUrl";
@@ -87,7 +87,7 @@ function CopyButton({ url, colorMode }: { url: string; colorMode: string }) {
   );
 }
 
-export default function ShowcaseCardPanel({ user }: { user: User }) {
+export default function ShowcaseCardPanel({ user }: { user: Template }) {
   const [
     isPopupVisibleTemplateDetails,
     { toggle: toggleIsPopupVisibleTemplateDetails },

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

@@ -5,7 +5,7 @@
 
 import React from "react";
 import styles from "./styles.module.css";
-import { type User } from "../../../data/tags";
+import { type Template } from "../../../data/tags";
 import {
   makeStyles,
   Link as FluentUILink,
@@ -115,7 +115,7 @@ export default function ShowcaseMultipleAuthors({
   user,
   cardPanel,
 }: {
-  user: User;
+  user: Template;
   cardPanel: boolean;
 }) {
   const { colorMode } = useColorMode();

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

@@ -5,7 +5,7 @@
 
 import React from "react";
 import styles from "./styles.module.css";
-import { Tag, Tags, type User, type TagType } from "../../../data/tags";
+import { Tag, Tags, type Template, type TagType } from "../../../data/tags";
 import { TagList } from "../../../data/users";
 import { sortBy } from "@site/src/utils/jsUtils";
 import { Badge, Tooltip, makeStyles } from "@fluentui/react-components";

website/src/data/tags.tsx

@@ -12,14 +12,15 @@ export type Tag = {
   type?: string;
 };
 
-export type User = {
+export type Template = {
   title: string;
   description: string;
   preview: string;
   website: string;
   author: string;
   source: string | null;
   tags: TagType[];
+  ref: string;
 };
 
 // NN: Updated TagType to suit Static Web Apps
@@ -105,7 +106,8 @@ export type TagType =
   | "ruby"
   | "rubyonrails"
   | "serverlessapi"
-  | "langchain";
+  | "langchain"
+  | "aiApps";
 
 // LIST OF AVAILABLE TAGS
 // Each tag in lit about must have a defined object here
@@ -137,6 +139,10 @@ export const Tags: { [type in TagType]: Tag } = {
     label: "Popular",
     description: "This tag is used for popular templates.",
   },
+  aiApps: {
+    label: "AI Apps",
+    description: "This tag is used for AI Apps templates gallery.",
+  },
 
   //============  FOR REGULAR USE
 

website/src/data/users.tsx

@@ -6,7 +6,7 @@
 /* eslint-disable global-require */
 
 import { sortBy } from '../utils/jsUtils';
-import { TagType, User, Tags } from './tags';
+import { TagType, Template, Tags } from './tags';
 import templates from '../../static/templates.json'
 
 // *** ADDING DATA TO AZD GALLERY ****/
@@ -16,12 +16,34 @@ import templates from '../../static/templates.json'
 // *************** CARD DATA STARTS HERE ***********************
 // Add your site to this list
 // prettier-ignore
+const expandedTemplates: Template[] = [];
+
+const expand = async (source:Template[]):Promise<Template[]> => {
+  await Promise.all(source.map(async (template) => {
+    if (template.ref) {
+      const resp = await fetch(template.ref);
+      const data = await resp.json() as Template[];
+      data.forEach((d) => {
+        expandedTemplates.push({...d, tags: [...d.tags, ...(template.tags || [])]});
+      });
+    } else {
+      expandedTemplates.push(template)
+    }
+  }));
+
+  return expandedTemplates;
+}
 
-export const unsortedUsers: User[] = templates as User[]
+export const unsortedUsers = (async ():Promise<Template[]> => {
+  if (expandedTemplates.length !== 0) {
+    return expandedTemplates;
+  }
+  return expand(templates as Template[]);
+})();
 
 export const TagList = Object.keys(Tags) as TagType[];
-function sortUsers() {
-  let result = unsortedUsers;
+async function sortUsers() {
+  let result = await unsortedUsers;
   // Sort by site name
   result = sortBy(result, (user) => user.title.toLowerCase());
   return result;

website/src/pages/ShowcaseCardPage.tsx

@@ -10,7 +10,7 @@ import {
   UserState,
   InputValue,
 } from "../components/gallery/ShowcaseTemplateSearch";
-import { type User, type TagType } from "../data/tags";
+import { type Template, type TagType } from "../data/tags";
 import { sortedUsers, unsortedUsers } from "../data/users";
 import { Text, Combobox, Option, Spinner } from "@fluentui/react-components";
 import ShowcaseCards from "./ShowcaseCards";
@@ -32,19 +32,19 @@ const SORT_BY_OPTIONS = [
   "Alphabetical (Z - A)",
 ];
 
-function readSortChoice(rule: string): User[] {
+async function readSortChoice(rule: string): Promise<Template[]> {
   if (rule == SORT_BY_OPTIONS[0]) {
-    const copyUnsortedUser = unsortedUsers.slice();
+    const copyUnsortedUser = (await unsortedUsers).slice();
     return copyUnsortedUser.reverse();
   } else if (rule == SORT_BY_OPTIONS[1]) {
-    return unsortedUsers;
+    return await unsortedUsers;
   } else if (rule == SORT_BY_OPTIONS[2]) {
-    return sortedUsers;
+    return await sortedUsers;
   } else if (rule == SORT_BY_OPTIONS[3]) {
-    const copySortedUser = sortedUsers.slice();
+    const copySortedUser = (await sortedUsers).slice();
     return copySortedUser.reverse();
   }
-  return sortedUsers;
+  return await sortedUsers;
 }
 
 const SearchNameQueryKey = "name";
@@ -54,7 +54,7 @@ function readSearchName(search: string) {
 }
 
 function filterUsers(
-  users: User[],
+  users: Template[],
   selectedTags: TagType[],
   searchName: string | null
 ) {
@@ -81,16 +81,17 @@ export default function ShowcaseCardPage() {
 
   const [selectedTags, setSelectedTags] = useState<TagType[]>([]);
   const [searchName, setSearchName] = useState<string | null>(null);
-  const [selectedUsers, setSelectedUsers] = useState<User[]>([]);
+  const [selectedUsers, setSelectedUsers] = useState<Template[]>([]);
   const location = useLocation<UserState>();
 
   useEffect(() => {
-    setSelectedTags(readSearchTags(location.search));
-    setSelectedUsers(readSortChoice(selectedOptions[0]));
-    setSearchName(readSearchName(location.search));
-    restoreUserState(location.state);
-
-    setLoading(false);
+    readSortChoice(selectedOptions[0]).then(templates =>{
+      setSelectedTags(readSearchTags(location.search));
+      setSelectedUsers(templates);
+      setSearchName(readSearchName(location.search));
+      restoreUserState(location.state);
+      setLoading(false);
+    })
   }, [location, selectedOptions]);
 
   var cards = useMemo(

website/src/pages/ShowcaseCards.tsx

@@ -5,15 +5,15 @@
 
 import React from "react";
 import ShowcaseEmptyResult from "../components/gallery/ShowcaseEmptyResult";
-import { type User, type TagType } from "../data/tags";
+import { type Template, type TagType } from "../data/tags";
 import styles from "./styles.module.css";
 import ShowcaseCard from "../components/gallery/ShowcaseCard";
 import ShowcaseContributionCard from "../components/gallery/ShowcaseContributionCard";
 
 export default function ShowcaseCards({
   filteredUsers,
 }: {
-  filteredUsers: User[];
+  filteredUsers: Template[];
 }) {
   const len = filteredUsers ? filteredUsers.length : 0;
   if (len === 0) {

website/static/templates.json

@@ -1677,5 +1677,9 @@
       "appinsights",
       "blobstorage"
     ]
+  },
+  {
+    "ref": "https://cacheddkci2rpqggas.blob.core.windows.net/ai-templates/templates.json",
+    "tags": ["aiApps"]
   }
 ]