Plugin outlet locations theme component

Continuing the discussion from Plugin Outlet Locations:

I needed an updated version with all the plugin outlets that have been added recently and then I realised that it would be really easy to create a theme component for this, so there is no need to install a plugin any more.

Repository: GitHub - communiteq/plugin-outlets-theme-component

The repository includes a script (gen/generate.rb) that will auto-generate the outlets based on the Discourse source code.

To toggle the plugin outlets, click the ā€œconnectorā€ icon in the top right.

When you click a specific plugin outlet, the display will change and you will be able to see all the arguments to the plugin outlet. Click it again to change it back.

firefox_whjNGBiVSB

Install this theme component

Theme preview: Theme Creator

61 Likes

Didnā€™t @Mittineague write something like this before?

1 Like

Yes, see the link at the very top of this topic, that refers to the topic about that. @Mittineague wrote a plugin in 2015. I was using it and then I found out that it needed to be updated (it hadnā€™t been updated for over 2 years).

The next step was me realizing that this could be done much easier now using a theme component.

6 Likes

Yes, I had started to update the plugin to take into account the changes in the number and locations of plugin outlets a few weeks ago, but other priorities moved it down on my ever growing todo list.

If the same information can be provided as a theme component that works in the GUI and doesnā€™t require editing app.yml and running launcher I think it would be easier for most. I may be wrong, but I have a feeling most prefer GUI over CLI.

5 Likes

I use this theme component (and the theme preview) a lot since I develop a few themes but I never thanked @RGJ

I canā€™t say how much time this theme component helped me save, but itā€™s a lot. Great job, very very useful.

10 Likes

Iā€™m getting a ā€œBad Gatewayā€ error when trying to install the component. Also when trying to paste the generated content into head_tag.html manually.

Is there a length limit for that file? Because it works fine when I split the content into two separate files.

There is no length limit (at least not one that is close to the current length of the file).

The theme component does take a while to install, your server might be not fast enough and time out because of the large number of plugin outlets / script fragments that are being used.

2 Likes

I found myself always adding/removing this theme during development to know plugin outlets. To make this easier in my dev environment, I added a toggle button to toggle the visibility of plugin outlet Perhaps others may find it useful so I created a PR for this.

Screen Shot 2021-11-12 at 11.49.51 AM

13 Likes

This is brilliant. Thank you!
PR merged.

9 Likes

Brilliant idea! I love the plugin button icon :slight_smile:

Just one issue, it seems that if you move to different routes, the toggle at top can get out of sync with contents outlets so you can never have everything on or off at the same time :sweat_smile: (which in my case was useful, but probably not desired generally?).

2 Likes

@merefield

Aah yes, youā€™re right. :sweat_smile: Iā€™ve switched to adding a class to the body to toggle the visibility and it seems to have resolved it. PR here:

6 Likes

What am I missing? I have installed the component. But do I still need to run the script in order to make this work? Is the script on my server somewhere where I can run it? or do I need to copy and paste? If I am modifying common/head_tag.html , do I need to put it back to disable this component?
:pray:

The script is only there for plugin maintenance, you donā€™t need it.

Just install the theme component, add it to your main theme, and press the ā€œplugā€ icon.

firefox_jDikn4jVrC

6 Likes

Thereā€™s a small bug when used along Custom Header Links (icons).
Clicking a custom header icon triggers the outlet button:

1 Like

Thereā€™s a little bug with the new user card as a theme component. Iā€™m not sure it would happen when itā€™s shipped in core (if it is). Stillā€¦ the outlets in the experimental user card still show up when outlets are toggled off:

BTW if I didnā€™t say it before, this theme component is absolutely awesome.

2 Likes

Yes, I can reproduce that, thank you for reporting this!! :+1:

I will ship a new version of the theme component early next week, it will have new outlets for 3.1 and a fix for this bug.

3 Likes

May I suggest a single setting? Choose the background color. Iā€™m glad the ā€œbrutal redā€ was changed to a ā€œpoppinā€™ greenā€, but personally, I like toned-down colors. :slight_smile:

(I can PR, though)

4 Likes

New version!!

  • Updated with all the 3.2beta PluginOutlets
  • Configurable colors
  • Click an outlet to see the actual parameters :fire:

firefox_whjNGBiVSB

12 Likes

This seems lightly bugged, itā€™s now default enabled on every page refresh on my PC now, and itā€™s throwing a few depreciations:

[THEME 105 'Plugin Outlet Locations'] Deprecation notice: The header-icons widget has been deprecated and decorateWidget is no longer a supported override. [deprecated since Discourse v3.3.0.beta1-dev] [deprecation id: discourse.header-widget-overrides] [info: https://meta.discourse.org/t/296544]
[THEME 105 'Plugin Outlet Locations'] Deprecation notice: The header-icons widget has been deprecated and attachWidgetAction is no longer a supported override. [deprecated since Discourse v3.3.0.beta1-dev] [deprecation id: discourse.header-widget-overrides] [info: https://meta.discourse.org/t/296544]
1 Like

Ah, thank you for bringing that to my attention @Firepup650 ! :+1:
I only checked my plugins against that deprecation and forgot about my theme components.

Iā€™ve pushed an update to fix this deprecation.

I will also update the component to include some newer plugin outlets shortly, but that takes some more time due to the new wrapper outlets.
Iā€™ve also updated the component to include the latest plugin outlets, except for the wrapper outlets as those need some more time / refactoring.

8 Likes