Crie e compartilhe um componente de tema de fonte

Discourse suporta a importação de temas que contêm ativos de um repositório remoto.

Isso permite que os autores de temas compartilhem fontes e imagens.

Crie um novo repositório git com a fonte

mkdir discourse-roboto-theme
cd discourse-roboto-theme
git init .
vim about.json

Para about.json, adicione um arquivo de configuração básico

{
  "name": "Componente de tema Roboto",
  "about_url": "",
  "license_url": "",
  "assets": {
    "roboto": "assets/roboto.woff2"
  }
}

Adicione um arquivo LICENSE, eu geralmente uso a MIT

vim LICENSE

Baixe a fonte

http://localfont.com/ é um site útil para obter fontes

mkdir assets
cp ~/Downloads/roboto.woff2 roboto.woff2

Adicione CSS que consome o tema

mkdir common
cd common

Crie um arquivo chamado common.scss com

@font-face {
  font-family: Roboto;
  src: url($roboto) format("woff2");
}

body {
  font-family: Roboto;
}

Envie as alterações para o GitHub

Confirme todas as suas alterações:

git add LICENSE
git add about.json
git add assets/roboto.woff2
git add common/common.scss
git commit -am "primeiro commit"

Crie uma conta em GitHub.com e, em seguida, crie um novo repositório.

(Opcional) crie um tópico no Discourse como local para discutir suas cores

Idealmente, você criaria um tópico na categoria Customization > Theme com algumas capturas de tela do seu esquema de cores. Você usará isso como seu about_url

Preencha as informações ausentes no seu arquivo about.json

  • Navegue até a página da sua LICENSE no GitHub, preencha esse URL como seu license_url

  • Use o URL do projeto no GitHub ou o URL do tópico do Discourse como seu about_url

No final do processo, seu arquivo about.json ficará parecido com:

{
  "name": "Componente de tema Roboto",
  "about_url": "https://github.com/SamSaffron/discourse-roboto-theme",
  "license_url": "https://github.com/SamSaffron/discourse-roboto-theme/blob/master/LICENSE",
  "assets": {
    "roboto": "assets/roboto.woff2"
  }
}

Confirme a alteração e envie para o GitHub

git commit -am "adicionado mais detalhes"
git push

Teste seu componente de fonte

  • Na tela admin/customize/theme, importe seu tema do GitHub

:confetti_ball:

Agora você pode facilmente compartilhar fontes!

Veja também:


Este documento é controlado por versão - sugira alterações no github.

19 curtidas

Great tutorial.

Worked like a charm except it looks like localfont.com is down or no more.

I used this Google webfonts helper site to download a .woff2 version of the font I was after.

See also Install the Discourse Theme CLI console app to help you build themes

1 curtida

Ao seguir os passos, recebi um Erro: Variável indefinida: “$fontname”.

Então:
Declarei a variável em $variables:
fontname: "assets/fontname.woff2";

Parece que você tem que preenchê-la, mas qual caminho usar em $variables?

Quando você deixa o Discourse fazer o upload dos arquivos com

"assets": {
        "fontname": "assets/fontname.woff2"
   }

ele faz o upload do arquivo para um caminho diferente de assets/roboto.woff2, parece
(/uploads/db0202/original/1X/...)

Editar:
Não há necessidade de $variables, a mágica acontece com os uploads. Mas eu tinha assets/font.svg#regular nos assets e a hashtag criou o problema.

2 curtidas

Estou recebendo o mesmo erro Error: Undefined variable. E também não há nenhum ativo mostrado em uploads ou upload como um título.

Este tutorial precisa ser atualizado?

Obrigado desde já

1 curtida