refactor: create share card from buffer (#309)

Author: georgiee

gatsby-node.js

@@ -8,8 +8,8 @@ const {
 } = require('./gatsby/create-pages/create-career-pages');
 const { createFilePath } = require('gatsby-source-filesystem');
 
-exports.onCreateNode = (gatsbyCreateNodeArgs) => {
-  createPreviewCards(gatsbyCreateNodeArgs);
+exports.onCreateNode = async (gatsbyCreateNodeArgs) => {
+  await createPreviewCards(gatsbyCreateNodeArgs);
 
   const { node, actions, getNode } = gatsbyCreateNodeArgs;
   const { createNodeField } = actions;
@@ -27,6 +27,36 @@ exports.onCreateNode = (gatsbyCreateNodeArgs) => {
   }
 };
 
+/**
+ * We should use `@link` and link the given foreign key field to the actual node.
+ * The before known foreign Key `___NODE` notation is deprecated, that's why we need the custom and explicit schema.
+ *
+ * You can't replace fields.socialCard hence the creation of the node in the parent.
+ * This is syntactic sugar and as as an alternative can use
+ * `schema.buildObjectType` and then resolve the reference manually through `context.nodeModel.getNodeById`
+ *
+ * Deprecation Note:
+ * https://www.gatsbyjs.com/docs/reference/release-notes/migrating-from-v3-to-v4/#___node-convention-is-deprecated
+ *
+ * How to "schema additions"
+ * https://www.gatsbyjs.com/docs/how-to/plugins-and-themes/creating-a-source-plugin/#create-foreign-key-relationships-between-data
+ */
+
+exports.createSchemaCustomization = ({ actions, schema }) => {
+  const { createTypes } = actions;
+
+  const typeDefs = [
+    `type MarkdownRemark implements Node { 
+      socialCardFile: File @link(from: "fields.socialCardFileId")
+    }`,
+    `type SyPersonioJob implements Node { 
+      socialCardFile: File @link(from: "fields.socialCardFileId")
+    }`,
+  ];
+
+  createTypes(typeDefs);
+};
+
 exports.createPages = async (createPagesArgs) => {
   await createCareerPages(createPagesArgs);
   await createBlogPosts(createPagesArgs);

gatsby/create-node/create-preview-cards.js

@@ -1,65 +1,58 @@
-const slugify = require('slugify');
-const path = require('path');
-const { siteMetadata } = require('../../gatsby-config');
 const {
-  generateCard,
+  generateCardToBuffer,
 } = require('../util/preview-card-generator/generate-card');
 
+const { createFileNodeFromBuffer } = require('gatsby-source-filesystem');
+
 /**
  * Create a preview card file and put the url to the Gatsby store to be able
  * to link it in the page header.
  */
-const createPreviewMarkdown = ({ node, _, actions }) => {
-  const { createNodeField } = actions;
-  const post = node.frontmatter;
+const createPreviewCard = async (
+  title,
+  { node, _, actions, getCache, createNodeId },
+) => {
+  const { createNode, createNodeField } = actions;
 
   // we need the title in order to generate anything
-  if (!post.title) {
+  if (!title) {
     return;
   }
 
-  // we create a file name from the path (which is the page slug and more unique) but if none is available take the title
-  const fileName = `social-card---${slugify(post.path || post.title, {
-    lower: true,
-  })}.jpg`;
-  const outputFile = path.join('public', fileName);
-  const imagePath = `/${fileName}`;
-
-  generateCard({ title: post.title }, outputFile).then(() => {
-    createNodeField({
-      node,
-      name: `socialCard`,
-      value: imagePath,
-    });
+  const buffer = await generateCardToBuffer({ title });
+  /**
+   * The util function `createFileNodeFromBuffer` from the official gatsby source plugin `gatsby-source-filesystem`
+   * creates a file node from a given file buffer. The value of `parentNodeId` creates the necessary relationship
+   * between the original node and the actual file node so it's not garbage collected.
+   *
+   * The actual foreign key relationship is resolved through `createSchemaCustomization`
+   * in gatsby-node.js for all node types the `createPreviewCard` is invoked for.
+   */
+  const fileNode = await createFileNodeFromBuffer({
+    name: 'social-card',
+    buffer,
+    getCache,
+    createNode,
+    createNodeId,
+    parentNodeId: node.id,
   });
-};
 
-const createPreviewJob = ({ node, _, actions }) => {
-  const { createNodeField } = actions;
-
-  const fileName = `social-card---career-${slugify(node.name, {
-    lower: true,
-  })}.jpg`;
-
-  const outputFile = path.join('public', fileName);
-  const imagePath = `/${fileName}`;
-
-  generateCard({ title: node.name }, outputFile).then(() => {
+  if (fileNode) {
     createNodeField({
       node,
-      name: 'socialCard',
-      value: imagePath,
+      name: `socialCardFileId`,
+      value: fileNode.id,
     });
-  });
+  }
 };
 
-const createPreviewCards = ({ node, _, actions }) => {
+const createPreviewCards = async ({ node, ...rest }) => {
   if (node.internal.type === 'SyPersonioJob') {
-    createPreviewJob({ node, _, actions });
+    await createPreviewCard(node.name, { node, ...rest });
   }
 
   if (node.internal.type === 'MarkdownRemark') {
-    createPreviewMarkdown({ node, _, actions });
+    await createPreviewCard(node.frontmatter.title, { node, ...rest });
   }
 };
 

gatsby/util/preview-card-generator/generate-card.js

@@ -1,4 +1,3 @@
-const fs = require('fs');
 const path = require('path');
 const { createCanvas, loadImage, registerFont } = require('canvas');
 
@@ -63,7 +62,7 @@ const wrapTextFactory = (context) => (text, x, y, maxWidth, lineHeight) => {
  * by composing a background with a title
  * and an optional author.
  */
-async function generateCard({ title, author }, file) {
+async function generateCardToBuffer({ title, author }) {
   const canvas = createCanvas(CARD_WIDTH, CARD_HEIGHT);
 
   const context = canvas.getContext('2d');
@@ -95,12 +94,9 @@ async function generateCard({ title, author }, file) {
     );
   }
 
-  const buffer = canvas.toBuffer('image/jpeg');
-  fs.writeFileSync(file, buffer);
-
-  return file;
+  return canvas.toBuffer('image/jpeg');
 }
 
 module.exports = {
-  generateCard,
+  generateCardToBuffer,
 };

src/pages/career.tsx

@@ -3,14 +3,16 @@ import SEO from '../components/layout/seo';
 import { graphql } from 'gatsby';
 import { useTranslation } from 'gatsby-plugin-react-i18next';
 import { CareerPage } from '../components/pages/career/career-page';
-import { LocalesQuery, SyPersonioJob } from '../types';
+import {
+  LocalesQuery,
+  PlainFixedImageSharpSource,
+  SyPersonioJob,
+} from '../types';
 import { IGatsbyImageData } from 'gatsby-plugin-image';
 
 interface CareerMarkdownQuery {
   htmlAst: string;
-  fields: {
-    socialCard: string;
-  };
+  socialCardFile: PlainFixedImageSharpSource;
 }
 
 interface CareerProps {
@@ -27,12 +29,13 @@ interface CareerProps {
 
 const Career = (props: CareerProps) => {
   const { t } = useTranslation();
-  const socialCard = props.data.markdownRemark?.fields?.socialCard;
+  const socialCardPath =
+    props.data.markdownRemark.socialCardFile.childImageSharp.fixed.src;
 
   return (
     <>
       <SEO
-        shareImagePath={socialCard}
+        shareImagePath={socialCardPath}
         title={`${t('career.title')} | Satellytes`}
         description={t('career.seo.description')}
         location={props.location}
@@ -81,8 +84,12 @@ export const CareerPageQuery = graphql`
       fileAbsolutePath: { regex: "/(pages/career)/" }
       frontmatter: { language: { eq: $language } }
     ) {
-      fields {
-        socialCard
+      socialCardFile {
+        childImageSharp {
+          fixed(width: 1440, height: 760) {
+            src
+          }
+        }
       }
     }
   }

src/templates/career-details.tsx

@@ -22,13 +22,13 @@ interface CareerPageProps {
 const CareerPage: React.FC<CareerPageProps> = (props): JSX.Element => {
   const { pageContext } = props;
   const position = props.data.syPersonioJob;
-  const socialCardImage = position.fields.socialCard;
+  const socialCardPath = position.socialCardFile.childImageSharp.fixed.src;
   const { t } = useTranslation();
 
   return (
     <>
       <SEO
-        shareImagePath={socialCardImage}
+        shareImagePath={socialCardPath}
         title={t('career.seo.title-detail', {
           name: position.name,
         })}
@@ -51,9 +51,6 @@ const CareerPage: React.FC<CareerPageProps> = (props): JSX.Element => {
 export const CareerDetailsPageQuery = graphql`
   query ($language: String!, $id: String!) {
     syPersonioJob(id: { eq: $id }) {
-      fields {
-        socialCard
-      }
       id
       lang
       jobId
@@ -66,6 +63,13 @@ export const CareerDetailsPageQuery = graphql`
         descriptionHtml
         description
       }
+      socialCardFile {
+        childImageSharp {
+          fixed(width: 1440, height: 760) {
+            src
+          }
+        }
+      }
     }
 
     locales: allLocale(filter: { language: { eq: $language } }) {

src/types.ts

@@ -40,10 +40,8 @@ export interface SyPersonioJob {
   slug: string;
   sections: SyPersonioJobSection[];
 
-  // now owned by the source plugin, added via `onCreateNode`
-  fields: {
-    socialCard: string;
-  };
+  // added via `onCreateNode`
+  socialCardFile: PlainFixedImageSharpSource;
 }
 
 export interface SyTeamMember {
@@ -52,6 +50,14 @@ export interface SyTeamMember {
   image: IGatsbyImageData;
 }
 
+export interface PlainFixedImageSharpSource {
+  childImageSharp: {
+    fixed: {
+      src: string;
+    };
+  };
+}
+
 export interface BlogPostMarkdown {
   excerpt: string;
   htmlAst;
@@ -61,13 +67,7 @@ export interface BlogPostMarkdown {
     };
   };
   frontmatter: {
-    shareImage: {
-      childImageSharp: {
-        fixed: {
-          src: string;
-        };
-      };
-    };
+    shareImage: PlainFixedImageSharpSource;
     attribution: {
       creator: string;
       source: string;