docs: update to nextra 2.0.0 (#232)

.gitignore

@@ -113,4 +113,5 @@ tests/__cache__
 
 .idea
 
-.nexus-prisma
+.nexus-prisma
+.vercel

docs/.eslintrc

@@ -1,24 +1,3 @@
 {
-  "root": true,
-  "parser": "@typescript-eslint/parser",
-  "parserOptions": {
-    "project": ["tsconfig.json", "tests/tsconfig.json"]
-  },
-  "plugins": ["@typescript-eslint", "only-warn"],
-  "extends": [
-    "eslint:recommended",
-    "plugin:@typescript-eslint/eslint-recommended",
-    "plugin:@typescript-eslint/recommended",
-    "plugin:@typescript-eslint/recommended-requiring-type-checking",
-    "prettier"
-  ],
-  "overrides": [],
-  "rules": {
-    // They are great actually
-    "@typescript-eslint/no-namespace": "off",
-    // TypeScript makes these safe & effective
-    "no-case-declarations": "off",
-    // Same approach used by TypeScript noUnusedLocals
-    "@typescript-eslint/no-unused-vars": ["warn", { "varsIgnorePattern": "^_", "argsIgnorePattern": "^_" }]
-  }
+  "extends": "next/core-web-vitals"
 }

docs/.prettierignore

@@ -1,2 +1 @@
-.next/
-out/
+.next/

docs/components/logos/NexusPrisma.tsx

@@ -0,0 +1,24 @@
+import React, { FC, memo } from 'react'
+
+export interface NexusPrismaIconProps {
+  width?: string
+  height?: string
+}
+
+export const NexusPrismaIcon: FC<NexusPrismaIconProps> = memo(({ width, height }) => (
+  <svg
+    width={width}
+    height={height}
+    viewBox="0 0 530 192"
+    preserveAspectRatio="xMidYMid meet"
+    aria-label="Nexus Prisma Logo"
+    fill="#0099FF"
+  >
+    <path d="M446.933 2.26666C445.333 3.59999 427.467 31.6 407.2 64.4C376.133 114.8 370.533 124.8 371.067 128C372 132.4 405.467 184.8 410.133 189.067C412 190.667 414.533 192 415.733 192C416.933 192 441.733 185.067 470.667 176.533C505.2 166.267 524.4 160 526.4 158.267C528 156.667 529.333 154 529.333 151.867C529.333 146.667 463.467 6.79999 459.2 2.93332C455.2 -0.53334 450.667 -0.800003 446.933 2.26666ZM488.133 86C504.133 119.733 517.2 147.6 517.2 148C517.467 150.8 509.733 153.6 470.533 165.2C435.067 175.733 425.6 178.133 424.267 176.8C422.933 175.467 425.467 161.2 438 101.2C446.4 60.5333 453.6 26.5333 454 25.6C456.133 19.7333 460.267 27.0667 488.133 86Z" />
+    <path d="M80.1333 23.0667C68.5333 26.8 60.8 41.4667 64 53.4667C64.9333 56.6667 66.1333 60 66.6667 60.6667C67.3333 61.4667 60.4 73.4667 49.3333 90.4L30.6667 118.667H25.7333C0.400002 118.8 -8.93333 152.267 12.4 166.4C16.8 169.333 19.3333 170 26.1333 170C33.2 170 35.3333 169.467 40.2667 166C51.3333 158.267 54.9333 144.8 48.9333 132.933L45.8667 126.933L63.6 99.7333L81.3333 72.6667L87.4667 73.0667L93.4667 73.6L106.8 100.133L120 126.667L117.067 130.667C112.8 136.533 112.133 148.533 115.733 155.6C123.333 170.4 141.2 174.933 154.4 165.333C164.133 158.4 167.6 145.867 163.2 134.667C161.067 129.467 161.067 129.2 164.267 124.267C166.133 121.6 168.533 117.733 169.867 115.733L172.133 112.133L165.2 107.467L158.133 102.8L152.667 111.067L147.067 119.333L140.8 118.933L134.667 118.4L121.333 91.8667L107.867 65.2L110.933 61.0667C115.2 55.0667 115.867 43.4667 112.267 36.5333C105.867 24 93.4667 18.8 80.1333 23.0667Z" />
+    <path d="M194.267 22.6667C188.133 24.5333 181.2 30.6667 178.533 36.5333C175.067 44.1333 175.333 51.6 179.2 59.3333L182.533 65.7333L177.2 73.4667C174.4 77.7333 172 81.4667 172 81.7333C172 83.2 185.333 90.8 186.533 90.1333C187.2 89.6 190 85.7333 192.667 81.3333C197.2 73.8667 197.867 73.3333 202.533 73.3333C214.267 73.3333 226.533 62.4 227.733 50.9333C229.6 31.4667 212.533 17.2 194.267 22.6667ZM209.333 40C210.933 41.6 212 44.4 212 47.3333C212 50.2667 210.933 53.0667 209.333 54.6667C207.733 56.2667 204.933 57.3333 202 57.3333C199.067 57.3333 196.267 56.2667 194.667 54.6667C193.067 53.0667 192 50.2667 192 47.3333C192 44.4 193.067 41.6 194.667 40C196.267 38.4 199.067 37.3333 202 37.3333C204.933 37.3333 207.733 38.4 209.333 40Z" />
+    <path d="M279 87V69H290V87H308V98H290V116H279V98H261V87H279Z" />
+  </svg>
+))
+
+NexusPrismaIcon.displayName = 'NexusPrismaIcon'

docs/components/pages/Home.tsx

@@ -0,0 +1,34 @@
+import Link from 'next/link'
+import React, { FC } from 'react'
+import { NexusPrismaIcon } from '../logos/NexusPrisma'
+
+export const Home: FC = () => (
+  <div className="w-auto px-4 py-16 mx-auto sm:py-24 lg:px-8">
+    <div className="flex justify-center pb-8">
+      <NexusPrismaIcon width="30em" height="10em" />
+    </div>
+
+    <h1 className="max-w-5xl text-center mx-auto text-6xl font-extrabold tracking-tighter leading-[1.1] sm:text-7xl lg:text-8xl xl:text-8xl">
+      Official&nbsp;
+      <span className="inline-block text-transparent bg-clip-text bg-nextraBlue">Prisma&nbsp;</span>
+      <br />
+      plugin for&nbsp;
+      <span className="inline-block text-transparent bg-clip-text bg-nextraBlue">Nexus</span>
+    </h1>
+
+    <p className="max-w-lg mx-auto pt-8 text-xl font-medium leading-tight text-center text-gray-400 sm:max-w-4xl sm:text-2xl md:text-3xl lg:text-4xl">
+      This plugin integrates Prisma into Nexus. It gives you an API you to project fields from models defined
+      in your Prisma schema into your GraphQL API. It also gives you an API to build GraphQL root fields that
+      allow your API clients to query and mutate data.
+    </p>
+    <div className="max-w-xl mx-auto pt-8 sm:flex sm:justify-center md:mt-8">
+      <div className="rounded-md">
+        <Link href="/docs/index">
+          <a className="flex items-center justify-center w-full px-8 py-3 text-base font-medium text-white no-underline bg-black border border-transparent rounded-md dark:bg-white dark:text-black dark:hover:bg-gray-300 hover:bg-gray-700 md:py-3 md:text-lg md:px-10 md:leading-6">
+            Start Building →
+          </a>
+        </Link>
+      </div>
+    </div>
+  </div>
+)

docs/middleware.ts

@@ -0,0 +1 @@
+export { locales as middleware } from 'nextra/locales'

docs/next-env.d.ts

@@ -1,5 +1,4 @@
 /// <reference types="next" />
-/// <reference types="next/types/global" />
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited

docs/next.config.js

@@ -1,26 +1,41 @@
-/* eslint-disable */
+const withNextra = require('nextra')({
+  theme: 'nextra-theme-docs',
+  themeConfig: './theme.config.tsx',
+  unstable_flexsearch: true,
+})
 
-const remarkGfm = require('remark-gfm')
-const withNextra = require('nextra')
+const securityHeaders = [
+  {
+    key: 'X-Frame-Options',
+    value: 'SAMEORIGIN',
+  },
+  {
+    key: 'X-Content-Type-Options',
+    value: 'nosniff',
+  },
+]
 
-module.exports = withNextra('nextra-theme-docs', './theme.config.js')(withRemarkGFM())
-
-/**
- * Use Remark GFM in MDX Webpack Loader.
- * Can be removed once shuding/nextra#184 is released.
- *
- * @returns {import('next').NextConfig}
- * @see https://github.com/shuding/nextra/pull/184/
- */
-function withRemarkGFM() {
-  return {
-    webpack(config, options) {
-      const markdownRule = config.module.rules.find((rule) => rule.test?.toString() === '/\\.mdx?$/')
-      const mdxLoaderConfig = markdownRule.use.find(({ loader }) => loader === '@mdx-js/loader')
-      mdxLoaderConfig.options = {
-        remarkPlugins: [remarkGfm],
-      }
-      return config
-    },
-  }
-}
+module.exports = withNextra({
+  async headers() {
+    return [
+      {
+        source: '/:path*',
+        headers: securityHeaders,
+      },
+    ]
+  },
+  async redirects() {
+    return [
+      {
+        source: '/docs',
+        destination: '/docs/index',
+        permanent: false,
+      },
+    ]
+  },
+  reactStrictMode: true,
+  i18n: {
+    locales: ['en'],
+    defaultLocale: 'en',
+  },
+})

docs/package.json

@@ -1,38 +1,35 @@
 {
   "name": "docs",
   "version": "1.0.0",
-  "main": "index.js",
   "author": "Prisma Data Inc.",
+  "private": true,
   "license": "MIT",
   "scripts": {
-    "dev": "next dev",
+    "dev": "next",
     "build": "next build",
-    "export": "next export",
+    "export": "next build && next export",
     "format": "prettier --write .",
-    "format:check": "prettier --check .",
-    "lint": "eslint . --ext .ts,.tsx --fix",
-    "lint:check": "eslint . --ext .ts,.tsx --max-warnings 0"
+    "lint": "next lint"
   },
   "dependencies": {
-    "next": "^11.1.2",
-    "nextra": "^1.1.0",
-    "nextra-theme-docs": "^1.2.6",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
-    "remark-gfm": "^1.0.0"
+    "@reach/skip-nav": "0.17.0",
+    "next": "12.2.5",
+    "nextra": "2.0.0-beta.17",
+    "nextra-theme-docs": "2.0.0-beta.17",
+    "react": "18.2.0",
+    "react-dom": "18.2.0"
   },
   "prettier": "@prisma-labs/prettier-config",
   "devDependencies": {
-    "@prisma-labs/prettier-config": "^0.1.0",
-    "@types/react": "^17.0.14",
-    "@typescript-eslint/eslint-plugin": "^4.28.0",
-    "@typescript-eslint/parser": "^4.28.0",
-    "eslint": "^7.29.0",
-    "eslint-config-next": "^11.0.1",
-    "eslint-config-prettier": "^8.3.0",
-    "eslint-plugin-only-warn": "^1.0.2",
-    "gh-pages": "^3.2.3",
-    "prettier": "^2.3.2",
-    "typescript": "^4.3.5"
+    "@prisma-labs/prettier-config": "0.1.0",
+    "@types/node": "18.7.6",
+    "@types/react": "18.0.17",
+    "autoprefixer": "10.4.8",
+    "eslint": "8.22.0",
+    "eslint-config-next": "12.2.5",
+    "postcss": "8.4.16",
+    "prettier": "2.7.1",
+    "tailwindcss": "3.1.8",
+    "typescript": "4.7.4"
   }
 }

docs/pages/_app.tsx

@@ -1,10 +1,6 @@
-import { FC } from 'react'
-import { AppProps } from 'next/app'
+import '../styles.css'
 import 'nextra-theme-docs/style.css'
 
-const App: FC<AppProps> = ({ Component, pageProps }) => {
-  // eslint-disable-next-line @typescript-eslint/no-unsafe-return
+export default function MyApp({ Component, pageProps }) {
   return <Component {...pageProps} />
 }
-
-export default App

docs/pages/_document.tsx

@@ -0,0 +1,20 @@
+import React from 'react'
+import Document, { Html, Head, Main, NextScript } from 'next/document'
+import { SkipNavLink } from '@reach/skip-nav'
+
+class MyDocument extends Document {
+  render() {
+    return (
+      <Html lang="en">
+        <Head />
+        <body>
+          <SkipNavLink />
+          <Main />
+          <NextScript />
+        </body>
+      </Html>
+    )
+  }
+}
+
+export default MyDocument

docs/pages/architecture.md → docs/pages/docs/architecture.en.mdx

@@ -1,10 +1,23 @@
+---
+title: Architecture - Docs
+description: This plugin integrates Prisma into Nexus. It gives you an API you to project fields from models defined in your Prisma schema into your GraphQL API. It also gives you an API to build GraphQL root fields that allow your API clients to query and mutate data.
+---
+
+import Image from 'next/image'
+
 # Architecture
 
 Understanding the following information should not be required knowledge for using Nexus Prisma. It is primarily here for internal maintenance and collaboration. But we're happy for whatever benefit you get out of it too.
 
 ## System
 
-![nexus-prisma-architecture](https://user-images.githubusercontent.com/284476/118728589-70fce780-b802-11eb-8c8b-4328ef5d6fb5.png)
+<Image
+  src="/images/architecture.jpg"
+  alt="Architecture"
+  width={2799}
+  height={1508}
+  layout="responsive"
+/>
 
 1. You or a script (CI, programmatic, etc.) run `$ prisma generate`.
 2. Prisma generator system reads your Prisma schema file