Build documentation using Sphinx

README.md

@@ -15,9 +15,45 @@ found under the `API Reference` section of [https://gazebosim.org/docs](https://
 
 ## Main docs
 
-The documentation in this repository is updated whenever the
-[gazebosim-web-backend](https://github.com/gazebo-web/gazebosim-web-backend),
-is deployed. The gazebosim-web-backend webserver maintains a clone of this repository, and serves the markdown pages to https://gazebosim.org/docs.
+The documentation in this repository is built using [Sphinx](https://www.sphinx-doc.org/).
+To build, you need to install the following:
+
+* python virtualenv
+
+Create the virtual env and activate it:
+
+```bash
+python3 -m venv .venv
+source .venv/bin/activate
+```
+
+Then install the necessary dependencies:
+
+```bash
+pip install -r requirements.txt
+```
+
+```bash
+python3 build_multiversion.py
+```
+
+This will build all the documentation for all versions of Gazebo.
+You can preview the result locally by running an HTTP server on
+the output directory `.build`. For example:
+
+```bash
+python3 -m http.server 8000 -d .build
+
+```
+
+This will serve the website on <http://localhost:8000>
+
+For quicker iteration, you can build the documentation for a subset
+of Gazebo versions. To build `garden` and `harmonic`:
+
+```bash
+python3 build_multiversion.py --release garden harmonic
+```
 
 ## Library docs
 

_static/css/gazebo.css

@@ -0,0 +1,110 @@
+html {
+  --pst-font-family-base: Roboto, var(--pst-font-family-base-system);
+  --pst-font-size-base: 14px;
+}
+
+html[data-theme="light"] {
+  --gz-color-doc-header: #4fc3f7;
+  --gz-color-doc-header-text: #fff;
+  --pst-color-primary: #0277bd;
+  --gz-color-primary-sidebar: #f8f9fa;
+}
+
+html[data-theme="dark"] {
+  --gz-color-doc-header: rgb(15 23 36 / 30%);
+  --gz-color-doc-header-text: #fff;
+  --pst-color-primary: #0277bd;
+  --gz-color-primary-sidebar: #1a1c1e;
+  --pst-color-background: #131416;
+}
+
+a {
+  text-decoration: none;
+}
+
+pre {
+  border: none;
+}
+.bd-main .bd-content .bd-article-container {
+  max-width: 160em;
+}
+
+.bd-page-width {
+  max-width: 100%;
+}
+
+.bd-sidebar {
+  max-width: 20em;
+}
+
+.sidebar-primary-items__end {
+  display: none;
+}
+
+.bd-links__title {
+  display: none;
+}
+
+.navbar-nav .nav-item {
+  letter-spacing: normal;
+  text-transform: uppercase;
+  font-size: 16px;
+  text-decoration: none;
+  outline: 0;
+  transition: 0.5s;
+  font-weight: 400;
+  color: #6e6e6e;
+  border-bottom: 1px solid rgba(0, 0, 0, 0);
+}
+.navbar-nav li a {
+  margin-right: 20px;
+}
+
+.bd-header .navbar-header-items {
+  padding-left: 5em;
+}
+
+.nav-link.nav-external:after {
+  display: none;
+}
+
+.doc-heading {
+  width: 100%;
+  background-color: var(--gz-color-doc-header);
+  color: var(--gz-color-doc-header-text);
+  height: 120px;
+}
+
+.banner {
+  align-items: center;
+  padding: 20px 40px;
+  place-content: center space-between;
+  height: 100%;
+}
+
+header.navbar {
+  display: block;
+}
+
+.bd-sidebar-primary {
+  max-height: calc(100vh - var(--pst-header-height) + 120px);
+  top: calc(var(--pst-header-height) + 120px);
+  background-color: var(--gz-color-primary-sidebar);
+}
+
+.bd-sidebar-secondary {
+  max-height: calc(100vh - var(--pst-header-height) + 120px);
+  top: calc(var(--pst-header-height) + 120px);
+}
+
+.gz-version-switcher {
+  display: flex;
+}
+button.btn.version-switcher__button {
+  color: var(--gz-color-doc-header-text);
+  border-color: var(--gz-color-doc-header-text);
+}
+
+.navbar-brand img {
+  height: 84px;
+}