Skip to main content
`Ctrl`+`K`
⚠️The latest release refactored our HTML, so double-check your custom CSS rules!⚠️

# Architecture of the repository

This is a short overview of the general architecture and structure of the repository, to help you orient yourself.

This theme uses sphinx-theme-builder as its build backend, and follows the filesystem layout recommended by it. See below for some more specific sections

## `src/sphinx_book_theme/` - Theme source files

This folder contains all of the source files for this theme, and most changes to the theme are made somewhere inside this folder.

`__init__.py`

  The theme’s Python module, which runs several configuration and set-up steps. This module does things like load in Sphinx’s default HTML for the sidebar, and modify it in order to have dropdown nested lists. It also inserts several variables into the Jinja template context that are then used in our HTML templates.

`header_buttons/`

  Scripts to generate metadata for buttons in the header. We use Jinja Macros (in the `macros/` folder) to generate the HTML for header buttons. The scripts in `header_buttons/` generate the data structure that is used to generate buttons with these macros (in the `header-article.html` template).

`header_buttons/launch.py`

  Logic to create the correct URLs for our launch buttons. This basically means building the URL for a given launch service in a proper fashion.

The other folders in this section are described in the next few sections.

### `/theme/sphinx_book_theme/` - HTML templates

This is the actual theme source that is packaged and distributed via PyPI. It contains HTML templates that make up the theme structure.

These follow the `sphinx-basic-ng` template structure.

- `layout.html` inherits from the pydata sphinx theme and modifies several sections.

- `theme.conf` contains the Sphinx configuration file for this theme.

- `macros/` contains HTML templates that define Jinja macros

- `sections/` contains HTML templates for major sections of the page.

- `components/` contains HTML templates for smaller, self-contained parts of the page.

### `/assets/scripts` - JavaScript assets

Contains JavaScript files for this theme. They are automatically compiled and inserted into the theme when new releases are made (or, via the command `stb compile`). They are not checked in to `git` history.

### `/assets/styles` - SCSS assets

Contains SCSS files for this theme. These are compiled and bundled with the theme at build time. See the Style and Design section for more information.

### `/translations/` - Translations and internationalization

This folder contains all of the translations that we use in this theme, so that it may be used in many different base languages. For more information about our translation infrastructure, see `/translations/README.md`.

## `docs/` - Site documentation

The documentation for the theme, written as a Sphinx documentation site. The documentation tries to follow the Diataxis.fr documentation framework.

Here is a brief overview:

- `docs/*.md`: Contains several topic sections for the documentation (e.g. `content-blocks.md` covers special content blocks for this theme)

- `docs/tutorials/`: Step-by-step tutorials that cover how to do a particular thing from beginning to end.

- `docs/reference/`: Reference sections of the documentation, to demonstrate the look and feel of the theme. The “kitchen sink” is pulled directly from the `sphinx-themes` website. There are also other sections for theme-specific elements.

## `webpack.config.js` and `package.json` - Webpack and dependencies

`webpack.config.js` contains the compilation code to convert source files like SCSS and JS in `src/sphinx_book_theme/assets/*` into the production assets in `src/sphinx_book_theme/theme/sphinx_book_theme/static/` . This compilation is called by default, during development commands (see below).

## `tests/` - Testing infrastructure

Testing infrastructure that uses `pytest` along with `beautifulsoup` to validate that the generated HTML is what we expect it to be. Much of these tests also use `pytest-regressions`, to check whether newly-generated HTML differs from previously-generated HTML.

## `.github/workflows/` - Continuous Integration and Deployment

Contains Continuous-integration (CI) workflows, run on commits/PRs to the GitHub repository.

## Parent theme - `pydata-sphinx-theme`

This theme inherits a lot of functionality and design rules from its parent theme, the PyData Sphinx Theme. This is a theme designed for the PyData community, with a similar look and feel to the book theme. Over time, we try to upstream any improvements made here into the parent theme, as long as the look and feel is the same between the two.

If you come across something in the codebase and you’re not sure where it comes from (an example is the `generate_nav_html` function), you should check the PyData Theme source files to see if it is defined there.