Git Product home page Git Product logo

pytorch_sphinx_theme's Introduction

PyTorch Sphinx Theme

Sphinx theme for PyTorch Docs and PyTorch Tutorials based on the Read the Docs Sphinx Theme.

Local Development

Run python setup:

git clone https://github.com/pytorch/pytorch_sphinx_theme
pip install -e pytorch_sphinx_theme

and install the dependencies using pip install -r docs/requirements.txt

In the root directory install the package.json:

# node version 8.4.0
yarn install

If you have npm installed then run:

npm install
  • If you want to see generated documentation for docs/demo then create .env.json file and make it empty json file. Means .env.json file will contain
{}

Run grunt to build the html site and enable live reloading of the demo app at localhost:1919:

grunt
  • If you want to specify the project folder (docs or tutorial for which you want to see docs generated) then you need to specify it into .env.json file:
{
    "DOCS_DIR": "docs/",
    "TUTORIALS_DIR": "path/to/tutorial/directory"
}

Run grunt to build the html site for docs:

grunt --project=docs

and to build the html site for tutorial:

grunt --project=tutorials

The resulting site is a demo.

Testing your changes and submitting a PR

When you are ready to submit a PR with your changes you can first test that your changes have been applied correctly against either the PyTorch Docs or Tutorials repo:

  1. Run the grunt build task on your branch and commit the build to Github.
  2. In your local docs or tutorials repo, remove any existing pytorch_sphinx_theme packages in the src folder (there should be a pip-delete-this-directory.txt file there)
  3. Clone the repo locally git clone https://github.com/pytorch/pytorch_sphinx_theme
  4. Install pytorch_sphinx_theme by running pip install -e pytorch_sphinx_theme
  5. Install the requirements pip install -r requirements.txt
  6. Remove the current build. In the docs this is make clean, tutorials is make clean-cache
  7. Build the static site. In the docs this is make html, tutorials is make html-noplot
  8. Open the site and look around. In the docs open docs/build/html/index.html, in the tutorials open _build/html.index.html

If your changes have been applied successfully, remove the build commit from your branch and submit your PR.

Publishing the theme

Before the new changes are visible in the theme the maintainer will need to run the build process:

grunt build

Once that is successful commit the change to Github.

Developing locally against PyTorch Docs and Tutorials

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

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

Once the docs have been successfully generated you should be able to run the following to create an html build.

Docs

# in ./docs
make html

Tutorials

# root directory
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.

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

html_theme = 'pytorch_sphinx_theme'
html_theme_path = ["../../../pytorch_sphinx_theme"]

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

{
  "TUTORIALS_DIR": "../tutorials",
  "DOCS_DIR": "../pytorch/docs/source"
}

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.

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

Built-in Stylesheets and Fonts

There are a couple of stylesheets and fonts inside the Docs and Tutorials repos themselves meant to override the existing theme. To ensure the most accurate styles we should comment out those files until the maintainers of those repos remove them:

Docs

# ./docs/source/conf.py

html_context = {
    # 'css_files': [
    #     'https://fonts.googleapis.com/css?family=Lato',
    #     '_static/css/pytorch_theme.css'
    # ],
}

Tutorials

# ./conf.py

# app.add_stylesheet('css/pytorch_theme.css')
# app.add_stylesheet('https://fonts.googleapis.com/css?family=Lato')

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".

html_theme_options = {
  ...
  'pytorch_project': {project}
  ...
}

pytorch_sphinx_theme's People

Contributors

ain-soph avatar bgreen23 avatar brianjo avatar brsoff avatar brucejlin avatar brucejlin1 avatar d4l3k avatar dependabot[bot] avatar ericnakagawa avatar ezyang avatar facebook-github-bot avatar fangohr avatar garymm avatar holly1238 avatar joelmarcey avatar malfet avatar mattip avatar msaroufim avatar nicolashug avatar osalpekar avatar patmellon avatar rodrigoberriel avatar shekharrajak avatar soumith avatar ssnl avatar svekars avatar thomasjo avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

