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.
tinacms / tina-starter-grande / src / components / pageLayout.js View on Github 
}
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
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 <Image data={data} />
case "FormBlock":
return <Form form={data} />
case "ContentBlock":
if (data.content && page.childrenPagesJsonBlockMarkdown[i])</title>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 (
<>
{data.posts &&
data.posts.edges.map(item => {
return (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 (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 (
<>
{data.posts &&
data.posts.edges.map(item => {
return (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,
})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 (
<>}
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**.
