pytchlang · Duncan-W · Mar 25, 2024 · Mar 25, 2024 · Mar 25, 2024 · Mar 26, 2024
diff --git a/index.html b/index.html
@@ -10,6 +10,16 @@
       content="Pytch: A system to help Python learners coming from Scratch"
     />
     <title>Pytch</title>
+    <script type="application/ld+json">
+      {
+        "@context": "https://schema.org",
+        "@type": "ResearchProject",
+        "name": "Pytch",
+        "url": "https://www.pytch.org/",
+        "logo": "https://www.pytch.org/app/assets/python-logo.png",
+        "sameAs": "https://twitter.com/pytchlang/"
+      }
+      </script>
 
     <script
       src="%VITE_SKULPT_BASE%/skulpt.min.js"
@@ -21,11 +31,16 @@
       type="text/javascript"
       charset="utf-8"
     ></script>
-    <div id="dynamic-scripts"></div>
+    <style>
+
+    </style>
   </head>
+
   <body class="pytch-toplevel">
+    <div id="dynamic-scripts"></div>
     <noscript>You need to enable JavaScript to run this app.</noscript>
-    <div id="root"></div>
+    <div id="root" class="container"></div>
     <script type="module" src="/src/main.tsx"></script>
   </body>
+
 </html>
diff --git a/public/assets/box3.png b/public/assets/box3.png
diff --git a/public/assets/logos/TCD - Copy.png b/public/assets/logos/TCD - Copy.png
diff --git a/public/assets/logos/TCD.png b/public/assets/logos/TCD.png
diff --git a/public/assets/logos/sfi_logo.png b/public/assets/logos/sfi_logo.png
diff --git a/public/assets/logos/tcd_logo.png b/public/assets/logos/tcd_logo.png
diff --git a/public/assets/logos/tudublin_logo.png b/public/assets/logos/tudublin_logo.png
diff --git a/public/assets/organisation.png b/public/assets/organisation.png
diff --git a/public/assets/preview.png b/public/assets/preview.png
diff --git a/public/assets/pytch_alt.png b/public/assets/pytch_alt.png
diff --git a/public/assets/pytch_jr.png b/public/assets/pytch_jr.png
diff --git a/public/assets/pytch_org.png b/public/assets/pytch_org.png
diff --git a/public/assets/tutorial-assets/boing.png b/public/assets/tutorial-assets/boing.png
diff --git a/public/assets/tutorial-assets/catch.png b/public/assets/tutorial-assets/catch.png
diff --git a/public/assets/tutorial-assets/qbert.png b/public/assets/tutorial-assets/qbert.png
diff --git a/public/assets/tutorial-assets/splat.png b/public/assets/tutorial-assets/splat.png
diff --git a/public/assets/type/HankenGrotesk-VariableFont_wght.ttf b/public/assets/type/HankenGrotesk-VariableFont_wght.ttf
diff --git a/public/assets/type/PxGrotesk-Bold.otf b/public/assets/type/PxGrotesk-Bold.otf
diff --git a/public/assets/welcome/Icon-02.png b/public/assets/welcome/Icon-02.png
diff --git a/public/assets/welcome/Overview.mp4 b/public/assets/welcome/Overview.mp4
diff --git a/public/assets/welcome/abstract_image.png b/public/assets/welcome/abstract_image.png
diff --git a/public/assets/welcome/invaders.png b/public/assets/welcome/invaders.png
diff --git a/public/assets/welcome/normal-editor-preview-1024x693.png b/public/assets/welcome/normal-editor-preview-1024x693.png
diff --git a/public/assets/welcome/pytch_girls_computer.webp b/public/assets/welcome/pytch_girls_computer.webp
diff --git a/public/assets/welcome/script-by-script-preview-1-1024x693.png b/public/assets/welcome/script-by-script-preview-1-1024x693.png
diff --git a/src/App.tsx b/src/App.tsx
@@ -17,6 +17,7 @@ import "./pytch-jr-ide.scss";
 import "./pytch-jr-lesson.scss";
 import "./help-sidebar.scss";
 import "./font-awesome-lib";
