Mark/esolang
1
0
Fork 0
Code Issues Packages Activity

Add link to esolang implementation notes

Browse Source
This commit is contained in:
Nilay Majorwar 2022-01-31 15:44:28 +05:30
parent e3be5a8a83
commit ee64b73d28
6 changed files with 21 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
pages/ide/befunge93.tsx
View File

@ -14,7 +14,7 @@ const IDE: NextPage = () => {
<title>{LANG_NAME} | Esolang Park</title> <title>{LANG_NAME} | Esolang Park</title>
</Head> </Head>
<div style={{ height: "100%", display: "flex", flexDirection: "column" }}> <div style={{ height: "100%", display: "flex", flexDirection: "column" }}>
<Header langName={LANG_NAME} /> <Header langId={LANG_ID} langName={LANG_NAME} />
<div style={{ flexGrow: 1 }}> <div style={{ flexGrow: 1 }}>
<Mainframe langName={LANG_ID} provider={LangProvider} /> <Mainframe langName={LANG_ID} provider={LangProvider} />
</div> </div>

2
pages/ide/brainfuck.tsx
View File

@ -14,7 +14,7 @@ const IDE: NextPage = () => {
<title>{LANG_NAME} | Esolang Park</title> <title>{LANG_NAME} | Esolang Park</title>
</Head> </Head>
<div style={{ height: "100%", display: "flex", flexDirection: "column" }}> <div style={{ height: "100%", display: "flex", flexDirection: "column" }}>
<Header langName={LANG_NAME} /> <Header langId={LANG_ID} langName={LANG_NAME} />
<div style={{ flexGrow: 1 }}> <div style={{ flexGrow: 1 }}>
<Mainframe langName={LANG_ID} provider={LangProvider} /> <Mainframe langName={LANG_ID} provider={LangProvider} />
</div> </div>

2
pages/ide/chef.tsx
View File

@ -14,7 +14,7 @@ const IDE: NextPage = () => {
<title>{LANG_NAME} | Esolang Park</title> <title>{LANG_NAME} | Esolang Park</title>
</Head> </Head>
<div style={{ height: "100%", display: "flex", flexDirection: "column" }}> <div style={{ height: "100%", display: "flex", flexDirection: "column" }}>
<Header langName={LANG_NAME} /> <Header langId={LANG_ID} langName={LANG_NAME} />
<div style={{ flexGrow: 1 }}> <div style={{ flexGrow: 1 }}>
<Mainframe langName={LANG_ID} provider={LangProvider} /> <Mainframe langName={LANG_ID} provider={LangProvider} />
</div> </div>

2
pages/ide/deadfish.tsx
View File

@ -14,7 +14,7 @@ const IDE: NextPage = () => {
<title>{LANG_NAME} | Esolang Park</title> <title>{LANG_NAME} | Esolang Park</title>
</Head> </Head>
<div style={{ height: "100%", display: "flex", flexDirection: "column" }}> <div style={{ height: "100%", display: "flex", flexDirection: "column" }}>
<Header langName={LANG_NAME} /> <Header langId={LANG_ID} langName={LANG_NAME} />
<div style={{ flexGrow: 1 }}> <div style={{ flexGrow: 1 }}>
<Mainframe langName={LANG_ID} provider={LangProvider} /> <Mainframe langName={LANG_ID} provider={LangProvider} />
</div> </div>

2
scripts/new-lang-template/ide-page.tsx
View File

@ -15,7 +15,7 @@ const IDE: NextPage = () => {
<title>{LANG_NAME} | Esolang Park</title> <title>{LANG_NAME} | Esolang Park</title>
</Head> </Head>
<div style={{ height: "100%", display: "flex", flexDirection: "column" }}> <div style={{ height: "100%", display: "flex", flexDirection: "column" }}>
<Header langName={LANG_NAME} /> <Header langId={LANG_ID} langName={LANG_NAME} />
<div style={{ flexGrow: 1 }}> <div style={{ flexGrow: 1 }}>
<Mainframe langName={LANG_ID} provider={LangProvider} /> <Mainframe langName={LANG_ID} provider={LangProvider} />
</div> </div>

22
ui/header.tsx
View File

@ -4,7 +4,14 @@ import logoImg from "./assets/logo.png";
import { GitHubIcon } from "./custom-icons"; import { GitHubIcon } from "./custom-icons";
import { useDarkMode } from "./providers/dark-mode-provider"; import { useDarkMode } from "./providers/dark-mode-provider";
export const Header = ({ langName }: { langName: string }) => { /** Link to the project's GitHub repository */
const REPO_LINK = "https://github.com/nilaymaj/esolang-park";
/** Link to the language's README.md page on GitHub */
const NOTES_LINK = (id: string) =>
`https://github.com/nilaymaj/esolang-park/blob/main/languages/${id}/README.md`;
export const Header = (props: { langId: string; langName: string }) => {
const DarkMode = useDarkMode(); const DarkMode = useDarkMode();
const brandSection = ( const brandSection = (
@ -19,21 +26,24 @@ export const Header = ({ langName }: { langName: string }) => {
); );
const langSection = ( const langSection = (
<div style={{ flex: 0, textAlign: "center" }}>{langName}</div> <div style={{ flex: 0, textAlign: "center" }}>{props.langName}</div>
); );
const infoSection = ( const infoSection = (
<div style={{ flex: 1, textAlign: "right", paddingRight: 8 }}> <div style={{ flex: 1, textAlign: "right", paddingRight: 8 }}>
<a
href={NOTES_LINK(props.langId)}
title="View implementatio notes for this esolang"
>
<Button minimal icon={<Icon icon="info-sign" />} />
</a>
<Button <Button
minimal minimal
title="Toggle between dark and light mode" title="Toggle between dark and light mode"
icon={<Icon icon={DarkMode.isDark ? "flash" : "moon"} />} icon={<Icon icon={DarkMode.isDark ? "flash" : "moon"} />}
onClick={DarkMode.toggleDark} onClick={DarkMode.toggleDark}
/> />
<a <a href={REPO_LINK} title="GitHub repository">
href="https://github.com/nilaymaj/esolang-park"
title="GitHub repository"
>
<Button minimal icon={<Icon icon={<GitHubIcon />} />} /> <Button minimal icon={<Icon icon={<GitHubIcon />} />} />
</a> </a>
</div> </div>