Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Import partial slide decks? #803

Open
karlhorky opened this issue Jul 15, 2021 · 4 comments
Open

Import partial slide decks? #803

karlhorky opened this issue Jul 15, 2021 · 4 comments

Comments

@karlhorky
Copy link
Contributor

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?

@karlhorky
Copy link
Contributor Author

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

@karlhorky
Copy link
Contributor Author

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,
})

@karlhorky
Copy link
Contributor Author

karlhorky commented Jul 15, 2021

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)
 

@mkarajohn
Copy link

Thanks for this!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants