add back link to tutorial page

impresso · Mar 12, 2024 · 3be0645 · 3be0645
1 parent 2c31604
commit 3be0645
Show file tree

Hide file tree

Showing 4 changed files with 55 additions and 10 deletions.
diff --git a/gatsby-node.js b/gatsby-node.js
@@ -276,6 +276,18 @@ exports.createPages = async function ({ actions, graphql }) {
         2
       )
     )
+    actions.createPage({
+      path: `/tutorial/${node.name}`,
+      component: require.resolve(`./src/templates/Tutorial.js`),
+      context: {
+        type: "tutorial",
+        data: {
+          ...tutorialsMap[node.name],
+          body: node.childMdx.body,
+          video: node.childMdx.frontmatter.video,
+        },
+      },
+    })
   })
   //
   // Write to JSON files

diff --git a/src/components/PageLayout.js b/src/components/PageLayout.js
@@ -23,7 +23,7 @@ const PageLayout = ({ children, path, pageContext }) => {
   }, [])
   useEffect(() => {
     // scroll to 0 0
-    window.scrollTo(0, 0)
+    // window.scrollTo(0, 0)
     if (path === "/") {
       setShow(false)
     } else {
@@ -32,7 +32,13 @@ const PageLayout = ({ children, path, pageContext }) => {
   }, [path])
 
   return (
-    <Modal show={show} onHide={handleClose} backdrop="static" keyboard={false}>
+    <Modal
+      size="lg"
+      show={show}
+      onHide={handleClose}
+      backdrop="static"
+      keyboard={false}
+    >
       <Modal.Header closeButton>
         <Link to="/">impresso-datalab</Link>
         <Button variant="primary" onClick={handleClose}>

diff --git a/src/components/TutorialCard.js b/src/components/TutorialCard.js
@@ -1,7 +1,7 @@
 import React from "react"
 import "./TutorialCard.css"
 import { useDataStore } from "../store"
-import { navigate } from "gatsby"
+import { Link, navigate } from "gatsby"
 
 const TutorialCard = ({ name }) => {
   const [, getTutorialByName] = useDataStore((state) => [
@@ -16,15 +16,12 @@ const TutorialCard = ({ name }) => {
     ? tutorial.video.thumbnail_url
     : "https://via.placeholder.com/1280x720"
 
-  const gotoTutorialPage = () => {
-    console.log("gotoTutorialPage", name)
-    navigate(`?view=tutorial&viewId=${name}`)
-  }
-
   return (
-    <div className="TutorialCard d-inline-block" onClick={gotoTutorialPage}>
+    <div className="TutorialCard d-inline-block">
       <section className="p-3">
-        <h3>{tutorial?.title}</h3>
+        <h3>
+          <Link to={`/tutorial/${name}`}>{tutorial?.title}</Link>
+        </h3>
         <p>{tutorial?.excerpt}</p>
       </section>
       <figure

diff --git a/src/templates/Tutorial.js b/src/templates/Tutorial.js
@@ -0,0 +1,30 @@
+import React from "react"
+import { Col, Container, Row } from "react-bootstrap"
+import Markdown from "../components/Markdown"
+
+const Tutorial = ({ path, pageContext, ...props }) => {
+  return (
+    <div className="Tutorial">
+      <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>
+  )
+}
+
+export default Tutorial