feat(component): started making docs component

gatsby-node.js

@@ -230,7 +230,6 @@ exports.sourceNodes = async ({
   createContentDigest,
   reporter: { activityTimer },
   cache,
-  store,
 }) => {
   let activity = activityTimer('Fetching Node release data');
 
@@ -265,10 +264,15 @@ exports.sourceNodes = async ({
     const currentActiveReleasesVersions =
       getCurrentActiveReleases(nodeReleasesData);
 
-    const allApiFilesPerVersion = await getApiDocsData(
-      currentActiveReleasesVersions,
-      { createNode, createNodeId, cache, store }
-    );
+    // For now we're only going to parse the latest Node.js docs
+    // As the v14 and v16 docs have some Markdown Errors
+    const [latestNodeRelease] = currentActiveReleasesVersions.reverse();
+
+    await getApiDocsData([latestNodeRelease], {
+      createNode,
+      createNodeId,
+      cache,
+    });
 
     activity.end();
 

src/components/Article/index.tsx

@@ -14,6 +14,7 @@ import TableOfContents from '../TableOfContents';
 import BlogAuthorsList from '../BlogAuthorsList';
 import Codebox from '../Codebox';
 import InlineCode from '../Codebox/InlineCode';
+import DocsApiComponent from '../DocsApiComponent';
 import styles from './index.module.scss';
 
 interface Props {
@@ -30,7 +31,12 @@ interface Props {
   children?: React.ReactNode;
 }
 
-const mdxComponents = { pre: Codebox, inlineCode: InlineCode, a: MdxLink };
+const mdxComponents = {
+  pre: Codebox,
+  inlineCode: InlineCode,
+  a: MdxLink,
+  DocsApiComponent,
+};
 
 const renderBlogAuthors = (date?: string, authors?: BlogPostAuthor[]) => (
   <BlogAuthorsList date={date} authors={authors} />

src/components/DocsApiComponent/index.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+
+import { DocsApiData } from '../../types';
+
+interface Props {
+  data: DocsApiData;
+}
+
+const DocsApiComponent = (props: Props) => {
+  console.warn(props.data);
+
+  return <></>;
+};
+
+export default DocsApiComponent;

src/types/index.ts

@@ -1,5 +1,20 @@
 import type { GatsbyBrowser, GatsbySSR } from 'gatsby';
 
+export interface DocsApiChange {
+  version: string | string[];
+  'pr-url': string;
+  description: string;
+}
+
+export interface DocsApiData {
+  introduced_in?: string;
+  added?: string | string[];
+  type?: string;
+  name?: string;
+  source_link?: string;
+  changes?: DocsApiChange[];
+}
+
 export interface GenericPageContext {
   intlMessages: Record<string, string>;
   locale: string;

util-node/getApiDocsData.js

@@ -25,7 +25,7 @@ async function getApiDocsData(activeReleasesVersions, gatsbyApis) {
   // And thgen `gatsby-node` will execute them all
   const apiDocsFilesPerVersion = await Promise.all(
     apiDocsReleases.map(async (apiDocsFiles, index) => {
-      const markdownFiles = [...apiDocsFiles].filter(
+      const markdownFiles = apiDocsFiles.filter(
         file => file.name.endsWith('.md') && !file.name.startsWith('index')
       );
 
@@ -49,9 +49,8 @@ async function getApiDocsData(activeReleasesVersions, gatsbyApis) {
 
           const finalContent = `${frontmatterYaml}${mdxWithComponents}`;
 
-          createFileNodeFromBuffer({
+          return createFileNodeFromBuffer({
             buffer: Buffer.from(finalContent),
-            store: gatsbyApis.store,
             cache: gatsbyApis.cache,
             createNode: gatsbyApis.createNode,
             name: `internalApiDoc-${releaseVersion}-${getFileName(file)}`,