Skip to content

debtcollective/discourse-debtcollective-theme

debtcollective-theme

This project has been based upon the structure generated by Discourse Theme CLI to hold all customization needed for the custom debtcollective community (all customisation that fits within the Theme scope).

If you want to know more about themes, themes component, widgets and other customization approaches for Discourse take a look at Beginner’s guide to using Discourse Themes.

Setting up Discourse locally

Before you install discourse, you will need the following dependencies, so be sure you have them install before continue.

Using windows? Follow this guide.

If you want to run discourse locally with out customizations please follow the instructions from our discourse-import project.

Basic concepts

Themes

Are the skins and overall design of the app. You can have one active at a time. They can have global settings to be managed by the admin.

Theme components

More narrow focus this are packages focus to customise one aspect of the app.

Themes vs Theme components

Themes can only amend the front end and have no access to the backend.

Theme installation

You can install themes using a Github repository. After install a theme, you can add the theme components by going to the theme admin panel under the section of "theme components".

Structure of themes and theme components

Development

Node dependencies installation

yarn install
bundle install # install discourse theme cli

The overall information can be found at

Developer's guide to Discourse Themes

Watch mode for a theme

Beginners' guide to using Theme Creator and Theme CLI to start building a Discourse theme

Widgets and Plugin API

There are three things you can do to widgets in Discourse themes.

  1. Modify them - like we did with controllers and components
  2. Decorate them - as in add elements before or after them
  3. Create them from scratch

Widgets have their own caveats, to get more context of Widget's limitations please read this.

Tools and extra documentation

Discourse uses Ember for client side development, we'd suggest you to read emberjs documentation and install the ember development tools

Error handling

We can use your.site.com/safe-mode in order to bypass the theme if things gets broken.

Testing

Due to limitations of discourse technology we choose to drive our code using crypress.io in order to make the test run you need to:

cp cypress.sample.json cypress.env.json

Create an API key for an admin user and fill the cypress.env.json with the username and the api key as the template suggests

yarn run test:e2e:dev

Customization

This theme expect the community to have set Categories only as a homepage, you can achieve that by running setup wizard again visiting http://localhost:3000/wizard (for local discourse)

Current Efforts

The current efforts section in the Home Page pulls from the current-efforts tag. This tag is only be avaiable for staff to use.

VSCode

There are a few covenient plugins you may want to add if you are using VSCode.

those in order to make sure you have automatic fix over the code.

We also suggest to install Webhint

Resources

There is a complete guide to onboarding you within the Discourse customisation world at Developer’s guide to Discourse Themes