Landing Pages Blog 🛩

Using the latest stable version of Discourse (3.2.x) plus the updated version of the Landing Pages components (plugin, blog pages and blog theme) I was only able to reproduce the image background and the post container size issues. I will make a small update in the theme once I can, but they’re easily fixable if you want to do it in your fork.

Using the default settings in a clean install, the Posts/Subscribe buttons are at the bottom of the page and both functional, the paths in the mobile version behave the same as in the desktop and I cannot verify any issues with the post dates, except for the “last update” that changes once you set the blog category (all posts in that category receive a “blog post” tag).

The hamburger menu in the mobile version will be empty as long as you don’t have anything configured in the “Menu” settings of the landing pages configuration. I might update the code to completely hide it in that situation to simplify the interface.

Just reached your blog and could quickly debug a few things:

  • Regarding the button not working, it seems that you have some strict Content-Security Policy settings enabled and the required scripts are not being loaded.

  • Regarding the links, I just accessed your site using Firefox on an Android phone and had no issues whatsoever. Maybe another particular configuration from your browser or Discourse installation?

  • Regarding the CSS fixes there are many options. For example, for the background image you can set background: no-repeat center/cover fixed; in the .title-container class inside common.scss, and for the “small container” in posts you can add min-width: 100%; to the .post-content class inside the same file.

  • Regarding the menu setting, currently the only way to add one is on the global pages.json file as mentioned in the documentation but there’s not a lot of information on this regard. You can however see an example in the pavilion-landing-pages repository.

Hey! So, on that video you screen-recorded, the direct URLs work fine. But if I go to the home blog page and then click the blog title, it gives a page not found error. Direct URLs work fine, but no one would have those on-hand and obviously isn’t viable.

I will try those CSS fixes real quick and edit this or reply again with my findings, thank you!

Veryyyy interesting find on the Content-Security Policy thing…I don’t even have recollection of me doing anything with that. Hmmm. How would I fix that?

EDIT: Fixed Subscribe button by disabling content security policy in settings. But is there a way to keep this enabled but have the button still work? Maybe have the button work differently so that it doesn’t trigger that?

No idea on the CSP settings, sorry on that side. On the video, around 26s-27s I do exactly that (click on the blog title from the home blog) and still worked fine, so not sure how to further test that from my end.

Edited my above post to say: “Fixed Subscribe button by disabling content security policy in settings. But is there a way to keep this enabled but have the button still work? Maybe have the button work differently so that it doesn’t trigger that?”

And oh, my fault! Hm, that’s really weird then. I’ve tried multiple browsers & even a few phones and the same issue…

Btw, is there a way to make the subscribe button/text bigger to match the size of the “Posts” icon that floats on the screen on mobile? The icon is proper size when signed into an account but not when not signed out, as a guest, which you can see in your video.

Besides that, my only other thing really is making the profile photo/author name, date, and “Forum Topic” area horizontal on mobile since it looks bad stacked vertically like this (or at least the date & Topic area next to each other, centered under the profile photo or something)…

Oh, and your CSS codes worked! Thanks a ton.

In addition to my above reply, @cabidop, my partner thoroughly went through the blog page/theme stuff for a couple hours, because I wanted a non-techy general person’s thoughts on the default setup. Figured I’d mention them here if you wanted to incorporate any of them into the blog stuff:

-When signed out, have the Subscribe button on the Blog landing page take you back to the Blog landing page after a user clicks Subscribe and makes an account on the site.

  • I personally didn’t even realize it worked like that, but if a guest hits Subscribe, it brings them to the forum Register page and then when they make an account, they’re left wondering where the Blog page even is now since it keeps you on the Forums. However, when they now go back to the Blog landing page while signed IN, they aren’t even subscribed and have to hit the button again while now logged in.

-Get a confirmation e-mail that you actually did Subscribe.

  • As it is now, there’s no actual confirmation that you truly did subscribe via e-mail, just the small pop-up on the Subscribe pop-up box.

-Once Subscribed, remove the button entirely while signed in, or have it now say “Subscribed,” not still “Subscribe” on Desktop. In addition, have the buttons not stay floated on the screen while scrolling AKA disappear while scrolling.

-The big header photo on the Blog posts page doesn’t transfer over on mobile. It barely shows it or doesn’t show it at all sometimes (photos below showing Desktop VS mobile for this):

I feel like these changes would be really great even just for out-of-the-box default setups.

Thanks for the feedback, @45thj5ej, I might implement some of the suggestions as defaults in the future. Not sure if you have already solved the CSP issue, but looks like there is a content security policy script src option that could work for your case without fully disabling the feature (not completely sure about this though).

Regarding the theme not working in other pages, that’s the expected behaviour due to the usage of the .blog and .blog-post classes in the styles. Each landing page adds its own slug as a HTML class to its body, so as long as the CSS styles are only applied to those classes they’ll only affect the “Blog” and “Blog Post” pages respectively.

As for the rest of the comments/issues I’d just reiterate what I mentioned in the other topic about being specific to your use case, as they’re more general CSS questions rather than actual problems in the component. Said that, I might take a look to them eventually (but don’t take it for granted).

1 Like

Hey, kind of a dire thing…
I setup my Nginx to redirect mysite.com to https://forums.mysite.com/home and setup the DNS A record from my domain provider (since I want this to be the main page of my site).

I noticed something strange. If I access a blog post from the redirect (aka, anyone going to my site would have this happen), it adds a second /home to the URL. However, if I access the blog home page from the direct URL, https://forums.mysite.com/home, then it doesn’t do that.

Any way to fix this as soon as possible, or if you tell me how, I can do it. This is separate from the similar issue when this was happening on mobile-only the other day. And, of course, the link shows doubled when hovering over it on the blog home page, like:
https://forums.mysite.com/home/home/blog-test-one-million

But again, if accessing the URL directly, not from the redirect, it works fine.

Can you verify if the “double path” issue happens only with the blog page, with any landing page or with any Discourse page (e.g. /latest)?

Only the blog home/landing page, where you go to click on blog post titles.

.

EDIT: IGNORE THE BELOW. THE FIX WAS:
Commenting out the one line below in common.scss in
the blog theme, at around line 172ish:

body.blog {
/*   padding-top: 8em; */

Also, how do I edit the header of the site? It seems no matter what, the header is always put there and I can’t edit it at all. The top navbar/menu/logo area.

Example: I made a custom header to make the default one shorter. And even using

.landing-header {
display:none
}

still makes a big gap at the top. How can I remove that gap?