Skip to content

Commit

Permalink
Merge pull request #2 from zdenek-syntensor/feature/torchdyn-styles
Browse files Browse the repository at this point in the history
Feature/torchdyn styles
  • Loading branch information
zdenek-syntensor authored Sep 22, 2022
2 parents d539ddf + 86df126 commit 6baf792
Show file tree
Hide file tree
Showing 90 changed files with 1,332 additions and 1,579 deletions.
43 changes: 23 additions & 20 deletions Gruntfile.js
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,9 @@ module.exports = function(grunt) {
case "tutorials":
PROJECT_DIR = envJSON.TUTORIALS_DIR;
break;
case "torchdyn":
PROJECT_DIR = envJSON.TORCHDYN_DIR;
break;
}

grunt.initConfig({
Expand Down Expand Up @@ -40,29 +43,29 @@ module.exports = function(grunt) {
expand: true,
flatten: true,
src: ['fonts/FreightSans/*'],
dest: 'pt_lightning_sphinx_theme/static/fonts/FreightSans',
dest: 'torchdyn_sphinx_theme/static/fonts/FreightSans',
filter: 'isFile'
},
{
expand: true,
flatten: true,
src: ['fonts/UCity/*'],
dest: 'pt_lightning_sphinx_theme/static/fonts/UCity',
dest: 'torchdyn_sphinx_theme/static/fonts/UCity',
filter: 'isFile'
},
{
expand: true,
flatten: true,
src: ['fonts/Inconsolata/*'],
dest: 'pt_lightning_sphinx_theme/static/fonts/Inconsolata',
dest: 'torchdyn_sphinx_theme/static/fonts/Inconsolata',
filter: 'isFile'
},

{
expand: true,
flatten: true,
src: ['fonts/IBMPlexMono/*'],
dest: 'pt_lightning_sphinx_theme/static/fonts/IBMPlexMono',
dest: 'torchdyn_sphinx_theme/static/fonts/IBMPlexMono',
filter: 'isFile'
}
]
Expand All @@ -74,7 +77,7 @@ module.exports = function(grunt) {
expand: true,
flatten: true,
src: ['images/*'],
dest: 'pt_lightning_sphinx_theme/static/images',
dest: 'torchdyn_sphinx_theme/static/images',
filter: 'isFile'
}
]
Expand All @@ -98,7 +101,7 @@ module.exports = function(grunt) {
'node_modules/bootstrap/dist/js/bootstrap.min.js',
'node_modules/anchor-js/anchor.min.js'
],
dest: 'pt_lightning_sphinx_theme/static/js/vendor',
dest: 'torchdyn_sphinx_theme/static/js/vendor',
filter: 'isFile'
}
]
Expand All @@ -114,7 +117,7 @@ module.exports = function(grunt) {
expand: true,
cwd: 'scss',
src: ['*.scss'],
dest: 'pt_lightning_sphinx_theme/static/css',
dest: 'torchdyn_sphinx_theme/static/css',
ext: '.css'
}]
},
Expand All @@ -126,7 +129,7 @@ module.exports = function(grunt) {
expand: true,
cwd: 'scss',
src: ['*.scss'],
dest: 'pt_lightning_sphinx_theme/static/css',
dest: 'torchdyn_sphinx_theme/static/css',
ext: '.css'
}]
}
Expand All @@ -142,7 +145,7 @@ module.exports = function(grunt) {

dist: {
files: {
"pt_lightning_sphinx_theme/static/css/theme.css": "pt_lightning_sphinx_theme/static/css/theme.css"
"torchdyn_sphinx_theme/static/css/theme.css": "torchdyn_sphinx_theme/static/css/theme.css"
}
}
},
Expand All @@ -152,21 +155,21 @@ module.exports = function(grunt) {
options: {
external: ['jquery'],
alias: {
'pt-lightning-sphinx-theme': './js/theme.js'
'torchdyn_sphinx_theme': './js/theme.js'
}
},
src: ['js/*.js'],
dest: 'pt_lightning_sphinx_theme/static/js/theme.js'
dest: 'torchdyn_sphinx_theme/static/js/theme.js'
},
build: {
options: {
external: ['jquery'],
alias: {
'pt-lightning-sphinx-theme': './js/theme.js'
'torchdyn_sphinx_theme': './js/theme.js'
}
},
src: ['js/*.js'],
dest: 'pt_lightning_sphinx_theme/static/js/theme.js'
dest: 'torchdyn_sphinx_theme/static/js/theme.js'
}
},
uglify: {
Expand All @@ -180,8 +183,8 @@ module.exports = function(grunt) {
},
files: [{
expand: true,
src: ['pt_lightning_sphinx_theme/static/js/*.js', '!pt_lightning_sphinx_theme/static/js/*.min.js'],
dest: 'pt_lightning_sphinx_theme/static/js/',
src: ['torchdyn_sphinx_theme/static/js/*.js', '!torchdyn_sphinx_theme/static/js/*.min.js'],
dest: 'torchdyn_sphinx_theme/static/js/',
rename: function (dst, src) {
// Use unminified file name for minified file
return src;
Expand All @@ -196,10 +199,10 @@ module.exports = function(grunt) {
},
clean: {
build: ["docs/build"],
fonts: ["pt_lightning_sphinx_theme/static/fonts"],
images: ["pt_lightning_sphinx_theme/static/images"],
css: ["pt_lightning_sphinx_theme/static/css"],
js: ["pt_lightning_sphinx_theme/static/js/*", "!pt_lightning_sphinx_theme/static/js/modernizr.min.js"]
fonts: ["torchdyn_sphinx_theme/static/fonts"],
images: ["torchdyn_sphinx_theme/static/images"],
css: ["torchdyn_sphinx_theme/static/css"],
js: ["torchdyn_sphinx_theme/static/js/*", "!torchdyn_sphinx_theme/static/js/modernizr.min.js"]
},

watch: {
Expand All @@ -210,7 +213,7 @@ module.exports = function(grunt) {
},
/* Changes in theme dir rebuild sphinx */
sphinx: {
files: ['pt_lightning_sphinx_theme/**/*', 'README.rst', 'docs/**/*.rst', 'docs/**/*.py'],
files: ['torchdyn_sphinx_theme/**/*', 'README.rst', 'docs/**/*.rst', 'docs/**/*.py'],
tasks: ['clean:build','exec:build_sphinx']
},
/* JavaScript */
Expand Down
60 changes: 47 additions & 13 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,17 +1,21 @@
# PyTorch-Lightning Sphinx Theme
# Torchdyn Sphinx Theme

Sphinx theme for [PyTorch-Lightning Docs](https://pytorch-lightning.readthedocs.io/en/latest/) based on the [Read the Docs Sphinx Theme](https://sphinx-rtd-theme.readthedocs.io/en/latest).
Sphinx theme for [TorchDyn Docs](https://torchdyn.readthedocs.io/en/latest/) based on the [PyTorch Lightning Sphinx Theme](https://pytorch-lightning.readthedocs.io/en/latest).

## Setup the project for local development

This theme requires running both python commands and javascript (npm) commands.

### Step 0: Make sure you're on the conda environment you are using for pytorch-lightning

```bash
conda activate my-pl-env
```

### Step 1: Python setup

First, install all the docs deps for lightning

```bash
cd /path/to/pytorch-lightning

Expand All @@ -21,6 +25,7 @@ pip install -r requirements/docs.txt
```

Setup the lightning_sphinx_theme

```
cd /path/to/lightning_sphinx_theme
Expand All @@ -32,6 +37,7 @@ pip install -r docs/requirements.txt
```

If you're on a mac with conda, and you get this error:

```
>> Pandoc wasn't found.
>> Please check that pandoc is installed:
Expand All @@ -40,13 +46,16 @@ If you're on a mac with conda, and you get this error:
```

then try the following command ([from this answer](https://stackoverflow.com/questions/62398231/building-docs-fails-due-to-missing-pandoc))

```
pip uninstall pandoc
conda install pandoc
```

### Step 2: setup the javascript things 🤮

First, install the things in package.json

```bash
# run yarn install (uses `package.json`)
# you need node version 8.4.0
Expand All @@ -60,6 +69,7 @@ npm install
```

For good measure, make sure your npm and ruby paths are in your .bashrc or .zshrc

```bash
# ruby
export PATH="/usr/local/opt/ruby/bin:$PATH"
Expand All @@ -68,12 +78,14 @@ export PATH="/usr/local/opt/ruby/bin:$PATH"
export PATH=/usr/local/share/npm/bin:$PATH
```

Make sure `grunt` works (we use grunt to see changes in real-time... ie: `hot-reload`)
Make sure `grunt` works (we use grunt to see changes in real-time... ie: `hot-reload` )

```bash
grunt
```

Install a few npm packages

```bash
# provides hot reload for dev
sudo npm install -g grunt-cli
Expand All @@ -83,6 +95,7 @@ sudo npm install -g sass
```

## Link the theme to the Lightning docs

Create an `.env.json` file that connects this theme to the lightning docs.

```bash
Expand All @@ -91,13 +104,15 @@ touch .env.json
```

Now copy paste the following into the `.env.json`

```json
{
"DOCS_DIR": "path/to/pytorch_lightning/docs/source/"
}
```

## Development

Run the docs this way

```
Expand All @@ -115,11 +130,11 @@ export PL_FAST_DOCS_DEV=0
export PL_FAST_DOCS_DEV=1
```


### Optional: build the demo docs

The lightning_sphinx_theme repo has a "demo" project (not lightning docs) that show you the styles very quickly.

First add the following entry to `.env.json`.
First add the following entry to `.env.json` .

```json
{
Expand Down Expand Up @@ -164,8 +179,8 @@ Once that is successful commit the change to Github.

To be able to modify and preview the theme locally against the PyTorch Lightning Docs and/or the PyTorch Lightning Tutorials first clone the repositories:

- [PyTorch Lightning (Docs)](https://github.com/pytorch/pytorch)
- [PyTorch Lightning Tutorials](https://github.com/pytorch/tutorials)
* [PyTorch Lightning (Docs)](https://github.com/pytorch/pytorch)
* [PyTorch Lightning Tutorials](https://github.com/pytorch/tutorials)

Then follow the instructions in each repository to make the docs.

Expand All @@ -185,21 +200,22 @@ make html
make html
```

Once these are successful, navigate to the `conf.py` file in each project. In the Docs these are at `./docs/source`. The Tutorials one can be found in the root directory.
Once these are successful, navigate to the `conf.py` file in each project. In the Docs these are at `./docs/source` . The Tutorials one can be found in the root directory.

In `conf.py` change the html theme to `pt_lightning_sphinx_theme` and point the html theme path to this repo's local folder, which will end up looking something like:

```
html_theme = 'pt_lightning_sphinx_theme'
html_theme_path = ["../../../lightning_sphinx_theme"]
html_theme = 'torchdyn_sphinx_theme'
html_theme_path = ["../../torchdyn_sphinx_theme"]
```

Next create a file `.env.json` in the root of the THEME repo with some keys/values referencing the local folders of the Docs and Tutorials repos:

```
{
"TUTORIALS_DIR": "../tutorials",
"DOCS_DIR": "../pytorch_lightning/docs/source"
"DOCS_DIR": "../pytorch_lightning/docs/source",
"TORCHDYN_DIR": "../torchdyn/docs/"
}
```
Expand All @@ -209,13 +225,20 @@ You can then build the Docs or Tutorials by running
```
grunt --project=docs
```

or

```
grunt --project=tutorials
```

These will generate a live-reloaded local build for the respective projects available at `localhost:1919`.
or

```
grunt --project=torchdyn
```

These will generate a live-reloaded local build for the respective projects available at `localhost:1919` .

Note that while live reloading works these two projects are hefty and will take a few seconds to build and reload, especially the Docs.

Expand Down Expand Up @@ -247,7 +270,7 @@ html_context = {

### Top/Mobile Navigation

The top navigation and mobile menu expect an "active" state for one of the menu items. To ensure that either "Docs" or "Tutorials" is marked as active, set the following config value in the respective `conf.py`, where `{project}` is either `"docs"` or `"tutorials"`.
The top navigation and mobile menu expect an "active" state for one of the menu items. To ensure that either "Docs" or "Tutorials" is marked as active, set the following config value in the respective `conf.py` , where `{project}` is either `"docs"` or `"tutorials"` .

```
html_theme_options = {
Expand All @@ -256,3 +279,14 @@ html_theme_options = {
...
}
```

## Publish theme on pypi

Update version number at [./torchdyn_sphinx_theme/__init__.py](./torchdyn_sphinx_theme/__init__.py) and then run:

```
python setup.py bdist_wheel
python -m twine upload dist/*
```

You'll be asked for the pypi credentials, ask [email protected] if you need help.
9 changes: 0 additions & 9 deletions pt_lightning_sphinx_theme/static/js/vendor/anchor.min.js

This file was deleted.

1 change: 0 additions & 1 deletion scss/_sphinx_base.scss
Original file line number Diff line number Diff line change
Expand Up @@ -824,7 +824,6 @@ article.pytorch-article {
}

@include sphinx-full-size {
width: 850px;
margin-left: rem(30px);
}

Expand Down
6 changes: 6 additions & 0 deletions scss/_sphinx_layout.scss
Original file line number Diff line number Diff line change
Expand Up @@ -920,3 +920,9 @@
background-color: hover_background;
color: $color_primary;
}

.colab {
> img {
width: auto !important;
}
}
2 changes: 2 additions & 0 deletions scss/theme.scss
Original file line number Diff line number Diff line change
Expand Up @@ -12,3 +12,5 @@

@import "sphinx_base";
@import "sphinx_layout";

@import "torchdyn/torchdyn";
Loading

0 comments on commit 6baf792

Please sign in to comment.