Skip to content

Add check against site language to navItem language to determine href… #175

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 7 commits into
base: main
Choose a base branch
from
Open

Add check against site language to navItem language to determine href… #175

Changes from 6 commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
919f2cd
Add check against site language to navItem language to determine href…
JamieC24 Jul 25, 2025
b84234f
Remove funky if-checks to see if data comes through
JamieC24 Jul 25, 2025
0863c00
Just add an echo to see if language is coming through or whether it's…
JamieC24 Jul 25, 2025
5fb0a70
Add support for targetLinkLanguage field
JamieC24 Jul 25, 2025
bc677ff
Add support for labels when pages are in a different language
JamieC24 Aug 5, 2025
1f95108
Fix highlighted issues on markup and remove homepage_href block
JamieC24 Aug 14, 2025
934b99e
Genericise targetLinkLanguage setting
JamieC24 Sep 8, 2025
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
45 changes: 42 additions & 3 deletions templates/components/styles/global_nav.html.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,8 @@
<nav id="global-nav" aria-label="Main">
<div class="global-nav__inner l-center">
<a class="logo-link" href="{% block homepage_link %}/{% endblock %}" hreflang="{% block homepage_hreflang %}en{% endblock %}">
{# {% set siteLang %}{% block homepage_hreflang %}en{% endblock %}{% endset %} #}
{% set siteLang = site.locale|default('en')|trans %}
<a class="logo-link" href="{% block homepage_link %}/{% endblock %}" hreflang="{{ siteLang }}">
<span class="logo">
<img src="{{ absolute_url(asset('w3c/w3c-no-bars.svg', 'logos')) }}" alt="{{ 'header.logo_alt'|trans({}, 'w3c_website_templates_bundle') }}" role="img"/>
</span>
Expand All @@ -11,7 +13,25 @@
<ul data-component="nav-double-intro">
{%~ for navItem in navigation %}
<li class="top-nav-item has-children">
<a href="{{ navItem.titleLink }}" class="nav-link">{{ navItem.title }}</a>
{% if navItem.targetLinkLanguage is not empty %}
{% set targetLangLabel = '' %}
{% set langDiff = false %}
{% if navItem.targetLinkLanguage is not same as siteLang %}
{% set langDiff = true %}

{% if navItem.targetLinkLanguage == 'zh-Hans' %}
{% set targetLangLabel = "Chinese" %}
{% else %}
{% set targetLangLabel = "English" %}
{% endif %}
Copy link
Contributor

@jean-gui jean-gui Sep 3, 2025 •
edited
Loading

Choose a reason for hiding this comment

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

See my previous comment on how to make this more generic

{% endif %}
{% endif %}
<a href="{{ navItem.titleLink }}" class="nav-link"{% if langDiff is defined and langDiff %} hreflang="{{ navItem.targetLinkLanguage }}"{% endif %}>
{{ navItem.title }}
{% if navItem.targetLinkLanguage is not empty %}
{{ (langDiff is defined and langDiff) ? '(' ~ targetLangLabel ~ ')' : '' }}
Copy link
Contributor

Choose a reason for hiding this comment

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

When the target language is different from the current one, you chose to display it as "(Language)". Do you think it should be styled to be less prominent?

https://www.w3.org/International/questions/qa-link-lang suggests some CSS, that, despite not being accessible (at least because of the contrast ratio), makes that less "in your face". It also suggests adding the language through CSS content rather than in the markup, but I don't know what are the implications of one or the other.

{% endif %}
</a>
<div class="nav__submenu" data-nav="submenu" style="display: none;">
<div class="l-center">
<div class="nav__submenu__intro">
Expand All @@ -29,7 +49,26 @@
<ul>
{%~ for child in navItem.children %}
<li{{ child.startNewColumn is defined and child.startNewColumn ? ' class="break-after"' : '' }}>{# -#}
<a href="{{ child.url }}">{{ child.title }}</a>{# -#}

{% if child.targetLinkLanguage is not empty %}
{% set childLangDiff = siteLang != child.targetLinkLanguage %}
{% set targetLangLabel = '' %}

{% if childLangDiff == true %}
{% if child.targetLinkLanguage == 'zh-Hans' %}
{% set targetLangLabel = "Chinese" %}
{% else %}
{% set targetLangLabel = "English" %}
{% endif %}
Copy link
Contributor

Choose a reason for hiding this comment

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

This doesn't work for languages other than Chinese or English. The following code should make it generic, thanks to twig's language_name filter.

Suggested change
{% if child.targetLinkLanguage == 'zh-Hans' %}
{% set targetLangLabel = "Chinese" %}
{% else %}
{% set targetLangLabel = "English" %}
{% endif %}
{% set targetLangLabel = child.targetLinkLanguage|replace('-', '_')|language_name(siteLang) %}

Note that I replace - with _ because language_name seems to expect 'zh_Hans' instead of 'zh-Hans'

{% endif %}
{% endif %}

<a href="{{ child.url }}"{% if childLangDiff is defined and childLangDiff == true %} hreflang="{{ child.targetLinkLanguage }}{% endif %}">
{{ child.title }}
{% if child.targetLinkLanguage is not empty %}
{{ (childLangDiff is defined and childLangDiff) ? '(' ~ targetLangLabel ~ ')' : '' }}
{% endif %}
</a>{# -#}
</li>
{%~ endfor %}
</ul>
Expand Down