I have a Hugo-based site and a couple of partials on the main page that I would like to add as parts of CMS. The partials are made of HTML layout and YAML in the data section. How can I expose this information to CMS?
Your question is a little vague, but assuming that your partials are driven by that YAML data, you can look at the file collection type to manage it.
Here's an example of what your config.yml file might look like:
collections:
- label: "Settings"
name: "settings"
files:
- label: "Partials"
name: "partials"
file: "data/partials.yml"
fields:
- label: "List of partials"
name: "partials_list"
widget: "list"
fields:
- {label: "Name", name: "name", widget: "string"}
- {label: "Partial type", name: "type", widget: "select", options: ["typeA", "typeB", "typeC"] }
Related
I want to remove the Login with Gatsby option, I don't know why I'm getting it. I want to use the Invite only Registration option which I've enabled.
here's the blog linkenter link description here
I haven't installed OAuth provider as you can see in the screenshot.
Also, have enabled the invite only registrations,
but, still whenever I go to the /admin, I get the screen to log in with GitHub
I don't know why that's happening, here's my config.yml file
backend:
name: github
repo: PavanSargar/test-blog
commit_messages:
create: "Create {{collection}} “{{slug}}”"
update: "Update {{collection}} “{{slug}}”"
delete: "Delete {{collection}} “{{slug}}”"
uploadMedia: "[skip ci] Upload “{{path}}”"
deleteMedia: "[skip ci] Delete “{{path}}”"
local_backend: true
media_folder: static/assets
public_folder: assets
slug:
encoding: "ascii"
clean_accents: true
sanitize_replacement: "_"
collections:
- name: posts
label: Blog
folder: src/blog
create: true
fields:
- { name: path, label: Path }
- { name: date, label: Date, widget: datetime}
- { name: author, lable: "Author", widget: string, default: "sporttech"}
- { name: title, label: Title, pattern: ['.{60,}', "Must have at least 60 characters"] }
- { name: quote, label: Quote, required: false}
- {label: "Featured Image", name: "thumbnail", widget: "image", required: true}
- { name: body, label: Body, widget: markdown }
Try switching to the git-gateway backend:
backend:
name: git-gateway
branch: main
media_folder: static/assets
public_folder: assets
[...]
I have successfully linked the netlify cms backend to my react frontend, however now my main problem is figuring out how to display said data from its folder _posts to my react frontend.
MySite
| _posts
| blog
/2020-06-23-my-post.md
| public
config.yml
backend:
name: git-gateway
branch: master
media_folder: "public/images" # Media files will be stored in the repo under static/images/uploads
public_folder: "/images"
collections:
- name: "blog" # Used in routes, e.g., /admin/collections/blog
label: "Blog" # Used in the UI
folder: "_posts/blog" # The path to the folder where the documents are stored
create: true # Allow users to create new documents in this collection
slug: "{{year}}-{{month}}-{{day}}-{{slug}}" # Filename template, e.g., YYYY-MM-DD-title.md
fields: # The fields for each document, usually in front matter
- {label: "Layout", name: "layout", widget: "hidden", default: "blog"}
- {label: "Title", name: "title", widget: "string"}
- {label: "Publish Date", name: "date", widget: "datetime"}
- {label: "Featured Image", name: "thumbnail", widget: "image"}
- {label: "Rating (scale of 1-5)", name: "rating", widget: "number"}
- {label: "Body", name: "body", widget: "markdown"}
Assume you have set your static/admin/config.yml for blog post like below
backend:
name: github
repo: ozluy/destan-nakliyat-gatsby
branch: master
media_folder: static/assets
public_folder: /assets
site_url: https://destan-nakliyat.netlify.app
collections:
- name: post
label: Post
folder: post
create: true
fields:
- { name: path, label: Path }
- { name: date, label: Date, widget: datetime }
- { name: title, label: Title }
- { name: body, label: Body, widget: markdown }
with gatsby-source-filesystem plugin you can use set your plugin settings as below in gatsby-config.js like this:
plugins: [
...,
{
resolve: `gatsby-source-filesystem`,
options: {
name: `pages`,
path: `${__dirname}/post/`,
},
},
finally you can access saved post files through GraphQL as below:
{
allFile {
edges {
node {
extension
dir
modifiedTime
}
}
}
}
I'm using Gatsby.js + Netlify CMS for my personal blog.
Yesterday, I enabled Editorial Workflow on my blog by following this link, once it's done, whenever I clicked the Save button on "Writing in Blog Collection" page, it throws an error:
Failed to persist entry: TypeError: r.has is not a function
Here is the screenshot
Also, the Big Green Publish button disappeared as well.
To reproduce
Go to the Publish Mode on this page
Add the publish_mode: editorial_workflow into your /admin/config.yml
Deploy to the live website
Go to the admin page of your website
Click the New Blog button
type anything in the new article
click Save button
you will see the error message
Here is my Github Repository for my blog:
https://github.com/franva/askwinston
Applicable Versions:
Netlify CMS version: 2.9.6 # "netlify-cms-app": "^2.9.6",
netlify-cms-core 2.22.1
netlify-cms-app 2.11.31
Git provider: GitHub
OS: Windows 10
Browser version Firefox 76.0.1 (64-bit)
Node.JS version: v12.14.1
CMS configuration
backend:
name: git-gateway
branch: master
repo: franva/askwinston
commit_messages:
create: 'Create {{collection}} “{{slug}}”'
update: 'Update {{collection}} “{{slug}}”'
delete: 'Delete {{collection}} “{{slug}}”'
uploadMedia: '[skip ci] Upload “{{path}}”'
deleteMedia: '[skip ci] Delete “{{path}}”'
media_folder: static/img
public_folder: /img
publish_mode: editorial_workflow
local_backend: true
collections:
- name: "blog"
label: "Blog"
folder: "src/pages/blog"
create: true
slug: "{{year}}-{{month}}-{{day}}-{{slug}}"
fields:
- {label: "Template Key", name: "templateKey", widget: "hidden", default: "blog-post"}
- {label: "Title", name: "title", widget: "string"}
- {label: "Publish Date", name: "date", widget: "datetime"}
- {label: "Description", name: "description", widget: "text"}
- {label: "Featured Post", name: "featuredpost", widget: "boolean"}
- {label: "Featured Image", name: "featuredimage", widget: image}
- {label: "Body", name: "body", widget: "markdown"}
- {label: "Tags", name: "tags", widget: "list"}
- name: "pages"
label: "Pages"
files:
- file: "src/pages/index.md"
label: "Landing Page"
name: "index"
fields:
- {label: "Template Key", name: "templateKey", widget: "hidden", default: "index-page"}
- {label: Title, name: title, widget: string}
- {label: Image, name: image, widget: image}
- {label: Subheading, name: subheading, widget: string}
- {label: Mainpitch, name: mainpitch, widget: object, fields: [{label: Description, name: description, widget: text}]}
- {label: Intro, name: intro, widget: object, fields: [{label: Heading, name: heading, widget: string}, {label: Description, name: description, widget: text}, {label: Blurbs, name: blurbs, widget: list, fields: [{label: Image, name: image, widget: image}, {label: Text, name: text, widget: text}]}]}
- {label: Main, name: main, widget: object, fields: [{label: Heading, name: heading, widget: string}, {label: Description, name: description, widget: text}, {label: Image1, name: image1, widget: object, fields: [{label: Image, name: image, widget: image}, {label: Alt, name: alt, widget: string}]}, {label: Image2, name: image2, widget: object, fields: [{label: Image, name: image, widget: image}, {label: Alt, name: alt, widget: string}]}, {label: Image3, name: image3, widget: object, fields: [{label: Image, name: image, widget: image}, {label: Alt, name: alt, widget: string}]}]}
- file: "src/pages/about/index.md"
label: "About"
name: "about"
fields:
- {label: "Template Key", name: "templateKey", widget: "hidden", default: "about-page"}
- {label: "Title", name: "title", widget: "string"}
- {label: "Body", name: "body", widget: "markdown"}
Im getting stumped here. I have a Gatsby site Im setting up with netlify cms. I have my config file set and I can create the pages and widgets from within netlify admin. When I run my graphql query, I can pull the page info, but I cant access the data from the widget.
admin/config.yml
name: git-gateway
branch: master # Branch to update (optional; defaults to master)
media_folder: "src/images" # Media files will be stored in the repo under static/images/uploads
collections:
- name: "pages"
label: "Page"
folder: "src/markdown-pages"
create: true
fields:
- {label: "Title", name: "title"}
- {label: "Content", name: "content"}
- {label: "Slug", name: "slug"}
- {label: "Path", name: "path"}
- label: "Page Sections"
name: "sections"
widget: "list"
types:
- label: "Call To Action"
name: "calltoaction"
widget: object
fields:
- {label: "Title", name: "title", widget: "string"}
- {label: "Content", name: "content", widget: "markdown", required: false}
- {label: "Call to Action Link", name: "link", widget: "string", required: false, hint: "Call to Action Link"}
- {label: "Call to Action Text", name: "buttontext", widget: "string", required: false, hint: "Call to Action Text"}
- label: "Services"
name: "services"
widget: object
fields:
- {label: "Title", name: "title", widget: "string"}
- {label: "Content", name: "content", widget: "markdown", required: false}
gatsby-node.js
exports.createPages = ({actions, graphql}) => {
const {createPage} = actions;
const pageTemplate = path.resolve('src/templates/page.js');
return graphql(`{
allMarkdownRemark {
edges {
node {
id
frontmatter {
title
path
sections {
buttontext
content
link
title
}
}
}
}
}
}`)
.then(result => {
if (result.errors) {
result.errors.forEach(e => console.error(e.toString()))
return Promise.reject(result.errors)
}
result.data.allMarkdownRemark.edges.forEach(({node}) => {
createPage({
path: node.frontmatter.path,
component: pageTemplate,
context: {
id: node.id,
}
})
})
})
}
pagetemplate.js
import Helmet from 'react-helmet'
import Layout from "../components/layout"
//import CTA from '../components/sections/CTA-section'
export default function Template({ data }) {
const {markdownRemark: page} = data
return (
<Layout>
<h1>{page.frontmatter.title}</h1>
<p>{page.frontmatter.sections.title}</p>
// <CTA />
</Layout>
)
}
export const pageQuery = graphql`
query pageByPath($id: String!) {
markdownRemark(id: { eq: $id } ) {
id
frontmatter {
path
title
sections {
title
buttontext
content
link
}
}
}
}
`
GraphiQL screenshot
graphiql screenshot
Bonus question: I also need to figure out how to make the component for these widgets. As you can see from the commented out lines in pagetemplate.js I would like to make separate components for each widget. Since the data is dynamic, I dont think I will be able to use StaticQuery, and I cant make another page query on the same data since it will be imported.
How can I do in REACT if I want to connect Google Sheets as a remote source into React Grid (from DevEstreme)?
Well, DevExtream Reactive Grid can work with data only in the following format:
<Grid
rows={[
{ id: 0, product: 'DevExtreme', owner: 'DevExpress' },
{ id: 1, product: 'DevExtreme Reactive', owner: 'DevExpress' },
]}
columns={[
{ name: 'id', title: 'ID' },
{ name: 'product', title: 'Product' },
{ name: 'owner', title: 'Owner' },
]}>
<Table />
</Grid>
You need to associate a column with a row field using the column’s name field. It means that if you could get data from your Google Sheet (e.g. as in Google Sheets API - Reading and Writing Values) and modify them according to this, you will be able to display them.
If you need an automatical connection, the answer is no. Reactive Grid accepts only this data format. Otherwise, you need to process data manually.