Install scene: fix cmd-bar overlap, swap install command

The "CLICK TO COPY" hint was absolute-positioned at top:10/right:14 of the cmd-box, landing on top of "~/facere — bash" in the bar header. Move the hint into the bar as a flex sibling so the title and hint share the row cleanly without overlap. Replace the placeholder install command with the real installer pulled from raw.githubusercontent.com, with FACERE_GH_TOKEN as a "contact us for demo" placeholder. Also fix deploy/build.sh: `npm init -y` rejects the leading-dot dir name `.build`, and the preset must be resolved by absolute path since babel runs from the repo root.
2026-05-08 00:45:21 +08:00
parent d0e6322f9e
commit ea85a01edf
5 changed files with 33 additions and 29 deletions
--- a/app.js
+++ b/app.js
@@ -466,7 +466,7 @@ function InstallSection({
  contentRef
 }) {
  const [copied, setCopied] = useState(false);
-  const cmd = "curl -fsSL https://facere.ai/install.sh | sh";
+  const cmd = `curl -fsSL https://raw.githubusercontent.com/ZhaoYiping789/facere-installer/main/bootstrap.sh | FACERE_GH_TOKEN="contact us for demo"`;
  const copy = async () => {
    try {
      await navigator.clipboard.writeText(cmd);
@@ -515,7 +515,9 @@ function InstallSection({
    className: "cmd-led led-cyan"
  }), /*#__PURE__*/React.createElement("span", {
    className: "cmd-title"
-  }, "~/facere \u2014 bash")), /*#__PURE__*/React.createElement("div", {
+  }, "~/facere \u2014 bash"), /*#__PURE__*/React.createElement("span", {
+    className: "cmd-bar-hint"
+  }, copied ? "✓ COPIED" : "CLICK TO COPY")), /*#__PURE__*/React.createElement("div", {
    className: "cmd-body"
  }, /*#__PURE__*/React.createElement("span", {
    className: "cmd-prompt"
@@ -523,9 +525,7 @@ function InstallSection({
    className: "cmd-text"
  }, cmd), /*#__PURE__*/React.createElement("span", {
    className: "cmd-cursor"
-  })), /*#__PURE__*/React.createElement("div", {
-    className: "cmd-hint"
-  }, copied ? "✓ COPIED" : "CLICK TO COPY")), /*#__PURE__*/React.createElement("a", {
+  }))), /*#__PURE__*/React.createElement("a", {
    className: "docs-link",
    href: "#",
    onClick: e => e.preventDefault()
--- a/app.jsx
+++ b/app.jsx
@@ -434,7 +434,7 @@ function ProductSection({ bgRef, contentRef }) {
 /* ───────────────── InstallSection ───────────────── */
 function InstallSection({ bgRef, contentRef }) {
  const [copied, setCopied] = useState(false);
-  const cmd = "curl -fsSL https://facere.ai/install.sh | sh";
+  const cmd = `curl -fsSL https://raw.githubusercontent.com/ZhaoYiping789/facere-installer/main/bootstrap.sh | FACERE_GH_TOKEN="contact us for demo"`;

  const copy = async () => {
    try {
@@ -475,15 +475,15 @@ function InstallSection({ bgRef, contentRef }) {
            <span className="cmd-led led-amber" />
            <span className="cmd-led led-cyan" />
            <span className="cmd-title">~/facere — bash</span>
+            <span className="cmd-bar-hint">
+              {copied ? "✓ COPIED" : "CLICK TO COPY"}
+            </span>
          </div>
          <div className="cmd-body">
            <span className="cmd-prompt">$</span>
            <span className="cmd-text">{cmd}</span>
            <span className="cmd-cursor" />
          </div>
-          <div className="cmd-hint">
-            {copied ? "✓ COPIED" : "CLICK TO COPY"}
-          </div>
        </div>

        <a className="docs-link" href="#" onClick={(e) => e.preventDefault()}>
--- a/deploy/build.sh
+++ b/deploy/build.sh
@@ -15,13 +15,20 @@ BUILD_DIR=".build"
 mkdir -p "$BUILD_DIR"

 if [ ! -f "$BUILD_DIR/package.json" ]; then
-  ( cd "$BUILD_DIR" && npm init -y >/dev/null \
-      && npm install --silent --no-audit --no-fund \
-         @babel/core@7 @babel/cli@7 @babel/preset-react@7 )
+  # Write package.json directly — `npm init -y` rejects the leading-dot dir name.
+  cat > "$BUILD_DIR/package.json" <<'EOF'
+{ "name": "facere-build", "version": "1.0.0", "private": true }
+EOF
+fi
+if [ ! -d "$BUILD_DIR/node_modules/@babel/preset-react" ]; then
+  ( cd "$BUILD_DIR" && npm install --silent --no-audit --no-fund \
+       @babel/core@7 @babel/cli@7 @babel/preset-react@7 )
 fi

+# Resolve the preset by absolute path: babel CLI runs from the repo root and
+# wouldn't find it via the bare name (preset lives in .build/node_modules).
 "$BUILD_DIR/node_modules/.bin/babel" app.jsx \
-  --presets=@babel/preset-react \
+  --presets="$ROOT/$BUILD_DIR/node_modules/@babel/preset-react" \
  -o app.js

 echo "Built app.js ($(wc -c < app.js) bytes)"
--- a/facere.html
+++ b/facere.html
@@ -13,14 +13,14 @@

 <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@300;400;500;600&family=VT323&display=swap" rel="stylesheet" />

-<link rel="stylesheet" href="styles.css?v=20260503-perf" />
+<link rel="stylesheet" href="styles.css?v=20260508-cmd" />

 <!-- Preload critical scripts so they fetch in parallel with the CSS -->
 <link rel="preload" as="script" href="https://unpkg.com/react@18.3.1/umd/react.production.min.js" crossorigin />
 <link rel="preload" as="script" href="https://unpkg.com/react-dom@18.3.1/umd/react-dom.production.min.js" crossorigin />
 <link rel="preload" as="script" href="https://unpkg.com/gsap@3.12.5/dist/gsap.min.js" crossorigin />
 <link rel="preload" as="script" href="https://unpkg.com/gsap@3.12.5/dist/ScrollTrigger.min.js" crossorigin />
-<link rel="preload" as="script" href="app.js?v=20260503-perf" />
+<link rel="preload" as="script" href="app.js?v=20260508-cmd" />

 <!-- Preload background images. Mobile gets the smaller variant via media= -->
 <link rel="preload" as="image" href="assets/exterior-factory.webp" media="(min-width: 761px)" fetchpriority="high" />
@@ -42,6 +42,6 @@
 <script src="https://unpkg.com/gsap@3.12.5/dist/ScrollTrigger.min.js" defer></script>

 <!-- Pre-compiled from app.jsx (see deploy/build.sh). No babel-standalone in browser. -->
-<script src="app.js?v=20260503-perf" defer></script>
+<script src="app.js?v=20260508-cmd" defer></script>
 </body>
 </html>
--- a/styles.css
+++ b/styles.css
@@ -758,7 +758,15 @@ a { color: inherit; text-decoration: none; }
 }
 .cmd-led.led-amber { background: rgba(255, 138, 31, 0.4); border-color: rgba(255, 138, 31, 0.5); }
 .cmd-led.led-cyan  { background: rgba(33, 234, 255, 0.4); border-color: rgba(33, 234, 255, 0.5); }
-.cmd-title { margin-left: auto; font-size: 10px; }
+.cmd-title { font-size: 11px; margin-left: 4px; opacity: 0.8; }
+.cmd-bar-hint {
+  margin-left: auto;
+  font-size: 11px;
+  letter-spacing: 0.24em;
+  color: var(--cyan-muted);
+  transition: color 0.2s ease;
+}
+.cmd-box.copied .cmd-bar-hint { color: var(--cyan); }

 .cmd-body {
  display: flex;
@@ -783,17 +791,6 @@ a { color: inherit; text-decoration: none; }
  0%, 50%   { opacity: 1; }
  51%, 100% { opacity: 0; }
 }
-.cmd-hint {
-  position: absolute;
-  top: 10px;
-  right: 14px;
-  font-size: 10px;
-  letter-spacing: 0.24em;
-  color: var(--cyan-muted);
-  pointer-events: none;
-  transition: color 0.2s ease;
-}
-.cmd-box.copied .cmd-hint { color: var(--cyan); }
 .cmd-box.copied { border-color: rgba(33, 234, 255, 0.55); }

 .docs-link {
@@ -981,6 +978,7 @@ a { color: inherit; text-decoration: none; }
  .cmd-box { font-size: 14px; max-width: 100%; }
  .cmd-bar { padding: 7px 10px; font-size: 10px; letter-spacing: 0.14em; }
  .cmd-title { display: none; }
+  .cmd-bar-hint { font-size: 9px; letter-spacing: 0.18em; }
  .cmd-body {
    font-size: 13px;
    padding: 14px 12px 16px;
@@ -989,7 +987,6 @@ a { color: inherit; text-decoration: none; }
    word-break: break-all;
    overflow-x: visible;
  }
-  .cmd-hint { display: none; }

  .docs-link { font-size: 13px; letter-spacing: 0.14em; }