Docs demo

gatsby-config.js

@@ -76,6 +76,13 @@ module.exports = {
         path: `${__dirname}/content/about`,
       },
     },
+    {
+      resolve: 'gatsby-source-git',
+      options: {
+        name: 'markdown-docs',
+        path: './node_modules/node-i18n/content/v12.x/en-US/doc/api',
+      },
+    },
     {
       resolve: `gatsby-plugin-mdx`,
       options: {

gatsby-node-docs.js

@@ -0,0 +1,32 @@
+exports.createPages = async ({ actions, graphql, reporter }) => {
+  const { createPage } = actions;
+
+  const docsTemplate = require.resolve(`./src/templates/docs.tsx`);
+
+  const result = await graphql(`
+    {
+      allMarkdownRemark {
+        edges {
+          node {
+            excerpt
+            fileAbsolutePath
+          }
+        }
+      }
+    }
+  `);
+
+  // Handle errors
+  if (result.errors) {
+    reporter.panicOnBuild(`Error while running GraphQL query.`);
+    return;
+  }
+
+  result.data.allMarkdownRemark.edges.forEach(node => {
+    createPage({
+      path: node.frontmatter.slug,
+      // path: 'test',
+      component: docsTemplate,
+    });
+  });
+};

gatsby-node.js

@@ -3,7 +3,7 @@ const path = require('path');
 const fetch = require('node-fetch');
 const createSlug = require('./util-node/createSlug');
 const getReleaseStatus = require('./util-node/getReleaseStatus');
-
+require('./gatsby-node-docs');
 const BLOG_POST_FILENAME_REGEX = /([0-9]+)-([0-9]+)-([0-9]+)-(.+)\.md$/;
 
 exports.createPages = ({ graphql, actions }) => {

package.json

@@ -42,6 +42,7 @@
     "gatsby-transformer-yaml": "^3.4.0",
     "intersection-observer": "^0.12.0",
     "node-fetch": "^2.6.1",
+    "node-i18n": "github:nodejs/i18n",
     "prismjs": "^1.23.0",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",

src/pages/docs-demo.tsx

@@ -0,0 +1,62 @@
+import { graphql } from 'gatsby';
+import React from 'react';
+import Article from '../components/Article';
+import Layout from '../components/Layout';
+
+const title = 'Download Node.js';
+const description = 'Come get me!';
+
+interface Props {
+  data: {
+    doc: {
+      edges: string[] | Record<string, unknown>;
+    };
+  };
+}
+
+const DocsLayout = ({ data }: Props): JSX.Element => {
+  const authors = [''];
+  return (
+    <Layout title={title} description={description}>
+      <main className="docs-container">
+        <Article
+          title=""
+          html={data.doc.edges[105].node.html}
+          authors={authors}
+          editPath="node_modules/node-i18n/content/v12.x/en-US/doc/"
+        />
+        {console.log(data)}
+      </main>
+    </Layout>
+  );
+};
+export default DocsLayout;
+
+export const query = graphql`
+  {
+    doc: allMarkdownRemark {
+      edges {
+        node {
+          fileAbsolutePath
+          frontmatter {
+            title
+          }
+          html
+          tableOfContents(absolute: true, pathToSlugField: "frontmatter.path")
+        }
+      }
+    }
+    allFile(
+      filter: {
+        absolutePath: { eq: "node_modules/node-i18n/content/v12.x/en-US/doc/" }
+      }
+    ) {
+      edges {
+        node {
+          id
+          absolutePath
+        }
+      }
+    }
+  }
+`;

src/styles/layout.scss

@@ -548,7 +548,8 @@ details {
   }
 }
 
-.blog-container {
+.blog-container,
+.docs-container {
   display: flex;
   justify-content: center;
 }