Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Better support for SVGs in icon links #1487

Closed
gresavage opened this issue Sep 28, 2023 · 7 comments · Fixed by #1490
Closed

Better support for SVGs in icon links #1487

gresavage opened this issue Sep 28, 2023 · 7 comments · Fixed by #1490
Labels
good first issue Good for newcomers kind: documentation Improvements or additions to documentation

Comments

@gresavage
Copy link
Contributor

I am currently struggling to get the same behavior between a local SVG and a FontAwesome SVG.

I have my CSS set up to change the color of each icon to the flagship color of each destination. E.G #2496ED for docker, #FC6D26 for Gitlab, etc. However one of the icons I'm using is local because FontAwesome doesn't currently have it in its repertoire.

I see that local images are inserted into the HTML differently than a FontAwesome one so SVGs end up losing a lot of their functionality. In my case being able to have the fill="currentColor" behave appropriately.

I would like to propose that SVGs be able to be placed into the HTML for icon links the same way as FontAwesome ones - whether they reside on the web or locally. In my opinion, it's as simple as checking the extension of the file/url. Alternatively an additional type: svg could be handled.
@12rambau 12rambau added good first issue Good for newcomers kind: documentation Improvements or additions to documentation labels Sep 29, 2023
@12rambau
Copy link
Collaborator

It's actually already possible to use a custom svg icon and we are doing it in ou own documentation for the pypi icon. It was done in #1250.

  • copy the structure of the custom-icon.js file and replace the data by your svg
  • add it to the html_js files in your conf.py
  • use it as a fa normal icon

Let me know if it works. If it's the case and you have the time to write down a small documentation PR it would be wonderful.

@gresavage
Copy link
Contributor Author

gresavage commented Sep 29, 2023 via email

@gresavage
Copy link
Contributor Author

@12rambau this worked like a charm - I will try to get a PR for an update to the documentation in sometime this weekend

@12rambau 12rambau reopened this Sep 30, 2023
@12rambau
Copy link
Collaborator

I'm reopening the issue as I think the documentation would be beneficial for everyone !

@gresavage
Copy link
Contributor Author

So the good news is that I've got the project forked and I've updated the documentation but I can't, for the life of me, get the docs to build. Neither manually setting up a virtual environment nor using nox works. I keep getting an error in AutoAPI. This happens even from a fresh clone. Below is the output of nox -s docs

nox > sphinx-build -b=html docs/ docs/_build/html -v -w warnings.txt
Running Sphinx v5.3.0
Adding copy buttons to code blocks...
locale_dir /home/tgresavage/Projects/pydata-sphinx-theme/docs/locales/en/LC_MESSAGES does not exists
[autosummary] generating autosummary for: community/contributors.md, community/index.md, community/inspiration.md, community/practices/merge.md, community/practices/release.md, community/practices/versions.md, community/setup.md, community/structure.md, community/topics/accessibility.md, community/topics/assets.md, ..., user_guide/page-toc.rst, user_guide/performance.rst, user_guide/readthedocs.md, user_guide/search.rst, user_guide/source-buttons.rst, user_guide/static_assets.md, user_guide/styling.rst, user_guide/theme-elements.md, user_guide/version-dropdown.rst, user_guide/web-components.rst
[AutoAPI] Reading files... [ 12%] /home/tgresavage/Projects/pydata-sphinx-theme/src/pydata_sphinx_theme/edit_this_page.py                                                            
Traceback (most recent call last):
  File "/home/tgresavage/Projects/pydata-sphinx-theme/.nox/docs/lib/python3.10/site-packages/sphinx/events.py", line 94, in emit
    results.append(listener.handler(self.app, *args))
  File "/home/tgresavage/Projects/pydata-sphinx-theme/.nox/docs/lib/python3.10/site-packages/autoapi/extension.py", line 153, in run_autoapi
    if sphinx_mapper_obj.load(
  File "/home/tgresavage/Projects/pydata-sphinx-theme/.nox/docs/lib/python3.10/site-packages/autoapi/mappers/python/mapper.py", line 300, in load
    data = self.read_file(path=path, dir_root=dir_root)
  File "/home/tgresavage/Projects/pydata-sphinx-theme/.nox/docs/lib/python3.10/site-packages/autoapi/mappers/python/mapper.py", line 318, in read_file
    parsed_data = Parser().parse_file(path)
  File "/home/tgresavage/Projects/pydata-sphinx-theme/.nox/docs/lib/python3.10/site-packages/autoapi/mappers/python/parser.py", line 41, in parse_file
    return self._parse_file(
  File "/home/tgresavage/Projects/pydata-sphinx-theme/.nox/docs/lib/python3.10/site-packages/autoapi/mappers/python/parser.py", line 38, in _parse_file
    return self.parse(node)
  File "/home/tgresavage/Projects/pydata-sphinx-theme/.nox/docs/lib/python3.10/site-packages/autoapi/mappers/python/parser.py", line 265, in parse
    data = parse_func(node)
  File "/home/tgresavage/Projects/pydata-sphinx-theme/.nox/docs/lib/python3.10/site-packages/autoapi/mappers/python/parser.py", line 240, in parse_module
    "doc": _prepare_docstring(node.doc or ""),
AttributeError: 'Module' object has no attribute 'doc'

The above exception was the direct cause of the following exception:

Traceback (most recent call last):
  File "/home/tgresavage/Projects/pydata-sphinx-theme/.nox/docs/lib/python3.10/site-packages/sphinx/cmd/build.py", line 276, in build_main
    app = Sphinx(args.sourcedir, args.confdir, args.outputdir,
  File "/home/tgresavage/Projects/pydata-sphinx-theme/.nox/docs/lib/python3.10/site-packages/sphinx/application.py", line 262, in __init__
    self._init_builder()
  File "/home/tgresavage/Projects/pydata-sphinx-theme/.nox/docs/lib/python3.10/site-packages/sphinx/application.py", line 335, in _init_builder
    self.events.emit('builder-inited')
  File "/home/tgresavage/Projects/pydata-sphinx-theme/.nox/docs/lib/python3.10/site-packages/sphinx/events.py", line 105, in emit
    raise ExtensionError(__("Handler %r for event %r threw an exception") %
sphinx.errors.ExtensionError: Handler <function run_autoapi at 0x7fc3ab2c9990> for event 'builder-inited' threw an exception (exception: 'Module' object has no attribute 'doc')

Extension error (autoapi.extension):
Handler <function run_autoapi at 0x7fc3ab2c9990> for event 'builder-inited' threw an exception (exception: 'Module' object has no attribute 'doc')
nox > Command sphinx-build -b=html docs/ docs/_build/html -v -w warnings.txt failed with exit code 2
nox > Session docs failed.

@12rambau
Copy link
Collaborator

12rambau commented Oct 2, 2023

that's related to this issue: #1474 and the solution is in the pipe but not yet reviewed (#1482).

As we don't want to use too much of your time simply push your changes, I'll review them by hand, I know the docs structure by heart.

@gresavage gresavage mentioned this issue Oct 2, 2023
Merged
@gresavage
Copy link
Contributor Author

Very good! Then I just pushed my changes and started the PR

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
good first issue Good for newcomers kind: documentation Improvements or additions to documentation
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

docs: add instructions for custom SVG icons gresavage/pydata-sphinx-theme
2 participants
@gresavage @12rambau