+import "./pytch-welcome.scss";
 
 import { AllModals } from "./components/AllModals";
 import { SingleTutorial } from "./components/SingleTutorial";
@@ -131,4 +132,4 @@ function App() {
   );
 }
 
-export default App;
+export default App;
diff --git a/src/components/<nav>.html b/src/components/<nav>.html
@@ -0,0 +1,40 @@
+<nav>
+   <div className="title-and-version">
+     <h1>
+       <a href="/app/" style={{ color: "white !important" }}>
+         Pytch
+       </a>
+     </h1>
+     <a className="version-tag" href="/doc/releases/changelog.html">
+       v1.11.1
+     </a>
+   </div>
+   <div
+     className="hamburger-menu"
+     onclick="toggleNav()"
+     aria-label="click here for navigation menu"
+   >
+     <div />
+     <div />
+     <div />
+   </div>
+   <ul>
+     <li>
+       <a href="https://pytch.scss.tcd.ie/">About... </a>
+     </li>
+     <li>
+       <a href="/doc/index.html">Help/Info?</a>
+     </li>
+     <Link to="/tutorials/">
+      <li>Tutorials</li>
+    </Link>
+     <li>
+       <a href="https://pytch.scss.tcd.ie/lesson-plans/">Lesson plans</a>
+     </li>
+     <li>
+       <a href="/app/my-projects/">My projects</a>
+     </li>
+     <li className="mail">✉</li>
+   </ul>
+ </nav>
+
diff --git a/src/components/IDE.tsx b/src/components/IDE.tsx
@@ -15,6 +15,7 @@ import { IDEContents_Flat } from "./IDEContents_Flat";
 import { IDEContents as IDEContents_Junior } from "./Junior/IDEContents";
 import { ExceptionDisplay } from "./ExceptionDisplay";
 
+
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 declare let Sk: any;
 

diff --git a/src/components/NavBanner.tsx b/src/components/NavBanner.tsx
@@ -1,37 +1,71 @@
-import React from "react";
+import React, { useEffect } from 'react';
 import { envVarOrFail, withinSite } from "../env-utils";
 import { Link } from "./LinkWithinApp";
-import { pytchResearchSiteUrl } from "../constants";
+
 
 const NavBanner = () => {
-  const versionTag = envVarOrFail("VITE_VERSION_TAG");
+
+  useEffect(() => {
+    function toggleNav() {
+      const navUl = document.querySelector("nav ul");
+      if (navUl) {
+        navUl.classList.toggle("show");
+      }
+    }
+
+    const hamburgerMenu = document.querySelector(".hamburger-menu");
+    if (hamburgerMenu) {
+      hamburgerMenu.addEventListener("click", toggleNav);
+    }
+
+    return () => {
+      if (hamburgerMenu) {
+        hamburgerMenu.removeEventListener("click", toggleNav);
+      }
+    };
+  }, []); // run only once on mount
+
+
   return (
-    <div className="NavBar">
+    <nav>
       <div className="title-and-version">
-        <Link to="/">
-          <h1>
-            Pytch <span className="beta-tag">BETA</span>
-          </h1>
-        </Link>
-        <p className="version-tag">
-          <a href={withinSite("/doc/releases/changelog.html")}>{versionTag}</a>
-        </p>
+        <h1>
+          <a href="/" style={{ color: "white !important" }}>
+            Pytch
+          </a>
+        </h1>
+        {/* {<a className="version-tag" href={withinSite("/doc/releases/changelog.html")}>
+          v2.0.0
+        </a>} */}
+      </div>
+      <div
+        className="hamburger-menu"
+
+        aria-label="click here for navigation menu"
+      >
+        <div /> {/*<!-- This produces the horizontal bars -->*/}
+        <div />
+        <div />
       </div>
       <ul>
-        <a href={pytchResearchSiteUrl}>
-          <li>About Pytch</li>
-        </a>
-        <a href={withinSite("/doc/index.html")}>
-          <li>Help</li>
-        </a>
-        <Link to="/tutorials/">
-          <li>Tutorials</li>
-        </Link>
-        <Link to="/my-projects/">
-          <li>My projects</li>
-        </Link>
+        <li>
+          <a href={withinSite("https://pytch.scss.tcd.ie/")}>About... </a>
+        </li>
+        <li>
+          <a href={withinSite("/doc/index.html")}>Help/Info?</a>
+        </li>
+        <li>
+          <Link to="/tutorials/">Tutorials</Link>
+        </li>
+        <li>
+          <a href="https://pytch.scss.tcd.ie/lesson-plans/">Lesson plans</a>
+        </li>
+        <li>
+          <Link to="/my-projects/">My projects</Link>
+        </li>
+        <li className="mail">&#x2709;</li>
       </ul>
-    </div>
+    </nav>
   );
 };
 

