import React from 'react'

export default function About() {
  return (
    

      About Me
    
  )
}

import React from 'react'
import { graphql } from 'gatsby'

export default function About({data}) {
  return (
    

      {data.dynamicString}
    
  )
}

export const query = graphql`
  query aboutMeDynamicContent {
    # Your GraphQL Query here
  }
`

type Node = {
  id: String, // a unique id of each node
  children: Array[String], // an array of node ids
  parent: String, // parent node id, undefined if no parent
  fields: Object, // this is for us to add any custom property to this node
  internal: {
    type: String, // A globally unique name chosen by the plugin who created this node.
    ...
  },
  ...other fields specific to this type of node
}

content/
  my-journey-to-neverland.md
  my-new-blog.md
src/
  components/
    post.js
  pages/
    index.js  
gatsby-node.js
package.json

// helper function to read a file : PSEUDO
function readFile(path){
  ... read file at path `path`
  return {
    name,
    content,
    path,
    fileType,
    modifiedAt,
    createdAt
  };
}

// this function is called by gatsby to check if we've defined
// any nodes. You will use this if you want to register/create nodes. We are using it
// because we want to read files and create/register them as nodes in gatsby
exports.sourceNodes = (
  { actions, getNode, createNodeId },
  pluginOptions ) => {
  
  const { createNode } = actions; // helper function to register a node with gatsby
  const fileDirectory = pluginOptions.path; // path defined in plugin options to read files from 

  // iterating over the directory content
  fileDirectory.forEach((filePath) => {
  // reading file at given path
  const file = readFile(filePath);
    // registering our node
    createNode({
      id: createNodeId(), // assigning a unique id through helper function
      children: [], // no children at this point
      parent: undefined, // no parent
      internal: {
        type: 'MySourceFileNode', // A globally unique name for this node type
      },
      // custom properties of our file node
      name: file.name,
      content: file.content,
      path: file.path,
      fileType: file.fileType,
      modifiedAt: file.modifiedAt,
      createdAt: file.createdAt
    });
  });
}

const mdToHtml = require('magic-md-to-html-transformer'); // pretty sure this doen't exist

// helper function to create our new node
function createMDNode({id, node, content}) {

  const { html } = mdToHtml(content);
  // creating data structure for our new node
  const mdNode = {
    id,
    children: [],
    // the parent our new node will be the file node
    // because we've derived the new node from the file node
    parent: node.id,
    internal: {
      content: content,
      // setting a unique name for our new node
      type: "Md"
    }
  };

  mdNode.html = html;
  return mdNode;
}

// gatsby calls this fuction for each node that it has created
// this is also a good place to modify/add a node
// it will be called for each of our `MySourceFileNode`
exports.onCreateNode = async (
  {
    node, // the node itself
    loadNodeContent,
    actions,
    createNodeId, //helper function to create a unique node id
    getNode, // helper function to get any node by passing the id
  },
  pluginOptions
) => {
    
  const { createNode, createParentChildLink, createNodeField } = actions;

   // we only want to transform nodes of type `MySourceFileNode`
   // rest we don't care 
  if (node.internal.type !== "MySourceFileNode") {
    return;
  }

  // helper function to read node's content
  // in our case the content would be the content of our raw md files
  const content = await loadNodeContent(node);

  // here we are creating a new node type
  // this new node type will contain our html transformed from md
  // we are passing in the raw content of our md files to our helper function
  const mdNode = createMDNode({
    id: createNodeId(),
    node,
    content
  });

  // registering our new node with getsby
  // after this it will be available in our GraphQL API
  createNode(mdNode);

  // this is a helper functin to inform the parent node that it has a new child 👼🏻
  // remember the `children` property, yes i think it updates that property of the parent to include this new child
  createParentChildLink({ parent: node, child: mdNode });

  // creating a custom field named slug on our new node
  // remember we have a fields property on each node
  // the field we create here gets added to that property
  createNodeField({
    name: 'slug', // field name
    mdNode, // the node on which we want to add a custom field
    value: kebabCase(node.fileName) // field value
  });
}

[
  {
    id: '123456',
    children: ['abc'],
    parent: ,
    internal: {
      type: 'MySourceFileNode',
    },
    name: 'my-new-blog',
    content: '↵# My New Blog↵↵Hello World!',
  },
  {
    id: '7891011',
    children: ['ghi'],
    parent: ,
    internal: {
      type: 'MySourceFileNode',
    },
    name: 'my-journey-to-neverland',
    content: '↵# Journey to neverland↵↵Hello World!',  
  },
  {
    id: 'abc',
    children: [],
    parent: '123456',
    internal: {
      type: 'Md',
    },
    field: {
      slug: 'my-new-blog',
    },
    html: '
My New Blog
Hello World!
',  
  },
  {
    id: 'ghi',
    children: [],
    parent: '7891011',
    internal: {
      type: 'Md',
    },
    field: {
      slug: 'my-journey-to-neverland',
    },
    html: '
Journey to neverland
Hello World!
',  
  }
]

// gatsby calls this fuction to give us an oppurtunity
// to register new pages with gatsby.
// We are using it to create a page for each of our blog
exports.createPages = ({ graphql, actions }) => {

  const { createPage } = actions; // helper function to register a page

  // we must return a promise
  // here we are querying our graphql api to get
  // all the `Md` nodes that we created
  // note that gatsby automatically creates GraphQL schema
  // for such queries like `allMd` and `allMySourceFileNode`
  // using the nodes that we've defined earlier
  return new Promise((resolve, reject) => {
    resolve(
      graphql(
        `
          {
            allMd {
              #edges is like results
              edges {
                node {
                  id
                  fields {
                    slug
                  }
                }
              }
            }
          }
        `
      ).then(result => {
        // this is some boilerlate to handle errors
        if (result.errors) {
          console.error(result.errors);
          reject(result.errors);
        }

        // storing our blogs in a variable
        const posts = result.data.allMd.edges;

        // iterating over all of our blogs
        posts.forEach(({ node }, index) => {
          // using the helper function
          // we create and register our page with gatsby
          createPage({
            path: node.fields.slug, // '/my-new-blog`
            // path of the react component which should render this html
            component: path.resolve(__dirname, `src/components/post.js`),
            // any data you want to pass to the react component that will render this
            context: { 
              id: node.id,
            }
          });
        });
      })
    );
  });
};