update layout

gatsby-browser.js

@@ -7,6 +7,7 @@ import Modals from "./src/components/Modals"
 import { AvailableModalsViews, useBrowserStore } from "./src/store"
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query"
 import PrefetchData from "./src/components/PrefetchData"
+import PageLayout from "./src/components/PageLayout"
 
 // Logs when the client route changes
 export function onRouteUpdate({ location, prevLocation }) {
@@ -43,10 +44,10 @@ export function onRouteUpdate({ location, prevLocation }) {
   }
 
   // always update store with view and viewId
-  useBrowserStore.setState({
-    view,
-    viewId,
-  })
+  // useBrowserStore.setState({
+  //   view,
+  //   viewId,
+  // })
 }
 
 // Create a client
@@ -70,3 +71,9 @@ export function wrapRootElement({ element, props }) {
     </QueryClientProvider>
   )
 }
+
+// wraps every page in a component
+export function wrapPageElement({ element, props }) {
+  console.log("[gatsby-browser]@wrapPageElement", props)
+  return <PageLayout {...props}>{element}</PageLayout>
+}

gatsby-node.js

@@ -121,7 +121,14 @@ exports.createPages = async function ({ actions, graphql }) {
     actions.createPage({
       path: `/notebook/${node.name}`,
       component: require.resolve(`./src/templates/Notebook.js`),
-      context: { node },
+      context: {
+        type: "notebook",
+        data: {
+          ...notebooksMap[node.name],
+          body: node.childMdx.body,
+          tableOfContents: node.childMdx.tableOfContents,
+        },
+      },
     })
   })
   const { data: collections } = await graphql(`
@@ -134,6 +141,7 @@ exports.createPages = async function ({ actions, graphql }) {
           name
           childMdx {
             excerpt
+            tableOfContents
             frontmatter {
               title
               notebooks

package.json

@@ -16,9 +16,12 @@
     "clean": "gatsby clean"
   },
   "dependencies": {
+    "@codemirror/lang-python": "^6.1.4",
     "@mdx-js/react": "^3.0.0",
     "@react-spring/web": "^9.7.3",
     "@tanstack/react-query": "^5.25.0",
+    "@uiw/codemirror-theme-nord": "^4.21.24",
+    "@uiw/react-codemirror": "^4.21.24",
     "axios": "^1.6.7",
     "bootstrap": "^5.3.2",
     "boring-avatars": "^1.10.1",

src/components/Background.js

@@ -53,8 +53,8 @@ const Background = () => {
         </defs>
       </svg>
       <div className="gradients-container">
-        {/* <div className="g1"></div>
-        <div className="g2"></div> */}
+        <div className="g1"></div>
+        <div className="g2"></div>
         <div className="g3"></div>
         <a.div className="interactive " style={{ x, y }} />
       </div>

src/components/CollectionCard.js

@@ -3,7 +3,7 @@ import "./CollectionCard.css"
 import { useDataStore } from "../store"
 import NotebookCard from "./NotebookCard"
 
-const CollectionCard = ({ name }) => {
+const CollectionCard = ({ name, children }) => {
   const [, getCollectionByName] = useDataStore((state) => [
     state.isReady,
     state.getCollectionByName,
@@ -14,6 +14,7 @@ const CollectionCard = ({ name }) => {
       <section className="p-3">
         <h3>{collection?.title}</h3>
         <p>{collection?.excerpt}</p>
+        {children}
       </section>
       <ol className="mb-3 mx-3">
         {collection?.notebooks.map((name, i) => (

src/components/Footer.js

@@ -71,5 +71,5 @@ const Footer = () => {
     </footer>
   )
 }
-
-export default Footer
+// render only once.
+export default React.memo(Footer, true)

src/components/ModalTutorial.js

@@ -23,6 +23,7 @@ const ModalTutorial = ({ onClose, ...props }) => {
       axios.get(url).then((res) => {
         return res.data
       }),
+    enabled: !!name,
   })
 
   console.info(`[ModalTutorial] ${name} ${url} ${status}`)

src/components/NotebookCard.css

@@ -1,5 +1,5 @@
 .NotebookCard {
-  border-radius: var(--impresso-border-rqdius-sm);
+  border-radius: var(--impresso-border-radius-sm);
   background: white;
 }
 

src/components/NotebookCard.js

@@ -3,7 +3,7 @@ import { ModalNotebookPreviewView, useDataStore } from "../store"
 import AuthorCard from "./AuthorCard"
 import { Button } from "react-bootstrap"
 import "./NotebookCard.css"
-import { navigate } from "gatsby"
+import { Link, navigate } from "gatsby"
 import Avatar from "boring-avatars"
 import { ArrowRight } from "iconoir-react"
 import { DateTime } from "luxon"
@@ -45,14 +45,12 @@ const NotebookCard = ({ name }) => {
           </ol>
         </div>
         <div className="ms-auto">
-          <Button
-            variant="secondary"
-            className="p-0"
+          <Link
+            to={`/notebook/${notebook?.name}`}
             style={{ width: 36, height: 36 }}
-            onClick={navigateToNotebookPage}
           >
             <ArrowRight strokeWidth={2} />
-          </Button>
+          </Link>
         </div>
       </div>
     </div>

src/components/PageLayout.js

@@ -0,0 +1,47 @@
+import { useSpring } from "@react-spring/web"
+import { Link } from "gatsby"
+import React, { useEffect, useRef, useState } from "react"
+import { Button, Modal } from "react-bootstrap"
+import ModalNotebookPreview from "./ModalNotebookPreview"
+
+const PageLayout = ({ children, path, pageContext }) => {
+  console.log("[PageLayout] render props")
+  const [show, setShow] = useState(true)
+  const timerRef = useRef()
+
+  const handleClose = () => {
+    setShow(false)
+    clearTimeout(timerRef.current)
+    timerRef.current = setTimeout(() => {
+      window.history.back()
+    }, 800)
+  }
+  useEffect(() => {
+    return () => {
+      clearTimeout(timerRef.current)
+    }
+  }, [])
+  useEffect(() => {
+    // scroll to 0 0
+    window.scrollTo(0, 0)
+    if (path === "/") {
+      setShow(false)
+    } else {
+      setShow(true)
+    }
+  }, [path])
+
+  return (
+    <Modal show={show} onHide={handleClose} backdrop="static" keyboard={false}>
+      <Modal.Header closeButton>
+        <Link to="/">impresso-datalab</Link>
+        <Button variant="primary" onClick={handleClose}>
+          close
+        </Button>
+      </Modal.Header>
+      <Modal.Body className="container">{children}</Modal.Body>
+    </Modal>
+  )
+}
+
+export default PageLayout

src/components/PrefetchData.js

@@ -7,7 +7,7 @@ const PrefetchData = () => {
     state.setData,
     state.isReady,
   ])
-  console.info("[PrefetchData] load data", !isReady)
+  console.info("[PrefetchData] load data:", isReady ? "ready" : "not ready")
   // this schema updates the store so that e always have the full list of authors and books
   useQuery({
     queryKey: ["todoss"],
@@ -22,13 +22,12 @@ const PrefetchData = () => {
           axios
             .get((process.env.GATSBY_PATH_PREFIX || "") + url)
             .then((res) => {
-              console.info(`[PrefetchData] ${url}`, res.data)
+              console.debug(`[PrefetchData] ${url}`, res.data)
               return res.data
             })
         )
       ).then((res) => {
-        console.info("[PrefetchData] done", res)
-
+        console.info("[PrefetchData] completed.")
         setData({
           authorsMap: res[0],
           notebooksMap: res[1],

src/components/Wall.js

@@ -1,8 +1,19 @@
 import React from "react"
-import { graphql, useStaticQuery } from "gatsby"
+import { Link, graphql, useStaticQuery } from "gatsby"
 import { Col, Container, Row } from "react-bootstrap"
 import TutorialCard from "./TutorialCard"
 import CollectionCard from "./CollectionCard"
+import ReactCodeMirror from "@uiw/react-codemirror"
+import { nord } from "@uiw/codemirror-theme-nord"
+import { python } from "@codemirror/lang-python"
+
+const CodeSample = `
+from impresso-py import impresso 
+
+print(impresso.version())
+
+results = impresso.search("moon landing")
+`
 
 const Wall = () => {
   const { highlighted, collections, notebooks, authors, tutorials } =
@@ -62,30 +73,45 @@ const Wall = () => {
     `)
 
   return (
-    <Container fluid className="Index">
+    <Container className="Wall">
       <Row>
         <Col>
           <h2>Highlights</h2>
           {highlighted.nodes.length ? (
-            highlighted.nodes.map((node) => (
-              <CollectionCard name={node.name} key={node.name} />
-            ))
+            <CollectionCard name={highlighted.nodes[0].name}>
+              <ReactCodeMirror
+                value={CodeSample}
+                theme={nord}
+                extensions={[python()]}
+              />
+            </CollectionCard>
           ) : (
             <p>No highlighted collections found.</p>
           )}
         </Col>
         <Col>
           <h1 className="display-3 ">Give your media monitoring a boost.</h1>
+
+          <p>
+            We collected <b>{notebooks.totalCount}</b>{" "}
+            <em>Jupyter notebooks</em> so far; developed{" "}
+            <b>{tutorials.totalCount}</b> tutorials; orchestrated{" "}
+            <b>{collections.totalCount}</b> collections of notebooks, developed
+            by <b>{authors.totalCount}</b> authors.
+          </p>
           <section className="mt-5">
-            <p>
-              We collected <b>{notebooks.totalCount}</b> Jupyter notebooks so
-              far; developed <b>{tutorials.totalCount}</b> tutorials;
-              orchestrated <b>{collections.totalCount}</b> collections of
-              notebooks, developed by <b>{authors.totalCount}</b> authors.
-            </p>
-            <CollectionCard name="notebooks-we-are-testing-right-now" />
+            <CollectionCard name="notebooks-we-are-testing-right-now"></CollectionCard>
           </section>
         </Col>
+        <Col md={{ span: 2 }} lg={{ span: 2 }}>
+          <h3>Quick links</h3>
+          <p>
+            The `impresso-py` python package documentation is on{" "}
+            <Link to="/docs">readthedocs</Link>. All the notebooks have each an
+            independent environment you can spin with docker, preview on
+            mybinder, google colab...
+          </p>
+        </Col>
       </Row>
       <Row className="mb-3 py-3 align-items-bottom">
         <Col className=" d-flex  justify-content-center align-items-end ">

src/styles/style.css

@@ -5,7 +5,8 @@
   --impresso-color-yellow: rgb(--impresso-color-yellow-code);
   --impresso-color-black: #343a40;
   --impresso-color-black-rgb: 52, 58, 64;
-  --impresso-border-rqdius-sm: 20px;
+  --impresso-border-radius-xs: 5px;
+  --impresso-border-radius-sm: 20px;
   --impresso-border-radius-lg: 30px;
   --impresso-border-radius-xl: 40px;
   --bs-font-sans-serif: "Satoshi-Variable", -apple-system, BlinkMacSystemFont,
@@ -129,7 +130,7 @@ b {
 }
 
 .container-fluid {
-  max-width: 1414px;
+  max-width: 1600px;
 }
 
 .modal-backdrop {
@@ -147,3 +148,14 @@ hr {
   color: var(--impresso-color-black);
   opacity: 1;
 }
+
+/* codemirror theme refinement */
+.cm-editor {
+  box-shadow: var(--shadow-lg);
+  border-radius: var(--impresso-border-radius-xs);
+}
+
+.cm-gutters {
+  border-start-start-radius: var(--impresso-border-radius-xs);
+  border-end-start-radius: var(--impresso-border-radius-xs);
+}

src/templates/Notebook.js

@@ -1,8 +1,26 @@
-import React from 'react'
+import React from "react"
+import { Col, Container, Row } from "react-bootstrap"
+import Markdown from "../components/Markdown"
 
-const Notebook = ({ path, ...props }) => {
+const Notebook = ({ path, pageContext, ...props }) => {
   return (
-    <div className='Notebook'>
+    <div className="Notebook">
+      <Container>
+        <h1>{pageContext.data.title}</h1>
+        <Row>
+          <Col>
+            <Markdown>{pageContext.data.body}</Markdown>
+          </Col>
+          <Col>
+            {pageContext.data.excerpt}
+            <ul>
+              {pageContext.data.tableOfContents.items?.map((d, i) => (
+                <li key={i}>{d.title}</li>
+              ))}
+            </ul>
+          </Col>
+        </Row>
+      </Container>
       {JSON.stringify(path)}
       <pre>{JSON.stringify(props, null, 2)}</pre>
     </div>