Ícone atualizado do cabeçalho personalizado: enviar dados do post via URL

Dev
1

O Discourse desativou recentemente o api.decorateWidget, que eu usava para inserir ícones personalizados no cabeçalho e postar o nome de usuário do usuário atual via URL.

Gostaria de saber como posso postar o nome de usuário atual do usuário via HTTP com a nova API headerIcons. Não consegui encontrar nenhuma documentação ou exemplo sobre como implementar isso. Também não encontrei uma maneira de fazer isso através do plugin Custom Header Links.

Agradeço a sua ajuda! Abaixo está o meu código atual usando a API decorateWidget para postar o nome de usuário:

<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>
2

Olá,

Eu vou te ajudar, mas você pode explicar o que você está tentando fazer antes disso?

É para exibir um menu com um formulário dentro?

Como por exemplo:

Esta imagem parece ser uma captura de tela de uma página da web, mostrando uma função de chat chamada Preferências da Barra Lateral de Chat. (Legenda da IA)
Esta imagem parece ser uma captura de tela de uma página da web, mostrando uma função de chat chamada Preferências da Barra Lateral de Chat. (Legenda da IA)414×260 9.01 KB

Ou é apenas um botão com o nome de usuário como rótulo, e ele redireciona para alguma URL?

3

É clicar no ícone do cabeçalho >> postar o nome de usuário do usuário em uma URL especificada.

Nenhum formulário é realmente exibido. Apenas o ícone do cabeçalho é exibido. A ação de postagem é realizada nos bastidores. Desculpe pela confusão. Deixe-me remover “formulário” do título da minha postagem.

4

Ok, então um redirecionamento para um URL externo que contém o nome de usuário.

Aqui está um exemplo básico de como você pode fazer isso, usando a nova 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 é um nome único
  • iconComponent refere-se a um glimmer inline <template> como você vê aqui, mas também pode se referir a um componente de classe glimmer que você cria no diretório components.
  • Você pode escolher onde colocar seu ícone usando before ou after seguido pelo nome único do ícone do cabeçalho.

NVIDIA_Share_rvsjetCtUy

Sinta-se à vontade para ajustar!

Observação:

  • A sintaxe do glimmer <template> não funcionará usando a UI.

    Você precisará criar um componente de tema com arquivos separados. Para gerar um TC rapidamente, você pode usar o Discourse CLI e desenvolver com ele com muita facilidade com seu editor de código. Eu recomendo muito.

    Você também pode usar o template no Github: GitHub - discourse/discourse-theme-skeleton: Template for Discourse themes.

    • Para usar um componente glimmer, a extensão do arquivo deve ser .gjs.

Me avise se precisar de mais ajuda!

3 curtidas
5

Olá @Arkshine,

Muito obrigado pela sua explicação detalhada. Tentei injetar o código em <head>, mas o ícone não aparece. O que fiz de errado?

<script type="text/discourse-plugin">
    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);
      console.log("url: " + url)
      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" });
    });    
</script>
1 curtida
6

@littleviolette Olá, não pode ser executado na Interface de Administração aqui.

Usando a CLI de Temas, você pode facilmente criar um componente de tema no seu computador.

Em seguida, edite o arquivo com um editor de texto de sua escolha (como vscode) e adicione o código no inicializador. Crie um arquivo em /javascripts/discourse/api-initializers/my-header-icon.gjs e cole o código nele. Você também pode alterar os valores padrão em about.json.

image

O próximo passo para instalar o componente no seu fórum de produção:

  • você pode colocar o componente no Github e, na Interface de Administração, usar o link do repositório para instalar;
  • ou você compacta o diretório no seu computador e, na Interface de Administração, o instala a partir do dispositivo.

Tente e me diga se tiver algum problema!

3 curtidas