Rendering landing pages inside ember layout

[rsmithlal]

@angus thanks for suggesting to open a new thread in the topic below.

https://meta.discourse.org/t/landing-pages-plugin/180967/29?u=rsmithlal

One specific use case that I’m hoping to solve is for a “/join” page that outlines different ways that people can become a member of our organization. I’m using the Discourse subscriptions plugin to handle recurring stripe subscriptions, but there are other ways for people to become a member by alternative contributions such as by becoming a mentor and sharing their skills or other non-financial contributions. I’d like to create a page that explains this to both unauthenticated and authenticated users.

This informational page should be visible and accessible in the landing pages nav for people who have not yet registered and logged in, but it should also be accessible from the main app layout for authenticated users.

I’m using the custom nav items theme component to render nav items in the main app header. Right now when I click on one of the nav items that link to a landing page it fails. The ember app doesn’t recognize the path, and when navigating to the url directly in the address bar the page renders inside the landing pages layout (as expected, but not ideal).

[angus]

Apologies for the delay in responding here.

There’s a few ways to handle this.

Use a standard (non-ember-routed) link

The reason the ember app is not “recognising” the route is because Discourse actually intercepts all href clicks and forces them through it’s own special handling. See

• Interceptor
• Handling

If you look at that handler you’ll notice there are a number of exceptions. One of them is if the element has the class raw-link.

This brings us to the method of adding that extra nav item. Rather than using the custom nav items theme component, as you’re a developer I’d suggest you use a plugin connector, in your own theme. This approach will help you overcome this issue, and also give you more flexibility.

Plugin connector

The plugin outlet to use for nav items is extra-nav-item. This is what your theme folder structure would look like

(“my-nav-item” can be whatever you’d like. It’ll be applied as the classname to the li nav element)

The .hbs file just needs to contain an anchor element with the raw-link class, e.g.

<a href="/welcome" class="raw-link">Welcome</a>

If you add the nav ittem this way, the user will be directed to your landing page via the browser routing (i.e. rather than via ember).

Use a header link instead

For a join landing page like this, I’d actually recommend you consider putting it in the site header, rather than as an additional nav link. The other nav links are all topic lists. I know the subscriptions plugin puts a “Subscribe” link in that list, however that is, in my opinion, not the best UX, as it breaks with the standard behaviour for that control set.

We’re going to be using the subscriptions plugin ourselves in the near future to run PRO Discourse plugin subcriptions, and I’ll be removing that nav link and putting our subscribe button in our site header instead.

Moreover, if you have the link in your header you’ll be able to maintain some consistency between the landing page and the discourse app, but adding the same links to the landing page header as well. The landing page header won’t have the user avatar and notifications, however you can make it feel like part of the same overall site.

How to add a link to the header

Like with the nav items, the best way to add your own link to the header is by using the plugin api yourself, e.g.

// decorate home-logo:after for the left, or header-buttons:before for the right
api.decorateWidget("home-logo:after", (helper) => {
   return helper.h("ul.custom-header-links", h(
      'li.raw-link',
      h("a", { attributes: { href: '/welcome' } }, "Welcome")
   ));
});

If you’re not comfortable with that you can use the Custom Header Links TC, but it’s essentially just doing the same thing.