Embedded Images #25

PaulieScanlon · 2019-12-20T11:39:36Z

frontmatter already deals with the featuredImage which gets added to the top of each post.

If further images are required in a post it would be nice to query additional frontmatter so that MdxRenderer can be passed data for embedded images.

The key difference is i guess that if we pass MdxRenderer the graphQL image query as a prop it can be used anywhere in the body of the post

eg

---
embeddedImages:
  - './path-to-image-1'
  - './path-to-image-2''
---
import {EmbeddedImage} from "@pauliescanlon/gatsby-theme-gatstats/src/components ...."

<EmbeddedImage src={props.embedded.image1} />

Post body text

<EmbeddedImage src={props.embedded.image2} />

`---
title: Test title
tags: ["tag1", "tag2", "tag3"]
date: 2019-12-20
featuredImage: IMG_8123.jpeg

import { Flex, Box } from 'theme-ui'

<Flex
sx={{
flexWrap: 'wrap',
}}

<Box sx={{ width: ['100%', '50%'] }}> Test1</Box>
<Box sx={{ width: ['100%', '50%'] }}>Test2</Box>

Flex Box `

maxscience · 2019-12-20T16:58:08Z

P.S. yes I did install gatsby-plugin-theme-ui

PaulieScanlon · 2019-12-20T17:16:12Z

ah ok, yeah i don't think you can import them straight into .mdx my mistake.

I'm not actually sure what the best approach is here. On one had if you need that level of control perhaps just using .js is better for you.

Alternatively you could create a layout component which has some render props so you can pass though content and it'll return you the flex and box etc but that seems like a bit of a faff.

maxscience · 2019-12-20T17:17:54Z

it looks like the best solution is really your gatsby-remark-grid-system
I'll try it now

PaulieScanlon · 2019-12-20T17:18:58Z

Ha, yeah maybe so but i don't think it'll work with .mdx... i hadn't thought it would be used with .mdx might be an issue for the other repo and i'll have a think.

If the ::: escape codes don't work in Mdx i wonder if you could just stick in the row and col <div>'s and add the classNames yourself? @maxscience

maxscience · 2019-12-20T17:22:23Z

Yes indeed as I was thinking. So it's tied with #23

and I guess the best way to solve both is:
https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-plugin-mdx#gatsby-remark-plugins

maxscience · 2019-12-20T17:33:52Z

Btw not sure what this mdx is for then if one can't even use simple react layouts without headaches... This is a simple use case that should be simple enough to use. :)

PaulieScanlon · 2019-12-21T16:34:59Z

@maxscience ok, so what you need is @theme-ui/components

some-post.mdx

---
frontmatter
---

`import { Flex, Box } from '@theme-ui/components'`

<Flex
  sx={{
    flexWrap: 'wrap'
  }}
>
  <Box
    sx={{
      p: 8,
      width: ['100%', '100%', '50%']
    }}
  >
   left content
  </Box>

  <Box
    sx={{
      p: 8,
      width: ['100%', '100%', '50%']
    }}
  >
  right content
  </Box>

</Flex>

maxscience · 2019-12-21T19:17:48Z

@theme-ui/components is not there so webpack rightfully complains it can't generate the bundle.

Quickly tried with
import { Flex, Box } from 'theme-ui/layout'
but still doesn't correctly apply the layout

PaulieScanlon · 2019-12-21T22:08:25Z

@maxscience you’ll need to install it, it’s not part of the theme.

maxscience · 2019-12-22T10:41:17Z

@PaulieScanlon hah indeed, it was a bit late sorry. It works now thanks!

maxscience · 2019-12-22T10:51:22Z

P.S. interesting that some markdown will break the template. For example using an unordered list like so will result in the error below. In this case it looks like there is no closing li tag
template:

`frontmatter

import { EmbeddedImage } from "@pauliescanlon/gatsby-theme-gatstats/src/components/EmbeddedImage"
import { Flex, Box } from '@theme-ui/components'

asdsad

<Flex
sx={{
flexWrap: 'wrap'
}}

<Box
sx={{
p: 8,
width: ['100%', '100%', '50%']
}}

test1

<Box
sx={{
p: 8,
width: ['100%', '100%', '50%']
}}
test2

`

error:
` ERROR #11321 PLUGIN

"gatsby-plugin-mdx" threw an error while running the onCreateNode lifecycle:

unknown: Expected corresponding JSX closing tag for

(23:0)

21 |

22 |

{test1}{.}

23 |
| ^
24 | <Box
25 | sx={{
26 | p: 8,/src/posts/2019/12/test1.mdx: unknown: Expected corresponding JSX closing tag for
(23:0)

21 |

22 |

{test1}{.}

23 |
| ^
24 | <Box
25 | sx={{
26 | p: 8,

SyntaxError: unknown: Expected corresponding JSX closing tag for

(23:0)
21 |

22 |

< 39mstrong parentName="p">{test1}< [33m/strong>{.}

0m

23 |
| ^
24 | <Box
25 | sx={{
26 | p: 8,/src/posts/2019/12/test1.mdx: unknown: Expected corr esponding JSX closing tag for
(23:0)
21 |

22 |
< 39mstrong parentName="p">{test1}< [33m/strong>{.}
0m
23 |
| ^
24 | <Box
25 | sx={{
26 | p: 8,

index.js:6983 Object.raise
[lastgitsite]/[@babel]/parser/lib/index.js:6983:17
index.js:4059 Object.jsxParseElementAt
[lastgitsite]/[@babel]/parser/lib/index.js:4059:16
index.js:4027 Object.jsxParseElementAt
[lastgitsite]/[@babel]/parser/lib/index.js:4027:32
index.js:4027 Object.jsxParseElementAt
[lastgitsite]/[@babel]/parser/lib/index.js:4027:32
index.js:4027 Object.jsxParseElementAt
[lastgitsite]/[@babel]/parser/lib/index.js:4027:32
index.js:4027 Object.jsxParseElementAt
[lastgitsite]/[@babel]/parser/lib/index.js:4027:32
index.js:4085 Object.jsxParseElement
[lastgitsite]/[@babel]/parser/lib/index.js:4085:17
index.js:4092 Object.parseExprAtom
[lastgitsite]/[@babel]/parser/lib/index.js:4092:19
index.js:9213 Object.parseExprSubscripts
[lastgitsite]/[@babel]/parser/lib/index.js:9213:23
index.js:9193 Object.parseMaybeUnary
[lastgitsite]/[@babel]/parser/lib/index.js:9193:21
index.js:9059 Object.parseExprOps
[lastgitsite]/[@babel]/parser/lib/index.js:9059:23
index.js:9032 Object.parseMaybeConditional
[lastgitsite]/[@babel]/parser/lib/index.js:9032:23
index.js:8978 Object.parseMaybeAssign
[lastgitsite]/[@babel]/parser/lib/index.js:8978:21
index.js:9775 Object.parseParenAndDistinguishExpression
[lastgitsite]/[@babel]/parser/lib/index.js:9775:28
index.js:9558 Object.parseExprAtom
[lastgitsite]/[@babel]/parser/lib/index.js:9558:21
index.js:4097 Object.parseExprAtom
[lastgitsite]/[@babel]/parser/lib/index.js:4097:20

success source and transform nodes - 1.286s
success building schema - 0.502s
success createPages - 0.038s
success createPagesStatefully - 0.307s
success onPreExtractQueries - 0.005s
success update schema - 0.059s

ERROR #85901 GRAPHQL