diff --git a/CHANGELOG.md b/CHANGELOG.md index 89ac0ef94e..21931c9218 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -26,6 +26,11 @@ For the full list of changes, see the [0.x.y] release notes. **Breaking changes**: +- **Appearance**: + - The **language menu** is now visible from the navbar on all screen sizes + ([#2303]). The menu is hidden from the sidebar by default. To restore the + legacy behavior, set `ui.sidebar_lang_menu` to `true` in your project's + config. For details see, [Adding a language menu][]. - **Shortcodes**: - The alert shortcode has been reworked to address [#906] and [#939]. It can now be used with Markdown content, and it can contain calls to other @@ -43,8 +48,12 @@ For the full list of changes, see the [0.x.y] release notes. - Hamburger menu toggle button icon changes to an X when the menu is expanded ([#2301]). This is a style change only. -[0.x.y]: https://github.com/google/docsy/releases/latest?FIXME=v0.X.Y [#2300]: https://github.com/google/docsy/pull/2300 +[#2301]: https://github.com/google/docsy/pull/2301 +[#2303]: https://github.com/google/docsy/pull/2303 +[0.x.y]: https://github.com/google/docsy/releases/latest?FIXME=v0.X.Y +[Adding a language menu]: + https://www.docsy.dev/docs/adding-content/navigation/#adding-a-language-drop-down ## 0.12.0 diff --git a/assets/scss/_nav.scss b/assets/scss/_nav.scss index 3986ee8b22..f1b7bf5418 100644 --- a/assets/scss/_nav.scss +++ b/assets/scss/_nav.scss @@ -46,7 +46,7 @@ } .navbar-nav { - padding-top: $spacer * 0.5; + // padding-top: $spacer * 0.5; white-space: nowrap; } @@ -69,10 +69,6 @@ .nav-item { padding-inline-end: $spacer * 0.5; } - - .navbar-nav { - padding-top: 0 !important; - } } @include media-breakpoint-down(lg) { @@ -88,12 +84,17 @@ } .navbar-nav { - padding-bottom: 2rem; + // padding-bottom: 2rem; overflow-x: auto; } } .td-light-dark-menu { + position: unset !important; + display: flex; + align-items: center; + justify-content: center; + .bi { // Adapted from: https://github.com/twbs/bootstrap/blob/main/site/layouts/_default/examples.html width: 1em; @@ -101,12 +102,55 @@ vertical-align: -.125em; fill: currentcolor; } + } + + .td-lang-menu { + position: unset !important; + display: flex; + align-items: center; + justify-content: center; + + &__title { + padding-left: 0; + padding-right: 0; + + &::before { + font: var(--fa-font-solid); + content: fa-content($fa-var-globe); + padding-right: 0.5rem; + } + + &-code { + display: none; + } - &.dropdown { @include media-breakpoint-down(lg) { - position: unset; + &-text { + display: none; + } + &-code { + display: inline; + } + &::before { + padding-right: 0; + } } } + + .dropdown-item { + position: relative; + padding-left: 2.5rem; + + &.active::before { + font: var(--fa-font-solid); + content: fa-content($fa-var-check); + position: absolute; + left: 0.75rem; + top: 50%; + transform: translateY(-50%); + } + } + } } diff --git a/assets/scss/_sidebar-tree.scss b/assets/scss/_sidebar-tree.scss index 45338f9309..037419f0b0 100644 --- a/assets/scss/_sidebar-tree.scss +++ b/assets/scss/_sidebar-tree.scss @@ -194,4 +194,14 @@ display: block; } } + + .td-lang-menu { + &__title { + padding-left: 0 !important; + &-code { + display: none; + } + + } + } } diff --git a/layouts/_partials/head.html b/layouts/_partials/head.html index d25e217128..04a55e6f8f 100644 --- a/layouts/_partials/head.html +++ b/layouts/_partials/head.html @@ -6,7 +6,7 @@ {{ end -}} {{ $outputFormat := partial "outputformat.html" . -}} -{{ if and hugo.IsProduction (ne $outputFormat "print") -}} +{{ if and hugo.IsProduction (ne $outputFormat "print") (ne .Site.Language.Lang "xx") -}} {{ else -}} diff --git a/layouts/_partials/navbar-lang-selector.html b/layouts/_partials/navbar-lang-selector.html index 37ccc1139b..e8301e30d7 100644 --- a/layouts/_partials/navbar-lang-selector.html +++ b/layouts/_partials/navbar-lang-selector.html @@ -1,12 +1,35 @@ {{/* Link directly to documentation etc., if possible. */ -}} {{ $langPage := cond (gt (len .Translations) 0) . .Site.Home -}} -
-
+ {{/* */ -}} + + {{ $allPages := slice . -}} + {{ if .Translations -}} + {{ $allPages = $allPages | append .Translations -}} + {{ end -}} + + {{ range $.Site.Languages -}} + {{ $translatedPages := where $allPages "Language.Lang" .Lang -}} + {{ $translated := "" -}} + {{ if gt (len $translatedPages) 0 -}} + {{ $translated = index $translatedPages 0 -}} + {{- end -}} + {{ $isActive := eq $.Site.Language.Lang .Lang -}} +
  • + {{- if $isActive -}} + {{ .LanguageName }} + {{- else if $translated -}} + {{ .LanguageName }} + {{- else -}} + {{ .LanguageName }} + {{- end -}} +
    • + {{- end }} +
    \ No newline at end of file diff --git a/layouts/_partials/navbar.html b/layouts/_partials/navbar.html index 3ac3a365d8..c409b189b0 100644 --- a/layouts/_partials/navbar.html +++ b/layouts/_partials/navbar.html @@ -53,12 +53,12 @@ {{ end -}} {{ if (gt (len .Site.Home.Translations) 0) -}} -
  • +
  • {{ partial "navbar-lang-selector.html" . -}}
    • {{ end -}} {{ if .Site.Params.ui.showLightDarkModeMenu -}} -
  • +
  • {{ partial "theme-toggler" . }}
    • {{ end -}} diff --git a/layouts/_partials/sidebar-tree.html b/layouts/_partials/sidebar-tree.html index 7d6f6c72c6..65049bebc1 100644 --- a/layouts/_partials/sidebar-tree.html +++ b/layouts/_partials/sidebar-tree.html @@ -34,7 +34,7 @@ {{- if .Site.Params.ui.sidebar_search_disable }} td-sidebar-nav--search-disabled{{ end -}} {{- if .Site.Params.ui.sidebar_menu_foldable }} foldable-nav{{ end -}} " id="td-section-nav"> - {{ if (gt (len .Site.Home.Translations) 0) -}} + {{ if and .Site.Params.ui.sidebar_lang_menu (gt (len .Site.Home.Translations) 0) -}}
    {{ partial "navbar-lang-selector.html" . }}
    diff --git a/layouts/_partials/theme-toggler.html b/layouts/_partials/theme-toggler.html index f954f8bf50..b102f1752b 100644 --- a/layouts/_partials/theme-toggler.html +++ b/layouts/_partials/theme-toggler.html @@ -1,4 +1,6 @@ -{{/* Adapted from: https://github.com/twbs/bootstrap/blob/main/site/layouts/partials/icons.html */ -}} +
    + +{{- /* Adapted from: https://github.com/twbs/bootstrap/blob/main/site/layouts/partials/icons.html */ -}} @@ -15,26 +17,23 @@ +{{/* */ -}} {{/* Adapted from: https://github.com/twbs/bootstrap/blob/main/site/layouts/partials/theme-toggler.html */ -}} {{ $isExamples := eq .Layout "examples" -}} - -
    +{{/* */ -}} diff --git a/userguide/.htmltest.yml b/userguide/.htmltest.yml index 84454d65f3..5439010316 100644 --- a/userguide/.htmltest.yml +++ b/userguide/.htmltest.yml @@ -8,10 +8,12 @@ TestFilesConcurrently: true IgnoreDirs: - _print - ^blog/(\d+/)?page/\d+ + - ^xx # Placeholder language IgnoreEmptyHref: true # FIXME IgnoreInternalEmptyHash: true # FIXME IgnoreInternalURLs: # list of paths IgnoreURLs: # list of regexs of paths or URLs to be ignored + - ^(https://www.docsy.dev/)?xx/ # Placeholder language - \?no-link-check - (index.xml|_print/)$ # ignore - ^https?://[^/]+/(categories|tags)/ # ignore Docsy-generated content diff --git a/userguide/content/en/docs/adding-content/navigation.md b/userguide/content/en/docs/adding-content/navigation.md index cda7ea0f53..049059c8f1 100644 --- a/userguide/content/en/docs/adding-content/navigation.md +++ b/userguide/content/en/docs/adding-content/navigation.md @@ -161,15 +161,21 @@ version selector drop down to the top-level menu. You can find out more in the guide to [versioning your docs](/docs/adding-content/versioning/). -### Adding a language drop-down +### Adding a language dropdown -If you configure more than one language in `hugo.toml`, the Docsy theme adds a -language selector drop down to the top-level menu. Selecting a language takes -the user to the translated version of the current page, or the home page for the -given language. +If you configure more than one language in `hugo.toml`, Docsy adds a language +selector drop down to the navbar menu. Selecting a language takes the user to +the translated version of the current page, or the home page for the given +language. The menu is visible for all screen sizes. By default current site +language name is shown. On narrow displays, this is replaced by the language +code. You can find out more in [Multi-language support](/docs/language/). +You can control whether the language selector menu appears in the sidebar by +setting the optional parameter `.ui.sidebar_lang_menu` to `true` (default: +unset). + ## Section menu The section menu, as shown in the left side of the `docs` section, is diff --git a/userguide/hugo.yaml b/userguide/hugo.yaml index 1fce1b6856..ad1304d360 100644 --- a/userguide/hugo.yaml +++ b/userguide/hugo.yaml @@ -31,6 +31,11 @@ languages: languageName: English params: description: Docsy does docs + # Placeholder language used to demo multilingual support + xx: + languageName: Placeholder + params: + description: Docsy does multilingual docs markup: tableOfContents: @@ -77,6 +82,7 @@ params: ui: showLightDarkModeMenu: true sidebar_cache_limit: 10 + sidebar_lang_menu: true # Set to true to show the language menu in the sidebar sidebar_menu_compact: true sidebar_menu_foldable: false sidebar_search_disable: false @@ -147,5 +153,9 @@ module: target: content/project/changelog.md - source: ../CONTRIBUTING.md target: content/project/contributing.md + # Placeholder language used to demo multilingual support + - source: content/en + target: content + lang: xx # cSpell:ignore docsy github goldmark markmap plantuml readingtime userguide diff --git a/userguide/static/refcache.json b/userguide/static/refcache.json index a17b66d25a..d75d10e1e7 100644 --- a/userguide/static/refcache.json +++ b/userguide/static/refcache.json @@ -1131,6 +1131,14 @@ "StatusCode": 206, "LastSeen": "2025-05-22T19:21:14.104646-04:00" }, + "https://github.com/google/docsy/pull/2301": { + "StatusCode": 206, + "LastSeen": "2025-08-02T17:12:43.757038-04:00" + }, + "https://github.com/google/docsy/pull/2303": { + "StatusCode": 206, + "LastSeen": "2025-08-02T17:12:43.051065-04:00" + }, "https://github.com/google/docsy/pull/941": { "StatusCode": 206, "LastSeen": "2025-06-10T18:59:25.465236-04:00" @@ -2227,6 +2235,10 @@ "StatusCode": 200, "LastSeen": "2025-05-16T09:20:35.492337-04:00" }, + "https://www.docsy.dev/": { + "StatusCode": 206, + "LastSeen": "2025-08-02T16:19:13.783813-04:00" + }, "https://www.docsy.dev/about/": { "StatusCode": 206, "LastSeen": "2025-05-16T09:20:45.23027-04:00" @@ -2331,6 +2343,10 @@ "StatusCode": 206, "LastSeen": "2024-11-06T12:06:01.765051-05:00" }, + "https://www.docsy.dev/docs/adding-content/language/#adding-a-language-menu": { + "StatusCode": 404, + "LastSeen": "2025-08-02T17:12:43.30695-04:00" + }, "https://www.docsy.dev/docs/adding-content/lookandfeel/#before-page-content": { "StatusCode": 206, "LastSeen": "2025-05-22T13:24:36.066951-04:00" @@ -2347,6 +2363,10 @@ "StatusCode": 206, "LastSeen": "2024-11-06T12:08:17.225307-05:00" }, + "https://www.docsy.dev/docs/adding-content/navigation/#adding-a-language-drop-down": { + "StatusCode": 206, + "LastSeen": "2025-08-02T17:42:11.260079-04:00" + }, "https://www.docsy.dev/docs/adding-content/navigation/#breadcrumb-navigation": { "StatusCode": 206, "LastSeen": "2025-01-08T13:26:58.452656-05:00"