From 2ee70fa0867a8ce207079321e6e35f8a355b61b7 Mon Sep 17 00:00:00 2001 From: ywenhao Date: Fri, 7 Aug 2026 11:33:36 +0800 Subject: [PATCH] Fix homepage Counter examples for Vue Vapor and Octane Show Vue SFC with script setup and template for Vue Vapor, and TSRX @{ } syntax for Octane. Update the code card filename when switching framework tabs. Closes #244 Co-authored-by: Cursor --- site/assets/home.js | 18 ++++++++++++++++ site/home.html | 50 ++++++++++++++++++++++++++------------------- 2 files changed, 47 insertions(+), 21 deletions(-) diff --git a/site/assets/home.js b/site/assets/home.js index 29a26786..bc605f62 100644 --- a/site/assets/home.js +++ b/site/assets/home.js @@ -26,6 +26,23 @@ function setupTabs(tabAttr, panelAttr) { // Pause the wall when it can't be seen (scrolled away) or shouldn't move // (prefers-reduced-motion — the CSS also hides it there). +function setupCodeCardName() { + const nameEl = document.getElementById("lp-codecard-name"); + if (!nameEl) return; + const names = { + solid: "Counter.tsx", + vue: "Counter.vue", + octane: "Counter.tsrx", + }; + const tabs = [...document.querySelectorAll("[data-code-tab]")]; + for (const tab of tabs) { + tab.addEventListener("click", () => { + const key = tab.dataset.codeTab; + if (key && names[key]) nameEl.textContent = names[key]; + }); + } +} + function setupDemoWall() { const video = document.querySelector(".lp-hero__wall-video"); if (!video) return; @@ -75,6 +92,7 @@ function setupPocketStage() { } setupTabs("code-tab", "code-panel"); +setupCodeCardName(); setupTabs("tgt-tab", "tgt-panel"); setupDemoWall(); setupPocketStage(); diff --git a/site/home.html b/site/home.html index 2a339f25..2dda8b30 100644 --- a/site/home.html +++ b/site/home.html @@ -176,7 +176,7 @@

Write the app you already know how to write.

- Counter.tsx + Counter.tsx
@@ -197,34 +197,42 @@

Write the app you already know how to write.

</View> ); } - + </View> +}