Embedded Images about gatsby-theme-gatstats

[PaulieScanlon]

@maxscience you might be interested in this

[PaulieScanlon]

@maxscience... wanna give 0.0.36 a try with EmbeddedImages

Here's a demo

[maxscience]

@PaulieScanlon cool! It looks like the width props don't make the image correctly responsive (in your demo the image will get 100% width at smartphone size but not at desktop computer window width.

Also I see you have the flex-start, center and flex-end props for justifyContent but it would be very useful to have proper layout options so that images can be inline with the text. Similar to layouts at https://rmarkdown.rstudio.com/flexdashboard/layouts.html

or https://github.com/cedricdelpoux/gatsby-remark-images-grid

or your very own https://gatsby-remark-grid-system.netlify.com

[PaulieScanlon]

Hey @maxscience width accepts a string or an array of x4 possible percentages across the 4 breakpoints. What happens if you do

width=“100%”

Or width={[“100%” ... rest of percentages]}

The display props would be handy, but in .mdx land you could use

import { Flex, Box } from 'theme-ui' to create whatever layout you like

if in .md land i agree my grid system plugin would be handy but you can't use the EmbeddedImages component in .md anyway as its a React Component.

In either case you can add that plugin to your site and extend from the theme.

[maxscience]

I think in both cases it would be very useful to have responsive grid layouts done in markdown. Why not just integrate your own plugin https://gatsby-remark-grid-system.netlify.com ? 🥇

[maxscience]

Btw I've used test code from https://theme-ui.com/layout/ and https://rebassjs.org/flex
in an .mdx file but it doesn't seem to work

[PaulieScanlon]

@maxscience i guess i'm keen to not implement a whole load of plugins and just let the user decided which additional plugins they want. Did you implement gatsby-plugin-theme-ui... if you've got your project as a public repo i'm happy to take a look

[maxscience]

@PaulieScanlon no repo yet but this is my page in .mdx

`---
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]

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

[PaulieScanlon]

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]

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

[PaulieScanlon]

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]

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]

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]

@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]

@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]

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

[maxscience]

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

[maxscience]

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

There was an error in your GraphQL query:

Expected type MdxFieldsEnum, found frontmatter___date. Did you mean the enum value frontmatter___title or frontmatter___icon?

File: node_modules/@pauliescanlon/gatsby-theme-gatstats/src/components/CardList/CardListContainer.tsx:24:48

ERROR #85901 GRAPHQL

There was an error in your GraphQL query:

Expected type MdxFieldsEnum, found frontmatter___tags. Did you mean the enum value frontmatter___title or frontmatter___icon?

File: node_modules/@pauliescanlon/gatsby-theme-gatstats/src/components/CardList/CardListContainer.tsx:25:26

ERROR #85901 GRAPHQL

There was an error in your GraphQL query:

Expected type MdxFieldsEnum, found frontmatter___date. Did you mean the enum value frontmatter___title or frontmatter___icon?

File: node_modules/@pauliescanlon/gatsby-theme-gatstats/src/components/DaysChart/DaysChartContainer.tsx:37:30

ERROR #85901 GRAPHQL

There was an error in your GraphQL query:

Expected type MdxFieldsEnum, found frontmatter___date. Did you mean the enum value frontmatter___title or frontmatter___icon?

File: node_modules/@pauliescanlon/gatsby-theme-gatstats/src/components/LatestPosts/LatestPostsContainer.tsx:17:43

ERROR #85901 GRAPHQL

There was an error in your GraphQL query:

Expected type MdxFieldsEnum, found frontmatter___date. Did you mean the enum value frontmatter___title or frontmatter___icon?

File: node_modules/@pauliescanlon/gatsby-theme-gatstats/src/components/TagsChart/TagsChartContainer.tsx:26:43

ERROR #85901 GRAPHQL

There was an error in your GraphQL query:

Expected type MdxFieldsEnum, found frontmatter___tags. Did you mean the enum value frontmatter___title or frontmatter___icon?

File: node_modules/@pauliescanlon/gatsby-theme-gatstats/src/components/TagsChart/TagsChartContainer.tsx:28:26

ERROR #85901 GRAPHQL

There was an error in your GraphQL query:

Expected type MdxFieldsEnum, found frontmatter___date. Did you mean the enum value frontmatter___title or frontmatter___icon?

File: node_modules/@pauliescanlon/gatsby-theme-gatstats/src/components/YearChart/YearChartContainer.tsx:50:43

ERROR #85901 GRAPHQL

There was an error in your GraphQL query:

Cannot query field "tags" on type "MdxFrontmatter".

GraphQL request:19:9
18 | title
19 | tags
| ^
20 | date(formatString: "MMMM DD, YYYY")

File: node_modules/@pauliescanlon/gatsby-theme-gatstats/src/layouts/post.tsx:159:9

ERROR #85901 GRAPHQL

There was an error in your GraphQL query:

Cannot query field "date" on type "MdxFrontmatter".

GraphQL request:20:9
19 | tags
20 | date(formatString: "MMMM DD, YYYY")
| ^
21 | featuredImage {

File: node_modules/@pauliescanlon/gatsby-theme-gatstats/src/layouts/post.tsx:160:9

ERROR #85901 GRAPHQL

There was an error in your GraphQL query:

Cannot query field "featuredImage" on type "MdxFrontmatter".

GraphQL request:21:9
20 | date(formatString: "MMMM DD, YYYY")
21 | featuredImage {
| ^
22 | childImageSharp {

File: node_modules/@pauliescanlon/gatsby-theme-gatstats/src/layouts/post.tsx:161:9

ERROR #85901 GRAPHQL

There was an error in your GraphQL query:

Cannot query field "embeddedImages" on type "MdxFrontmatter".

GraphQL request:31:9
30 | }
31 | embeddedImages {
| ^
32 | publicURL

File: node_modules/@pauliescanlon/gatsby-theme-gatstats/src/layouts/post.tsx:171:9

failed extract queries from components - 0.836s
`