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;
+  }
+};