feat(examples): upgrade vercel example to actually render pages

bericp1 · bericp1 · commit b767bc30ad30 · 2021-03-13T12:39:37.000-07:00
BREAKING CHANGE: node version requirement bumped to 11.15.0+
diff --git a/examples/common/render.js b/examples/common/render.js
@@ -0,0 +1,53 @@
+const fs = require('fs');
+const path = require('path');
+const frontmatter = require('front-matter');
+const marked = require('marked');
+
+async function render(name) {
+    // Resolve the path to the possible markdown file
+    const fullPathToPossibleMarkdownFile = path.resolve(
+        __dirname,
+        `./pages/${name}${name.endsWith('.md') ? '' : '.md'}`,
+    );
+    // Attempt to read the file, returning false ("no I did not handle this request") if any error occurs reading the file.
+    let markdownFileContents = null;
+    try {
+        markdownFileContents = await fs.promises.readFile(fullPathToPossibleMarkdownFile, { encoding: 'utf8' });
+    } catch (ignored) {
+        return false;
+    }
+    // Parse the file first using `front-matter` and `marked`
+    const fileFrontmatter = frontmatter(markdownFileContents);
+    const htmlFileContents = marked(fileFrontmatter.body);
+    // Generate the HTML, using the frontmatter to generate the title.
+    return `<html lang="en"><head><title>${fileFrontmatter.attributes.title || ''}</title>`
+        + `</head><body>\n${htmlFileContents}</body></html>`;
+}
+
+/**
+ * @returns {Promise<[string, string][]>}
+ */
+async function renderAllPages() {
+    const fullPathToPages = path.resolve(
+        __dirname,
+        `./pages`,
+    );
+    const filesInPagesDir = await fs.promises.readdir(fullPathToPages, { encoding: 'utf8', withFileTypes: true });
+    return Promise.all(
+        filesInPagesDir
+            .reduce((entries, dirEnt) => {
+                if (dirEnt.isFile() && dirEnt.name.endsWith('.md')) {
+                    entries.push(
+                        render(dirEnt.name)
+                            .then((html) => [
+                                dirEnt.name.replace(/\.md$/i, '.html'),
+                                html,
+                            ])
+                    );
+                }
+                return entries;
+            }, []),
+    );
+}
+
+module.exports = { render, renderAllPages };
diff --git a/examples/generic/index.js b/examples/generic/index.js
@@ -1,8 +1,7 @@
 const http = require('http');
 const fs = require('fs');
 const path = require('path');
-const frontmatter = require('front-matter');
-const marked = require('marked');
+const { render } = require('../common/render'); // eslint-disable-line node/no-unpublished-require
 const netlifyCmsOAuth = require('netlify-cms-oauth-provider-node');
 
 const port = process.env.PORT || 3000;
