Skip to content

Commit fb49375

Browse files
staredstared
committed
on contributing
1 parent fe0bb61 commit fb49375

File tree

2 files changed

+145
-43
lines changed

2 files changed

+145
-43
lines changed

‎CONTRIBUTE.md‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
# Contributing
2+
3+
## Adding an Equation
4+
5+
To add a new equation, please add a Markdown (`.md`) file in the `src/examples/` directory.
6+
**Do not modify other files.**
7+
8+
## Other Changes
9+
10+
For any other changes, please clearly explain your intention in the pull request description.
11+
12+
## Visual Changes
13+
14+
If your changes involve any visual modifications, please attach a screenshot to your pull request.

‎src/App.vue‎

Lines changed: 131 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -5,31 +5,76 @@
55
<h2>Equations</h2>
66
<EquationSelector @change="markdown = $event" />
77
<footer class="sidebar-footer">
8-
<p>Demo by <a href="https://p.migdal.pl" target="_blank" rel="noopener">Piotr Migdał</a></p>
9-
<p>Source: <a href="https://github.com/stared/equations-explained-colorfully" target="_blank" rel="noopener">github.com/stared/equations-explained-colorfully</a></p>
10-
<p>For more: <a href="https://p.migdal.pl/blog/2024/05/science-games-explorable-explanations/" target="_blank" rel="noopener">Science, games, and explorable explanations</a></p>
8+
<p>
9+
Demo by
10+
<a href="https://p.migdal.pl" target="_blank" rel="noopener"
11+
>Piotr Migdał</a
12+
>
13+
</p>
14+
<p>
15+
Source:
16+
<a
17+
href="https://github.com/stared/equations-explained-colorfully"
18+
target="_blank"
19+
rel="noopener"
20+
>github.com/stared/equations-explained-colorfully</a
21+
>
22+
</p>
23+
<p>
24+
For more:
25+
<a
26+
href="https://p.migdal.pl/blog/2024/05/science-games-explorable-explanations/"
27+
target="_blank"
28+
rel="noopener"
29+
>Science, games, and explorable explanations</a
30+
>
31+
</p>
1132
</footer>
1233
</aside>
1334

1435
<!-- Main Content -->
1536
<main class="main-content">
1637
<ColorSchemeSwitcher @change="colorScheme = $event" />
17-
<CentralPanel v-if="parsedContent" :content="parsedContent" :colors="colorScheme" />
38+
<CentralPanel
39+
v-if="parsedContent"
40+
:content="parsedContent"
41+
:colors="colorScheme"
42+
/>
1843
</main>
1944

2045
<!-- Editor Sidebar -->
2146
<aside class="editor-sidebar" :class="{ collapsed: editorCollapsed }">
2247
<div class="editor-toolbar">
23-
<button class="toolbar-btn toggle-btn" title="Show/hide editor" @click="editorCollapsed = !editorCollapsed">
24-
<span class="icon">{{ editorCollapsed ? '◀' : '▶' }}</span>
48+
<button
49+
class="toolbar-btn toggle-btn"
50+
title="Show/hide editor"
51+
@click="editorCollapsed = !editorCollapsed"
52+
>
53+
<span class="icon">{{ editorCollapsed ? "◀" : "▶" }}</span>
2554
<template v-if="editorCollapsed">
2655
<span class="edit-label">EDIT</span>
2756
<span class="edit-label">CODE</span>
2857
</template>
2958
</button>
3059
<template v-if="!editorCollapsed">
31-
<ExportControls :parsed-content="parsedContent" :colors="colorScheme" />
32-
<a href="https://github.com/stared/equations-explained-colorfully" class="toolbar-link" target="_blank" rel="noopener">Contribute</a>
60+
<ExportControls
61+
:parsed-content="parsedContent"
62+
:colors="colorScheme"
63+
/>
64+
<a
65+
href="https://github.com/stared/equations-explained-colorfully/blob/main/README.md#content-format"
66+
class="toolbar-link"
67+
target="_blank"
68+
rel="noopener"
69+
>Syntax help</a
70+
>
71+
<a
72+
href="https://github.com/stared/equations-explained-colorfully/blob/main/CONTRIBUTE.md"
73+
class="toolbar-link"
74+
target="_blank"
75+
rel="noopener"
76+
>Contribute</a
77+
>
3378
</template>
3479
</div>
3580
<div class="editor-container">
@@ -40,43 +85,43 @@
4085
</template>
4186

