Tina not commiting changes

I followed Kendall’s tutorial on dev.to, everything worked up to the point of having posts editable on a dev server however changes made aren’t committed to the original markdown file?

Another issue, the tina sidebar loads perfectly in my dev enviroment however upon pushing to a server it loads off screen but is scrollable to and has no stylings or anything(see screenshot)

Hey @machooper - Do the changes write to your local filesystem? To commit changes, you’ll need to ‘save’. How is your form configured? I would also make sure that the git client is up and running — check the network requests.

How are you running things on the server? This looks like perhaps the GlobalStyles aren’t loading, which is odd. Could you check that the Tina custom css variables are getting set properly? You should be able to see them in the dev tools if you scroll to the bottom of any style declarations for an element.

Re: the styles not working on the server, try creating custom document file in the root.

// _document.tsx
import Document from "next/document";
import { ServerStyleSheet } from "styled-components";

export default class MyDocument extends Document {
  static async getInitialProps(ctx) {
    const sheet = new ServerStyleSheet();
    const originalRenderPage = ctx.renderPage;

    try {
      ctx.renderPage = () =>
        originalRenderPage({
          enhanceApp: (App) => (props) =>
            sheet.collectStyles(<App {...props} />),
        });

      const initialProps = await Document.getInitialProps(ctx);
      return {
        ...initialProps,
        styles: (
          <>
            {initialProps.styles}
            {sheet.getStyleElement()}
          </>
        ),
      };
    } finally {
      sheet.seal();
    }
  }
}
1 Like