Clean up guide

This commit is contained in:
Mark 2025-01-16 12:00:21 -08:00
parent dca4889e74
commit de8c3e3ad3
Signed by: Mark
GPG Key ID: C6D63995FE72FD80

View File

@ -45,9 +45,8 @@ const SyntaxCheckSection = () => {
>
<p>
Esolang Park checks the syntax of your source code{" "}
<b>while you're typing</b>. Any errors in the syntax of your program are
marked in the editor with a (mostly) useful error message, without
needing to run the program.
<b>while {"you're"} typing</b>. Any errors in the syntax of your program
are highlighted in the editor.
</p>
</SideBySideSection>
);
@ -62,8 +61,7 @@ const BreakpointsSection = () => {
<p>
Esolang Park allows you to <b>set debugging breakpoints in your code</b>
. When you run your program and execution reaches a line with
breakpoint, the program will pause and you can inspect the state of the
program.
breakpoint, the program will pause and you can inspect its state.
</p>
<p>
Click on the left of any line number to set a breakpoint on that line.
@ -94,7 +92,7 @@ const ExecControlsSection = () => {
</div>
<BigText>
<p>
When your run a program, the "Run code" button changes to the
When your run a program, the {'"Run code"'} button changes to the
execution controls. Pause execution to{" "}
<b>
inspect the runtime state, start stepping through execution, change
@ -104,34 +102,13 @@ const ExecControlsSection = () => {
</p>
<p>
The execution interval dictates how fast your program should be run by
Esolang Park. The smallest execution interval currently supported is
5ms.
Esolang Park. This must be at least 5ms.
</p>
</BigText>
</div>
);
};
const InfoSection = () => {
return (
<SideBySideSection
title={""}
image={<Image src={infoBtnImg} alt="info buttons" />}
>
<p>
Click the document button to read a short introduction and view
reference links for the esolang. This also contains{" "}
<b>notes about the implementation of this esolang</b>, including any
incompatibilities and quirks you should take care of while debugging
your code.
</p>
<p>
Click the question mark button to <b>view this guide</b> at any point.
</p>
</SideBySideSection>
);
};
type Props = {
isOpen: boolean;
onClose: () => void;
@ -146,33 +123,11 @@ export const FeaturesGuide = (props: Props) => {
style={{ overflowY: "auto" }}
>
<div className={Classes.DIALOG_BODY}>
<BigText>
<p>
Esolang Park is an online <b>interpreter and debugger interface</b>{" "}
for esoteric programming languages. Think Repl.it, but a simpler
version for esoteric languages, with a visual debugger catered to
each language, that runs in your browser.
</p>
<p>
The goal of Esolang Park is to be a platform for esolang enthusiasts
to test and debug their code more easily, as well as for other
people to discover and play around with esoteric languages without
leaving the browser.
</p>
<p>
Esolang Park is <b>very early in development</b>, things are by no
means optimal, and there are most certainly bugs hanging around in
the source code. If you catch one, please create an issue on GitHub!
</p>
</BigText>
<Divider style={{ margin: 20 }} />
<SyntaxCheckSection />
<Divider style={{ margin: 20 }} />
<BreakpointsSection />
<Divider style={{ margin: 20 }} />
<ExecControlsSection />
<Divider style={{ margin: 20 }} />
<InfoSection />
</div>
</Drawer>
);