From 2037a9cce9f16df33770ae50fd97735be05da357 Mon Sep 17 00:00:00 2001 From: Ahmad Hakim Date: Tue, 18 Aug 2026 18:02:55 +0200 Subject: [PATCH] docs(+): installation commands --- native/templates/_intro.py | 237 ++++++++++++++----------------------- native/templates/toc.py | 17 +-- 2 files changed, 94 insertions(+), 160 deletions(-) diff --git a/native/templates/_intro.py b/native/templates/_intro.py index 23e6d28..1427b52 100644 --- a/native/templates/_intro.py +++ b/native/templates/_intro.py @@ -1,111 +1,94 @@ import reflex as rx +from reflex_components_core.el import div, h1, p, span, strong from components.core.hugeicon import hi from components.ui.button import button, button_variants -from components.ui.button_group import button_group -from components.ui.menu import menu - - -def command_selector(): - return menu.root( - menu.trigger( - hi("ArrowDown01Icon"), - class_name=f"""{button_variants("outline")} !rounded-r-lg !rounded-l-none !border-l-none""", - ), - menu.content( - menu.group_label("Commands"), - menu.separator(), - menu.item( - rx.el.span( - "", - class_name="command-check w-4", - ), - rx.el.span("buridan"), - id="command-option-cli", - on_click=rx.call_script( - """ - const command = "buridan add"; - - localStorage.setItem( - "buridan-command", - command - ); - - document - .querySelectorAll(".command-prefix") - .forEach(el => el.innerText = command); - - document - .querySelectorAll(".command-check") - .forEach(el => el.innerText = ""); +from native.templates._copy_btn import generate_component_id + +COPY_ICON_SVG = '' +TICK_ICON_SVG = '' + + +def _usage_demo(slug: str): + demo_id = generate_component_id() + icon_id = f"icon-{demo_id}" + + commands = { + "buridan": f"buridan add {slug}", + "uv": f"uv run buridan add {slug}", + "pip": f"python -m buridan add {slug}", + } + + def view_button(view: str, label: str): + return button( + label, + variant="outline", + class_name=( + "h-7 w-fit font-normal usage-btn border-transparent bg-transparent " + f"group-data-[view={view}]:border-border " + f"group-data-[view={view}]:bg-background" + ), + on_click=rx.call_script( + f"""document.getElementById("demo-{demo_id}").dataset.view = "{view}";""" + ), + ) - document - .querySelector("#command-option-cli .command-check") - .innerText = "✓"; - """ + def command_line(view: str, command_text: str): + return div( + rx.el.pre( + rx.el.code( + command_text, + id=f"command-{demo_id}-{view}", + class_name="language-python text-sm", ), ), - menu.item( - rx.el.span( - "", - class_name="command-check w-4", - ), - rx.el.span("uv run"), - id="command-option-uv", - on_click=rx.call_script( - """ - const command = "uv run buridan add"; - - localStorage.setItem( - "buridan-command", - command - ); - - document - .querySelectorAll(".command-prefix") - .forEach(el => el.innerText = command); + class_name=( + f"size-full overflow-x-auto p-2 hidden group-data-[view={view}]:flex" + ), + ) - document - .querySelectorAll(".command-check") - .forEach(el => el.innerText = ""); + commands_js = ", ".join(f'"{view}": "{cmd}"' for view, cmd in commands.items()) - document - .querySelector("#command-option-uv .command-check") - .innerText = "✓"; - """ - ), + return div( + div( + div( + view_button("uv", "uv"), + view_button("pip", "pip"), + view_button("buridan", "buridan"), + class_name="flex items-center gap-1", ), - menu.item( - rx.el.span( - "", - class_name="command-check w-4", - ), - rx.el.span("python -m"), - id="command-option-module", + rx.el.button( + hi("Copy01Icon", id=icon_id, class_name="size-4"), + class_name="flex items-center gap-1 px-2", on_click=rx.call_script( - """ - const command = "python -m buridan add"; + f""" + const commands = {{{commands_js}}}; + const view = document.getElementById("demo-{demo_id}").dataset.view; + const icon = document.getElementById("{icon_id}"); - localStorage.setItem( - "buridan-command", - command - ); + navigator.clipboard.writeText(commands[view]); - document - .querySelectorAll(".command-prefix") - .forEach(el => el.innerText = command); + icon.innerHTML = `{TICK_ICON_SVG}`; - document - .querySelectorAll(".command-check") - .forEach(el => el.innerText = ""); - - document - .querySelector("#command-option-module .command-check") - .innerText = "✓"; + setTimeout(() => {{ + icon.innerHTML = `{COPY_ICON_SVG}`; + }}, 1500); """ ), ), + class_name="flex items-stretch justify-between p-0.5 pb-0.5", + ), + div( + *[command_line(view, cmd) for view, cmd in commands.items()], + class_name=( + "rounded-md relative m-0.5 mt-0 flex min-h-0 flex-1 flex-col " + "overflow-hidden border bg-background " + "dark:shadow-[inset_0_1px_0_0_rgba(255,255,255,0.05)]" + ), ), + id=f"demo-{demo_id}", + data_view="uv", + class_name="w-full group relative flex min-w-0 flex-col border bg-muted/50 min-h-10 rounded-lg", ) @@ -117,8 +100,6 @@ def intro(raw_arg): title, description = intro.split(",", 1) slug = title.strip().lower().replace(" ", "_") - copy_id = f"copy-command-{slug}" - command_id = f"command-{slug}" return rx.el.div( rx.el.div( @@ -130,63 +111,21 @@ def intro(raw_arg): description.strip(), class_name="text-sm text-muted-foreground", ), - rx.el.div( - rx.el.code( - rx.el.span( - "❯", - class_name="shrink-0 select-none text-muted-foreground/50", - ), - rx.el.span( - "buridan add", - id=command_id, - class_name="text-muted-foreground command-prefix", - ), - rx.el.span( - f" {slug}", - class_name="font-medium text-foreground", - ), - class_name=( - "rounded-lg flex h-8 min-w-0 flex-1 items-center gap-2 " - "overflow-x-auto border border-border bg-muted/40 " - "px-3 font-mono text-xs whitespace-nowrap" - ), - ), - button_group.root( - button( - rx.el.span( - "Copy", - id=f"{copy_id}-text", - ), - variant="outline", - class_name="w-[80px]", - on_click=rx.call_script( - f""" - const command = - document.getElementById("{command_id}").innerText; - - const component = - "{slug}"; - - navigator.clipboard.writeText( - `${{command}} ${{component}}` - ); - - const text = - document.getElementById("{copy_id}-text"); - - text.innerText = "Copied!"; - - setTimeout(() => {{ - text.innerText = "Copy"; - }}, 1000); - """ - ), - ), - # command_selector(), - ), - class_name="flex w-full max-w-2xl items-stretch gap-2", - ), class_name="flex flex-col items-start gap-4 max-w-xl", ), - class_name="flex flex-col gap-6 sm:flex-row sm:items-start sm:justify-between mb-10", + div( + h1( + "Installation", + class_name="text-2xl leading-tight font-bold tracking-tighter", + ), + p( + span("Command to install the "), + strong(title.strip()), + span(" component."), + class_name="text-sm text-muted-foreground", + ), + _usage_demo(slug), + class_name="w-full flex flex-col items-start gap-4", + ), + class_name="flex flex-col gap-6 mb-10", ) diff --git a/native/templates/toc.py b/native/templates/toc.py index acbe134..00a30ff 100644 --- a/native/templates/toc.py +++ b/native/templates/toc.py @@ -1,8 +1,13 @@ import reflex as rx +from reflex.experimental import ClientStateVar from components.core.hugeicon import hi +from components.ui.field import field +from components.ui.radio_group import radio_group from native.templates._copy_btn import generate_component_id +_selected_env = ClientStateVar.create("_selected_env", "uv") + def create_copy_button(url: str) -> rx.Component: uid = generate_component_id() @@ -143,21 +148,11 @@ def table_of_content(url: str, toc_data: list[dict]): _create_external_tool_links(url), class_name="w-full flex flex-col", ), - # # rx.el.div( # rx.el.p( - # "Agent Resources", + # "Package Manager", # class_name="text-xs text-muted-foreground font-medium pb-2", # ), - # rx.el.a( - # rx.el.p( - # "llms.txt", - # class_name="text-[0.8rem] text-muted-foreground hover:text-foreground", - # ), - # href="/llms.txt", - # target="_blank", - # rel="noopener noreferrer", - # ), # class_name="w-full flex flex-col", # ), rx.el.div(