Updated Custom Header Icon: Post Data via URL

[littleviolette]

Discourse has recently deprecated api.decorateWidget, which I used to insert custom header icons and post the current user’s username via a URL.

I was wondering how I can post the user’s current username via HTTP with the new headerIcons API. I couldn’t find any documentation or examples on how to implement this. I couldn’t find a way to do it via the Customer Header Link plugin either.

Appreciate your help! Below is my current code using the decorateWidget API to post the username:

<script type="text/discourse-plugin" version="0.12">
    const { iconNode } = require("discourse-common/lib/icon-library");

    let icon = iconNode('calculator');

    var currentUser = api.getCurrentUser();
    var username = currentUser.username;

    api.decorateWidget('header-icons:before', helper => {
        const showExtraInfo = helper.attrs.minimized;
            if(!showExtraInfo) {
                return helper.h('li#calculator', [
                    helper.h('form#header-calculator.icon', {
                        action:'https://example.com/',
                        method:'post'
                    }, [
                        helper.h('button', {name:'u', value: username},[
                            iconNode('calculator'),
                        ])

                    ])
                ]);

            }
    });


</script>

[Arkshine]

Hey,

I will help you, but can you explain what you’re trying to do before that?

Is it to display a menu with a form inside?

Like for example:

Or is it just a button with the username as label, and it redirects to some URL?

[littleviolette]

It’s to click the header icon >> post the user’s username to a specified URL.

No form is actually displayed. Only the header icon is displayed. The post action is performed behind the scene. Sorry for the confusion. Let me remove “form” from the title of my post.

[Arkshine]

Okay, so a redirection to an external URL that contains the username.

Here is a basic example on how you can do, using the new API:

import { apiInitializer } from "discourse/lib/api";
import DButton from "discourse/components/d-button";

export default apiInitializer("1.8.0", (api) => {
  const currentUser = api.getCurrentUser();

  if (!currentUser) {
    return;
  }

  const url =
    "https://example.com/?u=" + encodeURIComponent(currentUser.username);

  const iconComponent = <template>
    <li class="calculator">
      <DButton
        @href={{url}}
        @icon="calculator"
        class="icon btn-flat"
        title="Calculator"
        target="_blank"
      />
    </li>
  </template>;

  api.headerIcons.add("calculator", iconComponent, { before: "search" });
});

• calculator is a unique name
• iconComponent refers to an inline glimmer <template> as you see here, but it can also refer to a glimmer class component you create in the components directory.
• You can choose where to place your icon by using before or after followed by the header icon’s unique name.

Feel free to adjust!

Note:

• The glimmer <template> syntax won’t work using the UI.

  You will need to create a theme component with separate files. To generate a TC quickly, you can use Discourse CLI and dev with it super easily with your code editor. I highly recommend it

  You can also use the template on Github: GitHub - discourse/discourse-theme-skeleton: Template for Discourse themes.

  • To use a glimmer component, the file extension must be .gjs.

Let me know if you need further help!