8000 Simplify navbar by tomchristie · Pull Request #3681 · mkdocs/mkdocs · GitHub
[go: up one dir, main page]
More Web Proxy on the site http://driver.im/
Skip to content

Simplify navbar #3681

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

Open
wants to merge 6 commits into
base: master
Choose a base branch
from
Open

Simplify navbar #3681

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
01394aa
Simplify navbar
tomchristie Apr 25, 2024
acdcdb6
Include 'next_prev' block
tomchristie Apr 25, 2024
292bc68
Update docs for 'next_prev' block.
tomchristie Apr 25, 2024
1d729f0
Clean
tomchristie Apr 25, 2024
d295dd4
Merge branch 'master' into simplify-navbar
tomchristie Apr 25, 2024
4bf62f8
Apply suggestions from code review
tomchristie Apr 26, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion docs/user-guide/customizing-your-theme.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -163,7 +163,7 @@ following blocks:
* `site_name`: Contains the site name in the navigation bar.
* `site_nav`: Contains the site navigation in the navigation bar.
* `search_button`: Contains the search box in the navigation bar.
* `next_prev`: Contains the next and previous buttons in the navigation bar.
* `next_prev`: Placeholder which can be overridden to include next and previous buttons in the navigation bar.
* `repo`: Contains the repository link in the navigation bar.
* `content`: Contains the page content and table of contents for the page.
* `footer`: Contains the page footer.
Expand Down
26 changes: 6 additions & 20 deletions mkdocs/themes/mkdocs/base.html 10000
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -114,37 +114,24 @@
{%- if 'search' in config.plugins %}
<li class="nav-item">
<a href="#" class="nav-link" data-bs-toggle="modal" data-bs-target="#mkdocs_search_modal">
<i class="fa fa-search"></i> {% trans %}Search{% endtrans %}
<i class="fa fa-search"></i><span class="d-lg-none ms-2">Search</span>
</a>
</li>
{%- endif %}
{%- endblock %}

{%- block next_prev %}
{%- if page and (page.next_page or page.previous_page) %}
<li class="nav-item">
<a rel="prev" {% if page.previous_page %}href="{{ page.previous_page.url|url }}" class="nav-link"{% else %}class="nav-link disabled"{% endif %}>
<i class="fa fa-arrow-left"></i> {% trans %}Previous{% endtrans %}
</a>
</li>
<li class="nav-item">
<a rel="next" {% if page.next_page %}href="{{ page.next_page.url|url }}" class="nav-link"{% else %}class="nav-link disabled"{% endif %}>
{% trans %}Next{% endtrans %} <i class="fa fa-arrow-right"></i>
</a>
</li>
{%- endif %}
{%- endblock %}
{%- block next_prev %}{%- endblock %}

{%- block repo %}
{%- if page and page.edit_url %}
<li class="nav-item">
<a href="{{ page.edit_url }}" class="nav-link">
Copy link
Member Author
@tomchristie tomchristie May 3, 2024 •
edited
Loading

Choose a reason for hiding this comment

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

Suggested change
<a href="{{ page.edit_url }}" class="nav-link">
<a href="{{ config.repo_url }}" class="nav-link">

Copy link
Contributor

Choose a reason for hiding this comment

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

Actually I think that both the edit_url and next_prev can go the page/content footer. That's how other generators mostly place them by default (and some inhouse boutique docs stacks too) and consumers are likely to be looking for them down there (or, basically acting as a CTA after finishing reading the current page — prev, next, or edit if needs updating).

Good call to have the repo icon in header only link to the repo_url to avoid any confusion (edit links render as 404 for logged-out users etc.), again pretty much a pattern nowadays.

Copy link
Contributor

Choose a reason for hiding this comment

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

PS: watch out for the {%- if page and page.edit_url %} condition right above if switching away from page.edit_url here…

{%- if config.repo_name == 'GitHub' -%}
<i class="fa-brands fa-github"></i> {% trans repo_name=config.repo_name %}Edit on {{ repo_name }}{% endtrans %}
<i class="fa-brands fa-github"></i><span class="d-lg-none ms-2">{% trans repo_name=config.repo_name %}Edit on {{ repo_name }}{% endtrans %}</span>
Copy link
Member Author

Choose a reason for hiding this comment

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

Suggested change
<i class="fa-brands fa-github"></i><span class="d-lg-none ms-2">{% trans repo_name=config.repo_name %}Edit on {{ repo_name }}{% endtrans %}</span>
<i class="fa-brands fa-github"></i><span class="d-lg-none ms-2">{{ config.repo_name }}</span>

{%- elif config.repo_name == 'Bitbucket' -%}
<i class="fa-brands fa-bitbucket"></i> {% trans repo_name=config.repo_name %}Edit on {{ repo_name }}{% endtrans %}
<i class="fa-brands fa-bitbucket"></i><span class="d-lg-none ms-2">{% trans repo_name=config.repo_name %}Edit on {{ repo_name }}{% endtrans %}</span>
Copy link
Member Author

Choose a reason for hiding this comment

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

Suggested change
<i class="fa-brands fa-bitbucket"></i><span class="d-lg-none ms-2">{% trans repo_name=config.repo_name %}Edit on {{ repo_name }}{% endtrans %}</span>
<i class="fa-brands fa-bitbucket"></i><span class="d-lg-none ms-2">{{ config.repo_name }}</span>

{%- elif config.repo_name == 'GitLab' -%}
<i class="fa-brands fa-gitlab"></i> {% trans repo_name=config.repo_name %}Edit on {{ repo_name }}{% endtrans %}
<i class="fa-brands fa-gitlab"></i><span class="d-lg-none ms-2">{% trans repo_name=config.repo_name %}Edit on {{ repo_name }}{% endtrans %}</span>
Copy link
Member Author

Choose a reason for hiding this comment

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

Suggested change
<i class="fa-brands fa-gitlab"></i><span class="d-lg-none ms-2">{% trans repo_name=config.repo_name %}Edit on {{ repo_name }}{% endtrans %}</span>
<i class="fa-brands fa-gitlab"></i><span class="d-lg-none ms-2">{{ config.repo_name }}</span>

{%- elif config.repo_name -%}
{% trans repo_name=config.repo_name%}Edit on {{ repo_name }}{% endtrans %}
Comment on lines 135 to 136
Copy link
Member Author

Choose a reason for hiding this comment

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

Suggested change
{%- elif config.repo_name -%}
{% trans repo_name=config.repo_name%}Edit on {{ repo_name }}{% endtrans %}
{%- elif config.repo_name -%}
{{ config.repo_name }}

{% else %}
Expand All @@ -171,8 +158,7 @@
{%- if config.theme.user_color_mode_toggle %}
<li class="nav-item dropdown">
<button id="theme-menu" aria-expanded="false" data-bs-toggle="dropdown" data-bs-display="static" aria-label="Toggle theme" class="nav-link dropdown-toggle">
<i class="fa-solid fa-circle-half-stroke fa-fw"></i>
<span class="d-lg-none ms-2">Toggle theme</span>
<i class="fa-solid fa-circle-half-stroke fa-fw"></i><span class="d-lg-none ms-2">Toggle theme</span>
</button>
<ul class="dropdown-menu dropdown-menu-end">
<li>
Expand Down
Loading
0