feat: added contribution message and link to page (#2639)

* feat: added contribution message and link to page

Signed-off-by: Brian <bmahabir@bu.edu>

Signed-off-by: BUSolarLab <bmahabir@bu.edu>

* fix: added small changes to contri button and added test

Signed-off-by: Brian <bmahabir@bu.edu>

* fix: adjusted contri msg text color to match theme

Signed-off-by: Brian <bmahabir@bu.edu>

---------

Signed-off-by: BUSolarLab <bmahabir@bu.edu>
Signed-off-by: Brian <bmahabir@bu.edu>

Author: bmahabirbu

packages/frontend/src/pages/Recipes.spec.ts

@@ -220,3 +220,12 @@ test('filterRecipes is called with selected filters', async () => {
     languages: ['lang2'],
   });
 });
+
+test('Browse Recipe Repository button is present', async () => {
+  render(Recipes);
+
+  await vi.waitFor(() => {
+    const button = screen.getByTitle('https://github.com/containers/ai-lab-recipes/blob/main/CONTRIBUTING.md');
+    expect(button).toBeInTheDocument();
+  });
+});

packages/frontend/src/pages/Recipes.svelte

@@ -3,7 +3,9 @@ import RecipesCard from '/@/lib/RecipesCard.svelte';
 import { catalog } from '/@/stores/catalog';
 import type { Recipe } from '@shared/src/models/IRecipe';
 import type { Category } from '@shared/src/models/ICategory';
-import { Dropdown, NavPage } from '@podman-desktop/ui-svelte';
+import { Button, Dropdown, NavPage } from '@podman-desktop/ui-svelte';
+import { Fa } from 'svelte-fa';
+import { faGithub } from '@fortawesome/free-brands-svg-icons'; // Import the GitHub icon
 import { studioClient } from '../utils/client';
 import type { CatalogFilterKey, Choice, RecipeChoices, RecipeFilters } from '@shared/src/models/FilterRecipesResult';
 
@@ -94,12 +96,38 @@ const filtersComponents: { label: string; key: CatalogFilterKey }[] = [
   { label: 'Frameworks', key: 'frameworks' },
   { label: 'Languages', key: 'languages' },
 ];
+
+function openContribution(): void {
+  studioClient.openURL('https://github.com/containers/ai-lab-recipes/blob/main/CONTRIBUTING.md').catch(console.error);
+}
 </script>
 
 <NavPage title="Recipe Catalog" searchEnabled={false}>
   <div slot="content" class="flex flex-col min-w-full min-h-full">
     <div class="min-w-full min-h-full flex-1">
       <div class="px-5 space-y-5">
+        <!-- Add the summary here -->
+        <div class="text-sm text-[var(--pd-modal-text)] space-y-3">
+          <p>
+            Recipes help you explore and get started with a number of core AI use cases like chatbots, code generators,
+            text summarizers, agents, and more. Each recipe comes with detailed explanations and runnable source code
+            compatible with various large language models (LLMs).
+          </p>
+          <p>
+            Recipes are organized into categories:
+            <span class="text-[var(--pd-link)]">audio, computer vision, multimodal, natural language processing</span>.
+          </p>
+          <p>Want to contribute more AI applications? The catalog is open source and available on GitHub!</p>
+          <Button
+            title="https://github.com/containers/ai-lab-recipes/blob/main/CONTRIBUTING.md"
+            on:click={openContribution}
+            size="lg">
+            <div class="flex items-center space-x-2">
+              <Fa icon={faGithub} />
+              <span>Browse Recipe Repository</span>
+            </div>
+          </Button>
+        </div>
         <div class="flex flex-row space-x-2 text-[var(--pd-modal-text)]">
           {#each filtersComponents as filterComponent (filterComponent.key)}
             <div class="w-full">