Jamie Johnson jamiejohnsonkc

Freelance frontend development, MarCom and Marketing Management.

jamiejohnsonkc / AddSlugToMarkdownNode_Gatsby

Created May 31, 2020 20:38

createNodeField API implementation in Gastby-Node to get, create and apply slug to markdown node

	const { createFilePath } = require(`gatsby-source-filesystem`)
	exports.onCreateNode = ({ node, getNode, actions }) => {
	const { createNodeField } = actions
	if (node.internal.type === `MarkdownRemark`) {
	const slug = createFilePath({ node, getNode, basePath: `pages` })
	createNodeField({
	node,
	name: `slug`,
	value: slug,
	})

jamiejohnsonkc / CreateSlugsGatsby

Last active May 31, 2020 20:35

the gatsby-source-filesystem function for creating slugs. (via gatsby-node.js )

	const { createFilePath } = require(`gatsby-source-filesystem`)

	exports.onCreateNode = ({ node, getNode }) => {
	if (node.internal.type === `MarkdownRemark`) {
	console.log(createFilePath({ node, getNode, basePath: `pages` }))
	}
	}

jamiejohnsonkc / GetFileNameFromMarkDownRemarkNode

Last active May 31, 2020 20:33

gatsby-node.js settings to Traverse node graph to the parent file node (i.e. the filename)

	exports.onCreateNode = ({ node, getNode }) => {
	if (node.internal.type === `MarkdownRemark`) {
	const fileNode = getNode(node.parent)
	console.log(`\n`, fileNode.relativePath)
	}
	}

jamiejohnsonkc / gatsbyBlogListQuery.js

Last active June 2, 2020 00:19

gatsby page with query to list markdown files

	import React from "react"
	import { graphql } from "gatsby"
	import { css } from "@emotion/core"
	import { rhythm } from "../utils/typography"
	import Layout from "../components/layout"

	export default function Home({ data }) {
	console.log(data)
	return (
	<Layout>

jamiejohnsonkc / index.js

Created May 31, 2020 20:15

	import React from "react"
	import { graphql } from "gatsby"
	import { css } from "@emotion/core"
	import { rhythm } from "../utils/typography"
	import Layout from "../components/layout"

	export default function Home({ data }) {
	console.log(data)
	return (
	<Layout>

jamiejohnsonkc / my-files gatsby query

Created May 31, 2020 20:01

page with query to list all files within source directy

	import React from "react"
	import { graphql } from "gatsby"
	import Layout from "../components/layout"

	export default function MyFiles({ data }) {
	console.log(data)
	return (
	<Layout>
	<div>
	<h1>My Site's Files</h1>

jamiejohnsonkc / Fluid Gatsby Image PageQuery Multiple

Last active July 3, 2020 17:10

query and inject multiple fluid gatsby images in page

	/** @jsx jsx */
	import React from "react"
	import { Styled, jsx } from "theme-ui"
	import { Link, graphql } from "gatsby"
	import Layout from "../components/Organisms/Layout"
	import SEO from "./seo"
	import Img from "gatsby-image"

	export const fluidImage = graphql`
	fragment fluidImage on File {

jamiejohnsonkc / Single_Fixed_Gatsby_Image_Query

Last active May 29, 2020 18:25

query and inject single fixed gatsby image into a page

	/** @jsx jsx */
	import React from "react"
	import { Styled, jsx } from "theme-ui"
	import { Link, graphql } from "gatsby"
	import Layout from "../components/Organisms/Layout"
	import SEO from "./seo"
	import Img from "gatsby-image"

	export const query = graphql`
	query {

jamiejohnsonkc / Query single fluid Gatsby Image to Component.jsx

Last active May 29, 2020 18:26

Query single fluid Gatsby Image to Component.jsx

	import React from 'react'
	import { useStaticQuery, graphql } from 'gatsby'
	import Img from 'gatsby-image'

	const data = useStaticQuery(graphql`
	query {
	file(relativePath: { eq: "bookshelf.jpg" }) {
	childImageSharp {
	fluid {
	base64

jamiejohnsonkc / objectMerge.js

Created February 28, 2020 00:56

merge javascript objects