diff --git a/pages/_app.tsx b/pages/_app.tsx index b2794ae..34b97e7 100644 --- a/pages/_app.tsx +++ b/pages/_app.tsx @@ -1,3 +1,4 @@ +import React from "react"; import "../styles/globals.css"; import "../styles/editor.css"; import "../styles/mosaic.scss"; @@ -5,17 +6,24 @@ import "@blueprintjs/core/lib/css/blueprint.css"; import "@blueprintjs/icons/lib/css/blueprint-icons.css"; import "react-mosaic-component/react-mosaic-component.css"; import type { AppProps } from "next/app"; -import { DarkModeProvider } from "../ui/providers/dark-mode-provider"; -import { ErrorBoundaryProvider } from "../ui/providers/error-boundary-provider"; +import { Providers } from "../ui/providers"; +import { NextPage } from "next"; -function MyApp({ Component, pageProps }: AppProps) { - return ( - - - - - - ); +/** Type for pages that use a custom layout */ +export type NextPageWithLayout = NextPage & { + getLayout?: (page: React.ReactNode) => React.ReactNode; +}; + +/** AppProps type but extended for custom layouts */ +type AppPropsWithLayout = AppProps & { + Component: NextPageWithLayout; +}; + +function MyApp({ Component, pageProps }: AppPropsWithLayout) { + // Use the layout defined at the page level, if available + const getLayout = + Component.getLayout ?? ((page) => {page}); + return getLayout(); } export default MyApp; diff --git a/pages/index.tsx b/pages/index.tsx index d7e7c39..b371240 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -1,5 +1,5 @@ import React from "react"; -import { NextPage } from "next"; +import { NextPageWithLayout } from "./_app"; import Head from "next/head"; import logoImg from "../ui/assets/logo.png"; import Image from "next/image"; @@ -8,6 +8,7 @@ import Link from "next/link"; import { useDarkMode } from "../ui/providers/dark-mode-provider"; import LANGUAGES from "./languages.json"; import { GitHubIcon } from "../ui/custom-icons"; +import { Providers } from "../ui/providers"; const REPO_URL = "https://github.com/nilaymaj/esolang-park"; const WIKI_URL = REPO_URL + "/wiki"; @@ -50,7 +51,7 @@ const styles = { }, }; -const Index: NextPage = () => { +const Index: NextPageWithLayout = () => { const DarkMode = useDarkMode(); const backgroundColor = DarkMode.isDark ? Colors.DARK_GRAY3 : Colors.WHITE; @@ -113,4 +114,9 @@ const Index: NextPage = () => { ); }; +// Feature guide should not be shown on the home page +Index.getLayout = function getLayout(page: React.ReactNode) { + return {page}; +}; + export default Index; diff --git a/ui/assets/guide-breakpoints.png b/ui/assets/guide-breakpoints.png new file mode 100644 index 0000000..d7178cb Binary files /dev/null and b/ui/assets/guide-breakpoints.png differ diff --git a/ui/assets/guide-exec-controls.png b/ui/assets/guide-exec-controls.png new file mode 100644 index 0000000..eab8961 Binary files /dev/null and b/ui/assets/guide-exec-controls.png differ diff --git a/ui/assets/guide-info-btn.png b/ui/assets/guide-info-btn.png new file mode 100644 index 0000000..94ea69e Binary files /dev/null and b/ui/assets/guide-info-btn.png differ diff --git a/ui/assets/guide-syntax-check.png b/ui/assets/guide-syntax-check.png new file mode 100644 index 0000000..673323d Binary files /dev/null and b/ui/assets/guide-syntax-check.png differ diff --git a/ui/features-guide.tsx b/ui/features-guide.tsx new file mode 100644 index 0000000..941f805 --- /dev/null +++ b/ui/features-guide.tsx @@ -0,0 +1,179 @@ +import * as React from "react"; +import Image from "next/image"; +import { Text, Classes, Drawer, TextProps, Divider } from "@blueprintjs/core"; +import breakpointsImg from "./assets/guide-breakpoints.png"; +import execControlsImg from "./assets/guide-exec-controls.png"; +import infoBtnImg from "./assets/guide-info-btn.png"; +import syntaxCheckImg from "./assets/guide-syntax-check.png"; + +const BigText = (props: TextProps & { children: React.ReactNode }) => { + const { children, ...rest } = props; + return ( + + {children} + + ); +}; + +const SideBySideSection = (props: { + title: string; + children: React.ReactNode; + image: JSX.Element; +}) => { + return ( +
+ +

{props.title}

+ +
+
+
+ {props.image} +
+
+ {props.children} +
+
+ ); +}; + +const SyntaxCheckSection = () => { + return ( + } + > +

+ Esolang Park checks the syntax of your source code{" "} + while you're typing. 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. +

+ + ); +}; + +const BreakpointsSection = () => { + return ( + } + > +

+ Esolang Park allows you to set debugging breakpoints in your code + . 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. +

+

+ Click on the left of any line number to set a breakpoint on that line. + Click on the red circle to remove the breakpoint. +

+ + ); +}; + +const ExecControlsSection = () => { + return ( +
+ +

Pause, inspect and step through execution

+ +
+
+ execution controls +
+
+ +

+ When your run a program, the "Run code" button changes to the + execution controls. Pause execution to{" "} + + inspect the runtime state, start stepping through execution, change + the execution interval or stop execution entirely + + . +

+

+ The execution interval dictates how fast your program should be run by + Esolang Park. The smallest execution interval currently supported is + 5ms. +

+ +
+ ); +}; + +const InfoSection = () => { + return ( + } + > +

+ Click the document button to read a short introduction and view + reference links for the esolang. This also contains{" "} + notes about the implementation of this esolang, including any + incompatibilities and quirks you should take care of while debugging + your code. +

+

+ Click the question mark button to view this guide at any point. +

+ + ); +}; + +type Props = { + isOpen: boolean; + onClose: () => void; +}; + +export const FeaturesGuide = (props: Props) => { + return ( + +
+ +

+ Esolang Park is an online interpreter and debugger interface{" "} + 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. +

+

+ 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. +

+

+ Esolang Park is very early in development, 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! +

+ + + + + + + + + +
+ + ); +}; diff --git a/ui/header.tsx b/ui/header.tsx index a433037..26e9429 100644 --- a/ui/header.tsx +++ b/ui/header.tsx @@ -3,6 +3,7 @@ import logoImg from "./assets/logo.png"; import { GitHubIcon } from "./custom-icons"; import { useDarkMode } from "./providers/dark-mode-provider"; import { Button, Card, Icon, Tag } from "@blueprintjs/core"; +import { useFeaturesGuide } from "./providers/features-guide-provider"; /** Link to the project's GitHub repository */ const REPO_LINK = "https://github.com/nilaymaj/esolang-park"; @@ -19,6 +20,7 @@ type Props = { export const Header = (props: Props) => { const DarkMode = useDarkMode(); + const featuresGuide = useFeaturesGuide(); const brandSection = (
{
-