Merge branch 'prepare-next-13' into migrate-to-next-web-17

website/.eslintrc.json

@@ -1,27 +1,3 @@
 {
-    "extends": ["standard", "prettier"],
-    "plugins": ["standard", "react", "react-hooks"],
-    "rules": {
-        "no-var": "error",
-        "no-unused-vars": 1,
-        "arrow-spacing": ["error", { "before": true, "after": true }],
-        "indent": ["error", 4],
-        "semi": ["error", "never"],
-        "arrow-parens": ["error", "as-needed"],
-        "standard/object-curly-even-spacing": ["error", "either"],
-        "standard/array-bracket-even-spacing": ["error", "either"],
-        "standard/computed-property-even-spacing": ["error", "even"],
-        "standard/no-callback-literal": ["error", ["cb", "callback"]],
-        "react/jsx-uses-react": "error",
-        "react/jsx-uses-vars": "error",
-        "react-hooks/rules-of-hooks": "error",
-        "react-hooks/exhaustive-deps": "warn"
-    },
-    "parser": "babel-eslint",
-    "parserOptions": {
-        "ecmaVersion": 8
-    },
-    "env": {
-        "browser": true
-    }
+    "extends": "next/core-web-vitals"
 }

website/.gitignore

@@ -34,3 +34,6 @@ yarn-error.log*
 # typescript
 *.tsbuildinfo
 next-env.d.ts
+
+!.vscode/extensions.json
+!public

website/.nvmrc

@@ -1 +1 @@
-16
+18

website/.prettierignore

@@ -0,0 +1 @@
+.next

website/.prettierrc

@@ -20,18 +20,11 @@
             }
         },
         {
-            "files": "*.md",
+            "files": ["package.json", "package-lock.json"],
             "options": {
                 "tabWidth": 2,
                 "printWidth": 80,
-                "proseWrap": "always",
-                "htmlWhitespaceSensitivity": "strict"
-            }
-        },
-        {
-            "files": "*.html",
-            "options": {
-                "htmlWhitespaceSensitivity": "strict"
+                "proseWrap": "always"
             }
         }
     ]

website/.vscode/extensions.json

@@ -0,0 +1,8 @@
+{
+    "recommendations": [
+        "dbaeumer.vscode-eslint",
+        "unifiedjs.vscode-mdx",
+        "esbenp.prettier-vscode",
+        "syler.sass-indented"
+    ]
+}

website/README.md

