How to use gatsby-tinacms-remark - 5 common examples

marginLeft: `auto`,
            marginRight: `auto`,
            maxWidth: rhythm(24),
            padding: `${rhythm(1.5)} ${rhythm(3 / 4)}`,
          }}
        >
          © {new Date().getFullYear()}, Built with
          {` `}
          <a href="https://www.gatsbyjs.org">Gatsby</a>
        
      
    )
  }
}

const CreatePostPlugin = createRemarkButton({
  label: "Create Post",
  filename({ title }) {
    return `content/blog/${title.replace(/\s+/g, "-").toLowerCase()}/index.md`
  },
  frontmatter({ title }) {
    // Asynchronously generate front matter by fetching data from some server.
    return new Promise(resolve =&gt; {
      setTimeout(() =&gt; {
        resolve({
          title,
          date: new Date(),
          heading_color: "pink",
          description: "My new post. ",
        })
      }, 1000)
    })

return "packages/demo-gatsby" + postDirectory
      },

      // Generate the src attribute for the preview image.
      previewSrc: (formValues, { input }) => {
        let path = input.name.replace("rawFrontmatter", "frontmatter")
        let gastbyImageNode = get(formValues, path)
        if (!gastbyImageNode) return ""
        return gastbyImageNode.childImageSharp.fluid.src
      },
    },
  ],
}

export default liveRemarkForm(BlogPostTemplate, BlogPostForm)

export const pageQuery = graphql`
  query BlogPostBySlug($slug: String!) {
    site {
      siteMetadata {
        title
        author
      }
    }
    markdownRemark(fields: { slug: { eq: $slug } }) {
      ...TinaRemark
      id
      excerpt(pruneLength: 160)
      html
      frontmatter {
        blocks {

<>
      
        
      
      
        
          <header>
          {children}
          <footer>
        
      
    
  )
}

const CreatePostButton = createRemarkButton({
  label: "New Post",
  filename(form) {
    let slug = slugify(form.title.toLowerCase())
    return `content/posts/${slug}.md`
  },
  frontmatter(form) {
    let slug = slugify(form.title.toLowerCase())
    return new Promise(resolve =&gt; {
      setTimeout(() =&gt; {
        resolve({
          title: form.title,
          date: new Date(),
          type: "post",
          path: `/blog/${slug}`,
          draft: true,
        })</footer></header>

component: "text",
    },
    {
      label: "Recipient",
      name: "rawFrontmatter.recipient",
      component: "text",
    },
    {
      label: "Body",
      name: "rawMarkdownBody",
      component: "markdown",
    },
  ],
}

export default remarkForm(Contact, ContactForm)

export const Form = styled.form`
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto;
  grid-gap: 1.5rem;
  justify-items: stretch;

  @media (min-width: ${props => props.theme.breakpoints.medium}) {
    grid-template-columns: 1fr 1fr;
  }
`

export const FormField = styled.div`
  input,
  textarea {

!formValues.frontmatter.hero ||
              !formValues.frontmatter.hero.image
            )
              return ""
            return formValues.frontmatter.hero.image.childImageSharp.fluid.src
          },
        },
        {
          label: "Body",
          name: "rawMarkdownBody",
          component: "markdown",
        },
      ],
    }
  }, [])
  const [markdownRemark, form] = useLocalRemarkForm(
    props.data.markdownRemark,
    PostForm
  )

  return (
    
      {editingProps => {
        return (
          
        )
      }}