Move content folder HTML to SRC folder

[ujwaldreamztech]

I am trying to implement content folder html in my src folder. Could you please share that How I can add css and JS styling into my src HTML?

[shadcn]

Sure. So you're trying to move the content folder under src?

.
├── content <-- move this
├── src
│   └── content <--- here?
└── gatsby-config.js

[ujwaldreamztech]

Thanks for the reply.

Actually I am trying to use this as a component and just use the design in one of the pages I have under src/

like you showed in this eg. https://github.com/arshad/reflex-mdx-js/blob/master/src/pages/app.js

But when I do this, the css seems to be missing. Can you direct me on what I am doing wrong?
Below is the code I am using

import firebase from 'gatsby-plugin-firebase';
import { navigate } from 'gatsby';
import * as React from "react";
import {
   Section,
   Container,
   Flexbox,
   H1, Header,
   P, Grid, Div, H2,
   Button,
} from "@reflexjs/components";
import { Block } from "@reflexjs/gatsby-theme-block";


const Login = () => (
   <Section py="8|12|16|24" position="relative">
      <Container>
         <Grid col="1|1|420px 1fr" gap="6|6|10">
            <Div>
               <H2 m="0" lineHeight="tight" textAlign="center|left">
                  Why choose us
         </H2>
               <P fontSize="xl|2xl" mt="2" textAlign="center|left">
                  We provide the best in class market research to help you grow your portfolio
         </P>
               <Grid gap="4|6|8" mt="8|10|12">
                  <Section py="8|12|16|24" position="relative">
                     <Container>
                        <Grid col="1|1|420px 1fr" gap="6|6|10">
                           <Div>
                              <H2 m="0" lineHeight="tight" textAlign="center|left">
                                 Why choose us
          </H2>
                              <P fontSize="xl|2xl" mt="2" textAlign="center|left">
                                 We provide the best in class market research to help you grow your portfolio
          </P>
                              <Grid gap="4|6|8" mt="8|10|12">

                              </Grid>
                           </Div>

                        </Grid>
                     </Container>
                  </Section>
               </Grid>
            </Div>

         </Grid>
      </Container>
   </Section>
);

export default Login

Below is a screenshot of what I see in the UI

`

[shadcn]

Hmm this looks good. It seems like some of the styles are coming through?

[ujwaldreamztech]

No actually is the default css which we have used in the site. In code we used grid as well, but we are not seeing grid here

[shadcn]

I couldn't reproduce this with a clean install. See https://codesandbox.io/s/hungry-liskov-iekdt?file=/src/pages/login.js

Any other files that could've been overridden? Like theme.js?

PS: The Grid component need a col="" prop.

[ujwaldreamztech]

Hello,

We tried the folder structure as given by you in the codesandbox link. However the blocks are not loading as per the theme. Could you please guide us further on how to resolve the issue. Screenshots given below for reference: -

Browser output

Console

Folder Structure

[shadcn]

We just started seeing this today as well. A fix is on the way.

[shadcn]

Looks like this is a different bug. Is this for a mdx page placed inside content/pages?

[ujwaldreamztech]

Yes, this for an mdx page inside content/pages

[shadcn]

Are you doing any customization to layout or the MDXProvider?

[ujwaldreamztech]

We are not making any changes to MDXProvider. Our layout file looks the image below : -

[shadcn]

I see. Can you try wrapping children in the MDXProvider from core?

+ import { MDXProvider } from "@reflexjs/gatsby-theme-core"

- <>{children}</>
+ < MDXProvider >{children}</MDXProvider> 

[ujwaldreamztech]

We added the code above in the gatsby-config file and layout file, but the theme elements are not appearing.

plugins: [
'@reflexjs/gatsby-theme-base',
'@reflexjs/gatsby-theme-core',
]

Layout page

[shadcn]

Did this fix the warnings? Let's add a ThemeProvider to layout and see if it picks up the theme.

+ import { ThemeProvider } from "theme-ui"
+ import theme from "@reflexjs/preset-base"

- <MDXProvider >{children}</MDXProvider> 
+ <ThemeProvider theme={theme}>
+    <MDXProvider >{children}</MDXProvider>
+ </ThemeProvider>

I guess the layout changes is why we need these updates.

[ujwaldreamztech]

Here is a codesandbox link of what we are trying to achieve.

https://codesandbox.io/s/merging-wve8c

[shadcn]

Seems to be coming from gatsby-plugin-layout. Removing it fixes the theme: https://codesandbox.io/s/merging-forked-lxbeh

I'll take a look at how we can get gatsby-plugin-layout and mdx to work together.

[ujwaldreamztech]

Thank you for taking the time. Please get back regarding how gatsby-plugin-layout and mdx can work together as soon as possible.