@@ -4,3 +4,52 @@
 
 The documentation and styleguide for the spaCy website is available at
 [spacy.io/styleguide](https://spacy.io/styleguide).
+
+This is a [Next.js](https://nextjs.org/) project bootstrapped with
+[`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+
+## Getting Started
+
+First, 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 `pages/index.tsx`. The page
+auto-updates as you edit the file.
+
+[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on
+[http://localhost:3000/api/hello](http://localhost:3000/api/hello). This
+endpoint can be edited in `pages/api/hello.ts`.
+
+The `pages/api` directory is mapped to `/api/*`. Files in this directory are
+treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead
+of React pages.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+-   [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js
+    features and API.
+-   [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out
+[the Next.js GitHub repository](https://github.com/vercel/next.js/) - your
+feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the
+[Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme)
+from the creators of Next.js.
+
+Check out our
+[Next.js deployment documentation](https://nextjs.org/docs/deployment) for more
+details.

website/components/layout/index.tsx

@@ -0,0 +1,9 @@
+const Layout = (args) => {
+    return (
+        <>
+            <div>{args.children}</div>
+        </>
+    )
+}
+
+export default Layout

website/components/mdxComponents.tsx

@@ -0,0 +1,3 @@
+const mdxComponents = {}
+
+export default mdxComponents

website/next.config.mjs

@@ -0,0 +1,29 @@
+import MDX from '@next/mdx'
+
+import remarkPlugins from './plugins/index.mjs'
+
+const withMDX = MDX({
+    extension: /\.mdx?$/,
+    options: {
+        remarkPlugins,
+        providerImportSource: '@mdx-js/react',
+    },
+    experimental: {
+        mdxRs: true,
+    },
+})
+
+/** @type {import('next').NextConfig} */
+const nextConfig = withMDX({
+    reactStrictMode: true,
+    swcMinify: true,
+    pageExtensions: ['js', 'jsx', 'ts', 'tsx', 'md', 'mdx'],
+    eslint: {
+        ignoreDuringBuilds: true,
+    },
+    typescript: {
+        ignoreBuildErrors: true,
+    },
+})
+
+export default nextConfig

website/package.json

@@ -1,86 +1,33 @@
 {
-    "name": "spacy-io",
+  "name": "next-blog",
+  "version": "0.1.0",
   "private": true,
-    "description": "spaCy website",
-    "version": "3.0.0",
-    "author": "Explosion <contact@explosion.ai>",
-    "license": "MIT",
-    "dependencies": {
-        "@jupyterlab/outputarea": "^0.19.1",
-        "@jupyterlab/rendermime": "^0.19.1",
-        "@mdx-js/mdx": "^0.17.5",
-        "@mdx-js/tag": "^0.17.5",
-        "@phosphor/widgets": "^1.6.0",
-        "@rehooks/online-status": "^1.0.0",
-        "@svgr/webpack": "^4.1.0",
-        "autoprefixer": "^9.4.7",
-        "classnames": "^2.2.6",
-        "codemirror": "^5.43.0",
-        "gatsby": "^2.11.1",
-        "gatsby-image": "^2.0.29",
-        "gatsby-mdx": "^0.3.6",
-        "gatsby-plugin-catch-links": "^2.0.11",
-        "gatsby-plugin-manifest": "^2.0.17",
-        "gatsby-plugin-offline": "^2.0.24",
-        "gatsby-plugin-plausible": "0.0.6",
-        "gatsby-plugin-react-helmet": "^3.0.6",
-        "gatsby-plugin-react-svg": "^2.0.0",
-        "gatsby-plugin-robots-txt": "^1.5.1",
-        "gatsby-plugin-sass": "^2.0.10",
-        "gatsby-plugin-sharp": "^2.0.20",
-        "gatsby-plugin-sitemap": "^2.0.5",
-        "gatsby-plugin-svgr": "^2.0.1",
-        "gatsby-remark-copy-linked-files": "^2.0.9",
-        "gatsby-remark-find-replace": "^0.3.0",
-        "gatsby-remark-images": "^3.0.4",
-        "gatsby-remark-prismjs": "^3.2.4",
-        "gatsby-remark-smartypants": "^2.0.8",
-        "gatsby-remark-unwrap-images": "^1.0.1",
-        "gatsby-source-filesystem": "^2.0.24",
-        "gatsby-transformer-remark": "^2.2.5",
-        "gatsby-transformer-sharp": "^2.1.13",
-        "html-to-react": "^1.3.4",
-        "intersection-observer": "^0.5.1",
-        "jinja-to-js": "^3.2.3",
-        "node-sass": "^4.11.0",
-        "parse-numeric-range": "0.0.2",
-        "prismjs": "^1.15.0",
-        "prismjs-bibtex": "^1.1.0",
-        "prop-types": "^15.7.2",
-        "react": "^16.8.2",
-        "react-dom": "^16.8.2",
-        "react-github-btn": "^1.2.0",
-        "react-helmet": "^5.2.0",
-        "react-intersection-observer": "^8.0.1",
-        "remark-react": "^5.0.1"
-    },
   "scripts": {
-        "build": "npm run python:install && npm run python:setup && gatsby build",
-        "dev": "npm run python:setup && gatsby develop",
-        "dev:nightly": "BRANCH=nightly.spacy.io npm run dev",
-        "dev:legacy": "SPACY_LEGACY=1 npm run dev",
-        "lint": "eslint **",
-        "clear": "rm -rf .cache",
-        "test": "echo \"Write tests! -> https://gatsby.app/unit-testing\"",
-        "python:install": "pip install -r setup/requirements.txt",
-        "python:setup": "cd setup && sh setup.sh"
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint",
+    "prettier": "prettier . --write"
   },
-    "devDependencies": {
-        "@sindresorhus/slugify": "^0.8.0",
-        "browser-monads": "^1.0.0",
-        "md-attr-parser": "^1.2.1",
-        "prettier": "^1.16.4",
-        "raw-loader": "^1.0.0",
-        "unist-util-visit": "^1.4.0"
+  "dependencies": {
+    "@mdx-js/loader": "^2.1.5",
+    "@mdx-js/react": "^2.1.5",
+    "@next/mdx": "^13.0.2",
+    "@types/node": "18.11.9",
+    "@types/react": "18.0.25",
+    "@types/react-dom": "18.0.8",
+    "classnames": "^2.3.2",
+    "eslint": "8.27.0",
+    "eslint-config-next": "13.0.2",
+    "next": "13.0.2",
+    "next-mdx-remote": "^4.2.0",
+    "prettier": "^2.7.1",
+    "prop-types": "^15.8.1",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "remark-gfm": "^3.0.1",
+    "sass": "^1.56.1",
+    "typescript": "4.8.4"
   },
-    "repository": {
-        "type": "git",
-        "url": "https://github.com/explosion/spaCy"
-    },
-    "bugs": {
-        "url": "https://github.com/explosion/spaCy/issues"
-    },
-    "engines": {
-        "node": "16"
-    }
+  "engine": 18
 }

website/pages/[...slug].tsx

@@ -0,0 +1,84 @@
+import type { GetStaticPaths, GetStaticProps } from 'next'
+import { serialize } from 'next-mdx-remote/serialize'
+import fs from 'fs'
+import { MDXRemote, MDXRemoteSerializeResult } from 'next-mdx-remote'
+import path from 'path'
+import Layout from '../components/layout'
+import remarkPlugins from '../plugins/index.mjs'
+
+type PropsPage = {
+    mdx: MDXRemoteSerializeResult
+}
+
+const PostPage = ({ mdx: mdx }: PropsPage) => {
+    return (
+        <Layout>
+            <MDXRemote {...mdx} />
+        </Layout>
+    )
+}
+
+export default PostPage
+
+type ParsedUrlQuery = {
+    slug: Array<string>
+}
+
+export const getStaticPaths: GetStaticPaths<ParsedUrlQuery> = async () => {
+    // This function needs to be defined inside `getStaticPath` to be executed in executed in the correct context
+    const loadFolder = (pathBase: Array<string> = []): Array<{ params: ParsedUrlQuery }> =>
+        fs
+            .readdirSync(path.join('docs', ...pathBase), { withFileTypes: true })
+            .flatMap((dirent: fs.Dirent) => {
+                if (dirent.isDirectory()) {
+                    return loadFolder([...pathBase, dirent.name])
+                }
+                if (!dirent.name.includes('.mdx')) {
+                    return []
+                }
+
+                return {
+                    params: {
+                        slug:
+                            dirent.name === 'index.mdx'
+                                ? pathBase
+                                : [...pathBase, dirent.name.replace('.mdx', '')],
+                    },
+                }
+            })
+
+    return {
+        paths: loadFolder(),
+        fallback: false,
+    }
+}
+
+const getPathWithExtension = (slug: ReadonlyArray<string>) => `${path.join(...slug)}.mdx`
+
+const getIsIndex = (slug: ReadonlyArray<string>): boolean =>
+    fs.existsSync(getPathWithExtension(slug)) !== true
+
+const getPathFull = (slug: ReadonlyArray<string>): ReadonlyArray<string> =>
+    getIsIndex(slug) ? [...slug, 'index'] : slug
+
+export const getStaticProps: GetStaticProps<PropsPage, ParsedUrlQuery> = async (args) => {
+    if (!args.params) {
+        return { notFound: true }
+    }
+
+    const pathFull = getPathFull(['docs', ...args.params.slug])
+
+    const mdx = await serialize(fs.readFileSync(getPathWithExtension(pathFull), 'utf-8'), {
+        parseFrontmatter: true,
+        mdxOptions: {
+            remarkPlugins,
+        },
+    })
+
+    return {
+        props: {
+            slug: args.params.slug,
+            mdx,
+        },
+    }
+}

website/pages/_app.tsx

@@ -0,0 +1,11 @@
+import type { AppProps } from 'next/app'
+import { MDXProvider } from '@mdx-js/react'
+import mdxComponents from '../components/mdxComponents'
+
+export default function App({ Component, pageProps }: AppProps) {
+    return (
+        <MDXProvider components={mdxComponents}>
+            <Component {...pageProps} />
+        </MDXProvider>
+    )
+}

website/plugins/index.mjs

@@ -0,0 +1,7 @@
+import remarkGfm from 'remark-gfm'
+
+import remarkCustomAttrs from './remarkCustomAttrs.mjs'
+
+const remarkPlugins = [remarkGfm, remarkCustomAttrs]
+
+export default remarkPlugins

website/plugins/remarkCustomAttrs.mjs

@@ -0,0 +1,68 @@
+const parseAttribute = (expression) => {
+    if (expression.type !== 'AssignmentExpression' || !expression.left || !expression.right) {
+        return
+    }
+
+    const { left, right } = expression
+
+    if (left.type !== 'Identifier' || right.type !== 'Literal' || !left.name || !right.value) {
+        return
+    }
+
+    return { type: 'mdxJsxAttribute', name: left.name, value: right.value }
+}
+
+const parseAstTree = (markdownAST) => {
+    markdownAST.children.map((node, index) => {
+        if (node.type !== 'heading' || !node.children || node.children < 2) {
+            return
+        }
+
+        const indexLast = node.children.length - 1
+        const lastNode = node.children[indexLast]
+
+        if (lastNode.type !== 'mdxTextExpression' || !lastNode.data || !lastNode.data.estree) {
+            return
+        }
+
+        const { estree } = lastNode.data
+
+        if (
+            estree.type !== 'Program' ||
+            !estree.body ||
+            estree.body.length <= 0 ||
+            !estree.body[0]
+        ) {
+            return
+        }
+
+        const estreeBodyFirstNode = estree.body[0]
+
+        if (estreeBodyFirstNode.type !== 'ExpressionStatement' || !estreeBodyFirstNode.expression) {
+            return
+        }
+
+        const statement = estreeBodyFirstNode.expression
+
+        const attributeExpressions = [
+            ...(statement.type === 'SequenceExpression' && statement.expressions
+                ? statement.expressions
+                : []),
+            ...(statement.type === 'AssignmentExpression' ? [statement] : []),
+        ]
+
+        // This replaces the markdown heading with a JSX element
+        markdownAST.children[index] = {
+            type: 'mdxJsxFlowElement',
+            name: `h${node.depth}`,
+            attributes: attributeExpressions.map(parseAttribute),
+            children: [node.children[0]],
+        }
+    })
+
+    return markdownAST
+}
+
+const remarkCustomAttrs = () => parseAstTree
+
+export default remarkCustomAttrs

website/public/vercel.svg

@@ -0,0 +1,4 @@
+<svg width="283" height="64" viewBox="0 0 283 64" fill="none" 
+    xmlns="http://www.w3.org/2000/svg">
+    <path d="M141.04 16c-11.04 0-19 7.2-19 18s8.96 18 20 18c6.67 0 12.55-2.64 16.19-7.09l-7.65-4.42c-2.02 2.21-5.09 3.5-8.54 3.5-4.79 0-8.86-2.5-10.37-6.5h28.02c.22-1.12.35-2.28.35-3.5 0-10.79-7.96-17.99-19-17.99zm-9.46 14.5c1.25-3.99 4.67-6.5 9.45-6.5 4.79 0 8.21 2.51 9.45 6.5h-18.9zM248.72 16c-11.04 0-19 7.2-19 18s8.96 18 20 18c6.67 0 12.55-2.64 16.19-7.09l-7.65-4.42c-2.02 2.21-5.09 3.5-8.54 3.5-4.79 0-8.86-2.5-10.37-6.5h28.02c.22-1.12.35-2.28.35-3.5 0-10.79-7.96-17.99-19-17.99zm-9.45 14.5c1.25-3.99 4.67-6.5 9.45-6.5 4.79 0 8.21 2.51 9.45 6.5h-18.9zM200.24 34c0 6 3.92 10 10 10 4.12 0 7.21-1.87 8.8-4.92l7.68 4.43c-3.18 5.3-9.14 8.49-16.48 8.49-11.05 0-19-7.2-19-18s7.96-18 19-18c7.34 0 13.29 3.19 16.48 8.49l-7.68 4.43c-1.59-3.05-4.68-4.92-8.8-4.92-6.07 0-10 4-10 10zm82.48-29v46h-9V5h9zM36.95 0L73.9 64H0L36.95 0zm92.38 5l-27.71 48L73.91 5H84.3l17.32 30 17.32-30h10.39zm58.91 12v9.69c-1-.29-2.06-.49-3.2-.49-5.81 0-10 4-10 10V51h-9V17h9v9.2c0-5.08 5.91-9.2 13.2-9.2z" fill="#000"/>
+</svg>

website/tsconfig.json

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