feat: better blog sharing #307

georgiee · 2021-12-22T07:49:37Z

Preview: https://satellytescommain21751-gkfixblogsharing.gtsb.io/

Create the sharing cards with createFileNodeFromBuffer instead of writing into public
Updated our buildGatsbyCloudPreviewUrl as it used the wrong prefix
Create share images for blog from the teaser instead of using the card
Node set to v16 *engine and gatsby env

Blog with Image Preview:

Cards are still working:

netlify · 2021-12-22T07:49:41Z

✔️ Deploy Preview for satellytes-website-storybook ready!

🔨 Explore the source changes: 45c1ca5

🔍 Inspect the deploy log: https://app.netlify.com/sites/satellytes-website-storybook/deploys/61c335142eeb360008444892

😎 Browse the preview: https://deploy-preview-307--satellytes-website-storybook.netlify.app

gatsby-cloud · 2021-12-22T07:52:50Z

Gatsby Cloud Build Report

🚩 Your build failed. See the build logs here

Errors

Page data from page-data.json for the failed page "/de/career/frontend-engineer/": {
  "componentChunkName": "component---src-templates-career-details-tsx",
  "path": "/de/career/frontend-engineer/",
  "result": {
    "data": {
      "syPersonioJob": {
        "socialCard": null,
        "id": "a7757a4a-2b4b-57f6-b3bb-b972359dadeb",
        "lang": "de",
        "jobId": 338504,
        "name": "Frontend Engineer (w/m/x)",
        "short": "Wir suchen eine:n Frontend Engineer (w/m/x) mit erster professioneller Erfahrung als Webentwickler:in. Werde Teil eines Teams, bei dem du von Experten den Umgang mit Frameworks & Testing ausbauen und verfeinern kannst.",
        "createdAt": "2021-03-17T14:57:12+00:00",
        "slug": "/career/frontend-engineer/",
        "sections": [
          {
            "headline": "Was du tun wirst",
            "descriptionHtml": "Entwicklung von Web-Applikationen (Angular oder React, manchmal Vue)
Entwicklung und Pflege von UI-Libraries (lokal oder verteilt)
Anbindung sowie Mocking von REST-basierten APIs
E2E-Testing mit Cypress",
            "description": "Entwicklung von Web-Applikationen (Angular oder React, manchmal Vue)Entwicklung und Pflege von UI-Libraries (lokal oder verteilt)Anbindung sowie Mocking von REST-basierten APIsE2E-Testing mit Cypress"
          },
          {
            "headline": "Was du mitbringst",
            "descriptionHtml": "Du solltest mindestens zwei Jahre professionell als Webentwickler:in mit Frameworks wie React oder Angular gearbeitet haben.
Erfahrung im Umgang mit Testing Tools wie Jest & Cypress. Testing ist bei uns Teil der täglichen Arbeit.

georgiee · 2021-12-22T14:11:16Z

back in game, everything works, including the breaking incremental builds.
This was because of the gatsby foreign key issue. We relied on the deprecated way (see https://www.gatsbyjs.com/docs/reference/release-notes/migrating-from-v3-to-v4/#___node-convention-is-deprecated) where an postfix of ___NODE signals the foreign key relationship. This causes problems in gatsby 4 it seems. After I switched to the modern way through createSchemaCustomization (see https://www.gatsbyjs.com/docs/how-to/plugins-and-themes/creating-a-source-plugin/#create-foreign-key-relationships-between-data) it works flawless 🙌

We now have correct cards and the blog shows the correct teaser image instead of the card (we still create the card so we don't have to filter the blog md documents, okay for now).

I used two ways to define the new schema. The syntactic sugar from gatsby (or is it graphql?) with @link:

socialCard: File @link(from: "fields.socialCard")

and the more explicit way of using an resolver:

      fields: {
        socialCard: {
          type: 'File',
          resolve: (source, args, context, info) => {
            return context.nodeModel.getNodeById({
              id: source.fields.socialCard,
              type: 'File',
            });
          },
        },
      },

both have the same effect that they create a field socialCard in the root of the node with the actual node that is referenced through fields.socialCard. I wonder if we could put the actual card creation in the resolve or if it's better to leave it separated as is🧐

There the proof it's working now 🙌

georgiee

some comments

georgiee · 2021-12-22T14:16:51Z

.github/workflows/continous-integration.yml

@@ -17,7 +17,7 @@ jobs:
        uses: actions/checkout@master
      - uses: actions/setup-node@v2-beta
        with:
-          node-version: '14'
+          node-version: '16'


While debugging, but I think this not wrong at all to bump for our project.

georgiee · 2021-12-22T14:17:30Z

gatsby-config.js

+const GATSBY_SITE_PREFIX = process.env.GATSBY_SITE_PREFIX || '';
+const BRANCH_PREVIEW_URL = buildGatsbyCloudPreviewUrl({
+  prefix: GATSBY_SITE_PREFIX,
+  branch: process.env.BRANCH,
 });
+
+// either use a branch preview url if any
+const BASE_URL =
+  BRANCH_PREVIEW_URL || process.env.GATBSY_BASE_UR || 'http://localhost:8000';
+


I untangled the fallback to focus on the branch url creation. I think that's easier to follow now

georgiee · 2021-12-22T14:18:51Z

gatsby-node.js

+exports.createSchemaCustomization = ({ actions, schema }) => {
+  const { createTypes } = actions;
+
+  const typeDefs = [
+    /**
+     * Variant 1: use `@link` and link the given field
+     * You can't replace fields.socialCard hence the creation of the node in the parent
+     */
+    `type MarkdownRemark implements Node { 
+      socialCard: File @link(from: "fields.socialCard")
+    }`,
+    /**
+     * Variant 2: use `buildObjectType` and resolve the
+     * foreign key relation through a resolver. The `@link` above
+     * is basically syntactic sugar for this. I want to show both variants
+     * here for education purposes as it was a long bumpy road.
+     *
+     * Before ew used the deprecated fielname___NODE way of adding
+     * the FK relationship which fails for incremental builds in gatsby 4
+     *
+     *
+     * Deprecated 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
+     */
+    schema.buildObjectType({
+      name: 'SyPersonioJob',
+      fields: {
+        socialCard: {
+          type: 'File',
+          resolve: (source, args, context, info) => {
+            return context.nodeModel.getNodeById({
+              id: source.fields.socialCard,
+              type: 'File',
+            });
+          },
+        },
+      },
+      interfaces: ['Node'],
+    }),
+  ];
+
+  createTypes(typeDefs);
+};
+


yeah that solved my hour long trouble getting the file properly connected to the career and blog posts. It always worked on a fresh build but incremental builds failed. Probably because the incremental build hat some issues restoring through the implicit fk ___NODE assignment we used before. much better because it's explicit now.

georgiee · 2021-12-22T14:20:01Z

gatsby-node.js

+    schema.buildObjectType({
+      name: 'SyPersonioJob',
+      fields: {
+        socialCard: {
+          type: 'File',
+          resolve: (source, args, context, info) => {
+            return context.nodeModel.getNodeById({
+              id: source.fields.socialCard,
+              type: 'File',
+            });
+          },
+        },
+      },
+      interfaces: ['Node'],
+    }),
+  ];


This could be the same one liner as above for MarkdownRemark, but I wanted to keep it for now to demonstrate the alternative because I wonder if I should resolve and generated the card in here. Fine to keep it around for now or better put it into an issue?

georgiee · 2021-12-22T14:21:13Z

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

-      value: publicUrl,
-    });
+  const buffer = await generateCardToBuffer({ title });
+  const fileNode = await createFileNodeFromBuffer({


finally I had time to create the file from buffer to create a proper file node instead of working around gatsby and output the file directly in static. That approach was never wrong but the 500 errors (which were caused by plain wrong urls we generated) brought me on this so. I like this much more. It's more complicated but less implicit.

georgiee · 2021-12-22T14:21:35Z

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

-    });
+  const buffer = await generateCardToBuffer({ title });
+  const fileNode = await createFileNodeFromBuffer({
+    name: 'social-card',


extension is inferred from the buffer where I set jpg.

georgiee · 2021-12-22T14:22:17Z

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

-    createPreviewJob({ node, _, actions });
+    return createPreviewCard(node.name, { node, ...rest });
  }

  if (node.internal.type === 'MarkdownRemark') {
-    createPreviewMarkdown({ node, _, actions });
+    return createPreviewCard(node.frontmatter.title, { node, ...rest });


I only need to pass in the actual string to generate. Before it was two methods while it's actually a single one 👍

georgiee · 2021-12-22T14:27:55Z

src/components/layout/seo.tsx

-    site.siteMetadata.siteUrl + DEFAULT_META_IMAGE_URL_PATH;
-  const metaImageUrl = imageUrl ?? defaultImageUrl;
+
+  const metaImageUrl =


every image we pass in need to be path. never an url as seo should resolve that. which we do now.

georgiee · 2021-12-22T14:29:58Z

src/templates/blog-post.tsx

+  const shareImagePath =
+    markdown.frontmatter.shareImage.childImageSharp.fixed.src;


we switch from card to the image for blog posts here. The shareImage is just another variant of the teaser cropped to the expected format.

georgiee · 2021-12-22T14:30:30Z

package.json

@@ -9,7 +9,7 @@
    "url": "[email protected]:satellytes/satellytes.com.git"
  },
  "engines": {
-    "node": ">= 14.0.0",
+    "node": ">= 16.0.0",


this will cause yarn to complain when a local node version is lower. let's see who will complain 😁

georgiee · 2021-12-22T14:35:20Z

damn. this is nuts. is this gatsby 4 killing us?

georgiee · 2021-12-22T15:46:14Z

back to draft. this might be best handled in isolation while I can bring the parts that work through #308

georgiee · 2021-12-23T10:58:57Z

closed in favor of #309

chore: step

ac98e3a

georgiee changed the title ~~chore: fix blog sharing~~ feat: better blog sharing Dec 22, 2021

georgiee added 5 commits December 22, 2021 08:55

output env

ba3cff1

chore: step

86b400f

chore: step

2703af6

chore: update

155df61

chore: fix tests

beb9b0b

georgiee force-pushed the gk-fix-blog-sharing branch 3 times, most recently from 91ad100 to 7e2546b Compare December 22, 2021 12:43

georgiee added 2 commits December 22, 2021 14:20

chore: fix version 16

8fa3939

chore: update

5f79cd5

georgiee force-pushed the gk-fix-blog-sharing branch from 7e2546b to 5f79cd5 Compare December 22, 2021 13:55

chore: add comment

67293c8

georgiee marked this pull request as ready for review December 22, 2021 14:16

georgiee requested a review from a team as a code owner December 22, 2021 14:16

chore: remove obsolete

45c1ca5

georgiee commented Dec 22, 2021

View reviewed changes

georgiee mentioned this pull request Dec 22, 2021

feat: blog share update part 1 #308

Merged

georgiee marked this pull request as draft December 22, 2021 15:45

georgiee closed this Dec 23, 2021

feedm3 deleted the gk-fix-blog-sharing branch March 7, 2022 10:39

		const shareImagePath =
		markdown.frontmatter.shareImage.childImageSharp.fixed.src;

feat: better blog sharing #307

feat: better blog sharing #307

Uh oh!

Conversation

georgiee commented Dec 22, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

netlify bot commented Dec 22, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

gatsby-cloud bot commented Dec 22, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Gatsby Cloud Build Report

Uh oh!

georgiee commented Dec 22, 2021

Uh oh!

georgiee left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

georgiee commented Dec 22, 2021

Uh oh!

georgiee commented Dec 22, 2021

Uh oh!

georgiee commented Dec 23, 2021

Uh oh!

Uh oh!

georgiee commented Dec 22, 2021 •

edited

Loading

netlify bot commented Dec 22, 2021 •

edited

Loading

gatsby-cloud bot commented Dec 22, 2021 •

edited

Loading