@@ -134,25 +133,8 @@ const handleAdmin = createStaticFileHandler('admin.html', 'text/html; charset=ut
  *      otherwise.
  */
 async function handlePage(req, res, { route }) {
-    // Resolve the path to the possible markdown file
-    const fullPathToPossibleMarkdownFile = path.resolve(
-        __dirname,
-        '../common/pages',
-        `${route.replace(/^\//, '')}.md`,
-    );
-    // Attempt to read the file, returning false ("no I did not handle this request") if any error occurs reading the file.
-    let markdownFileContents = null;
-    try {
-        markdownFileContents = await fs.promises.readFile(fullPathToPossibleMarkdownFile, { encoding: 'utf8' });
-    } catch (ignored) {
-        return false;
-    }
-    // Parse the file first using `front-matter` and `marked`
-    const fileFrontmatter = frontmatter(markdownFileContents);
-    const htmlFileContents = marked(fileFrontmatter.body);
-    // Generate the HTML, using the frontmatter to generate the title.
-    const finalHtml = `<html lang="en"><head><title>${fileFrontmatter.attributes.title || ''}</title>`
-        + `</head><body>\n${htmlFileContents}</body></html>`;
+    const pageName = route.replace(/^\//, '');
+    const finalHtml = await render(pageName);
     // Serve the HTML to the user.
     res.writeHead(200, { 'Content-Type': 'text/html; charset=utf-8' });
     res.end(finalHtml);
diff --git a/examples/vercel/admin.html b/examples/vercel/admin.html
diff --git a/examples/vercel/build.js b/examples/vercel/build.js
@@ -0,0 +1,11 @@
+const fs = require('fs');
+const path = require('path');
+const { renderAllPages } = require('../common/render'); // eslint-disable-line node/no-unpublished-require
+
+renderAllPages()
+    .then((pages) => Promise.all(pages.map(async ([fileName, html]) => {
+        const finalFileName = fileName === 'home.html' ? 'index.html' : fileName;
+        const publicPathForFile = path.resolve(__dirname, './public', finalFileName);
+        console.log(`Writing ${finalFileName} to ${publicPathForFile}`);
+        await fs.promises.writeFile(publicPathForFile, html);
+    })));
diff --git a/examples/vercel/package.json b/examples/vercel/package.json
@@ -4,12 +4,14 @@
     "scripts": {
         "start": "vercel dev",
         "clean": "rm -rf public/",
-        "build": "yarn run clean && mkdir public && cp index.html config.yml public/"
+        "build": "yarn run clean && mkdir public && cp admin.html config.yml public/ && node ./build.js"
     },
     "engines": {
-        "node": "10.x"
+        "node": "14.x"
     },
     "dependencies": {
+        "front-matter": "^4.0.2",
+        "marked": "^2.0.1",
         "netlify-cms-oauth-provider-node": "latest"
     }
 }
diff --git a/examples/vercel/vercel.json b/examples/vercel/vercel.json
@@ -0,0 +1,3 @@
+{
+    "cleanUrls": true
+}
diff --git a/package.json b/package.json
@@ -46,14 +46,16 @@
         "eslint-plugin-node": "^11.1.0",
         "eslint-plugin-promise": "^4.3.1",
         "eslint-plugin-standard": "^5.0.0",
+        "front-matter": "^4.0.2",
         "husky": "^5.1.3",
         "jest": "^26.6.3",
         "lint-staged": "^10.5.4",
+        "marked": "^2.0.1",
         "prettier": "^2.2.1",
         "semantic-release": "^17.4.2"
     },
     "engines": {
-        "node": ">=10.0.0"
+        "node": ">=11.15.0"
     },
     "lint-staged": {
         "{*,{lib,docs}/**/*,__{tests,mocks}__/**/*}.js": [
diff --git a/yarn.lock b/yarn.lock
@@ -3609,6 +3609,13 @@ from2@^2.1.0, from2@^2.3.0:
     inherits "^2.0.1"
     readable-stream "^2.0.0"
 
+front-matter@^4.0.2:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/front-matter/-/front-matter-4.0.2.tgz#b14e54dc745cfd7293484f3210d15ea4edd7f4d5"
+  integrity sha512-I8ZuJ/qG92NWX8i5x1Y8qyj3vizhXS31OxjKDu3LKP+7/qBgfIKValiZIEwoVoJKUHlhWtYrktkxV1XsX+pPlg==
+  dependencies:
+    js-yaml "^3.13.1"
+
 fs-extra@8.1.0:
   version "8.1.0"
   resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-8.1.0.tgz#49d43c45a88cd9677668cb7be1b46efdb8d2e1c0"
@@ -5763,7 +5770,7 @@ marked-terminal@^4.1.1:
     node-emoji "^1.10.0"
     supports-hyperlinks "^2.1.0"
 
-marked@^2.0.0:
+marked@^2.0.0, marked@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/marked/-/marked-2.0.1.tgz#5e7ed7009bfa5c95182e4eb696f85e948cefcee3"
   integrity sha512-5+/fKgMv2hARmMW7DOpykr2iLhl0NgjyELk5yn92iE7z8Se1IS9n3UsFm86hFXIkvMBmVxki8+ckcpjBeyo/hw==
