From aa02823746dfb5fdfa91aa70910af068b044eb88 Mon Sep 17 00:00:00 2001 From: "Nurul Huda (Apon)" Date: Mon, 22 Jun 2026 17:05:46 +0600 Subject: [PATCH] docs: show init command in installaction guide --- site/app/assets/clipboard.js | 2 +- site/app/assets/docs.css | 2 ++ site/app/assets/home.css | 15 +++++++- site/app/pages/components/install_guide.zx | 40 ++++++++++++++++++++-- site/app/pages/page.zx | 2 +- 5 files changed, 55 insertions(+), 6 deletions(-) diff --git a/site/app/assets/clipboard.js b/site/app/assets/clipboard.js index a0fdff00..bc490e93 100644 --- a/site/app/assets/clipboard.js +++ b/site/app/assets/clipboard.js @@ -95,7 +95,7 @@ function setupCopyButtons() { .map((line) => line.textContent.replace(/^\$\s*|^>\s*/, '').trim()) .join(' && '); } else { - text = installCode.textContent.replace(/^\$\s*|^>\s*/, '').trim(); + text = installCode.textContent.replace(/^\$\s*|^>\s*/, '').replace(" #or", "").trim(); } copyText(text, copyButton); diff --git a/site/app/assets/docs.css b/site/app/assets/docs.css index a1186ce3..fc332059 100644 --- a/site/app/assets/docs.css +++ b/site/app/assets/docs.css @@ -1544,6 +1544,7 @@ code[class*="language-"] { /* Tab selection logic - header */ #tab-unix:checked~.install-tab-labels label[for="tab-unix"], #tab-windows:checked~.install-tab-labels label[for="tab-windows"], +#tab-node:checked~.install-tab-labels label[for="tab-node"], #tab-zig-mac:checked~.install-tab-labels label[for="tab-zig-mac"], #tab-zig-win:checked~.install-tab-labels label[for="tab-zig-win"], #tab-zig-other:checked~.install-tab-labels label[for="tab-zig-other"] { @@ -1554,6 +1555,7 @@ code[class*="language-"] { /* Tab selection logic - content (using sibling from header to content) */ .install-box-header:has(#tab-unix:checked)+.install-box-content #content-unix, .install-box-header:has(#tab-windows:checked)+.install-box-content #content-windows, +.install-box-header:has(#tab-node:checked)+.install-box-content #content-node, .install-box-header:has(#tab-zig-mac:checked)+.install-box-content #content-zig-mac, .install-box-header:has(#tab-zig-win:checked)+.install-box-content #content-zig-win, .install-box-header:has(#tab-zig-other:checked)+.install-box-content #content-zig-other { diff --git a/site/app/assets/home.css b/site/app/assets/home.css index d5bd4e52..413c747a 100644 --- a/site/app/assets/home.css +++ b/site/app/assets/home.css @@ -567,7 +567,7 @@ a.hero-badge:hover { } .hero-install .install-box-content { - padding: 1rem 1.1rem; + padding: 0.8rem; background: linear-gradient(180deg, rgba(13, 16, 22, 0.98) 0%, rgba(10, 13, 18, 1) 100%); min-width: 0; overflow-x: hidden; @@ -622,6 +622,7 @@ a.hero-badge:hover { .hero-install .install-box-header:has(#tab-unix:checked)+.install-box-content #content-unix, .hero-install .install-box-header:has(#tab-windows:checked)+.install-box-content #content-windows, +.hero-install .install-box-header:has(#tab-node:checked)+.install-box-content #content-node, .hero-install .install-box-header:has(#tab-zig-mac:checked)+.install-box-content #content-zig-mac, .hero-install .install-box-header:has(#tab-zig-win:checked)+.install-box-content #content-zig-win, .hero-install .install-box-header:has(#tab-zig-other:checked)+.install-box-content #content-zig-other { @@ -630,6 +631,7 @@ a.hero-badge:hover { .hero-install .install-box-header:has(#tab-unix:checked) .install-tab-labels label[for="tab-unix"], .hero-install .install-box-header:has(#tab-windows:checked) .install-tab-labels label[for="tab-windows"], +.hero-install .install-box-header:has(#tab-node:checked) .install-tab-labels label[for="tab-node"], .hero-install .install-box-header:has(#tab-zig-mac:checked) .install-tab-labels label[for="tab-zig-mac"], .hero-install .install-box-header:has(#tab-zig-win:checked) .install-tab-labels label[for="tab-zig-win"], .hero-install .install-box-header:has(#tab-zig-other:checked) .install-tab-labels label[for="tab-zig-other"] { @@ -640,10 +642,20 @@ a.hero-badge:hover { box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08) inset; } +.hero-install .install-tab-separator { + width: 1px; + align-self: stretch; + margin: 0.35rem 0.15rem; + background: rgba(255, 255, 255, 0.12); + flex-shrink: 0; +} + .hero-install .install-prompt { color: var(--zx-primary-light); font-weight: 600; margin-right: 0.25rem; + user-select: none; + -webkit-user-select: none; } .hero-install .copy-button { @@ -1662,6 +1674,7 @@ a.hero-badge:hover { } .code-example .comment, +.install-code .comment, .feature-code-window .comment { font-style: italic; color: #7a9aa8; diff --git a/site/app/pages/components/install_guide.zx b/site/app/pages/components/install_guide.zx index d4f056f9..2bc217c2 100644 --- a/site/app/pages/components/install_guide.zx +++ b/site/app/pages/components/install_guide.zx @@ -1,33 +1,67 @@ -pub fn InstallCLI(allocator: zx.Allocator) zx.Component { +pub fn InstallCLI(allocator: zx.Allocator, props: struct { show_init: bool = false }) zx.Component { return (
+ {if (props.show_init) ()}
+ + {if (props.show_init) ()}
- $ + curl -fsSL {zx.info.homepage}/install | bash
+ {if (props.show_init) ( +
+ + zx + init +
+ )}
- {"> "} + powershell -c "irm {zx.info.homepage["https://".len..]}/install.ps1 | iex"
+ {if (props.show_init) ( +
+ + zx + init +
+ )}
+ {if (props.show_init) ( +
+
+ + npm + init + ziex + +
+
+ + bun + create + ziex +
+
+ )}
); diff --git a/site/app/pages/page.zx b/site/app/pages/page.zx index 2811964d..2fd64a90 100644 --- a/site/app/pages/page.zx +++ b/site/app/pages/page.zx @@ -430,7 +430,7 @@ pub fn Page(ctx: zx.PageContext) zx.Component { Compile-time safety, deterministic performance, absolute simplicity, and a delightful developer experience.

- +
Get Started