✨ Add with-mdx example

Author: GuiDevloper

examples/with-mdx/.eslintrc.js

@@ -0,0 +1,19 @@
+module.exports = {
+  extends: 'plugin:nullstack/recommended',
+  rules: {
+    'nullstack/prettier': [
+      'warn',
+      {
+        // More options at https://prettier.io/docs/en/options
+        trailingComma: 'all',
+        tabWidth: 2,
+        semi: false,
+        singleQuote: true,
+        printWidth: 80,
+      },
+      {
+        usePrettierrc: false,
+      },
+    ],
+  },
+}

examples/with-mdx/.gitignore

@@ -0,0 +1,32 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+package-lock.json
+yarn.lock
+pnpm-lock.yaml
+
+# testing
+/coverage
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# local env files
+.env
+
+# vercel
+.vercel
+
+# bundle folders
+.development/
+.production/

examples/with-mdx/README.md

@@ -0,0 +1,22 @@
+# Example app with MDX
+
+This example shows using [MDX](https://github.com/mdx-js/mdx) as top level pages for your Nullstack app.
+
+Based on the [fccoelho7/nullstack-mdx](https://github.com/fccoelho7/nullstack-mdx) with Tailwind ✨
+
+## Deploy your own
+
+Deploy it now with [Vercel](https://vercel.com) or preview on [StackBlitz](https://stackblitz.com):
+
+[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https://github.com/GuiDevloper/nullstack-examples/tree/main/examples/with-mdx&project-name=with-mdx&repo-name=with-mdx&demo-title=Nullstack+withMDX&demo-description=Nullstack+example+with+mdx&demo-url=https://github.com/GuiDevloper/nullstack-examples/tree/main/examples/with-mdx&demo-image=https://nullstack.app/image-1200x630.png)
+[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/fork/github/GuiDevloper/nullstack-examples/tree/main/examples/with-mdx?title=Nullstack+WithMDX)
+
+## How to use
+
+Execute [`nulla create`](https://github.com/GuiDevloper/nulla) with [npm](https://docs.npmjs.com/cli/init):
+
+```bash
+npx nulla create --example with-mdx with-mdx-app
+```
+
+Then deploy it with [Vercel](https://github.com/GuiDevloper/nulla/blob/main/docs/en-US/deploy-vercel.md), [Heroku](https://github.com/GuiDevloper/nulla/blob/main/docs/en-US/deploy-heroku.md) or [Netlify](https://github.com/GuiDevloper/nulla/blob/main/docs/en-US/deploy-netlify.md).

examples/with-mdx/client.ts

@@ -0,0 +1,5 @@
+import Nullstack from 'nullstack'
+
+import Application from './src/Application'
+
+export default Nullstack.start(Application)

examples/with-mdx/package.json

@@ -0,0 +1,19 @@
+{
+  "private": true,
+  "devDependencies": {
+    "nullstack": "0.20.0"
+  },
+  "scripts": {
+    "start": "npx nullstack start",
+    "build": "npx nullstack build",
+    "vercel-build": "npm run build && npx nullstack-adapt-vercel"
+  },
+  "stackblitz": {
+    "installDependencies": false,
+    "startCommand": "npm i [email protected] -D && nullstack-adapt-babel && npm start",
+    "compileTrigger": "save"
+  },
+  "dependencies": {
+    "@mdx-js/loader": "^2.3.0"
+  }
+}

examples/with-mdx/public/favicon-96x96.png

@@ -0,0 +1,5 @@
+import Nullstack from 'nullstack'
+
+import Application from './src/Application'
+
+export default Nullstack.start(Application)

examples/with-mdx/server.ts

@@ -0,0 +1,13 @@
+* {
+  padding: 0;
+  margin: 0;
+  text-decoration: none;
+  list-style: none;
+  box-sizing: border-box;
+}
+
+body {
+  background-color: #111827;
+  color: #fff;
+  font-family: sans-serif;
+}

examples/with-mdx/src/Application.css

@@ -0,0 +1,18 @@
+import './Application.css'
+import Nullstack from 'nullstack'
+
+import Home from './Home.mdx'
+
+class Application extends Nullstack {
+
+  render() {
+    return (
+      <main>
+        <Home route="/" />
+      </main>
+    )
+  }
+
+}
+
+export default Application

examples/with-mdx/src/Application.tsx

@@ -0,0 +1,8 @@
+.button {
+  border-radius: 3px;
+  border: 1px solid black;
+  color: black;
+  padding: 0.5em 1em;
+  cursor: pointer;
+  font-size: 1.1em;
+}

examples/with-mdx/src/Button.css

@@ -0,0 +1,4 @@
+import './Button.css'
+export default function Button({ children }) {
+  return <button class="button">{children}</button>
+}

examples/with-mdx/src/Button.tsx

@@ -0,0 +1,7 @@
+import Button from './Button'
+
+# MDX + Nullstack
+
+Look, a button! 👇
+
+<Button>👋 Hello</Button>

examples/with-mdx/src/Home.mdx

@@ -0,0 +1 @@
+declare module '*.mdx'

examples/with-mdx/src/types.d.ts

@@ -0,0 +1,8 @@
+{
+  "compilerOptions": {
+    "strict": false,
+    "noImplicitAny": false,
+    "jsx": "preserve",
+    "lib": ["ES2020", "DOM"]
+  }
+}

examples/with-mdx/tsconfig.json

@@ -0,0 +1,30 @@
+const configs = require('nullstack/webpack.config')
+
+function withMDX(config) {
+  const mdxRule = {
+    test: /\.mdx?$/,
+    use: [
+      {
+        loader: '@mdx-js/loader',
+        options: {
+          jsxRuntime: 'classic',
+          pragma: '$runtime.element',
+          pragmaFrag: '$runtime.fragment',
+          pragmaImportSource: 'nullstack/runtime',
+        },
+      },
+    ],
+  }
+  config.module.rules.push(mdxRule)
+  return config
+}
+
+function customConfigs() {
+  return configs.map((originalConfig) => {
+    return (...args) => {
+      return withMDX(originalConfig(...args))
+    }
+  })
+}
+
+module.exports = customConfigs()