Import partial slide decks?

[Karl Horky]

Hi @jxnblk, hope you are well.

Is there a way to import between 1 and many slides from another MDX file into an mdx-deck slide deck?

[Karl Horky]

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... 🤔

[Karl Horky]

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

mdx-deck/packages/gatsby-plugin/src/deck.js

Lines 41 to 44 in 8b81976

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

[Karl Horky]

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/gatsby-plugin@4.1.1, 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)
 

[Dimitris Karagiannis]

Thanks for this!