feature

DHRI-Curriculum · Oct 30, 2023 · 209db40 · 209db40
1 parent 40a419d
commit 209db40
Show file tree

Hide file tree

Showing 7 changed files with 56 additions and 35 deletions.
diff --git a/components/Editor/DrawerEditor.js b/components/Editor/DrawerEditor.js
@@ -7,7 +7,6 @@ import CodeIcon from '@mui/icons-material/Code';
 import Button from '@mui/material/Button';
 import Drawer from '@mui/material/Drawer';
 import Webvm from '../Wasm/Webvm';
-import JupyterLoad from './JupyterLoad';
 import { useState, useEffect, useRef, Fragment } from 'react';
 
 export default function DrawerEditor(props) {

diff --git a/components/Editor/JupyterLoad.js b/components/Editor/JupyterLoad.js
diff --git a/components/WorkshopPieces/ConvertMarkdown.js b/components/WorkshopPieces/ConvertMarkdown.js
@@ -7,19 +7,18 @@ import Image from 'next/image'
 import Zoom from 'react-medium-image-zoom'
 import 'react-medium-image-zoom/dist/styles.css'
 import PythonREPLComponent from '../Editor/PythonREPLComponent';
-import EditorWithTabsComponent from '../Editor/EditorWithTabs';
 import CodeRunBox from '../Editor/CodeRunBox';
 import Download from './Download';
 import JSTerminal from '../Editor/JSTerminal';
 import Info from './Info';
+import JupyterLoad from './JupyterLoad';
 import SecretComponent from './SecretComponent';
 // import HTMLEditorComponent from './Editor/HTMLEditorComponent';
 // import { renderToStaticMarkup } from 'react-dom/server';
 // import he from 'he';
 
 
-export default function ConvertMarkdown(markdown, uploads, workshopTitle, language, setCode, setEditorOpen, setAskToRun, gitUser, gitRepo, gitFile) {
-
+export default function ConvertMarkdown(markdown, uploads, workshopTitle, language, setCode, setEditorOpen, setAskToRun, gitUser, gitRepo, gitFile, setJupyterSrc) {
 
     const Imager = ({ className, ...props }) => {
         let newProps = { ...props };
@@ -149,16 +148,6 @@ export default function ConvertMarkdown(markdown, uploads, workshopTitle, langua
     //     )
     // }
 
-
-    const EditorWithTabs = ({ className, children }) => {
-        const codeText = children.join('');
-        return (
-            <div>
-                <EditorWithTabsComponent defaultCode={codeText} />
-            </div>
-        )
-    }
-
     const PythonREPL = ({ className, children }) => {
         return (
             <div>
@@ -229,6 +218,16 @@ export default function ConvertMarkdown(markdown, uploads, workshopTitle, langua
         )
     }
 
+    const Jupyter = ({ className, children }) => {
+        return (
+            <div>
+                <JupyterLoad setJupyterSrc={setJupyterSrc}
+                gitFile={gitFile}
+                 />
+            </div>
+        )
+    }
+
     const Secret = ({ className, children }) => {
         return (
             <div>
@@ -284,11 +283,10 @@ export default function ConvertMarkdown(markdown, uploads, workshopTitle, langua
                             className: 'info-alert',
                         }
                     },
-
+                    Jupyter,
                     Quiz,
                     PythonREPL,
                     Terminal,
-                    EditorWithTabs,
                     JSTerminal,
                     Secret
                     // HTMLEditor,

diff --git a/components/WorkshopPieces/Frontmatter.js b/components/WorkshopPieces/Frontmatter.js
@@ -194,6 +194,7 @@ export default function Frontmatter(currentFile, setCurrentPage, setCurrentConte
         instructors={currentFile.data.instructors}
         editors={currentFile.data.editors}
         title={workshopTitle}
+        coverTitle={currentFile.data['cover title']}
       />
     </div>
   )

diff --git a/components/WorkshopPieces/FrontmatterFeature.js b/components/WorkshopPieces/FrontmatterFeature.js
@@ -1,7 +1,7 @@
 import { useEffect, useState } from 'react';
 
 
-export default function FrontmatterFeature({ authors, instructors, editors, coverImage, title }) {
+export default function FrontmatterFeature({ authors, instructors, editors, coverImage, title, coverTitle }) {
 
   const [src, setSrc] = useState(null);
   const randomNumberBetween1and7 = Math.floor(Math.random() * 7) + 1;
@@ -14,6 +14,9 @@ export default function FrontmatterFeature({ authors, instructors, editors, cove
     }
   }, [coverImage])
 
+  console.log(coverTitle)
+  const frontTitle = coverTitle ? coverTitle : title;
+
   return (
     <div className='frontmatter-feature'>
       <div>
@@ -27,7 +30,7 @@ export default function FrontmatterFeature({ authors, instructors, editors, cove
             style={{
               top: '30%'
             }}
-          >{title}</p>
+          >{frontTitle}</p>
         </div>
 
         {authors && authors.length > 0 && <div className='frontpage-feature-authors'>

diff --git a/components/WorkshopPieces/JupyterLoad.js b/components/WorkshopPieces/JupyterLoad.js
@@ -0,0 +1,35 @@
+import { useEffect } from 'react';
+import { Button } from '@mui/material';
+
+
+export default function JupyterLoad(props) {
+    console.log('props', props);
+    const jupyterSrc = props.jupyterSrc;
+    const setJupyterSrc = props.setJupyterSrc;
+
+    const uploads = props.allUploads;
+    // const fromURLString = uploads.map((upload) => {
+    //     return `&fromURL=${upload.download_url}`
+    // }
+    // ).join('');
+    const fromURLString = `&fromURL='https://raw.githubusercontent.com/${props.gitUser}/${props.gitRepo}/main/notebooks/${props.gitFile}.ipynb`
+
+
+    return (
+        <div className="download-button"
+            style={{
+                marginTop: '20px',
+            }}
+        >
+            <Button
+                className="button button-bark button-download"
+                style={{
+                    cursor: 'pointer',
+                }}
+                onClick={() => setJupyterSrc(`https://dhri-curriculum.github.io/jupyterlite/lab/index.html?${fromURLString}`)}
+            >
+            Import Jupyter Notebook
+            </Button>
+        </div>
+    )
+}
diff --git a/pages/dynamic/index.js b/pages/dynamic/index.js
@@ -76,7 +76,7 @@ export default function WorkshopPage({
 
   // 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);
+    const htmlifiedContent = ConvertMarkdown(content, uploads, workshopTitle, language, setCode, setEditorOpen, setAskToRun, gitUser, gitRepo, gitFile, setJupyterSrc);
     // split react element array into pages
     const allPages = [];
     const pages = htmlifiedContent?.props.children.reduce((acc, curr) => {
@@ -164,8 +164,7 @@ export default function WorkshopPage({
 
   useEffect(() => {
     if (currentFile != null && content != '') {
-      const frontMatterContent = Frontmatter(currentFile, setCurrentPage, setCurrentContent,
-        pages, instUser, instRepo, workshopTitle, pageTitles, currentPage);
+      const frontMatterContent = Frontmatter(currentFile, setCurrentPage, setCurrentContent, pages, instUser, instRepo, workshopTitle, pageTitles, currentPage);
       setPages([frontMatterContent, ...convertContenttoHTML(content)]);
     }
   }, [currentFile, content])