feat: The timing of the doneEach hook call for the cover

src/core/fetch/index.js

@@ -186,7 +186,7 @@
       }
     }
 
-    _fetchCover() {
+    _fetchCover(cb = noop) {
       const { coverpage, requestHeaders } = this.config;
       const query = this.route.query;
       const root = getParentPath(this.route.path);
@@ -206,17 +206,26 @@
         }
 
         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),
+            text => this._renderCover(text, coverOnly, next),
+            (event, response) => {
+              this.coverIsHTML = false;
+              this._renderCover(
+                `# ${response.status} - ${response.statusText}`,
+                coverOnly,
+                next,
+              );
+            },
           );
         } else {
-          this._renderCover(null, coverOnly);
+          this._renderCover(null, coverOnly, next);
         }
-
-        return coverOnly;
+      } else {
+        cb(false);
       }
     }
 
@@ -226,16 +235,16 @@
         cb();
       };
 
-      const onlyCover = this._fetchCover();
-
-      if (onlyCover) {
-        done();
-      } else {
-        this._fetch(() => {
-          onNavigate();
+      this._fetchCover(onlyCover => {
+        if (onlyCover) {
           done();
-        });
-      }
+        } else {
+          this._fetch(() => {
+            onNavigate();
+            done();
+          });
+        }
+      });
     }
 
     /**

src/core/render/index.js

@@ -444,7 +444,7 @@
       });
     }
 
-    _renderCover(text, coverOnly) {
+    _renderCover(text, coverOnly, next) {
       const el = dom.getNode('.cover');
       const rootElm = document.documentElement;
       const coverBg = getComputedStyle(rootElm).getPropertyValue('--cover-bg');
@@ -453,99 +453,56 @@
 
       if (!text) {
         el.classList.remove('show');
+        next();
         return;
       }
 
       el.classList.add('show');
 
-      let html = this.coverIsHTML
-        ? text
-        : /** @type {Compiler} */ (this.compiler).cover(text);
-
-      if (!coverBg) {
-        const mdBgMatch = html
+      const callback = html => {
+        const m = html
           .trim()
-          .match(
-            '<p><img.*?data-origin="(.*?)".*?alt="(.*?)"[^>]*?>([^<]*?)</p>$',
-          );
-
-        let mdCoverBg;
+          .match('<p><img.*?data-origin="(.*?)"[^a]+alt="(.*?)">([^<]*?)</p>$');
 
-        if (mdBgMatch) {
-          const [bgMatch, bgValue, bgType] = mdBgMatch;
+        if (m) {
+          if (m[2] === 'color') {
+            el.style.background = m[1] + (m[3] || '');
+          } else {
+            let path = m[1];
 
-          // Color
-          if (bgType === 'color') {
-            mdCoverBg = bgValue;
-          }
-          // Image
-          else {
-            const path = !isAbsolutePath(bgValue)
-              ? getPath(this.router.getBasePath(), bgValue)
-              : bgValue;
+            dom.toggleClass(el, 'add', 'has-mask');
+            if (!isAbsolutePath(m[1])) {
+              path = getPath(this.router.getBasePath(), m[1]);
+            }
 
-            mdCoverBg = `center center / cover url(${path})`;
+            el.style.backgroundImage = `url(${path})`;
+            el.style.backgroundSize = 'cover';
+            el.style.backgroundPosition = 'center center';
           }
 
-          html = html.replace(bgMatch, '');
+          html = html.replace(m[0], '');
         }
-        // Gradient background
-        else {
-          const degrees = Math.round((Math.random() * 120) / 2);
-
-          let hue1 = Math.round(Math.random() * 360);
-          let hue2 = Math.round(Math.random() * 360);
-
-          // Ensure hue1 and hue2 are at least 50 degrees apart
-          if (Math.abs(hue1 - hue2) < 50) {
-            const hueShift = Math.round(Math.random() * 25) + 25;
-
-            hue1 = Math.max(hue1, hue2) + hueShift;
-            hue2 = Math.min(hue1, hue2) - hueShift;
-          }
 
-          // OKLCH color
-          if (window?.CSS?.supports('color', 'oklch(0 0 0 / 1%)')) {
-            const l = 90; // Lightness
-            const c = 20; // Chroma
-
-            // prettier-ignore
-            mdCoverBg = `linear-gradient(
-              ${degrees}deg,
-              oklch(${l}% ${c}% ${hue1}) 0%,
-              oklch(${l}% ${c}% ${hue2}) 100%
-            )`.replace(/\s+/g, ' ');
-          }
-          // HSL color (Legacy)
-          else {
-            const s = 100; // Saturation
-            const l = 85; // Lightness
-            const o = 100; // Opacity
-
-            // prettier-ignore
-            mdCoverBg = `linear-gradient(
-              ${degrees}deg,
-              hsl(${hue1} ${s}% ${l}% / ${o}%) 0%,
-              hsl(${hue2} ${s}% ${l}% / ${o}%) 100%
-            )`.replace(/\s+/g, ' ');
-          }
-        }
+        this._renderTo('.cover-main', html);
+        next();
+      };
 
-        rootElm.style.setProperty('--cover-bg', mdCoverBg);
+      // 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)),
+        );
       }
-
-      dom.setHTML('.cover-main', html);
-
-      // Button styles
-      dom
-        .findAll('.cover-main > p:last-of-type > a:not([class])')
-        .forEach(elm => {
-          const buttonType = elm.matches(':first-child')
-            ? 'primary'
-            : 'secondary';
-
-          elm.classList.add('button', buttonType);
-        });
     }
 
     _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

@@ -164,6 +164,74 @@ test.describe('Plugins', () => {
     });
   });
 
+  test.describe('doneEach()', () => {
+    test('callback after cover loads', async ({ page }) => {
+      const consoleMessages = [];
+
+      page.on('console', msg => consoleMessages.push(msg.text()));
+
+      await docsifyInit({
+        config: {
+          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);
+            });
+          },
+        },
+        // _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', () => {
     let routeData = null;