Add with-markdoc/ example

examples/with-markdoc/README.md

@@ -0,0 +1,33 @@
+# Next.js example
+
+This is a boilerplate for a creating a documentation website using Markdoc and Next.js.
+
+## Setup
+
+First, download this example and install the dependencies required:
+
+```bash
+npm install
+# or
+yarn install
+```
+
+Then, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `index.md`. The page auto-updates as you edit the file.
+
+## Deploy
+
+The quickest way to deploy your own version of this boilerplate is by deploying it with [Vercel](https://vercel.com) by clicking the button below.
+
+### Deploy with Vercel
+
+[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https://github.com/markdoc/docs/tree/main/examples/simple-nextjs)

examples/with-markdoc/markdoc/nodes/index.js

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

examples/with-markdoc/markdoc/tags/index.js

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

examples/with-markdoc/next.config.js

@@ -0,0 +1,5 @@
+const withMarkdoc = require('@markdoc/next.js');
+
+module.exports = withMarkdoc()({
+  pageExtensions: ['js', 'md']
+});

examples/with-markdoc/package.json

@@ -0,0 +1,15 @@
+{
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start"
+  },
+  "dependencies": {
+    "@markdoc/markdoc": "*",
+    "@markdoc/next.js": "*",
+    "next": "latest",
+    "react": "*",
+    "react-dom": "*"
+  }
+}

examples/with-markdoc/pages/_app.js

@@ -0,0 +1,5 @@
+import '../public/globals.css';
+
+export default function MyApp({ Component, pageProps }) {
+  return <Component {...pageProps} />;
+}

examples/with-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/with-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;
+}