Skip to content

Commit 67b0760

Browse files
staredclaude
stared
and
claude
committed
Rewrite app from plain TypeScript to Vue 3
- Add Vue 3 and @vitejs/plugin-vue dependencies - Create component-based architecture with Composition API - Replace global state with reactive props/emits pattern - Move styles from global CSS to scoped component styles - Create reusable composables (useEquations, useColorScheme, useHover) - Simplify CodeJar integration with Vue wrapper component - Update E2E tests for new component structure - Delete old src/ui/ imperative code (1,500+ lines removed) Components: - Layout: AppSidebar, MainContent, EditorSidebar - Equation: EquationDisplay, DescriptionPanel, DefinitionPopup, SelectionOverlay - Controls: EquationSelector, ColorSchemeSwitcher, ExportControls - Editor: MarkdownEditor (CodeJar wrapper) Unchanged (pure functions): - parser.ts, export/*, utils/*, prism-custom.ts 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
1 parent 92e1c04 commit 67b0760

32 files changed

+1869
-1696
lines changed

‎index.html‎

Lines changed: 1 addition & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -28,58 +28,7 @@
2828
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.25/dist/katex.min.css" />
2929
</head>
3030
<body>
31-
<div id="app">
32-
<aside id="sidebar" class="sidebar">
33-
<h2>Equations</h2>
34-
<nav id="equation-selector" class="equation-selector"></nav>
35-
36-
<footer class="sidebar-footer">
37-
<p>
38-
Demo by <a href="https://p.migdal.pl" target="_blank" rel="noopener">Piotr Migdał</a>
39-
</p>
40-
<p>
41-
Source: <a href="https://github.com/stared/equations-explained-colorfully" target="_blank" rel="noopener">github.com/stared/equations-explained-colorfully</a>
42-
</p>
43-
<p>
44-
For more on interactive explanations, see:
45-
<a href="https://p.migdal.pl/blog/2024/05/science-games-explorable-explanations/" target="_blank" rel="noopener">Science, games, and explorable explanations</a>
46-
</p>
47-
</footer>
48-
</aside>
49-
50-
<main id="main-content" class="main-content">
51-
<h1 id="equation-title">Interactive Equations</h1>
52-
<p class="subtitle">Hover over colored terms to explore their meaning</p>
53-
54-
<div id="color-scheme-switcher" class="color-scheme-switcher"></div>
55-
56-
<div id="equation-container"></div>
57-
58-
<div id="static-description" class="static-description"></div>
59-
60-
<div id="hover-explanation" class="hover-explanation"></div>
61-
</main>
62-
63-
<aside id="editor-sidebar" class="editor-sidebar">
64-
<div class="editor-toolbar">
65-
<button id="toggle-editor-btn" class="toolbar-btn" title="Show/hide editor">
66-
<span class="icon">◀</span>
67-
</button>
68-
<div class="export-controls">
69-
<select id="export-format" class="toolbar-select" title="Export as...">
70-
<option value="" disabled selected>Export as...</option>
71-
<option value="html">HTML</option>
72-
<option value="latex">LaTeX</option>
73-
<option value="beamer">Beamer</option>
74-
<option value="typst">Typst</option>
75-
</select>
76-
</div>
77-
<button id="copy-btn" class="toolbar-btn" title="Copy to clipboard">Copy</button>
78-
<a href="https://github.com/stared/equations-explained-colorfully" class="toolbar-link" target="_blank" rel="noopener">Contribute</a>
79-
</div>
80-
<div id="editor-container" class="editor-container"></div>
81-
</aside>
82-
</div>
31+
<div id="app"></div>
8332
<script type="module" src="/src/main.ts"></script>
8433
</body>
8534
</html>

‎package.json‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -35,9 +35,11 @@
3535
"vite": "^7.1.12"
3636
},
3737
"dependencies": {
38+
"@vitejs/plugin-vue": "^6.0.2",
3839
"codejar": "^4.3.0",
3940
"katex": "^0.16.25",
4041
"prismjs": "^1.30.0",
41-
"tex2typst": "^0.4.1"
42+
"tex2typst": "^0.4.1",
43+
"vue": "^3.5.25"
4244
}
4345
}

‎pnpm-lock.yaml‎

Lines changed: 183 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)