Skip to content

Commit 1da020e

Browse files
aaronlippoldaaronlippold
committed
feat: add interactive playground demo
- Add Nuxt playground application - Add comprehensive demo page with all transformations - Add debug mode toggle and stats display - Add examples for all pattern types - Configure playground with module Authored by: Aaron Lippold<lippold@gmail.com>
1 parent f00a86a commit 1da020e

File tree

8 files changed

+8145
-0
lines changed

8 files changed

+8145
-0
lines changed

‎playground/app.vue

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
<template>
2+
<div>
3+
<NuxtPage />
4+
</div>
5+
</template>

‎playground/nuxt.config.ts

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
export default defineNuxtConfig({
2+
modules: ['../src/module'],
3+
devtools: { enabled: true },
4+
smartscript: {
5+
// Module is enabled by default
6+
// You can customize options here for testing
7+
// positioning: {
8+
// trademark: {
9+
// body: '-0.6em',
10+
// headers: '-0.8em'
11+
// }
12+
// }
13+
},
14+
})

‎playground/package.json

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
{
2+
"private": true,
3+
"name": "my-module-playground",
4+
"type": "module",
5+
"scripts": {
6+
"dev": "nuxi dev",
7+
"build": "nuxi build",
8+
"generate": "nuxi generate"
9+
},
10+
"dependencies": {
11+
"nuxt": "^4.0.3"
12+
}
13+
}

‎playground/pages/index.vue

