Merge pull request #313 from wpengine/remote-docs

chore: Remote docs

Author: moonmeister

.vscode/launch.json

@@ -0,0 +1,45 @@
+{
+	"version": "0.2.0",
+	"configurations": [
+		{
+			"name": "Next.js: debug server-side",
+			"type": "node-terminal",
+			"request": "launch",
+			"command": "pnpm dev"
+		},
+		{
+			"name": "Next.js: debug client-side",
+			"type": "chrome",
+			"request": "launch",
+			"url": "http://localhost:3000"
+		},
+		{
+			"name": "Next.js: debug client-side (Firefox)",
+			"type": "firefox",
+			"request": "launch",
+			"url": "http://localhost:3000",
+			"reAttach": true,
+			"pathMappings": [
+				{
+					"url": "webpack://_N_E",
+					"path": "${workspaceFolder}"
+				}
+			]
+		},
+		{
+			"name": "Next.js: debug full stack",
+			"type": "node",
+			"request": "launch",
+			"program": "${workspaceFolder}/node_modules/.bin/next",
+			"runtimeArgs": ["--inspect"],
+			"skipFiles": ["<node_internals>/**"],
+			"serverReadyAction": {
+				"action": "debugWithChrome",
+				"killOnServerStop": true,
+				"pattern": "- Local:.+(https?://.+)",
+				"uriFormat": "%s",
+				"webRoot": "${workspaceFolder}"
+			}
+		}
+	]
+}

README.md

@@ -37,34 +37,10 @@ Formatting - checks for spaces, line length, etc. i.e prettier
 
 Both are run against staged files on commit. If it's failing for a good reason and you need to bypass you can use the `--no-verify` or `-n` flag. `git commit -nm "my message"`
 
-## Documentation Docs
+## Editing content
 
