Updated Custom Header Icon: Post Data via URL

[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!