Lines changed: 176 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,176 @@
1+
<template>
2+
<div class="container">
3+
<h1>Nuxt SmartScript™ Demo</h1>
4+
5+
<section>
6+
<h2>Debug Info</h2>
7+
<p>Plugin status: {{ $smartscript ? 'Loaded' : 'Not loaded' }}</p>
8+
<p>Debug mode: {{ debugMode ? 'ON' : 'OFF' }}</p>
9+
<button @click="toggleDebug">Toggle Debug Mode</button>
10+
<button @click="manualProcess">Manual Process</button>
11+
<button @click="getStats">Get Stats</button>
12+
<div v-if="stats">
13+
<p>Processed elements: {{ stats.processedElements }}</p>
14+
<p>Superscripts: {{ stats.superscripts }}, Subscripts: {{ stats.subscripts }}</p>
15+
</div>
16+
</section>
17+
18+
<section>
19+
<h2>Copyright Symbol</h2>
20+
<p>Copyright: (C) 2024 Example Corporation</p>
21+
<p>Should NOT be superscript: © stays baseline</p>
22+
</section>
23+
24+
<section>
25+
<h2>Trademark & Registered Symbols</h2>
26+
<p>Regular text: Product™ and Brand® are registered.</p>
27+
<p>Parentheses format: Product(TM) and Brand(R) conversion.</p>
28+
<p>Standalone: TM and R should not be converted in isolation.</p>
29+
<h3>In Headers: Platform™ Software®</h3>
30+
<h4>H4: Platform™ Software®</h4>
31+
<h5>H5: Platform™ Software®</h5>
32+
<h6>H6: Platform™ Software®</h6>
33+
</section>
34+
35+
<section>
36+
<h2>Ordinal Numbers</h2>
37+
<p>Rankings: 1st place, 2nd runner-up, 3rd position, 4th quarter</p>
38+
<p>Dates: 21st century, 42nd anniversary, 100th celebration</p>
39+
<p>Edge cases: 11th hour, 12th day, 13th floor</p>
40+
</section>
41+
42+
<section>
43+
<h2>Chemical Formulas</h2>
44+
<p>Water: H2O</p>
45+
<p>Carbon dioxide: CO2</p>
46+
<p>Sulfuric acid: H2SO4</p>
47+
<p>Complex: Al2(SO4)3 and Ca(OH)2</p>
48+
<p>Multiple: Mix H2O with CO2 to get H2CO3</p>
49+
</section>
50+
51+
<section>
52+
<h2>Mathematical Notation</h2>
53+
<p>Basic superscript: x^2 + y^3 = z^4</p>
54+
<p>With braces: x^{10} and a^{n+1}</p>
55+
<p>Physics equations: E=mc^2 (Einstein's famous equation)</p>
56+
<p>After digits: 2x^2 + 3y^2 = 5z^2</p>
57+
<p>Basic subscript: x_1 + x_2 = x_n</p>
58+
<p>With braces: a_{n+1} = a_n + d</p>
59+
<p>Chemistry context: H_2O has subscript, log_2 does not</p>
60+
<p>Mixed notation: f(x) = x^2 + a_1·x + a_0</p>
61+
</section>
62+
63+
<section>
64+
<h2>Mixed Content</h2>
65+
<p>The Platform™ uses H2O cooling in the 21st century. Formula x^2 + CO2 = success®!</p>
66+
<p>On the 1st day, we mixed H2SO4 with the Solution(TM) at position x_1.</p>
67+
</section>
68+
69+
<section>
70+
<h2>Exclusions & Edge Cases</h2>
71+
<h3>Code Blocks (Not Transformed)</h3>
72+
<pre>Code blocks should not transform: H2O, 1st, Product™, x^2</pre>
73+
<code>Inline code: H2O, CO2, 1st, E=mc^2</code>
74+
75+
<h3>Explicit Exclusion</h3>
76+
<div data-no-superscript>
77+
<p>This section excluded: H2O, CO2, 1st, Product™, x^2</p>
78+
</div>
79+
80+
<h3>Programming Identifiers (Correctly Not Transformed)</h3>
81+
<p>Variables: file_name, some_var, MAX_SIZE stay unchanged</p>
82+
<p>But math after equals works: var=x^2 transforms x^2</p>
83+
84+
<h3>Edge Cases That Work</h3>
85+
<p>After lowercase: abc^2 transforms c^2 (like E=mc^2)</p>
86+
<p>After uppercase: ABC^2 doesn't transform (intentional)</p>
87+
</section>
88+
89+
<section>
90+
<h2>Navigation Test</h2>
91+
<NuxtLink to="/test">Test Page Link</NuxtLink>
92+
</section>
93+
</div>
94+
</template>
95+
96+
<script setup>
97+
import { ref, onMounted } from 'vue'
98+
import { useNuxtApp } from '#app'
99+
100+
const { $smartscript } = useNuxtApp()
101+
const debugMode = ref(false)
102+
const stats = ref(null)
103+
104+
const toggleDebug = () => {
105+
if ($smartscript) {
106+
debugMode.value = !debugMode.value
107+
const config = $smartscript.getConfig()
108+
$smartscript.updateConfig({ ...config, debug: debugMode.value })
109+
console.log('Debug mode:', debugMode.value ? 'enabled' : 'disabled')
110+
}
111+
}
112+
113+
const manualProcess = () => {
114+
if ($smartscript) {
115+
$smartscript.process()
116+
stats.value = $smartscript.getStats()
117+
}
118+
}
119+
120+
const getStats = () => {
121+
if ($smartscript) {
122+
stats.value = $smartscript.getStats()
123+
}
124+
}
125+
126+
onMounted(() => {
127+
// Get initial debug state
128+
if ($smartscript) {
129+
const config = $smartscript.getConfig()
130+
debugMode.value = config.debug || false
131+
}
132+
})
133+
</script>
134+
135+
<style scoped>
136+
.container {
137+
max-width: 800px;
138+
margin: 0 auto;
139+
padding: 2rem;
140+
font-family: system-ui, -apple-system, sans-serif;
141+
}
142+
143+
section {
144+
margin: 2rem 0;
145+
padding: 1rem;
146+
border: 1px solid #ddd;
147+
border-radius: 8px;
148+
}
149+
150+
h1 {
151+
color: #333;
152+
border-bottom: 3px solid #007bff;
153+
padding-bottom: 0.5rem;
154+
}
155+
156+
h2 {
157+
color: #555;
158+
margin-top: 0;
159+
}
160+
161+
p {
162+
line-height: 1.6;
163+
margin: 0.5rem 0;
164+
}
165+
166+
pre, code {
167+
background: #f4f4f4;
168+
padding: 0.25rem 0.5rem;
169+
border-radius: 4px;
170+
}
171+
172+
pre {
173+
padding: 1rem;
174+
overflow-x: auto;
175+
}
176+
</style>

‎playground/pages/test.vue

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
<template>
2+
<div class="container">
3+
<h1>Navigation Test Page™</h1>
4+
<p>This page tests if transformations work after navigation.</p>
5+
<p>The Platform™ should show proper superscript here too.</p>
6+
<p>Chemical formula: H2O and CO2</p>
7+
<p>Ordinals: 1st, 2nd, 3rd test</p>
8+
9+
<NuxtLink to="/">Back to Home</NuxtLink>
10+
</div>
11+
</template>
12+
13+
<style scoped>
14+
.container {
15+
max-width: 800px;
16+
margin: 0 auto;
17+
padding: 2rem;
18+
}
19+
</style>

0 commit comments

Comments
 (0)