-Docs are MDX in the `docs` folder. Here are a couple things you should know!
-
-1.  Our MDX supports [Github Flavored Markdown](https://github.github.com/gfm/) (GFM).
-2.  Images should be stored along side the doc that uses them.
-3.  Shared Images can be stored in a shared folder @ `docs/images`
-4.  [Callouts](https://github.com/lin-stephanie/rehype-callouts?tab=readme-ov-file#rehype-callouts): These are similar to block quotes or an aside but for various warnings, info, pro times, etc.
-5.  Code Blocks:
-
-    - Required
-      1. Specify a language: ` ```js ` or `` `const inlineCode = [1,2,3];{:js}` ``
-         - Commands for a users terminal = `bash`
-         - env files = `ini`
-         - JavaScript = `js`
-         - TypeScript = `ts`
-         - GraphQL = `gql`
-         - JSON = `json`
-         - For a full list see: https://shiki.style/languages
-      2. Add [line numbers](https://rehype-pretty.pages.dev/#line-numbers) to any complex code. `ini` and `bash` don't need to show line numbers generally. ` ```js showLineNumbers`
-      3. Complete files should have a [file names](https://rehype-pretty.pages.dev/#titles) ` ```js title="pages/_app.js`
-    - Optional
-
-      1.  Lines can be [highlighted](https://rehype-pretty.pages.dev/#highlight-lines) in code blocks ` ```js {1,3-5}`. There are a variety of advanced highlighting methods, see: https://rehype-pretty.pages.dev/#highlight-lines
-      2.  Lines may be [diffed](https://shiki.style/packages/transformers#transformernotationdiff) in a code block:
-
-              ```js
-              console.log('hewwo') // [!code --]
-              console.log('hello') // [!code ++]
-              console.log('goodbye')
-              ```
+- Docs: [Located in the `faustjs` Repo under `/docs`](https://github.com/wpengine/faustjs/tree/canary/docs)\
+- Blog Posts & Pages: [Located in the headless WordPress CMS](https://cms.faustjs.org/wp-admin)
+- [Home Page](src/pages/index.jsx)
+- [Showcase](src/pages/showcase/index.jsx)
+- [Main Navigation](src/components/primary-nav.jsx)

next.config.mjs

@@ -1,17 +1,8 @@
-import { env } from "node:process";
 import { withFaust, getWpHostname } from "@faustwp/core";
-import createMDX from "@next/mdx";
-import { transformerNotationDiff } from "@shikijs/transformers";
 import { withWPEConfig } from "@wpengine/atlas-next";
 import { createSecureHeaders } from "next-secure-headers";
-import recmaNextjsStaticProps from "recma-nextjs-static-props";
-import rehypeCallouts from "rehype-callouts";
-import rehypeMdxImportMedia from "rehype-mdx-import-media";
-import { rehypePrettyCode } from "rehype-pretty-code";
-import rehypeSlug from "rehype-slug";
-import remarkGfm from "remark-gfm";
 import redirectsOldSite from "./redirects-old-site.mjs";
-import smartSearchPlugin from "./src/lib/smart-search-plugin.mjs";
+import { DOCS_PATH } from "./src/lib/remote-mdx-files.mjs";
 
 const newRedirects = [
 	{
@@ -50,6 +41,11 @@ const nextConfig = {
 				hostname: getWpHostname(),
 				pathname: "/**",
 			},
+			{
+				protocol: "https",
+				hostname: "raw.githubusercontent.com",
+				pathname: DOCS_PATH + "/**",
+			},
 		],
 	},
 	i18n: {
@@ -66,43 +62,6 @@ const nextConfig = {
 			},
 		];
 	},
-	webpack: (config, { isServer }) => {
-		if (isServer) {
-			config.plugins.push(
-				smartSearchPlugin({
-					endpoint: env.NEXT_PUBLIC_SEARCH_ENDPOINT,
-					accessToken: env.NEXT_SEARCH_ACCESS_TOKEN,
-				}),
-			);
-		}
-
-		return config;
-	},
 };
 
-const withMDX = createMDX({
-	options: {
-		recmaPlugins: [recmaNextjsStaticProps],
-		remarkPlugins: [remarkGfm],
-		rehypePlugins: [
-			rehypeMdxImportMedia,
-			rehypeSlug,
-			rehypeCallouts,
-			[
-				rehypePrettyCode,
-				{
-					transformers: [
-						transformerNotationDiff({
-							matchAlgorithm: "v3",
-						}),
-					],
-					theme: "github-dark-dimmed",
-					defaultLang: "plaintext",
-					bypassInlineCode: false,
-				},
-			],
-		],
-	},
-});
-
-export default withWPEConfig(withFaust(withMDX(nextConfig)));
+export default withWPEConfig(withFaust(nextConfig));

package.json

@@ -4,12 +4,15 @@
 	"scripts": {
 		"dev": "faust dev",
 		"build": "faust build",
-		"postbuild": "next-sitemap --config next-sitemap.config.mjs",
+		"postbuild": "concurrently \"pnpm build:sitemap\" \"pnpm build:search\"",
 		"generate": "faust generatePossibleTypes",
 		"stylesheet": "faust generateGlobalStylesheet",
 		"start": "faust start",
 		"test:format": "prettier . --check",
 		"test:lint": "eslint --quiet",
+		"test:search": "NODE_ENV=test node --env-file=.env.local ./scripts/smart-search.mjs",
+		"build:search": "node ./scripts/smart-search.mjs",
+		"build:sitemap": "next-sitemap --config next-sitemap.config.mjs",
 		"lint": "eslint --fix",
 		"format": "prettier . --write",
 		"prepare": "husky"
@@ -23,35 +26,42 @@
 		"@heroicons/react": "^2.2.0",
 		"@icons-pack/react-simple-icons": "^12.0.0",
 		"@js-temporal/polyfill": "^0.4.4",
-		"@mdx-js/loader": "^3.0.1",
-		"@mdx-js/react": "^3.0.1",
-		"@next/mdx": "^15.1.7",
+		"@jsdevtools/rehype-url-inspector": "^2.0.2",
+		"@octokit/core": "^6.1.4",
 		"@shikijs/transformers": "^3.0.0",
 		"@sindresorhus/slugify": "^2.2.1",
 		"@wpengine/atlas-next": "^2.0.0",
-		"classnames": "^2.5.1",
 		"date-fns": "^4.1.0",
 		"downshift": "^9.0.8",
 		"feed": "^4.2.2",
 		"graphql": "^16.10.0",
-		"html-to-text": "^9.0.5",
 		"http-status-codes": "^2.3.0",
 		"lodash.debounce": "^4.0.8",
 		"next": "^15.1.7",
+		"next-mdx-remote-client": "^2.1.1",
 		"next-sitemap": "^4.2.3",
 		"react": "^19.0.0",
 		"react-dom": "^19.0.0",
-		"recma-nextjs-static-props": "^2.0.1",
 		"rehype-callouts": "^2.0.1",
-		"rehype-mdx-import-media": "^1.2.0",
+		"rehype-external-links": "^3.0.0",
 		"rehype-pretty-code": "^0.14.0",
 		"rehype-slug": "^6.0.0",
+		"remark-flexible-toc": "^1.1.1",
+		"remark-frontmatter": "^5.0.0",
 		"remark-gfm": "^4.0.1",
-		"shiki": "^3.0.0"
+		"remark-parse": "^11.0.0",
+		"remark-smartypants": "^3.0.2",
+		"remark-stringify": "^11.0.0",
+		"shiki": "^3.0.0",
+		"strip-markdown": "^6.0.0",
+		"unified": "^11.0.5",
+		"unist-util-visit": "^5.0.0",
+		"vfile-matter": "^5.0.0"
 	},
 	"devDependencies": {
 		"@tailwindcss/postcss": "^4.0.7",
 		"@tailwindcss/typography": "^0.5.15",
+		"concurrently": "^9.1.2",
 		"eslint": "^9.20.1",
 		"eslint-config-neon": "^0.2.4",
 		"eslint-plugin-mdx": "^3.1.5",