From 3feaae8fde0abf19b379cbe08f011c460df507cc Mon Sep 17 00:00:00 2001 From: Mikhail Andrenkov Date: Fri, 22 Sep 2023 10:18:46 -0400 Subject: [PATCH] Update footer and navbar to match PennyLane website (#40) * Add and modify theme variables to account for new PennyLane footer * Update footer styling to match new PennyLane footer * Add theme variables for footer icon and social icon colour * Fix silent errors while loading custom reST directives * Update year of copyright * Add new theme variables and update existing descriptions * Rename 'socials' to 'social icons' * Update navbar styling to match new PennyLane navbar * Remove deprecated `toc_hover` theme option * Bump version to `0.4.0` * Update wording in changelog message * Update PR number in changelog * Remove one-second delay before closing navbar dropdown * Restore navbar dropdown delay but prevent multiple expansions * Fix layout discrepencies between PennyLane website * Ensure external links open in a new tab or window * Fix compatibility issues with Firefox * Update hover colour of LHS navbar links * Update hover colour of LHS navbar chevrons * Remove link to Xanadu Cloud in footer * Use object instead of array to store timer pairs * Update hover colour of footer links * Keep underline in footer tagline on hover --- .github/CHANGELOG.md | 11 +- README.rst | 106 +++- doc/conf.py | 34 +- xanadu_sphinx_theme/__init__.py | 55 +- xanadu_sphinx_theme/_version.py | 2 +- xanadu_sphinx_theme/footer.html | 112 ++-- xanadu_sphinx_theme/header.html | 280 ++++++--- xanadu_sphinx_theme/layout.html | 71 ++- xanadu_sphinx_theme/static/xanadu.css_t | 788 ++++++++++++++++++++---- xanadu_sphinx_theme/theme.conf | 35 +- 10 files changed, 1145 insertions(+), 349 deletions(-) diff --git a/.github/CHANGELOG.md b/.github/CHANGELOG.md index ed10a6f..f0ea3cf 100644 --- a/.github/CHANGELOG.md +++ b/.github/CHANGELOG.md @@ -1,10 +1,17 @@ -## Release 0.4.0 (development release) +## Release 0.4.0 (current release) + +### Improvements + +* Updated the navbar and footer configuration and styles to match the PennyLane website. + [#40](https://github.com/XanaduAI/xanadu-sphinx-theme/pull/40) ### Contributors This release contains contributions from (in alphabetical order): -## Release 0.3.7 (current release) +[Mikhail Andrenkov](https://github.com/Mandrenkov). + +## Release 0.3.7 ### Improvements diff --git a/README.rst b/README.rst index e68d26e..3e8d558 100644 --- a/README.rst +++ b/README.rst @@ -120,7 +120,7 @@ the ``html_theme_options`` dictionary in your ``conf.py`` file. ``google_analytics_tracking_id`` Google Analytics tracking ID to enable website analytics. - + ``github_repo`` The GitHub organization and repository associated with the documentation. E.g., for a GitHub repository https://github.com/Organization/repo, this should be @@ -155,21 +155,22 @@ The following options customize the appearance of the navigation bar. ``navbar_left_links`` Links on the LHS of the navigation bar in the form of a list of dictionaries - with the ``"name"``, ``"href"``, and optionally, ``"active"`` keys. In addition, - the ``"img"`` key can be used to specify an image for the navbar link, - alongside ``"img_width"`` to specify the width of the image. + with the ``"name"``, ``"href"``, and optionally, ``"external"`` and + ``"dropdown"`` keys. -``navbar_right_links`` - Links on the RHS of the navigation bar in the form of a list of dictionaries - with the ``"name"`` and ``"href"`` keys. + The ``"external"`` key only determines if an "external link" icon should be + displayed next to the name of the link in the navbar. Otherwise, the value + of the ``"dropdown"`` key is another list of dictionaries of the same form + (except for the ``"dropdown"`` key) and specifies the links which should be + displayed in a dropdrown from the current link. -Footer ------- - -The following options customize the appearance of the footer. + In addition, the ``"img"`` key can be used to specify an image to replace + the navbar link, alongside ``"img_width"`` to specify the width of the image. -``extra_copyrights`` - List of extra copyright notices to place in the footer. +``navbar_right_links`` + Links on the RHS of the navigation bar in the form of a list of dictionaries + with the ``"name"``, ``"href"``, and optionally, ``"icon"`` keys. If a link + does not have an ``"icon"`` key, it will be displayed as a solid button. Table of contents ----------------- @@ -184,11 +185,6 @@ The following options customize the table of contents. Whether to show the global table of contents by default via the left sidebar. If ``False``, then the left sidebar will be disabled. -``toc_hover`` - Whether hovering over the active navbar link (or navbar logo if there is - no active navbar link) will show the global table of contents as a dropdown. - Only applies if ``toc_global=False``. - ``toc_subset`` If set to ``True``, and the current page has no local table of contents, the right-hand table of contents will instead display the current subset @@ -203,9 +199,25 @@ The following options customize the table of contents. Footer ------ + +The following options customize the appearance of the footer. + +``extra_copyrights`` + List of extra copyright notices to place in the footer. + ``footer_about`` - A dictionary of the form ``{"title": ..., "description": ...}`` that specifies - the 'About' section of the footer. Set to an empty dictionary to remove. + A dictionary of the form + + .. code-block:: python + + "footer_about": { + "title": "Title", + "icon": "https://...", + "href": "https://...", + "description": "Description" + } + + that specifies the 'About' section of the footer. ``footer_links`` A list of dictionaries of the form @@ -235,13 +247,12 @@ Footer that specifies footer links. Each top-level dictionary in the list is a separate titled column. Set to an empty list to remove. - -``footer_socials`` +``footer_social_icons`` A list of dictionaries of the form .. code-block:: python - "footer_socials": [ + "footer_social_icons": [ { "icon": "fab fa-twitter", "href": "https://twitter.com/xanaduai" @@ -256,10 +267,45 @@ Footer specifying social media icons. ``icon`` should correspond to a FontAwesome5 icon. Set to an empty list to remove. -``footer_tagline`` - A dictionary of the form ``{"text": "Some text", "href": "https://..."}`` specifying - a tagline hyperlink that appears underneath the social media icons. Set to an - empty dictionary to remove. +``footer_taglines`` + A list of dictionaries of the form + + .. code-block:: python + + "footer_taglines": [ + { + "text": "Some text", + "href": "https://..." + }, + { + "icon": "Some more text", + "href": "https://..." + }, + ... + ] + + specifying tagline hyperlinks that appear underneath the social media icons. + Set to an empty list to remove. + +``footer_policies`` + A list of dictionaries of the form + + .. code-block:: python + + "footer_policies": [ + { + "text": "Some text", + "href": "https://..." + }, + { + "icon": "Some more text", + "href": "https://..." + }, + ... + ] + + specifying policy hyperlinks that appear at the bottom of the footer. Set to + an empty list to remove. Style Colours ------------- @@ -278,6 +324,9 @@ These should be fully qualified CSS color specifiers such as ``#004B6B`` or Colours of the "Next" and "Previous" navigation buttons located at the bottom of most pages. +``social_icon_colour`` + Colour of the social icons. + ``table_header_background_colour`` Background colour of table headers. @@ -287,6 +336,9 @@ These should be fully qualified CSS color specifiers such as ``#004B6B`` or ``toc_marker_colour`` Colour of the marker beside the current ToC entry. +``toc_mobile_heading_colour`` and ``toc_mobile_heading_background_colour`` + Text and background colours of the mobile ToC heading. + .. configuration-end-inclusion-marker-do-not-remove Directives diff --git a/doc/conf.py b/doc/conf.py index 932d4b8..4b6091f 100644 --- a/doc/conf.py +++ b/doc/conf.py @@ -19,7 +19,7 @@ # -- Project information ----------------------------------------------------- project = 'Xanadu Sphinx Theme' -copyright = '2022, Xanadu Quantum Technologies' +copyright = '2023 | Xanadu | All rights reserved' author = 'Xanadu Inc.' # The version info for the project you're documenting, acts as replacement for @@ -101,12 +101,7 @@ html_theme_options = { "navbar_name": "Xanadu Sphinx Theme", "navbar_logo_colour": "#f48fb1", - # "navbar_home_link": "https://pennylane.ai", "navbar_left_links": [ - { - "name": "Blog", - "href": "javascript:void(0);", - }, { "name": "Search", "href": "search.html", @@ -114,15 +109,30 @@ { "name": "Documentation", "href": "index.html", - "active": True, - } + "dropdown": [ + { + "name": "Getting Started", + "href": "started.html", + }, + { + "name": "GitHub", + "href": "https://github.com/XanaduAI/xanadu-sphinx-theme", + "external": True, + } + ] + }, + { + "name": "Support", + "href": "https://discuss.pennylane.ai", + "external": True, + }, ], "navbar_right_links": [ { "name": "GitHub", "href": "https://github.com/XanaduAI/xanadu-sphinx-theme", - "icon": "fab fa-github", - }, + "icon": "bx bxl-github", + } ], "extra_copyrights": [ "Any extra copyrights can be added here." @@ -131,11 +141,13 @@ "prev_next_button_colour": "#f48fb1", "prev_next_button_hover_colour": "#ec407a", "table_header_background_colour": "#f8bbd0", + "social_icon_colour": "#ec407a", "text_accent_colour": "#f48fb1", "toc_marker_colour": "#f48fb1", + "toc_mobile_heading_colour": "#ec407a", + "toc_mobile_heading_background_colour": "#fcd9e5", "toc_overview": True, "toc_global": True, - "toc_hover": False, "relations": True } diff --git a/xanadu_sphinx_theme/__init__.py b/xanadu_sphinx_theme/__init__.py index 25d2542..7049ab2 100644 --- a/xanadu_sphinx_theme/__init__.py +++ b/xanadu_sphinx_theme/__init__.py @@ -40,7 +40,7 @@ def setup(app): app.add_html_theme("xanadu", str(cwd)) # set default footer sections - for section in ["about", "links", "socials", "tagline"]: + for section in ["about", "links", "policies", "social_icons", "taglines"]: if f"footer_{section}" not in app.config["html_theme_options"]: app.config["html_theme_options"][f"footer_{section}"] = XANADU_FOOTER[ f"footer_{section}" @@ -63,6 +63,8 @@ def setup(app): XANADU_FOOTER = { "footer_about": { "title": "Xanadu", + "icon": "_static/xanadu_logo.svg", + "href": "https://xanadu.ai", "description": """\ Located in the heart of downtown Toronto, we've brought together exceptional minds from around the world to build quantum computers @@ -135,13 +137,18 @@ def setup(app): "name": "Home", "href": "https://xanadu.ai/", }, - {"name": "About", "href": "https://xanadu.ai/about/"}, + { + "name": "About", + "href": "https://xanadu.ai/about/", + }, { "name": "Hardware", "href": "https://xanadu.ai/photonics", }, - {"name": "Careers", "href": "https://xanadu.ai/careers/"}, - {"name": "Cloud", "href": "https://cloud.xanadu.ai"}, + { + "name": "Careers", + "href": "https://xanadu.ai/careers/", + }, { "name": "Forum", "href": "https://discuss.pennylane.ai/", @@ -153,19 +160,37 @@ def setup(app): ], }, ], - "footer_socials": [ - {"icon": "fab fa-twitter", "href": "https://twitter.com/xanaduai"}, - {"icon": "fab fa-github", "href": "https://github.com/XanaduAI"}, - {"icon": "fab fa-linkedin-in", "href": "https://linkedin.com/company/xanaduai/"}, - {"icon": "fab fa-discourse", "href": "https://discuss.pennylane.ai"}, + "footer_social_icons": [ + { + "icon": "bx bxl-twitter", + "href": "https://twitter.com/xanaduai", + }, + { + "icon": "bx bxl-github", + "href": "https://github.com/XanaduAI", + }, + { + "icon": "bx bxl-linkedin", + "href": "https://linkedin.com/company/xanaduai/", + }, + { + "icon": "bx bxl-discourse", + "href": "https://discuss.pennylane.ai", + }, { - "icon": "fab fa-slack", + "icon": "bx bxl-slack", "href": "https://u.strawberryfields.ai/slack", }, - {"icon": "fas fa-rss", "href": "https://xanadu.ai/blog"}, + { + "icon": "bx bx-rss", + "href": "https://xanadu.ai/blog", + }, ], - "footer_tagline": { - "text": "Stay updated with our newsletter", - "href": "https://xanadu.us17.list-manage.com/subscribe?u=725f07a1d1a4337416c3129fd&id=294b062630", - }, + "footer_taglines": [ + { + "text": "Stay updated with our newsletter", + "href": "https://xanadu.us17.list-manage.com/subscribe?u=725f07a1d1a4337416c3129fd&id=294b062630", + }, + ], + "footer_policies": [], } diff --git a/xanadu_sphinx_theme/_version.py b/xanadu_sphinx_theme/_version.py index 537547d..d5e3adc 100644 --- a/xanadu_sphinx_theme/_version.py +++ b/xanadu_sphinx_theme/_version.py @@ -3,4 +3,4 @@ using the following format: ..[-]. """ -__version__ = "0.4.0-dev" +__version__ = "0.4.0" diff --git a/xanadu_sphinx_theme/footer.html b/xanadu_sphinx_theme/footer.html index 46ee759..f9a2448 100644 --- a/xanadu_sphinx_theme/footer.html +++ b/xanadu_sphinx_theme/footer.html @@ -1,73 +1,79 @@ -{% set num_link_cols = theme_footer_links|length %} +
-