plugin: MDX Nextra Docs

apps/docs/babel.config.js

@@ -0,0 +1,7 @@
+// babel.config.js
+module.exports = function (api) {
+  api.cache(true);
+  return {
+    presets: ["babel-preset-expo"],
+  };
+};

apps/docs/docs.theme.js

@@ -0,0 +1,49 @@
+import { useRouter } from 'next/router'
+
+/* --- Styles ---------------------------------------------------------------------------------- */
+
+const styles = {
+    footer: {
+        verticalAlign: 'middle',
+    },
+    tagLink: {
+        padding: '3px 8px',
+        backgroundColor: '#333333',
+        borderRadius: '4px',
+    },
+}
+
+/* --- Theme ----------------------------------------------------------------------------------- */
+
+/** @type {import('nextra-theme-docs').DocsThemeConfig} */
+export default {
+    logo: <span><strong>FullProduct.dev</strong> ⚡️ Universal Base Starter</span>,
+    project: {
+        link: 'https://github.com/Aetherspace/universal-app-router',
+        title: 'Universal Base Starter - FullProduct.dev',
+    },
+    footer: {
+        text: <span>Need a <strong>Full-Product</strong> / Universal App Setup? 🚀 Check out <a href="https://codinsonn.dev" target="_blank" style={{ ...styles.tagLink, fontWeight: 'bold' }}>FullProduct.dev</a> by <a href="https://codinsonn.dev" target="_blank" style={styles.tagLink}>Thorr ⚡️ codinsonn</a></span>
+    },
+    navigation: true,
+    sidebar: {
+        autoCollapse: true,
+        defaultMenuCollapseLevel: 2,
+        toggleButton: true,  
+    },
+    useNextSeoProps() {
+        const { asPath } = useRouter()
+        if (asPath === '/') {
+            return {
+                title: 'FullProduct.dev ⚡️ Universal Base Starter',
+            }
+        } else if (asPath.includes('plugins')) {
+            return {
+                titleTemplate: 'FullProduct.dev ⚡️ %s Plugin - Universal Base Starter Docs',
+            }
+        }
+        return {
+            titleTemplate: 'FullProduct.dev | %s - Universal Base Starter Docs',
+        }
+    }
+}

apps/docs/global.css

@@ -0,0 +1,43 @@
+/* -i- Upgrade from the CSS reset that came with Expo's default Next.js setup */
+/* Follows the setup for react-native-web: */
+/* https://necolas.github.io/react-native-web/docs/setup/#root-element */
+/* Plus additional React Native scroll and text parity styles for various browsers. */
+/* Force Next-generated DOM elements to fill their parent's height */
+
+html, body, #__next {
+    width: 100%;
+    /* To smooth any scrolling behavior */
+    -webkit-overflow-scrolling: touch;
+    margin: 0px;
+    padding: 0px;
+    /* Allows content to fill the viewport and go beyond the bottom */
+    min-height: 100%;
+}
+
+#__next {
+    flex-shrink: 0;
+    flex-basis: auto;
+    flex-direction: column;
+    flex-grow: 1;
+    display: flex;
+    flex: 1;
+}
+
+html {
+    scroll-behavior: smooth;
+    /* Prevent text size change on orientation change https://gist.github.com/tfausak/2222823#file-ios-8-web-app-html-L138 */
+    -webkit-text-size-adjust: 100%;
+    height: 100%;
+}
+
+body {
+    display: flex;
+    /* Allows you to scroll below the viewport; default value is visible */
+    overflow-y: auto;
+    overscroll-behavior-y: none;
+    font-family: -apple-system, system, Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+    text-rendering: optimizeLegibility;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    -ms-overflow-style: scrollbar;
+}

apps/docs/next-env.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.

apps/docs/next.config.js

@@ -0,0 +1,34 @@
+const { withExpo } = require("@expo/next-adapter");
+const withNextra = require("nextra")({
+  theme: "nextra-theme-docs",
+  themeConfig: "./docs.theme.js",
+});
+
+/** @type {import('next').NextConfig} */
+const nextConfig = withNextra(withExpo({
+  reactStrictMode: true,
+  swcMinify: true,
+  transpilePackages: [
+    "react-native",
+    "react-native-web",
+    "expo",
+    "@bacons/mdx",
+    "@bacons/react-views",
+    "@expo/html-elements",
+    // Add more React Native / Expo packages here...
+  ],
+  pageExtensions: ["js", "jsx", "ts", "tsx", "md", "mdx"],
+  experimental: {
+    forceSwcTransforms: true,
+  },
+  images: {
+    remotePatterns: [
+      {
+        protocol: "https",
+        hostname: "codinsonn.dev",
+      }
+    ]
+  }
+}));
+
+module.exports = nextConfig;

