[GTM-838][GTM-841]Add template name and fix broken template links (#1089)

* Add template name and fix broken template links

* revert install command logic

* remove website from templates

* Rectify links and template content

* The width should be passed as a prop

* remove dead code

* remove dollat sign from template

* fix ci template, template name

* make requested changes

* the template cards should have the full reflex command

* add max-width

* templates: install_command copy button animation

import `copy_script` from the shiki code block and reuse it

* templates: set width="100%" for description text

allow truncation ellipses and auto tooltip logic in browsers like safari and firefox

---------

Co-authored-by: Masen Furer <[email protected]>

Author: ElijahAhianyo

pcweb/components/code_card.py

@@ -1,18 +1,31 @@
 import reflex as rx
 from pcweb.components.icons.icons import get_icon
+from reflex.components.datadisplay.shiki_code_block import copy_script
 
 
-def install_command(command: str) -> rx.Component:
+def install_command(command: str, show_dollar_sign: bool = True,  **props) -> rx.Component:
     return rx.el.button(
-        get_icon(icon="copy", class_name="p-[5px]"),
+        rx.icon("copy", size=14, margin_left="5px"),
         rx.text(
-            "$" + command,
+            "$" + command if show_dollar_sign else command,
             as_="p",
             class_name="flex-grow flex-shrink min-w-0 font-small text-start truncate",
         ),
         title=command,
-        on_click=rx.set_clipboard(command),
+        on_click=[
+            rx.set_clipboard(command),
+            copy_script(),
+        ],
         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",
+        style={
+            "opacity": "1",
+            "cursor": "pointer",
+            "transition": "background 0.250s ease-out",
+            "&>svg": {
+                "transition": "transform 0.250s ease-out, opacity 0.250s ease-out",
+            },
+        },
+        **props,
     )
 
 
@@ -28,7 +41,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,35 +101,55 @@ 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",
+                    width="100%",
                 ),
                 rx.text(
                     app["description"],
                     class_name="text-slate-10 font-small truncate text-pretty",
+                    width="100%",
                 ),
                 rx.box(
-                    rx.cond(
-                        "Reflex" in app["author"],
+                    rx.vstack(
                         rx.box(
-                            rx.text(
-                            "by",
-                            class_name="text-slate-9 font-small",
+                            rx.hstack(
+                                install_command(f"reflex init --template {app['title']}"),
+                                rx.hstack(
+                                    repo(app["demo"]),
+                                    justify="start",
+
+                                ),
+                            ),
+                            width="310px",
+                            max_width="310px",
+
+                        ),
+                        rx.cond(
+                            "Reflex" in app["author"],
+                            rx.box(
+                                rx.text(
+                                    "by",
+                                    class_name="text-slate-9 font-small",
+                                ),
+                                get_icon(icon="badge_logo"),
+                                rx.text(
+                                    app["author"],
+                                    class_name="text-slate-9 font-small",
+                                ),
+                                class_name="flex flex-row items-start gap-1",
                             ),
-                            get_icon(icon="badge_logo"),
                             rx.text(
-                                app["author"],
+                                f"by {app['author']}",
                                 class_name="text-slate-9 font-small",
                             ),
-                            class_name="flex flex-row items-center gap-1",
-                        ),
-                        rx.text(
-                            f"by {app['author']}",
-                            class_name="text-slate-9 font-small",
                         ),
+                        align_items="start",
+                        class_name="brother-john"
                     ),
-                    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",

pcweb/pages/gallery/gallery.py

@@ -52,6 +52,11 @@ def gallery_heading() -> rx.Component:
             ),
             class_name="font-md text-balance text-slate-9 -mt-4",
         ),
+        rx.text.span(
+            "Copy the template command and use it during ",
+            rx.code("reflex init"),
+            class_name="font-sm text-balance text-slate-9",
+        ),
         class_name="section-header",
     )
 

templates/api-admin-panel.md

@@ -1,10 +1,10 @@
 ---
-title: API Admin Panel
+title: api_admin_panel
 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"},
 ]

templates/chat-app.md

@@ -1,10 +1,10 @@
 ---
-title: Chat App
+title: reflex-chat
 description: "Real-time chat application with multiple rooms using Reflex and ChatGPT"
 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": ""},
 ]
@@ -18,11 +18,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 reflex-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"
+
 meta: [
     {"name": "keywords", "content": ""},
 ]

templates/customer-app.md

@@ -1,5 +1,5 @@
 ---
-title: Customer Data App
+title: customer_data_app
 description: "A Reflex app for customer data management with visualizations"
 author: "Reflex"
 image: "customer-app.webp"

templates/dalle.md

@@ -1,13 +1,14 @@
 ---
-title: DALL-E
+title: dalle
 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

@@ -1,11 +1,13 @@
 ---
-title: Dashboard
+title: dashboard
 description: "Interactive dashboard with real-time data visualization"
 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": ""},
+]
 ---
 
 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

@@ -1,5 +1,5 @@
 ---
-title: Image Gen
+title: ai_image_gen
 description: "Generate AI images using Replicate's API"
 author: "Reflex"
 image: "image-gen.webp"
@@ -17,7 +17,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

@@ -1,5 +1,5 @@
 ---
-title: LLamaIndex App
+title: reflex-llamaindex-template
 description: "A minimal chat app using LLamaIndex"
 author: "Reflex"
 image: "llamaindex.png"
@@ -21,9 +21,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 reflex-llamaindex-template
 ```
 
+
+
 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