diff --git a/src/components/ProjectList.tsx b/src/components/ProjectList.tsx
@@ -13,6 +13,7 @@ import { EmptyProps, assertNever } from "../utils";
 import { MtimeDisplay } from "./MtimeDisplay";
 import { EditorKindThumbnail } from "./EditorKindThumbnail";
 
+
 type ProjectCardProps = {
   project: IDisplayedProjectSummary;
   anySelected: boolean;

diff --git a/src/components/SiteFooter.tsx b/src/components/SiteFooter.tsx
@@ -0,0 +1,76 @@
+import React from "react";
+import { envVarOrFail, withinSite } from "../env-utils";
+import { Link } from "./LinkWithinApp";
+import { pytchResearchSiteUrl } from "../constants";
+import { urlWithinApp } from "../env-utils";
+
+
+const SiteFooter = () => {
+    const sfi_logo = urlWithinApp("/assets/logos/sfi_logo.png");
+    const tcd_logo = urlWithinApp("/assets/logos/tcd_logo.png");
+    const tudublin_logo = urlWithinApp("/assets/logos/tudublin_logo.png");
+    return (
+              <footer className="site-footer">
+          <div className="section-content">
+            <div className="sitemap">
+              <div className="list-container">
+                <h2>
+                  Contact us<span role="presentation">_</span>
+                </h2>
+                <ul>
+                  <li>
+                    <a href="mailto:info@pytch.org">Email</a>
+                  </li>
+                  <li>
+                    <a href="https://twitter.com/pytchlang/">Twitter</a>
+                  </li>
+                </ul>
+              </div>
+              <div className="list-container">
+                <h2>
+                  About<span role="presentation">_</span>
+                </h2>
+                <ul>
+                  <li>
+                    <a href="https://pytch.scss.tcd.ie/who-we-are/">Our team</a>
+                  </li>
+                  <li>
+                    <a href="https://pytch.scss.tcd.ie/research/">Our research</a>
+                  </li>
+                </ul>
+              </div>
+              <div className="list-container">
+                <h2>
+                  For teachers<span role="presentation">_</span>
+                </h2>
+                <ul>
+                  <li><Link to="/tutorials/">Tutorials</Link></li>
+                  <li>
+                    <a href="https://pytch.scss.tcd.ie/lesson-plans/">Lesson plans</a>
+                  </li>
+                </ul>
+              </div>
+              {/*
+    <div class="list-container">
+      <h2>Resources<span role="presentation">_</span></h2>
+      <ul>
+        <li><a href="https://www.pytch.org/doc/developer.html">Info for developers</a></li>
+        <li><a href="https://www.pytch.org/doc/webapp/user/index.html">Help</a></li>
+      </ul>
+    </div>
+    */}
+            </div>
+            <div className="section-images">
+              <img src={sfi_logo} alt="Science Foundation Ireland" />
+              <img src={tcd_logo} alt="Trinity College Dublin" />
+              <img src={tudublin_logo} alt="TUDublin" />
+
+            </div>
+          </div>
+        </footer>
+
+    );
+  };
+
+  export default SiteFooter;
+