Skip to content

Docs: emojis in TOC captions, FontAwesome on external links in TOC (Diátaxis) #10039

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.

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

Merged
merged 2 commits into from
Feb 17, 2023

Conversation

benjaoming
Copy link
Contributor

@benjaoming benjaoming commented Feb 16, 2023

Refs: #10026 (comment)


📚 Documentation previews 📚

Copy link
Member

@ericholscher ericholscher left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks 💯 to me -- though seems offset in height a bit? It would probably be good to center it vertically if we can.

Screenshot 2023-02-16 at 9 18 58 AM

@@ -9,3 +9,15 @@
#rtd-stickybox-container {
text-align: center;
}

.wy-menu.wy-menu-vertical a.reference.external::after {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'd argue for this on all external links, but baby steps :)

Though @humitos had a good point that it makes the link more visible, but I think it's good to be explicit here?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

image

Though #10026 (comment) that it makes the link more visible, but I think it's good to be explicit here?

The font-awesome icon is much more discreet so I think that it works better.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I get a feeling that this will cause unintended side-effects.. like if the <a> is on an <img> tag

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yea, we likely need to scope it smartly. I'm sure there's good examples of doing this other places, but we can start w/ the toctree for now.

hash = hash.replace(/[^0-9a-z\-_]/gi, '');
// If the hash is inside a tab panel
var tab_with_reference = $(".sphinx-tabs-panel #" + hash).parents(".sphinx-tabs-panel");
if (hash) {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What changed in this file? Seems like it needs a comment.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The git diff is awful, it was just a matter of adding if (hash) { to fix a JS error occurring on all pages.

It's explained in line 22, the following code is pretty verbose:

// Uses a hash referencing a Sphinx label from the URL page#sphinx-label
var hash = window.location.hash.substr(1);
if (hash) {
...

@benjaoming benjaoming merged commit 7ff0025 into readthedocs:main Feb 17, 2023
@benjaoming benjaoming deleted the diataxis/navigation-emoji branch February 17, 2023 07:46
@gwilku
Copy link

gwilku commented Mar 14, 2023

Is there any chance this feature and usage is documented in the user guide? I'd like to use emoji's in my docs, but can't figure a way to add the sphinxemoji module myself... And even if I think I succeeded, the substitution doesn't happen and I get raw |:emojicodehere:| output.

@benjaoming
Copy link
Contributor Author

@gwilku you can actually use emojis directly in your code. Using an extension isn't required. Here is the raw code: https://raw.githubusercontent.com/readthedocs/readthedocs.org/main/docs/user/index.rst

Small tip: You should check that your text editor can display emojis, though, since it's really annoying to edit files with emojis that aren't shown in the editor. Most modern text editors do.

Good luck!

@gwilku
Copy link

gwilku commented Mar 15, 2023 via email

@benjaoming
Copy link
Contributor Author

@gwilku interesting! You can perhaps use the only directive to fix that: https://www.sphinx-doc.org/en/master/usage/restructuredtext/directives.html#directive-only

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants