Initial frontend (#1)

.gitignore

@@ -1,3 +1,4 @@
 __pycache__/
 .mypy_cache/
 *.pyc
+.DS_Store

.gitmodules

@@ -0,0 +1,3 @@
+[submodule "front-end/docs-tools"]
+	path = front-end/docs-tools
+	url = https://github.com/mongodb/docs-tools

front-end/.babelrc

@@ -0,0 +1,42 @@
+{
+  presets: [
+    [
+      "@babel/preset-env",
+      {
+        loose: true,
+        modules: false,
+        useBuiltIns: "usage",
+        shippedProposals: true,
+        targets: {
+          browsers: [">0.25%", "not dead"],
+        },
+      },
+    ],
+    [
+      "@babel/preset-react",
+      {
+        useBuiltIns: true,
+        pragma: "React.createElement",
+      },
+    ],
+  ],
+  plugins: [
+    [
+      "@babel/plugin-proposal-class-properties",
+      {
+        loose: true,
+      },
+    ],
+    "@babel/plugin-syntax-dynamic-import",
+    "babel-plugin-macros",
+    [
+      "@babel/plugin-transform-runtime",
+      {
+        helpers: true,
+        regenerator: true,
+      },
+    ],
+    ["@babel/plugin-transform-react-jsx"],
+    ["@babel/plugin-proposal-object-rest-spread"],
+  ],
+}

front-end/.gitignore

@@ -0,0 +1,6 @@
+node_modules/
+public/
+.cache/
+.DS_Store
+static/
+docs-tools/

front-end/Makefile

@@ -0,0 +1,6 @@
+.PHONY: static
+
+static:
+	git submodule add --force https://github.com/mongodb/docs-tools
+	mkdir ./static
+	mv ./docs-tools/themes/mongodb/static ./static/static/

front-end/README.md

@@ -0,0 +1,30 @@
+# Front-end for Docs
+
+Uses Gatsby to build static site.
+
+Installation:
+
+```
+npm install
+```
+
+If this is your first time running the site you'll need the static directory:
+
+```
+make static
+```
+
+Running locally:
+
+```
+STITCH_ID=<STITCH_ID> NAMESPACE=<DB/COLLECTION> PREFIX=<SITE/USER/BRANCH> gatsby develop
+then go to http://localhost:8000
+```
+
+To build and serve the site, use the same ENV vars from above:
+
+```
+ENV_VARS gatsby build --prefix-paths
+gatsby serve
+```
+

front-end/gatsby-config.js

@@ -0,0 +1,5 @@
+// https://www.gatsbyjs.org/docs/gatsby-config/
+
+module.exports = {
+  pathPrefix: `/`
+}

front-end/gatsby-node.js

@@ -0,0 +1,115 @@
+const path = require('path');
+const crypto = require('crypto');
+const uuidv1 = require('uuid/v1');
+const contentful = require('contentful');
+const mongoclient = require('mongodb').MongoClient;
+const { Stitch, AnonymousCredential } = require('mongodb-stitch-server-sdk');
+
+const LANGUAGES = [
+  ['shell', 'Mongo Shell'],
+  ['compass', 'Compass'],
+  ['python', 'Python'],
+  ['java-sync', 'Java (Sync)'],
+  ['nodejs', 'Node.js'],
+  ['php', 'PHP'],
+  ['motor', 'Motor'],
+  ['java-async', 'Java (Async)'],
+  ['c', 'C'],
+  ['cpp', 'C++11'],
+  ['csharp', 'C#'],
+  ['perl', 'Perl'],
+  ['ruby', 'Ruby'],
+  ['scala', 'Scala']
+];
+
+// ENV vars
+const PREFIX = process.env.PREFIX.split('/');
+const STITCH_ID = process.env.STITCH_ID;
+const NAMESPACE = process.env.NAMESPACE;
+
+let PAGES = [];
+let INCLUDE_FILES = [];
+let GITHUB_CODE_EXAMPLES = [];
+let RESOLVED_REF_DOC_MAPPING = {};
+
+let stitchClient;
+
+const setupStitch = () => {
+  return new Promise((resolve, reject) => {
+    stitchClient = Stitch.hasAppClient(STITCH_ID) ? Stitch.getAppClient(STITCH_ID) : Stitch.initializeAppClient(STITCH_ID);
+    stitchClient.auth.loginWithCredential(new AnonymousCredential()).then((user) => {
+      console.log('logged into stitch');
+      resolve();
+    });
+  });
+};
+
+exports.sourceNodes = async ({ actions }) => {
+
+  const { createNode } = actions;
+  const items = [];
+
+  await setupStitch();
+
+  // params to get index document
+  const query = { _id: `${ PREFIX.join('/') }/index` };
+
+  // get index document
+  const documents = await stitchClient.callFunction('fetchDocuments', [NAMESPACE, query]);
+
+  // set data for index page
+  RESOLVED_REF_DOC_MAPPING['index'] = (documents && documents.length > 0) ? documents[0] : {};
+
+  // resolve references/urls to documents
+  RESOLVED_REF_DOC_MAPPING = await stitchClient.callFunction('resolveReferences', [PREFIX, NAMESPACE, documents, RESOLVED_REF_DOC_MAPPING]);
+
+  // find what refs are pages 
+  for (const ref of Object.keys(RESOLVED_REF_DOC_MAPPING)) {
+    if (ref.includes('includes/')) {
+      INCLUDE_FILES.push(ref);
+    } else if (ref.indexOf('https://github.com') !== -1) {
+      GITHUB_CODE_EXAMPLES.push(ref);
+    } else if (ref.indexOf('curl') === -1) {
+      PAGES.push(ref);
+    }
+  }
+
+  // get code examples for all github urls
+  for (const url of GITHUB_CODE_EXAMPLES) {
+    const githubRawUrl = url.replace('https://github.com', 'https://raw.githubusercontent.com').replace('blob/', '')
+    const codeFile = await stitchClient.callFunction('fetchReferenceUrlContent', [githubRawUrl]);
+    RESOLVED_REF_DOC_MAPPING[url] = codeFile;
+  }
+
+  console.log(11, PAGES);
+  console.log(22, INCLUDE_FILES);
+  console.log(33, GITHUB_CODE_EXAMPLES);
+  console.log(RESOLVED_REF_DOC_MAPPING);
+
+};
+
+exports.createPages = ({ graphql, actions }) => {
+
+  const { createPage } = actions;
+
+  return new Promise((resolve, reject) => {
+    for (const page of PAGES) {
+      const template = (page === 'index') ? 'index' : 'guide';
+      const pageUrl = (page === 'index') ? '/' : page;
+      if (RESOLVED_REF_DOC_MAPPING[page] && Object.keys(RESOLVED_REF_DOC_MAPPING[page]).length > 0) {
+        createPage({
+          path: pageUrl,
+          component: path.resolve(`./src/templates/${ template }.js`),
+          context: {
+            __refDocMapping: RESOLVED_REF_DOC_MAPPING,
+            __languageList: LANGUAGES,
+            __stitchID: STITCH_ID
+          }
+        });
+      }
+    }
+    resolve();
+  });
+
+};
+