add data JSON

.gitignore

@@ -2,3 +2,5 @@ node_modules/
 .cache/
 public
 .DS_Store
+static/data/
+!static/data/.gitkeep

gatsby-browser.js

@@ -5,37 +5,61 @@ import 'bootstrap/dist/css/bootstrap.min.css'
 import './src/styles/style.css'
 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'
 
 // Logs when the client route changes
 export function onRouteUpdate({ location, prevLocation }) {
   console.log('[Layout] render')
   console.log('[gatsby-browser]@onRouteUpdate new pathname', location)
+  let view = null
+  let viewId = null
   // update zustand with search params, if any
   if (location.search) {
     const params = new URLSearchParams(location.search)
-    const view = params.get('view')
-    if (AvailableModalsViews.includes(view)) {
-      console.log('[gatsby-browser]@onRouteUpdate view:', view)
-      useBrowserStore.setState({ view })
+    const paramView = params.get('view')
+    const paramViewId = params.get('viewId')
+
+    if (AvailableModalsViews.includes(paramView)) {
+      console.log('[gatsby-browser]@onRouteUpdate view:', paramView)
+      view = String(paramView)
     } else {
       console.log(
         '[gatsby-browser]@onRouteUpdate view not recognized, close everything:',
-        view
+        paramView
+      )
+    }
+
+    // test view id against a regex (lowercase letters and numbers, only trailing slash)
+    if (paramViewId && /^[a-z0-9]+$/.test(paramViewId)) {
+      console.log('[gatsby-browser]@onRouteUpdate viewId:', paramViewId)
+      viewId = String(paramViewId)
+    } else {
+      console.log(
+        '[gatsby-browser]@onRouteUpdate viewId not recognized, close everything:',
+        paramViewId
       )
-      useBrowserStore.setState({ view: null })
     }
-  } else {
-    useBrowserStore.setState({ view: null })
   }
+
+  // always update store with view and viewId
+  useBrowserStore.setState({
+    view,
+    viewId,
+  })
 }
 
+// Create a client
+const queryClient = new QueryClient()
+
 // Wraps every page in a component
 export function wrapRootElement({ element, props }) {
   console.log('[gatsby-browser]@wrapRootElement')
   return (
-    <>
+    <QueryClientProvider client={queryClient}>
+      <PrefetchData />
       <Modals />
       <Layout {...props}>{element}</Layout>
-    </>
+    </QueryClientProvider>
   )
 }

gatsby-node.js

@@ -10,6 +10,9 @@ exports.createPages = async function ({ actions, graphql }) {
   const authorsMap = {}
   const notebooksMap = {}
   const collectionsMap = {}
+  if (!fs.existsSync('./static/data/notebooks')) {
+    fs.mkdirSync('./static/data/notebooks')
+  }
 
   const { data: authors } = await graphql(`
     query {
@@ -48,25 +51,28 @@ exports.createPages = async function ({ actions, graphql }) {
           accessTime
           childMdx {
             excerpt
+            body
+            tableOfContents
             frontmatter {
               title
               binderUrl
               authors
+              tags
             }
           }
         }
       }
     }
   `)
   console.log('createPages: n. notebooks: ', notebooks.allFile.nodes.length)
-
   notebooks.allFile.nodes.forEach((node) => {
     notebooksMap[node.name] = {
       name: node.name,
       path: `/notebook/${node.name}`,
       birthTime: node.birthTime,
       accessTime: node.accessTime,
       title: node.childMdx.frontmatter.title,
+      tags: node.childMdx.frontmatter.tags || [],
       excerpt: node.childMdx.excerpt,
       binderUrl: node.childMdx.frontmatter.binderUrl,
       authors: node.childMdx.frontmatter.authors || [],
@@ -83,6 +89,19 @@ exports.createPages = async function ({ actions, graphql }) {
       }
     })
 
+    fs.writeFileSync(
+      `./static/data/notebooks/${node.name}.json`,
+      JSON.stringify(
+        {
+          ...notebooksMap[node.name],
+          body: node.childMdx.body,
+          tableOfContents: node.childMdx.tableOfContents,
+        },
+        null,
+        2
+      )
+    )
+
     actions.createPage({
       path: `/notebook/${node.name}`,
       component: require.resolve(`./src/templates/Notebook.js`),
@@ -102,6 +121,7 @@ exports.createPages = async function ({ actions, graphql }) {
             frontmatter {
               title
               notebooks
+              tags
             }
           }
         }
@@ -117,6 +137,7 @@ exports.createPages = async function ({ actions, graphql }) {
       title: node.childMdx.frontmatter.title,
       excerpt: node.childMdx.excerpt,
       notebooks: node.childMdx.frontmatter.notebooks,
+      tags: node.childMdx.frontmatter.tags || [],
       contributors: [],
     }
     node.childMdx.frontmatter.notebooks.forEach((notebook) => {
@@ -149,12 +170,13 @@ exports.createPages = async function ({ actions, graphql }) {
         return acc
       }, {})
     )
-    collectionsMap[node.name].contributors.forEach((contributor) => {
+    collectionsMap[node.name].contributors.forEach(([k, contributor]) => {
       if (authorsMap[contributor.name]) {
         authorsMap[contributor.name].collections.push(node.name)
       } else {
         console.error(
-          `Contributor ${contributor.name} not found in authorsMap, skipping collection ${node.name}`
+          `Contributor ${contributor.name} not found in authorsMap, skipping collection ${node.name}`,
+          collectionsMap[node.name].contributors
         )
       }
     })

package.json

@@ -19,6 +19,7 @@
     "@tanstack/react-query": "^5.25.0",
     "axios": "^1.6.7",
     "bootstrap": "^5.3.2",
+    "boring-avatars": "^1.10.1",
     "debug": "^4.3.4",
     "gatsby": "^5.13.2",
     "gatsby-plugin-manifest": "^5.13.1",
@@ -27,6 +28,9 @@
     "gatsby-plugin-mdx-source-name": "^1.0.1",
     "gatsby-plugin-sitemap": "^6.13.1",
     "gatsby-source-filesystem": "^5.13.1",
+    "iconoir-react": "^7.5.0",
+    "luxon": "^3.4.4",
+    "marked": "^12.0.1",
     "react": "^18.2.0",
     "react-bootstrap": "^2.10.0",
     "react-dom": "^18.2.0",

src/collections/basic-datavis.mdx

@@ -0,0 +1,10 @@
+---
+title: 'Basic Datavisualisation'
+
+notebooks:
+  - time-distribution-of-a-search
+authors:
+  - impresso-team
+---
+
+Three easy steps to enter the _impresso_ way of doing research.

src/collections/enter-impresso.mdx

@@ -3,6 +3,7 @@ title: 'Enter *impresso*'
 tags:
   - highlight
 notebooks:
+  - setup
   - team-starter-pack
 authors:
   - impresso-team

src/collections/notebooks-we-are-testing-right-now.mdx

@@ -0,0 +1,11 @@
+---
+title: Notebooks we are testing right now
+notebooks:
+  - introduction-to-topic-modeling
+  - time-distribution-of-a-search
+  - team-starter-pack
+tags:
+  - testing
+  - notebooks
+  - topic-modeling
+---

src/components/AuthorCard.jsx

@@ -0,0 +1,10 @@
+import React from 'react'
+import { useDataStore } from '../store'
+
+const AuthorCard = ({ name }) => {
+  const getAuthorByName = useDataStore((state) => state.getAuthorByName)
+  const author = getAuthorByName(name)
+  return <b>{author.fullName || name}</b>
+}
+
+export default AuthorCard

src/components/CollectionCard.css

@@ -1,4 +1,11 @@
 .CollectionCard {
-  border-radius: 5px;
-  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
+  border-radius: var(--impresso-border-radius-lg);
+
+  box-shadow: var(--shadow-lg);
+}
+
+.CollectionCard ol {
+  padding: 0;
+  margin: 0;
+  list-style: none;
 }

src/components/CollectionCard.js

@@ -1,20 +1,24 @@
 import React from 'react'
 import './CollectionCard.css'
-import { graphql, useStaticQuery } from 'gatsby'
+import { useDataStore } from '../store'
+import NotebookCard from './NotebookCard'
 
-const CollectionCard = ({
-  frontmatter = {},
-  name = '',
-  notebooks = [],
-  excerpt = '',
-}) => {
+const CollectionCard = ({ name }) => {
+  const getCollectionByName = useDataStore((state) => state.getCollectionByName)
+  const collection = getCollectionByName(name)
   return (
-    <div className='CollectionCard border border-dark d-inline-block'>
-      <div className='p-3'>
-        <h3>{frontmatter.title}</h3>
-        <p>{excerpt}</p>
-      </div>
-      <pre>{JSON.stringify(notebooks, null, 2)}</pre>
+    <div className='CollectionCard d-inline-block'>
+      <section className='p-3'>
+        <h3>{collection?.title}</h3>
+        <p>{collection?.excerpt}</p>
+      </section>
+      <ol className='mb-3 mx-3'>
+        {collection?.notebooks.map((name, i) => (
+          <li key={i} className='mt-2'>
+            <NotebookCard name={name} />
+          </li>
+        ))}
+      </ol>
     </div>
   )
 }

src/components/Layout.js

@@ -2,8 +2,11 @@ import { Link } from 'gatsby'
 import React from 'react'
 import { Col, Container, Row } from 'react-bootstrap'
 import Header from './Header'
+import { useDataStore } from '../store'
 
 const Layout = ({ children }) => {
+  const isDataReady = useDataStore((state) => state.isReady)
+
   console.log('[Layout] render')
   return (
     <>
@@ -22,7 +25,7 @@ const Layout = ({ children }) => {
                 </li>
               </ul>
             </Col>
-            <Col></Col>
+            <Col>{isDataReady ? 'ready' : 'loading'}</Col>
           </Row>
         </Container>
       </footer>

src/components/Modals.js

@@ -5,7 +5,7 @@ import { navigate } from 'gatsby'
 import ModalLogin from './ModalLogin'
 import ModalNotebookPreview from './ModalNotebookPreview'
 
-const Modals = ({ debug = true }) => {
+const Modals = ({ debug = false }) => {
   const onCloseHandler = () => {
     navigate('')
   }

src/components/NotebookCard.css

@@ -0,0 +1,9 @@
+.NotebookCard {
+  border-radius: var(--impresso-border-rqdius-sm);
+  background: white;
+}
+
+.NotebookCard h3 {
+  font-size: var(--fs18px);
+  font-weight: bold;
+}

src/components/NotebookCard.js

@@ -0,0 +1,53 @@
+import React from 'react'
+import { ModalNotebookPreviewView, useDataStore } from '../store'
+import AuthorCard from './AuthorCard'
+import { Button } from 'react-bootstrap'
+import './NotebookCard.css'
+import { navigate } from 'gatsby'
+import Avatar from 'boring-avatars'
+import { ArrowRight } from 'iconoir-react'
+
+const AvatarVariants = ['marble', 'beam', 'pixel', 'sunset', 'ring', 'bauhaus']
+const NotebookCard = ({ name }) => {
+  const getNotebookByName = useDataStore((state) => state.getNotebookByName)
+  const notebook = getNotebookByName(name)
+  const navigateToNotebookPage = () => {
+    navigate(`?view=${ModalNotebookPreviewView}&viewId=${name}`)
+  }
+
+  return (
+    <div className='NotebookCard shadow-sm'>
+      <div className='p-3 d-flex align-items-center'>
+        <div>
+          <Avatar
+            size={40}
+            name={notebook.name}
+            variant='marble'
+            square={false}
+          />
+        </div>
+        <div className='mx-3'>
+          <h3 onClick={navigateToNotebookPage}>{notebook?.title}</h3>
+          <ol class='NotebookCard__authors'>
+            {notebook?.authors.map((name) => (
+              <li key={name}>
+                <AuthorCard name={name} />
+              </li>
+            ))}
+          </ol>
+        </div>
+        <div className='ms-auto'>
+          <Button
+            variant='secondary'
+            className='p-0'
+            style={{ width: 36, height: 36 }}
+            onClick={navigateToNotebookPage}
+          >
+            <ArrowRight strokeWidth={2} />
+          </Button>
+        </div>
+      </div>
+    </div>
+  )
+}
+export default NotebookCard