3 netlify cms

content/blog/2019-03-10-hello-world.md

@@ -0,0 +1,14 @@
+---
+templateKey: BlogPost
+collectionName: blog
+title: Hello World.
+date: 2019-03-11T01:00:22.378Z
+description: Description goes here.
+tags:
+  - tag
+---
+This is the post.
+
+![](/assets/cat.jpg)
+
+## Bye!

content/pages/about.md

@@ -1,8 +1,7 @@
 ---
 collectionName: pages
-path: /about
-date: 2017-07-12T17:12:33.962Z
 title: Welcome to my little blog
 ---
+This is the about page
 
-This is the website ![](/assets/cat.jpg)
+![Hi from carrot](/assets/img_00000000-current.png)

gatsby-config.js

@@ -10,14 +10,23 @@ module.exports = {
     /**
      *  Sources for loading content
      */
+
+    /*
+      gatsby-source-filesystem notes:
+      https://www.gatsbyjs.org/packages/gatsby-source-filesystem/?=file#how-to-query
+      Most of these files get queried through other transformers,
+      but the `name` property here allows filtering allFile queries:
+      allFile(filter: { sourceInstanceName: { eq: "blog" } }) {
+        edges {
+          node { etc...
+    */
     {
       resolve: `gatsby-source-filesystem`,
       options: {
         name: `srcImages`,
         path: `${__dirname}/src/images`,
       },
     },
-
     // Pages like /about
     {
       resolve: `gatsby-source-filesystem`,
@@ -26,7 +35,7 @@ module.exports = {
         name: "pages",
       },
     },
-
+    // blog sources
     {
       resolve: `gatsby-source-filesystem`,
       options: {
@@ -43,35 +52,50 @@ module.exports = {
     },
 
     /**
-     * Transformers for making content into graphql queries
-     */ 
-    {resolve: `gatsby-transformer-remark`,
-      options:{
+     * Transformers for making content available in graphql queries
+     */
+    `gatsby-transformer-sharp`,
+    {
+      resolve: `gatsby-transformer-remark`,
+      options: {
         plugins: [
+          // gatsby-remark-relative-images must go before gatsby-remark-images
+          // https://www.gatsbyjs.org/packages/gatsby-remark-relative-images
+          { resolve: `gatsby-remark-relative-images` },
+
           {
             resolve: `gatsby-remark-images`,
             options: {
               // It's important to specify the maxWidth (in pixels) of
               // the content container as this plugin uses this as the
               // base for generating different widths of each image.
-              maxWidth: 590,
-            }
+              maxWidth: 820,
+              quality: 90,
+              linkImagesToOriginal: false,
+            },
           },
-        ]
-      }
+        ],
+      },
     },
-    `gatsby-transformer-sharp`,
-
-    /** 
+
+    /**
      * Plugins for general functionality
-    */
+     */
     "gatsby-plugin-catch-links",
     "gatsby-plugin-react-helmet",
     `gatsby-plugin-sharp`,
     "gatsby-plugin-styled-components",
     "gatsby-plugin-typescript",
-
-
+    {
+      resolve: "gatsby-plugin-netlify-cms",
+      options: {
+        modulePath: `${__dirname}/src/cms/cms.jsx`,
+        publicPath: "/admin",
+        htmlTitle: "Admin",
+        // enableIdentityWidget: false,
+        manualInit: true,
+      },
+    },
     {
       resolve: `gatsby-plugin-manifest`,
       options: {

gatsby-node.js

@@ -10,24 +10,22 @@ const path = require("path")
 
 exports.onCreateNode = ({ node, actions, getNode }) => {
   const { createNodeField } = actions
-
   // Add path to markdown nodes
   if (node.internal.type === "MarkdownRemark") {
-    let nodePath = node.frontmatter.path
-
-    // if there is a path in frontmatter, use it
-    if (!nodePath) {
-      const subPath = `/${node.frontmatter.collectionName || "/writing"}`
-      nodePath = path.join(
-        subPath,
-        createFilePath({
-          node,
-          getNode,
-          basePath: "content/blog", // for now all content is coming from here
-          trailingSlash: false,
-        })
-      )
-    }
+    // console.log(node)
+    // console.log(node.frontmatter.collectionName)
+    // markdown from 'pages' collection goes to root.
+    const collectionName = node.frontmatter.collectionName
+    const pageLocation = collectionName === "pages" ? "/" : `/${collectionName}`
+    const nodePath = path.join(
+      pageLocation,
+      createFilePath({
+        node,
+        getNode,
+        basePath: "content/blog", // for now all content is coming from here
+        trailingSlash: false,
+      })
+    )
     // console.log("\ncreating slug field", nodePath)
     createNodeField({
       name: `path`,
@@ -54,7 +52,6 @@ exports.createPages = ({ actions, graphql }) => {
             id
             excerpt
             frontmatter {
-              path
               collectionName
             }
             fields {
@@ -79,6 +76,15 @@ exports.createPages = ({ actions, graphql }) => {
   })
 }
 
+/**
+ * Add the file-system as an api proxy:
+ * https://www.gatsbyjs.org/docs/api-proxy/#advanced-proxying
+ */
+exports.onCreateDevServer = ({ app }) => {
+  const fsMiddlewareAPI = require("netlify-cms-backend-fs/dist/fs")
+  fsMiddlewareAPI(app)
+}
+
 /**
  * Generate GraphQL schema.json file to be read by tslint
  * Thanks: https://gist.github.com/kkemple/6169e8dc16369b7c01ad7408fc7917a9

package.json

@@ -5,7 +5,7 @@
   "version": "0.1.0",
   "author": "Kyle Mathews <mathews.kyle@gmail.com>",
   "dependencies": {
-    "gatsby": "^2.1.18",
+    "gatsby": "2.1.22",
     "gatsby-image": "^2.0.30",
     "gatsby-plugin-catch-links": "^2.0.12",
     "gatsby-plugin-manifest": "^2.0.19",
@@ -16,9 +16,11 @@
     "gatsby-plugin-styled-components": "^3.0.6",
     "gatsby-plugin-typescript": "^2.0.9",
     "gatsby-remark-images": "^3.0.6",
+    "gatsby-remark-relative-images": "^0.2.2",
     "gatsby-source-filesystem": "^2.0.23",
     "gatsby-transformer-remark": "^2.3.1",
     "gatsby-transformer-sharp": "^2.1.14",
+    "netlify-cms": "^2.6.0",
     "prop-types": "^15.7.2",
     "react": "^16.8.3",
     "react-dom": "^16.8.3",
@@ -44,6 +46,7 @@
     "husky": "^1.3.1",
     "jest": "^24.1.0",
     "lint-staged": "^8.1.4",
+    "netlify-cms-backend-fs": "^0.3.6",
     "nodemon": "^1.18.10",
     "prettier": "^1.16.4",
     "typescript": "^3.3.3333",

src/cms/cms.jsx

@@ -0,0 +1,73 @@
+import { FileSystemBackend } from "netlify-cms-backend-fs"
+import CMS, { init } from "netlify-cms"
+
+const isDevelopment = process.env.NODE_ENV === "development"
+
+// Handled by gatsby-config plugin config
+// const isClient = typeof window !== "undefined"
+// if (isClient) {
+//   window.CMS_MANUAL_INIT = true
+// }
+
+if (isDevelopment) {
+  // Allows for local development overrides in cms.yaml
+  window.CMS_ENV = "localhost_development"
+
+  // Attach to the file system
+  CMS.registerBackend("file-system", FileSystemBackend)
+}
+
+// Start the CMS
+init()
+
+/* Future mdx config
+// import React, { Component } from "react"
+// import { StyleSheetManager } from "styled-components"
+// import { MdxControl, MdxPreview } from "netlify-cms-widget-mdx"
+// import { Theme, LayoutComponents } from "../components/Theme"
+
+
+// Custom components need refs for validation and thus must be a class.
+// Additionally, after <Theme>, only one child is allowed.
+// See https://github.com/netlify/netlify-cms/issues/1346
+
+class MDXWidget extends Component {
+  render() {
+    return (
+      <Theme>
+        <MdxControl {...this.props} />
+      </Theme>
+    )
+  }
+}
+
+// The preview window which renders MDX content.
+// Docs: https://www.netlifycms.org/docs/customization/
+const ThemedPreview = props => (
+  <Theme>
+    <MdxPreview
+      mdx={{
+        components: LayoutComponents,
+        scope: {},
+        mdPlugins: [],
+      }}
+      {...props}
+    />
+  </Theme>
+)
+
+// Must inject styles into iframe:
+// https://github.com/netlify/netlify-cms/issues/793#issuecomment-425055513
+const PreviewWindow = props => {
+  const iframe = document.getElementsByTagName("iframe")[0]
+  const iframeHeadElem = iframe.contentDocument.head
+
+  return (
+    <StyleSheetManager target={iframeHeadElem}>
+      <ThemedPreview {...props} />
+    </StyleSheetManager>
+  )
+}
+
+CMS.registerWidget("mdx", MDXWidget, PreviewWindow)
+*/

src/pages/index.tsx

@@ -62,7 +62,6 @@ export const pageQuery = graphql`
             collectionName
             title
             date(formatString: "MMMM DD, YYYY")
-            path
           }
           fields {
             path