Enable pre/post processing on coverpage and sidebar

[gigaga]

Hi! 👋

Firstly, thanks for your work on this project! 🙂

Today I used patch-package to patch docsify@4.13.1 for the project I'm working on.

The hooks beforeEach and afterEach are not used for cover neither sidebar rendering, so, any plugins cannot be used.

Here is the diff that solved my problem:

diff --git a/node_modules/docsify/lib/docsify.js b/node_modules/docsify/lib/docsify.js
index 6e616ad..3bdd961 100644
--- a/node_modules/docsify/lib/docsify.js
+++ b/node_modules/docsify/lib/docsify.js
@@ -9318,18 +9318,38 @@
           return null;
         }

-        this._renderTo('.sidebar-nav', this.compiler.sidebar(text, maxLevel));
-        var activeEl = getAndActive(this.router, '.sidebar-nav', true, true);
-        if (loadSidebar && activeEl) {
-          activeEl.parentNode.innerHTML +=
-            this.compiler.subSidebar(subMaxLevel) || '';
-        } else {
-          // Reset toc
-          this.compiler.subSidebar();
-        }
+        var that = this;
+        this.callHook('beforeEach', text, function (text) {
+          var html;
+          var callback = function () {
+            if (opt.updatedAt) {
+              html = formatUpdated(
+                  html,
+                  opt.updatedAt,
+                  this$1.config.formatUpdated
+              );
+            }

-        // Bind event
-        this._bindEventOnRendered(activeEl);
+            that.callHook('afterEach', html, function (hookData) {
+              renderMain.call(that, hookData);
+              next();
+            });
+          };
+
+
+          that._renderTo('.sidebar-nav', that.compiler.sidebar(text, maxLevel));
+          var activeEl = getAndActive(that.router, '.sidebar-nav', true, true);
+          if (loadSidebar && activeEl) {
+            activeEl.parentNode.innerHTML +=
+                that.compiler.subSidebar(subMaxLevel) || '';
+          } else {
+            // Reset toc
+            that.compiler.subSidebar();
+          }
+
+          // Bind event
+          that._bindEventOnRendered(activeEl);
+        });
       };

       Render.prototype._bindEventOnRendered = function _bindEventOnRendered (activeEl) {
@@ -9400,46 +9420,65 @@
       };

       Render.prototype._renderCover = function _renderCover (text, coverOnly) {
+        var that = this;
         var el = getNode('.cover');
-
         toggleClass(
-          getNode('main'),
-          coverOnly ? 'add' : 'remove',
-          'hidden'
+            getNode('main'),
+            coverOnly ? 'add' : 'remove',
+            'hidden'
         );
+
+        toggleClass(el, 'add', 'show');
         if (!text) {
           toggleClass(el, 'remove', 'show');
           return;
         }
+        this.callHook('beforeEach', text, function (text) {
+          var html;
+          var callback = function () {
+            if (opt.updatedAt) {
+              html = formatUpdated(
+                  html,
+                  opt.updatedAt,
+                  this$1.config.formatUpdated
+              );
+            }

-        toggleClass(el, 'add', 'show');
+            that.callHook('afterEach', html, function (hookData) {
+              renderMain.call(that, hookData);
+              next();
+            });
+          };

-        var html = this.coverIsHTML ? text : this.compiler.cover(text);
+          var html = that.coverIsHTML ? text : that.compiler.cover(text);

-        var m = html
-          .trim()
-          .match('<p><img.*?data-origin="(.*?)"[^a]+alt="(.*?)">([^<]*?)</p>$');
+          var 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 {
-            var path = m[1];
+          if (m) {
+            if (m[2] === 'color') {
+              el.style.background = m[1] + (m[3] || '');
+            } else {
+              var path = m[1];

-            toggleClass(el, 'add', 'has-mask');
-            if (!isAbsolutePath(m[1])) {
-              path = getPath(this.router.getBasePath(), m[1]);
+              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);
+          that._renderTo('.cover-main', html);
+        });
+
         sticky();
       };

This issue body was partially generated by patch-package.

[trusktr]

Hi @gigaga, if you make a pull request with the change we can evaluate it. I think it would be nice to be able to hook into any markdown rendering (f.e. also sidebar).

[gigaga]

Hi @trusktr , I completed for sidebar rendering ;)

[ArtuKILL]

Is there a PR for this issue? I can´t find it.

[gigaga]

Is there a PR for this issue? I can´t find it.

No, just this diff file 😉