add video tutorial with oembed

gatsby-browser.js

@@ -31,7 +31,7 @@ export function onRouteUpdate({ location, prevLocation }) {
     }
 
     // test view id against a regex (lowercase letters and numbers, only trailing slash)
-    if (paramViewId && /^[a-z0-9]+$/.test(paramViewId)) {
+    if (paramViewId && /^[a-z0-9-]+$/.test(paramViewId)) {
       console.log("[gatsby-browser]@onRouteUpdate viewId:", paramViewId)
       viewId = String(paramViewId)
     } else {

gatsby-node.js

@@ -213,6 +213,7 @@ exports.createPages = async function ({ actions, graphql }) {
           accessTime
           name
           childMdx {
+            body
             excerpt
             tableOfContents
             frontmatter {

src/components/Markdown.js

@@ -0,0 +1,12 @@
+import React from "react"
+import { marked } from "marked"
+
+const Markdown = ({ children }) => {
+  console.log("[Markdown] render")
+  // remove the most common zerowidth characters from the start of the file
+  const content = marked.parse(String(children))
+
+  return <div dangerouslySetInnerHTML={{ __html: content }} />
+}
+
+export default Markdown

src/components/ModalTutorial.css

@@ -0,0 +1,16 @@
+@media (min-width: 576px) {
+  .ModalTutorial .modal-dialog {
+    max-width: var(--bs-modal-width);
+  }
+}
+
+@media (min-width: 768px) {
+  .ModalTutorial .modal-dialog {
+    max-width: var(--bs-modal-lg);
+  }
+}
+
+.ModalTutorial iframe {
+  width: 100% !important;
+  height: 100% !important;
+}

src/components/ModalTutorial.js

@@ -0,0 +1,81 @@
+import React from "react"
+import ModalView from "./ModalView"
+import { ModalTutorialView, useBrowserStore, useDataStore } from "../store"
+import { Badge, Col, Modal, Row } from "react-bootstrap"
+import { useQuery } from "@tanstack/react-query"
+import axios from "axios"
+import Markdown from "./Markdown"
+import "./ModalTutorial.css"
+const ModalTutorial = ({ onClose, ...props }) => {
+  const getTutorialByName = useDataStore((state) => state.getTutorialByName)
+  const name = useBrowserStore((state) => state.viewId)
+  const tutorial = getTutorialByName(name)
+  const url = `${
+    process.env.GATSBY_PATH_PREFIX || ""
+  }/data/tutorials/${name}.json`
+  const ratio = tutorial
+    ? tutorial.video.thumbnail_height / tutorial.video.thumbnail_width
+    : 1.0
+
+  const { status, data } = useQuery({
+    queryKey: ["notebooks-", name],
+    queryFn: () =>
+      axios.get(url).then((res) => {
+        return res.data
+      }),
+  })
+
+  console.info(`[ModalTutorial] ${name} ${url} ${status}`)
+
+  return (
+    <ModalView
+      className="ModalTutorial"
+      viewName={ModalTutorialView}
+      onClose={onClose}
+      {...props}
+    >
+      <Modal.Header
+        className="align-items-baseline bg-light"
+        closeButton
+        style={{ position: "sticky", top: 0, zIndex: 1 }}
+      >
+        <Modal.Title id="contained-modal-title-vcenter">
+          <Badge>Tutorial</Badge>
+          <br />
+          {tutorial?.title}
+        </Modal.Title>
+      </Modal.Header>
+      <Modal.Body className="container">
+        <Row>
+          <Col>
+            <figure
+              className="m-0 w-100 position-relative"
+              style={{
+                paddingTop: `${ratio * 100}%`,
+              }}
+            >
+              {status === "success" && (
+                <div
+                  className="position-absolute top-0 w-100 h-100"
+                  dangerouslySetInnerHTML={{ __html: data?.video?.html }}
+                />
+              )}
+            </figure>
+            <p>In this tutorial:</p>
+            <ol>
+              {tutorial?.tableOfContents.items.map((d, i) => (
+                <li key={i}>{d.title}</li>
+              ))}
+            </ol>
+          </Col>
+          <Col>
+            {status === "error" && <div>Error fetching data</div>}
+            {status === "loading" && <div>Loading...</div>}
+            {status === "success" && <Markdown>{data.body}</Markdown>}
+          </Col>
+        </Row>
+      </Modal.Body>
+    </ModalView>
+  )
+}
+export default ModalTutorial

src/components/Modals.js

@@ -1,28 +1,30 @@
-import React from 'react'
-import { AvailableModalsViews } from '../store'
-import { Button } from 'react-bootstrap'
-import { navigate } from 'gatsby'
-import ModalLogin from './ModalLogin'
-import ModalNotebookPreview from './ModalNotebookPreview'
+import React from "react"
+import { AvailableModalsViews } from "../store"
+import { Button } from "react-bootstrap"
+import { navigate } from "gatsby"
+import ModalLogin from "./ModalLogin"
+import ModalNotebookPreview from "./ModalNotebookPreview"
+import ModalTutorial from "./ModalTutorial"
 
 const Modals = ({ debug = false }) => {
   const onCloseHandler = () => {
-    navigate('')
+    navigate("")
   }
 
   return (
     <>
       {debug &&
         AvailableModalsViews.map((modal) => (
           <Button
-            className='mx-1'
+            className="mx-1"
             key={modal}
             onClick={() => navigate(`?view=${modal}`)}
           >
             {modal}
           </Button>
         ))}
       <ModalNotebookPreview onClose={onCloseHandler} centered />
+      <ModalTutorial onClose={onCloseHandler} />
       <ModalLogin onClose={onCloseHandler} centered />
     </>
   )

src/components/TutorialCard.js

@@ -1,6 +1,7 @@
 import React from "react"
 import "./TutorialCard.css"
 import { useDataStore } from "../store"
+import { navigate } from "gatsby"
 
 const TutorialCard = ({ name }) => {
   const getTutorialByName = useDataStore((state) => state.getTutorialByName)
@@ -11,8 +12,14 @@ const TutorialCard = ({ name }) => {
   const thumbnail = tutorial
     ? 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">
+    <div className="TutorialCard d-inline-block" onClick={gotoTutorialPage}>
       <section className="p-3">
         <h3>{tutorial?.title}</h3>
         <p>{tutorial?.excerpt}</p>

src/store.js

@@ -4,12 +4,14 @@ export const ModalDraftView = "draft"
 export const ModalForkNotebookView = "fork-notebook"
 export const ModalNotebookPreviewView = "notebook-preview"
 export const ModalLoginView = "login"
+export const ModalTutorialView = "tutorial"
 
 export const AvailableModalsViews = [
   ModalDraftView,
   ModalForkNotebookView,
   ModalNotebookPreviewView,
   ModalLoginView,
+  ModalTutorialView,
 ]
 
 export const useBrowserStore = create((set) => ({

src/tutorials/setup-with-docker-compose.mdx

@@ -1,6 +1,10 @@
 ---
 title: Setup your own lab using Docker Compose
 oembed: https://www.youtube.com/oembed?url=https://www.youtube.com/watch?v=TSySwrQcevM
+
+authors:
+  - daniele-guido
+  - https://www.youtube.com/@NetNinja
 video:
   title: "Docker Crash Course #11 - Docker Compose"
   author_name: "Net Ninja"
@@ -89,3 +93,5 @@ services:
     volumes:
       - ./notebooks:/home/jovyan/work:rw
 ```
+
+Have a look at the video to get more insights on how to use docker-compose and how to build your own docker image.