Skip to content

Resolve SSR Hydration Issue for Disqus plugin - #1569

Merged
ang-zeyu merged 2 commits into
MarkBind:masterfrom
wxwxwxwx9:fix-disqus-hydration-issue
Jun 6, 2021
Merged

Resolve SSR Hydration Issue for Disqus plugin#1569
ang-zeyu merged 2 commits into
MarkBind:masterfrom
wxwxwxwx9:fix-disqus-hydration-issue

Conversation

@wxwxwxwx9

@wxwxwxwx9wxwxwxwx9 commented May 30, 2021

Copy link
Copy Markdown
Contributor

What is the purpose of this pull request?

  • Documentation update
  • Bug fix
  • Feature addition or enhancement
  • Code maintenance
  • Others, please explain:

The hydration issue that Disqus plugin has is discovered in #1565. This PR will address the discovered hydration issue for Disqus plugin.

Overview of changes:
Processed <disqus> HTML element to be added with v-pre in NodeProcessor.

Anything you'd like to highlight / discuss:

  • Whether my approach will cause issues that I did not consider
  • Whether there is potentially other unknown HTML elements that can cause hydration issues.

Testing instructions:
Use Disqus plugin and insert <disqus/> HTML element in the page. Afterwards, serve the page by markbind serve -d. There should not be any warnings of hydration issue in the developer console.

Proposed commit message: (wrap lines at 72 characters)
Resolve SSR Hydration Issue for Disqus plugin.

<disqus> HTML tag is an unknown element to Vue as it is neither
a registered Vue component nor an official HTML element. This causes
hydration issue in our SSR setup whenever the Disqus plugin is used.

Let's add v-pre tag to <disqus> HTML tag so that Vue will ignore
the tag when compiling/rendering, thus resolving hydration issue.

Checklist: ☑️

  • Updated the documentation for feature additions and enhancements
  • Added tests for bug fixes or features
  • Linked all related issues
  • No blatantly unrelated changes
  • Pinged someone for a review!

@wxwxwxwx9
wxwxwxwx9 requested a review from ang-zeyuMay 30, 2021 13:11
ang-zeyu
ang-zeyu reviewed May 30, 2021
View reviewed changes
Comment threadpackages/core/src/html/NodeProcessor.js Outdated
case 'style':
processScriptAndStyleTag(node, this.userScriptsAndStyles);
break;
case 'disqus':

@ang-zeyuang-zeyuMay 30, 2021

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks! How about just renaming the tag? So this fix lives strictly in the plugin

@wxwxwxwx9wxwxwxwx9Jun 5, 2021

Copy link
Copy Markdown
ContributorAuthor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@ang-zeyu Thanks for the suggestion! We should really avoid unnecessary coupling. I've made the changes to avoid the coupling.

Regarding "renaming the tag", I'm not sure if we are thinking of the same thing. Let me know if you actually had another idea in mind!

@wxwxwxwx9
wxwxwxwx9force-pushed the fix-disqus-hydration-issue branch from c0b83d5 to bbb1a41CompareJune 5, 2021 11:31
@wxwxwxwx9
wxwxwxwx9force-pushed the fix-disqus-hydration-issue branch from 39cac78 to d2b74d6CompareJune 6, 2021 05:32
ang-zeyu
ang-zeyu approved these changes Jun 6, 2021
View reviewed changes

@ang-zeyuang-zeyu left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Lgtm!

@ang-zeyu
ang-zeyu merged commit 0565e95 into MarkBind:masterJun 6, 2021
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@ang-zeyuang-zeyuang-zeyu approved these changes

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

2 participants

