Crea y comparte un componente de tema de fuente

[Discourse]

Discourse admite la importación de temas que contienen activos 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 esqueleto

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

Añade un archivo LICENSE, yo usualmente uso MIT

vim LICENSE

Descargar la fuente

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

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

Añadir CSS que consume 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;
}

Subir cambios a 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 hogar para discutir tus colores

Idealmente, crearías un tema en la categoría #plugin:theme con algunas capturas de pantalla de tu esquema de color. Usarás esto como tu about_url

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

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

• Usa 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 sube a GitHub

git commit -am "añadidos 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:

Structure of themes and theme components

Discourse supports native themes that can be sourced from a .tar.gz archive or from a remote git repository including private repositories. [56] An example theme is at: GitHub - discourse/discourse-simple-theme: Sam's simple discourse theme [32] The git repository will be checked for updates (once a day), or by using the Check for Updates button. When changes are detected the Check for Updates button will change to the Update to Latest. [image] To create a theme you need to follow a spec…

---

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