fernando/thp-lang.org
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add alpine for client side interactivity

Browse Source
This commit is contained in:
Araozu 2024-05-19 20:53:29 -05:00
parent 6c898b0d01
commit 43cc334417
3 changed files with 46 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
src/components/InteractiveCode.astro
View File

@ -77,8 +77,10 @@ function highlightCode(lines: Array<string>): string {
for (const line of lines) { for (const line of lines) {
const tokens = lex(line); const tokens = lex(line);
const lineArray = []; const lineArray = [
"<div class=\"inline-block w-full\" :class=\"line === 0? '': 'bg-red-400'\">"
];
for (const token of tokens) { for (const token of tokens) {
if (token.token_type !== "") { if (token.token_type !== "") {
lineArray.push(`<span class="token ${token.token_type}">${token.v}</span>`); lineArray.push(`<span class="token ${token.token_type}">${token.v}</span>`);
@ -86,6 +88,7 @@ function highlightCode(lines: Array<string>): string {
lineArray.push(token.v); lineArray.push(token.v);
} }
} }
lineArray.push("</div>");
outLines.push(lineArray.join("")); outLines.push(lineArray.join(""));
} }
@ -96,7 +99,7 @@ function highlightCode(lines: Array<string>): string {
const codeHtml = highlightCode(trimAndDedent(code)); const codeHtml = highlightCode(trimAndDedent(code));
--- ---
<div class="bg-black rounded"> <div class="bg-black rounded" x-data="editor">
<span class="inline-block bg-[var(--code-theme-bg-acolor)] px-2 rounded-tl rounded-tr font-mono text-sm">thp code</span> <span class="inline-block bg-[var(--code-theme-bg-acolor)] px-2 rounded-tl rounded-tr font-mono text-sm">thp code</span>
<pre class="language-thp" style="margin: 0; border-top-left-radius: 0;" data-disabled><code set:html={codeHtml}></code></pre> <pre class="language-thp" style="margin: 0; border-top-left-radius: 0;" data-disabled><code set:html={codeHtml}></code></pre>
<div class="grid grid-cols-2 font-mono text-sm"> <div class="grid grid-cols-2 font-mono text-sm">
@ -115,4 +118,20 @@ const codeHtml = highlightCode(trimAndDedent(code));
</div> </div>
</div> </div>
</div> </div>
<div class="border-t border-white p-1">
<button class="font-mono px-1 rounded bg-pink-950" @click="line = 1">
Step
</button>
</div>
</div> </div>
<script>
document.addEventListener("alpine:init", () => {
// @ts-ignore
const Alpine: any = window.Alpine;
Alpine.data("editor", () => ({
line: 0,
}));
});
</script>

2
src/layouts/BaseLayout.astro
View File

@ -35,5 +35,7 @@ const { title } = Astro.props;
<body class="bg-c-bg text-c-text"> <body class="bg-c-bg text-c-text">
<slot /> <slot />
<script src="//unpkg.com/alpinejs" defer></script>
</body> </body>
</html> </html>

23
src/pages/learn/basics/hello-world.mdx
View File

@ -38,5 +38,26 @@ f(x, y)
f(x, y) f(x, y)
`} `}
attr="aa" steps={`
step {
line 1
}
step {
line 1
set x 322
}
step {
line 2
set y 322
}
step {
line 8
}
step {
line 4
push f
set x 322
set y 322
}
`}
></InteractiveCode> ></InteractiveCode>