remarkjs · wooorm · Nov 24, 2021 · Nov 23, 2021 · Nov 23, 2021 · Nov 23, 2021
diff --git a/.github/ISSUE_TEMPLATE/1-bug.yml b/.github/ISSUE_TEMPLATE/1-bug.yml
@@ -40,10 +40,13 @@ body:
       description: |
         Link to repository or sandbox with runnable example of the issue.
 
-        Some CodeSandbox starters:
-        - [remark only](https://codesandbox.io/s/remark-debug-ikwvx) (for markdown to markdown)
-        - [remark and rehype](https://codesandbox.io/s/remark-rehype-debug-4cz8v) (for markdown to html)
-        - [react-markdown](https://codesandbox.io/s/react-markdown-debug-9n4eg)
+        Some starters:
+
+        | description | codesandbox | stackblitz |
+        | - | - | - |
+        | remark only (for markdown to markdown) | [codesandbox](https://codesandbox.io/s/github/remarkjs/.github/tree/main/sandbox-templates/remark-with-parcel) | [stackblitz](https://stackblitz.com/github/remarkjs/.github-remark/tree/main/sandbox-templates/remark-with-parcel) | 
+        | remark and rehype (for markdown to html) | [codesandbox](https://codesandbox.io/s/github/remarkjs/.github/tree/main/sandbox-templates/remark-rehype-with-parcel) | [stackblitz](https://stackblitz.com/github/remarkjs/.github-remark/tree/main/sandbox-templates/remark-rehype-with-parcel) |
+        | react-markdown | [codesandbox](https://codesandbox.io/s/github/remarkjs/.github/tree/main/sandbox-templates/react-markdown-with-create-react-app) | [stackblitz](https://stackblitz.com/github/remarkjs/.github-remark/tree/main/sandbox-templates/react-markdown-with-create-react-app) |
 
         Alternatively, use the next section *Steps to reproduce*.
     validations:

diff --git a/.prettierignore b/.prettierignore
@@ -0,0 +1,2 @@
+*.md
+*.html
diff --git a/package.json b/package.json
@@ -11,15 +11,48 @@
   "contributors": [
     "Titus Wormer <[email protected]> (wooorm.com)"
   ],
+  "workspaces": [
+    "sandbox-templates/react-markdown-with-create-react-app",
+    "sandbox-templates/remark-rehype-with-parcel",
+    "sandbox-templates/remark-with-parcel"
+  ],
   "devDependencies": {
+    "eslint-config-xo-react": "^0.25.0",
+    "prettier": "^2.0.0",
     "remark-cli": "^10.0.0",
     "remark-frontmatter": "^4.0.0",
-    "remark-preset-wooorm": "^9.0.0"
+    "remark-preset-wooorm": "^9.0.0",
+    "xo": "^0.46.0"
   },
   "scripts": {
-    "format": "remark . -qfo",
+    "format": "remark . -qfo && prettier . -w --loglevel warn && xo --fix",
     "test": "npm run format"
   },
+  "prettier": {
+    "tabWidth": 2,
+    "useTabs": false,
+    "singleQuote": true,
+    "bracketSpacing": false,
+    "semi": false,
+    "trailingComma": "none"
+  },
+  "xo": {
+    "extends": "xo-react",
+    "prettier": true,
+    "env": [
+      "browser"
+    ],
+    "overrides": [
+      {
+        "files": [
+          "sandbox-templates/**/*.tsx"
+        ],
+        "rules": {
+          "@typescript-eslint/naming-convention": "off"
+        }
+      }
+    ]
+  },
   "remarkConfig": {
     "plugins": [
       "frontmatter",

diff --git a/sandbox-templates/react-markdown-with-create-react-app/.stackblitzrc b/sandbox-templates/react-markdown-with-create-react-app/.stackblitzrc
@@ -0,0 +1,3 @@
+{
+  "startCommand": "npm start"
+}
diff --git a/sandbox-templates/react-markdown-with-create-react-app/package.json b/sandbox-templates/react-markdown-with-create-react-app/package.json
@@ -0,0 +1,28 @@
+{
+  "name": "react-markdown-with-create-react-app",
+  "version": "1.0.0",
+  "private": true,
+  "main": "src/index.tsx",
+  "dependencies": {
+    "react": "17.0.2",
+    "react-dom": "17.0.2",
+    "react-markdown": "7.1.0",
+    "react-scripts": "4.0.3"
+  },
+  "devDependencies": {
+    "@types/react": "17.0.36",
+    "@types/react-dom": "17.0.11",
+    "typescript": "4.4.4"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test --env=jsdom"
+  },
+  "browserslist": [
+    ">0.2%",
+    "not dead",
+    "not ie <= 11",
+    "not op_mini all"
+  ]
+}
diff --git a/sandbox-templates/react-markdown-with-create-react-app/public/index.html b/sandbox-templates/react-markdown-with-create-react-app/public/index.html
@@ -0,0 +1,14 @@
+<!doctype html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>react-markdown + CRA</title>
+  </head>
+  <body>
+    <noscript>
+      You need to enable JavaScript to run this app.
+    </noscript>
+    <div id="root"></div>
+  </body>
+</html>
diff --git a/sandbox-templates/react-markdown-with-create-react-app/sandbox.config.json b/sandbox-templates/react-markdown-with-create-react-app/sandbox.config.json
@@ -0,0 +1,3 @@
+{
+  "startScript": "start"
+}
diff --git a/sandbox-templates/react-markdown-with-create-react-app/src/app.tsx b/sandbox-templates/react-markdown-with-create-react-app/src/app.tsx
@@ -0,0 +1,22 @@
+// ⚠️ Important! Please make sure the dependencies are up to date.
+// On code sandbox, you can refresh them in the Dependencies section (left-bottom)
+// On stackblitz, you can open the package.json file, update the versions,
+// then run npm install in the stackblitz terminal
+
+import React from 'react'
+import Markdown from 'react-markdown'
+
+const markdownSource = `
+# heading
+
+* list
+* items
+
+\`\`\`js
+function () {}
+\`\`\`
+`
+
+const App = () => <Markdown>{markdownSource}</Markdown>
+
+export default App
diff --git a/sandbox-templates/react-markdown-with-create-react-app/src/index.tsx b/sandbox-templates/react-markdown-with-create-react-app/src/index.tsx
@@ -0,0 +1,13 @@
+import React, {StrictMode} from 'react'
+import * as ReactDOM from 'react-dom'
+
+import App from './app'
+
+const rootElement = document.querySelector('#root')
+
+ReactDOM.render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+  rootElement
+)
diff --git a/sandbox-templates/remark-rehype-with-parcel/.stackblitzrc b/sandbox-templates/remark-rehype-with-parcel/.stackblitzrc
@@ -0,0 +1,3 @@
+{
+  "startCommand": "npm start"
+}
diff --git a/sandbox-templates/remark-rehype-with-parcel/index.html b/sandbox-templates/remark-rehype-with-parcel/index.html
@@ -0,0 +1,19 @@
+<!doctype html>
+<html>
+  <head>
+    <title>remark-rehype + Parcel demo</title>
+    <meta charset="utf-8">
+  </head>
+
+  <body>
+    <h1><code>remark-rehype</code> with Parcel</h1>
+    <h2>source</h2>
+    <pre id="source"></pre>
+    <h2>result</h2>
+    <iframe id="result"></iframe>
+    <h2>error</h2>
+    <pre id="error">none</pre>
+
+    <script src="src/index.js"></script>
+  </body>
+</html>
diff --git a/sandbox-templates/remark-rehype-with-parcel/package.json b/sandbox-templates/remark-rehype-with-parcel/package.json
@@ -0,0 +1,20 @@
+{
+  "name": "remark-rehype-with-parcel",
+  "version": "1.0.0",
+  "private": true,
+  "main": "index.html",
+  "scripts": {
+    "start": "parcel index.html --open",
+    "build": "parcel build index.html"
+  },
+  "dependencies": {
+    "rehype-stringify": "9.0.2",
+    "remark-parse": "10.0.1",
+    "remark-rehype": "10.0.1",
+    "unified": "10.1.1"
+  },
+  "devDependencies": {
+    "@babel/core": "7.16.0",
+    "parcel-bundler": "1.12.5"
+  }
+}
diff --git a/sandbox-templates/remark-rehype-with-parcel/sandbox.config.json b/sandbox-templates/remark-rehype-with-parcel/sandbox.config.json
@@ -0,0 +1,3 @@
+{
+  "startScript": "start"
+}
diff --git a/sandbox-templates/remark-rehype-with-parcel/src/index.js b/sandbox-templates/remark-rehype-with-parcel/src/index.js
@@ -0,0 +1,41 @@
+// ⚠️ Important! Please make sure the dependencies are up to date.
+// On code sandbox, you can refresh them in the Dependencies section (left-bottom)
+// On stackblitz, you can open the package.json file, update the versions,
+// then run npm install in the stackblitz terminal
+
+import {unified} from 'unified'
+import remarkParse from 'remark-parse'
+import remarkRehype from 'remark-rehype'
+import rehypeStringify from 'rehype-stringify'
+
+const sourceMarkdown = `
+# heading
+
+* list
+* item
+
+\`\`\`js
+function () {}
+\`\`\`
+`
+
+async function main() {
+  document.querySelector('#source').textContent = sourceMarkdown
+
+  try {
+    const file = await unified()
+      .use(remarkParse)
+      // Add any remark plugins here
+      .use(remarkRehype)
+      // Add any rehype plugins here
+      .use(rehypeStringify)
+      .process(sourceMarkdown)
+
+    document.querySelector('#result').contentWindow.document.body.innerHTML =
+      String(file)
+  } catch (error) {
+    document.querySelector('#error').textContent = error
+  }
-  try {
-    const file = await unified()
-      .use(remarkParse)
-      // Add any remark plugins here
-      .use(remarkRehype)
-      // Add any rehype plugins here
-      .use(rehypeStringify)
-      .process(sourceMarkdown)
-
-    document.querySelector('#result').contentWindow.document.body.innerHTML =
-      String(file)
-  } catch (error) {
-    document.querySelector('#error').textContent = error
-  }
+  const file = await unified()
+    .use(remarkParse)
+    // Add any remark plugins here
+    .use(remarkRehype)
+    // Add any rehype plugins here
+    .use(rehypeStringify)
+    .process(sourceMarkdown)
+
+  document.querySelector('#result').contentWindow.document.body.innerHTML =
+    String(file)
-  try {
-    const file = await unified()
-      .use(remarkParse)
-      // Add any remark plugins here
-      .use(remarkRehype)
-      // Add any rehype plugins here
-      .use(rehypeStringify)
-      .process(sourceMarkdown)
-
-    document.querySelector('#result').contentWindow.document.body.innerHTML =
-      String(file)
-  } catch (error) {
-    document.querySelector('#error').textContent = error
-  }
+  const file = await unified()
+    .use(remarkParse)
+    // Add any remark plugins here
+    .use(remarkRehype)
+    // Add any rehype plugins here
+    .use(rehypeStringify)
+    .process(sourceMarkdown)
+
+  document.querySelector('#result').contentWindow.document.body.innerHTML =
+    String(file)
+}
+
+main()
-main()
+main().catch((errror) => {
+  document.querySelector('#error').textContent = String(error)
+})
-main()
+main().catch((errror) => {
+  document.querySelector('#error').textContent = String(error)
+})
diff --git a/sandbox-templates/remark-with-parcel/.stackblitzrc b/sandbox-templates/remark-with-parcel/.stackblitzrc
@@ -0,0 +1,3 @@
+{
+  "startCommand": "npm start"
+}
diff --git a/sandbox-templates/remark-with-parcel/index.html b/sandbox-templates/remark-with-parcel/index.html
@@ -0,0 +1,19 @@
+<!doctype html>
+<html>
+  <head>
+    <title>remark + Parcel demo</title>
+    <meta charset="utf-8" />
+  </head>
+
+  <body>
+    <h1><code>remark</code> with Parcel</h1>
+    <h2>source</h2>
+    <pre id="source"></pre>
+    <h2>result</h2>
+    <pre id="result"></pre>
+    <h2>error</h2>
+    <pre id="error">none</pre>
+
+    <script src="src/index.js"></script>
+  </body>
+</html>
diff --git a/sandbox-templates/remark-with-parcel/package.json b/sandbox-templates/remark-with-parcel/package.json
@@ -0,0 +1,17 @@
+{
+  "name": "remark-with-parcel",
+  "version": "1.0.0",
+  "private": true,
+  "main": "index.html",
+  "scripts": {
+    "start": "parcel index.html --open",
+    "build": "parcel build index.html"
+  },
+  "dependencies": {
+    "remark": "14.0.2"
+  },
+  "devDependencies": {
+    "@babel/core": "7.16.0",
+    "parcel-bundler": "1.12.5"
+  }
+}
diff --git a/sandbox-templates/remark-with-parcel/sandbox.config.json b/sandbox-templates/remark-with-parcel/sandbox.config.json
@@ -0,0 +1,3 @@
+{
+  "startScript": "start"
+}
diff --git a/sandbox-templates/remark-with-parcel/src/index.js b/sandbox-templates/remark-with-parcel/src/index.js
@@ -0,0 +1,33 @@
+// ⚠️ Important! Please make sure the dependencies are up to date.
+// On code sandbox, you can refresh them in the Dependencies section (left-bottom)
+// On stackblitz, you can open the package.json file, update the versions,
+// then run npm install in the stackblitz terminal
+
+import {remark} from 'remark'
+
+const sourceMarkdown = `
+# heading
+
+* list
+* item
+
+\`\`\`js
+function () {}
+\`\`\`
+`
+
+async function main() {
+  document.querySelector('#source').textContent = sourceMarkdown
+
+  try {
+    const file = await remark()
+      // .use remark plugins here
+      .process(sourceMarkdown)
+
+    document.querySelector('#result').textContent = String(file)
+  } catch (error) {
+    document.querySelector('#error').textContent = error
+  }
+}
+
+main()