Create new React + Node example with Vite (#122)

* Rename legacy react-nodejs example to create-react-app

* Set up basic client and server

* Ignore package-lock.json

* Transfer example files from the create-react-app example

* Tweak imports

* Add README

* Remove package-lock.json

* Remove unnecessary info

* Tweak README verbiage

* Update examples/react-nodejs/package.json

Co-authored-by: maxblank-stripe <[email protected]>

* Update examples/react-nodejs/vite.config.js

Co-authored-by: maxblank-stripe <[email protected]>

* Update examples/react-nodejs/server.js

Co-authored-by: maxblank-stripe <[email protected]>

* Add package-lock.json file

* Set up basic production build

* Update README to reflect new scripts

---------

Co-authored-by: maxblank-stripe <[email protected]>

Author: jhgilbert

examples/create-react-app/.gitignore

@@ -0,0 +1,23 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

examples/create-react-app/README.md

@@ -0,0 +1,10 @@
+# React example
+
+This example builds a client-side rendered React app that fetches Markdoc ASTs from an [Express.js](https://expressjs.com/) server.  
+This project was built with `create-react-app`.
+
+## Setup
+
+To get started, run:
+
+`npm run start`

examples/create-react-app/content/home.md

@@ -0,0 +1,17 @@
+---
+route: '/'
+---
+
+# Home
+
+{% callout type="warning" %}
+This is a warning callout!
+{% /callout %}
+
+{% callout type="caution" %}
+This is a caution callout!
+{% /callout %}
+
+```js
+const x = 'test';
+```

examples/create-react-app/content/variables.md

@@ -0,0 +1,9 @@
+---
+route: '/variables'
+---
+
+There a message under this line. Can you figure out how to get it to show up?
+
+{% if $flags.show_secret_feature %}
+This is special hidden text!
+{% /if %}

examples/create-react-app/createContentManifest.js

@@ -0,0 +1,30 @@
+const fs = require('fs');
+const yaml = require('js-yaml');
+const glob = require('glob');
+const Markdoc = require('@markdoc/markdoc');
+
+const parseMarkdocFrontmatter = (ast) => {
+  return ast.attributes.frontmatter
+    ? yaml.load(ast.attributes.frontmatter)
+    : {};
+};
+
+// This creates a mapping between route and parsed Markdoc content.
+exports.createContentManifest = (ROOT_DIR) => {
+  const files = glob.sync(`${ROOT_DIR}/**/*.md`);
+
+  const contentManifest = {};
+
+  files.forEach((file) => {
+    const rawText = fs.readFileSync(file, 'utf-8');
+    const ast = Markdoc.parse(rawText);
+    const frontmatter = parseMarkdocFrontmatter(ast);
+
+    contentManifest[frontmatter.route] = {
+      ast,
+      frontmatter
+    };
+  });
+
+  return contentManifest;
+};

examples/create-react-app/package.json

@@ -0,0 +1,45 @@
+{
+  "private": true,
+  "dependencies": {
+    "@markdoc/markdoc": "latest",
+    "@testing-library/jest-dom": "^5.16.4",
+    "@testing-library/react": "^13.1.1",
+    "@testing-library/user-event": "^13.5.0",
+    "glob": "^8.0.1",
+    "js-yaml": "^4.1.0",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
+    "react-scripts": "5.0.1",
+    "web-vitals": "^2.1.4"
+  },
+  "scripts": {
+    "start:client": "react-scripts start",
+    "start:server": "node server.js",
+    "start": "concurrently \"yarn start:client\" \"yarn start:server\"",
+    "build": "react-scripts build",
+    "test": "react-scripts test",
+    "eject": "react-scripts eject"
+  },
+  "eslintConfig": {
+    "extends": [
+      "react-app",
+      "react-app/jest"
+    ]
+  },
+  "proxy": "http://localhost:4242",
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  },
+  "devDependencies": {
+    "concurrently": "^7.2.0"
+  }
+}

examples/react-nodejs/public/index.html renamed to examples/create-react-app/public/index.html

@@ -0,0 +1,14 @@
+module.exports = {
+  render: 'Callout',
+  children: ['paragraph', 'tag', 'list'],
+  attributes: {
+    type: {
+      type: String,
+      default: 'note',
+      matches: ['check', 'error', 'note', 'warning']
+    },
+    title: {
+      type: String
+    }
+  }
+};

examples/react-nodejs/public/manifest.json renamed to examples/create-react-app/public/manifest.json

@@ -0,0 +1,22 @@
+const { nodes } = require('@markdoc/markdoc');
+
+function generateID(children, attributes) {
+  if (attributes.id && typeof attributes.id === 'string') {
+    return attributes.id;
+  }
+  return children
+    .filter((child) => typeof child === 'string')
+    .join(' ')
+    .replace(/[?]/g, '')
+    .replace(/\s+/g, '-')
+    .toLowerCase();
+}
+
+module.exports = {
+  ...nodes.heading,
+  transform(node, config) {
+    const base = nodes.heading.transform(node, config);
+    base.attributes.id = generateID(base.children, base.attributes);
+    return base;
+  }
+};

examples/create-react-app/schema/Callout.markdoc.js

@@ -0,0 +1,47 @@
+const express = require('express');
+const app = express();
+const path = require('path');
+
+const Markdoc = require('@markdoc/markdoc');
+const callout = require('./schema/callout.markdoc');
+const heading = require('./schema/heading.markdoc');
+const { createContentManifest } = require('./createContentManifest');
+
+const PORT = 4242;
+const CONTENT_DIR = path.join(__dirname, 'content');
+
+// The content manifest maps routes to Markdoc documents.
+const contentManifest = createContentManifest(CONTENT_DIR);
+
+app.get('/markdoc-api', (req, res) => {
+  // Here we can dynamically fetch variables, like user preferences or feature flags
+  const variables = {
+    flags: {
+      show_secret_feature: false
+    }
+  };
+
+  const document = contentManifest[req.query.path];
+
+  if (!document) {
+    return res.sendStatus(404);
+  }
+
+  const { ast } = document;
+  const config = {
+    tags: {
+      callout
+    },
+    nodes: {
+      heading
+    },
+    variables: variables
+  };
+  const content = Markdoc.transform(ast, config);
+
+  return res.json(content);
+});
+
+app.listen(PORT, () => {
+  console.log(`Example app listening on port ${PORT}`);
+});

examples/create-react-app/schema/heading.markdoc.js

@@ -1,23 +1,27 @@
-# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
-
-# dependencies
-/node_modules
-/.pnp
-.pnp.js
-
-# testing
-/coverage
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
 
-# production
-/build
+node_modules
+dist
+dist-ssr
+*.local
 
-# misc
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
 .DS_Store
-.env.local
-.env.development.local
-.env.test.local
-.env.production.local
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
 
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
+# Static files (generated by the Vite build)
+static

examples/create-react-app/server.js

@@ -1,10 +1,10 @@
-# React example
+# React + Node Markdoc Example
 
-This example builds a client-side rendered React app that fetches Markdoc ASTs from an [Express.js](https://expressjs.com/) server.  
-This project was built with `create-react-app`.
+This example includes two applications:
 
-## Setup
+- A client app created with [Vite](https://vite.dev/)'s `react` template
+- A basic Node backend that provides a simple API
 
-To get started, run:
+To start both applications, run `npm run start`, then view the client app in your browser at `http://localhost:5173/`.
 
-`npm run start`
+To build the production version, run `npm run build` to bundle the static files, then start the Node server with `node server.js`.

examples/react-nodejs/src/App.js renamed to examples/create-react-app/src/App.js

@@ -1,22 +1,22 @@
-const fs = require('fs');
-const yaml = require('js-yaml');
-const glob = require('glob');
-const Markdoc = require('@markdoc/markdoc');
+import { readFileSync } from 'fs';
+import { load } from 'js-yaml';
+import globPkg from 'glob';
+const { sync } = globPkg;
+
+import Markdoc from '@markdoc/markdoc';
 
 const parseMarkdocFrontmatter = (ast) => {
-  return ast.attributes.frontmatter
-    ? yaml.load(ast.attributes.frontmatter)
-    : {};
+  return ast.attributes.frontmatter ? load(ast.attributes.frontmatter) : {};
 };
 
 // This creates a mapping between route and parsed Markdoc content.
-exports.createContentManifest = (ROOT_DIR) => {
-  const files = glob.sync(`${ROOT_DIR}/**/*.md`);
+export function createContentManifest(ROOT_DIR) {
+  const files = sync(`${ROOT_DIR}/**/*.md`);
 
   const contentManifest = {};
 
   files.forEach((file) => {
-    const rawText = fs.readFileSync(file, 'utf-8');
+    const rawText = readFileSync(file, 'utf-8');
     const ast = Markdoc.parse(rawText);
     const frontmatter = parseMarkdocFrontmatter(ast);
 
@@ -27,4 +27,4 @@ exports.createContentManifest = (ROOT_DIR) => {
   });
 
   return contentManifest;
-};
+}

examples/react-nodejs/src/Callout.js renamed to examples/create-react-app/src/Callout.js

@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title>React + Node Markdoc Example</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>