Ah, I understand now. I had thought the purpose of `embedMaxHeight` was to render the comments in a more native style, minimizing scrolling as much as possible (except in extensive threads, which would still require scrolling). That’s why I set it to 15000px. I’ll reduce it somewhat.
In that case, I believe that `embedMinHeight` may not be functioning as intended. Even with it set to 400px, the embed still has a height of at least 600px, with a small gap remaining at the end.
Hey!
The newly redesigned comment form is vastly superior, particularly within the mobile experience! However, I have identified two minor issues:
Yup! @keegan built it with one as the core use cases, happy you like it. We did only merge it a few hours ago tho, so are are still working on follow ups, like the toolbar breaking width and the send on enter behavior.
I wonder if it wouldn’t be a good idea to display this form directly in the thread (on Discourse) as well. Having the form open is usually much more inviting and user-friendly for a non-technical audience. Maybe it’s worth a test to see if it boosts engagement?
This was indeed a bug, just fixed it at
This was fixed now, please update!
I noticed another issue on your site. I see that you’ve integrated your blog’s darkmode/lightmode system with the new Discourse embed so that changing the blog’s mode automatically changes the embed’s mode. However, while the integration works fine in Firefox and Chrome, it doesn’t work with Safari. I’m guessing that this is a Discourse issue, as not only is the “Allow access” popup relevant only to Safari, but another issue of the scrollbar working incorrectly also affects only Safari.
That all somewhat aside, I’m curious how you got the darkmode/lightmode integration working. I initiated an Automatic dark mode for embedded comments post several years ago, and from that was able to have somebody write a script using postMessage to get the two systems working together. But with Discourse’s new full comment system embed, the script seems to have been broken (with the default oddly being the Discourse theme’s darkmode). So my question is: Did you have a postMessage script written previously, which you updated for Discourse’s new embed system? And if so (and even though you use WordPress and I use Ghost), would you mind sharing your code? Perhaps I could compare your code with what I’ve got to try and get things working with Ghost and with my blog’s darkmode setup.
If both your blog and Discourse use automatic dark mode following system, they will be kept in sync.
We added automatic dark mode to Discourse in Automatic Dark Mode color scheme switching
Yes, but if I understand and recall correctly, that enables Discourse to detect if the operating system is using dark mode, and then adjust itself accordingly. The post I initiated, which was a response to the one you linked to (and which also linked to it), had to do with the toggle/button in a blog that manually switches between light and dark modes of a blog (irrespective of the operating system’s mode). Does that sound right (and in turn make my previous question relevant)?
To be clear, this is the script I had somebody write for usage on my blog, which I guess now needs some adjusting (perhaps it just needs a few classes changed, I’m not sure).
<style>:root.dark{background: #1D2224}</style>
<script>
const discourseUrl = 'https://ff2f.discourse.group';
const clearDarkModeThrottle = () => window.darkThrottled = false;
window.isDark = false;
window.discourseLoaded = false;
window.setDarkMode = state => {
window.isDark = state;
window.darkThrottled = true;
localStorage.setItem('darkmode-enabled', state);
Array.from(document.getElementsByClassName('dm-input')).forEach(element => element.checked = state);
document.documentElement.classList[state ? 'add' : 'remove']('dark');
setTimeout(clearDarkModeThrottle, 250);
window.discourseLoaded && setIframeStyle();
};
let sub = () => {};
if (localStorage.getItem('darkmode-enabled') === "true") {
document.documentElement.classList.add('dark');
// Update elements after domContentLoaded
sub = () => window.setDarkMode(true);
}
document.addEventListener('DOMContentLoaded', () => {
Array.from(document.getElementsByClassName('darkmode-toggle'))
.forEach(element => element.onchange = darkmodeToggled);
function darkmodeToggled() {
const input = this.querySelector('input');
window.darkThrottled ? (input.checked = !input.checked) : window.setDarkMode(input.checked);
}
sub();
sub = null;
});
const handleMessageListener = (event) => {
var origin = event.origin;
if (origin === discourseUrl) {
setIframeStyle();
window.discourseLoaded = true;
}
};
const setIframeStyle = () => {
const iframe = document.getElementById("discourse-embed-frame");
if (iframe && iframe.contentWindow) {
iframe.contentWindow.postMessage(
window.isDark ? "dark" : "light",
discourseUrl
);
}
};
window.addEventListener("message", handleMessageListener);
</script>