Add with-markdoc/ example

examples/markdoc/.gitignore

@@ -0,0 +1,32 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+*.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo

examples/markdoc/README.md

@@ -0,0 +1,23 @@
+# Example app with Markdoc
+
+This example shows using [Markdoc](https://github.com/markdoc/markdoc) as top level pages for your Next.js app.
+
+## Deploy your own
+
+Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example) or preview live with [StackBlitz](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/markdoc)
+
+[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/markdoc&project-name=markdoc&repository-name=markdoc)
+
+## How to use
+
+Execute [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app) with [npm](https://docs.npmjs.com/cli/init) or [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/) to bootstrap the example:
+
+```bash
+npx create-next-app --example markdoc markdoc-app
+# or
+yarn create next-app --example markdoc markdoc-app
+# or
+pnpm create next-app -- --example markdoc markdoc-app
+```
+
+Deploy it to the cloud with [Vercel](https://vercel.com/new?utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)).

examples/markdoc/markdoc/functions.ts

@@ -0,0 +1,2 @@
+/* Use this file to export your Markdoc functions */
+export default {};

examples/markdoc/markdoc/nodes.ts

@@ -0,0 +1,2 @@
+/* Use this file to export your Markdoc nodes */
+export default {};

examples/markdoc/markdoc/tags.ts

@@ -0,0 +1,2 @@
+/* Use this file to export your Markdoc tags */
+export default {};

examples/markdoc/next-env.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.

examples/markdoc/next.config.js

@@ -0,0 +1,5 @@
+const withMarkdoc = require('@markdoc/next.js');
+
+module.exports = withMarkdoc(/* config: https://markdoc.io/docs/nextjs#options */)({
+  pageExtensions: ['js', 'md', 'mdoc']
+});

examples/markdoc/package.json

@@ -0,0 +1,21 @@
+{
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start"
+  },
+  "dependencies": {
+    "@markdoc/markdoc": "latest",
+    "@markdoc/next.js": "latest",
+    "next": "latest",
+    "react": "latest",
+    "react-dom": "latest"
+  },
+  "devDependencies": {
+    "@types/node": "latest",
+    "@types/react": "latest",
+    "@types/react-dom": "latest",
+    "typescript": "latest"
+  }
+}

examples/markdoc/pages/_app.ts

@@ -0,0 +1,7 @@
+import type { AppProps } from 'next/app'
+
+import '../public/globals.css';
+
+export default function MyApp({ Component, pageProps }: AppProps) {
+  return <Component {...pageProps} />;
+}

examples/markdoc/pages/index.md

@@ -0,0 +1,18 @@
+---
+title: Get started with Markdoc
+description: How to get started with Markdoc
+---
+
+# Markdoc
+
+This website is a lightweight boilerplate to spin up a documentation website with Markdoc.
+
+## Quick start
+
+If you want to get started right away with this boilerplate, either clone the [GitHub repository](https://github.com/markdoc/docs/tree/main/examples/simple-nextjs) or deploy a version of this site to Vercel by clicking the button below.
+
+[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https://github.com/markdoc/docs/tree/main/examples/simple-nextjs)
+
+## Get started from scratch
+
+If you'd prefer to start from scratch, feel free to check out the [official repository](https://github.com/markdoc/markdoc) and [documentation site](https://markdoc.io/docs/getting-started).

examples/markdoc/public/globals.css

@@ -0,0 +1,38 @@
+body {
+  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
+    'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif,
+    'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
+  color: rgba(60, 66, 87, 1);
+  margin: 0;
+}
+
+#__next {
+  display: grid;
+  grid-template-columns: 0.1fr 1fr 0.15fr;
+  grid-template-rows: 1fr 0.05fr;
+  height: 100vh;
+}
+
+article {
+  grid-column: 2 / 3;
+  grid-row: 1;
+  font-size: 16px;
+  padding: 4em 2em;
+}
+
+h1 {
+  font-size: 40px;
+}
+
+a {
+  color: rgba(75, 85, 99, 1);
+}
+
+h2 {
+  margin: 2em 0;
+}
+
+p {
+  line-height: 1.5em;
+  font-weight: 300;
+}

examples/markdoc/tsconfig.json

@@ -0,0 +1,30 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": false,
+    "forceConsistentCasingInFileNames": true,
+    "noEmit": true,
+    "incremental": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve"
+  },
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
+}