4287
<script setup lang="ts">
43-
import { ref, computed } from 'vue'
44-
import type { ColorScheme } from './export'
45-
import { defaultScheme } from './utils/colorSchemes'
46-
import { parseContent } from './utils/parser'
88+
import { ref, computed } from "vue";
89+
import type { ColorScheme } from "./export";
90+
import { defaultScheme } from "./utils/colorSchemes";
91+
import { parseContent } from "./utils/parser";
4792
4893
// Components
49-
import CentralPanel from './components/CentralPanel.vue'
50-
import EquationSelector from './components/controls/EquationSelector.vue'
51-
import ColorSchemeSwitcher from './components/controls/ColorSchemeSwitcher.vue'
52-
import ExportControls from './components/controls/ExportControls.vue'
53-
import MarkdownEditor from './components/MarkdownEditor.vue'
94+
import CentralPanel from "./components/CentralPanel.vue";
95+
import EquationSelector from "./components/controls/EquationSelector.vue";
96+
import ColorSchemeSwitcher from "./components/controls/ColorSchemeSwitcher.vue";
97+
import ExportControls from "./components/controls/ExportControls.vue";
98+
import MarkdownEditor from "./components/MarkdownEditor.vue";
5499
55100
// Core state
56-
const markdown = ref('')
57-
const colorScheme = ref<ColorScheme>(defaultScheme)
58-
const editorCollapsed = ref(false)
101+
const markdown = ref("");
102+
const colorScheme = ref<ColorScheme>(defaultScheme);
103+
const editorCollapsed = ref(false);
59104
60105
// Parsed content derived from markdown
61106
const parsedContent = computed(() => {
62-
if (!markdown.value.trim()) return null
107+
if (!markdown.value.trim()) return null;
63108
try {
64-
return parseContent(markdown.value)
109+
return parseContent(markdown.value);
65110
} catch {
66-
return null
111+
return null;
67112
}
68-
})
113+
});
69114
70115
// Test helpers for Playwright
71-
if (typeof window !== 'undefined') {
116+
if (typeof window !== "undefined") {
72117
(window as any).__testHelpers = {
73118
parsedContent: () => parsedContent.value,
74119
generateExport: async (format: any) => {
75-
const { exportContent } = await import('./export')
76-
if (!parsedContent.value) return ''
77-
return exportContent(format, parsedContent.value, colorScheme.value)
120+
const { exportContent } = await import("./export");
121+
if (!parsedContent.value) return "";
122+
return exportContent(format, parsedContent.value, colorScheme.value);
78123
},
79-
}
124+
};
80125
}
81126
</script>
82127

@@ -96,14 +141,21 @@ if (typeof window !== 'undefined') {
96141
--border-hover: #d1d5db;
97142
--success: #10b981;
98143
--danger: #ef4444;
99-
--font-ui: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
100-
--font-math: "Crimson Pro", "ETBembo", "Palatino Linotype", "Book Antiqua", Palatino, Georgia, serif;
101-
--font-mono: "Menlo", "Monaco", "Consolas", "Liberation Mono", "Courier New", monospace;
144+
--font-ui: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
145+
Helvetica, Arial, sans-serif;
146+
--font-math: "Crimson Pro", "ETBembo", "Palatino Linotype", "Book Antiqua",
147+
Palatino, Georgia, serif;
148+
--font-mono: "Menlo", "Monaco", "Consolas", "Liberation Mono", "Courier New",
149+
monospace;
102150
--sidebar-width: 280px;
103151
--editor-width: 500px;
104152
}
105153
106-
* { margin: 0; padding: 0; box-sizing: border-box; }
154+
* {
155+
margin: 0;
156+
padding: 0;
157+
box-sizing: border-box;
158+
}
107159
108160
body {
109161
font-family: var(--font-math);
@@ -153,9 +205,17 @@ body {
153205
color: var(--text-secondary);
154206
}
155207
156-
.sidebar-footer p { margin: 0.5rem 0; line-height: 1.5; }
157-
.sidebar-footer a { color: var(--accent-color); text-decoration: none; }
158-
.sidebar-footer a:hover { text-decoration: underline; }
208+
.sidebar-footer p {
209+
margin: 0.5rem 0;
210+
line-height: 1.5;
211+
}
212+
.sidebar-footer a {
213+
color: var(--accent-color);
214+
text-decoration: none;
215+
}
216+
.sidebar-footer a:hover {
217+
text-decoration: underline;
218+
}
159219
160220
/* Main Content */
161221
.main-content {
@@ -224,7 +284,9 @@ body {
224284
color: var(--text-primary);
225285
}
226286
227-
.toolbar-btn .icon { font-size: 0.75rem; }
287+
.toolbar-btn .icon {
288+
font-size: 0.75rem;
289+
}
228290
229291
.toggle-btn {
230292
display: flex;
@@ -248,7 +310,9 @@ body {
248310
padding: 0.25rem 0.5rem;
249311
}
250312
251-
.editor-sidebar.collapsed .editor-container { display: none; }
313+
.editor-sidebar.collapsed .editor-container {
314+
display: none;
315+
}
252316
253317
.editor-container {
254318
flex: 1;
@@ -262,10 +326,34 @@ body {
262326
263327
/* Responsive */
264328
@media (max-width: 768px) {
265-
#app { flex-direction: column; height: auto; overflow-y: auto; }
266-
.sidebar { width: 100%; min-width: 100%; border-right: none; border-bottom: 1px solid var(--border-color); height: auto; max-height: 200px; }
267-
.main-content { padding: 2rem 1rem; overflow: visible; }
268-
.editor-sidebar { position: relative; width: 100%; max-width: 100%; height: 500px; transform: none; }
269-
.editor-sidebar.collapsed { height: 50px; width: 100%; min-width: 100%; }
329+
#app {
330+
flex-direction: column;
331+
height: auto;
332+
overflow-y: auto;
333+
}
334+
.sidebar {
335+
width: 100%;
336+
min-width: 100%;
337+
border-right: none;
338+
border-bottom: 1px solid var(--border-color);
339+
height: auto;
340+
max-height: 200px;
341+
}
342+
.main-content {
343+
padding: 2rem 1rem;
344+
overflow: visible;
345+
}
346+
.editor-sidebar {
347+
position: relative;
348+
width: 100%;
349+
max-width: 100%;
350+
height: 500px;
351+
transform: none;
352+
}
353+
.editor-sidebar.collapsed {
354+
height: 50px;
355+
width: 100%;
356+
min-width: 100%;
357+
}
270358
}
271359
</style>

0 commit comments

Comments
 (0)