Comments (4)
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.
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.
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
from mdx-deck.
Thanks for this!
from mdx-deck.
Related Issues (20)
- Integrating the presentation into existing website causes number of issues
- gatsby-theme-mdx-deck not working
- Running mdx-deck <filename>.mdx constantly forces a repaint in the browser and the recreation of gatsby pages. HOT 10
- Simple create, resize and fill div
- Presenter mode inaccessible in Windows HOT 3
- Infinite loop when using steps HOT 6
- Readme Clarity
- File-Import in 4.1.1 not working
- Can't start mdx-deck on localhost HOT 1
- Still supported/maintained? HOT 8
- Is there a way to run custom javascript on deck load and slid transitions ? HOT 3
- Can't resolve 'mdx-deck/themes' HOT 2
- Is there support for remark plugins?
- Can this be used with Next.Js HOT 2
- Trying to get in touch with you regarding a security issue
- Upgrade Gatsby to v3? HOT 2
- "Getting Started" steps do not work HOT 4
- Need custom shortcuts
- Not running on Gatsbyjs 4 HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
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.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from mdx-deck.