Merge branch 'dev' into main

DHRI-Curriculum · Oct 19, 2023 · 2796134 · 2796134
2 parents fcc0018 + c427c43
commit 2796134
Show file tree

Hide file tree

Showing 7 changed files with 87 additions and 74 deletions.
diff --git a/components/Editor/DrawerEditorMovable.js → components/Editor/DrawerEditor.js b/components/Editor/DrawerEditorMovable.js → components/Editor/DrawerEditor.js
@@ -27,7 +27,7 @@ export default function DrawerEditor(props) {
         setIsResizing(true);
         setLastDownX(e.clientX);
     };
-    
+
     const handleMouseup = e => {
         setIsResizing(false);
         if (document.getElementById('iframe')) {
@@ -59,7 +59,7 @@ export default function DrawerEditor(props) {
             document.body.style.oUserSelect = 'none';
             document.body.style.userSelect = 'none';
 
-            
+
             let offsetRight =
                 document.body.offsetWidth - (e.clientX - document.body.offsetLeft);
             let minWidth = 50;
@@ -110,10 +110,14 @@ export default function DrawerEditor(props) {
                     handleOpenClose={handleOpenClose}
                     runButtonNeeded={true}
                     {...props} />
-                // <Jupyter
-                //     handleOpenClose={handleOpenClose}
-                //     runButtonNeeded={false}
-                // />
+            )
+        }
+        else if (language === 'jupyter') {
+            return (
+                <Jupyter
+                    handleOpenClose={handleOpenClose}
+                    runButtonNeeded={false}
+                />
             )
         }
         else if (language === 'javascript') {
@@ -160,10 +164,11 @@ export default function DrawerEditor(props) {
                     className={'editor-button'}
                     onClick={handleOpenClose}
                     style={{
-                        color: "#32c259",
+                        color: "white",
                     }}
                 >
                     <CodeIcon />
+                    Open Code Editor
                 </Button>
             </div>
             <Drawer
@@ -186,37 +191,38 @@ export default function DrawerEditor(props) {
                 }}
 
             ><div
-            id="dragger"
-            onMouseDown={event => {
-                handleMousedown(event);
-                // setIsResizing(true);
-            }}
-            onClick={event => {
-                event.stopPropagation();
-            }}
-            style={{
-                width: '5px',
-                cursor: 'ew-resize',
-                padding: '4px 0 0',
-                borderTop: '1px solid #ddd',
-                position: 'absolute',
-                top: 0,
-                left: 0,
-                bottom: 0,
-                zIndex: '100',
-                backgroundColor: '#f4f7f9'
-            }}
-        />
-                {/* <Button
+                    id="dragger"
+                    onMouseDown={event => {
+                        handleMousedown(event);
+                        // setIsResizing(true);
+                    }}
+                    onClick={event => {
+                        event.stopPropagation();
+                        console.log('clicked')
+                    }}
+                    style={{
+                        width: '5px',
+                        cursor: 'ew-resize',
+                        padding: '4px 0 0',
+                        borderTop: '1px solid #ddd',
+                        position: 'absolute',
+                        top: 0,
+                        left: 0,
+                        bottom: 0,
+                        zIndex: '100',
+                        backgroundColor: '#f4f7f9'
+                    }}
+                />
+                <Button
                     aria-label="open drawer"
                     className={'editor-button'}
                     onClick={handleOpenClose}
                     style={{
-                        color: "#32c259",
+                        color: "white",
                     }}
                 >
-                    <CodeIcon />
-                </Button> */}
+                    <CodeIcon /> Close Code Editor
+                </Button>
                 <div className='drawer-editor'>
                     {whichEditor()}
                 </div>

diff --git a/components/Editor/EditorTopbar.js b/components/Editor/EditorTopbar.js
@@ -11,7 +11,7 @@ export default function EditorTopbar(props) {
     return (
         <>
             <div className="editorTopBarButtonsContainer">
-                <Button
+                {/* <Button
                     color="primary"
                     aria-label="open drawer"
                     onClick={props.handleOpenClose}
@@ -21,7 +21,7 @@ export default function EditorTopbar(props) {
                             color: "#32c259",
                         }}
                     />
-                </Button>
+                </Button> */}
                 {(!spinnerNeeded && runButtonNeeded) && <Button
                     onClick={() => {
                         props.run();

diff --git a/components/Editor/PythonEditorComponent.js b/components/Editor/PythonEditorComponent.js
@@ -105,15 +105,23 @@ matplotlib.use("module://matplotlib_pyodide.html5_canvas_backend")\n`
     namespace.set("print", (s) => {
       printList.push(s.toString());
     });
-    namespace.set("input", (s) => {
-      var response = prompt(s);
-      return response;
-    });
+    // namespace.set("input", (s) => {
+    //   var response = prompt(s);
+    //   return response;
+    // });
     namespace.set("log", (s) => {
       console.log(s);
     });
     await pyodide.runPythonAsync(checkImports(code),
       { globals: namespace });
+    await pyodide.runPythonAsync(
+`
+from js import prompt
+import builtins
+def input(p=""):
+  return prompt(p)
+builtins.input = input
+`, { globals: namespace });
     return await pyodide.runPythonAsync(code,
       { globals: namespace }
     ).then(result => {

diff --git a/components/Editor/PythonREPLComponent.js b/components/Editor/PythonREPLComponent.js
@@ -33,7 +33,7 @@ export default function PythonREPLComponent() {
                 from pyodide import to_js
                 from pyodide.console import PyodideConsole, repr_shorten, BANNER
                 import __main__
-               
+                from js import prompt
                 pyconsole = PyodideConsole(__main__.__dict__)
                 import builtins
                 async def await_fut(fut):
@@ -43,6 +43,9 @@ export default function PythonREPLComponent() {
                   return to_js([res], depth=1)
                 def clear_console():
                   pyconsole.buffer = []
+                def input(p=""):
+                  return prompt(p)
+                builtins.input = input
             `,
       { globals: namespace }
     );

diff --git a/components/Hooks/UseWorkshopsCard.js b/components/Hooks/UseWorkshopsCard.js
@@ -77,8 +77,6 @@ export default function UseWorkshopComponent({ workshop, gitUser, gitRepo, instU
         }
     }, [coverimage])
 
-    console.log(parsedWorkshop)
-
     const workshopLink = '../dynamic/?user=' + gitUser + '&repo=' + gitRepo + '&file=' + workshop.name.split('.')[0] + '&instUser=' + instUser + '&instRepo=' + instRepo;
     return (
         <>

diff --git a/pages/dynamic/index.js b/pages/dynamic/index.js
@@ -3,14 +3,14 @@ import Head from 'next/head'
 import Header from '../../components/Header'
 import matter from 'gray-matter'
 import { useEffect, useState, Fragment } from 'react'
+import { useRouter } from 'next/router'
 import ConvertMarkdown from '../../components/WorkshopPieces/ConvertMarkdown'
 import Frontmatter from '../../components/WorkshopPieces/Frontmatter';
 import WorkshopHeader from '../../components/WorkshopPieces/WorkshopHeader'
 import Footer from '../../components/Footer'
 import Container from '@mui/material/Container';
 import Skeleton from '@mui/material/Skeleton';
-// import DrawerEditor from '../../components/Editor/DrawerEditor'
-import DrawerEditorMovable from '../../components/Editor/DrawerEditorMovable'
+import DrawerEditorMovable from '../../components/Editor/DrawerEditor'
 import { styled } from '@mui/material/styles';
 import useUploads from '../../components/Hooks/UseUploads';
 import useWorkshop from '../../components/Hooks/UseWorkshop';
@@ -71,6 +71,8 @@ export default function WorkshopPage({
   const [allUploads, setAllUploads] = useState([]);
   const uploads = useUploads({ setAllUploads, gitUser, gitRepo, gitFile });
 
+  const router = useRouter();
+
   // convert markdown to html and split into pages
   const convertContenttoHTML = function (content) {
     const htmlifiedContent = ConvertMarkdown(content, uploads, workshopTitle, language, setCode, setEditorOpen, setAskToRun, gitUser, gitRepo, gitFile);
@@ -82,10 +84,17 @@ export default function WorkshopPage({
         return acc;
       } else if (curr.type === 'h1') {
         allPages.push([curr]);
-        // this changes from long pages to short ones 
-      } else if (curr.type === 'h2' && currentFile.data.long_pages === 'true') {
+      }
+      else if ((curr.type === 'h2' && currentFile.data.long_pages === 'false')
+        || (curr.type === 'h2' && currentFile.data.long_pages === undefined)) {
         allPages.push([curr]);
-      } else {
+      }
+      // this changes from long pages to short ones 
+      else if (curr.type === 'h2' && currentFile.data.long_pages === 'true') {
+        // pass
+      }
+      // else if (curr.type === 'h2' && currentFile.data.long_pages === 'false')
+      else {
         allPages[allPages.length - 1].push(curr);
       }
       return acc;
@@ -120,6 +129,7 @@ export default function WorkshopPage({
     setEditing(urlParams.get('edit'));
     setInstUser(urlParams.get('instUser'));
     setInstRepo(urlParams.get('instRepo'));
+    setCurrentPage(Number(urlParams.get('page')));
     if (gitFile === null) {
       setBuiltURL(`https://api.github.com/repos/${gitUser}/${gitRepo}/contents/${gitRepo}.md`)
     }
@@ -145,6 +155,12 @@ export default function WorkshopPage({
     }
   }, [data])
 
+  useEffect(() => {
+    if (currentPage && pages.length > 0) {
+      setCurrentContent(pages[currentPage - 1]);
+    }
+  }, [currentPage, pages])
+
   useEffect(() => {
     if (currentFile != null && content != '') {
       const frontMatterContent = Frontmatter(currentFile, setCurrentPage, setCurrentContent,
@@ -230,8 +246,7 @@ export default function WorkshopPage({
       behavior: 'smooth'
     });
     const valueAsNumber = Number(value);
-    // CHANGE THIS
-    // router.push(`/dynamic/${slug[0]}/${slug[1]}/${slug[2]}/?page=${valueAsNumber}`, undefined, { shallow: true, scroll: false });
+    router.push(`/dynamic/?user=${gitUser}&repo=${gitRepo}&file=${gitFile}&page=${valueAsNumber}&instUser=${instUser}&instRepo=${instRepo}`, undefined, { shallow: true, scroll: false });
     setCurrentPage(valueAsNumber);
     setCurrentContent(pages[valueAsNumber - 1]);
   }
@@ -268,19 +283,15 @@ export default function WorkshopPage({
           props.workshopMode ? 'md' : '100vw'
         }
         sx={{
-          // position: 'relative',
-          // display: 'flex',
-          // flexDirection: 'column',
-          // justifyContent: 'flex-end',
           marginLeft: {
             md: '80px',
           },
           ...(props.workshopMode && {
             marginLeft: {
               md: '100px',
             },
-            // marginBottom: '250px',
-          })
+          }),
+          flexGrow: 1,
         }}
       >
         <Head>
@@ -312,20 +323,7 @@ export default function WorkshopPage({
             </div>
           </div>
         </Main>
-
-        {/* {language &&
-          <DrawerEditor
-            drawerWidth={drawerWidth}
-            open={editorOpen}
-            setEditorOpen={setEditorOpen}
-            text={code}
-            setText={setCode}
-            askToRun={askToRun}
-            setAskToRun={setAskToRun}
-            language={language}
-            allUploads={uploads}
-          />} */}
-        {language &&
+        {language && props.workshopMode &&
           <DrawerEditorMovable
             drawerWidth={drawerWidth}
             open={editorOpen}
@@ -337,7 +335,7 @@ export default function WorkshopPage({
             language={language}
             allUploads={uploads}
           />}
-          {/* {props.workshopMode && <Pagination currentPage={currentPage} pageTitles={pageTitles} handlePageChange={handlePageChange} pages={pages} />} */}
+        {/* {props.workshopMode && <Pagination currentPage={currentPage} pageTitles={pageTitles} handlePageChange={handlePageChange} pages={pages} />} */}
       </Container>
       {props.workshopMode &&
         <>

diff --git a/styles/styles.scss b/styles/styles.scss
@@ -130,6 +130,7 @@ html {
   display: flex;
   flex-direction: column;
   justify-content: flex-end;
+  // flex-grow: 1;
 }
 
 h1,
@@ -840,13 +841,12 @@ nav.sidenav {
 
 .editor-button-container {
   /* on the far right  */
-  position: fixed !important;
-  right: 0;
+  position: fixed;
+  right: 0px;
   top: 100px;
-  margin: 10px;
-  height: 30px;
   z-index: 100;
-  background-color: #000;
+  background-color: #24272E;
+  color: white;
 }
 
 .editorTopBarButtonsContainer {