Problemas ao adicionar componente CSS/JS: Fortalecendo links para preservar a funcionalidade do link

Resumo TL;DR:

  • Problemas ao incorporar links de JavaScript e CSS para habilitar pop-ups de tooltip do Robustify em hiperlinks no nosso Discourse.
  • Algumas semelhanças com este caso anterior, embora estejamos evitando consultar a API do Robustify; pode ser sensato seguir este caminho eventualmente, mas a intenção era começar apenas habilitando pop-ups para hiperlinks corretamente encapsulados.

Detalhes:

Estou escrevendo com uma pergunta, esperançosamente, simples sobre a implementação de um pequeno aplicativo CSS/JS em nosso fórum Discourse: estamos tentando usar um aplicativo simples criado pelo Mementoweb que anexa uma caixa de pop-up a quaisquer hiperlinks em uma página, permitindo que você escolha entre acessar o site ou visualizar uma versão em cache anterior do site se o link não estiver mais funcional. É um recurso muito legal!, e esperamos que isso possa resolver alguns dos problemas inevitáveis de voltar a um site alguns anos depois e encontrar links quebrados para páginas não mantidas. Inicialmente, eu esperava apenas tentar garantir que funcionasse quando um de nós gerasse manualmente um código no site Robustify (exemplo).

O aplicativo é executado em algumas linhas de código - os links são encapsulados com uma tag a href mais longa, e há links para uma folha de estilo CSS e algum código Javascript nas tags head. Eu estava um pouco incerto se o Discourse permitiria a personalização de Javascript, mas fiquei muito encorajado ao ler o Guia para Iniciantes e ver o quanto havia de escopo para modificações. Estamos usando um tema remoto (Sam’s Simple Theme) e tentei adicionar nosso código ao cabeçalho do site como um novo componente:


Ainda não consegui colocar isso para funcionar, mas pensei que tinha resolvido ontem, pesquisando sobre plugins e trocando nosso tipo de JS para “text/discourse-plugin” version=“0.8.13”; também tentei resolver as pequenas variáveis de realocação do CSS (linkando a folha diretamente em vez de como um DOI; copiando as tags diretamente no espaço CSS; incluindo como CSS Embutido, etc.) sem sucesso - posts com links encapsulados ainda aparecem sem pop-up:


Qualquer orientação é muito apreciada aqui!, e vou atualizar este post se eu tropeçar em uma solução enquanto isso.

Você pode compartilhar uma captura de tela do console JavaScript do seu navegador e da aba Network? Pode ser um problema de Política de Segurança de Conteúdo (CSP) que está impedindo o carregamento do código JS na página.

2 curtidas

Obrigado Faizaan :slight_smile: Incluindo uma captura de tela abaixo, não consigo ver imediatamente um problema de CSP, mas ficarei feliz em tentar outra máquina se isso puder ajudar:

Dei uma olhada no código e parece que há algum tipo de substituição impedindo que as tags Javascript mostradas na captura de tela na postagem anterior sejam incorporadas:

image

Não tenho 100% de certeza se isso é resultado da troca do valor do tipo de script de text/javascript para text/discourse-plugin; tenho a sensação de que não estava funcionando com o valor original, e não há mais um ponteiro para o DOI do JS indicado no código do Componente.

Obrigado pelo suporte com isso - me pergunto se pode acabar sendo mais fácil tentar configurar a API mais completa se houver mais problemas para colocar os links individuais em funcionamento.