How to use gatsby-tinacms-json - 8 common examples

To help you get started, we’ve selected a few gatsby-tinacms-json examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github tinacms / tina-starter-grande / src / components / pageLayout.js View on Github external
}
      site: settingsJson(
        fileRelativePath: { eq: "/content/settings/site.json" }
      ) {
        logo
        title
        description
        author

        rawJson
        fileRelativePath
      }
    }
  `)

  const [nav] = useLocalJsonForm(data.nav, NavForm)
  const [globalTheme] = useLocalJsonForm(data.theme, ThemeForm)
  const [site] = useGlobalJsonForm(data.site, SiteForm)

  const themeContext = React.useContext(ThemeContext)
  const theme = themeContext.theme
  const pageTitle =
    page && page.title
      ? page.title
      : page && page.frontmatter && page.frontmatter.title
      ? page.frontmatter.title
      : ""
  const pageHero = page.frontmatter ? page.frontmatter.hero : page.hero
  const hero = pageHero
    ? merge({}, theme.hero, removeNull(pageHero))
    : theme.hero
github tinacms / tina-starter-grande / src / templates / page.js View on Github external
export default function Page({ data }) {
  const [page] = useLocalJsonForm(data.page, PageForm)
  const blocks = page.blocks ? page.blocks : []

  return (
    
      
        {blocks &&
          blocks.map(({ _template, ...data }, i) => {
            switch (_template) {
              case "TitleBlock":
                return <title>
              case "ImageBlock":
                return &lt;Image data={data} /&gt;
              case "FormBlock":
                return &lt;Form form={data} /&gt;
              case "ContentBlock":
                if (data.content &amp;&amp; page.childrenPagesJsonBlockMarkdown[i])</title>
github tinacms / tina-starter-grande / src / templates / list.js View on Github external
export default function List({ data, pageContext }) {
  const [page] = useLocalJsonForm(data.page, ListForm)
  const [authors] = useLocalJsonForm(data.authors, AuthorsForm)

  const { slug, limit, skip, numPages, currentPage } = pageContext
  const isFirst = currentPage === 1
  const isLast = currentPage === numPages
  const prevPage =
    currentPage - 1 === 1 ? slug : slug + "/" + (currentPage - 1).toString()
  const nextPage = slug + "/" + (currentPage + 1).toString()
  page.title = isFirst ? page.title : page.title + " - " + currentPage

  return (
    
      &lt;&gt;
        {data.posts &amp;&amp;
          data.posts.edges.map(item =&gt; {
            return (
github tinacms / tina-starter-grande / src / components / pageLayout.js View on Github external
site: settingsJson(
        fileRelativePath: { eq: "/content/settings/site.json" }
      ) {
        logo
        title
        description
        author

        rawJson
        fileRelativePath
      }
    }
  `)

  const [nav] = useLocalJsonForm(data.nav, NavForm)
  const [globalTheme] = useLocalJsonForm(data.theme, ThemeForm)
  const [site] = useGlobalJsonForm(data.site, SiteForm)

  const themeContext = React.useContext(ThemeContext)
  const theme = themeContext.theme
  const pageTitle =
    page && page.title
      ? page.title
      : page && page.frontmatter && page.frontmatter.title
      ? page.frontmatter.title
      : ""
  const pageHero = page.frontmatter ? page.frontmatter.hero : page.hero
  const hero = pageHero
    ? merge({}, theme.hero, removeNull(pageHero))
    : theme.hero

  return (
github tinacms / tina-starter-grande / src / templates / list.js View on Github external
export default function List({ data, pageContext }) {
  const [page] = useLocalJsonForm(data.page, ListForm)
  const [authors] = useLocalJsonForm(data.authors, AuthorsForm)

  const { slug, limit, skip, numPages, currentPage } = pageContext
  const isFirst = currentPage === 1
  const isLast = currentPage === numPages
  const prevPage =
    currentPage - 1 === 1 ? slug : slug + "/" + (currentPage - 1).toString()
  const nextPage = slug + "/" + (currentPage + 1).toString()
  page.title = isFirst ? page.title : page.title + " - " + currentPage

  return (
    
      &lt;&gt;
        {data.posts &amp;&amp;
          data.posts.edges.map(item =&gt; {
            return (
github tinacms / tina-starter-grande / src / components / siteLayout.js View on Github external
type: "post",
          path: `/blog/${slug}`,
          draft: true,
        })
      }, 1000)
    })
  },
  body({ title }) {
    return `## ${title}`
  },
  fields: [
    { name: "title", label: "Title", component: "text", required: true },
  ],
})

const CreatePageButton = new JsonCreatorPlugin({
  label: "New Page",
  filename(form) {
    let slug = slugify(form.title.toLowerCase())
    return `content/pages/${slug}.json`
  },
  fields: [
    { name: "title", label: "Title", component: "text", required: true },
    { name: "path", label: "Path", component: "text", required: true },
  ],
  data(form) {
    return new Promise(resolve => {
      setTimeout(() => {
        resolve({
          title: form.title,
          path: form.path,
        })
github tinacms / tina-starter-grande / src / components / pageLayout.js View on Github external
fileRelativePath: { eq: "/content/settings/site.json" }
      ) {
        logo
        title
        description
        author

        rawJson
        fileRelativePath
      }
    }
  `)

  const [nav] = useLocalJsonForm(data.nav, NavForm)
  const [globalTheme] = useLocalJsonForm(data.theme, ThemeForm)
  const [site] = useGlobalJsonForm(data.site, SiteForm)

  const themeContext = React.useContext(ThemeContext)
  const theme = themeContext.theme
  const pageTitle =
    page &amp;&amp; page.title
      ? page.title
      : page &amp;&amp; page.frontmatter &amp;&amp; page.frontmatter.title
      ? page.frontmatter.title
      : ""
  const pageHero = page.frontmatter ? page.frontmatter.hero : page.hero
  const hero = pageHero
    ? merge({}, theme.hero, removeNull(pageHero))
    : theme.hero

  return (
    &lt;&gt;
github tinacms / tinacms / packages / demo-gatsby / src / components / bio.js View on Github external
}
      dataJson(fileRelativePath: { eq: "/data/author.json" }) {
        id
        firstName
        lastName
        location
        social {
          twitter
        }
        fileRelativePath
        rawJson
      }
    }
  `)

  const [author] = useJsonForm(data.dataJson, {
    label: "Author",
    fields,
  })

  /*
    //for testing single / multiple forms
   const author = data.dataJson
  */

  return (
    <div style="{{">
      </div>

gatsby-tinacms-json

A Gatsby/Tina plugin for **editing JSON files stored in git**.

Apache-2.0
Latest version published 3 years ago

Package Health Score

62 / 100
Full package analysis