Using the new custom-homepage feature

[manuel (Manuel Kostka)]

@pmusaraj

Yeah, that can be tricky. In my local test just now, /custom there doesn’t work properly. It’s better to use /, that routes correctly. But it still doesn’t highlight.

That seems to be a common issue. If I use /it also doesn’t highlight other routes set as the landing page.

@pmusaraj

I may be hanging on to this custom-homepage outlet with a message for admins for not much good reason, to be honest. That warning is not all that useful…

Yes, I could also imagine the warning just being displayed differently. The main advantage of wrapper outlets seems to be that I can conditionally yield core code or render custom one. But that would likely never be a case for that info message.

@pmusaraj

I see your issue more clearly after having a quick look at the Featured Lists component. One option is to refactor that component and have it output all of the lists into one Ember component. Then you could add that component to a plugin wrapper outlet.

There must be a misunderstanding. The component already wraps all lists in one wrapping component and renders it on any given outlet:

So I can add the component without issues to the current wrapper outlet on the custom homepage.
What I can’t do is use that outlet to render more than one standalone component on the custom homepage. Components I would have installed as theme components, like these three:

My assumption is that making such use of several standalone theme components to build a custom homepage would be the common approach. Rather than building it all from scratch in one theme.

@pmusaraj

Another option is to add a second plugin outlet to the custom homepage template, something like <PluginOutlet @name="below-custom-homepage"/>.

If you consider adding another outlet or changing the outlet setup, I could give some more feedback from using it so far. Though I’ll wrap that rabbit hole in details

So I realized that the outlet is rendered within the main-outlet element. The overall structure of these elements then is:

• main-outlet wrapper
  • sidebar-wrapper
  • main-outlet
    • custom-homepage outlet

As a designer I’m actually not that flexible arranging items on a custom homepage using this outlet. For the design shared above I rather used the before-main-outlet outlet, not only because I can put more than one component, but also because it doesn’t nest components within the main-outlet element.

The structure as shared on the screenshot above looks like this:

• main-outlet wrapper
  • sidebar-wrapper
  • component: search banner
  • component: featured topics
  • component: featured lists
  • main-outlet

The advantage is that I can arrange elements across the width of the entire main-outlet wrapper and not just within the main-outlet element. To illustrate the point, if I’d render one of the components on the current custom-homepage outlet, it would render nested within the main-outlet element like this:

The most flexibility for custom designs in my view would be offered by a plugin outlet that is placed

• as a direct child of the main-outlet wrapper (similar to the before-main-outlet outlet)
• within a wrapping div

That wrapping div would bundle all components added to it and allow for easy ordering. Such a structure would then look like:

• main-outlet wrapper
  • sidebar-wrapper
  • custom-homepage-wrapper
    • component: search banner
    • component: featured topics
    • component: featured lists
  • main-outlet

So that’s my feedback as a designer. Guess it’s for you to decide how much that aligns with what you’d consider a common application for the custom homepage feature.