Testmunk Sphinx Theme

View a working demo over on docs.testmunk.com.

This is a prototype mobile-friendly sphinx theme made for docs.testmunk.com. It's a fork from the official ReadTheDocs sphinx theme at the sphinx_rtd_theme repository.

Part of this repo also exists as a submodule within the docs_ repo itself, so please make your edits to the SASS files here, rather than the .css files on the docs repository.

IMPORTANT INFORMATION

There are some tricky hacks in this repository that you should be aware of before editing either this or the docs repo:

• There is front-end JavaScript code (from now on FEJSC) changing all Danger admonitions into Troubleshooting admonitions.
• There is FEJSC that moves the last paragraph of each admonition and inserts it in the title header. That is how we acheive admonitions with custom titles.
• The Teststep library icons for each platform are there because of FEJSC and SASS code that replaces certain keyword custom admonition names with those icons. Look into the teststep libary code in the docs repo
• There is FEJSC in place that makes all images with Screenshot as alt-text into expandable text that says "See screenshot" and displays the screenshot when clicked.

How the Table of Contents builds

Currently the left menu will build based upon any toctree(s) defined in your index.rst file. It outputs 2 levels of depth, which should give your visitors a high level of access to your docs. If no toctrees are set the theme reverts to sphinx's usual local toctree.

It's important to note that if you don't follow the same styling for your rST headers across your documents, the toctree will misbuild, and the resulting menu might not show the correct depth when it renders.

Also note that the table of contents is set with includehidden=true. This allows you to set a hidden toc in your index file with the hidden property that will allow you to build a toc without it rendering in your index.

By default, the navigation will "stick" to the screen as you scroll. However if your toc is vertically too large, it revert to static positioning. To disable the sticky nav alltogether change the setting in conf.py.

Contributing or modifying the theme

The sphinx_testmunk_theme is primarily a sass project that requires a few other sass libraries. It uses using bower to manage these dependencies and sass to build the css. It comes with a very nice set of grunt operations that will not only load these dependecies, but watch for changes, rebuild the sphinx demo docs and build a distributable version of the theme. The bad news is this means you'll need to set up your environment similar to that of a front-end developer (vs. that of a python developer). That means installing node and ruby.

Set up your environment

1. Install sphinx into a virtual environment.

pip install sphinx

2. Install sass

gem install sass

2. Install node, bower and grunt.

// Install node
brew install node

// Install bower and grunt
npm install -g bower grunt-cli

// Now that everything is installed, let's install the theme dependecies.
npm install

Now that our environment is set up, make sure you're in your virtual environment, go to this repository in your terminal and run grunt:

grunt

This default task will do the following very cool things that make it worth the trouble.

1. It'll install and update any bower dependencies.
2. It'll run sphinx and build new docs.
3. It'll watch for changes to the sass files and build css from the changes.
4. It'll rebuild the sphinx docs anytime it notices a change to .rst, .html, .js or .css files.

Updating the theme for the testmunk/docs repository

Run grunt to make sure the theme is built. Copy the files from the sphinx_rtd_theme/ folder in the sphinx_testmunk_theme repository into the _themes/sphinx_testmunk_theme/ folder in the docs repository. Build the docs locally to make sure they look correct and build with no errors, and then commit and push the changes.