From bdb83f34ce0bf1b41f6b7f70cf1004dbd80000a1 Mon Sep 17 00:00:00 2001 From: Elijah Date: Thu, 14 Nov 2024 16:28:11 +0000 Subject: [PATCH 01/13] Add template name and fix broken template links --- pcweb/components/code_card.py | 46 ++++++++++++++++++++++++++++++----- templates/api-admin-panel.md | 1 + templates/chat-app.md | 3 ++- templates/ci-job.md | 3 ++- templates/customer-app.md | 1 + templates/dalle.md | 1 + templates/dashboard.md | 5 +++- templates/image-gen.md | 1 + templates/llamaindex-app.md | 1 + templates/nba-app.md | 1 + templates/sales-app.md | 1 + 11 files changed, 55 insertions(+), 9 deletions(-) diff --git a/pcweb/components/code_card.py b/pcweb/components/code_card.py index 831e8cf15d..47320afa6d 100644 --- a/pcweb/components/code_card.py +++ b/pcweb/components/code_card.py @@ -2,11 +2,11 @@ from pcweb.components.icons.icons import get_icon -def install_command(command: str) -> rx.Component: +def install_command(command: str, is_command: bool = True) -> rx.Component: return rx.el.button( get_icon(icon="copy", class_name="p-[5px]"), rx.text( - "$" + command, + "$" + command if is_command else command, as_="p", class_name="flex-grow flex-shrink min-w-0 font-small text-start truncate", ), @@ -28,7 +28,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,10 +88,44 @@ 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", ), + rx.cond("template" in app, + rx.hstack( + rx.el.p( + "Template name: ", + rx.code(app.get('template', "")), + class_name="font-small text-slate-10 italic", + ), + rx.box( + get_icon(icon="copy", class_name="p-[5px]"), + on_click=rx.set_clipboard(app.get('template')), + style=rx.Style( + { + "background": rx.color("gray", 3), + "border": "1px solid", + "border-color": rx.color("gray", 5), + "border-radius": "6px", + "opacity": "1", + "cursor": "pointer", + "_hover": { + "background": rx.color("gray", 4), + }, + "transition": "background 0.250s ease-out", + "&>svg": { + "transition": "transform 0.250s ease-out, opacity 0.250s ease-out", + }, + "_active": { + "background": rx.color("gray", 5), + }, + } + ), + ) + ), + + ), rx.text( app["description"], class_name="text-slate-10 font-small truncate text-pretty", @@ -101,8 +135,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( diff --git a/templates/api-admin-panel.md b/templates/api-admin-panel.md index c006ef1811..b05f6b6a2d 100644 --- a/templates/api-admin-panel.md +++ b/templates/api-admin-panel.md @@ -8,6 +8,7 @@ source: "https://github.com/reflex-dev/gallery-apps/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. diff --git a/templates/chat-app.md b/templates/chat-app.md index f81d62ff0b..b194abbca6 100644 --- a/templates/chat-app.md +++ b/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 diff --git a/templates/ci-job.md b/templates/ci-job.md index b973b24fc2..0e8dd8a2ef 100644 --- a/templates/ci-job.md +++ b/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": ""}, ] diff --git a/templates/customer-app.md b/templates/customer-app.md index c9fd9c6d5d..d45c96277f 100644 --- a/templates/customer-app.md +++ b/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. diff --git a/templates/dalle.md b/templates/dalle.md index bdbf3a6362..747960069e 100644 --- a/templates/dalle.md +++ b/templates/dalle.md @@ -8,6 +8,7 @@ source: "https://github.com/reflex-dev/reflex-examples/tree/main/dalle" meta: [ {"name": "keywords", "content": ""}, ] +template: "dalle" --- In this example we create a simple app for generating images using OpenAI's API. diff --git a/templates/dashboard.md b/templates/dashboard.md index 0efe40551c..e12c5a6a1e 100644 --- a/templates/dashboard.md +++ b/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. diff --git a/templates/image-gen.md b/templates/image-gen.md index bccd37d3e1..4cc5e065a8 100644 --- a/templates/image-gen.md +++ b/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. diff --git a/templates/llamaindex-app.md b/templates/llamaindex-app.md index 0f6a5ffdfb..d013be234a 100644 --- a/templates/llamaindex-app.md +++ b/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. diff --git a/templates/nba-app.md b/templates/nba-app.md index 69d80e8c91..eb98876dcb 100644 --- a/templates/nba-app.md +++ b/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. diff --git a/templates/sales-app.md b/templates/sales-app.md index a36529929a..2668b8425b 100644 --- a/templates/sales-app.md +++ b/templates/sales-app.md @@ -8,6 +8,7 @@ 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. From 5c60318ac66a9bf728291fc3ddfb8f0104d608b9 Mon Sep 17 00:00:00 2001 From: Elijah Date: Thu, 14 Nov 2024 16:32:24 +0000 Subject: [PATCH 02/13] revert install command logic --- pcweb/components/code_card.py | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/pcweb/components/code_card.py b/pcweb/components/code_card.py index 47320afa6d..a0612af7a4 100644 --- a/pcweb/components/code_card.py +++ b/pcweb/components/code_card.py @@ -2,11 +2,11 @@ from pcweb.components.icons.icons import get_icon -def install_command(command: str, is_command: bool = True) -> rx.Component: +def install_command(command: str) -> rx.Component: return rx.el.button( get_icon(icon="copy", class_name="p-[5px]"), rx.text( - "$" + command if is_command else command, + "$" + command, as_="p", class_name="flex-grow flex-shrink min-w-0 font-small text-start truncate", ), From e1beee0e59b2dd37af8965fbe2b5088f3dfa6c45 Mon Sep 17 00:00:00 2001 From: Elijah Date: Thu, 14 Nov 2024 21:52:23 +0000 Subject: [PATCH 03/13] remove website from templates --- pcweb/components/code_card.py | 78 +++++++++++++++++++---------------- templates/reflex-web.md | 13 ------ 2 files changed, 42 insertions(+), 49 deletions(-) delete mode 100644 templates/reflex-web.md diff --git a/pcweb/components/code_card.py b/pcweb/components/code_card.py index a0612af7a4..2ed185b27d 100644 --- a/pcweb/components/code_card.py +++ b/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( @@ -10,9 +10,11 @@ def install_command(command: str) -> rx.Component: as_="p", class_name="flex-grow flex-shrink min-w-0 font-small text-start truncate", ), + width="auto", 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, ) @@ -92,40 +94,40 @@ def gallery_app_card(app: dict) -> rx.Component: app["title"], class_name="font-smbold text-slate-12 truncate", ), - rx.cond("template" in app, - rx.hstack( - rx.el.p( - "Template name: ", - rx.code(app.get('template', "")), - class_name="font-small text-slate-10 italic", - ), - rx.box( - get_icon(icon="copy", class_name="p-[5px]"), - on_click=rx.set_clipboard(app.get('template')), - style=rx.Style( - { - "background": rx.color("gray", 3), - "border": "1px solid", - "border-color": rx.color("gray", 5), - "border-radius": "6px", - "opacity": "1", - "cursor": "pointer", - "_hover": { - "background": rx.color("gray", 4), - }, - "transition": "background 0.250s ease-out", - "&>svg": { - "transition": "transform 0.250s ease-out, opacity 0.250s ease-out", - }, - "_active": { - "background": rx.color("gray", 5), - }, - } - ), - ) - ), - - ), + # rx.cond("template" in app, + # rx.hstack( + # rx.el.p( + # "Template name: ", + # rx.code(app.get('template', "")), + # class_name="font-small text-slate-10 italic", + # ), + # rx.box( + # get_icon(icon="copy", class_name="p-[5px]"), + # on_click=rx.set_clipboard(app.get('template')), + # style=rx.Style( + # { + # "background": rx.color("gray", 3), + # "border": "1px solid", + # "border-color": rx.color("gray", 5), + # "border-radius": "6px", + # "opacity": "1", + # "cursor": "pointer", + # "_hover": { + # "background": rx.color("gray", 4), + # }, + # "transition": "background 0.250s ease-out", + # "&>svg": { + # "transition": "transform 0.250s ease-out, opacity 0.250s ease-out", + # }, + # "_active": { + # "background": rx.color("gray", 5), + # }, + # } + # ), + # ) + # ), + # + # ), rx.text( app["description"], class_name="text-slate-10 font-small truncate text-pretty", @@ -150,7 +152,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', ""))), + 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", diff --git a/templates/reflex-web.md b/templates/reflex-web.md deleted file mode 100644 index 77333a1f5f..0000000000 --- a/templates/reflex-web.md +++ /dev/null @@ -1,13 +0,0 @@ ---- -title: Reflex Website -description: "The official Reflex website, built with completely with Reflex." -author: "Reflex" -image: "reflex-web.webp" -demo: "https://reflex.dev/" -source: "https://github.com/reflex-dev/reflex-web" -meta: [ - {"name": "keywords", "content": ""}, -] ---- - -The Reflex website is a fully featured website and documentation site built with Reflex. More information can be found on the [Reflex Website GitHub](https://github.com/reflex-dev/reflex-web). From d28af0e95b7c66a11abbbb5423ea68d074965fb3 Mon Sep 17 00:00:00 2001 From: Elijah Date: Thu, 14 Nov 2024 22:43:39 +0000 Subject: [PATCH 04/13] Rectify links and template content --- templates/api-admin-panel.md | 2 +- templates/chat-app.md | 6 +----- templates/dalle.md | 5 ++--- templates/image-gen.md | 2 +- templates/llamaindex-app.md | 4 +++- templates/nba-app.md | 2 +- templates/sales-app.md | 4 ++-- 7 files changed, 11 insertions(+), 14 deletions(-) diff --git a/templates/api-admin-panel.md b/templates/api-admin-panel.md index b05f6b6a2d..1cbacab600 100644 --- a/templates/api-admin-panel.md +++ b/templates/api-admin-panel.md @@ -4,7 +4,7 @@ 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"}, ] diff --git a/templates/chat-app.md b/templates/chat-app.md index b194abbca6..d84d34bc68 100644 --- a/templates/chat-app.md +++ b/templates/chat-app.md @@ -19,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: diff --git a/templates/dalle.md b/templates/dalle.md index 747960069e..fb266da6a6 100644 --- a/templates/dalle.md +++ b/templates/dalle.md @@ -4,7 +4,7 @@ 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": ""}, ] @@ -18,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: diff --git a/templates/image-gen.md b/templates/image-gen.md index 4cc5e065a8..85d62beee3 100644 --- a/templates/image-gen.md +++ b/templates/image-gen.md @@ -18,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`: diff --git a/templates/llamaindex-app.md b/templates/llamaindex-app.md index d013be234a..0c799075ed 100644 --- a/templates/llamaindex-app.md +++ b/templates/llamaindex-app.md @@ -22,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 diff --git a/templates/nba-app.md b/templates/nba-app.md index eb98876dcb..0f5d6c0ea0 100644 --- a/templates/nba-app.md +++ b/templates/nba-app.md @@ -18,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: diff --git a/templates/sales-app.md b/templates/sales-app.md index 2668b8425b..c9380dce0a 100644 --- a/templates/sales-app.md +++ b/templates/sales-app.md @@ -11,14 +11,14 @@ meta: [ 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: From 48fef1d19edb9a44bfbd970f01dda9e8344dbb36 Mon Sep 17 00:00:00 2001 From: Elijah Date: Thu, 14 Nov 2024 22:45:19 +0000 Subject: [PATCH 05/13] The width should be passed as a prop --- pcweb/components/code_card.py | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/pcweb/components/code_card.py b/pcweb/components/code_card.py index 2ed185b27d..8964e71695 100644 --- a/pcweb/components/code_card.py +++ b/pcweb/components/code_card.py @@ -10,7 +10,6 @@ def install_command(command: str, **props) -> rx.Component: as_="p", class_name="flex-grow flex-shrink min-w-0 font-small text-start truncate", ), - width="auto", 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", @@ -153,7 +152,7 @@ def gallery_app_card(app: dict) -> rx.Component: ), ), rx.hstack( - rx.cond("template" in app, install_command(app.get('template', ""))), + rx.cond("template" in app, install_command(app.get('template', ""), width="auto")), repo(app["demo"]), ), From 66dd7cd4e9d07ad9407e886b62ceb47b5a6a4d54 Mon Sep 17 00:00:00 2001 From: Elijah Date: Thu, 14 Nov 2024 22:47:52 +0000 Subject: [PATCH 06/13] remove dead code --- pcweb/components/code_card.py | 34 ---------------------------------- 1 file changed, 34 deletions(-) diff --git a/pcweb/components/code_card.py b/pcweb/components/code_card.py index 8964e71695..0307fbad09 100644 --- a/pcweb/components/code_card.py +++ b/pcweb/components/code_card.py @@ -93,40 +93,6 @@ def gallery_app_card(app: dict) -> rx.Component: app["title"], class_name="font-smbold text-slate-12 truncate", ), - # rx.cond("template" in app, - # rx.hstack( - # rx.el.p( - # "Template name: ", - # rx.code(app.get('template', "")), - # class_name="font-small text-slate-10 italic", - # ), - # rx.box( - # get_icon(icon="copy", class_name="p-[5px]"), - # on_click=rx.set_clipboard(app.get('template')), - # style=rx.Style( - # { - # "background": rx.color("gray", 3), - # "border": "1px solid", - # "border-color": rx.color("gray", 5), - # "border-radius": "6px", - # "opacity": "1", - # "cursor": "pointer", - # "_hover": { - # "background": rx.color("gray", 4), - # }, - # "transition": "background 0.250s ease-out", - # "&>svg": { - # "transition": "transform 0.250s ease-out, opacity 0.250s ease-out", - # }, - # "_active": { - # "background": rx.color("gray", 5), - # }, - # } - # ), - # ) - # ), - # - # ), rx.text( app["description"], class_name="text-slate-10 font-small truncate text-pretty", From 7f3b75b8f392e4f0ca0f975962a3eee0e04fb330 Mon Sep 17 00:00:00 2001 From: Elijah Date: Fri, 15 Nov 2024 12:47:58 +0000 Subject: [PATCH 07/13] remove dollat sign from template --- pcweb/components/code_card.py | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/pcweb/components/code_card.py b/pcweb/components/code_card.py index 0307fbad09..3b2844697d 100644 --- a/pcweb/components/code_card.py +++ b/pcweb/components/code_card.py @@ -2,11 +2,11 @@ from pcweb.components.icons.icons import get_icon -def install_command(command: str, **props) -> 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.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", ), @@ -118,7 +118,7 @@ def gallery_app_card(app: dict) -> rx.Component: ), ), rx.hstack( - rx.cond("template" in app, install_command(app.get('template', ""), width="auto")), + rx.cond("template" in app, install_command(app.get('template', ""),show_dollar_sign=False, width="auto")), repo(app["demo"]), ), From 18a40724e2e603418300787f406ef0827f888244 Mon Sep 17 00:00:00 2001 From: Elijah Date: Fri, 15 Nov 2024 17:50:09 +0000 Subject: [PATCH 08/13] fix ci template, template name --- templates/ci-job.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/templates/ci-job.md b/templates/ci-job.md index 0e8dd8a2ef..4c3241ebfc 100644 --- a/templates/ci-job.md +++ b/templates/ci-job.md @@ -5,7 +5,7 @@ author: "Reflex" image: "cijob.webp" demo: "https://cijob.reflex.run/" source: "https://github.com/reflex-dev/templates/tree/main/ci_template" -template: "ci-template" +template: "ci" meta: [ {"name": "keywords", "content": ""}, ] From 7c49d71d2935838400a4c4963dec49ce439a0b06 Mon Sep 17 00:00:00 2001 From: Elijah Date: Fri, 15 Nov 2024 19:41:38 +0000 Subject: [PATCH 09/13] make requested changes --- pcweb/components/code_card.py | 18 +++++++++++------- pcweb/pages/gallery/gallery.py | 5 +++++ templates/api-admin-panel.md | 3 +-- templates/chat-app.md | 5 ++--- templates/ci-job.md | 4 ++-- templates/customer-app.md | 3 +-- templates/dalle.md | 2 +- templates/dashboard.md | 3 +-- templates/image-gen.md | 5 ++--- templates/llamaindex-app.md | 5 ++--- templates/nba-app.md | 2 +- templates/sales-app.md | 3 +-- 12 files changed, 30 insertions(+), 28 deletions(-) diff --git a/pcweb/components/code_card.py b/pcweb/components/code_card.py index 3b2844697d..94531aa25e 100644 --- a/pcweb/components/code_card.py +++ b/pcweb/components/code_card.py @@ -89,9 +89,16 @@ def gallery_app_card(app: dict) -> rx.Component: ), rx.box( rx.box( - rx.el.h6( - app["title"], - class_name="font-smbold text-slate-12 truncate", + rx.hstack( + rx.el.h6( + app["title"], + class_name="font-smbold text-slate-12 truncate", + ), + rx.el.button( + get_icon(icon="copy", class_name="p-[5px]"), + on_click=rx.set_clipboard(app["title"]), + class_name="border-slate-5 bg-slate-1 hover:bg-slate-3 shadow-small border rounded-md text-slate-9 hover:!text-slate-9 no-underline transition-bg cursor-pointer", + ), ), rx.text( app["description"], @@ -117,10 +124,7 @@ def gallery_app_card(app: dict) -> rx.Component: class_name="text-slate-9 font-small", ), ), - rx.hstack( - rx.cond("template" in app, install_command(app.get('template', ""),show_dollar_sign=False, width="auto")), - repo(app["demo"]), - ), + repo(app["demo"]), class_name="flex flex-row items-center gap-[6px] justify-between w-full", ), diff --git a/pcweb/pages/gallery/gallery.py b/pcweb/pages/gallery/gallery.py index cc471babe4..b591928d8e 100644 --- a/pcweb/pages/gallery/gallery.py +++ b/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 name and use it during ", + rx.code("reflex init"), + class_name="font-sm text-balance text-slate-9", + ), class_name="section-header", ) diff --git a/templates/api-admin-panel.md b/templates/api-admin-panel.md index 1cbacab600..f7a8ffefa3 100644 --- a/templates/api-admin-panel.md +++ b/templates/api-admin-panel.md @@ -1,5 +1,5 @@ --- -title: API Admin Panel +title: api_admin_panel description: "Interactive dashboard for API requests and response visualization" author: "Reflex" image: "api-admin-panel.webp" @@ -8,7 +8,6 @@ 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. diff --git a/templates/chat-app.md b/templates/chat-app.md index d84d34bc68..697ba8da61 100644 --- a/templates/chat-app.md +++ b/templates/chat-app.md @@ -1,5 +1,5 @@ --- -title: Chat App +title: reflex-chat description: "Real-time chat application with multiple rooms using Reflex and ChatGPT" author: "Reflex" image: "chat-app.webp" @@ -8,7 +8,6 @@ source: "https://github.com/reflex-dev/reflex-chat" meta: [ {"name": "keywords", "content": ""}, ] -template: "chat" --- # Chat App @@ -19,7 +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 -reflex init --template chat +reflex init --template reflex-chat ``` Set up your OpenAI API key: diff --git a/templates/ci-job.md b/templates/ci-job.md index 4c3241ebfc..115f8912aa 100644 --- a/templates/ci-job.md +++ b/templates/ci-job.md @@ -1,11 +1,11 @@ --- -title: CI Template +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" + meta: [ {"name": "keywords", "content": ""}, ] diff --git a/templates/customer-app.md b/templates/customer-app.md index d45c96277f..9fc3781fc7 100644 --- a/templates/customer-app.md +++ b/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" @@ -8,7 +8,6 @@ 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. diff --git a/templates/dalle.md b/templates/dalle.md index fb266da6a6..4756fdd4d2 100644 --- a/templates/dalle.md +++ b/templates/dalle.md @@ -1,5 +1,5 @@ --- -title: DALL-E +title: dalle description: "DALL-E is a Reflex app for generating images using OpenAI's API" author: "Reflex" image: "dalle.webp" diff --git a/templates/dashboard.md b/templates/dashboard.md index e12c5a6a1e..bc4d786c28 100644 --- a/templates/dashboard.md +++ b/templates/dashboard.md @@ -1,5 +1,5 @@ --- -title: Dashboard +title: dashboard description: "Interactive dashboard with real-time data visualization" author: "Reflex" image: "dashboard.webp" @@ -8,7 +8,6 @@ source: "https://github.com/reflex-dev/templates/tree/main/dashboard" 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. diff --git a/templates/image-gen.md b/templates/image-gen.md index 85d62beee3..1f90c5ebed 100644 --- a/templates/image-gen.md +++ b/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" @@ -8,7 +8,6 @@ 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. @@ -18,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 ai-image-gen +reflex init --template ai_image_gen ``` To run the app, set the `REPLICATE_API_TOKEN`: diff --git a/templates/llamaindex-app.md b/templates/llamaindex-app.md index 0c799075ed..d25f647294 100644 --- a/templates/llamaindex-app.md +++ b/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" @@ -8,7 +8,6 @@ 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. @@ -22,7 +21,7 @@ If you plan on deploying your agentic workflow to prod, follow the [llama deploy To run this app locally, install Reflex and run: ```bash -reflex init --template llamaindex +reflex init --template reflex-llamaindex-template ``` diff --git a/templates/nba-app.md b/templates/nba-app.md index 0f5d6c0ea0..9af0f2b733 100644 --- a/templates/nba-app.md +++ b/templates/nba-app.md @@ -1,5 +1,5 @@ --- -title: NBA App +title: nba description: "Interactive NBA app with player stats and live updates" author: "Reflex" image: "nba-app.webp" diff --git a/templates/sales-app.md b/templates/sales-app.md index c9380dce0a..3efcf60bf7 100644 --- a/templates/sales-app.md +++ b/templates/sales-app.md @@ -1,5 +1,5 @@ --- -title: Sales App +title: sales description: "Sales app with interactive charts and real-time data updates" author: "Reflex" image: "sales.webp" @@ -8,7 +8,6 @@ source: "https://github.com/reflex-dev/templates/tree/main/sales" meta: [ {"name": "keywords", "content": ""}, ] -template: "sales" --- 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. From cd4324c41c8fc8f5d6fb5f5ad7bf73238fded131 Mon Sep 17 00:00:00 2001 From: Elijah Date: Thu, 21 Nov 2024 14:59:28 +0000 Subject: [PATCH 10/13] the template cards should have the full reflex command --- pcweb/components/code_card.py | 54 +++++++++++++++++++--------------- pcweb/pages/gallery/gallery.py | 2 +- 2 files changed, 32 insertions(+), 24 deletions(-) diff --git a/pcweb/components/code_card.py b/pcweb/components/code_card.py index 94531aa25e..6625a95857 100644 --- a/pcweb/components/code_card.py +++ b/pcweb/components/code_card.py @@ -89,42 +89,50 @@ def gallery_app_card(app: dict) -> rx.Component: ), rx.box( rx.box( - rx.hstack( - rx.el.h6( - app["title"], - class_name="font-smbold text-slate-12 truncate", - ), - rx.el.button( - get_icon(icon="copy", class_name="p-[5px]"), - on_click=rx.set_clipboard(app["title"]), - class_name="border-slate-5 bg-slate-1 hover:bg-slate-3 shadow-small border rounded-md text-slate-9 hover:!text-slate-9 no-underline transition-bg cursor-pointer", - ), + rx.el.h6( + app["title"], + class_name="font-smbold text-slate-12 truncate", ), rx.text( app["description"], class_name="text-slate-10 font-small truncate text-pretty", ), 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", + + ), + ), + + ), + 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", ), diff --git a/pcweb/pages/gallery/gallery.py b/pcweb/pages/gallery/gallery.py index b591928d8e..9f94ac9438 100644 --- a/pcweb/pages/gallery/gallery.py +++ b/pcweb/pages/gallery/gallery.py @@ -53,7 +53,7 @@ def gallery_heading() -> rx.Component: class_name="font-md text-balance text-slate-9 -mt-4", ), rx.text.span( - "Copy the template name and use it during ", + "Copy the template command and use it during ", rx.code("reflex init"), class_name="font-sm text-balance text-slate-9", ), From c73008572c1637cdf1f53e26823dd1e2c5d8ae81 Mon Sep 17 00:00:00 2001 From: Elijah Date: Sun, 24 Nov 2024 11:05:23 +0000 Subject: [PATCH 11/13] add max-width --- pcweb/components/code_card.py | 2 ++ 1 file changed, 2 insertions(+) diff --git a/pcweb/components/code_card.py b/pcweb/components/code_card.py index 6625a95857..91efef1841 100644 --- a/pcweb/components/code_card.py +++ b/pcweb/components/code_card.py @@ -108,6 +108,8 @@ def gallery_app_card(app: dict) -> rx.Component: ), ), + width="310px", + max_width="310px", ), rx.cond( From 15565f7c4bdf1c4cce55a1001932734b4d369847 Mon Sep 17 00:00:00 2001 From: Masen Furer Date: Mon, 25 Nov 2024 16:02:08 -0800 Subject: [PATCH 12/13] templates: install_command copy button animation import `copy_script` from the shiki code block and reuse it --- pcweb/components/code_card.py | 16 ++++++++++++++-- 1 file changed, 14 insertions(+), 2 deletions(-) diff --git a/pcweb/components/code_card.py b/pcweb/components/code_card.py index 91efef1841..4f82a3e3d7 100644 --- a/pcweb/components/code_card.py +++ b/pcweb/components/code_card.py @@ -1,18 +1,30 @@ 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, 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 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, ) From 84e53f15c3dfba08e7324a88c207fb75b82502a9 Mon Sep 17 00:00:00 2001 From: Masen Furer Date: Mon, 25 Nov 2024 16:10:28 -0800 Subject: [PATCH 13/13] templates: set width="100%" for description text allow truncation ellipses and auto tooltip logic in browsers like safari and firefox --- pcweb/components/code_card.py | 2 ++ 1 file changed, 2 insertions(+) diff --git a/pcweb/components/code_card.py b/pcweb/components/code_card.py index 4f82a3e3d7..7366a94c3a 100644 --- a/pcweb/components/code_card.py +++ b/pcweb/components/code_card.py @@ -104,10 +104,12 @@ def gallery_app_card(app: dict) -> rx.Component: 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.vstack(