diff --git a/README.md b/README.md index 2dc335a..21341dc 100644 --- a/README.md +++ b/README.md @@ -9,7 +9,7 @@ > **Note** > **Updating from v0.2 to v0.3.** -> When moving from v0.2 to v0.3 the name of the extention was changed. Please update the name used in the extention list of your `conf.py` from `sphinx-favicon` to `sphinx_favicon`. +> When moving from v0.2 to v0.3 the name of the extension was changed. Please update the name used in the extension list of your `conf.py` from `sphinx-favicon` to `sphinx_favicon`. **A Sphinx extension to add custom favicons** diff --git a/docs/source/_static/announcment.html b/docs/source/_static/announcment.html index cc5ceb8..f80e2ff 100644 --- a/docs/source/_static/announcment.html +++ b/docs/source/_static/announcment.html @@ -1,3 +1,3 @@

- When moving from v0.2 to v0.3 the name of the extention was changed. Please update the name used in the extention list of your conf.py from sphinx-favicon to sphinx_favicon. -

\ No newline at end of file + When moving from v0.2 to v0.3 the name of the extension was changed. Please update the name used in the extension list of your conf.py from sphinx-favicon to sphinx_favicon. +

diff --git a/docs/source/_static/custom.css b/docs/source/_static/custom.css index f66af7b..64192c1 100644 --- a/docs/source/_static/custom.css +++ b/docs/source/_static/custom.css @@ -18,4 +18,9 @@ div.highlight-console pre span.go::before { border-right: 1px solid var(--pst-color-text-base); margin-right: 0.5em; padding-right: 0.5em; -} \ No newline at end of file +} + +.card-header-gray { + background-color: #c2c2c2 !important; + font-weight: bold; +} diff --git a/docs/source/conf.py b/docs/source/conf.py index 3492021..327f5f4 100644 --- a/docs/source/conf.py +++ b/docs/source/conf.py @@ -9,13 +9,18 @@ year = dt.datetime.now().year # -- Project information ------------------------------------------------------- -project = "sphinx-favicon" +project = "Sphinx Favicon" copyright = f"{year}, Timo Metzger" author = "Timo Metzger" release = version # -- General configuration ----------------------------------------------------- -extensions = ["sphinx_favicon", "sphinx_copybutton"] +extensions = [ + "sphinx.ext.autosectionlabel", + "sphinx_favicon", + "sphinx_copybutton", + "sphinx_design", +] source_suffix = [".rst", ".md"] templates_path = ["_templates"] exclude_patterns = ["Thumbs.db", ".DS_Store", "**.ipynb_checkpoints"] @@ -53,12 +58,7 @@ # -- Option for favicons ------------------------------------------------------- favicons = [ # generic icons compatible with most browsers - { - # "rel": "icon", # automatically set to "icon" if omitted - # "sizes": "32x32", # automatically set if the file can be read - # "type": "image/png", # autogenerated from file type - "href": "favicon-32x32.png", - }, + {"href": "favicon-32x32.png"}, "favicon-16x16.png", {"rel": "shortcut icon", "sizes": "any", "href": "favicon.ico"}, # chrome specific diff --git a/docs/source/configuration.rst b/docs/source/configuration.rst new file mode 100644 index 0000000..d200f09 --- /dev/null +++ b/docs/source/configuration.rst @@ -0,0 +1,186 @@ +Configuration +============= + +In the quickstart guide, you have used a simple list of favicons and **Sphinx Favicon** +has automatically generated the corresponding HTML tags. + +This section will explain how to customize the configuration and use specific tags and +attributes such as ``apple-touch-icon``. + +Defining favicons +^^^^^^^^^^^^^^^^^ + +Every favicon in **Sphinx Favicon** is defined as a dictionary of HTML attributes. + +For a single favicon, you can provide a single dictionary: + +.. code-block:: python + + favicons = {"rel": "icon", "href": "icon.svg", "type": "image/svg+xml"} + +This will generate the following HTML tag: + +.. code-block:: html + + + +For multiple favicons, provide a list of dictionaries: + +.. code-block:: python + + favicons = [ + {"rel": "icon", "href": "icon.svg", "type": "image/svg+xml"}, + {"rel": "icon", "sizes": "16x16", "href": "favicon-16x16.png", "type": "image/png"}, + {"rel": "icon", "sizes": "32x32", "href": "favicon-32x32.png", "type": "image/png"}, + {"rel": "apple-touch-icon", "sizes": "180x180", "href": "apple-touch-icon-180x180.png" "type": "image/png"} + ] + +This will generate the following HTML tags: + +.. code-block:: html + + + + + + +For any attributes that you don't explicitly set, **Sphinx Favicon** will infer the +values from your provided input. For example: if you don't provide a ``type`` attribute, +**Sphinx Favicon** will infer the type from the file extension. If you don't provide a +``sizes`` attribute, **Sphinx Favicon** will attempt to read the pixel dimensions of the +provided image. + +.. note:: + + If you provide a simple list (like in the quickstart guide), **Sphinx Favicon** will + automatically generate the dict behind the scenes. + + Your list of favicons can also be a mixture of strings and dicts: + + .. code-block:: python + + favicons = [ + "icon.svg", + "favicon-32x32.png", + {"rel": "apple-touch-icon", "href": "apple-touch-icon.png"}, + ] + + This will generate the following HTML tags: + + .. code-block:: html + + + + + +Customization +^^^^^^^^^^^^^ + +You can use any parameters to define your favicon as long as they are interpreted by +browsers. + +The following attributes are the most commonly used ones: + +``href``: the image location +############################ + +You can define favicon images with the ``href`` attribute in two ways: + +Use an **absolute URL** for a favicon file. For example: + +.. code-block:: python + + "href": "https://www.sphinx-doc.org/en/master/_static/favicon.svg" + +Use a **local static file** as a favicon. Make sure you place your local static +favicon file(s) inside a directory listed in the Sphinx +`"html_static_path" `__. +For example: + +.. code-block:: python + + "href": "favicon.svg" + +.. note:: + + We continue to support the legacy ``static_file`` from v0.2 for local files. + +``sizes``: the image size +######################### + +Use the ``sizes`` attribute as defined +`here `__. + +For example: + +.. code-block:: python + + "sizes": "16x16" + +**Sphinx Favicon** automatically computes a favicon's size if you don't provide a +value for the ``sizes`` attribute (for BMP, GIF, JPEG, JPG and PNG files). + +``rel``: the favicon relation +############################# + +Use the ``rel`` attribute to define the favicon relation. This can either be the +standard `"icon" and "shortcut icon" `__, +or a custom relation like +`"apple-touch-icon" `__. + +For example: + +.. code-block:: python + + "rel": "apple-touch-icon" + +If you don't provide a value for the ``rel`` attribute, **Sphinx Favicon** will +automatically set ``rel="icon"``. + +``type``: the image MIME type +############################# + +Use the ``type`` to define a favicon's MIME type as defined +`here `__. + +For example: + +.. code-block:: python + + "type": "image/svg+xml" + +If you don't provide a value for the ``rel`` attribute, **Sphinx Favicon** will +automatically extract the MIME type from the provided image file (for BMP, GIF, ICO, +JPEG, JPG, PNG, and SVG files). + +``name``: specific to msapp icons +################################# + +You also have the option to specify a ``name`` attribute. This is useful for +``msapplication``-style favicons. + +If you use the ``name`` attribute, **Sphinx Favicon** will automatically set the +``rel`` attribute to ``"meta"``. + +For example: + +.. code-block:: python + + favicons = [ + "mstile-150x150.png", + {"name": "msapplication-TileColor", "content": "#2d89ef"}, + {"name": "theme-color", "content": "#ffffff"}, + ] + +This will generate the following HTML tags: + +.. code-block:: html + + + + + +.. tip:: + + See the ``conf.py`` file for this documentation in the project's GitHub repository, + at https://github.com/tcmetzger/sphinx-favicon/blob/main/docs/source/conf.py diff --git a/docs/source/contribute.rst b/docs/source/contribute.rst new file mode 100644 index 0000000..b191886 --- /dev/null +++ b/docs/source/contribute.rst @@ -0,0 +1,107 @@ +Contribute +========== + +Thank you for your help improving **Sphinx Favicon**! + +**Sphinx Favicon** uses `nox `__ to automate several +development-related tasks. +Currently, the project uses four automation processes (called sessions) in ``noxfile.py``: + +- ``mypy``: to perform a mypy check on the lib; +- ``test``: to run the test with pytest; +- ``docs``: to build the documentation in the ``build`` folder; +- ``lint``: to run the pre-commits in an isolated environment + +Every nox session is run in its own virtual environment, and the dependencies are +installed automatically. + +To run a specific nox automation process, use the following command: + +.. code-block:: console + + nox -s {{session name}} + +For example: ``nox -s test`` or ``nox -s docs``. + +Workflow for contributing changes +^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ + +We follow a typical GitHub workflow of: + +- Create a personal fork of this repo +- Create a branch +- Open a pull request +- Fix findings of various linters and checks +- Work through code review + +See the following sections for more details. + +Clone the repository +^^^^^^^^^^^^^^^^^^^^ + +First off, you'll need your own copy of the **Sphinx Favicon** codebase. You can +clone it for local development like so: + +Fork the repository so you have your own copy on GitHub. See the `GitHub forking guide +for more information `__. + +Then, clone the repository locally so that you have a local copy to work on: + +.. code-block:: console + + git clone https://github.com/{{ YOUR USERNAME }}/sphinx-favicon + cd sphinx-favicon + +Then install the development version of the extension: + +.. code-block:: console + + pip install -e .[dev] + +This will install the Sphinx Favicon library, together with two additional tools: +- `pre-commit `__ for automatically enforcing code standards + and quality checks before commits. +- `nox `__, for automating common development + tasks. + +Lastly, activate the pre-commit hooks by running: + +.. code-block:: console + + pre-commit install + +This will install the necessary dependencies to run pre-commit every time you make a +commit with Git. + +Contribute to the codebase +^^^^^^^^^^^^^^^^^^^^^^^^^^ + +Any larger updates to the codebase should include tests and documentation. +The tests are located in the ``tests`` folder, and the documentation is located in the +``docs`` folder. + +To run the tests locally, use the following command: + +.. code-block:: console + + nox -s test + +See :ref:`below ` for more information on how to update the documentation. + +.. _contributing-docs: + +Contribute to the docs +^^^^^^^^^^^^^^^^^^^^^^ + +The documentation is built using `Sphinx `__ and +deployed to `Read the Docs `__. + +To build the documentation locally, use the following command: + +.. code-block:: console + + nox -s docs + +For each pull request, the documentation is built and deployed to make it easier to +review the changes in the PR. To access the docs build from a PR, click on the "Read +the Docs" preview in the CI/CD jobs. diff --git a/docs/source/index.rst b/docs/source/index.rst index f4756c4..53d66d8 100644 --- a/docs/source/index.rst +++ b/docs/source/index.rst @@ -3,263 +3,60 @@ Sphinx Favicon **A Sphinx extension to add custom favicons** -With **sphinx-favicon**, you can add custom favicons to your Sphinx HTML documentation quickly and easily. +With **Sphinx Favicon**, you can add custom favicons to your Sphinx HTML documentation. -You can define favicons directly in your `conf.py`, with different `rel` attributes such as `"icon" `__ or `"apple-touch-icon" `__ and any favicon size. +You can define favicons directly in your ``conf.py``, using attributes such as ``rel``, +``sizes``, ``href``, or ``name``. **Sphinx Favicon** creates the respective ```` +or ```` tags in your HTML output. -The **sphinx-favicon** extension gives you more flexibility than the `standard "favicon.ico" supported by Sphinx `__. It provides a quick and easy way to add the most important favicon formats for different browsers and devices. +The **Sphinx Favicon** extension gives you more flexibility than the +`standard "favicon.ico" supported by Sphinx `_. +**Sphinx Favicon** provides a quick and easy way to add the most important favicon +formats for different browsers and devices. -Installation ------------- +For example, you can add support for general as well as vendor-specific favicons, +including ``apple-touch-icon`` and ``mask-icon``. See our +:ref:`quickstart guide ` to get started! -Use ``pip`` to install **sphinx-favicon** in your environment: +Documentation contents +---------------------- -.. code-block:: console - - pip install sphinx-favicon +This documentation contains three sections: +.. grid:: 1 1 3 3 -Usage ------ + .. grid-item-card:: + :link: quickstart + :link-type: ref + :class-header: card-header-gray -After installing **sphinx-favicon**, you can configure the extension directly in `conf.py`. There are two ways to include favicon files in your configuration: + Quickstart + ^^^ + ➡ Installation and basic usage -- Use an **absolute URL** for a favicon file (beginning with ``http://`` or ``https://``). -- Use a **local static file** as a favicon. Make sure you place your local static favicon file(s) inside a directory listed in `Sphinx "html_static_path" `__. + .. grid-item-card:: + :link: configuration + :link-type: ref + :class-header: card-header-gray -To configure **sphinx-favicon**, first add ``sphinx_favicon`` to the list of extensions: + Configuration + ^^^ + ➡ Detailed information about all configuration options and examples -.. code-block:: python + .. grid-item-card:: + :link: contribute + :link-type: ref + :class-header: card-header-gray - extensions = [ - #[...] - "sphinx_favicon", - ] + Contribute + ^^^ + ➡ Help improve Sphinx Favicon -Several options are then available to define favicons. They are listed in the following sections. - -Provide detailed metadata as a list of dicts -^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ - -Use a list of dicts for maximum control over the favicons added to your HTML document. You can use any parameters to define your favicon as long as they are interpreted by browsers. Some specific keywords will change the HTML content: - -- ``rel``: a value for the favicon's ``rel`` attribute, usually either the standard `icon `__ or a custom extension like `apple-touch-icon `__. -- ``sizes``: a value for the favicon's ``sizes`` attribute as defined `here `__. It is computed on the fly if not set. -- ``type``: a value specifying the favicon's MIME type as defined `here `__. It is computed automatically if not set. -- ``href``: the image file to use as favicon. This can be either an **absolute URL** or a **local static file**. If you want to use a local static file, make sure that this path is be relative to a directory listed in `Sphinx "html_static_path" `__ (usually ``_static``). -- ``name``: a value for the favicon's ``name``. Usually set for microsoft app metadata. If set, the tag will be set to ``meta``. - -**Example** - -.. code-block:: python - - html_static_path = ["_static"] # html_static_path is required if you use a local static file with the href parameter - - favicons = [ - { - "rel": "icon", - "href": "icon.svg", # => use `_static/icon.svg` - "type": "image/svg+xml", - }, - { - "rel": "icon", - "sizes": "16x16", - "href": "https://secure.example.com/favicon/favicon-16x16.png", - "type": "image/png", - }, - { - "rel": "icon", - "sizes": "32x32", - "href": "https://secure.example.com/favicon/favicon-32x32.png", - "type": "image/png", - }, - { - "rel": "apple-touch-icon", - "sizes": "180x180", - "href": "https://secure.example.com/favicon/apple-touch-icon-180x180.png", - "type": "image/png", - }, - ] - -Based on this configuration, Sphinx will include the following favicon information in the HTML `` element: - -.. code-block:: html - - - - - - -Note that the relative path to the favicon's image file in the static directory will be adjusted according to each html file's location. - -To make things easier for you, **sphinx-favicon** can also add *some* metadata to each favicon's `` element automatically: - -- If you don't provide the ``rel`` argument, **sphinx-favicon** automatically adds ``rel="icon"`` for ``link`` tags. -- if you don't provide the ``type`` argument, **sphinx-favicon** automatically determines the MIME type based on the image's filename extension. -- If not provided, **sphinx-favicon** will compute the ``sizes`` arguments automatically from the image provided in ``href``. - -Therefore, the following simplified configuration generates the exact same HTML result as above: - -.. code-block:: python - - html_static_path = ["_static"] - - favicons = [ - {"href": "icon.svg"}, # => use `_static/icon.svg` - {"href": "https://secure.example.com/favicon/favicon-16x16.png"}, - {"href": "https://secure.example.com/favicon/favicon-32x32.png"}, - { - "rel": "apple-touch-icon", - "href": "https://secure.example.com/favicon/apple-touch-icon-180x180.png", - }, - ] - -.. note:: - - For compatibility reasons, **sphinx-favicon** will also accept a static file path - with the ``static-file`` parameter instead of ``href``. - -Provide a single dict for just one favicon -^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ - -If you want to add just one custom favicon, you can also use a simple dict in ``conf.py``: - -.. code-block:: python - - favicons = { - "rel": "apple-touch-icon", - "sizes": "180x180", - "href": "https://secure.example.com/favicon/apple-touch-icon-180x180.png", - } - -Based on this configuration, Sphinx will include the following favicon information in the ```` of every HTML file: - -.. code-block:: html - - - -Provide a list of local favicon files or URLs -^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ - -The quickest way to add favicons is to just add a list of favicon URLs to ``conf.py``. - -.. code-block:: python - - html_static_path = ["_static"] - favicons = [ - "icon.svg", # => `_static_/icon.svg` - "https://secure.example.com/favicon/favicon-16x16.gif", - "https://secure.example.com/favicon/favicon-32x32.png", - "https://secure.example.com/favicon/apple-touch-icon-180x180.png", - ] - -Based on this configuration, Sphinx will include the following favicon information in the HTML ```` element: - -.. code-block:: html - - - - - - -Please note that if your URLs don't start with ``https://``, ``http://`` or ``/``, they will be considered a static file inside a directory listed in `Sphinx "html_static_path" `__. - -Contribute ----------- - -Thank you for your help improving **sphinx-favicon**! - -**sphinx-favicon** uses `nox `__ to automate several -development-related tasks. -Currently, the project uses four automation processes (called sessions) in ``noxfile.py``: - -- ``mypy``: to perform a mypy check on the lib; -- ``test``: to run the test with pytest; -- ``docs``: to build the documentation in the ``build`` folder; -- ``lint``: to run the pre-commits in an isolated environment - -Every nox session is run in its own virtual environment, and the dependencies are -installed automatically. - -To run a specific nox automation process, use the following command: - -.. code-block:: console - - nox -s {{session name}} - -Workflow for contributing changes -^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ - -We follow a typical GitHub workflow of: - -- Create a personal fork of this repo -- Create a branch -- Open a pull request -- Fix findings of various linters and checks -- Work through code review - -For each pull request, the documentation is built and deployed to make it easier to review the changes in the PR. To access this, click on the Read the Docs preview in the CI/CD jobs. - -.. note:: - - The sections below cover the steps to do this in more detail. - -Clone the repository -^^^^^^^^^^^^^^^^^^^^ - -First off, you'll need your own copy of the **sphinx-favicon** codebase. You can clone it for local development like so: - -Fork the repository so you have your own copy on GitHub. See the `GitHub forking guide for more information `__. Then, clone the repository locally so that you have a local copy to work on: - -.. code-block:: console - - git clone https://github.com/{{ YOUR USERNAME }}/sphinx-favicon - cd sphinx-favicon - -Then install the development version of the extention: - -.. code-block:: console - - pip install -e .[dev] - -This will install the sphinx-favicon library, together with two extra tools: -- `pre-commit `__ for automatically enforcing code standards and quality checks before commits. -- `nox `__, for automating common development tasks. - -Lastly, activate the pre-commit hooks by running: - -.. code-block:: console - - pre-commit install - -This will install the necessary dependencies to run pre-commit every time you make a commit with Git. - -Contribute to the codebase -^^^^^^^^^^^^^^^^^^^^^^^^^^ - -Any larger updates to the codebase should include tests and documentation. -The tests are located in the ``tests`` folder, and the documentation is located in the ``docs`` folder. - -To run the tests locally, use the following command: - -.. code-block:: console - - nox -s test - -See :ref:`below ` for more information on how to update the documentation. - -.. _contributing-docs: - -Contribute to the docs -^^^^^^^^^^^^^^^^^^^^^^ - -The documentation is built using `Sphinx `__ and -deployed to `Read the Docs `__. - -To build the documentation locally, use the following command: - -.. code-block:: console - - nox -s docs +.. toctree:: + :hidden: + :maxdepth: 2 + quickstart + configuration + contribute diff --git a/docs/source/quickstart.rst b/docs/source/quickstart.rst new file mode 100644 index 0000000..07c088b --- /dev/null +++ b/docs/source/quickstart.rst @@ -0,0 +1,97 @@ +Quickstart +========== + +This section contains basic information about **Sphinx Favicon** to get you started. + +Installation +------------ + +Use ``pip`` to install **Sphinx Favicon** in your environment: + +.. code-block:: console + + pip install sphinx-favicon + +Extension setup +--------------- + +Enable the extension +^^^^^^^^^^^^^^^^^^^^ + +After installing **Sphinx Favicon**, add ``sphinx_favicon`` to the list of extensions +in your ``conf.py`` file: + +.. code-block:: python + + extensions = [ + #[...] + "sphinx_favicon", + ] + +Check static directory configuration +^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ + +In case you want to use favicons from files in your static directory, make sure that +the `html_static_path `_ +in your ``conf.py`` is configured correctly. For example: + +.. code-block:: python + + html_static_path = ["_static"] + +Favicon configuration +--------------------- + +Add basic favicons +^^^^^^^^^^^^^^^^^^ + +After adding ``sphinx_favicon`` to your list of extensions, you can now use the +``favicons`` variable in ``conf.py`` to define favicons. + +There are many ways to define favicons, with varying degrees of complexity. +The simplest way to add favicons is to define a list of favicon file names or URLs. + +For example: + +.. code-block:: python + + favicons = [ + "favicon-16x16.png", + "favicon-32x32.png", + "icon.svg", + ] + +**Sphinx Favicon** automatically determines the relevant attributes for each favicon and +adjusts paths for static files where necessary. + +Based on this configuration, **Sphinx Favicon** adds the following ```` tags in +the HTML ```` for each page in your Sphinx-generated HTML documentation: + +.. code-block:: html + + + + + +You can mix file names (relative to your ``html_static_path``) and URLs in this list. +For example: + +.. code-block:: python + + favicons = [ + "https://picsum.photos/16/16", + "https://picsum.photos/32/32", + ] + +This will add the following ```` tags: + +.. code-block:: html + + + + +Advanced usage +-------------- + +This chapter only covers basic setup. For more advanced usage, see the +:ref:`following chapter `! diff --git a/pyproject.toml b/pyproject.toml index 698e74a..1778a09 100644 --- a/pyproject.toml +++ b/pyproject.toml @@ -48,7 +48,7 @@ Download = "https://github.com/tcmetzger/sphinx-favicon/archive/v${metadata:vers [project.optional-dependencies] dev = ["pre-commit", "nox"] test = ["pytest", "beautifulsoup4"] -doc = ["sphinx<6", "pydata-sphinx-theme", "sphinx-copybutton"] +doc = ["sphinx<6", "pydata-sphinx-theme", "sphinx-copybutton", "sphinx-design"] [tool.setuptools] license-files = ["LICENSE"] diff --git a/tests/test_options.py b/tests/test_options.py index 846448c..63c2145 100644 --- a/tests/test_options.py +++ b/tests/test_options.py @@ -1,4 +1,4 @@ -"""Test suit for the sphinx-favicon extention.""" +"""Test suite for the sphinx-favicon extension.""" from itertools import chain from pathlib import Path