Crear y compartir un componente de tema de fuente

[Discourse]

Discourse permite importar temas que contienen recursos desde un repositorio remoto.

Esto permite a los autores de temas compartir fuentes e imágenes.

Crear un nuevo repositorio git con la fuente

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

Para about.json añade un archivo de configuración básico

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

Añade un archivo LICENSE, yo suelo usar MIT

vim LICENSE

Descargar la fuente

http://localfont.com/ es un sitio útil para conseguir fuentes

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

Añadir CSS que utilice el tema

mkdir common
cd common

Crea un archivo llamado common.scss con

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

body {
  font-family: Roboto;
}

Publicar los cambios en GitHub

Registra todos tus cambios:

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

Crea una cuenta en GitHub.com y luego crea un nuevo repositorio.

(Opcional) crear un tema en Discourse como lugar para discutir tus colores

Idealmente, deberías crear un tema en la categoría Customization > Theme con algunas capturas de pantalla de tu esquema de colores. Utilizarás esto como tu about_url

Rellena la información faltante en tu archivo about.json

• Navega a tu página de LICENSE en GitHub, rellena esa URL como tu license_url

• Utiliza la URL del proyecto de GitHub o la URL del tema de Discourse como tu about_url

Al final del proceso, tu archivo about.json se verá algo así:

{
  "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"
  }
}

Registra el cambio y publícalo en GitHub

git commit -am "añadí más detalles"
git push

Probar tu componente de fuente

• En la pantalla admin/customize/theme importa tu tema desde GitHub

¡Ahora puedes compartir fuentes fácilmente!

Ver también:

Estructura de temas y componentes de temas

Discourse admite temas nativos que pueden obtenerse desde un archivo .tar.gz o desde un repositorio git remoto, incluidos repositorios privados. [56] Un ejemplo de tema está en: GitHub - discourse/discourse-simple-theme: Sam's simple discourse theme · GitHub [32] El repositorio git se verificará en busca de actualizaciones (una vez al día) o mediante el botón Buscar actualizaciones. Cuando se detecten cambios, el botón Buscar actualizaciones cambiará a Actualizar a la versión más reciente. …

---

Este documento está controlado por versiones - sugiere cambios en github.

[bletch (Danny Goodall)]

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.

[pfaffman (Jay Pfaffman)]

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

[Dave_Driesmans]

Recibí un Error: Variable no definida: “$fontname”. al seguir los pasos.

Así que:
Declaré la variable en $variables:
fontname: "assets/fontname.woff2";

Me parece que tienes que rellenarlo, pero ¿qué ruta usar en las $variables?

Cuando dejas que Discourse suba los archivos con

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

parece que sube el archivo a una ruta diferente a assets/roboto.woff2
(/uploads/db0202/original/1X/...)

Editar:
No necesito $variables, la magia ocurre con las subidas. Pero tenía assets/font.svg#regular en los assets y el hashtag creó el problema.

[kcahtoor]

@Dave_Driesmans

Declaré la variable en $variables

Estoy recibiendo el mismo error Error: Undefined variable. Y tampoco se muestran activos en cargas o carga como encabezado.

¿Necesita actualizarse este tutorial?

Gracias de antemano.