Code Monkey home page Code Monkey logo

Comments (4)

karlhorky avatar karlhorky commented on June 10, 2024 1

Hmm... just hacked something together with remark-import-partial:

partials/partialDeck.mdx

b

---

c

slideDecks/name/index.mdx

a

---

{@import ../../partials/partialDeck.mdx}

---

d

This results in a deck with 4 slides that looks like:

a

---

b

---

c

---

d

To enable this within @mdx-deck/[email protected], you can apply the patch below using patch-package:

patches/@mdx-deck+gatsby-plugin+4.1.1.patch

diff --git a/node_modules/@mdx-deck/gatsby-plugin/gatsby-node.js b/node_modules/@mdx-deck/gatsby-plugin/gatsby-node.js
index 54db516..db8b651 100644
--- a/node_modules/@mdx-deck/gatsby-plugin/gatsby-node.js
+++ b/node_modules/@mdx-deck/gatsby-plugin/gatsby-node.js
@@ -5,6 +5,7 @@ const remarkPlugins = [
   require('remark-images'),
   require('remark-unwrap-images'),
   require('remark-emoji'),
+  require('remark-import-partial'),
 ]
 
 exports.onPreBootstrap = ({}, opts = {}) => {
diff --git a/node_modules/@mdx-deck/gatsby-plugin/src/split-slides.js b/node_modules/@mdx-deck/gatsby-plugin/src/split-slides.js
index 0f1c447..95bd7d9 100644
--- a/node_modules/@mdx-deck/gatsby-plugin/src/split-slides.js
+++ b/node_modules/@mdx-deck/gatsby-plugin/src/split-slides.js
@@ -10,7 +10,28 @@ export default props => {
   }
   const notes = {}
 
-  arr.forEach((child, i) => {
+  // This is for allowing importing MDX partials via
+  // this syntax using the remark plugin below.
+  //
+  // {@import ../../partials/qualityAssurance.mdx}
+  //
+  // https://github.com/dotansimha/remark-import-partial
+  const flattenedArray = arr.reduce((acc, child) => {
+    if (
+      child.props.originalType === 'p' &&
+      Array.isArray(child.props.children) &&
+      child.props.children.every(
+        (c) => c.type?.displayName === 'MDXCreateElement'
+      )
+    ) {
+      acc.push(...child.props.children)
+      return acc
+    }
+    acc.push(child)
+    return acc
+  }, [])
+
+  flattenedArray.forEach((child, i) => {
     const {
       originalType,
       mdxType,
@@ -41,12 +62,12 @@ export default props => {
 
   let previousSplit = 0
   splits.forEach((split, i) => {
-    const children = [...arr.slice(previousSplit, split)]
+    const children = [...flattenedArray.slice(previousSplit, split)]
     if (notes[i]) children.notes = notes[i]
     slides.push(children)
     previousSplit = split + 1
   })
-  const last = [...arr.slice(previousSplit)]
+  const last = [...flattenedArray.slice(previousSplit)]
   if (notes[slides.length]) last.notes = notes[slides.length]
   slides.push(last)
 

from mdx-deck.

karlhorky avatar karlhorky commented on June 10, 2024

Ah I see this: https://github.com/jxnblk/mdx-deck/blob/master/examples/multiple/deck.js

But it would be nice to import slides directly in a slide deck... 🤔

from mdx-deck.

karlhorky avatar karlhorky commented on June 10, 2024

It seems like this is not supported, because of an error like TypeError: Cannot read property 'pathname' of undefined here:

if (props.location.pathname === '/print') return
props.navigate('/#' + index, {
replace: true,
})

from mdx-deck.

mkarajohn avatar mkarajohn commented on June 10, 2024

Thanks for this!

from mdx-deck.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.