Skip to content

Fix homepage Counter examples for Vue Vapor and Octane #245

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

Open
ywenhao wants to merge 1 commit into
base: main
Choose a base branch
from
+47 −21
Open

Fix homepage Counter examples for Vue Vapor and Octane #245

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
18 changes: 18 additions & 0 deletions site/assets/home.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -75,6 +92,7 @@ function setupPocketStage() {
}

setupTabs("code-tab", "code-panel");
setupCodeCardName();
setupTabs("tgt-tab", "tgt-panel");
setupDemoWall();
setupPocketStage();
50 changes: 29 additions & 21 deletions site/home.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -176,7 +176,7 @@ <h2 class="lp-h2">Write the app you already know how to write.</h2>
<div class="lp-codecard">
<div class="lp-codecard__bar">
<span class="lp-dot" aria-hidden="true"></span><span class="lp-dot" aria-hidden="true"></span><span class="lp-dot" aria-hidden="true"></span>
<span class="lp-codecard__name">Counter.tsx</span>
<span class="lp-codecard__name" id="lp-codecard-name">Counter.tsx</span>
<div class="lp-code-tabs" role="tablist" aria-label="Counter framework">
<button class="lp-code-tab is-active" type="button" role="tab" id="lp-code-tab-solid" aria-selected="true" aria-controls="lp-code-solid" data-code-tab="solid">Solid</button>
<button class="lp-code-tab" type="button" role="tab" id="lp-code-tab-vue" aria-selected="false" aria-controls="lp-code-vue" data-code-tab="vue">Vue Vapor</button>
Expand All @@ -197,34 +197,42 @@ <h2 class="lp-h2">Write the app you already know how to write.</h2>
<span class="lp-code-mut">&lt;/</span><span class="lp-t">View</span><span class="lp-code-mut">&gt;</span>
);
}</code></pre>
<pre class="lp-code" id="lp-code-vue" role="tabpanel" aria-labelledby="lp-code-tab-vue" data-code-panel="vue" hidden><code><span class="lp-k">import</span> { <span class="lp-t">Text</span>, <span class="lp-t">View</span> } <span class="lp-k">from</span> <span class="lp-s">"@pocketjs/framework/vue-vapor/components"</span>;
<pre class="lp-code" id="lp-code-vue" role="tabpanel" aria-labelledby="lp-code-tab-vue" data-code-panel="vue" hidden><code><span class="lp-k">&lt;script setup lang="ts"&gt;</span>
<span class="lp-k">import</span> { <span class="lp-f">ref</span> } <span class="lp-k">from</span> <span class="lp-s">"vue"</span>;
<span class="lp-k">import</span> { <span class="lp-t">Text</span>, <span class="lp-t">View</span> } <span class="lp-k">from</span> <span class="lp-s">"@pocketjs/framework/vue-vapor/components"</span>;

<span class="lp-k">export</span> <span class="lp-k">default</span> <span class="lp-k">function</span> <span class="lp-t">Counter</span>() {
<span class="lp-k">const</span> n = <span class="lp-f">ref</span>(<span class="lp-n">0</span>);
<span class="lp-k">return</span> (
<span class="lp-code-mut">&lt;</span><span class="lp-t">View</span> <span class="lp-a">class</span>=<span class="lp-s">"flex-col items-center gap-4 p-6 bg-slate-950"</span><span class="lp-code-mut">&gt;</span>
<span class="lp-code-mut">&lt;</span><span class="lp-t">Text</span> <span class="lp-a">class</span>=<span class="lp-s">"text-2xl text-slate-50 font-bold"</span><span class="lp-code-mut">&gt;</span>Count: {n.value}<span class="lp-code-mut">&lt;/</span><span class="lp-t">Text</span><span class="lp-code-mut">&gt;</span>
<span class="lp-code-mut">&lt;</span><span class="lp-t">View</span> <span class="lp-a">class</span>=<span class="lp-s">"px-4 py-2 rounded-xl bg-slate-700 focus:bg-slate-500"</span> <span class="lp-a">focusable</span> <span class="lp-a">onPress</span>={() =&gt; n.value++}<span class="lp-code-mut">&gt;</span>
<span class="lp-code-mut">&lt;</span><span class="lp-t">Text</span> <span class="lp-a">class</span>=<span class="lp-s">"text-base text-slate-50 font-bold"</span><span class="lp-code-mut">&gt;</span>Press Circle<span class="lp-code-mut">&lt;/</span><span class="lp-t">Text</span><span class="lp-code-mut">&gt;</span>
<span class="lp-code-mut">&lt;/</span><span class="lp-t">View</span><span class="lp-code-mut">&gt;</span>
<span class="lp-k">const</span> n = <span class="lp-f">ref</span>(<span class="lp-n">0</span>);
<span class="lp-k">&lt;/script&gt;</span>

<span class="lp-k">&lt;template&gt;</span>
<span class="lp-code-mut">&lt;</span><span class="lp-t">View</span> <span class="lp-a">class</span>=<span class="lp-s">"flex-col items-center gap-4 p-6 bg-slate-950"</span><span class="lp-code-mut">&gt;</span>
<span class="lp-code-mut">&lt;</span><span class="lp-t">Text</span> <span class="lp-a">class</span>=<span class="lp-s">"text-2xl text-slate-50 font-bold"</span><span class="lp-code-mut">&gt;</span>Count: {{ n }}<span class="lp-code-mut">&lt;/</span><span class="lp-t">Text</span><span class="lp-code-mut">&gt;</span>
<span class="lp-code-mut">&lt;</span><span class="lp-t">View</span>
<span class="lp-a">class</span>=<span class="lp-s">"px-4 py-2 rounded-xl bg-slate-700 focus:bg-slate-500"</span>
<span class="lp-a">focusable</span>
<span class="lp-a">@press</span>=<span class="lp-s">"n++"</span>
<span class="lp-code-mut">&gt;</span>
<span class="lp-code-mut">&lt;</span><span class="lp-t">Text</span> <span class="lp-a">class</span>=<span class="lp-s">"text-base text-slate-50 font-bold"</span><span class="lp-code-mut">&gt;</span>Press Circle<span class="lp-code-mut">&lt;/</span><span class="lp-t">Text</span><span class="lp-code-mut">&gt;</span>
<span class="lp-code-mut">&lt;/</span><span class="lp-t">View</span><span class="lp-code-mut">&gt;</span>
);
}</code></pre>
<span class="lp-code-mut">&lt;/</span><span class="lp-t">View</span><span class="lp-code-mut">&gt;</span>
<span class="lp-k">&lt;/template&gt;</span></code></pre>
<pre class="lp-code" id="lp-code-octane" role="tabpanel" aria-labelledby="lp-code-tab-octane" data-code-panel="octane" hidden><code><span class="lp-k">import</span> { <span class="lp-t">Text</span>, <span class="lp-t">View</span> } <span class="lp-k">from</span> <span class="lp-s">"@pocketjs/framework/octane/components"</span>;
<span class="lp-k">import</span> { <span class="lp-f">useState</span> } <span class="lp-k">from</span> <span class="lp-s">"octane"</span>;

