Compartilháveis de Código QR

:information_source: Resumo Adiciona um gerador de QR Code para compartilhar fontes de links
:eyeglasses: Pré-visualização https://discourse.theme-creator.io/theme/Alteras/qr-code-shareables
:hammer_and_wrench: Repositório https://github.com/Alteras1/discourse-qr-code-shareables
:question: Guia de Instalação Como instalar um tema ou componente de tema
:open_book: Novo em Temas do Discourse? Guia para iniciantes sobre como usar Temas do Discourse

← Preencha "repoName" e "repoURL" para o botão de instalação automática →

Instale este componente de tema

← Descreva este tema/componente em uma ou duas frases →

Adiciona um QR Code a fontes para links compartilháveis. Inclui configurações para ajustar o estilo do QR Code.

Capturas de tela

← Adicione mais detalhes e explique as configurações (se aplicável) →

Configurações

Nome Descrição
share_in_private Permite QR Codes em contextos privados (sites que exigem login e mensagens privadas).
dots_color Cor dos pontos no QR code.
dots_type Tipo de pontos usados no QR code.
Opções: rounded, dots, classy, classy-rounded, square, extra-rounded
corners_square_color Cor dos cantos quadrados no QR code.
corners_square_type Tipo de cantos quadrados no QR code.
Opções: dots, square, extra-rounded, dot, rounded, classy, classy-rounded
corners_dots_type Tipo de pontos usados nos cantos do QR code.
Opções: dot, square, dots, rounded, classy, classy-rounded, extra-rounded
background_color Cor de fundo do QR code.
image Imagem a ser incorporada no QR code. Se nenhuma for fornecida, o QR code será gerado normalmente sem imagem
image_hide_background_dots Os pontos de fundo devem ser ocultos atrás da imagem.
image_margin Margem ao redor da imagem incorporada no QR code. Em px
image_size Tamanho da imagem incorporada em relação ao QR code. Esta é uma proporção de 0 a 1

Notas

Após ler algumas solicitações de recursos (Create a QR code for invites e Possible to share a post by save a picture with a QR code?), adorei a ideia de adicionar QR Codes a links compartilháveis. Atualmente, isso cobre apenas o compartilhamento de tópicos e posts, já que o modal de criação de convite não possui outlets de plugin nem usa a API de Compartilhamento.

Isso usa o pacote https://www.npmjs.com/package/qr-code-styling para personalizar o QR code.

16 curtidas

Como isso deve ser compartilhado? Estou acostumado a usar QR apenas de mídias impressas :man_shrugging:

3 curtidas

Isso é útil em cenários onde as pessoas com quem você deseja compartilhar o tópico podem ver sua tela (ou seja, mostrar rapidamente o código QR no celular). Você pode salvar o código QR, já que é um elemento de tela HTML, clicando com o botão direito e salvando como imagem.

4 curtidas

Salvar ou copiar não funciona no iPad.

1 curtida

Agh, eu sabia que estava esquecendo algo ao deixar em HTML canvas. Lancei uma correção que o converterá em png.

5 curtidas


Parece um pouco estranho, pode ser oco no centro, assim como na imagem abaixo, como o código QR.

2 curtidas

Ótima adição, obrigado!

É uma lacuna que deveria ser fechada de alguma forma? Convites por QR code seriam épicos!

8 curtidas

Enviei uma correção. image hide background dots e image margin devem funcionar corretamente agora.

5 curtidas

Tenho um PR para o core com algumas novas saídas de plugin! Não tenho certeza se há alguma razão específica pela qual a API de Compartilhamento não está sendo usada em convites, então manterei o PR apenas para saídas de plugin.

7 curtidas

Converse com a equipe sobre isso.

6 curtidas

Como você faz isso funcionar para postagens? Eu só consigo para tópicos:

Atualmente estou recebendo isso em vez disso:
<0xC2><0xBB>

Também sou ganancioso e adoraria poder fazer isso (ou seja, criar um código QR) para qualquer link em meu site nativamente!!

4 curtidas

