From d3655ab4e7977a1f2c4283515643f8f96ffb2c0e Mon Sep 17 00:00:00 2001 From: Chris Holdgraf Date: Sun, 1 May 2022 21:05:12 +0200 Subject: [PATCH] Prototype landing page edits --- docs/customize/index.md | 2 ++ docs/index.md | 3 ++ pyproject.toml | 2 +- src/sphinx_book_theme/__init__.py | 29 ++++++++++++++++++- .../assets/styles/sections/_article.scss | 2 +- .../styles/sections/_sidebars-toggle.scss | 12 +++++++- .../theme/sphinx_book_theme/layout.html | 6 ++-- .../theme/sphinx_book_theme/theme.conf | 6 ++-- 8 files changed, 54 insertions(+), 8 deletions(-) diff --git a/docs/customize/index.md b/docs/customize/index.md index d3c0f58a..81059418 100644 --- a/docs/customize/index.md +++ b/docs/customize/index.md @@ -9,6 +9,8 @@ The following options are available via `html_theme_options` ```{list-table} :widths: 10 5 40 :header-rows: 1 +:class: full-width + * - Key - Type - Description diff --git a/docs/index.md b/docs/index.md index 31a59790..77ecce3b 100644 --- a/docs/index.md +++ b/docs/index.md @@ -1,5 +1,8 @@ --- title: The Sphinx Book Theme +theme: + collapse_sidebar: true + full_width: true --- ::::{grid} diff --git a/pyproject.toml b/pyproject.toml index 25119c6a..d8a8129a 100644 --- a/pyproject.toml +++ b/pyproject.toml @@ -54,7 +54,7 @@ doc = [ "numpy", "matplotlib", "numpydoc", - "myst-nb~=0.13", + "myst-nb~=0.13.2", "nbclient", "pandas", "plotly", diff --git a/src/sphinx_book_theme/__init__.py b/src/sphinx_book_theme/__init__.py index 208099d7..456ca063 100644 --- a/src/sphinx_book_theme/__init__.py +++ b/src/sphinx_book_theme/__init__.py @@ -1,4 +1,5 @@ """A lightweight book theme based on the pydata sphinx theme.""" +import json import hashlib import os from pathlib import Path @@ -28,7 +29,10 @@ def get_html_theme_path(): def add_metadata_to_page(app, pagename, templatename, context, doctree): - """Adds some metadata about the page that we re-use later.""" + """Adds some metadata about the page that we re-use later. + + If page-metadata is specified, this over-rides global config. + """ # Add the site title to our context so it can be inserted into the navbar if not context.get("root_doc"): # TODO: Sphinx renamed master to root in 4.x, deprecate when we drop 3.x @@ -60,6 +64,29 @@ def add_metadata_to_page(app, pagename, templatename, context, doctree): context.get("theme_search_bar_text", "Search the docs ...") ) + # Configuration for page-level styling + page_theme_config = _get_page_theme_config(app, pagename) + theme_config_vals = [ + # Collapse the sidebar if specified at the page- or site-level + "collapse_sidebar", + # Content expands to take up whole screen, TOC is hidden by default + "full_width", + ] + for config_key in theme_config_vals: + config_value = context.get(f"theme_{config_key}") + config_value = page_theme_config.get(config_key, config_value) + context[config_key] = config_value + + +@lru_cache(maxsize=None) +def _get_page_theme_config(app, pagename): + """Return theme config from page-level metadata.""" + meta = app.env.metadata.get(pagename, {}).get("theme", {}) + if meta: + # If page-level theme metadata is provided, it will be in JSON string form + meta = json.loads(meta) + return meta + @lru_cache(maxsize=None) def _gen_hash(path: str) -> str: diff --git a/src/sphinx_book_theme/assets/styles/sections/_article.scss b/src/sphinx_book_theme/assets/styles/sections/_article.scss index b87e9c89..57043e9b 100644 --- a/src/sphinx_book_theme/assets/styles/sections/_article.scss +++ b/src/sphinx_book_theme/assets/styles/sections/_article.scss @@ -8,7 +8,7 @@ body { #main-content, #print-main-content { - transition: padding $animation-time ease-out; + transition: all $animation-time ease-out; padding-top: 1.5em; } diff --git a/src/sphinx_book_theme/assets/styles/sections/_sidebars-toggle.scss b/src/sphinx_book_theme/assets/styles/sections/_sidebars-toggle.scss index 4d1ecbe9..e1fe8e15 100644 --- a/src/sphinx_book_theme/assets/styles/sections/_sidebars-toggle.scss +++ b/src/sphinx_book_theme/assets/styles/sections/_sidebars-toggle.scss @@ -18,8 +18,18 @@ input#__navigation { // When we hide the sidebar on widescreen, add some padding to content & ~ .container-xl #main-content { - padding-left: 4rem; + padding-left: 7rem; padding-right: 4rem; + + // At full-width, there is no margin so add some extra padding + &.full-width { + padding-left: 4rem; + padding-right: 4rem; + margin: auto; + // Set the maximum width to an L container in bootstrap + // ref: https://getbootstrap.com/docs/5.0/layout/containers/ + max-width: 960px; + } } } } diff --git a/src/sphinx_book_theme/theme/sphinx_book_theme/layout.html b/src/sphinx_book_theme/theme/sphinx_book_theme/layout.html index 37f19bce..7e77f6ce 100644 --- a/src/sphinx_book_theme/theme/sphinx_book_theme/layout.html +++ b/src/sphinx_book_theme/theme/sphinx_book_theme/layout.html @@ -6,7 +6,8 @@ {% block content %} - +{% set checked=" checked" if collapse_sidebar == True else "" %} + @@ -77,7 +78,8 @@

{{ translate(theme_toc_title) }}

-
+ {% set full_width = ' class="full-width"' if (full_width == True) else '' %} +
{{ super() }}