Package: qiskit-sphinx-theme
qiskit-sphinx-themeThe Sphinx themes for Qiskit and Qiskit Ecosystem documentation.Warning: new theme migrationIn qiskit-sphinx-theme 1.13, we added the newqiskittheme, which migrates from Pytorch to Furo for several improvements. qiskit-sphinx-theme 1.14 added theqiskit-ecosystemtheme. The old Pytorch theme will be removed in qiskit-sphinx-theme 2.0, which we expect to release in July or August 2023.See the sectionMigrate from old Pytorch theme to new themefor migration instructions.OverviewThis repository hosts three things:Qiskit Sphinx themes (located in thesrc/folder)Example Docs (located in theexample_docs/folder)Qiskit Docs Guide (located in thedocs_guide/folder)The Qiskit Sphinx Themes are the themes used by Qiskit Documentation (https://qiskit.org/documentation/) and Qiskit Ecosystem projects.The Example Docs is a minimal Sphinx project that is used for testing the Qiskit Sphinx Theme. Every
pull request will triggera GitHub workflowthat builds the Example Docs to make sure the changes do
not introduce unintended changes.The Qiskit Docs Guide hosts instructions, guidelines and recommendations of good documentation
practices. Its intent is to help Qiskit maintainers improve the documentation of their projects.
The guide is hosted online here:https://qisk.it/docs-guide.InstallationThis package is available on PyPI using:pipinstallqiskit-sphinx-themeThen, set up the theme by updatingconf.py:Sethtml_theme = "qiskit-ecosystem"(only Qiskit Terra should useqiskit)Add"qiskit_sphinx_theme"toextensionsYou also likely want to sethtml_titleinconf.py. This results in the left sidebar having a more useful and concise name, along with the page title in the browser. Most projects will want to use this in theirconf.py:# Sphinx expects you to set these already.project="My Project"release="4.12"# This sets the title to e.g. `My Project 4.12`.html_title=f"{project}{release}"Enable translationsFirst, coordinate with the Translations team athttps://github.com/qiskit-community/qiskit-translationsto express your interest and to coordinate setting up the infrastructure.Once the Translations team is ready, then update yourconf.py:Ensure thatqiskit_sphinx_themeis in theextensionssetting.Set the optiontranslations_listto a list of pairs of the locale code and the language name, e.g.[..., ("de_DE", "German")].Set the optiondocs_url_prefixto your project's URL prefix, likeecosystem/finance.For example:extensions=[...,"qiskit_sphinx_theme",]translations_list=[('en','English'),('bn_BN','Bengali'),('fr_FR','French'),('de_DE','German'),]docs_url_prefix="ecosystem/finance"Enable Previous ReleasesThis feature allows you to link to previous versions of the docs in the left sidebar.First, start additionally deploying your docs to<project-prefix>/stable/<version>/, e.g./ecosystem/finance/stable/0.5/index.html. Seehttps://github.com/Qiskit/qiskit-experiments/blob/227867937a08075092cd11756214bee3fb1d4d3d/tools/deploy_documentation.sh#L38-L39for an example.Then, update yourconf.py:Ensure thatqiskit_sphinx_themeis in theextensionssetting.Add to the optionhtml_contextan entry forversion_listwith a list of the prior versions, e.g.["0.4", "0.5"].Each of these versions must be deployed with the abovestable/<version>URL scheme.You can manually set this, or some projects write a Sphinx extension to dynamically compute the value.You should only put prior versions in this list, not the current release.Set the optiondocs_url_prefixto your project's URL prefix, likeecosystem/finance.For example:extensions=[...,"qiskit_sphinx_theme",]html_context={"version_list":["0.4","0.5"],}docs_url_prefix="ecosystem/finance"Use custom RST directivesTheqiskit_sphinx_themeextension defines the below custom directives for you to use in RST, if you'd like. Seeexample_docs/docs/sphinx_guide/custom_directives.rstfor examples of how to use them.qiskit-cardqiskit-call-to-action-itemandqiskit-call-to-action-gridEnable Qiskit.org AnalyticsQiskit.org uses Segment Analytics to collect information on traffic to sites under the qiskit.org domain. This is not enabled by default but if you would like to enable it you can add aanalytics_enabledvariable to thehtml_contextobject in yourconf.py. Setting this toTruewill enable analytics for your site once it is deployed toqiskit.org/.html_context={'analytics_enabled':True}By enabling analytics we will be able to collect information on number of visits to each documentation page. It will also trigger the addition of aWas this page helpful?component at the bottom of each documentation page, so users will be able to provide yes/no feedback for each page.If you do not enable analytics, no data will be collected and theWas this page helpful?component will not show.Add an announcement banner to all pages:warning:Note:This feature is currently only available for the Qiskit theme, it is not yet available in the Ecosystem themeTheqiskittheme includes the ability to add a custom announcement banner to every page. You can configure this in yourconf.pyby adding your
custom announcement text to thetheme_announcementvariable in thehtml_contextobject, for example:html_context = {
    "theme_announcement": "🎉 Custom announcement text!",
}The above code will enable the following banner:You can also optionally add a "Learn more" url by additionally setting theannouncement_urlin thehtml_context, like so:html_context = {
    "theme_announcement": "🎉 Custom announcement text!",
    "announcement_url": "https://example.com"
}The above code will render the following banner:The default text for the link is "Learn more" but you can provide custom link text by setting theannouncement_url_textin thehtml_context:html_context = {
    "theme_announcement": "🎉 Custom announcement text!",
    "announcement_url": "https://example.com",
    "announcement_url_text": "Check it out",
}Customize or disable the Ecosystem theme logoTheqiskit-ecosystemtheme includes the Qiskit Ecosystem logo by default.You can use a custom logo by adding a logo file (SVG or PNG) as a sibling to yourconf.py, e.g.docs/logo.svg. Then, sethtml_logoinconf.pyto the name of the file, e.g.html_logo = "logo.png".When using a custom logo, you may want to disable the project's name in the sidebar by settingsidebar_hide_nameinhtml_theme_options:html_theme_options={"sidebar_hide_name":True,}You can disable logos by settingdisable_ecosystem_logoinhtml_theme_options:html_theme_options={"disable_ecosystem_logo":True,}IBM Projects: how to use blue color scheme for Ecosystem themeBy default, theqiskit-ecosystemtheme uses purple as an accent color. Most projects should continue to use this, but certain highly IBM-affiliated projects like Qiskit IBM Runtime can change the accent color to blue by setting upconf.pylike this:# Only intended for specific IBM projects.html_theme_options={"light_css_variables":{"color-brand-primary":"var(--qiskit-color-blue)",}}Migrate from old Pytorch theme to new themeIn qiskit-sphinx-theme 1.13, we migrated to a new Sphinx theme calledqiskit, which is based on Furo from the pip, Black, and attrs documentation. Seehttps://github.com/Qiskit/qiskit_sphinx_theme/issues/232for the motivation. qiskit-sphinx-theme 1.14 added theqiskit-ecosystemtheme for Ecosystem projects.qiskit-sphinx-theme 1.13+ continues to support the legacy Pytorch theme, but support will be removed in version 2.0.To migrate, inconf.py:Ensure that"qiskit_sphinx_theme"is in theextensionslist.Sethtml_theme = "qiskit-ecosystem"rather than"qiskit_sphinx_theme". (qiskitshould only be used by Qiskit Terra.)Remove allhtml_theme_options.Removeexpandable_sidebarfromhtml_context, if set. If it was set, follow the below sectionHow to migrate expandable_sidebar.Render the docs and check that everything looks how expected. If not, please open a GitHub issue or reach out on Slack for help.How to migrate expandable_sidebarWith the old theme, to have expandable folders, you had to have a dedicated.. toctree ::directive with a:caption:option, like this:..toctree:::caption:My Folder:hidden:Page 1 <page1>
  Page 2 <page2>Instead, the new theme will render the:caption:as a top-level section header in the left sidebar, with top-level entries for each page. See the screenshot in the PR description ofhttps://github.com/Qiskit/qiskit_sphinx_theme/pull/384for an example of how the old theme renders:caption:and compare tothe new theme.Additionally, the new theme renders pages with their own subpages as expandable folders, unlike the old theme.For example,<apidocs/index>will include all subpages that are listed in the.. toctree ::of the pageapidocs/index.rst.So, when migrating, you have to decide which behavior you want:Use the new theme's style. No changes necessary.Use the new theme's style, but get rid of the top level section header. To implement:Consolidate the.. toctree ::directive with earlier ones so that they are all in the sametoctree.Keep the:caption:as an expandable folder, rather than a top-level section header. To implement:Create a new directory and RST file likemy_folder/index.rst.Move the.. toctree::directive to that page.Get rid of the:caption:option.Link to the new filemy_folder/index.rstin the parentindex.rstby adding it to a.. toctree ::in the parent.Tip: suggested site structureTo keep UX/UI similar across different Qiskit packages, we encourage the following structure for you sidebar, which can be set in the toctree of yourindex.rst:..toctree:::hidden:Documentation Home <index>
   Getting Started <getting_started>
   Tutorials <tutorials/index>
   How-to Guides <how_to/index>
   API Reference <apidocs/index>
   Explanations <explanations/index>
   Release Notes <release_notes>
   GitHub <https://github.com/your-repo>Each item in the toctree corresponds to a single.rstfile, and can use internal links or external. External links will have a "new tab" icon rendered next to them.