Skip to content

Commit 7a7dcbd

Browse files
marcorothmarcoroth
committed
Playground: Implement a Ruby Prism plaground
1 parent 2402c95 commit 7a7dcbd

File tree

11 files changed

+572
-95
lines changed

11 files changed

+572
-95
lines changed

‎docs/.gitignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,4 +2,5 @@ dist/
22
cache/
33
docs/public/assets
44
docs/public/playground-embed.html
5+
docs/public/playground-prism-embed.html
56
.vitepress/data/contributors.json

‎docs/.vitepress/config/theme.mts‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -134,7 +134,13 @@ export function createThemeConfig() {
134134
{ text: "Home", link: "/" },
135135
{ text: "Blog", link: "/blog/whats-new-in-herb-v0-8" },
136136
{ text: "Documentation", link: "/overview" },
137-
{ text: "Playground", link: "/playground" },
137+
{
138+
text: "Playground",
139+
items: [
140+
{ text: "Herb Playground", link: "/playground/" },
141+
{ text: "Prism Playground", link: "/playground/prism" },
142+
],
143+
},
138144
],
139145
outline: [2, 4],
140146
search: {

docs/docs/playground.md renamed to docs/docs/playground/index.md

File renamed without changes.

‎docs/docs/playground/prism.md‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
---
2+
title: Prism Playground
3+
layout: page
4+
sidebar: false
5+
footer: false
6+
---
7+
8+
<iframe src="/playground-prism-embed.html" style="width: 100%; height: calc(100vh - var(--vp-nav-height)); border: 0px;"></iframe>

‎docs/package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,9 +13,9 @@
1313
"dev": "vitepress dev",
1414
"build": "yarn vendor:playground && yarn vendor:c-reference && yarn fetch:contributors && vitepress build",
1515
"vendor:c-reference": "cd .. && doxygen Doxyfile",
16-
"vendor:playground": "cd ../playground && yarn build && cd - && cp ../playground/dist/index.html ./docs/public/playground-embed.html && cp -R ../playground/dist/assets ./docs/public",
16+
"vendor:playground": "cd ../playground && yarn build && cd - && cp ../playground/dist/index.html ./docs/public/playground-embed.html && cp ../playground/dist/prism/index.html ./docs/public/playground-prism-embed.html && cp -R ../playground/dist/assets ./docs/public",
1717
"preview": "vitepress preview",
18-
"clean": "rimraf .vitepress/dist/ && rimraf .vitepress/cache/ && rimraf ./.vitepress/data/contributors.json && rimraf ./docs/public/assets && rimraf ./docs/public/playground-embed.html&& rimraf ./docs/public/c-reference",
18+
"clean": "rimraf .vitepress/dist/ && rimraf .vitepress/cache/ && rimraf ./.vitepress/data/contributors.json && rimraf ./docs/public/assets && rimraf ./docs/public/playground-embed.html && rimraf ./docs/public/playground-prism-embed.html && rimraf ./docs/public/c-reference",
1919
"fetch:contributors": "mkdir -p .vitepress/data/ && gh api -X get https://api.github.com/repos/marcoroth/herb/contributors > .vitepress/data/contributors.json"
2020
},
2121
"dependencies": {

‎playground/index.html‎

Lines changed: 93 additions & 79 deletions
Original file line numberDiff line numberDiff line change
@@ -44,6 +44,11 @@
4444

4545
<div class="hidden lg:flex lg:flex-1 lg:justify-end">
4646
<div class="flex flex-row-reserve space-x-4 py-0 items-center">
47+
<a
48+
href="/prism/"
49+
class="text-sm text-gray-500 dark:text-gray-400 hover:text-gray-600 dark:hover:text-gray-300"
50+
>Prism Playground &rarr;</a
51+
>
4752
<a
4853
href="https://docs.herb-tools.dev"
4954
class="text-sm text-gray-500 dark:text-gray-400 hover:text-gray-600 dark:hover:text-gray-300"
@@ -65,85 +70,17 @@
6570
<div class="mx-2 grid grid-cols-1 md:grid-cols-2 gap-4">
6671
<div class="mt-6">
6772
<div class="flex flex-wrap lg:flex-nowrap items-center gap-2 lg:gap-4 mb-2">
68-
<div class="text-gray-900 dark:text-gray-100 rounded-md py-1.5 text-sm font-medium">
69-
HTML+ERB File
70-
</div>
71-
72-
<div
73-
class="flex flex-wrap items-center gap-3 text-sm"
74-
data-playground-target="parserOptions"
75-
>
76-
<label class="flex items-center gap-2 text-gray-700 dark:text-gray-300" title="Include whitespace-only text nodes in the AST">
77-
<input
78-
type="checkbox"
79-
data-option="track_whitespace"
80-
data-action="change->playground#onOptionChange"
81-
class="rounded border-gray-300 dark:border-gray-600 text-green-600 focus:ring-green-500 dark:focus:ring-green-400"
82-
/>
83-
<span class="select-none">Track whitespace</span>
84-
</label>
85-
86-
<label class="flex items-center gap-2 text-gray-700 dark:text-gray-300" title="Enable strict HTML parsing mode with additional validation">
87-
<input
88-
type="checkbox"
89-
data-option="strict"
90-
data-action="change->playground#onOptionChange"
91-
class="rounded border-gray-300 dark:border-gray-600 text-green-600 focus:ring-green-500 dark:focus:ring-green-400"
92-
checked
93-
/>
94-
<span class="select-none">Strict</span>
95-
</label>
96-
97-
<label class="flex items-center gap-2 text-gray-700 dark:text-gray-300" title="Run analysis passes on the parse tree (error detection, tag matching)">
98-
<input
99-
type="checkbox"
100-
data-option="analyze"
101-
data-action="change->playground#onOptionChange"
102-
class="rounded border-gray-300 dark:border-gray-600 text-green-600 focus:ring-green-500 dark:focus:ring-green-400"
103-
checked
104-
/>
105-
<span class="select-none">Analyze</span>
106-
</label>
107-
108-
<label class="flex items-center gap-2 text-gray-700 dark:text-gray-300" title="Transform Action View tag helpers (tag, content_tag, link_to)">
109-
<input
110-
type="checkbox"
111-
data-option="action_view_helpers"
112-
data-action="change->playground#onOptionChange"
113-
class="rounded border-gray-300 dark:border-gray-600 text-green-600 focus:ring-green-500 dark:focus:ring-green-400"
114-
/>
115-
<span class="select-none">Action View helpers</span>
116-
</label>
117-
118-
<label class="flex items-center gap-2 text-gray-700 dark:text-gray-300" title="Serialize the full Prism ProgramNode for the entire extracted Ruby on the DocumentNode">
119-
<input
120-
type="checkbox"
121-
data-option="prism_program"
122-
data-action="change->playground#onOptionChange"
123-
class="rounded border-gray-300 dark:border-gray-600 text-green-600 focus:ring-green-500 dark:focus:ring-green-400"
124-
/>
125-
<span class="select-none">Prism program</span>
126-
</label>
127-
128-
<label class="flex items-center gap-2 text-gray-700 dark:text-gray-300" title="Attach Prism AST subtrees to each ERB node for its Ruby content">
129-
<input
130-
type="checkbox"
131-
data-option="prism_nodes"
132-
data-action="change->playground#onOptionChange change->playground#onPrismNodesChange"
133-
class="rounded border-gray-300 dark:border-gray-600 text-green-600 focus:ring-green-500 dark:focus:ring-green-400"
134-
/>
135-
<span class="select-none">Prism nodes</span>
136-
</label>
137-
138-
<label data-playground-target="prismNodesDeepLabel" class="hidden flex items-center gap-2 text-gray-700 dark:text-gray-300" title="Include nested body content in control-flow Prism nodes (e.g. if/else body statements)">
139-
<input
140-
type="checkbox"
141-
data-option="prism_nodes_deep"
142-
data-action="change->playground#onOptionChange"
143-
class="rounded border-gray-300 dark:border-gray-600 text-green-600 focus:ring-green-500 dark:focus:ring-green-400"
144-
/>
145-
<span class="select-none">Prism nodes (deep)</span>
146-
</label>
73+
<div class="flex items-center gap-0">
74+
<a
75+
data-playground-target="switchLink"
76+
href="/"
77+
class="rounded-l-md border border-green-600 bg-green-600 text-white px-3 py-1 text-sm font-medium"
78+
>HTML+ERB (Herb)</a>
79+
<a
80+
data-playground-target="switchLink"
81+
href="/prism/"
82+
class="rounded-r-md border border-gray-300 dark:border-gray-600 text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 px-3 py-1 text-sm font-medium"
83+
>Ruby (Prism)</a>
14784
</div>
14885

14986
<div class="hidden lg:flex items-center gap-4 font-mono whitespace-break-spaces text-gray-400 dark:text-gray-500 text-[8pt] lg:ml-auto">
@@ -166,6 +103,83 @@
166103
</div>
167104
</div>
168105

106+
<div
107+
class="flex flex-wrap items-center gap-3 text-sm mb-2"
108+
data-playground-target="parserOptions"
109+
>
110+
<label class="flex items-center gap-2 text-gray-700 dark:text-gray-300" title="Include whitespace-only text nodes in the AST">
111+
<input
112+
type="checkbox"
113+
data-option="track_whitespace"
114+
data-action="change->playground#onOptionChange"
115+
class="rounded border-gray-300 dark:border-gray-600 text-green-600 focus:ring-green-500 dark:focus:ring-green-400"
116+
/>
117+
<span class="select-none">Track whitespace</span>
118+
</label>
119+
120+
<label class="flex items-center gap-2 text-gray-700 dark:text-gray-300" title="Enable strict HTML parsing mode with additional validation">
121+
<input
122+
type="checkbox"
123+
data-option="strict"
124+
data-action="change->playground#onOptionChange"
125+
class="rounded border-gray-300 dark:border-gray-600 text-green-600 focus:ring-green-500 dark:focus:ring-green-400"
126+
checked
127+
/>
128+
<span class="select-none">Strict</span>
129+
</label>
130+
131+
<label class="flex items-center gap-2 text-gray-700 dark:text-gray-300" title="Run analysis passes on the parse tree (error detection, tag matching)">
132+
<input
133+
type="checkbox"
134+
data-option="analyze"
135+
data-action="change->playground#onOptionChange"
136+
class="rounded border-gray-300 dark:border-gray-600 text-green-600 focus:ring-green-500 dark:focus:ring-green-400"
137+
checked
138+
/>
139+
<span class="select-none">Analyze</span>
140+
</label>
141+
142+
<label class="flex items-center gap-2 text-gray-700 dark:text-gray-300" title="Transform Action View tag helpers (tag, content_tag, link_to)">
143+
<input
144+
type="checkbox"
145+
data-option="action_view_helpers"
146+
data-action="change->playground#onOptionChange"
147+
class="rounded border-gray-300 dark:border-gray-600 text-green-600 focus:ring-green-500 dark:focus:ring-green-400"
148+
/>
149+
<span class="select-none">Action View helpers</span>
150+
</label>
151+
152+
<label class="flex items-center gap-2 text-gray-700 dark:text-gray-300" title="Serialize the full Prism ProgramNode for the entire extracted Ruby on the DocumentNode">
153+
<input
154+
type="checkbox"
155+
data-option="prism_program"
156+
data-action="change->playground#onOptionChange"
157+
class="rounded border-gray-300 dark:border-gray-600 text-green-600 focus:ring-green-500 dark:focus:ring-green-400"
158+
/>
159+
<span class="select-none">Prism program</span>
160+
</label>
161+
162+
<label class="flex items-center gap-2 text-gray-700 dark:text-gray-300" title="Attach Prism AST subtrees to each ERB node for its Ruby content">
163+
<input
164+
type="checkbox"
165+
data-option="prism_nodes"
166+
data-action="change->playground#onOptionChange change->playground#onPrismNodesChange"
167+
class="rounded border-gray-300 dark:border-gray-600 text-green-600 focus:ring-green-500 dark:focus:ring-green-400"
168+
/>
169+
<span class="select-none">Prism nodes</span>
170+
</label>
171+
172+
<label data-playground-target="prismNodesDeepLabel" class="hidden flex items-center gap-2 text-gray-700 dark:text-gray-300" title="Include nested body content in control-flow Prism nodes (e.g. if/else body statements)">
173+
<input
174+
type="checkbox"
175+
data-option="prism_nodes_deep"
176+
data-action="change->playground#onOptionChange"
177+
class="rounded border-gray-300 dark:border-gray-600 text-green-600 focus:ring-green-500 dark:focus:ring-green-400"
178+
/>
179+
<span class="select-none">Prism nodes (deep)</span>
180+
</label>
181+
</div>
182+
169183
<div class="flex flex-wrap gap-2 mb-2">
170184
<div class="relative">
171185
<button

0 commit comments

Comments
 (0)