Gatsby image blog

gatsby-node.js

@@ -0,0 +1,98 @@
+const { createRemoteFileNode } = require('gatsby-source-filesystem');
+
+exports.createSchemaCustomization = ({ actions }) => {
+  const { createTypes } = actions;
+
+  createTypes(`
+   type Mdx implements Node {
+     frontmatter: frontmatter
+     embeddedImagesRemote: [File] @link(from: "fields.embeddedImagesRemote")
+     coverImage: [File] @link(from: "fields.coverImage")  
+   }
+
+   type frontmatter @dontInfer {
+     title: String
+     excerpt: String
+     date: String
+     slug: String
+     type: String
+     coverImageAltText: [String]
+     embeddedImagesRemote: [String]
+     coverImage: [String]
+   }
+ `);
+};
+
+exports.onCreateNode = async ({
+  node,
+  createNodeId,
+  actions: { createNodeField, createNode },
+  cache,
+  store,
+}) => {
+  // Embedded images
+  if (
+    node.internal.type === 'Mdx' &&
+    node.frontmatter &&
+    node.frontmatter.embeddedImagesRemote
+  ) {
+    let embeddedImagesRemote = await Promise.all(
+      node.frontmatter.embeddedImagesRemote.map((url) => {
+        try {
+          return createRemoteFileNode({
+            url,
+            parentNodeId: node.id,
+            createNode,
+            createNodeId,
+            cache,
+            store,
+          });
+        } catch (error) {
+          console.error(error);
+        }
+      })
+    );
+    if (embeddedImagesRemote) {
+      createNodeField({
+        node,
+        name: 'embeddedImagesRemote',
+        value: embeddedImagesRemote.map((image) => {
+          return image.id;
+        }),
+      });
+    }
+  }
+
+  // CoverImages
+  if (
+    node.internal.type === 'Mdx' &&
+    node.frontmatter &&
+    node.frontmatter.coverImage
+  ) {
+    let coverImage = await Promise.all(
+      node.frontmatter.coverImage.map((url) => {
+        try {
+          return createRemoteFileNode({
+            url,
+            parentNodeId: node.id,
+            createNode,
+            createNodeId,
+            cache,
+            store,
+          });
+        } catch (error) {
+          console.error(error);
+        }
+      })
+    );
+    if (coverImage) {
+      createNodeField({
+        node,
+        name: 'coverImage',
+        value: coverImage.map((image) => {
+          return image.id;
+        }),
+      });
+    }
+  }
+};

src/components/ui/Image.js

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import { GatsbyImage, getImage } from 'gatsby-plugin-image';
+
+const Image = ({ src, alt, className, caption }) => {
+  return (
+    <figure className={className}>
+      <GatsbyImage image={getImage(src)} alt={alt} />
+      {caption ? <figcaption>{caption}</figcaption> : null}
+    </figure>
+  );
+};
+
+Image.propTypes = {
+  alt: PropTypes.string.isRequired,
+  caption: PropTypes.string,
+  className: PropTypes.string,
+  src: PropTypes.object.isRequired,
+};
+
+export default Image;

src/content/blog/i-have-website.mdx

@@ -2,9 +2,8 @@
 type: blog
 title: 'I Have Website!'
 date: '2012-09-17'
-permalink: '/blog/2012/09/i-have-website/index.html'
 categories: personal
-excerpt: 'Here I am, about 6 or 7 years into my career and I’m writing the introductory post of the website under my own domain. How can this be? Allow me to explain. '
+excerpt: 'Here I am, about 6 or 7 years into my career and I’m writing the introductory post of the website under my own domain. How can this be? Allow me to explain.'
 slug: 'i-have-website'
 ---
 

src/content/blog/introducing-corpora-translations.mdx

@@ -5,17 +5,14 @@ date: '2013-02-02'
 categories: personal
 excerpt: 'Corpora Translations is a small, two-person translation company based both in Brazil and in the U.S. Announcing their new site!'
 slug: 'introducing-corpora-translations'