apps/docs/package.json

@@ -0,0 +1,20 @@
+{
+  "name": "@app/docs",
+  "version": "1.0.0",
+  "private": true,
+  "dependencies": {
+    "@mdx-js/loader": "^3.0.1",
+    "@mdx-js/react": "^3.0.1",
+    "@next/mdx": "^14.1.4",
+    "@types/mdx": "^2.0.12",
+    "next": "~14.0.4",
+    "nextra": "^2.13.4",
+    "nextra-theme-docs": "^2.13.4"
+  },
+  "scripts": {
+    "dev": "next dev -p 4000",
+    "build": "next build",
+    "start": "next start -p 4000",
+    "env:local": "cp .env.example .env.local"
+  }
+}

apps/docs/pages/_app.tsx

@@ -0,0 +1,9 @@
+import UniversalAppProviders from '@app/core/screens/UniversalAppProviders'
+
+export default function App({ Component, pageProps }) {
+  return (
+    <UniversalAppProviders>
+      <Component {...pageProps} />
+    </UniversalAppProviders>
+  )
+}

apps/docs/pages/_meta.json

@@ -0,0 +1,4 @@
+{
+    "index": "Introduction",
+    "plugins": "Plugin Branches"
+}

apps/docs/pages/index.mdx

@@ -0,0 +1,5 @@
+import { default as ReadMe } from '@app/core/mdx/readme.mdx'
+
+<div className="nx-h-4" />
+
+<ReadMe />

apps/docs/pages/plugins/[[...pluginBranchSlug]].mdx

@@ -0,0 +1,46 @@
+import { RemoteContent } from 'nextra/data'
+import { buildDynamicMDX, buildDynamicMeta } from 'nextra/remote'
+import { pluginsConfig } from '../../remote/pluginsConfig'
+
+export async function getStaticProps({ params }) {
+
+    const pluginBranch = params.pluginBranchSlug?.join('/') || null
+    const branchNamePath = pluginsConfig.branches.find(filePath => filePath.replace(/\.mdx?/, '') === pluginBranch)
+    const branchName = branchNamePath?.replace(/\.mdx?/, '')?.replace?.('plugins/', '')
+    let pageMarkdown = '# 404 | Plugin Not Found\n\nThe page may not exist, or a remote MDX rate limit may have triggered'
+    try {
+        if (branchName) {
+            const githubApiBranchPRsUrl = `https://api.github.com/repos/Aetherspace/universal-app-router/pulls?head=Aetherspace:with/${branchName}`
+            const response = await fetch(githubApiBranchPRsUrl)
+            const branchPRs = await response.json()
+            const branchPR = branchPRs[0]
+            const branchPRMarkdown = branchPR.body
+            const branchPRTitle = branchPR.title?.replace?.('plugin: ', '')
+            pageMarkdown = branchPRMarkdown.split('\n').reduce((acc, line) => {
+                let newLine = line
+                if (line.includes('<img ') && line.includes('">')) newLine = newLine.replace('">', '" />')
+                return acc + newLine + '\n'
+            }, `# ${branchPRTitle} \n\n \`\`\`zsch\ngit merge with/${branchName}\n\`\`\`\n\n`)
+        }
+    } catch (error) {
+        if (!error) console.error(error)
+    }
+    const dynamicMDX = await buildDynamicMDX(pageMarkdown, { defaultShowCopyCode: true })
+    const dynamicMeta = await buildDynamicMeta()
+    return {
+        props: {
+            ...dynamicMeta,
+            ...dynamicMDX,
+        },
+        revalidate: 60, // 1 hour in seconds
+    }
+}
+
+export const getStaticPaths = () => ({
+  fallback: 'blocking',
+  paths: pluginsConfig.branches.map(filePath => ({
+    params: { pluginBranchSlug: filePath.replace(/\.mdx?$/, '').split('/') }
+  }))
+})
+
+<RemoteContent />

apps/docs/pages/plugins/_meta.json