pytorch_sphinx_theme's Issues

Container Fluid issues when the website is at small scale

When I minify the website smaller than 50%. It turns out that the tutorial and doc page can't scroll down and the container_fluid part keeps flickering.

Note that the Get Started page doesn't have this problem, even at 25% scale (I can scroll down to the end of the page).
Btw, my monitor resolution is 4k, I don't know whether it will affect the visual results too much.

Support for sphinx >= 3

All of Pytorch, torchaudio, torchtext, and torchvision pin the sphinx version to 2.4.4 because of rendering issues when ugprading to sphinx 3 (pytorch/audio#972, pytorch/vision#3681)

For example this signature renders fine in 2.4.4:

image

But it doesn't render properly with sphinx 3 (various annotations are missing, etc.):

image

Are there plans to add support for sphinx>=3?

CC @brianjo @holly1238

Fix Table of Contents

When viewing the docs on a narrow browser window, the table of contents is collapsed and placed at the top of the page.

pytorch_top

However, this table is lost when you scroll down, forcing you to scroll back to the top of the page to navigate somewhere else.

pytorch_middle

It would be nice to have it fixed to the top or have it otherwise easily accessible at any point on the page (maybe collapse it as you scroll down and have it pop up again as you scroll up?).

The auxiliary javascript sentence?

I wonder if L149 is necessary, since L151 does the same thing. Will that affect L150?

// If we found a matching link then reset current and re-apply
// otherwise retain the existing match
if (link.length > 0) {
$('.pytorch-menu-vertical .current').removeClass('current');
link.addClass('current');
link.closest('li.toctree-l1').addClass('current');
link.closest('li.toctree-l1').parent().addClass('current');
link.closest('li.toctree-l1').addClass('current');
link.closest('li.toctree-l2').addClass('current');
link.closest('li.toctree-l3').addClass('current');
link.closest('li.toctree-l4').addClass('current');
}
}

Incompatibility with nbsphinx