Estou curtindo este componente de tema! No meu fórum familiar, tenho uma categoria para procedimentos de como fazer, como manter as caixas de areia do meu gato limpas. Eu já estava pensando em imprimir instruções breves para colocar perto das caixas de areia. Isso poderia ter um código QR para o fórum para as instruções detalhadas. Eu poderia criá-lo em outro lugar usando o URL, mas gosto de fazer isso diretamente no Discourse.

Interessante. Você pode me agradar e contar o conto épico de como isso seria uma melhoria no sistema de convites? Como e onde os convites de código QR seriam compartilhados e como seriam aceitos? Você pode compartilhar exemplos anteriores de outras plataformas para mostrar como isso está sendo feito por outros? Além disso, onde você imagina que o código QR estaria disponível no sistema de convites?

Você está usando o novo link de compartilhamento. Isso apenas pega o URL para compartilhamento sem um modal. Se você for para as configurações do site do menu de posts, pode habilitar o item original do menu de compartilhamento de posts, que agora também mostraria o código QR. Você também pode clicar no carimbo de data/hora do post para acessar o popup de compartilhamento original.

5 curtidas

Eu nunca percebi que havia um modal de compartilhamento conectado ao carimbo de data/hora da postagem! Tenho que admitir, esse é um bom lugar para escondê-lo, e o link de compartilhamento mais enxuto faz sentido para os usos mais comuns.

É importante notar que meu telefone Android (Pixel 7 Pro) cria códigos QR automaticamente; isso funciona com o modal de convite também. E esse é o meu principal caso de uso. Na verdade, nunca investiguei isso. Ah, a viagem da descoberta!

Eles não são tão bonitos quanto os que este TC cria!

3 curtidas

Ah! Sim. Isso já está implementado no Android. Quem diria! Excelente! :rocket: obrigado por me educar. Então já é épico!

Mas espere!

Não vejo essa opção no iOS? :green_apple:

No iOS, não vejo uma opção de QR?

2 curtidas

O código QR é caro para gerar? Se não, por que não exibi-lo automaticamente na modal de compartilhamento em vez de exigir a seleção de um botão para exibi-lo?

Não custa nada, então o resto é apenas programação. Mas para a maioria das pessoas, o QR é apenas ruído, então ele não pode ser diretamente visível.

2 curtidas

Cartões de visita. Uma empresa usando discourse poderia ter um código QR para sua plataforma para entrar. Ou, para esse assunto, usar em pôsteres de eventos, etc.

EDIT: Acabei de ver a postagem de Rob sobre Android. No entanto, como você mesmo disse. Prefiro fazer isso dentro do Discourse
:wink:

3 curtidas

Como @Jagster disse, não é caro gerar o código QR, é principalmente uma questão de gosto pessoal sobre quão focado e imediato o código QR é. O TC utiliza confortavelmente a API de Compartilhamento (e um pouco de manipulação do DOM) para exibir o Código QR, tratando-o efetivamente no mesmo nível das outras fontes de compartilhamento. Isso mais ou menos correspondeu à minha visão de códigos QR como um método secundário para enviar informações. No entanto, desde que comecei minhas férias fora dos EUA, fiquei bastante chocado com a prevalência de códigos QR no mundo físico.

Eu poderia explorar a adição de uma opção de código QR imediato às configurações, mas provavelmente precisaria revisitar como/onde o código QR é colocado. Honestamente, a colocação atual do código QR na janela modal (tanto na visualização desktop quanto mobile) está realmente forçada com manipulação do DOM. Idealmente, em uma visualização desktop, um código QR tratado no mesmo nível do botão “copiar link” ocuparia todo o lado direito da janela modal, mas isso exigiria um novo plugin outlet e uma boa dose de alterações de CSS. Atualmente, há apenas um plugin outlet na janela modal de compartilhamento, e ele fica ao lado do botão “Novo Tópico”, e eu realmente quero evitar fazer um CSS complexo ou usar mais manipulação do DOM.

tl;dr: Vou pensar mais sobre isso e decidir se adicionar a configuração de código QR imediato vale o esforço extra depois que eu voltar das férias.

4 curtidas

Quando uso uma imagem, não recebo código QR. Existem algumas exigências de formato, tamanho, etc. a serem usadas?

2 curtidas

Hmm, isso é estranho. Não deveria haver requisitos particularmente rigorosos com a própria imagem…

Quais são as configurações de imagem e tamanho que você está usando?