@wxwxwxwx9@ang-zeyu
, 'i'); if (__m === '*' || __re.test(location.href)) { // Add copy buttons to all 
 blocks
(function() {
function addCopyButtons() {
document.querySelectorAll('pre code').forEach(function(codeBlock) {
if (codeBlock.parentElement.hasAttribute('data-copy-added')) return;
codeBlock.parentElement.setAttribute('data-copy-added', 'true');
var btn = document.createElement('button');
btn.textContent = 'Copy';
btn.style.cssText = 'position:absolute;top:4px;right:4px;padding:2px 8px;font-size:11px;background:#4ecdc4;border:none;border-radius:4px;color:#1a1a2e;cursor:pointer;opacity:0.7;transition:opacity 0.2s;';
btn.onmouseover = function() { this.style.opacity = '1'; };
btn.onmouseout = function() { this.style.opacity = '0.7'; };
btn.onclick = function() {
navigator.clipboard.writeText(codeBlock.textContent).then(function() {
btn.textContent = 'Copied!';
setTimeout(function() { btn.textContent = 'Copy'; }, 1500);
});
};
codeBlock.parentElement.style.position = 'relative';
codeBlock.parentElement.appendChild(btn);
});
}
addCopyButtons();
// Re-run on dynamic content
var observer = new MutationObserver(addCopyButtons);
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:Add Copy Buttons to Code Blocks]', __e); }
})();
(function(){
try {
var __m = "github.com";
var __re = new RegExp('^' + "github\\.com" + '
Resolve SSR Hydration Issue for Disqus plugin by wxwxwxwx9 · Pull Request #1569 · MarkBind/markbind · GitHub
Skip to content
Resolve SSR Hydration Issue for Disqus plugin - #1569
Merged
ang-zeyu merged 2 commits into
MarkBind:masterfrom 
wxwxwxwx9:fix-disqus-hydration-issue
Jun 6, 2021
Merged
Resolve SSR Hydration Issue for Disqus plugin#1569
ang-zeyu merged 2 commits into
MarkBind:masterfrom 
wxwxwxwx9:fix-disqus-hydration-issue
Conversation
@wxwxwxwx9
@wxwxwxwx9wxwxwxwx9
commented
May 30, 2021

Copy link


Copy Markdown

Contributor
What is the purpose of this pull request?
  •  Documentation update
  •  Bug fix
  •  Feature addition or enhancement
  •  Code maintenance
  •  Others, please explain:
The hydration issue that Disqus plugin has is discovered in #1565. This PR will address the discovered hydration issue for Disqus plugin.
Overview of changes:

Processed <disqus> HTML element to be added with v-pre in NodeProcessor.
Anything you'd like to highlight / discuss:
  • Whether my approach will cause issues that I did not consider
  • Whether there is potentially other unknown HTML elements that can cause hydration issues.
Testing instructions:

Use Disqus plugin and insert <disqus/> HTML element in the page. Afterwards, serve the page by markbind serve -d. There should not be any warnings of hydration issue in the developer console.
Proposed commit message: (wrap lines at 72 characters)

Resolve SSR Hydration Issue for Disqus plugin.
<disqus> HTML tag is an unknown element to Vue as it is neither

a registered Vue component nor an official HTML element. This causes

hydration issue in our SSR setup whenever the Disqus plugin is used.
Let's add v-pre tag to <disqus> HTML tag so that Vue will ignore

the tag when compiling/rendering, thus resolving hydration issue.
Checklist: ☑️
  •  Updated the documentation for feature additions and enhancements
  •  Added tests for bug fixes or features
  •  Linked all related issues
  •  No blatantly unrelated changes
  •  Pinged someone for a review!
@wxwxwxwx9
wxwxwxwx9
requested a review
from ang-zeyuMay 30, 2021 13:11
ang-zeyu
ang-zeyu
reviewed
May 30, 2021
View reviewed changes
Comment threadpackages/core/src/html/NodeProcessor.js
Outdated

 case 'style':
 processScriptAndStyleTag(node, this.userScriptsAndStyles);
 break;
 case 'disqus':
@ang-zeyuang-zeyuMay 30, 2021

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks! How about just renaming the tag? So this fix lives strictly in the plugin
@wxwxwxwx9wxwxwxwx9Jun 5, 2021

Copy link


Copy Markdown

ContributorAuthor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@ang-zeyu Thanks for the suggestion! We should really avoid unnecessary coupling. I've made the changes to avoid the coupling.
Regarding "renaming the tag", I'm not sure if we are thinking of the same thing. Let me know if you actually had another idea in mind!
@wxwxwxwx9
wxwxwxwx9force-pushed
the
fix-disqus-hydration-issue
branch
from
c0b83d5 to
bbb1a41CompareJune 5, 2021 11:31
@wxwxwxwx9
wxwxwxwx9force-pushed
the
fix-disqus-hydration-issue
branch
from
39cac78 to
d2b74d6CompareJune 6, 2021 05:32
ang-zeyu
ang-zeyu
approved these changes
Jun 6, 2021
View reviewed changes
@ang-zeyuang-zeyu
left a comment


Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Lgtm!
@ang-zeyu
ang-zeyu
merged commit 0565e95
into
MarkBind:masterJun 6, 2021
Sign up for freeto join this conversation on GitHub.
Already have an account?
Sign in to comment

Reviewers

@ang-zeyuang-zeyuang-zeyu approved these changes

Assignees


No one assigned


Labels


None yet


Projects


None yet


Milestone


No milestone


Development

Successfully merging this pull request may close these issues.

2 participants

@wxwxwxwx9@ang-zeyu

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Force GitHub README to respect dark mode
(function() {
var style = document.createElement('style');
style.textContent = '
.markdown-body {
color-scheme: dark light;
}
.markdown-body pre { background: #161b22 !important; }
.markdown-body code { background: rgba(110, 118, 129, 0.4) !important; }
.markdown-body table th, .markdown-body table td { border-color: #30363d !important; }
.markdown-body img { background: #0d1117; }
.markdown-body blockquote { border-left-color: #8b949e; }
.markdown-body hr { border-color: #30363d; }
';
document.head.appendChild(style);
})();
}
} catch(__e) { console.warn('[Userscript:GitHub Dark Mode README Fix]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '
Resolve SSR Hydration Issue for Disqus plugin by wxwxwxwx9 · Pull Request #1569 · MarkBind/markbind · GitHub
Skip to content
Resolve SSR Hydration Issue for Disqus plugin - #1569
Merged
ang-zeyu merged 2 commits into
MarkBind:masterfrom 
wxwxwxwx9:fix-disqus-hydration-issue
Jun 6, 2021
Merged
Resolve SSR Hydration Issue for Disqus plugin#1569
ang-zeyu merged 2 commits into
MarkBind:masterfrom 
wxwxwxwx9:fix-disqus-hydration-issue
Conversation
@wxwxwxwx9
@wxwxwxwx9wxwxwxwx9
commented
May 30, 2021

Copy link


Copy Markdown

Contributor
What is the purpose of this pull request?
  •  Documentation update
  •  Bug fix
  •  Feature addition or enhancement
  •  Code maintenance
  •  Others, please explain:
The hydration issue that Disqus plugin has is discovered in #1565. This PR will address the discovered hydration issue for Disqus plugin.
Overview of changes:

Processed <disqus> HTML element to be added with v-pre in NodeProcessor.
Anything you'd like to highlight / discuss:
  • Whether my approach will cause issues that I did not consider
  • Whether there is potentially other unknown HTML elements that can cause hydration issues.
Testing instructions:

Use Disqus plugin and insert <disqus/> HTML element in the page. Afterwards, serve the page by markbind serve -d. There should not be any warnings of hydration issue in the developer console.
Proposed commit message: (wrap lines at 72 characters)

Resolve SSR Hydration Issue for Disqus plugin.
<disqus> HTML tag is an unknown element to Vue as it is neither

a registered Vue component nor an official HTML element. This causes

hydration issue in our SSR setup whenever the Disqus plugin is used.
Let's add v-pre tag to <disqus> HTML tag so that Vue will ignore

the tag when compiling/rendering, thus resolving hydration issue.
Checklist: ☑️
  •  Updated the documentation for feature additions and enhancements
  •  Added tests for bug fixes or features
  •  Linked all related issues
  •  No blatantly unrelated changes
  •  Pinged someone for a review!
@wxwxwxwx9
wxwxwxwx9
requested a review
from ang-zeyuMay 30, 2021 13:11
ang-zeyu
ang-zeyu
reviewed
May 30, 2021
View reviewed changes
Comment threadpackages/core/src/html/NodeProcessor.js
Outdated

 case 'style':
 processScriptAndStyleTag(node, this.userScriptsAndStyles);
 break;
 case 'disqus':
@ang-zeyuang-zeyuMay 30, 2021

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks! How about just renaming the tag? So this fix lives strictly in the plugin
@wxwxwxwx9wxwxwxwx9Jun 5, 2021

Copy link


Copy Markdown

ContributorAuthor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@ang-zeyu Thanks for the suggestion! We should really avoid unnecessary coupling. I've made the changes to avoid the coupling.
Regarding "renaming the tag", I'm not sure if we are thinking of the same thing. Let me know if you actually had another idea in mind!
@wxwxwxwx9
wxwxwxwx9force-pushed
the
fix-disqus-hydration-issue
branch
from
c0b83d5 to
bbb1a41CompareJune 5, 2021 11:31
@wxwxwxwx9
wxwxwxwx9force-pushed
the
fix-disqus-hydration-issue
branch
from
39cac78 to
d2b74d6CompareJune 6, 2021 05:32
ang-zeyu
ang-zeyu
approved these changes
Jun 6, 2021
View reviewed changes
@ang-zeyuang-zeyu
left a comment


Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Lgtm!
@ang-zeyu
ang-zeyu
merged commit 0565e95
into
MarkBind:masterJun 6, 2021
Sign up for freeto join this conversation on GitHub.
Already have an account?
Sign in to comment

Reviewers

@ang-zeyuang-zeyuang-zeyu approved these changes

Assignees


No one assigned


Labels


None yet


Projects


None yet


Milestone


No milestone


Development

Successfully merging this pull request may close these issues.

2 participants

@wxwxwxwx9@ang-zeyu

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Highlight search terms from Google/DuckDuckGo/Bing referrer
(function() {
var ref = document.referrer;
var terms = [];
if (ref.includes('google.com') || ref.includes('duckduckgo.com') || ref.includes('bing.com')) {
var url = new URL(ref);
var q = url.searchParams.get('q') || url.searchParams.get('p');
if (q) {
terms = q.split(/\s+/).filter(function(t) { return t.length > 2; });
}
}
if (terms.length === 0) return;
var style = document.createElement('style');
style.textContent = '.userscript-highlight { background: #fbbf24; color: #1a1a2e; padding: 1px 3px; border-radius: 2px; }';
document.head.appendChild(style);
function highlight(node) {
if (node.nodeType === 3) { // text node
var text = node.textContent;
var found = false;
terms.forEach(function(term) {
var regex = new RegExp('(' + term.replace(/[.*+?^${}()|[\]\\]/g, '\\') + ')', 'gi');
if (regex.test(text)) {
found = true;
var frag = document.createDocumentFragment();
var parts = text.split(regex);
parts.forEach(function(part, i) {
if (i % 2 === 0) {
frag.appendChild(document.createTextNode(part));
} else {
var span = document.createElement('span');
span.className = 'userscript-highlight';
span.textContent = part;
frag.appendChild(span);
}
});
node.parentNode.replaceChild(frag, node);
}
});
} else if (node.nodeType === 1 && node.childNodes) { // element
var skipTags = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEXTAREA', 'INPUT', 'SELECT'];
if (!skipTags.includes(node.tagName)) {
Array.from(node.childNodes).forEach(highlight);
}
}
}
highlight(document.body);
// Re-highlight on dynamic content
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(m) {
m.addedNodes.forEach(function(node) {
if (node.nodeType === 1 || node.nodeType === 3) highlight(node);
});
});
});
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:Highlight Search Terms]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '
Resolve SSR Hydration Issue for Disqus plugin by wxwxwxwx9 · Pull Request #1569 · MarkBind/markbind · GitHub
Skip to content
Resolve SSR Hydration Issue for Disqus plugin - #1569
Merged
ang-zeyu merged 2 commits into
MarkBind:masterfrom 
wxwxwxwx9:fix-disqus-hydration-issue
Jun 6, 2021
Merged
Resolve SSR Hydration Issue for Disqus plugin#1569
ang-zeyu merged 2 commits into
MarkBind:masterfrom 
wxwxwxwx9:fix-disqus-hydration-issue
Conversation
@wxwxwxwx9
@wxwxwxwx9wxwxwxwx9
commented
May 30, 2021

Copy link


Copy Markdown

Contributor
What is the purpose of this pull request?
  •  Documentation update
  •  Bug fix
  •  Feature addition or enhancement
  •  Code maintenance
  •  Others, please explain:
The hydration issue that Disqus plugin has is discovered in #1565. This PR will address the discovered hydration issue for Disqus plugin.
Overview of changes:

Processed <disqus> HTML element to be added with v-pre in NodeProcessor.
Anything you'd like to highlight / discuss:
  • Whether my approach will cause issues that I did not consider
  • Whether there is potentially other unknown HTML elements that can cause hydration issues.
Testing instructions:

Use Disqus plugin and insert <disqus/> HTML element in the page. Afterwards, serve the page by markbind serve -d. There should not be any warnings of hydration issue in the developer console.
Proposed commit message: (wrap lines at 72 characters)

Resolve SSR Hydration Issue for Disqus plugin.
<disqus> HTML tag is an unknown element to Vue as it is neither

a registered Vue component nor an official HTML element. This causes

hydration issue in our SSR setup whenever the Disqus plugin is used.
Let's add v-pre tag to <disqus> HTML tag so that Vue will ignore

the tag when compiling/rendering, thus resolving hydration issue.
Checklist: ☑️
  •  Updated the documentation for feature additions and enhancements
  •  Added tests for bug fixes or features
  •  Linked all related issues
  •  No blatantly unrelated changes
  •  Pinged someone for a review!
@wxwxwxwx9
wxwxwxwx9
requested a review
from ang-zeyuMay 30, 2021 13:11
ang-zeyu
ang-zeyu
reviewed
May 30, 2021
View reviewed changes
Comment threadpackages/core/src/html/NodeProcessor.js
Outdated

 case 'style':
 processScriptAndStyleTag(node, this.userScriptsAndStyles);
 break;
 case 'disqus':
@ang-zeyuang-zeyuMay 30, 2021

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks! How about just renaming the tag? So this fix lives strictly in the plugin
@wxwxwxwx9wxwxwxwx9Jun 5, 2021

Copy link


Copy Markdown

ContributorAuthor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@ang-zeyu Thanks for the suggestion! We should really avoid unnecessary coupling. I've made the changes to avoid the coupling.
Regarding "renaming the tag", I'm not sure if we are thinking of the same thing. Let me know if you actually had another idea in mind!
@wxwxwxwx9
wxwxwxwx9force-pushed
the
fix-disqus-hydration-issue
branch
from
c0b83d5 to
bbb1a41CompareJune 5, 2021 11:31
@wxwxwxwx9
wxwxwxwx9force-pushed
the
fix-disqus-hydration-issue
branch
from
39cac78 to
d2b74d6CompareJune 6, 2021 05:32
ang-zeyu
ang-zeyu
approved these changes
Jun 6, 2021
View reviewed changes
@ang-zeyuang-zeyu
left a comment


Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Lgtm!
@ang-zeyu
ang-zeyu
merged commit 0565e95
into
MarkBind:masterJun 6, 2021
Sign up for freeto join this conversation on GitHub.
Already have an account?
Sign in to comment

Reviewers

@ang-zeyuang-zeyuang-zeyu approved these changes

Assignees


No one assigned


Labels


None yet


Projects


None yet


Milestone


No milestone


Development

Successfully merging this pull request may close these issues.

2 participants

@wxwxwxwx9@ang-zeyu

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Strip utm_, fbclid, gclid, etc. from all links on page
(function() {
var trackingParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content',
'fbclid', 'gclid', 'dclid', 'msclkid', 'yclid',
'ref', 'ref_src', 'source', 'medium', 'campaign'];
function cleanUrl(url) {
try {
var u = new URL(url, window.location.origin);
var changed = false;
trackingParams.forEach(function(p) {
if (u.searchParams.has(p)) {
u.searchParams.delete(p);
changed = true;
}
});
return changed ? u.toString() : url;
} catch (e) {
return url;
}
}
function cleanLinks() {
document.querySelectorAll('a[href]').forEach(function(a) {
var clean = cleanUrl(a.href);
if (clean !== a.href) a.href = clean;
});
}
cleanLinks();
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(m) {
m.addedNodes.forEach(function(node) {
if (node.nodeType === 1) {
if (node.tagName === 'A') cleanLinks();
node.querySelectorAll('a[href]').forEach(function(a) {
var clean = cleanUrl(a.href);
if (clean !== a.href) a.href = clean;
});
}
});
});
});
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:Remove Tracking Parameters from Links]', __e); }
})();
(function(){
try {
var __m = "youtube.com";
var __re = new RegExp('^' + "youtube\\.com" + '
Resolve SSR Hydration Issue for Disqus plugin by wxwxwxwx9 · Pull Request #1569 · MarkBind/markbind · GitHub
Skip to content
Resolve SSR Hydration Issue for Disqus plugin - #1569
Merged
ang-zeyu merged 2 commits into
MarkBind:masterfrom 
wxwxwxwx9:fix-disqus-hydration-issue
Jun 6, 2021
Merged
Resolve SSR Hydration Issue for Disqus plugin#1569
ang-zeyu merged 2 commits into
MarkBind:masterfrom 
wxwxwxwx9:fix-disqus-hydration-issue
Conversation
@wxwxwxwx9
@wxwxwxwx9wxwxwxwx9
commented
May 30, 2021

Copy link


Copy Markdown

Contributor
What is the purpose of this pull request?
  •  Documentation update
  •  Bug fix
  •  Feature addition or enhancement
  •  Code maintenance
  •  Others, please explain:
The hydration issue that Disqus plugin has is discovered in #1565. This PR will address the discovered hydration issue for Disqus plugin.
Overview of changes:

Processed <disqus> HTML element to be added with v-pre in NodeProcessor.
Anything you'd like to highlight / discuss:
  • Whether my approach will cause issues that I did not consider
  • Whether there is potentially other unknown HTML elements that can cause hydration issues.
Testing instructions:

Use Disqus plugin and insert <disqus/> HTML element in the page. Afterwards, serve the page by markbind serve -d. There should not be any warnings of hydration issue in the developer console.
Proposed commit message: (wrap lines at 72 characters)

Resolve SSR Hydration Issue for Disqus plugin.
<disqus> HTML tag is an unknown element to Vue as it is neither

a registered Vue component nor an official HTML element. This causes

hydration issue in our SSR setup whenever the Disqus plugin is used.
Let's add v-pre tag to <disqus> HTML tag so that Vue will ignore

the tag when compiling/rendering, thus resolving hydration issue.
Checklist: ☑️
  •  Updated the documentation for feature additions and enhancements
  •  Added tests for bug fixes or features
  •  Linked all related issues
  •  No blatantly unrelated changes
  •  Pinged someone for a review!
@wxwxwxwx9
wxwxwxwx9
requested a review
from ang-zeyuMay 30, 2021 13:11
ang-zeyu
ang-zeyu
reviewed
May 30, 2021
View reviewed changes
Comment threadpackages/core/src/html/NodeProcessor.js
Outdated

 case 'style':
 processScriptAndStyleTag(node, this.userScriptsAndStyles);
 break;
 case 'disqus':
@ang-zeyuang-zeyuMay 30, 2021

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks! How about just renaming the tag? So this fix lives strictly in the plugin
@wxwxwxwx9wxwxwxwx9Jun 5, 2021

Copy link


Copy Markdown

ContributorAuthor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@ang-zeyu Thanks for the suggestion! We should really avoid unnecessary coupling. I've made the changes to avoid the coupling.
Regarding "renaming the tag", I'm not sure if we are thinking of the same thing. Let me know if you actually had another idea in mind!
@wxwxwxwx9
wxwxwxwx9force-pushed
the
fix-disqus-hydration-issue
branch
from
c0b83d5 to
bbb1a41CompareJune 5, 2021 11:31
@wxwxwxwx9
wxwxwxwx9force-pushed
the
fix-disqus-hydration-issue
branch
from
39cac78 to
d2b74d6CompareJune 6, 2021 05:32
ang-zeyu
ang-zeyu
approved these changes
Jun 6, 2021
View reviewed changes
@ang-zeyuang-zeyu
left a comment


Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Lgtm!
@ang-zeyu
ang-zeyu
merged commit 0565e95
into
MarkBind:masterJun 6, 2021
Sign up for freeto join this conversation on GitHub.
Already have an account?
Sign in to comment

Reviewers

@ang-zeyuang-zeyuang-zeyu approved these changes

Assignees


No one assigned


Labels


None yet


Projects


None yet


Milestone


No milestone


Development

Successfully merging this pull request may close these issues.

2 participants

@wxwxwxwx9@ang-zeyu

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Auto-enable theater mode on YouTube
(function() {
function tryTheater() {
var btn = document.querySelector('button[aria-label="Theater mode"], ytd-player #player button[title="Theater mode"]');
if (btn && !btn.classList.contains('activated')) {
btn.click();
}
}
// Try immediately
tryTheater();
// Try after navigation (SPA)
var lastUrl = location.href;
setInterval(function() {
if (location.href !== lastUrl) {
lastUrl = location.href;
setTimeout(tryTheater, 500);
}
}, 1000);
// Also try on player load
var observer = new MutationObserver(tryTheater);
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:YouTube Theater Mode Default]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '
Resolve SSR Hydration Issue for Disqus plugin by wxwxwxwx9 · Pull Request #1569 · MarkBind/markbind · GitHub
Skip to content
Resolve SSR Hydration Issue for Disqus plugin - #1569
Merged
ang-zeyu merged 2 commits into
MarkBind:masterfrom 
wxwxwxwx9:fix-disqus-hydration-issue
Jun 6, 2021
Merged
Resolve SSR Hydration Issue for Disqus plugin#1569
ang-zeyu merged 2 commits into
MarkBind:masterfrom 
wxwxwxwx9:fix-disqus-hydration-issue
Conversation
@wxwxwxwx9
@wxwxwxwx9wxwxwxwx9
commented
May 30, 2021

Copy link


Copy Markdown

Contributor
What is the purpose of this pull request?
  •  Documentation update
  •  Bug fix
  •  Feature addition or enhancement
  •  Code maintenance
  •  Others, please explain:
The hydration issue that Disqus plugin has is discovered in #1565. This PR will address the discovered hydration issue for Disqus plugin.
Overview of changes:

Processed <disqus> HTML element to be added with v-pre in NodeProcessor.
Anything you'd like to highlight / discuss:
  • Whether my approach will cause issues that I did not consider
  • Whether there is potentially other unknown HTML elements that can cause hydration issues.
Testing instructions:

Use Disqus plugin and insert <disqus/> HTML element in the page. Afterwards, serve the page by markbind serve -d. There should not be any warnings of hydration issue in the developer console.
Proposed commit message: (wrap lines at 72 characters)

Resolve SSR Hydration Issue for Disqus plugin.
<disqus> HTML tag is an unknown element to Vue as it is neither

a registered Vue component nor an official HTML element. This causes

hydration issue in our SSR setup whenever the Disqus plugin is used.
Let's add v-pre tag to <disqus> HTML tag so that Vue will ignore

the tag when compiling/rendering, thus resolving hydration issue.
Checklist: ☑️
  •  Updated the documentation for feature additions and enhancements
  •  Added tests for bug fixes or features
  •  Linked all related issues
  •  No blatantly unrelated changes
  •  Pinged someone for a review!
@wxwxwxwx9
wxwxwxwx9
requested a review
from ang-zeyuMay 30, 2021 13:11
ang-zeyu
ang-zeyu
reviewed
May 30, 2021
View reviewed changes
Comment threadpackages/core/src/html/NodeProcessor.js
Outdated

 case 'style':
 processScriptAndStyleTag(node, this.userScriptsAndStyles);
 break;
 case 'disqus':
@ang-zeyuang-zeyuMay 30, 2021

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks! How about just renaming the tag? So this fix lives strictly in the plugin
@wxwxwxwx9wxwxwxwx9Jun 5, 2021

Copy link


Copy Markdown

ContributorAuthor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@ang-zeyu Thanks for the suggestion! We should really avoid unnecessary coupling. I've made the changes to avoid the coupling.
Regarding "renaming the tag", I'm not sure if we are thinking of the same thing. Let me know if you actually had another idea in mind!
@wxwxwxwx9
wxwxwxwx9force-pushed
the
fix-disqus-hydration-issue
branch
from
c0b83d5 to
bbb1a41CompareJune 5, 2021 11:31
@wxwxwxwx9
wxwxwxwx9force-pushed
the
fix-disqus-hydration-issue
branch
from
39cac78 to
d2b74d6CompareJune 6, 2021 05:32
ang-zeyu
ang-zeyu
approved these changes
Jun 6, 2021
View reviewed changes
@ang-zeyuang-zeyu
left a comment


Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Lgtm!
@ang-zeyu
ang-zeyu
merged commit 0565e95
into
MarkBind:masterJun 6, 2021
Sign up for freeto join this conversation on GitHub.
Already have an account?
Sign in to comment

Reviewers

@ang-zeyuang-zeyuang-zeyu approved these changes

Assignees


No one assigned


Labels


None yet


Projects


None yet


Milestone


No milestone


Development

Successfully merging this pull request may close these issues.

2 participants

@wxwxwxwx9@ang-zeyu

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Remove or un-stick sticky/fixed headers that block content
(function() {
function unstick() {
document.querySelectorAll('header, nav, [role="banner"], .header, .navbar, .sticky, .fixed-top, [style*="position: fixed"], [style*="position:sticky"]').forEach(function(el) {
if (el.style.position === 'fixed' || el.style.position === 'sticky' || getComputedStyle(el).position === 'fixed' || getComputedStyle(el).position === 'sticky') {
el.style.position = 'static';
el.style.top = 'auto';
el.style.zIndex = 'auto';
}
});
}
unstick();
var observer = new MutationObserver(unstick);
observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] });
})();
}
} catch(__e) { console.warn('[Userscript:Kill Sticky Headers]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '
Resolve SSR Hydration Issue for Disqus plugin by wxwxwxwx9 · Pull Request #1569 · MarkBind/markbind · GitHub
Skip to content
Resolve SSR Hydration Issue for Disqus plugin - #1569
Merged
ang-zeyu merged 2 commits into
MarkBind:masterfrom 
wxwxwxwx9:fix-disqus-hydration-issue
Jun 6, 2021
Merged
Resolve SSR Hydration Issue for Disqus plugin#1569
ang-zeyu merged 2 commits into
MarkBind:masterfrom 
wxwxwxwx9:fix-disqus-hydration-issue
Conversation
@wxwxwxwx9
@wxwxwxwx9wxwxwxwx9
commented
May 30, 2021

Copy link


Copy Markdown

Contributor
What is the purpose of this pull request?
  •  Documentation update
  •  Bug fix
  •  Feature addition or enhancement
  •  Code maintenance
  •  Others, please explain:
The hydration issue that Disqus plugin has is discovered in #1565. This PR will address the discovered hydration issue for Disqus plugin.
Overview of changes:

Processed <disqus> HTML element to be added with v-pre in NodeProcessor.
Anything you'd like to highlight / discuss:
  • Whether my approach will cause issues that I did not consider
  • Whether there is potentially other unknown HTML elements that can cause hydration issues.
Testing instructions:

Use Disqus plugin and insert <disqus/> HTML element in the page. Afterwards, serve the page by markbind serve -d. There should not be any warnings of hydration issue in the developer console.
Proposed commit message: (wrap lines at 72 characters)

Resolve SSR Hydration Issue for Disqus plugin.
<disqus> HTML tag is an unknown element to Vue as it is neither

a registered Vue component nor an official HTML element. This causes

hydration issue in our SSR setup whenever the Disqus plugin is used.
Let's add v-pre tag to <disqus> HTML tag so that Vue will ignore

the tag when compiling/rendering, thus resolving hydration issue.
Checklist: ☑️
  •  Updated the documentation for feature additions and enhancements
  •  Added tests for bug fixes or features
  •  Linked all related issues
  •  No blatantly unrelated changes
  •  Pinged someone for a review!
@wxwxwxwx9
wxwxwxwx9
requested a review
from ang-zeyuMay 30, 2021 13:11
ang-zeyu
ang-zeyu
reviewed
May 30, 2021
View reviewed changes
Comment threadpackages/core/src/html/NodeProcessor.js
Outdated

 case 'style':
 processScriptAndStyleTag(node, this.userScriptsAndStyles);
 break;
 case 'disqus':
@ang-zeyuang-zeyuMay 30, 2021

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks! How about just renaming the tag? So this fix lives strictly in the plugin
@wxwxwxwx9wxwxwxwx9Jun 5, 2021

Copy link


Copy Markdown

ContributorAuthor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@ang-zeyu Thanks for the suggestion! We should really avoid unnecessary coupling. I've made the changes to avoid the coupling.
Regarding "renaming the tag", I'm not sure if we are thinking of the same thing. Let me know if you actually had another idea in mind!
@wxwxwxwx9
wxwxwxwx9force-pushed
the
fix-disqus-hydration-issue
branch
from
c0b83d5 to
bbb1a41CompareJune 5, 2021 11:31
@wxwxwxwx9
wxwxwxwx9force-pushed
the
fix-disqus-hydration-issue
branch
from
39cac78 to
d2b74d6CompareJune 6, 2021 05:32
ang-zeyu
ang-zeyu
approved these changes
Jun 6, 2021
View reviewed changes
@ang-zeyuang-zeyu
left a comment


Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Lgtm!
@ang-zeyu
ang-zeyu
merged commit 0565e95
into
MarkBind:masterJun 6, 2021
Sign up for freeto join this conversation on GitHub.
Already have an account?
Sign in to comment

Reviewers

@ang-zeyuang-zeyuang-zeyu approved these changes

Assignees


No one assigned


Labels


None yet


Projects


None yet


Milestone


No milestone


Development

Successfully merging this pull request may close these issues.

2 participants

@wxwxwxwx9@ang-zeyu

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Universal Dark Mode - works on any site
(function() {
var enabled = true;
function applyDarkMode() {
if (!enabled) return;
// Create style element if it doesn't exist
var style = document.getElementById('universal-dark-mode-style');
if (!style) {
style = document.createElement('style');
style.id = 'universal-dark-mode-style';
document.head.appendChild(style);
}
// Dark mode CSS - inverts colors but preserves images/video
style.textContent = '
/* Invert everything except media */
html {
filter: invert(1) hue-rotate(180deg) !important;
background: #1a1a2e !important;
}
/* Restore images, videos, iframes, canvas */
img, video, iframe, canvas, svg, picture, [style*="background-image"] {
filter: invert(1) hue-rotate(180deg) !important;
}
/* Preserve specific elements that should not be inverted */
.no-dark-mode, .no-dark-mode *,
[data-theme="light"], [data-theme="light"],
.ace_editor, .ace_editor *,
.CodeMirror, .CodeMirror *,
.monaco-editor, .monaco-editor *,
.markdown-body pre, .markdown-body pre *,
.highlight, .highlight *,
pre code, pre code * {
filter: none !important;
}
/* Fix common UI elements */
.modal, .popup, .dropdown-menu, .tooltip, .popover {
filter: invert(1) hue-rotate(180deg) !important;
background: #2d2d44 !important;
border-color: #444 !important;
}
/* Scrollbars */
::-webkit-scrollbar { background: #1a1a2e !important; }
::-webkit-scrollbar-thumb { background: #444 !important; }
::-webkit-scrollbar-thumb:hover { background: #555 !important; }
/* Selection */
::selection { background: #4ecdc4 !important; color: #1a1a2e !important; }
::-moz-selection { background: #4ecdc4 !important; color: #1a1a2e !important; }
';
}
function removeDarkMode() {
var style = document.getElementById('universal-dark-mode-style');
if (style) style.remove();
}
// Toggle with Alt+Shift+D
document.addEventListener('keydown', function(e) {
if (e.altKey && e.shiftKey && e.key === 'D') {
e.preventDefault();
enabled = !enabled;
if (enabled) {
applyDarkMode();
console.log('[Universal Dark Mode] Enabled');
} else {
removeDarkMode();
console.log('[Universal Dark Mode] Disabled');
}
}
});
// Apply on load
applyDarkMode();
// Re-apply on dynamic content
var observer = new MutationObserver(function(mutations) {
if (enabled && !document.getElementById('universal-dark-mode-style')) {
applyDarkMode();
}
});
observer.observe(document.head, { childList: true });
console.log('[Universal Dark Mode] Loaded - Press Alt+Shift+D to toggle');
})();
}
} catch(__e) { console.warn('[Userscript:Universal Dark Mode]', __e); }
})();
})();
Resolve SSR Hydration Issue for Disqus plugin by wxwxwxwx9 · Pull Request #1569 · MarkBind/markbind · GitHub
Skip to content
Resolve SSR Hydration Issue for Disqus plugin - #1569
Merged
ang-zeyu merged 2 commits into
MarkBind:masterfrom 
wxwxwxwx9:fix-disqus-hydration-issue
Jun 6, 2021
Merged
Resolve SSR Hydration Issue for Disqus plugin#1569
ang-zeyu merged 2 commits into
MarkBind:masterfrom 
wxwxwxwx9:fix-disqus-hydration-issue
Conversation
@wxwxwxwx9
@wxwxwxwx9wxwxwxwx9
commented
May 30, 2021

Copy link


Copy Markdown

Contributor
What is the purpose of this pull request?
  •  Documentation update
  •  Bug fix
  •  Feature addition or enhancement
  •  Code maintenance
  •  Others, please explain:
The hydration issue that Disqus plugin has is discovered in #1565. This PR will address the discovered hydration issue for Disqus plugin.
Overview of changes:

Processed <disqus> HTML element to be added with v-pre in NodeProcessor.
Anything you'd like to highlight / discuss:
  • Whether my approach will cause issues that I did not consider
  • Whether there is potentially other unknown HTML elements that can cause hydration issues.
Testing instructions:

Use Disqus plugin and insert <disqus/> HTML element in the page. Afterwards, serve the page by markbind serve -d. There should not be any warnings of hydration issue in the developer console.
Proposed commit message: (wrap lines at 72 characters)

Resolve SSR Hydration Issue for Disqus plugin.
<disqus> HTML tag is an unknown element to Vue as it is neither

a registered Vue component nor an official HTML element. This causes

hydration issue in our SSR setup whenever the Disqus plugin is used.
Let's add v-pre tag to <disqus> HTML tag so that Vue will ignore

the tag when compiling/rendering, thus resolving hydration issue.
Checklist: ☑️
  •  Updated the documentation for feature additions and enhancements
  •  Added tests for bug fixes or features
  •  Linked all related issues
  •  No blatantly unrelated changes
  •  Pinged someone for a review!
@wxwxwxwx9
wxwxwxwx9
requested a review
from ang-zeyuMay 30, 2021 13:11
ang-zeyu
ang-zeyu
reviewed
May 30, 2021
View reviewed changes
Comment threadpackages/core/src/html/NodeProcessor.js
Outdated

 case 'style':
 processScriptAndStyleTag(node, this.userScriptsAndStyles);
 break;
 case 'disqus':
@ang-zeyuang-zeyuMay 30, 2021

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks! How about just renaming the tag? So this fix lives strictly in the plugin
@wxwxwxwx9wxwxwxwx9Jun 5, 2021

Copy link


Copy Markdown

ContributorAuthor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@ang-zeyu Thanks for the suggestion! We should really avoid unnecessary coupling. I've made the changes to avoid the coupling.
Regarding "renaming the tag", I'm not sure if we are thinking of the same thing. Let me know if you actually had another idea in mind!
@wxwxwxwx9
wxwxwxwx9force-pushed
the
fix-disqus-hydration-issue
branch
from
c0b83d5 to
bbb1a41CompareJune 5, 2021 11:31
@wxwxwxwx9
wxwxwxwx9force-pushed
the
fix-disqus-hydration-issue
branch
from
39cac78 to
d2b74d6CompareJune 6, 2021 05:32
ang-zeyu
ang-zeyu
approved these changes
Jun 6, 2021
View reviewed changes
@ang-zeyuang-zeyu
left a comment


Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Lgtm!
@ang-zeyu
ang-zeyu
merged commit 0565e95
into
MarkBind:masterJun 6, 2021
Sign up for freeto join this conversation on GitHub.
Already have an account?
Sign in to comment

Reviewers

@ang-zeyuang-zeyuang-zeyu approved these changes

Assignees


No one assigned


Labels


None yet


Projects


None yet


Milestone


No milestone


Development

Successfully merging this pull request may close these issues.

2 participants

@wxwxwxwx9@ang-zeyu