Skip to content

docpage(+): installation commands #15

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
LineIndent merged 1 commit into from
Aug 18, 2026
Merged

docpage(+): installation commands #15

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
237 changes: 88 additions & 149 deletions native/templates/_intro.py
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" color="currentColor" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M9 15C9 12.1716 9 10.7574 9.87868 9.87868C10.7574 9 12.1716 9 15 9L16 9C18.8284 9 20.2426 9 21.1213 9.87868C22 10.7574 22 12.1716 22 15V16C22 18.8284 22 20.2426 21.1213 21.1213C20.2426 22 18.8284 22 16 22H15C12.1716 22 10.7574 22 9.87868 21.1213C9 20.2426 9 18.8284 9 16L9 15Z"/><path d="M16.9999 9C16.9975 6.04291 16.9528 4.51121 16.092 3.46243C15.9258 3.25989 15.7401 3.07418 15.5376 2.90796C14.4312 2 12.7875 2 9.5 2C6.21252 2 4.56878 2 3.46243 2.90796C3.25989 3.07417 3.07418 3.25989 2.90796 3.46243C2 4.56878 2 6.21252 2 9.5C2 12.7875 2 14.4312 2.90796 15.5376C3.07417 15.7401 3.25989 15.9258 3.46243 16.092C4.51121 16.9528 6.04291 16.9975 9 16.9999"/></svg>'
TICK_ICON_SVG = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" color="currentColor" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M5 14.5C5 14.5 6.5 14.5 8.5 18C8.5 18 14.0588 8.83333 19 7"/></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",
)


Expand All @@ -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(
Expand All @@ -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",
)
17 changes: 6 additions & 11 deletions native/templates/toc.py
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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()
Expand Down Expand Up @@ -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(
Expand Down
Loading