(duplicating spatialaudio/nbsphinx#599)

When including nbsphinx with pytorch_sphinx_theme several components of the theme break:

  • Permalinks to sections are hidden
  • The right (mobile) sidebar navigation expand/collapse buttons are hidden / don't work
  • The right (mobile) sidebar navigation doesn't scroll with the page and instead is stuck on the top of the page

nbsphinx uses requirejs which conflicts with bootstrap 4.0 (used here). We found the solution was to simply disable requirejs, however this will prevent nbsphinx widgets from working (not a problem for us at the moment).

@mgeier helpfully pointed out that pydata-sphinx-theme has solved this type of problem by including their js dependencies "UMD style" -- pydata/pydata-sphinx-theme#167. Is this something that would be possible to do here?

pypi package?

Do you mind pushing a pypi release of this theme?

Sphinx 6 breaks version selection menu

When upgrading to Sphinx 6, we found that the version selection menu no longer works. For example, compare the following versions of our documentation and attempt to change the version you are looking at:

I further narrowed this down by testing both Sphinx 5.3.0 and 6.0.0 and found that 6.0.0 is where the issue was first introduced.

Also, even before that, the placement of the version selection menu was off, and jumped to the other side of the screen for some reason.

Error: Unable to read ".env.json" file (Error code: ENOENT).

Hello Team,

I am trying to setup the Documentation and tutorial for PyTorch. I am following the installation instructions given here.I followed the same :

python setup.py install

npm install

grunt

but in last command I got this error :

Loading "Gruntfile.js" tasks...ERROR
>> Error: Unable to read ".env.json" file (Error code: ENOENT).
Warning: Task "default" not found. Use --force to continue.

Aborted due to warnings.

After commenting out the line, but still I got the I was not able to build and served in correctly in http://localhost:1919/

 Replace Autoprefixer browsers option to Browserslist config.
  Use browserslist key in package.json or .browserslistrc file.

  Using browsers option cause some error. Browserslist config 
  can be used for Babel, Autoprefixer, postcss-normalize and other tools.

  If you really need to use option, rename it to overrideBrowserslist.

  Learn more at:
  https://github.com/browserslist/browserslist#readme
  https://twitter.com/browserslist


Running "clean:build" (clean) task
>> 0 paths cleaned.

Running "clean:fonts" (clean) task
>> 1 path cleaned.

Running "clean:images" (clean) task
>> 1 path cleaned.

Running "clean:css" (clean) task
>> 1 path cleaned.

Running "clean:js" (clean) task
>> 2 paths cleaned.

Running "copy:fonts" (copy) task
Copied 24 files

Running "copy:images" (copy) task
Copied 19 files

Running "copy:vendor" (copy) task
Copied 86 files

Running "sass:dev" (sass) task

Running "postcss:dist" (postcss) task
>> 1 processed stylesheet created.
>> 1 sourcemap created.

Running "browserify:dev" (browserify) task
>> Bundle pytorch_sphinx_theme/static/js/theme.js created.

Running "exec:build_sphinx" (exec) task
Running Sphinx v2.1.2
loading translations [en]... done
>> Extension error:
>> Could not import extension sphinxcontrib.httpdomain (exception: No module named 'sphinxcontrib.httpdomain')
>> Exited with code: 2.
>> Error executing child process: Error: Command failed: sphinx-build docs/ docs/build
>> 
>> Extension error:
>> Could not import extension sphinxcontrib.httpdomain (exception: No module named 'sphinxcontrib.httpdomain')
Warning: Task "exec:build_sphinx" failed. Used --force, continuing.

Running "connect:server" (connect) task
Started connect web server on http://localhost:1919

Running "open:dev" (open) task

Running "watch" task
Waiting...

Can you please let me know if we can setup this independently of Tutorial and docs repo ?

Double backticks with spaces aren't rendered properly

It is sometimes useful to write code-like bits in the docs, and we use double backticks for that. Those bits may contain spaces, and currently the spaces will be rendered as the regular background instead of the grey-ish background. For example:

        boxes (Tensor[N, 4]): boxes in ``(x1, y1, x2, y2)`` format
            with ``0 <= x1 < x2`` and ``0 <= y1 < y2``.

Is rendered as:
image

link: https://pytorch.org/vision/stable/ops.html#torchvision.ops.nms

There are occurrences in the pytorch docs as well: https://pytorch.org/docs/stable/tensors.html#torch.Tensor.where

It would be nice to have a uniform background instead, that isn't divided by the spaces.

Rendering of definition lists

I'm trying to add a glossary to my project. Glossaries are simply syntactic sugar around definition lists, so I believe this affects definition lists in general. When I use a definition list, the rendering looks like:

Screen Shot 2021-07-03 at 10 00 03 AM

Compare this to other themes like RTD, where keys are bold and values are indented. Would it be possible to improve the rendering of definition lists?

UI issues

There are a couple of bugs that we need to fix:

  1. When you link to a page on the website it does not immediately expand the left navigation:
    pytorch_sphinx_theme_bug1.
    We need to find make sure that the left nav is expanded automatically.

  2. In Shortcuts, long headings are truncated:
    pytorch_sphinx_theme_bug2
    Need to make sure headings are correctly displayed in the Shortcuts.

The theme hides links to notebook in the sphinx-gallery examples

We have recently introduced a gallery of examples from sphinx-gallery in the torchvision docs

Normally, there should be a link on every example saying "Download Jupyter notebook:..." which is automatically generated by sphinx-gallery.

Unfortunately the pytorch_sphinx_theme seems to re-style those links with custom code but this only works for the tutorial repo. In the other repos, the links are deactivated: you can see that there's no link in this example, yet the html code exists, it's just being hidden by some CSS.

I believe that the offending lines are these

article.pytorch-article .sphx-glr-download-link-note.admonition.note,

with possibly these ones too:

// This code replaces the default sphinx gallery download buttons

and

https://github.com/pytorch/pytorch_sphinx_theme/blob/master/pytorch_sphinx_theme/layout.html#L275

Unfortunately my web dev skills are very weak so I'm unable to address this myself, but it would be very valuable to our users to have those links to the notebooks in the examples.

CC @brianjo @holly1238

License

There is no license in this repo. Is this an oversight?

Unauthenticated git protocol

In the section on testing a PR there is the following line

In requirements.txt replace the existing git link with a link pointing to your commit or branch, e.g. -e git+git://github.com/{ your repo }/pytorch_sphinx_theme.git@{ your commit hash }#egg=pytorch_sphinx_theme

We have a similar one in the torchserve doc builds https://github.com/pytorch/serve/blob/master/.github/workflows/doc-automation.yml#L22

However, using the unauthenticated git protocol has now been hard deprecated so instructions need to be updated https://github.com/pytorch/serve/runs/6044735966?check_suite_focus=true#step:3:127

This is fixable if we change the instructions to

git clone https://github.com/pytorch/pytorch_sphinx_theme
python3 pytorch_sphinx_theme/setup.py install --user

But now running into another issue https://github.com/msaroufim/serve/runs/6045621527?check_suite_focus=true#step:4:16

The background of spaces within double backticks are not rendered correctly.

When one writes code with spaces like ``input = L @ L.T`` this is rendered in a rather awkward as
image

Interestingly enough, this problem does not happen when we write that code in a non-white background, like that from .. note:: or .. warning::. See the first warning in https://pytorch.org/docs/1.9.0/generated/torch.svd.html

We tentatively solved this in torch.linalg by preferring single backticks over double backticks, but when referring to inputs of the function, that we used :attr:`input`. This has its own problems, as code as the one in the example above has to be written in a rather awkward way: :attr:`input`\ `= L @ L.T`. Things become more difficult when there are several attributes in the expression.

It would be convenient to solve the problem with the rendering of the inline code with two backticks in the template to be able to always prefer it over single backticks and the attr construction.

cc @mattip

Theme expand by default not working

The expand by default code doesn't seem to be working. Is there a way we can set that in script without having to rebuild the whole documentation set?

Also, when a user clicks a heading and goes to the new page, the section is again collapsed. It would be optimal if that stayed open on click.

Could we possibly use a cookie to save expand/collapse state for the user? That might be best for everything.

See the note in pytorch/tutorials#1372 and the new PR #97.

@Bgreen23

Allow recipes / tutorials to be opened in new tabs

A common browsing behavior is to ctrl + click / cmd + click a link to open a new tab.

Because we've overwritten the click handler below:

// Get the card link from the card's link attribute
$(".tutorials-card").on("click", function() {
window.location = $(this).attr("link");
});

Instead of using an a element or similar, we forcibly navigate the user to a single recipe at a time.

This is frustrating for people who may want to open multiple recipes simultaneously but are unable to do so.

Is google analytics supported?

The docs suggest that GA is supported by this theme, with the analytics_id setting.

But I couldn't find any other references to GA in the theme code. I also tried using this option in a torchvision's PR 336f95c (#3660) , but looking at the source of the html rendered docs, there doesn't seem to be any mention to GA.

How to use it? Canonical way seems to not work

Dear All,

I have installed the theme using

pip install git+https://github.com/pytorch/pytorch_sphinx_theme.git

imported and included in my conf.py file as follows:

extensions = [
    "sphinx.ext.autodoc",
    "sphinx.ext.githubpages",
    'sphinx.ext.coverage',
    "sphinx.ext.napoleon",
    "pytorch_sphinx_theme", # <- HERE!
    "recommonmark"
]

However, the theme is still sphinx_rtd_theme.

Thank you in advance.

Best Regards,

Francesco

Button to get directly link to an item is gone

There used to be a button-like thing for each item where I can click to get a permlink to that item. See the gray "link" icon next to source. (It only shows up when hovered over).
screenshot 2018-09-21 13 09 40

It was very useful, but now it's gone.

Unable to define width of image

I'm using pytorch_sphinx_theme for a PyTorch domain library I'm developing. When I try to add a link to an external SVG image (like a badge) it seems that I'm unable to control the width of the image. For example:

.. image:: https://colab.research.google.com/assets/colab-badge.svg
   :width: 200

When I build this, no matter what width I specify, it is always 100%. The HTML is being rendered correctly:

<a class="reference internal image-reference" href="https://colab.research.google.com/assets/colab-badge.svg"><img alt="https://colab.research.google.com/assets/colab-badge.svg" src="https://colab.research.google.com/assets/colab-badge.svg" width="200" /></a>

but because of these lines of CSS:

article.pytorch-article img {
  width: 100%;
}

the width is being overridden. If I remove that section from the CSS it behaves as expected.

Is this section actually needed for something, or should I submit a PR to remove it?

P.S. @calebrob6 is the one who actually found the offending lines of CSS.

[Request] To convert this theme into a generic sphinx theme

As of now, there are only a handful of themes for sphinx that are both functional and visually pleasing. The theme developed for the new layout of pytorch docs and tutorials (for version 1.0) is quite elegant, and it would be great if this theme could be converted into a generic sphinx theme, making it possible for anyone to use it.

Or perhaps, if there is a workaround to do this?

For example,

If I wanted to use the pytorch_sphinx_theme, I could

pip install pytorch_sphinx_theme

Then in my conf.py,

html_theme = "pytorch_sphinx_theme"

feature request : Dark Theme

It would be great if there could be a support for dark theme. It is painful to switch from other apps/pages with dark theme to PyTorch docs.

Thanks!

Reuse for PyTorch project

Hello, I would be interested in some kind of guide how we could reuse this cool theme also for Lightning (which belongs now to PyTorch ecosystem). In particular, I would like to ask how to re=maps paths from top and bottom navigation and/or how to drop some options from these navigations?

Lightning-AI/pytorch-lightning#521

Issue with ::= not bolding correctly.

We’re seeing an odd bolding on some BNF notation. (::=) Example here: https://pytorch.org/docs/master/jit_language_reference_v2.html#torchscript-type-system-definition

In discussion with @mattip, he mentioned this.

It is due to the theme: the stanza is broken up into class="n", class="o" and class="p". But in theme.css there is only
.highlight .o {
color: #000000;
font-weight: bold;
}
without n and p

I have no idea why the html is formatted to that level of detail, and where the n,o,p classes come from

Rendering of "Parameters", "Returns", "Return type" sections has changed when upgrading sphinx to 2.4.4

The rendering of these sections changed at some point and it makes the docs less readable than before. For example https://pytorch.org/vision/master/io.html#torchvision.io.VideoReader:

Before with sphinx 1.7 and below: GOOD

When pytorch was using sphinx 1.7 the docs looked like this, which was fine:

image

Now with sphinx 5: BAD

However with sphinx 5.x.x (which all repos currently use), it looks like this, which is less readable:

image

(Note: it didn't start with sphinx 5. Sphinx 2.X had the same problem)
This affects all pytorch repos (also torchaudio,text,vision).

CC @brianjo @holly1238 pinging you here as discussed yesterday :)

API docs have formatting issues

The API docs have the following formatting issue since we upgraded to the latest Sphinx:

Attributes of class or a function, such as Parameters, Args, Return values and so on are formatted in the same manner as methods and functions. For example:

Screenshot 2023-05-03 at 4 05 41 PM

Instead we want them to be in just bold font introducing a list:
Screenshot 2023-05-03 at 4 03 34 PM

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.