@@ -0,0 +1,34 @@
+{
+    "nativewind": {
+        "title": "Nativewind",
+        "route": "/plugins/nativewind"
+    },
+    "portability-patterns": {
+        "title": "React Portability Patterns",
+        "route": "/plugins/portability-patterns"
+    },
+    "mdx": {
+        "title": "Universal MDX",
+        "route": "/plugins/mdx"
+    },
+    "graphql-server-apollo": {
+        "title": "GraphQL Server (Apollo)",
+        "route": "/plugins/graphql-server-apollo"
+    },
+    "react-query": {
+        "title": "React Query",
+        "route": "/plugins/react-query"
+    },
+    "mdx-docs-nextra": {
+        "title": "MDX Docs (Nextra)",
+        "route": "/plugins/mdx-docs-nextra"
+    },
+    "turborepo": {
+        "title": "Turborepo",
+        "route": "/plugins/turborepo"
+    },
+    "green-stack": {
+        "title": "GREEN stack",
+        "route": "/plugins/green-stack"
+    }
+}

apps/docs/remote/pluginsConfig.js

@@ -0,0 +1,48 @@
+module.exports = {
+    pluginsConfig: {
+        branches: [
+            'nativewind',
+            'portability-patterns',
+            'mdx',
+            'graphql-server-apollo',
+            'react-query',
+            'mdx-docs-nextra',
+            'turborepo',
+            'green-stack'
+        ],
+        nestedMetaData: {
+            "nativewind": {
+                "title": "Nativewind",
+                "route": "/plugins/nativewind"
+            },
+            "portability-patterns": {
+                "title": "React Portability Patterns",
+                "route": "/plugins/portability-patterns"
+            },
+            "mdx": {
+                "title": "Universal MDX",
+                "route": "/plugins/mdx"
+            },
+            "graphql-server-apollo": {
+                "title": "GraphQL Server (Apollo)",
+                "route": "/plugins/graphql-server-apollo"
+            },
+            "react-query": {
+                "title": "React Query",
+                "route": "/plugins/react-query"
+            },
+            "mdx-docs-nextra": {
+                "title": "MDX Docs (Nextra)",
+                "route": "/plugins/mdx-docs-nextra"
+            },
+            "turborepo": {
+                "title": "Turborepo",
+                "route": "/plugins/turborepo"
+            },
+            "green-stack": {
+                "title": "GREEN stack",
+                "route": "/plugins/green-stack"
+            }
+        }
+    }
+}

apps/docs/tsconfig.json

@@ -0,0 +1,12 @@
+{
+    "extends": "@app/core/tsconfig",
+    "include": [
+        "**/*.ts",
+        "**/*.tsx",
+        "**/*.mdx",
+        ".next/types/**/*.ts",
+    ],
+    "exclude": [
+        "node_modules"
+    ],
+}

apps/expo/app/(public)/markdown/index.tsx

@@ -0,0 +1,3 @@
+import MarkdownScreen from '@app/core/screens/MarkdownScreen'
+
+export default MarkdownScreen

apps/expo/metro.config.js

@@ -19,5 +19,9 @@ config.resolver.nodeModulesPaths = [
 // 3. Force Metro to resolve (sub)dependencies only from the `nodeModulesPaths`
 // config.resolver.disableHierarchicalLookup = true
 
+// 4. Add .md & .mdx files to the file extensions Metro will handle
+config.resolver.sourceExts.push('md', 'mdx');
+config.transformer.babelTransformerPath = require.resolve('./transformer.js');
+
 // Export the modified config
 module.exports = config

apps/expo/package.json

@@ -4,9 +4,11 @@
   "private": true,
   "main": "index.js",
   "dependencies": {
+    "@bacons/mdx": "~0.2.0",
     "@expo/metro-runtime": "^3.2.1",
     "expo": "^51.0.8",
     "expo-constants": "~16.0.1",
+    "expo-image": "~1.12.9",
     "expo-linking": "~6.3.1",
     "expo-router": "~3.5.14",
     "expo-status-bar": "~1.12.1",
@@ -15,8 +17,7 @@
     "react-native": "0.74.1",
     "react-native-safe-area-context": "4.10.1",
     "react-native-screens": "~3.31.1",
-    "react-native-web": "~0.19.11",
-    "expo-image": "~1.12.9"
+    "react-native-web": "~0.19.11"
   },
   "devDependencies": {
     "@babel/core": "^7.19.3",

apps/expo/transformer.js

@@ -0,0 +1,10 @@
+const upstreamTransformer = require('@expo/metro-config/babel-transformer');
+const MdxTransformer = require("@bacons/mdx/metro-transformer");
+
+module.exports.transform = async (props) => {
+    // Then pass it to the upstream transformer.
+    return upstreamTransformer.transform(
+        // Transpile MDX first.
+        await MdxTransformer.transform(props)
+    );
+};

apps/next/app/(public)/markdown/page.tsx

@@ -0,0 +1,4 @@
+'use client'
+import MarkdownScreen from '@app/core/screens/MarkdownScreen'
+
+export default MarkdownScreen