Level 1: Module 3 - Discourse Theme Development Pipeline


Full-Stack Pathway


Program Objective

We will set up a pipeline to create or change Discourse Theme and preview the changes to the theme live.


Pre-requisites

Please make sure you have the following things set up, if not you can refer back to Module 1 and Module 2 to complete these steps:

  • Discourse installed locally.
  • Have a GitHub account and have access to this repository.

Tasks

In this module, we will work on the following things:

S.N Tasks
1. Setup files and directories structure for developing Discourse Theme.
2. Push/Pull Discourse Theme code to GitHub.
3. Cloning the Theme from GitHub submodule.
4. Preview Theme live on online Discourse Theme Creator Site.
5. Preview Theme live on Discourse running in the local machine.

Outcomes

After successful completion of this module, you will have developed the following skills:

Technical Skills

  • Setup Discourse Theme Development environment.
  • Develop and preview Discourse Theme live.
  • Some HTML and SCSS codes.
  • Further knowledge on GitHub and Git submodule system.

Soft Skills

  • Preparation for project management tool Trello (will be used when Theme Development starts)

Self-Assessments

Self-Assessments are very important because it is the way to keep a record of all your highlights and achievements (helps a lot when creating/updating resume). Also, it is required by STEM-Away to be able to generate certificates and 1-Click Resume. Most of the big companies also use the same technique of self-assessments to evaluate their employee’s performance.

  • Where can you find about self-assessment?
    You can find it here.

Getting Started Ahead

Here are the brief steps on what we will do on the webinar and for Module 3. If you are confused or stuck with any of these steps, do not worry, we will go through them at our next meeting. Also, feel free to post any questions.


Module 3 - Getting Started


Pipeline Setup for Theme Development

  • There are two ways to create a Discourse Theme.

    • Local Theme - Writing code in the website itself.
    • Remote Theme - Written in local machine and pushed to GitHub (we will use)
  • The general directory structure for any theme will look similar to:

    • common
    • desktop
    • mobile
    • scss
    • about.json
    • settings.yml

    Brief Info
    common -> folder where we will have common HTML/SCSS/CSS files.
    desktop -> folder where we will have files for desktop view.
    mobile -> folder where we will have files for mobile view.
    scss -> folder where we will have .scss files like variables.
    about.json -> json file containing the information about theme.
    settings.yml -> settings for theme (example: specify icons, colors, etc).

  • Inside common/desktop/mobile folder, we can have these kinds of files where we write the code. The name of the files is descriptive enough.

    • common.scss/desktop.scss/mobile.scss
    • head_tag.html
    • header.html
    • after_header.html
    • body_tag.html
    • footer.html
    • embedded.scss

    Detail info
    Discourse Theme Development Guide

  • After writing all the required codes, to test it manually: Zip the Theme folder and upload it to the Discourse Theme Install Section in the website. You can do this in two ways:

    • Using this website. Create an account and you can upload your themes and preview here.
    • Using local Discourse instance. Run the discourse server and upload the zipped theme folder.
  • To test it using GitHub (recommended way), select install from GitHub instead of uploading Zip in Theme Install Option on the website. And paste the repository of the GitHub Theme.


Tasks

  • The above-mentioned skeleton is available in this GitHub repo. You can clone it to your machine and start modifying it. Just make sure to work on a branch, and not the master branch. Or, please feel free to create the files and folders on your own from the scratch.
  • Modify/write some codes, push your branch to GitHub.
  • Using the Discourse Theme Creator website or your local Discourse instance, clone your branch, and preview the theme.
  • You will only need to clone your GitHub branch once. From next time, when you push some changes to the GitHub branch, you can just update and refresh the page. The changes will automatically occur.
  • After the successful setup of the pipeline, create a self-assessment about this Module.
  • Now, post the link (URL) of self-assessment as a reply to the ongoing module.

    Note
    These steps might be kind of overwhelming if it is your first time. But do not worry, I will walk you through the steps in the next meeting. Also, the meeting video will be recorded and will be made available to you. In the meantime, if you are interested to learn more, this is a good resource.
    Discourse Theme Development Guide


:blush: Please reply below for any sort of questions or clarifications. :blush:
@FS-Pathway

1 Like

Here is the link the my self assessment for this module!
https://stemaway.com/t/full-stack-level-1-hannah-zhang/7043/3

Here’s the link for my self assessment: https://stemaway.com/t/full-stack-level-1-module-3-sravya/7169

Here is a link to my self-assessment:

https://stemaway.com/t/full-stack-level-1-module-3-aryan/7187

Sorry, the GitHub link to the repo is broken. Can you please put up a new one? Thank you so much.

Hi,

Here is the link to my self assessment:

Orhun

Here’s the link to my self assessment:

https://stemaway.com/t/full-stack-level-1-module-3-fong/7426

Here is the link to my self-assessment:

Here is my self-assessment for this module:

Hi,

Here is my self assessment for this module : ) Full Stack Self Assessment - Level 1: Module 3 - Masrur Alam

Hi @bmaharjan,

I made some mistakes on the Github repo.

I accidentally created two branches because the first branch (called Masrur15) was an accidental clone of another student’s branch. So I just created a new one called Masrur15-(Actual-One)

I also accidentally edited the master branch code, but I did return it to the original code so I don’t think there is any difference.

Really sorry! Hopefully, it isn’t a huge problem.

Hello.

Here is the link to my Self-Assessments

-Juan Marcos

Hello,

Here is the link to my self-assessment.

Full Stack - Level 1: Module 3 Self Assessment - Tahmeed Solaman

Hi @Masrur_Alam , it is not a problem, so you do not need to worry. Thank you though.

Hi, here is my self-assessment: Full Stack: Level 1 Module 3 - Self-Assessment

Hi, here’s my left assessment: Full Stack - Level 1: Module 3 - Sarah Xie

Here is my self assessment