Markdown Blog + Github Backend

Hi all,

Thanks in advance for any guidance.

I followed this guide https://tina.io/guides/nextjs/github/initial-setup.

I managed to get it working for my use case which is making the content on the site editable.

Next I would like to add a traditional blog with a blogroll on the index page.

To do that I started following this guide https://tina.io/guides/nextjs/adding-tina/overview.

I got the blogroll to show up on the index page and even got it to go into a blog post which is all great.

But then I ran into an issue when I tried to edit the site.

I would get an error that allPost[0] is undefined.

My gut is telling me the issue is here:

export const getStaticProps: GetStaticProps = async function ({
  preview,
  previewData,
}) {
  if (preview) {
    return getGithubPreviewProps({
      ...previewData,
      fileRelativePath: "content/home.json",
      parse: parseJson,
    });
  }

  return {
    props: {
      sourceProvider: null,
      error: null,
      preview: false,
      file: {
        fileRelativePath: "content/home.json",
        data: (await import("../../content/home.json")).default,
      },
    },
  };
};

I believe I need to add _post or something related in the above code like with the code below:

  if (preview) {
    return getGithubPreviewProps({
      ...previewData,
      fileRelativePath: "content/home.json",
      parse: parseJson,
    });
  }

But I am unsure how to have both there. What I did to get the blogroll and blog posts to show up (without the ability to enter edit mode) looked like this:

export const getStaticProps: GetStaticProps = async function ({
  preview,
  previewData,
}) {

  const allPosts = getAllPosts([
    'title',
    'date',
    'slug',
    'author',
    'coverImage',
    'excerpt',
  ])

  if (preview) {
    return getGithubPreviewProps({
      ...previewData,
      fileRelativePath: "content/home.json",
      parse: parseJson,
    });
  }

  return {
    props: {
      sourceProvider: null,
      error: null,
      preview: false,
      file: {
        fileRelativePath: "content/home.json",
        data: (await import("../../content/home.json")).default,
      },
      allPosts 
    },
  };
};

I’m sure I’m reasonably close or at least I hope so.

What I was thinking was making two components: one for the content on my current home page and one for the blogroll but I’m unsure if that will work and having it in one place would be preferable.

Any help will be appreciated.

Thank you.

Looks like you’re trying to get the first element of the array allPost, but the prop in getStaticProps is named allPosts with an ‘s’

Hey thank you for coming to help joeinnes. I appreciate it.

Sorry that was just a typo on my part. Even allPosts[0] fail when I try to edit site.

Here’s a screen shot:

I need to somehow make allPosts available when preview is === true.

In preview mode? Doesn’t look like you’re returning allPosts from getStaticProps in preview mode:

  if (preview) {
    return getGithubPreviewProps({
      ...previewData,
      fileRelativePath: "content/home.json",
      parse: parseJson,
    });
  }

Assuming allPosts is an array, then you’ll be good to just add it to what you’re returning (note that getGithubPreviewProps will return an object with a props property, which is what you need to return from getStaticProps in order for it to be passed to your component):

Below is one way you could get the props from getGithubPreviewProps and add your allPosts to it before returning (there are loads of different ways you could do it, but this should do the trick for you).

  if (preview) {
    const githubPreviewProps = await getGithubPreviewProps({
      ...previewData,
      fileRelativePath: "content/home.json",
      parse: parseJson,
    });

   return {
      props: {
        allPosts,
        ...githubPreviewProps.props,
      },
    };
  }
1 Like

Hi there,

Sorry for only replying now. Thank you so much for the help. I’ll try this out tomorrow and update this message with the result.

Hey @joeinnes

Just wanted to say it works perfectly! I appreciate the help! Have a good one.

Sweet :slight_smile: glad to be able to help!

1 Like