Merge pull request #87 from jhildenbiddle/vercel

Add Vercel preview

Author: jhildenbiddle

.gitignore

@@ -11,3 +11,4 @@ node_modules
 ._*
 .cache
 .DS_Store
+.vercel

middleware.js

@@ -0,0 +1,24 @@
+import { rewriteRules } from './preview.config.cjs';
+
+// Exports
+// =============================================================================
+export const config = {
+    matcher: ['/preview/(index.html)?'],
+};
+
+// Serve virtual /preview/index.html
+// Note: See vercel.json for preview routing configuration
+// 1. Fetch index.html from /docs/ directory
+// 2. Replace CDN URLs with local paths (see rewriteRules)
+// 3. Return preview HTML
+export default async function middleware(request) {
+    const { origin } = new URL(request.url);
+    const indexURL = `${origin}/docs/index.html`;
+    const indexHTML = await fetch(indexURL).then((res) => res.text());
+    const previewHTML = rewriteRules.reduce((html, rule) => html.replace(rule.match, rule.replace), indexHTML);
+
+    return new Response(previewHTML, {
+        status: 200,
+        headers: { 'content-type': 'text/html' },
+    });
+}

preview.config.cjs

@@ -0,0 +1,25 @@
+module.exports = {
+    rewriteRules: [
+        // Replace CDN URLs with local paths
+        {
+            match  : /https?.*\/CHANGELOG.md/g,
+            replace: '/CHANGELOG.md'
+        },
+        {
+            // CDN versioned default
+            // Ex1: //cdn.com/package-name
+            // Ex2: http://cdn.com/[email protected]
+            // Ex3: https://cdn.com/package-name@latest
+            match  : /(?:https?:)*\/\/.*cdn.*docsify-themeable[@\d.latest]*(?=["'])/g,
+            replace: '/dist/js/docsify-themeable.min.js'
+        },
+        {
+            // CDN paths to local paths
+            // Ex1: //cdn.com/package-name/path/file.js => /path/file.js
+            // Ex2: http://cdn.com/[email protected]/dist/file.js => /dist/file.js
+            // Ex3: https://cdn.com/package-name@latest/dist/file.js => /dist/file.js
+            match  : /(?:https?:)*\/\/.*cdn.*docsify-themeable[@\d.latest]*\/(?:dist\/)/g,
+            replace: '/dist/'
+        }
+    ],
+};

server.cjs

@@ -1,7 +1,8 @@
-// Dependencies
-// =============================================================================
 const browserSync = require('browser-sync').create();
 const compression = require('compression');
+const { rewriteRules } = require('./preview.config.cjs');
+
+const previewDir = '/preview';
 
 browserSync.init({
     files: [
@@ -18,42 +19,25 @@ browserSync.init({
     cors: true,
     reloadDebounce: 1000,
     reloadOnRestart: true,
+    rewriteRules,
     server: {
-        baseDir: [
-            './docs/'
-        ],
-        // directory: true,
+        baseDir: '.',
         middleware: [
-            compression()
+            compression(),
+            // Redirect root to preview
+            function(req, res, next) {
+                if (req.url === '/') {
+                    res.writeHead(301, { Location: previewDir });
+                    res.end();
+                }
+
+                return next();
+            }
         ],
         routes: {
-            '/CHANGELOG.md': './CHANGELOG.md'
+            [previewDir]: './docs/',
+            [`${previewDir}/CHANGELOG.md`]: './CHANGELOG.md',
         }
     },
-    serveStatic: [
-        './dist/'
-    ],
-    rewriteRules: [
-        // Replace CDN URLs with local paths
-        {
-            match  : /https?.*\/CHANGELOG.md/g,
-            replace: '/CHANGELOG.md'
-        },
-        {
-            // CDN versioned default
-            // Ex1: //cdn.com/package-name
-            // Ex2: http://cdn.com/[email protected]
-            // Ex3: https://cdn.com/package-name@latest
-            match  : /(?:https?:)*\/\/.*cdn.*docsify-themeable[@\d.latest]*(?=["'])/g,
-            replace: '/js/docsify-themeable.min.js'
-        },
-        {
-            // CDN paths to local paths
-            // Ex1: //cdn.com/package-name/path/file.js => /path/file.js
-            // Ex2: http://cdn.com/[email protected]/dist/file.js => /dist/file.js
-            // Ex3: https://cdn.com/package-name@latest/dist/file.js => /dist/file.js
-            match  : /(?:https?:)*\/\/.*cdn.*docsify-themeable[@\d.latest]*\/(?:dist\/)/g,
-            replace: '/'
-        }
-    ]
+    startPath: previewDir,
 });

vercel.json

@@ -0,0 +1,9 @@
+{
+    "redirects": [
+        { "source": "/", "destination": "/preview/" }
+    ],
+    "rewrites": [
+        { "source": "/preview/CHANGELOG.md", "destination": "/CHANGELOG.md" },
+        { "source": "/preview/:path*", "destination": "/docs/:path*" }
+    ]
+}