Remove consulting 🫡, add the Packer blog post

package.json

@@ -66,6 +66,7 @@
     "@weknow/gatsby-remark-twitter": "^0.2.3",
     "babel-plugin-styled-components": "^2.1.4",
     "block-elements": "^1.2.0",
+    "cheerio": "^1.0.0",
     "cross-env": "^7.0.2",
     "eslint": "^7.30.0",
     "eslint-config-prettier": "^8.3.0",
@@ -89,7 +90,7 @@
     "gatsby-transformer-remark": "^6.11.0",
     "gatsby-transformer-sharp": "^5.11.0",
     "js-yaml": "^3.14.0",
-    "json5": "^2.2.1",
+    "json5": "^2.2.3",
     "mdast-util-toc": "^5.0.3",
     "mime-types": "^2.1.35",
     "posthtml-parser": "^0.11.0",

plugins/gatsby-remark-3perf-transformer/index.js

@@ -5,6 +5,8 @@ const visitWithAncestors = require('unist-util-visit-parents');
 const { parser } = require('posthtml-parser');
 const mime = require('mime-types');
 const createMediaMarkup = require('./createMediaMarkup');
+const cheerio = require('cheerio');
+const JSON5 = require('json5');
 
 module.exports = ({ markdownAST }) => {
   // Add a <div class="table-container"> wrapper around each table
@@ -117,9 +119,31 @@ module.exports = ({ markdownAST }) => {
     },
   );
 
+  visit(
+    markdownAST,
+    (node) => node.type === 'html' && parseHTMLCodeOptions(node)?.wordWrap,
+    (node) => {
+      const $ = cheerio.load(node.value);
+      const root = $('div.gatsby-highlight');
+
+      if (root.length === 0) {
+        throw new Error(
+          `gatsby-remark-3perf-transformer: Expected a div with class "gatsby-highlight" but got ${
+            $.root().children().first().prop('tagName') || 'no element'
+          } with class "${
+            $.root().children().first().attr('class') || 'no class'
+          }"`,
+        );
+      }
+
+      root.attr('data-word-wrap', '');
+      node.value = $.html();
+    },
+  );
+
   // Spread lists that have new lines between list items
   visitWithAncestors(markdownAST, 'list', (node, ancestors) => {
-    // Don’t do anything with table-of-contents lists
+    // Don't do anything with table-of-contents lists
     if (ancestors.some((ancestor) => ancestor.type === 'Toc')) {
       return;
     }
@@ -133,3 +157,39 @@ module.exports = ({ markdownAST }) => {
 
   return markdownAST;
 };
+
+function parseHTMLCodeOptions(node) {
+  // If you have Markdown like
+  // ```javascript{wordWrap: true}
+  // ...
+  // ```
+  // then node.lang will be everything before the space (`javascript{wordWrap:`) and node.meta will be everything after the space (`true`).
+  // Thus, we need to concatenate these to get the original string (`javascript{wordWrap: true}`).
+  // This mimics what gatsby-remark-prismjs does: https://github.com/gatsbyjs/gatsby/blob/346314d678d9465c998c12466f810b21592f6cb5/packages/gatsby-remark-prismjs/src/index.js#L38-L48
+  if (!node.lang) return;
+  const language = node.meta ? node.lang + node.meta : node.lang;
+  if (!language) return;
+
+  const optionsStringWithoutBraces = language.split('{')[1];
+  if (!optionsStringWithoutBraces) return;
+
+  const optionsString = '{' + optionsStringWithoutBraces;
+
+  try {
+    const optionsJson = JSON5.parse(optionsString);
+    return optionsJson;
+  } catch (e) {
+    console.error(
+      'gatsby-remark-3perf-transformer: Failed to parse options for a code block:',
+      e,
+    );
+    console.error('gatsby-remark-3perf-transformer: Original node:', node);
+    console.error(
+      'gatsby-remark-3perf-transformer: Options string:',
+      optionsString,
+    );
+    throw new Error(
+      `gatsby-remark-3perf-transformer: Failed to parse options for a code block: ${e.message}. See the error message above for more details.`,
+    );
+  }
+}

src/components/BlogFooterAccordion/index.tsx

@@ -10,15 +10,9 @@ const stuffToPromote = [
     href: '/talks/web-perf-101/',
   },
   {
-    imageKey: 'content',
-    title: 'Case studies, guides, and open-source tools',
-    href: '/content',
-  },
-
-  {
-    imageKey: 'services',
-    title: 'Make your site or web app fast',
-    href: '/#services',
+    imageKey: 'reactConcurrency',
+    title: 'React Concurrency, Explained',
+    href: '/talks/react-concurrency/',
   },
 ];
 
@@ -36,13 +30,8 @@ const BlogFooterAccordion = ({ className }: BlogFooterAccordionProps) => {
           gatsbyImageData(height: 130, placeholder: NONE, layout: FIXED)
         }
       }
-      services: file(relativePath: { eq: "BlogFooterAccordion/services.png" }) {
-        childImageSharp {
-          gatsbyImageData(height: 130, placeholder: NONE, layout: FIXED)
-        }
-      }
-      content: file(
-        relativePath: { eq: "BlogFooterAccordion/content-views.png" }
+      reactConcurrency: file(
+        relativePath: { eq: "BlogFooterAccordion/react-concurrency.png" }
       ) {
         childImageSharp {
           gatsbyImageData(height: 130, placeholder: NONE, layout: FIXED)