Use aws-amplify/docs as foundation

CONTRIBUTING.md

@@ -14,7 +14,7 @@
 1. Create/Update content based on the URL.
 
    For example, the content for
-   http://localhost:5000/components/authenticator is located at [`docs/src/content/components/authenticator/index.mdx`](docs/src/content/components/authenticator/index.mdx)
+   http://localhost:5000/components/authenticator is located at [`docs/src/pages/components/authenticator/index.mdx`](docs/src/pages/components/authenticator/index.mdx)
 
 Internally, this content is served by a single, Next.js [optional catch all route](https://nextjs.org/docs/routing/dynamic-routes#optional-catch-all-routes):
 [`docs/src/pages/[[...slugs]].tsx`](docs/src/pages/[[...slugs]].tsx).

docs/README.md

@@ -1,6 +1,19 @@
 # Amplify UI Documentation
 
-Docs are powered by [MDX](https://github.com/mdx-js/mdx) [Next.js](https://nextjs.org/).
+These docs are published at https://docs.amplify.aws/ui and powered by the following technologies:
+
+- [aws-amplify/docs#next](https://github.com/aws-amplify/docs/tree/next) – Layout & Styling
+
+  As a GitHub dependency, this package should be **explicitly updated** using a SHA (e.g. `#33d383d`) rather than a branch (e.g. `#next`):
+
+  ```shell
+  yarn docs add amplify-docs@github:https://github.com/aws-amplify/docs#33d383d
+  ```
+
+  You can find the latest/relevant commit at https://github.com/aws-amplify/docs/commits/next.
+
+- [MDX](https://github.com/mdx-js/mdx) – Content
+- [Next.js](https://nextjs.org/) – Framework
 
 ## Getting Started
 
@@ -9,26 +22,30 @@ Docs are powered by [MDX](https://github.com/mdx-js/mdx) [Next.js](https://nextj
 1. Run `yarn docs dev`
 1. Open <http://localhost:5000/>
 
-All imported `packages/*` are compiled automatically by Next.js for you.
+   (The docs root is `/ui` for consistency with https://docs.amplify.aws/ui)
 
 ## Contributing
 
-### Pages
+### Creating a Page
+
+Page paths mirror their URLs. For example, `/ui/components/authenticator` is located at [/src/pages/ui/components/authenticator/index.mdx](src/pages/ui/components/authenticator/index.mdx).
 
 At a minimum, all MDX pages require the following basic frontmatter:
 
 ```md
 ---
-title: "My Title"
+title: My Title
 ---
 
-"My Title" will show up in the primary navigation now.
+Content goes here...
 ```
 
-### Components
+_My Title_ will show up in the primary navigation.
+
+#### Component Pages
 
-Create or modify a page at `src/content/components/*/index.mdx`.
+Create or modify a page at `src/pages/ui/components/*/index.mdx`.
 
-### Primitives
+#### Primitive Pages
 
-Create or modify a page at `src/content/primitives/*/index.mdx`.
+Create or modify a page at `src/pages/ui/primitives/*/index.mdx`.

docs/next.config.js

@@ -1,21 +1,75 @@
 const { execSync } = require("child_process");
+const path = require("path");
 
-const BRANCH = execSync("git rev-parse --abbrev-ref HEAD")
+const gitHead = execSync("git rev-parse --abbrev-ref HEAD")
   .toString()
   .trim();
 
+const BRANCH = gitHead === "HEAD" ? "main" : gitHead;
+
+const withNextPluginPreval = require("next-plugin-preval/config")();
 const withCompileNodeModules = require("@moxy/next-compile-node-modules")({
-  include: /[\\/]packages[\\/]/,
+  include: [
+    // Using `path.dirname` because `package.json#main` doesn't exist in some packages yet
+    path.dirname(require.resolve("@aws-amplify/ui-core/package.json")),
+    path.dirname(require.resolve("@aws-amplify/ui-react/package.json")),
+    path.dirname(require.resolve("amplify-docs/package.json")),
+  ],
   test: /\.(js|ts)x?/,
 });
 
-const withMDX = require("@next/mdx")({ extension: /\.mdx?$/ });
+module.exports = withNextPluginPreval(
+  withCompileNodeModules({
+    env: { BRANCH },
+    pageExtensions: ["mdx", "page.tsx"],
+    // Convenience for local development, since / will 404 by default
+    redirects() {
+      return [
+        {
+          source: "/",
+          destination: "/ui",
+          permanent: true,
+        },
+      ];
+    },
+    // ! This exists due to the TypeScript issues in amplify-docs
+    typescript: {
+      ignoreBuildErrors: true,
+    },
+    webpack(config) {
+      // https://github.com/wooorm/xdm#next
+      config.module.rules.push({
+        test: /\.mdx$/,
+        use: [
+          {
+            loader: "xdm/webpack.cjs",
+            options: {
+              rehypePlugins: [require("mdx-prism")],
+              remarkPlugins: [
+                require("remark-gfm"),
+                require("remark-mdx-images"),
+                [
+                  require("remark-github"),
+                  {
+                    repository: "aws-amplify/docs",
+                  },
+                ],
+                // Remove frontmatter from MDX
+                require("remark-frontmatter"),
+                // Extract to `frontmatter` export
+                [
+                  require("remark-mdx-frontmatter").remarkMdxFrontmatter,
+                  { name: "frontmatter" },
+                ],
+                require("amplify-docs/src/plugins/headings.tsx"),
+                require("./src/plugins/remark-layout"),
+              ],
+            },
+          },
+        ],
+      });
 
-module.exports = withCompileNodeModules(
-  withMDX({
-    env: {
-      BRANCH,
+      return config;
     },
-    pageExtensions: ["js", "jsx", "mdx", "tsx"],
   })
 );

docs/package.json

@@ -3,7 +3,7 @@
   "name": "docs",
   "version": "0.0.1",
   "scripts": {
-    "dev": "PORT=5000 next-remote-watch 'src/content' '../packages/e2e/**/*.feature'",
+    "dev": "next dev -p 5000",
     "build": "next build && next export",
     "start": "next start",
     "test": "$_ run build"
@@ -17,27 +17,26 @@
     "@mdx-js/loader": "^1.5.1",
     "@mdx-js/react": "^1.6.18",
     "@moxy/next-compile-node-modules": "^2.1.1",
-    "@next/mdx": "^9.1.1",
     "@xstate/inspect": "^0.4.1",
+    "amplify-docs": "github:https://github.com/aws-amplify/docs#33d383d",
     "aws-amplify": "latest",
     "aws-amplify-react": "latest",
     "gray-matter": "^4.0.3",
     "mdx-prism": "^0.3.3",
     "next": "latest",
-    "next-mdx-remote": "^3.0.2",
-    "prism-react-renderer": "^1.2.0",
+    "next-plugin-preval": "^1.2.1",
     "prism-theme-night-owl": "^1.4.0",
     "raw-loader": "^4.0.2",
     "react": "latest",
     "react-dom": "latest",
     "react-smooshpack": "^1.0.0-alpha-31",
     "rehype": "^11.0.0",
-    "remark-autolink-headings": "^6.0.1",
-    "remark-code-titles": "^0.1.2",
+    "remark-frontmatter": "^3.0.0",
     "remark-gfm": "^1.0.0",
-    "remark-highlight.js": "^6.0.0",
+    "remark-github": "^10.1.0",
+    "remark-mdx-frontmatter": "^1.0.1",
     "remark-mdx-images": "^1.0.2",
-    "remark-slug": "^6.0.0"
+    "xdm": "^1.12.0"
   },
   "license": "MIT",
   "devDependencies": {
@@ -46,7 +45,6 @@
     "@types/node": "^14.14.31",
     "@types/react": "^17.0.2",
     "autoprefixer": "^10.2.4",
-    "next-remote-watch": "^1.0.0",
     "postcss": "^8.2.6",
     "tailwindcss": "^2.0.3",
     "typescript": "^4.2.2"

docs/public/assets

@@ -0,0 +1 @@
+../../node_modules/amplify-docs/docs/assets

docs/public/scripts

@@ -0,0 +1 @@
+../../node_modules/amplify-docs/docs/scripts