Support category, complexity, and industry for Copilot Cookbook landi…

…ng page (#53072)

src/frame/components/context/CategoryLandingContext.tsx

@@ -14,6 +14,10 @@ export type TocItem = {
     fullPath: string
     title: string
     intro: string
+    octicon?: string
+    category?: string[]
+    complexity?: string[]
+    industry?: string[]
   }>
 }
 

src/frame/lib/frontmatter.js

@@ -249,6 +249,20 @@ export const schema = {
       type: 'string',
       enum: ['audit-logs', 'codeql-cli', 'github-apps', 'graphql', 'rest', 'webhooks'],
     },
+    // START category-landing tags
+    category: {
+      type: 'array',
+    },
+    complexity: {
+      type: 'array',
+    },
+    industry: {
+      type: 'array',
+    },
+    octicon: {
+      type: 'string',
+    },
+    // END category landing tags
   },
 }
 

src/frame/middleware/context/generic-toc.ts

@@ -122,6 +122,10 @@ async function getTocItems(node: Tree, context: Context, opts: Options): Promise
     node.childPages.filter(filterHidden).map(async (child) => {
       const { page } = child
       const title = await page.renderProp('rawTitle', context, { textOnly: true })
+      const octicon = page.octicon ? page.octicon : null
+      const category = page.category ? page.category : null
+      const complexity = page.complexity ? page.complexity : null
+      const industry = page.industry ? page.industry : null
       let intro = null
       if (opts.renderIntros) {
         intro = ''
@@ -152,6 +156,10 @@ async function getTocItems(node: Tree, context: Context, opts: Options): Promise
         title,
         fullPath,
         intro,
+        octicon,
+        category,
+        complexity,
+        industry,
         childTocItems,
       } as ToC
     }),

src/landings/components/CategoryLanding.tsx

@@ -53,7 +53,16 @@ export const CategoryLanding = () => {
           <ul className="clearfix gutter-md-spacious">
             {onlyFlatItems.map((item, index) => (
               <li key={index} className="col-md-4 col-sm-12 list-style-none float-left p-4">
-                <CookBookArticleCard title={item.title} description={item.intro} />
+                <CookBookArticleCard
+                  title={item.title}
+                  description={item.intro}
+                  icon={item.octicon}
+                  tags={[
+                    ...(item.industry || []),
+                    ...(item.category || []),
+                    ...(item.complexity || []),
+                  ]}
+                />
               </li>
             ))}
           </ul>

src/types.ts

@@ -355,6 +355,10 @@ export type Page = {
   effectiveDate?: string
   fullTitle?: string
   render: (context: Context) => Promise<string>
+  octicon?: string
+  category?: string[]
+  complexity?: string[]
+  industry?: string[]
 }
 
 type ChangeLog = {