Easy to setup theme development project, primarily for r/TheDragonPrince

• Browser support
• Getting started
  • Prerequisites
  • Installation
  • Usage
• Contributing
• Acknowledgment
• MIT License

Because Reddit's limit for stylesheet is only 100 Kb, cross-browser support is not the priority, so officially the project supports only the latest version of current desktop browsers. But, at the time of writing this, here's a list of browsers that, on paper, should fully support currently used features:

Before you start working on the project, you need go through a couple of steps to setup your environment.

Download and install the following software:

• NodeJS
• Yarn
• git (recommended, but not required)
• Tampermonkey (for Chrome) or Greasemonkey (for Firefox)

After you've done that, you now need to allow your browser to connect to "insecure" localhost:

• Chrome
  • visit chrome://flags/#allow-insecure-localhost
  • choose "Enabled" from the dropdown list
  • restart your browser
• Firefox
  • visit https://localhost:8080/
  • click "Advanced"
  • then click "Add Exception..."
  • at this step, if the certificate is not showing up, click "Get Certificate"
  • add the exception by clicking "Confirm Security Exception"
  • P.S. you might need to do this every time you restart your machine

Now that you've setup your environment, you can start downloading and installing the project.

1. Clone the repository and cd into it:

   $ git clone https://github.com/flowzy/r-thedragonprince.git
   $ cd ./r-thedragonprince

   or download the project as a ZIP archive.

2. Install dependencies, using Yarn:

   $ yarn install
   

3. Open this link and install the userscript.

4. At this point you should be all set and ready to go.

If you're on Windows, try this:

1. (optional) Install Python from the official website.

2. Run the following command to install the Windows Build Tools using an elevated (Administrator) terminal window which installs the VS Build Tools and also Python 2.7:

   $ npm install --global --production windows-build-tools
   

   

The installation Windows Build Tools may take a couple of minutes, so after it's complete, re-open the terminal (normally) and run yarn install again.

credit goes to Catalin Vasile for figuring this out

Generate SSL certificates, start a local development server and watch for file changes:

$ yarn dev

Compress images/CSS output size and rewrite url(...) values to comply with Reddit's syntax:

$ yarn prod

Combine both of the above tasks, without rewriting url(...):

$ yarn prod-test

Run the task above, but without image compression (useful for users with weaker CPUs):

$ yarn prod-test-light

Compile SASS with a pre-defined header variant, pass --env.header argument:

$ yarn <task> --env.header=<number>
---------------------------------------------------
<task>   - dev | prod | prod-test | prod-test-light
<number> - min: 1, max: 18

Run tests on the production-ready bundle to determine its compatibility with Reddit's limits:

$ yarn test

Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

@ncla and his project "musereddit" was a great starting point and helped me kickstart the initial development. The project still uses a slightly modified version of his userscript for live development.