add form for creating new postts

package.json

@@ -33,6 +33,7 @@
     "react-dom": "^16.10.2",
     "react-helmet": "^5.2.1",
     "react-typography": "^0.16.19",
+    "slugify": "^1.3.5",
     "typeface-merriweather": "0.0.72",
     "typeface-montserrat": "0.0.75",
     "typography": "^0.16.19",

src/components/layout.js

@@ -2,6 +2,9 @@ import React from "react"
 import { Link } from "gatsby"
 
 import { rhythm, scale } from "../utils/typography"
+import { withPlugin } from "@tinacms/react-tinacms"
+import { createRemarkButton } from "@tinacms/gatsby-tinacms-remark"
+import slugify from "slugify"
 
 class Layout extends React.Component {
   render() {
@@ -72,4 +75,57 @@ class Layout extends React.Component {
   }
 }
 
-export default Layout
+/**
+ * This a is `create-content` plugin. It describes
+ * a form for creating blog posts as as markdown files.
+ * Registering this plugin reveals the `+` button in
+ * the sidebar.
+ */
+const CreatePostPlugin = createRemarkButton({
+  /**
+   * Clicking the `+` button reveals a lost of content
+   * types that can be created. This field sets the
+   * label in that list.
+   */
+  label: "Post",
+  /**
+   * Clicking the `Post` in the `+` list opens a modal.
+   * This modal contains a form with these fields.
+   */
+  fields: [{ name: "title", component: "text", label: "Title" }],
+  /**
+   * Tina needs to know where the new markdown file is
+   * going to live. This `filename` function generates
+   * that path from the form's values. This function is required.
+   */
+  filename(form) {
+    let slug = slugify(form.title.toLowerCase())
+
+    return `content/blog/${slug}/index.md`
+  },
+  /**
+   * We can optionally generate default frontmatter for the
+   * new post. This can be a combination of form data and
+   * programmatically generated.
+   */
+  frontmatter(form) {
+    return {
+      title: form.title,
+      date: new Date(),
+      description: "",
+    }
+  },
+  /**
+   * Finally, we can generate a default body. Right now
+   * we don't need to do that.
+   */
+  body(form) {
+    return ""
+  },
+})
+
+/**
+ * Our `CreatePostPlugin` will be available any time the
+ * `Layout` component is rendered in the site.
+ */
+export default withPlugin(Layout, CreatePostPlugin)

yarn.lock

@@ -12080,6 +12080,11 @@ slice-ansi@^2.1.0:
     astral-regex "^1.0.0"
     is-fullwidth-code-point "^2.0.0"
 
+slugify@^1.3.5:
+  version "1.3.5"
+  resolved "https://registry.yarnpkg.com/slugify/-/slugify-1.3.5.tgz#90210678818b6d533cb060083aed0e8238133508"
+  integrity sha512-5VCnH7aS13b0UqWOs7Ef3E5rkhFe8Od+cp7wybFv5mv/sYSRkucZlJX0bamAJky7b2TTtGvrJBWVdpdEicsSrA==
+
 snapdragon-node@^2.0.1:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/snapdragon-node/-/snapdragon-node-2.1.1.tgz#6c175f86ff14bdb0724563e8f3c1b021a286853b"