<span class="lp-k">export</span> <span class="lp-k">default</span> <span class="lp-k">function</span> <span class="lp-t">Counter</span>() {
<span class="lp-k">export</span> <span class="lp-k">function</span> <span class="lp-t">Counter</span>() <span class="lp-k">@{</span>
<span class="lp-k">const</span> [n, setN] = <span class="lp-f">useState</span>(<span class="lp-n">0</span>);
<span class="lp-k">return</span> (
<span class="lp-code-mut">&lt;</span><span class="lp-t">View</span> <span class="lp-a">class</span>=<span class="lp-s">"flex-col items-center gap-4 p-6 bg-slate-950"</span><span class="lp-code-mut">&gt;</span>
<span class="lp-code-mut">&lt;</span><span class="lp-t">Text</span> <span class="lp-a">class</span>=<span class="lp-s">"text-2xl text-slate-50 font-bold"</span><span class="lp-code-mut">&gt;</span>{<span class="lp-s">`Count: ${</span>n<span class="lp-s">}`</span>}<span class="lp-code-mut">&lt;/</span><span class="lp-t">Text</span><span class="lp-code-mut">&gt;</span>
<span class="lp-code-mut">&lt;</span><span class="lp-t">View</span> <span class="lp-a">class</span>=<span class="lp-s">"px-4 py-2 rounded-xl bg-slate-700 focus:bg-slate-500"</span> <span class="lp-a">focusable</span> <span class="lp-a">onPress</span>={() =&gt; <span class="lp-f">setN</span>(n + <span class="lp-n">1</span>)}<span class="lp-code-mut">&gt;</span>
<span class="lp-code-mut">&lt;</span><span class="lp-t">Text</span> <span class="lp-a">class</span>=<span class="lp-s">"text-base text-slate-50 font-bold"</span><span class="lp-code-mut">&gt;</span>Press Circle<span class="lp-code-mut">&lt;/</span><span class="lp-t">Text</span><span class="lp-code-mut">&gt;</span>
<span class="lp-code-mut">&lt;/</span><span class="lp-t">View</span><span class="lp-code-mut">&gt;</span>

<span class="lp-code-mut">&lt;</span><span class="lp-t">View</span> <span class="lp-a">class</span>=<span class="lp-s">"flex-col items-center gap-4 p-6 bg-slate-950"</span><span class="lp-code-mut">&gt;</span>
<span class="lp-code-mut">&lt;</span><span class="lp-t">Text</span> <span class="lp-a">class</span>=<span class="lp-s">"text-2xl text-slate-50 font-bold"</span><span class="lp-code-mut">&gt;</span>{<span class="lp-s">`Count: ${</span>n<span class="lp-s">}`</span>}<span class="lp-code-mut">&lt;/</span><span class="lp-t">Text</span><span class="lp-code-mut">&gt;</span>
<span class="lp-code-mut">&lt;</span><span class="lp-t">View</span>
<span class="lp-a">class</span>=<span class="lp-s">"px-4 py-2 rounded-xl bg-slate-700 focus:bg-slate-500"</span>
<span class="lp-a">focusable</span>
<span class="lp-a">onPress</span>={() =&gt; <span class="lp-f">setN</span>(n + <span class="lp-n">1</span>)}
<span class="lp-code-mut">&gt;</span>
<span class="lp-code-mut">&lt;</span><span class="lp-t">Text</span> <span class="lp-a">class</span>=<span class="lp-s">"text-base text-slate-50 font-bold"</span><span class="lp-code-mut">&gt;</span>Press Circle<span class="lp-code-mut">&lt;/</span><span class="lp-t">Text</span><span class="lp-code-mut">&gt;</span>
<span class="lp-code-mut">&lt;/</span><span class="lp-t">View</span><span class="lp-code-mut">&gt;</span>
);
}</code></pre>
<span class="lp-code-mut">&lt;/</span><span class="lp-t">View</span><span class="lp-code-mut">&gt;</span>
<span class="lp-k">}</span></code></pre>
</div>

<div class="lp-tgt" data-tgt>
Expand Down