Add issue templates, reference codesandbox starters

Closes GH-16.

Reviewed-by: Titus Wormer <[email protected]>

.github/ISSUE_TEMPLATE/1-bug.yml

@@ -0,0 +1,145 @@
+name: 🐛 Bug report
+description: Describe a problem
+
+body:
+  - type: markdown
+    attributes:
+      value: |
+        Some general tips:
+
+        - Is this really a problem?
+        - Is this a problem here?
+        - Can this be solved in a different way?
+
+  - type: checkboxes
+    id: initial-checklist
+    attributes:
+      label: Initial checklist
+      options:
+        - label: I read the [support docs](https://mdxjs.com/support)
+          required: true
+        - label: I read the [contributing guide](https://mdxjs.com/contributing)
+          required: true
+        - label: I agree to follow the [code of conduct](https://github.com/mdx-js/.github/blob/HEAD/code-of-conduct.md)
+          required: true
+        - label: I searched [issues](https://github.com/search?q=user%3Amdx-js&type=Issues) and couldn’t find anything (or linked relevant results below)
+          required: true
+
+  - type: input
+    id: affected-versions
+    attributes:
+      label: Affected packages and versions
+      description: Please test using the latest version of the relevant packages to make sure your issue has not already been fixed.
+    validations:
+      required: true
+
+  - type: input
+    id: runnable-example
+    attributes:
+      label: Link to runnable example
+      description: |
+        Link to repository or sandbox with runnable example of the issue.
+
+        Some CodeSandbox starters:
+        - [MDX Loader with Next.js](https://codesandbox.io/s/github/mdx-js/.github/sandbox-templates/mdx-loader-next)
+        - [MDX Evaluate with Node.js](https://codesandbox.io/s/github/mdx-js/.github/sandbox-templates/mdx-evaulate-node)
+        - [MDX Evaluate with Create React App](https://codesandbox.io/s/github/mdx-js/.github/sandbox-templates/mdx-evaluate-create-react-app)
+
+        Alternatively, use the next section *Steps to reproduce*.
+    validations:
+      required: false
+
+  - type: textarea
+    id: steps-to-reproduce
+    attributes:
+      label: Steps to reproduce
+      description: How did this happen? Please provide a [minimal, reproducible example](https://stackoverflow.com/help/minimal-reproducible-example).
+    validations:
+      required: true
+
+  - type: textarea
+    id: expected-behavior
+    attributes:
+      label: Expected behavior
+      description: What should happen?
+    validations:
+      required: true
+
+  - type: textarea
+    id: actual-behavior
+    attributes:
+      label: Actual behavior
+      description: What happens instead?
+    validations:
+      required: true
+
+  - type: dropdown
+    id: javascript-runtime
+    attributes:
+      label: Runtime
+      description: |
+        What JavaScript runtime are you using to build or run the code?
+        **Note**: for ECMASCript modules (ESM) in Node, at minimum Node.js 12.20, 14.14, or 16.0 is required.
+      multiple: true
+      options:
+        - Node v17
+        - Node v16
+        - Node v14
+        - Node v12
+        - Deno
+        - Electron
+        - Other (please specify in steps to reproduce)
+    validations:
+      required: false
+
+  - type: dropdown
+    id: package-manager
+    attributes:
+      label: Package manager
+      description: What package manager are you using?
+      multiple: true
+      options:
+        - npm v8
+        - npm v6
+        - yarn v2
+        - yarn v1
+        - pnpm
+        - Other (please specify in steps to reproduce)
+    validations:
+      required: false
+
+  - type: dropdown
+    id: operating-system
+    attributes:
+      label: OS
+      description: What operating system are you using?
+      multiple: true
+      options:
+        - Windows
+        - Linux
+        - macOS
+        - Other (please specify in steps to reproduce)
+    validations:
+      required: false
+
+  - type: dropdown
+    id: build-tools
+    attributes:
+      label: Build and bundle tools
+      description: What, if any, tools are used to build or bundle the project?
+      multiple: true
+      options:
+        - webpack
+        - Rollup
+        - esbuild
+        - Parcel
+        - Create React App
+        - Gatsby
+        - Next.js
+        - Remix
+        - Docusaurus
+        - Snowpack
+        - Vite
+        - Other (please specify in steps to reproduce)
+    validations:
+      required: false

.github/ISSUE_TEMPLATE/2-feature.yml

@@ -0,0 +1,49 @@
+name: 🚀 Feature request
+description: Suggest an idea
+
+body:
+  - type: markdown
+    attributes:
+      value: |
+        Some general tips:
+
+        - Is this really a problem?
+        - Is this a problem here?
+
+  - type: checkboxes
+    id: initial-checklist
+    attributes:
+      label: Initial checklist
+      options:
+        - label: I read the [support docs](https://mdxjs.com/support)
+          required: true
+        - label: I read the [contributing guide](https://mdxjs.com/contributing)
+          required: true
+        - label: I agree to follow the [code of conduct](https://github.com/mdx-js/.github/blob/HEAD/code-of-conduct.md)
+          required: true
+        - label: I searched [issues](https://github.com/search?q=user%3Amdx-js&type=Issues) and couldn’t find anything (or linked relevant results below)
+          required: true
+
+  - type: textarea
+    id: problem
+    attributes:
+      label: Problem
+      description: Please describe the problem you are trying to solve here.
+    validations:
+      required: true
+
+  - type: textarea
+    id: solution
+    attributes:
+      label: Solution
+      description: What should happen? Please describe the desired behavior.
+    validations:
+      required: true
+
+  - type: textarea
+    id: alternatives
+    attributes:
+      label: Alternatives
+      description: What are the alternative solutions? Can this be solved in a different way?
+    validations:
+      required: true

sandbox-templates/mdx-evaluate-create-react-app/package.json

@@ -0,0 +1,27 @@
+{
+  "name": "mdx-evaluate-create-react-app",
+  "version": "1.0.0",
+  "license": "MIT",
+  "private": true,
+  "dependencies": {
+    "@mdx-js/mdx": "2.0.0-rc.2",
+    "react": "17.0.2",
+    "react-dom": "17.0.2",
+    "react-scripts": "5.0.0-next.47"
+  },
+  "devDependencies": {
+    "@babel/runtime": "7.13.8",
+    "typescript": "4.1.3"
+  },
+  "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"
+  ]
+}

sandbox-templates/mdx-evaluate-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>MDX + CRA</title>
+  </head>
+  <body>
+    <noscript>
+      You need to enable JavaScript to run this app.
+    </noscript>
+    <div id="root"></div>
+  </body>
+</html>

sandbox-templates/mdx-evaluate-create-react-app/src/App.js

@@ -0,0 +1,31 @@
+// ⚠️ Important! Please make sure the dependencies are up to date.
+// You can refresh them in the Dependencies section (left-bottom on CodeSandbox)
+
+import { useEffect, useState } from "react";
+import * as runtime from "react/jsx-runtime";
+import { evaluate } from "@mdx-js/mdx";
+
+const mdxContent = `
+export const planet = 'World'
+
+# Hello, {planet}!
+
+* list
+* item
+`;
+
+function useMDX(content) {
+  const [exports, setExports] = useState({ default: runtime.Fragment });
+
+  useEffect(() => {
+    evaluate(mdxContent, { ...runtime }).then((exports) => setExports(exports));
+  }, [content]);
+
+  return exports;
+}
+
+export default function App() {
+  const exports = useMDX(mdxContent);
+  const Content = exports.default;
+  return <Content />;
+}

sandbox-templates/mdx-evaluate-create-react-app/src/index.js

@@ -0,0 +1,12 @@
+import { StrictMode } from "react";
+import ReactDOM from "react-dom";
+
+import App from "./App.js";
+
+const rootElement = document.getElementById("root");
+ReactDOM.render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+  rootElement
+);

sandbox-templates/mdx-evaulate-node/index.js

@@ -0,0 +1,17 @@
+// ⚠️ Important! Please make sure the dependencies are up to date.
+// You can refresh them in the Dependencies section (left-bottom on CodeSandbox)
+
+import http from "node:http";
+import * as runtime from "react/jsx-runtime.js";
+import ReactDom from "react-dom/server.js";
+import { evaluate } from "@mdx-js/mdx";
+
+// Note: refresh the pane on the right to see changes.
+
+http
+  .createServer(async function (_, res) {
+    const content = "Hi <span style={{color: 'tomato'}}>there</span>!";
+    const { default: Content } = await evaluate(content, runtime);
+    ReactDom.renderToNodeStream(Content()).pipe(res);
+  })
+  .listen(8080);

sandbox-templates/mdx-evaulate-node/package.json

@@ -0,0 +1,16 @@
+{
+  "name": "node-http-server",
+  "version": "1.0.0",
+  "license": "MIT",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "start": "nodemon index.js"
+  },
+  "dependencies": {
+    "@mdx-js/mdx": "2.0.0-rc.2",
+    "nodemon": "2.0.15",
+    "react": "17.0.2",
+    "react-dom": "17.0.2"
+  }
+}