ziex/ziex
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

docs: show init command in installaction guide

Browse source
This commit is contained in:
Nurul Huda (Apon) 2026-06-22 17:05:46 +06:00
parent 36a7e61ebc
commit aa02823746
No known key found for this signature in database
GPG key ID: 5D3F1DE2855A2F79
5 changed files with 55 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
site/app/assets/clipboard.js
View file

@ -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);

2
site/app/assets/docs.css
View file

@ -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 {

15
site/app/assets/home.css
View file

@ -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;

40
site/app/pages/components/install_guide.zx
View file

@ -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 (
<div class="install-box" @allocator={allocator}>
<div class="install-box-header">
<input type="radio" id="tab-unix" name="install-platform" class="install-tab-radio" checked="true" aria-label="Linux or macOS installation" />
<input type="radio" id="tab-windows" name="install-platform" class="install-tab-radio" aria-label="Windows installation" />
{if (props.show_init) (<input type="radio" id="tab-node" name="install-platform" class="install-tab-radio" aria-label="Node.js installation" />)}
<div class="install-tab-labels">
<label for="tab-unix" class="install-tab-label">Linux / macOS</label>
<label for="tab-windows" class="install-tab-label">Windows</label>
<span class="install-tab-separator" aria-hidden="true"></span>
{if (props.show_init) (<label for="tab-node" class="install-tab-label">Node.js</label>)}
</div>
</div>
<div class="install-box-content" translate="no">
<div class="install-tab-content" id="content-unix">
<div class="install-code">
<span class="install-prompt">$ </span>
<span class="install-prompt" aria-hidden="true">$ </span>
<span class="function">curl</span>
<span class="operator"> -fsSL </span>
<span class="string">{zx.info.homepage}/install</span>
<span class="operator"> | </span>
<span class="function">bash</span>
</div>
{if (props.show_init) (
<div class="install-code">
<span class="install-prompt" aria-hidden="true">$ </span>
<span class="function">zx</span>
<span class="operator"> init</span>
</div>
)}
</div>
<div class="install-tab-content" id="content-windows">
<div class="install-code">
<span class="install-prompt">{"> "}</span>
<span class="install-prompt" aria-hidden="true">{"> "}</span>
<span class="function">powershell</span>
<span class="operator"> -c </span>
<span class="string">"irm {zx.info.homepage["https://".len..]}/install.ps1 | iex"</span>
</div>
{if (props.show_init) (
<div class="install-code">
<span class="install-prompt" aria-hidden="true">{"> "}</span>
<span class="function">zx</span>
<span class="operator"> init</span>
</div>
)}
</div>
{if (props.show_init) (
<div class="install-tab-content" id="content-node">
<div class="install-code">
<span class="install-prompt" aria-hidden="true">$ </span>
<span class="function">npm</span>
<span class="operator"> init </span>
<span class="variable">ziex</span>
<span class="comment" aria-hidden="true" style="user-select: none; -webkit-user-select: none;"> #or </span>
</div>
<div class="install-code">
<span class="install-prompt" aria-hidden="true">$ </span>
<span class="function">bun</span>
<span class="operator"> create </span>
<span class="variable">ziex</span>
</div>
</div>
)}
</div>
</div>
);

2
site/app/pages/page.zx
View file

@ -430,7 +430,7 @@ pub fn Page(ctx: zx.PageContext) zx.Component {
Compile-time safety, deterministic performance, absolute simplicity, and a delightful developer experience.
</p>
<div class="hero-install">
<InstallCLI allocator={allocator} />
<InstallCLI allocator={allocator} show_init={true} />
</div>
<div class="hero-cta">
<a href="/learn" class="btn btn-primary">Get Started</a>