Got counting working

gatsby-config.js

@@ -62,7 +62,6 @@ module.exports = {
 			resolve: `gatsby-transformer-remark`,
 			options: {
 				plugins: [
-					`count-inline-code`,
 					{
 						resolve: `gatsby-remark-images`,
 						options: {
@@ -117,6 +116,7 @@ module.exports = {
 				]
 			}
 		},
+		`count-inline-code`,
 		`gatsby-transformer-sharp`,
 		`gatsby-plugin-sharp`,
 		{

package.json

@@ -21,39 +21,40 @@
     ]
   },
   "dependencies": {
+    "@textlint/markdown-to-ast": "^6.1.7",
     "@types/react-paginate": "^6.2.1",
     "batteries-not-included": "0.0.2",
     "classnames": "^2.2.6",
     "css-loader": "^3.4.0",
     "disqus-react": "^1.0.7",
-    "gatsby": "^2.19.43",
-    "gatsby-image": "^2.2.43",
-    "gatsby-plugin-feed": "^2.3.28",
-    "gatsby-plugin-google-analytics": "^2.1.37",
+    "gatsby": "^2.20.4",
+    "gatsby-image": "^2.3.1",
+    "gatsby-plugin-feed": "^2.4.1",
+    "gatsby-plugin-google-analytics": "^2.2.1",
     "gatsby-plugin-lunr": "^1.5.2",
-    "gatsby-plugin-manifest": "^2.2.47",
-    "gatsby-plugin-offline": "^3.0.40",
+    "gatsby-plugin-manifest": "^2.3.2",
+    "gatsby-plugin-offline": "^3.1.1",
     "gatsby-plugin-prefetch-google-fonts": "^1.4.3",
-    "gatsby-plugin-react-helmet": "^3.1.23",
+    "gatsby-plugin-react-helmet": "^3.2.1",
     "gatsby-plugin-react-svg": "^3.0.0",
     "gatsby-plugin-robots-txt": "^1.5.0",
-    "gatsby-plugin-sass": "^2.1.30",
-    "gatsby-plugin-sharp": "^2.4.12",
-    "gatsby-plugin-sitemap": "^2.2.29",
+    "gatsby-plugin-sass": "^2.2.1",
+    "gatsby-plugin-sharp": "^2.5.3",
+    "gatsby-plugin-sitemap": "^2.3.1",
     "gatsby-plugin-transition-link": "^1.18.0",
-    "gatsby-plugin-typescript": "^2.2.3",
-    "gatsby-remark-autolink-headers": "^2.1.25",
-    "gatsby-remark-copy-linked-files": "^2.1.39",
+    "gatsby-plugin-typescript": "^2.3.1",
+    "gatsby-remark-autolink-headers": "^2.2.1",
+    "gatsby-remark-copy-linked-files": "^2.2.1",
     "gatsby-remark-external-links": "0.0.4",
-    "gatsby-remark-images": "^3.1.49",
+    "gatsby-remark-images": "^3.2.1",
     "gatsby-remark-images-medium-zoom": "^1.4.0",
-    "gatsby-remark-prismjs": "^3.3.35",
-    "gatsby-remark-responsive-iframe": "^2.2.33",
+    "gatsby-remark-prismjs": "^3.4.1",
+    "gatsby-remark-responsive-iframe": "^2.3.1",
     "gatsby-remark-video": "^1.2.5",
-    "gatsby-source-filesystem": "^2.1.55",
-    "gatsby-transformer-json": "^2.2.27",
-    "gatsby-transformer-remark": "^2.6.58",
-    "gatsby-transformer-sharp": "^2.3.18",
+    "gatsby-source-filesystem": "^2.2.2",
+    "gatsby-transformer-json": "^2.3.1",
+    "gatsby-transformer-remark": "^2.7.1",
+    "gatsby-transformer-sharp": "^2.4.2",
     "medium-zoom": "^1.0.5",
     "node-sass": "^4.13.0",
     "prismjs": "^1.17.1",
@@ -87,7 +88,7 @@
     "@typescript-eslint/parser": "^2.21.0",
     "babel-jest": "^25.1.0",
     "babel-loader": "^8.0.6",
-    "babel-preset-gatsby": "^0.2.26",
+    "babel-preset-gatsby": "^0.3.1",
     "eslint": "^6.8.0",
     "eslint-config-prettier": "^6.10.0",
     "eslint-plugin-prettier": "^3.1.2",
@@ -122,6 +123,7 @@
   "scripts": {
     "build": "gatsby build",
     "develop": "gatsby develop",
+    "debug": "gatsby clean && node --nolazy --inspect-brk --max-old-space-size=2000 ./node_modules/gatsby/dist/bin/gatsby.js develop",
     "format": "run-s format:**",
     "format:ts": "eslint --fix ./src/**/*.{ts,tsx}",
     "format:css": "stylelint --syntax=scss --fix \"./src/**/*.scss\"",

plugins/count-inline-code/gatsby-node.js

@@ -1,3 +1,15 @@
+/**
+ * While I would much MUCH rather utilize the existing AST manipulation from
+ * the remarked plugin, we've hit a bit of a snag. The problem is explained here:
+ * https://github.com/gatsbyjs/gatsby/issues/22287
+ *
+ * Once this issue is resolved/workedaround, we can move back to the code that
+ * was previously confirmed working here:
+ * https://github.com/unicorn-utterances/unicorn-utterances/tree/c6d64a44ee8a4e7d6cad1dbd2d01bc9a6ad78241/plugins/count-inline-code
+ */
+const flatFilter = require("unist-util-flat-filter");
+const parse = require("@textlint/markdown-to-ast").parse;
+
 exports.createSchemaCustomization = ({ actions }) => {
 	const { createTypes } = actions;
 	const typeDefs = `
@@ -7,3 +19,28 @@ exports.createSchemaCustomization = ({ actions }) => {
   `;
 	createTypes(typeDefs);
 };
+exports.sourceNodes = ({ getNodesByType, actions }) => {
+	const postNodes = getNodesByType(`MarkdownRemark`);
+	const { createNodeField } = actions;
+	postNodes.forEach(postNode => {
+		const markdownAST = parse(postNode.rawMarkdownBody);
+		const inlineCodeAST = flatFilter(markdownAST, node => node.type === "Code");
+		let inlineWords = 0;
+		if (inlineCodeAST && inlineCodeAST.children) {
+			inlineWords = inlineCodeAST.children
+				// Prevent grabbing from https://github.com/nullhook/gatsby-remark-video
+				.filter(child => !child.value.startsWith("video:"))
+				.reduce((numberOfInline, inlineCodeNode) => {
+					const { value } = inlineCodeNode;
+					const words = value.split(/\b/g);
+					return numberOfInline + words.length;
+				}, 0);
+		}
+
+		createNodeField({
+			name: `inlineCount`,
+			node: postNode,
+			value: inlineWords
+		});
+	});
+};

plugins/count-inline-code/index.js

@@ -1,28 +0,0 @@
-const flatFilter = require("unist-util-flat-filter");
-
-const addInlineCount = ({ markdownAST, actions, markdownNode, ...props }) => {
-	const { createNodeField } = actions;
-	const inlineCodeAST = flatFilter(
-		markdownAST,
-		node => node.type === "inlineCode"
-	);
-	let inlineWords = 0;
-	if (inlineCodeAST && inlineCodeAST.children) {
-		inlineWords = inlineCodeAST.children.reduce(
-			(numberOfInline, inlineCodeNode) => {
-				const { value } = inlineCodeNode;
-				const words = value.split(/\b/g);
-				return numberOfInline + words.length;
-			},
-			0
-		);
-	}
-
-	createNodeField({
-		name: `inlineCount`,
-		node: markdownNode,
-		value: inlineWords
-	});
-};
-
-module.exports = addInlineCount;

plugins/count-inline-code/package-lock.json

@@ -1,23 +0,0 @@
-{
-  "name": "count-inline-code",
-  "version": "0.0.1",
-  "lockfileVersion": 1,
-  "requires": true,
-  "dependencies": {
-    "unist-util-flat-filter": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/unist-util-flat-filter/-/unist-util-flat-filter-1.0.0.tgz",
-      "integrity": "sha512-zjTmbMgyL1V7iUCnFaGLms9HtGbqK4d3YINqzu+wiMbau93GdiDGtJiB8lMhAyxAaxIAK2rOCeBCldF0FUreKQ==",
-      "requires": {
-        "unist-util-is": "^4.0.0"
-      },
-      "dependencies": {
-        "unist-util-is": {
-          "version": "4.0.1",
-          "resolved": "https://registry.npmjs.org/unist-util-is/-/unist-util-is-4.0.1.tgz",
-          "integrity": "sha512-7NYjErP4LJtkEptPR22wO5RsCPnHZZrop7t2SoQzjvpFedCFer4WW8ujj9GI5DkUX7yVcffXLjoURf6h2QUv6Q=="
-        }
-      }
-    }
-  }
-}

plugins/count-inline-code/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "count-inline-code",
+  "name": "count-inline-code-2",
   "version": "0.0.1",
   "description": "",
   "main": "index.js",

src/templates/blog-post.tsx

@@ -17,6 +17,8 @@ const BlogPostTemplateChild = (props: BlogPostTemplateProps) => {
 	const siteData = props.data.site.siteMetadata;
 	const slug = post.fields.slug;
 
+	console.log(post.fields);
+
 	const { currentTheme } = useContext(ThemeContext);
 
 	const [disqusConfig, setDisqusConfig] = useState({

src/templates/blog-profile.tsx

@@ -35,6 +35,8 @@ const BlogProfile = (props: BlogProfileProps) => {
 	const unicornData = slugData.unicornsJson;
 	const posts = slugData.allMarkdownRemark.edges;
 
+	debugger;
+
 	const wordCount = useMemo(() => {
 		return posts.reduce(
 			(prev, post) =>