feat: cover page supports embedding external files

Author: YiiGuxing

src/core/fetch/index.js

@@ -170,18 +170,23 @@ export function Fetch(Base) {
         }
 
         const coverOnly = Boolean(path) && this.config.onlyCover;
+        const next = () => cb(coverOnly);
         if (path) {
           path = this.router.getFile(root + path);
           this.coverIsHTML = /\.html$/g.test(path);
           get(path + stringifyQuery(query, ['id']), false, requestHeaders).then(
-            text => {
-              this._renderCover(text, coverOnly);
-              cb(coverOnly);
+            text => this._renderCover(text, coverOnly, next),
+            (event, response) => {
+              this.coverIsHTML = false;
+              this._renderCover(
+                `# ${response.status} - ${response.statusText}`,
+                coverOnly,
+                next,
+              );
             },
           );
         } else {
-          this._renderCover(null, coverOnly);
-          cb(coverOnly);
+          this._renderCover(null, coverOnly, next);
         }
       } else {
         cb(false);

src/core/render/index.js

@@ -382,7 +382,7 @@ export function Render(Base) {
       });
     }
 
-    _renderCover(text, coverOnly) {
+    _renderCover(text, coverOnly, next) {
       const el = dom.getNode('.cover');
 
       dom.toggleClass(
@@ -392,37 +392,56 @@ export function Render(Base) {
       );
       if (!text) {
         dom.toggleClass(el, 'remove', 'show');
+        next();
         return;
       }
 
       dom.toggleClass(el, 'add', 'show');
 
-      let html = this.coverIsHTML ? text : this.compiler.cover(text);
+      const callback = html => {
+        const m = html
+          .trim()
+          .match('<p><img.*?data-origin="(.*?)"[^a]+alt="(.*?)">([^<]*?)</p>$');
 
-      const m = html
-        .trim()
-        .match('<p><img.*?data-origin="(.*?)"[^a]+alt="(.*?)">([^<]*?)</p>$');
+        if (m) {
+          if (m[2] === 'color') {
+            el.style.background = m[1] + (m[3] || '');
+          } else {
+            let path = m[1];
 
-      if (m) {
-        if (m[2] === 'color') {
-          el.style.background = m[1] + (m[3] || '');
-        } else {
-          let path = m[1];
+            dom.toggleClass(el, 'add', 'has-mask');
+            if (!isAbsolutePath(m[1])) {
+              path = getPath(this.router.getBasePath(), m[1]);
+            }
 
-          dom.toggleClass(el, 'add', 'has-mask');
-          if (!isAbsolutePath(m[1])) {
-            path = getPath(this.router.getBasePath(), m[1]);
+            el.style.backgroundImage = `url(${path})`;
+            el.style.backgroundSize = 'cover';
+            el.style.backgroundPosition = 'center center';
           }
 
-          el.style.backgroundImage = `url(${path})`;
-          el.style.backgroundSize = 'cover';
-          el.style.backgroundPosition = 'center center';
+          html = html.replace(m[0], '');
         }
 
-        html = html.replace(m[0], '');
-      }
+        this._renderTo('.cover-main', html);
+        next();
+      };
 
-      this._renderTo('.cover-main', html);
+      // TODO: Call the 'beforeEach' and 'afterEach' hooks.
+      // However, when the cover and the home page are on the same page,
+      // the 'beforeEach' and 'afterEach' hooks are called multiple times.
+      // It is difficult to determine the target of the hook within the
+      // hook functions. We might need to make some changes.
+      if (this.coverIsHTML) {
+        callback(text);
+      } else {
+        prerenderEmbed(
+          {
+            compiler: this.compiler,
+            raw: text,
+          },
+          tokens => callback(this.compiler.cover(tokens)),
+        );
+      }
     }
 
     _updateRender() {

test/e2e/embed-files.test.js

@@ -0,0 +1,33 @@
+import docsifyInit from '../helpers/docsify-init.js';
+import { test, expect } from './fixtures/docsify-init-fixture.js';
+
+test.describe('Embed files', () => {
+  const routes = {
+    'fragment.md': '## Fragment',
+  };
+
+  test('embed into homepage', async ({ page }) => {
+    await docsifyInit({
+      routes,
+      markdown: {
+        homepage: "# Hello World\n\n[fragment](fragment.md ':include')",
+      },
+      _logHTML: {},
+    });
+
+    await expect(page.locator('#main')).toContainText('Fragment');
+  });
+
+  test('embed into cover', async ({ page }) => {
+    await docsifyInit({
+      routes,
+      markdown: {
+        homepage: '# Hello World',
+        coverpage: "# Cover\n\n[fragment](fragment.md ':include')",
+      },
+      _logHTML: {},
+    });
+
+    await expect(page.locator('.cover-main')).toContainText('Fragment');
+  });
+});

test/e2e/plugins.test.js

@@ -179,13 +179,51 @@ test.describe('Plugins', () => {
         },
         markdown: {
           homepage: '# Hello World :id=homepage-title',
-          coverpage: '# Cover Page :id=cover-title',
+          coverpage: () => {
+            return new Promise(resolve => {
+              setTimeout(() => resolve('# Cover Page :id=cover-title'), 500);
+            });
+          },
         },
-        // _logHTML: true,
+        // _logHTML: {},
       });
 
       await expect(consoleMessages).toEqual(['Hello World', 'Cover Page']);
     });
+
+    test('only cover', async ({ page }) => {
+      const consoleMessages = [];
+
+      page.on('console', msg => consoleMessages.push(msg.text()));
+
+      await docsifyInit({
+        config: {
+          onlyCover: true,
+          plugins: [
+            function (hook) {
+              hook.doneEach(() => {
+                const homepageTitle = document.querySelector('#homepage-title');
+                const coverTitle = document.querySelector('#cover-title');
+                console.log(homepageTitle?.textContent);
+                console.log(coverTitle?.textContent);
+              });
+            },
+          ],
+        },
+        markdown: {
+          homepage: '# Hello World :id=homepage-title',
+          coverpage: () => {
+            return new Promise(resolve => {
+              setTimeout(() => resolve('# Cover Page :id=cover-title'), 500);
+            });
+          },
+        },
+        waitForSelector: '.cover-main > *:first-child',
+        // _logHTML: {},
+      });
+
+      await expect(consoleMessages).toEqual(['undefined', 'Cover Page']);
+    });
   });
 
   test.describe('route data accessible to plugins', () => {