From ee64b73d28f5bbf9f273dd7d8e273c5e3d90f829 Mon Sep 17 00:00:00 2001
From: Nilay Majorwar <nilaymajorwar@gmail.com>
Date: Mon, 31 Jan 2022 15:44:28 +0530
Subject: [PATCH] Add link to esolang implementation notes

---
 pages/ide/befunge93.tsx                |  2 +-
 pages/ide/brainfuck.tsx                |  2 +-
 pages/ide/chef.tsx                     |  2 +-
 pages/ide/deadfish.tsx                 |  2 +-
 scripts/new-lang-template/ide-page.tsx |  2 +-
 ui/header.tsx                          | 22 ++++++++++++++++------
 6 files changed, 21 insertions(+), 11 deletions(-)

diff --git a/pages/ide/befunge93.tsx b/pages/ide/befunge93.tsx
index f5d97eb..6734bd1 100644
--- a/pages/ide/befunge93.tsx
+++ b/pages/ide/befunge93.tsx
@@ -14,7 +14,7 @@ const IDE: NextPage = () => {
         <title>{LANG_NAME} | Esolang Park</title>
       </Head>
       <div style={{ height: "100%", display: "flex", flexDirection: "column" }}>
-        <Header langName={LANG_NAME} />
+        <Header langId={LANG_ID} langName={LANG_NAME} />
         <div style={{ flexGrow: 1 }}>
           <Mainframe langName={LANG_ID} provider={LangProvider} />
         </div>
diff --git a/pages/ide/brainfuck.tsx b/pages/ide/brainfuck.tsx
index c46e927..4706872 100644
--- a/pages/ide/brainfuck.tsx
+++ b/pages/ide/brainfuck.tsx
@@ -14,7 +14,7 @@ const IDE: NextPage = () => {
         <title>{LANG_NAME} | Esolang Park</title>
       </Head>
       <div style={{ height: "100%", display: "flex", flexDirection: "column" }}>
-        <Header langName={LANG_NAME} />
+        <Header langId={LANG_ID} langName={LANG_NAME} />
         <div style={{ flexGrow: 1 }}>
           <Mainframe langName={LANG_ID} provider={LangProvider} />
         </div>
diff --git a/pages/ide/chef.tsx b/pages/ide/chef.tsx
index 99aaea8..8477fbd 100644
--- a/pages/ide/chef.tsx
+++ b/pages/ide/chef.tsx
@@ -14,7 +14,7 @@ const IDE: NextPage = () => {
         <title>{LANG_NAME} | Esolang Park</title>
       </Head>
       <div style={{ height: "100%", display: "flex", flexDirection: "column" }}>
-        <Header langName={LANG_NAME} />
+        <Header langId={LANG_ID} langName={LANG_NAME} />
         <div style={{ flexGrow: 1 }}>
           <Mainframe langName={LANG_ID} provider={LangProvider} />
         </div>
diff --git a/pages/ide/deadfish.tsx b/pages/ide/deadfish.tsx
index 2230125..e045944 100644
--- a/pages/ide/deadfish.tsx
+++ b/pages/ide/deadfish.tsx
@@ -14,7 +14,7 @@ const IDE: NextPage = () => {
         <title>{LANG_NAME} | Esolang Park</title>
       </Head>
       <div style={{ height: "100%", display: "flex", flexDirection: "column" }}>
-        <Header langName={LANG_NAME} />
+        <Header langId={LANG_ID} langName={LANG_NAME} />
         <div style={{ flexGrow: 1 }}>
           <Mainframe langName={LANG_ID} provider={LangProvider} />
         </div>
diff --git a/scripts/new-lang-template/ide-page.tsx b/scripts/new-lang-template/ide-page.tsx
index 2be8394..f1696ca 100644
--- a/scripts/new-lang-template/ide-page.tsx
+++ b/scripts/new-lang-template/ide-page.tsx
@@ -15,7 +15,7 @@ const IDE: NextPage = () => {
         <title>{LANG_NAME} | Esolang Park</title>
       </Head>
       <div style={{ height: "100%", display: "flex", flexDirection: "column" }}>
-        <Header langName={LANG_NAME} />
+        <Header langId={LANG_ID} langName={LANG_NAME} />
         <div style={{ flexGrow: 1 }}>
           <Mainframe langName={LANG_ID} provider={LangProvider} />
         </div>
diff --git a/ui/header.tsx b/ui/header.tsx
index 2a61d6c..49d212f 100644
--- a/ui/header.tsx
+++ b/ui/header.tsx
@@ -4,7 +4,14 @@ import logoImg from "./assets/logo.png";
 import { GitHubIcon } from "./custom-icons";
 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 brandSection = (
@@ -19,21 +26,24 @@ export const Header = ({ langName }: { langName: string }) => {
   );
 
   const langSection = (
-    <div style={{ flex: 0, textAlign: "center" }}>{langName}</div>
+    <div style={{ flex: 0, textAlign: "center" }}>{props.langName}</div>
   );
 
   const infoSection = (
     <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
         minimal
         title="Toggle between dark and light mode"
         icon={<Icon icon={DarkMode.isDark ? "flash" : "moon"} />}
         onClick={DarkMode.toggleDark}
       />
-      <a
-        href="https://github.com/nilaymaj/esolang-park"
-        title="GitHub repository"
-      >
+      <a href={REPO_LINK} title="GitHub repository">
         <Button minimal icon={<Icon icon={<GitHubIcon />} />} />
       </a>
     </div>