[GTM-838][GTM-841]Add template name and fix broken template links

pcweb/components/code_card.py

@@ -2,7 +2,7 @@
 from pcweb.components.icons.icons import get_icon
 
 
-def install_command(command: str) -> rx.Component:
+def install_command(command: str, **props) -> rx.Component:
     return rx.el.button(
         get_icon(icon="copy", class_name="p-[5px]"),
         rx.text(
@@ -13,6 +13,7 @@ def install_command(command: str) -> rx.Component:
         title=command,
         on_click=rx.set_clipboard(command),
         class_name="flex items-center gap-1.5 border-slate-5 bg-slate-1 hover:bg-slate-3 shadow-small pr-1.5 border rounded-md w-full max-w-full text-slate-9 transition-bg cursor-pointer overflow-hidden",
+        **props,
     )
 
 
@@ -28,7 +29,7 @@ def repo(repo_url: str) -> rx.Component:
 def code_card(app: dict) -> rx.Component:
     return rx.flex(
         rx.box(
-            rx.link(
+            rx.el.a(
                 rx.image(
                     src=app["image_url"],
                     loading="lazy",
@@ -88,7 +89,7 @@ def gallery_app_card(app: dict) -> rx.Component:
         ),
         rx.box(
             rx.box(
-                rx.el.h4(
+                rx.el.h6(
                     app["title"],
                     class_name="font-smbold text-slate-12 truncate",
                 ),
@@ -101,8 +102,8 @@ def gallery_app_card(app: dict) -> rx.Component:
                         "Reflex" in app["author"],
                         rx.box(
                             rx.text(
-                            "by",
-                            class_name="text-slate-9 font-small",
+                                "by",
+                                class_name="text-slate-9 font-small",
                             ),
                             get_icon(icon="badge_logo"),
                             rx.text(
@@ -116,7 +117,11 @@ def gallery_app_card(app: dict) -> rx.Component:
                             class_name="text-slate-9 font-small",
                         ),
                     ),
-                    repo(app["demo"]),
+                    rx.hstack(
+                        rx.cond("template" in app, install_command(app.get('template', ""), width="auto")),
+                        repo(app["demo"]),
+                    ),
+
                     class_name="flex flex-row items-center gap-[6px] justify-between w-full",
                 ),
                 class_name="flex flex-col justify-between items-start gap-1 p-[0.625rem_0.75rem_0.625rem_0.75rem] w-full h-full",

templates/api-admin-panel.md

@@ -4,10 +4,11 @@ description: "Interactive dashboard for API requests and response visualization"
 author: "Reflex"
 image: "api-admin-panel.webp"
 demo: "https://api-admin-panel.reflex.run/"
-source: "https://github.com/reflex-dev/gallery-apps/tree/main/api-admin-panel"
+source: "https://github.com/reflex-dev/templates/tree/main/api_admin_panel"
 meta: [
     {"name": "keywords", "content": "admin panel, api admin panel, reflex admin panel"},
 ]
+template: "api-admin-panel"
 ---
 
 The following is an admin panel for reading from and writing to your customer data, built on a REST API. This app lets you look through customers and take custom actions based on the data.

templates/chat-app.md

@@ -4,10 +4,11 @@ description: "Real-time chat application with multiple rooms using Reflex and Ch
 author: "Reflex"
 image: "chat-app.webp"
 demo: "https://chat.reflex.run/"
-source: "https://github.com/reflex-dev/reflex-examples/tree/main/gpt/gpt"
+source: "https://github.com/reflex-dev/reflex-chat"
 meta: [
     {"name": "keywords", "content": ""},
 ]
+template: "chat"
 ---
 # Chat App
 
@@ -18,11 +19,7 @@ The following is a python chat app. It is 100% Python-based, including the UI, a
 To run this app locally, install Reflex and run:
 
 ```bash
-git clone https://github.com/reflex-dev/reflex-chat.git
-```
-
-```bash
-cd reflex-chat
+reflex init --template chat
 ```
 
 Set up your OpenAI API key:

templates/ci-job.md

@@ -1,10 +1,11 @@
 ---
-title: CI Job
+title: CI Template
 description: "CI/CD job dashboard with real-time updates and controls"
 author: "Reflex"
 image: "cijob.webp"
 demo: "https://cijob.reflex.run/"
 source: "https://github.com/reflex-dev/templates/tree/main/ci_template"
+template: "ci-template"
 meta: [
     {"name": "keywords", "content": ""},
 ]

templates/customer-app.md

@@ -8,6 +8,7 @@ source: "https://github.com/reflex-dev/templates/tree/main/customer_data_app"
 meta: [
     {"name": "keywords", "content": ""},
 ]
+template: "customer-data"
 ---
 
 The following is a python dashboard to interactively display some data, i.e. customer data. The app allows you to add, edit, and delete customer data in a table, as well as visualize the changes in data over time. All the data is stored in a database. It is a good starting point for building more complex apps that require data visualization and editing.

templates/dalle.md

@@ -4,10 +4,11 @@ description: "DALL-E is a Reflex app for generating images using OpenAI's API"
 author: "Reflex"
 image: "dalle.webp"
 demo: "https://dalle.reflex.run/"
-source: "https://github.com/reflex-dev/reflex-examples/tree/main/dalle"
+source: "https://github.com/reflex-dev/templates/tree/main/dalle"
 meta: [
     {"name": "keywords", "content": ""},
 ]
+template: "dalle"
 ---
 
 In this example we create a simple app for generating images using OpenAI's API.
@@ -17,8 +18,7 @@ In this example we create a simple app for generating images using OpenAI's API.
 To run this app locally, install Reflex and run:
 
 ```bash
-git clone https://github.com/reflex-dev/reflex-examples.git
-cd reflex-examples/ci-job
+reflex init --template dalle
 ```
 
 Set up your OpenAI API key:

templates/dashboard.md

@@ -5,7 +5,10 @@ author: "Reflex"
 image: "dashboard.webp"
 demo: "https://dashboard-new.reflex.run/"
 source: "https://github.com/reflex-dev/templates/tree/main/dashboard"
-meta: [{ "name": "keywords", "content": "" }]
+meta: [
+    {"name": "keywords", "content": ""},
+]
+template: "dashboard"
 ---
 
 The following is a dashboard to interactively display data some data. It is a good starting point for building more complex apps that require data visualization.

templates/image-gen.md

@@ -8,6 +8,7 @@ source: "https://github.com/reflex-dev/templates/tree/main/ai_image_gen"
 meta: [
     {"name": "keywords", "content": "image generation, ai image generation, reflex image generation, Replicate image generation"},
 ]
+template: "ai-image-gen"
 ---
 
 The following is an app that allows you to generate AI images. The current map uses replicate's api to generate images but can be easily modified to use other image generation services.
@@ -17,7 +18,7 @@ The following is an app that allows you to generate AI images. The current map u
 To run this app locally, install Reflex and run:
 
 ```bash
-reflex init --template image_gen
+reflex init --template ai-image-gen
 ```
 
 To run the app, set the `REPLICATE_API_TOKEN`:

templates/llamaindex-app.md

@@ -8,6 +8,7 @@ source: "https://github.com/reflex-dev/reflex-llamaindex-template"
 meta: [
     {"name": "keywords", "content": ""},
 ]
+template: "llamaindex"
 ---
 
 The following is an alternative UI to display the LLamaIndex app. 
@@ -21,9 +22,11 @@ If you plan on deploying your agentic workflow to prod, follow the [llama deploy
 To run this app locally, install Reflex and run:
 
 ```bash
-git clone https://github.com/reflex-dev/reflex-llamaindex-template.git
+reflex init --template llamaindex
 ```
 
+
+
 The following [lines](https://github.com/reflex-dev/reflex-llamaindex-template/blob/abfda49ff193ceb7da90c382e5cbdcb5fcdb665c/frontend/state.py#L55-L79) in the state.py file are where the app makes a request to your deployed agentic workflow. If you have not deployed your agentic workflow, you can edit this to call and api endpoint of your choice.
 
 ```python

templates/nba-app.md

@@ -8,6 +8,7 @@ source: "https://github.com/reflex-dev/templates/tree/main/nba"
 meta: [
     {"name": "keywords", "content": ""},
 ]
+template: "nba"
 ---
 
 The following is an app that displays NBA player stats from the 2015-2016 season. The table tab allows filtering and live updates. The graph tab shows the relationship between player stats.
@@ -17,7 +18,7 @@ The following is an app that displays NBA player stats from the 2015-2016 season
 To run this app locally, install Reflex and run:
 
 ```bash
-reflex init --template nba_app
+reflex init --template nba
 ```
 
 To run the app, use:

templates/sales-app.md

@@ -8,16 +8,17 @@ source: "https://github.com/reflex-dev/templates/tree/main/sales"
 meta: [
     {"name": "keywords", "content": ""},
 ]
+template: "sales"
 ---
 
-The following is a dashboard to interactively display data some data. It is a good starting point for building more complex apps that require data visualization.
+The following is a sales app that displays sales data. The table tab allows filtering and live updates. The graph tab shows the relationship between sales data.
 
 ## Setup
 
 To run this app locally, install Reflex and run:
 
 ```bash
-reflex init --template dashboard
+reflex init --template sales
 ```
 
 To run the app, use: