Discourse supports importing themes containing assets from a remote repository.
This allows theme authors to share fonts and images.
Create a new git repository with the font
mkdir discourse-roboto-theme
cd discourse-roboto-theme
git init .
vim about.json
For about.json add a skeleton config file
{
"name": "Roboto theme component",
"about_url": "",
"license_url": "",
"assets": {
"roboto": "assets/roboto.woff2"
}
}
Add a LICENSE file, I usually use MIT
vim LICENSE
Download the font
http://localfont.com/ is a handy site to get fonts
mkdir assets
cp ~/Downloads/roboto.woff2 roboto.woff2
Add CSS that consumes the theme
mkdir common
cd common
Create a file called common.scss with
@font-face {
font-family: Roboto;
src: url($roboto) format("woff2");
}
body {
font-family: Roboto;
}
Push changes to GitHub
Check in all your changes:
git add LICENSE
git add about.json
git add assets/roboto.woff2
git add common/common.scss
git commit -am "first commit"
Create an account on GitHub.com and then create a new repository.
(Optional) create a topic on Discourse as a home to discuss your colors
Ideally you would create a topic in the #plugin:theme category with some screenshots of your color scheme. You will use this as your about_url
Fill in the missing information in your about.json file
-
Navigate to your LICENSE page on GitHub, fill in that URL as your
license_url -
Either use the GitHub project URL or Discourse topic URL as your
about_url
At the end of the process your about.json file will look something like:
{
"name": "Roboto theme component",
"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"
}
}
Check in the change and push to GitHub
git commit -am "added more details"
git push
Test your font component
- In the
admin/customize/themescreen import your theme from GitHub
You can now easily share fonts!
See also:
This document is version controlled - suggest changes on github.