+coverImage:
+  - https://images.jaredcunha.com/corpora-full.jpg
+coverImageAltText:
+  - 'Screen shot of corpora translations'
 ---
 
 [Corpora Translations](http://www.corporatranslations.com/) is a small, two-person translation company based both in Brazil and in the U.S. They specialize in providing language services to international organizations, government institutions, law offices, and any other sectors that would require precise translation and interpretation. In other words, they do what translation “chop shops” and Google Translate cannot: carry over voice and tone, while accounting for colloquialisms and regional dialects.
 
-<figure class="fullbleed">
-  <img
-    src="https://images.jaredcunha.com/corpora-full.jpg"
-    alt="corpora-translations screenshot"
-  />
-</figure>
-
 Business partners Mirna and Bea had expressed a strong desire to avoid common design clichés found in many translation websites. No globes or ubiquitous shiny, energetic, more-professional-than-thou people. We opted to use the bridge as a metaphor for the connective potential that translation can facilitate. There is no emphasis on speed because that is more typical of low-quality translation sites. Every project is different and there are a variety of factors that affect turnaround time – scope, urgency, budget, etc. In that aspect, it’s just like web design!
 
 The website runs on Wordpress and exists in English and Brazilian Portuguese. To handle that, I have installed the powerful [WPML](http://wpml.org) plugin along with Yoast SEO. These plugins allow the each language to function as its own entity within its respective region with localized URLs, language settings, and meta data. Essentially, we’re using one CMS to run two semi-independent sites. It doesn’t require each page to have a translation, and you can serve different navigation menus. There are no disruptions caused by discrepancies in the content. It really is nice.

src/content/blog/recipe-a-styleguide.mdx

@@ -4,19 +4,18 @@ title: 'Recipe: A Styleguide'
 date: '2016-08-17'
 categories: Development, Design
 excerpt: 'Building a styleguide for Restaurants Plus'
-permalink: '/blog/2016/08/recipe-a-styleguide/index.html'
 slug: 'recipe-a-styleguide'
+embeddedImagesRemote:
+  - https://images.jaredcunha.com/recipe-front.png
+  - https://images.jaredcunha.com/recipe.png
 ---
 
-<figure className="full">
-  <img
-    src="https://images.jaredcunha.com/recipe-front.png"
-    alt="Screenshot of Recipe"
-  />
-  <figcaption>
-    It's just a screenshot. The button doesn’t actually work.
-  </figcaption>
-</figure>
+<Image
+  src={props.data.mdx.embeddedImagesRemote[0]}
+  alt="screenshot of Recipe hero image"
+  className="full"
+  caption="It's just a screenshot. The button doesn’t actually work."
+/>
 
 At LivingSocial, we’ve been diligently working on a new experience for [Restaurants Plus](http://r.livingsoci.al/qd9njwn/04) over the past several months. The process has been encouraging for several reasons. Regarding the product, we can see that consumers have been enthusiastic. As an organization, it is our first responsive site and not hindered by legacy systems. My role has been as front-end developer.
 
@@ -30,13 +29,12 @@ User interfaces fluctuated as well. Buttons would have gradients and drop shadow
 
 Having a reference document became essential – an inventory of our patterns and components, how they are built and how they are used. We needed to do better job enforcing ourselves in how we present a consistent visual language to our consumers. That is why I started Recipe.
 
-<figure className="border">
-  <img
-    src="https://images.jaredcunha.com/recipe.png"
-    alt="Screenshot of Recipe"
-  />
-  <figcaption>Typical page in Recipe</figcaption>
-</figure>
+<Image
+  src={props.data.mdx.embeddedImagesRemote[1]}
+  alt="screenshot of Recipe documentation page"
+  className="border"
+  caption="Typical page in Recipe"
+/>
 
 Preferably, we would have began with building a component library to use in crafting full page designs. However, page designs were completed long before we began front-end development. But does that mean we missed our only opportunity to build a styleguide? No! We made time to discuss with our designers how they envisioned long-term use of their components, how they could extend, and constraints upon their use.
 

src/pages/blog.jsx

@@ -2,6 +2,7 @@ import * as React from 'react';
 import { graphql, useStaticQuery, Link } from 'gatsby';
 import DefaultLayout from '../templates/default';
 import StaticPageHeader from '../components/ui/StaticPageHeader';
+import { formatDate } from '../utils';
 
 const BlogPage = () => {
   const data = useStaticQuery(graphql`
@@ -12,7 +13,7 @@ const BlogPage = () => {
       ) {
         nodes {
           frontmatter {
-            date(formatString: "MMMM DD, YYYY")
+            date
             excerpt
             title
             slug
@@ -44,7 +45,7 @@ const BlogPage = () => {
                   {post.frontmatter.excerpt}
                 </p>
                 <p className="article-list__date">
-                  Posted on {post.frontmatter.date}
+                  Posted on {formatDate(post.frontmatter.date)}
                 </p>
               </li>
             ))}

src/pages/index.jsx

@@ -2,6 +2,7 @@ import * as React from 'react';
 import { Link, graphql, useStaticQuery } from 'gatsby';
 import { StaticImage } from 'gatsby-plugin-image';
 import DefaultLayout from '../templates/default';
+import { formatDate } from '../utils';
 
 const IndexPage = () => {
   const blogData = useStaticQuery(graphql`
@@ -15,7 +16,7 @@ const IndexPage = () => {
           id
           frontmatter {
             title
-            date(formatString: "MMMM DD, YYYY")
+            date
             excerpt
             slug
           }
@@ -74,7 +75,7 @@ const IndexPage = () => {
                   {post.frontmatter.excerpt}
                 </p>
                 <p className="article-list__date">
-                  Posted on {post.frontmatter.date}
+                  Posted on {formatDate(post.frontmatter.date)}
                 </p>
               </li>
             ))}

src/pages/photos.jsx

@@ -2,6 +2,7 @@ import * as React from 'react';
 import { graphql, useStaticQuery, Link } from 'gatsby';
 import DefaultLayout from '../templates/default';
 import StaticPageHeader from '../components/ui/StaticPageHeader';
+import { formatDate } from '../utils';
 
 const PhotosPage = () => {
   const data = useStaticQuery(graphql`
@@ -12,7 +13,7 @@ const PhotosPage = () => {
       ) {
         nodes {
           frontmatter {
-            date(formatString: "MMMM DD, YYYY")
+            date
             excerpt
             title
             slug
@@ -44,7 +45,7 @@ const PhotosPage = () => {
                   {post.frontmatter.excerpt}
                 </p>
                 <p className="article-list__date">
-                  Posted on {post.frontmatter.date}
+                  Posted on {formatDate(post.frontmatter.date)}
                 </p>
               </li>
             ))}

src/pages/{mdx.frontmatter__type}/{mdx.frontmatter__slug}.jsx

@@ -4,16 +4,25 @@ import PropTypes from 'prop-types';
 import DefaultLayout from '../../templates/default';
 import { formatDate } from '../../utils';
 import { MDXProvider } from '@mdx-js/react';
-
-const shortcodes = { Link }; // Provide common components here
+import Image from '../../components/ui/Image';
+import { GatsbyImage, getImage } from 'gatsby-plugin-image';
 
 const PageTemplate = ({ data, children }) => {
+  const shortcodes = { Link, Image }; // Provide common components here
+  const coverImage = data.mdx.coverImage ? data.mdx.coverImage[0] : null;
+
+  const coverImageAltText = data.mdx.frontmatter.coverImageAltText
+    ? data.mdx.frontmatter.coverImageAltText[0]
+    : '';
   return (
     <DefaultLayout
       title={data.mdx.frontmatter.title}
       description={data.mdx.frontmatter.excerpt}
       date={data.mdx.frontmatter.date}
     >
+      {coverImage ? (
+        <GatsbyImage image={getImage(coverImage)} alt={coverImageAltText} />
+      ) : null}
       <article className="post">
         <h1>{data.mdx.frontmatter.title}</h1>
         <p>{formatDate(data.mdx.frontmatter.date)}</p>
@@ -26,11 +35,22 @@ const PageTemplate = ({ data, children }) => {
 export const query = graphql`
   query ($id: String!) {
     mdx(id: { eq: $id }) {
+      coverImage {
+        childImageSharp {
+          gatsbyImageData(layout: FULL_WIDTH)
+        }
+      }
+      embeddedImagesRemote {
+        childImageSharp {
+          gatsbyImageData(layout: FULL_WIDTH)
+        }
+      }
       frontmatter {
         title
         date
         excerpt
         slug
+        coverImageAltText
       }
       body
     }