✨ Add new locale picker and related improvements

Closes: #583

CHANGELOG.md

@@ -8,6 +8,8 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ### Added
 
+- New portable locale picker that can be placed in any menu using the `locale` action ([#583](https://github.com/jpanther/congo/issues/583))
+- New icons for `chevron-down`, `chevron-up`, `globe` and `translate`
 - Plausible Analytics support ([#584](https://github.com/jpanther/congo/pull/584))
 - Spanish translation of example site samples ([#606](https://github.com/jpanther/congo/pull/606))
 - Japanese translation of docs and example site ([#618](https://github.com/jpanther/congo/pull/618))
@@ -15,6 +17,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ### Changed
 
+- ⚠️ Renamed the `params.rtl` language parameter to `languageDirection` as this is now supported by Hugo ([#583](https://github.com/jpanther/congo/issues/583))
 - Upgrade to Mermaid v10.4.0 ([#577](https://github.com/jpanther/congo/pull/577), [#582](https://github.com/jpanther/congo/pull/582), [#626](https://github.com/jpanther/congo/pull/626), [#638](https://github.com/jpanther/congo/pull/638))
 - Upgrade to KaTeX v0.16.8 ([#590](https://github.com/jpanther/congo/pull/590))
 - Upgrade to Tailwind v3.3.3 ([#602](https://github.com/jpanther/congo/pull/602))
@@ -28,6 +31,13 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 - URL to Congo project in footer used deprecated git.io short link ([#605](https://github.com/jpanther/congo/issues/605))
 - Various typos in the docs and example site ([#608](https://github.com/jpanther/congo/pull/608), [#609](https://github.com/jpanther/congo/pull/609), [#613](https://github.com/jpanther/congo/pull/613))
 - Incorrect `render` value is used in the 'external' archetype ([#630](https://github.com/jpanther/congo/pull/630))
+- Minor CSS improvements, mainly relating to RTL styling
+
+### Removed
+
+- Locales no longer appear next to the site name/logo as they are now part of the menu system ([#583](https://github.com/jpanther/congo/issues/583))
+- Language parameters `isoCode` and `displayName` are no longer supported ([#583](https://github.com/jpanther/congo/issues/583))
+- Meta `content-language` tag as it was not conveying the intended data (which is already inclded via the HTML `lang` attribute)
 
 ## [2.6.1] - 2023-06-04
 

assets/css/compiled/main.css

@@ -1745,6 +1745,10 @@ body:has(#menu-controller:checked) {
   bottom: 0px;
 }
 
+.bottom-7 {
+  bottom: 1.75rem;
+}
+
 .end-0 {
   inset-inline-end: 0px;
 }
@@ -1757,6 +1761,10 @@ body:has(#menu-controller:checked) {
   top: 5rem;
 }
 
+.top-8 {
+  top: 2rem;
+}
+
 .top-\[100vh\] {
   top: 100vh;
 }
@@ -1961,6 +1969,10 @@ body:has(#menu-controller:checked) {
   height: 3rem;
 }
 
+.h-2 {
+  height: 0.5rem;
+}
+
 .h-24 {
   height: 6rem;
 }
@@ -2065,6 +2077,10 @@ body:has(#menu-controller:checked) {
   flex: none;
 }
 
+.flex-grow {
+  flex-grow: 1;
+}
+
 .grow {
   flex-grow: 1;
 }
@@ -2112,6 +2128,10 @@ body:has(#menu-controller:checked) {
   align-items: center;
 }
 
+.justify-end {
+  justify-content: flex-end;
+}
+
 .justify-center {
   justify-content: center;
 }
@@ -2144,6 +2164,10 @@ body:has(#menu-controller:checked) {
   scroll-behavior: smooth;
 }
 
+.whitespace-nowrap {
+  white-space: nowrap;
+}
+
 .\!rounded-md {
   border-radius: 0.375rem !important;
 }
@@ -2338,6 +2362,11 @@ body:has(#menu-controller:checked) {
   padding-bottom: 1rem;
 }
 
+.pe-10 {
+  -webkit-padding-end: 2.5rem;
+          padding-inline-end: 2.5rem;
+}
+
 .pe-2 {
   -webkit-padding-end: 0.5rem;
           padding-inline-end: 0.5rem;
@@ -2388,6 +2417,14 @@ body:has(#menu-controller:checked) {
   text-align: right;
 }
 
+.text-start {
+  text-align: start;
+}
+
+.text-end {
+  text-align: end;
+}
+
 .align-top {
   vertical-align: top;
 }
@@ -2545,6 +2582,12 @@ body:has(#menu-controller:checked) {
   opacity: 0;
 }
 
+.shadow {
+  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
+  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
 .shadow-lg {
   --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
   --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
@@ -2708,6 +2751,10 @@ body:has(#menu-controller:checked) {
   outline-color: transparent;
 }
 
+.group:hover .group-hover\:visible {
+  visibility: visible;
+}
+
 .group:hover .group-hover\:-translate-x-\[2px\] {
   --tw-translate-x: -2px;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@@ -2743,6 +2790,10 @@ body:has(#menu-controller:checked) {
   opacity: 1;
 }
 
+:is([dir="ltr"] .ltr\:right-0) {
+  right: 0px;
+}
+
 :is([dir="ltr"] .ltr\:block) {
   display: block;
 }
@@ -2755,8 +2806,8 @@ body:has(#menu-controller:checked) {
   display: none;
 }
 
-:is([dir="ltr"] .ltr\:text-right) {
+:is([dir="rtl"] .rtl\:left-0) {
-  text-align: right;
+  left: 0px;
 }
 
 :is([dir="rtl"] .rtl\:block) {
@@ -2771,10 +2822,6 @@ body:has(#menu-controller:checked) {
   display: none;
 }
 
-:is([dir="rtl"] .rtl\:text-left) {
-  text-align: left;
-}
-
 :is(.dark .dark\:inline) {
   display: inline;
 }

assets/icons/chevron-down.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M233.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L256 338.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z"/></svg>

assets/icons/chevron-up.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M233.4 105.4c12.5-12.5 32.8-12.5 45.3 0l192 192c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L256 173.3 86.6 342.6c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3l192-192z"/></svg>

assets/icons/globe.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M352 256c0 22.2-1.2 43.6-3.3 64H163.3c-2.2-20.4-3.3-41.8-3.3-64s1.2-43.6 3.3-64H348.7c2.2 20.4 3.3 41.8 3.3 64zm28.8-64H503.9c5.3 20.5 8.1 41.9 8.1 64s-2.8 43.5-8.1 64H380.8c2.1-20.6 3.2-42 3.2-64s-1.1-43.4-3.2-64zm112.6-32H376.7c-10-63.9-29.8-117.4-55.3-151.6c78.3 20.7 142 77.5 171.9 151.6zm-149.1 0H167.7c6.1-36.4 15.5-68.6 27-94.7c10.5-23.6 22.2-40.7 33.5-51.5C239.4 3.2 248.7 0 256 0s16.6 3.2 27.8 13.8c11.3 10.8 23 27.9 33.5 51.5c11.6 26 20.9 58.2 27 94.7zm-209 0H18.6C48.6 85.9 112.2 29.1 190.6 8.4C165.1 42.6 145.3 96.1 135.3 160zM8.1 192H131.2c-2.1 20.6-3.2 42-3.2 64s1.1 43.4 3.2 64H8.1C2.8 299.5 0 278.1 0 256s2.8-43.5 8.1-64zM194.7 446.6c-11.6-26-20.9-58.2-27-94.6H344.3c-6.1 36.4-15.5 68.6-27 94.6c-10.5 23.6-22.2 40.7-33.5 51.5C272.6 508.8 263.3 512 256 512s-16.6-3.2-27.8-13.8c-11.3-10.8-23-27.9-33.5-51.5zM135.3 352c10 63.9 29.8 117.4 55.3 151.6C112.2 482.9 48.6 426.1 18.6 352H135.3zm358.1 0c-30 74.1-93.6 130.9-171.9 151.6c25.5-34.2 45.2-87.7 55.3-151.6H493.4z"/></svg>

assets/icons/translate.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
+  <path fill="currentColor" d="M4.545 6.714 4.11 8H3l1.862-5h1.284L8 8H6.833l-.435-1.286H4.545zm1.634-.736L5.5 3.956h-.049l-.679 2.022H6.18z"/>
+  <path fill="currentColor" d="M0 2a2 2 0 0 1 2-2h7a2 2 0 0 1 2 2v3h3a2 2 0 0 1 2 2v7a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2v-3H2a2 2 0 0 1-2-2V2zm2-1a1 1 0 0 0-1 1v7a1 1 0 0 0 1 1h7a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1H2zm7.138 9.995c.193.301.402.583.63.846-.748.575-1.673 1.001-2.768 1.292.178.217.451.635.555.867 1.125-.359 2.08-.844 2.886-1.494.777.665 1.739 1.165 2.93 1.472.133-.254.414-.673.629-.89-1.125-.253-2.057-.694-2.82-1.284.681-.747 1.222-1.651 1.621-2.757H14V8h-3v1.047h.765c-.318.844-.74 1.546-1.272 2.13a6.066 6.066 0 0 1-.415-.492 1.988 1.988 0 0 1-.94.31z"/>
+</svg>

config/_default/languages.en.toml

@@ -1,15 +1,12 @@
 languageCode = "en"
 languageName = "English"
+languageDirection = "ltr"
 weight = 1
 
 title = "Congo"
 # copyright = "Copy, _right?_ :thinking_face:"
 
 [params]
-  isoCode = "en"
-  displayName = "EN"
-  rtl = false
-
   dateFormat = "2 January 2006"
 
   # mainSections = ["section1", "section2"]

config/_default/menus.en.toml

@@ -31,6 +31,12 @@
   [main.params]
     action = "search"
 
+[[main]]
+  identifier = "locale"
+  weight = 100
+  [main.params]
+    action = "locale"
+
 # -- Footer Menu --
 # The footer menu is displayed at the bottom of the page, just before
 # the copyright notice. Configure as per the main menu above.

exampleSite/config/_default/languages.de.toml

@@ -1,15 +1,12 @@
-languageCode = "de-de"
+languageCode = "de-DE"
 languageName = "Deutsch (Deutschland)"
+languageDirection = "ltr"
 weight = 4
 
 title = "Congo"
 copyright = "© 2023 Congo contributors"
 
 [params]
-  isoCode = "de-de"
-  displayName = ":de:"
-  rtl = false
-
   dateFormat = "2. January 2006"
 
   mainSections = ["samples"]

exampleSite/config/_default/languages.en.toml

@@ -1,15 +1,12 @@
-languageCode = "en-au"
+languageCode = "en-AU"
 languageName = "English (Australia)"
+languageDirection = "ltr"
 weight = 1
 
 title = "Congo"
 copyright = "© 2023 Congo contributors"
 
 [params]
-  isoCode = "en-AU"
-  displayName = ":flag-au:"
-  rtl = false
-
   dateFormat = "2 January 2006"
 
   mainSections = ["samples"]

exampleSite/config/_default/languages.es.toml

@@ -1,15 +1,12 @@
-languageCode = "es-mx"
+languageCode = "es-MX"
 languageName = "Español (México)"
+languageDirection = "ltr"
 weight = 2
 
 title = "Congo"
 copyright = "© 2023 Congo contributors"
 
 [params]
-  isoCode = "es-MX"
-  displayName = ":flag-mx:"
-  rtl = false
-
   dateFormat = "2 January 2006"
 
   mainSections = ["samples"]

exampleSite/config/_default/languages.ja.toml

@@ -1,15 +1,12 @@
 languageCode = "ja"
 languageName = "日本語"
+languageDirection = "ltr"
 weight = 2
 
 title = "Congo"
 copyright = "© 2023 Congo contributors"
 
 [params]
-  isoCode = "ja"
-  displayName = ":jp:"
-  rtl = false
-
   dateFormat = "2006年1月2日"
 
   mainSections = ["samples"]

exampleSite/config/_default/menus.de.toml

@@ -40,6 +40,12 @@
   [main.params]
     action = "search"
 
+[[main]]
+  identifier = "locale"
+  weight = 100
+  [main.params]
+    action = "locale"
+
 # -- Footer Menu --
 # The footer menu is displayed at the bottom of the page, just before
 # the copyright notice. Configure as per the main menu above.

exampleSite/config/_default/menus.en.toml

@@ -40,6 +40,12 @@
   [main.params]
     action = "search"
 
+[[main]]
+  identifier = "locale"
+  weight = 100
+  [main.params]
+    action = "locale"
+
 # -- Footer Menu --
 # The footer menu is displayed at the bottom of the page, just before
 # the copyright notice. Configure as per the main menu above.

exampleSite/config/_default/menus.es.toml

@@ -40,6 +40,12 @@
   [main.params]
     action = "search"
 
+[[main]]
+  identifier = "locale"
+  weight = 100
+  [main.params]
+    action = "locale"
+
 # -- Footer Menu --
 # The footer menu is displayed at the bottom of the page, just before
 # the copyright notice. Configure as per the main menu above.

exampleSite/config/_default/menus.ja.toml

@@ -40,6 +40,12 @@
   [main.params]
     action = "search"
 
+[[main]]
+  identifier = "locale"
+  weight = 100
+  [main.params]
+    action = "locale"
+
 # -- Footer Menu --
 # The footer menu is displayed at the bottom of the page, just before
 # the copyright notice. Configure as per the main menu above.

exampleSite/content/docs/configuration/index.ja.md

@@ -89,14 +89,12 @@ Congoは現在、以下の言語に対応しています:
 <!-- prettier-ignore-start -->
 |Name|Default|Description|
 |---|---|---|
-|`languageCode`|`"en"`|このファイルの言語コード。トップレベル言語 (例 `en`)またはサブ変数 (例 `en-au`)で、ファイル名の `[language-code]` と一致する必要があります。Hugoはこの値が常に小文字であることを期待しています。HTMLに正しく準拠するためには、大文字と小文字を区別する `params.isoCode` パラメーターを設定してください。|
+|`languageCode`|`"en"`|このファイルの言語コード。トップレベル言語 (例 `en`)またはサブ変数 (例 `en-AU`)で、ファイル名の `[language-code]` と一致する必要があります。|
 |`languageName`|`"English"`|言語名。|
+|`languageDirection`|`"ltr"`|RTL言語かどうか。 `"rtl"` に設定すると、コンテンツを右から左にリフローする。CongoはRTL言語とLTR言語の同時使用を完全にサポートしており、動的に両方の言語に調整します。|
 |`weight`|`1`|多言語サイトを構築する際の優先順序。|
 |`title`|`"Congo"`|ウェブサイトのタイトル。サイトのヘッダーとフッターに表示されます。|
 |`copyright`|_Not set_|サイトのフッターに表示する著作権メッセージを含むMarkdown文字列。何も指定されない場合、Congoは `title` を使って自動的にコピーライト文字列を生成します。|
-|`params.isoCode`|`"en"`|HTMLメタデータ用のISO言語コード。トップレベル言語 (例 `en`)またはサブバリアント (例 `en-AU`)です。|
-|`params.displayName`|`"EN"`|ウェブサイトに表示される際に使用される言語名。|
-|`params.rtl`|`false`|RTL言語かどうか。 `true` に設定すると、コンテンツを右から左にリフローする。CongoはRTL言語とLTR言語の同時使用を完全にサポートしており、動的に両方の言語に調整します。|
 |`params.dateFormat`|`"2 January 2006"`|日付の書式。許容される書式については、[Hugo docs](https://gohugo.io/functions/format/#gos-layout-string)を参照してください。|
 |`params.mainSections`|_Not set_|最近の記事リストに表示するセクション。指定されていない場合は、記事の数が最も多いセクションが使われます。|
 |`params.description`|_Not set_|ウェブサイトの説明。これはサイトのメタデータに使用されます。|

exampleSite/content/docs/configuration/index.md

@@ -89,14 +89,12 @@ The default file can be used as a template to create additional languages, or re
 <!-- prettier-ignore-start -->
 |Name|Default|Description|
 |---|---|---|
-|`languageCode`|`"en"`|The Hugo language code for this file. It can be a top-level language (ie. `en`) or a sub-variant (ie. `en-au`) and should match the language code in the filename. Hugo expects this value to always be in lowercase. For proper HTML compliance, set the `params.isoCode` parameter which is case-sensitive.|
+|`languageCode`|`"en"`|The Hugo language code for this file. It can be a top-level language (ie. `en`) or a sub-variant (ie. `en-AU`) and should match the language code in the filename.|
 |`languageName`|`"English"`|The name of the language.|
+|`languageDirection`|`"ltr"`|Whether or not this is an RTL language. Set to `"rtl"` to reflow content from right-to-left. Congo fully supports using RTL and LTR languages at the same time and will dynamically adjust to both.|
 |`weight`|`1`|The weight determines the order of languages when building multilingual sites.|
 |`title`|`"Congo"`|The title of the website. This will be displayed in the site header and footer.|
 |`copyright`|_Not set_|A Markdown string containing the copyright message to be displayed in the site footer. If none is provided, Congo will automatically generate a copyright string using the site `title`.|
-|`params.isoCode`|`"en"`|The ISO language code for HTML metadata purposes. It can be a top-level language (ie. `en`) or a sub-variant (ie. `en-AU`).|
-|`params.displayName`|`"EN"`|The name used when the language appears on the website.|
-|`params.rtl`|`false`|Whether or not this is a RTL language. Set to `true` to reflow content from right-to-left. Congo fully supports using RTL and LTR languages at the same time and will dynamically adjust to both.|
 |`params.dateFormat`|`"2 January 2006"`|How dates are formatted in this language. Refer to the [Hugo docs](https://gohugo.io/functions/format/#gos-layout-string) for acceptable formats.|
 |`params.mainSections`|_Not set_|The sections that should be displayed in the recent articles list. If not provided the section with the greatest number of articles is used.|
 |`params.description`|_Not set_|The website description. This will be used in the site metadata.|

exampleSite/content/docs/getting-started/index.md

@@ -231,9 +231,10 @@ Further customisation can be achieved through the use of special theme parameter
 
 There is a special case for creating menu items for links that take theme actions. These are denoted using the `action` parameter, and a value of the action the link should perform. Action links allow for all the same custom parameters as other links and can be styled with an icon or text name.
 
-There are two valid theme actions:
+There are three valid theme actions:
 
 - `appearance` will create a link to the appearance switcher
+- `locale` will create a drop down picker to access translated content
 - `search` will create a link to the site search
 
 Both menus are completely optional and can be commented out if not required. Use the template provided in the default file as a guide.

exampleSite/content/samples/icons/index.de.md

@@ -23,6 +23,8 @@ Die vollständige Liste der integrierten Icons und ihre entsprechenden Namen fin
 | blogger              | {{< icon blogger >}}              |
 | bug                  | {{< icon bug >}}                  |
 | check                | {{< icon check >}}                |
+| chevron-down         | {{< icon chevron-down >}}         |
+| chevron-up           | {{< icon chevron-up >}}           |
 | circle-info          | {{< icon circle-info >}}          |
 | codepen              | {{< icon codepen >}}              |
 | comment              | {{< icon comment >}}              |
@@ -35,6 +37,7 @@ Die vollständige Liste der integrierten Icons und ihre entsprechenden Namen fin
 | foursquare           | {{< icon foursquare >}}           |
 | github               | {{< icon github >}}               |
 | gitlab               | {{< icon gitlab >}}               |
+| globe                | {{< icon globe >}}                |
 | google               | {{< icon google >}}               |
 | hashnode             | {{< icon hashnode >}}             |
 | instagram            | {{< icon instagram >}}            |
@@ -68,6 +71,7 @@ Die vollständige Liste der integrierten Icons und ihre entsprechenden Namen fin
 | tag                  | {{< icon tag >}}                  |
 | telegram             | {{< icon telegram >}}             |
 | tiktok               | {{< icon tiktok >}}               |
+| translate            | {{< icon translate >}}            |
 | triangle-exclamation | {{< icon triangle-exclamation >}} |
 | tumblr               | {{< icon tumblr >}}               |
 | twitch               | {{< icon twitch >}}               |

exampleSite/content/samples/icons/index.es.md

@@ -23,6 +23,8 @@ La lista completa de íconos incorporados y sus nombres correspondientes se pued
 | blogger              | {{< icon blogger >}}              |
 | bug                  | {{< icon bug >}}                  |
 | check                | {{< icon check >}}                |
+| chevron-down         | {{< icon chevron-down >}}         |
+| chevron-up           | {{< icon chevron-up >}}           |
 | circle-info          | {{< icon circle-info >}}          |
 | codepen              | {{< icon codepen >}}              |
 | comment              | {{< icon comment >}}              |
@@ -35,6 +37,7 @@ La lista completa de íconos incorporados y sus nombres correspondientes se pued
 | foursquare           | {{< icon foursquare >}}           |
 | github               | {{< icon github >}}               |
 | gitlab               | {{< icon gitlab >}}               |
+| globe                | {{< icon globe >}}                |
 | google               | {{< icon google >}}               |
 | hashnode             | {{< icon hashnode >}}             |
 | instagram            | {{< icon instagram >}}            |
@@ -68,6 +71,7 @@ La lista completa de íconos incorporados y sus nombres correspondientes se pued
 | tag                  | {{< icon tag >}}                  |
 | telegram             | {{< icon telegram >}}             |
 | tiktok               | {{< icon tiktok >}}               |
+| translate            | {{< icon translate >}}            |
 | triangle-exclamation | {{< icon triangle-exclamation >}} |
 | tumblr               | {{< icon tumblr >}}               |
 | twitch               | {{< icon twitch >}}               |

exampleSite/content/samples/icons/index.ja.md

@@ -23,6 +23,8 @@ Congoは[FontAwesome 6](https://fontawesome.com/icons)のアイコンをサポ
 | blogger              | {{< icon blogger >}}              |
 | bug                  | {{< icon bug >}}                  |
 | check                | {{< icon check >}}                |
+| chevron-down         | {{< icon chevron-down >}}         |
+| chevron-up           | {{< icon chevron-up >}}           |
 | circle-info          | {{< icon circle-info >}}          |
 | codepen              | {{< icon codepen >}}              |
 | comment              | {{< icon comment >}}              |
@@ -35,6 +37,7 @@ Congoは[FontAwesome 6](https://fontawesome.com/icons)のアイコンをサポ
 | foursquare           | {{< icon foursquare >}}           |
 | github               | {{< icon github >}}               |
 | gitlab               | {{< icon gitlab >}}               |
+| globe                | {{< icon globe >}}                |
 | google               | {{< icon google >}}               |
 | hashnode             | {{< icon hashnode >}}             |
 | instagram            | {{< icon instagram >}}            |
@@ -68,6 +71,7 @@ Congoは[FontAwesome 6](https://fontawesome.com/icons)のアイコンをサポ
 | tag                  | {{< icon tag >}}                  |
 | telegram             | {{< icon telegram >}}             |
 | tiktok               | {{< icon tiktok >}}               |
+| translate            | {{< icon translate >}}            |
 | triangle-exclamation | {{< icon triangle-exclamation >}} |
 | tumblr               | {{< icon tumblr >}}               |
 | twitch               | {{< icon twitch >}}               |

exampleSite/content/samples/icons/index.md

@@ -23,6 +23,8 @@ The full list of built-in icons and their corresponding names can referenced bel
 | blogger              | {{< icon blogger >}}              |
 | bug                  | {{< icon bug >}}                  |
 | check                | {{< icon check >}}                |
+| chevron-down         | {{< icon chevron-down >}}         |
+| chevron-up           | {{< icon chevron-up >}}           |
 | circle-info          | {{< icon circle-info >}}          |
 | codepen              | {{< icon codepen >}}              |
 | comment              | {{< icon comment >}}              |
@@ -35,6 +37,7 @@ The full list of built-in icons and their corresponding names can referenced bel
 | foursquare           | {{< icon foursquare >}}           |
 | github               | {{< icon github >}}               |
 | gitlab               | {{< icon gitlab >}}               |
+| globe                | {{< icon globe >}}                |
 | google               | {{< icon google >}}               |
 | hashnode             | {{< icon hashnode >}}             |
 | instagram            | {{< icon instagram >}}            |
@@ -68,6 +71,7 @@ The full list of built-in icons and their corresponding names can referenced bel
 | tag                  | {{< icon tag >}}                  |
 | telegram             | {{< icon telegram >}}             |
 | tiktok               | {{< icon tiktok >}}               |
+| translate            | {{< icon translate >}}            |
 | triangle-exclamation | {{< icon triangle-exclamation >}} |
 | tumblr               | {{< icon tumblr >}}               |
 | twitch               | {{< icon twitch >}}               |

layouts/_default/baseof.html

@@ -2,17 +2,11 @@
 {{- partial "partials/functions/init.html" . -}}
 <!DOCTYPE html>
 <html
-  lang="{{ with .Site.Params.isoCode | default (.Site.LanguageCode | default "en") }}
+  lang="{{- site.Language.LanguageCode | default "" -}}"
-    {{- . -}}
+  dir="{{- site.Language.LanguageDirection | default "ltr" -}}"
-  {{ end }}"
-  dir="{{ if .Site.Params.rtl | default false -}}
-    rtl
-  {{- else -}}
-    ltr
-  {{- end }}"
   class="scroll-smooth"
-  data-default-appearance="{{ .Site.Params.defaultAppearance | default "light" }}"
+  data-default-appearance="{{- .Site.Params.defaultAppearance | default "light" -}}"
-  data-auto-appearance="{{ .Site.Params.autoSwitchAppearance | default "true" }}"
+  data-auto-appearance="{{- .Site.Params.autoSwitchAppearance | default "true" -}}"
 >
   {{- partial "head.html" . -}}
   <body

layouts/partials/footer.html

@@ -4,7 +4,7 @@
     <nav class="pb-4 text-base font-medium text-neutral-500 dark:text-neutral-400">
       <ul class="flex list-none flex-col sm:flex-row">
         {{ range .Site.Menus.footer }}
-          <li class="group mb-1 ltr:text-right rtl:text-left sm:mb-0 sm:me-7 sm:last:me-0">
+          <li class="group mb-1 text-end sm:mb-0 sm:me-7 sm:last:me-0">
             {{ if eq .Params.action "search" }}
               {{ $.Scratch.Add "searchCount" 1 }}
               {{ if $.Site.Params.enableSearch | default false }}
@@ -46,6 +46,9 @@
                   {{ partial "icon.html" "sun" }}
                 </span>
               </button>
+            {{ else if eq .Params.action "locale" }}
+              {{ $.Scratch.Add "localeCount" 1 }}
+              {{ partial "translations.html" (dict "ctx" . "dir" "up") }}
             {{ else }}
               <a
                 href="{{ .URL }}"
@@ -95,6 +98,13 @@
         </p>
       {{ end }}
     </div>
+    <div class="flex flex-row items-center">
+      {{/* Locale switcher */}}
+      {{ if and (.IsTranslated) (eq ($.Scratch.Get "localeCount") 0) }}
+        <div>
+          {{ partial "translations.html" (dict "ctx" . "dir" "up") }}
+        </div>
+      {{ end }}
       {{/* Appearance switcher */}}
       {{ if .Site.Params.footer.showAppearanceSwitcher | default false }}
         <div
@@ -119,6 +129,7 @@
         </div>
       {{ end }}
     </div>
+  </div>
   {{/* Extend footer - eg. for extra scripts, etc. */}}
   {{ if templates.Exists "partials/extend-footer.html" }}
     {{ partial "extend-footer.html" . }}

layouts/partials/functions/init.html

@@ -1,2 +1,3 @@
 {{ $.Scratch.Set "searchCount" 0 }}
 {{ $.Scratch.Set "switchCount" 0 }}
+{{ $.Scratch.Set "localeCount" 0 }}

layouts/partials/head.html

@@ -1,8 +1,5 @@
 <head>
   <meta charset="utf-8" />
-  {{ with site.Params.htmlCode | default .Site.LanguageCode }}
-    <meta http-equiv="content-language" content="{{ . }}" />
-  {{ end }}
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <meta name="theme-color" content="rgb(255,255,255)" />
   <meta http-equiv="X-UA-Compatible" content="ie=edge" />
@@ -62,7 +59,7 @@
     {{ $jsCode := resources.Get "js/code.js" }}
     {{ $assets.Add "js" (slice $jsCode) }}
   {{ end }}
-  {{ if .Site.Params.rtl | default false }}
+  {{ if eq (site.Language.LanguageDirection | default "ltr") "rtl" }}
     {{ $jsRTL := resources.Get "js/rtl.js" }}
     {{ $assets.Add "js" (slice $jsRTL) }}
   {{ end }}

layouts/partials/header/basic.html

@@ -3,11 +3,10 @@
     {{/* Site logo/title */}}
     <div class="flex flex-row items-center">
       {{ partial "logo.html" . }}
-      {{ partial "translations.html" . }}
     </div>
     {{/* Main menu */}}
     {{ if or .Site.Menus.main (.Site.Params.enableSearch | default false) }}
-      <ul class="flex list-none flex-col ltr:text-right rtl:text-left sm:flex-row">
+      <ul class="flex list-none flex-col text-end sm:flex-row">
         {{ if .Site.Menus.main }}
           {{ range .Site.Menus.main }}
             <li class="group mb-1 sm:mb-0 sm:me-7 sm:last:me-0.5">
@@ -68,6 +67,9 @@
                     {{ end }}
                   </span>
                 </button>
+              {{ else if eq .Params.action "locale" }}
+                {{ $.Scratch.Add "localeCount" 1 }}
+                {{ partial "translations.html" . }}
               {{ else }}
                 <a
                   href="{{ .URL }}"

layouts/partials/header/hamburger.html

@@ -3,7 +3,6 @@
     {{/* Site logo/title */}}
     <div class="z-40 flex flex-row items-center">
       {{ partial "logo.html" . }}
-      {{ partial "translations.html" . }}
     </div>
     {{/* Hamburger menu */}}
     {{ if or .Site.Menus.main (.Site.Params.enableSearch | default false) }}
@@ -14,10 +13,10 @@
         </div>
         <div
           id="menu-wrapper"
-          class="fixed inset-0 z-30 invisible w-full h-full m-auto overflow-auto transition-opacity opacity-0 cursor-default bg-neutral-100/50 backdrop-blur-sm dark:bg-neutral-900/50"
+          class="invisible fixed inset-0 z-30 m-auto h-full w-full cursor-default overflow-auto bg-neutral-100/50 opacity-0 backdrop-blur-sm transition-opacity dark:bg-neutral-900/50"
         >
           <ul
-            class="flex flex-col w-full px-6 py-6 mx-auto overflow-visible list-none max-w-7xl ltr:text-right rtl:text-left sm:px-14 sm:py-10 sm:pt-10 md:px-24 lg:px-32"
+            class="mx-auto flex w-full max-w-7xl list-none flex-col overflow-visible px-6 py-6 text-end sm:px-14 sm:py-10 sm:pt-10 md:px-24 lg:px-32"
           >
             <li class="mb-1">
               <span class="cursor-pointer hover:text-primary-600 dark:hover:text-primary-400"
@@ -26,7 +25,7 @@
             </li>
             {{ if .Site.Menus.main }}
               {{ range .Site.Menus.main }}
-                <li class="mb-1 group">
+                <li class="group mb-1">
                   {{ if eq .Params.action "search" }}
                     {{ $.Scratch.Add "searchCount" 1 }}
                     {{ if $.Site.Params.enableSearch | default false }}
@@ -36,7 +35,7 @@
                       >
                         {{ with .Params.icon | default "search" }}
                           <span
-                            class="transition-colors group-dark:hover:text-primary-400 group-hover:text-primary-600"
+                            class="group-dark:hover:text-primary-400 transition-colors group-hover:text-primary-600"
                           >
                             {{- partial "icon.html" . -}}
                           </span>
@@ -56,7 +55,7 @@
                       aria-label="appearance switcher"
                     >
                       <span
-                        class="inline transition-colors group-dark:hover:text-primary-400 group-hover:text-primary-600 dark:hidden"
+                        class="group-dark:hover:text-primary-400 inline transition-colors group-hover:text-primary-600 dark:hidden"
                         title="{{ i18n "footer.dark_appearance" }}"
                       >
                         {{ with .Params.icon | default "moon" }}
@@ -70,7 +69,7 @@
                         {{ end }}
                       </span>
                       <span
-                        class="hidden transition-colors group-dark:hover:text-primary-400 group-hover:text-primary-600 dark:inline"
+                        class="group-dark:hover:text-primary-400 hidden transition-colors group-hover:text-primary-600 dark:inline"
                         title="{{ i18n "footer.light_appearance" }}"
                       >
                         {{ with .Params.icon | default "sun" }}
@@ -84,6 +83,9 @@
                         {{ end }}
                       </span>
                     </button>
+                  {{ else if eq .Params.action "locale" }}
+                    {{ $.Scratch.Add "localeCount" 1 }}
+                    {{ partial "translations.html" . }}
                   {{ else }}
                     <a
                       href="{{ .URL }}"
@@ -91,7 +93,7 @@
                       {{ with .Params.target }}target="{{ . }}"{{ end }}
                       >{{ with .Params.icon }}
                         <span
-                          class="transition-colors group-dark:hover:text-primary-400 group-hover:text-primary-600"
+                          class="group-dark:hover:text-primary-400 transition-colors group-hover:text-primary-600"
                         >
                           {{- partial "icon.html" . -}}
                         </span>
@@ -106,10 +108,10 @@
                 </li>
               {{ end }}
               {{ if and ($.Site.Params.enableSearch | default false) (eq ($.Scratch.Get "searchCount") 0) }}
-                <li class="mb-1 group">
+                <li class="group mb-1">
                   <button id="search-button-m0" title="{{ i18n "search.open_button_title" }}">
                     <span
-                      class="transition-colors group-dark:hover:text-primary-400 group-hover:text-primary-600"
+                      class="group-dark:hover:text-primary-400 transition-colors group-hover:text-primary-600"
                     >
                       {{ partial "icon.html" "search" }}
                     </span>

layouts/partials/header/hybrid.html

@@ -3,7 +3,6 @@
     {{/* Site logo/title */}}
     <div class="z-40 flex flex-row items-center">
       {{ partial "logo.html" . }}
-      {{ partial "translations.html" . }}
     </div>
     {{ if or .Site.Menus.main (.Site.Params.enableSearch | default false) }}
       {{/* Hamburger menu */}}
@@ -17,7 +16,7 @@
           class="invisible fixed inset-0 z-30 m-auto h-full w-full cursor-default overflow-auto bg-neutral-100/50 opacity-0 backdrop-blur-sm transition-opacity dark:bg-neutral-900/50"
         >
           <ul
-            class="mx-auto flex w-full max-w-7xl list-none flex-col overflow-visible px-6 py-6 ltr:text-right rtl:text-left sm:px-14 sm:py-10 sm:pt-10 md:px-24 lg:px-32"
+            class="mx-auto flex w-full max-w-7xl list-none flex-col overflow-visible px-6 py-6 text-end sm:px-14 sm:py-10 sm:pt-10 md:px-24 lg:px-32"
           >
             <li class="mb-1">
               <span class="cursor-pointer hover:text-primary-600 dark:hover:text-primary-400"
@@ -84,6 +83,9 @@
                         {{ end }}
                       </span>
                     </button>
+                  {{ else if eq .Params.action "locale" }}
+                    {{ $.Scratch.Add "localeCount" 1 }}
+                    {{ partial "translations.html" . }}
                   {{ else }}
                     <a
                       href="{{ .URL }}"
@@ -121,7 +123,7 @@
         </div>
       </label>
       {{/* Basic menu */}}
-      <ul class="hidden list-none flex-row ltr:text-right rtl:text-left sm:flex">
+      <ul class="hidden list-none flex-row text-end sm:flex">
         {{ if .Site.Menus.main }}
           {{ range .Site.Menus.main }}
             <li class="group mb-1 sm:mb-0 sm:me-7 sm:last:me-0">
@@ -182,6 +184,9 @@
                     {{ end }}
                   </span>
                 </button>
+              {{ else if eq .Params.action "locale" }}
+                {{ $.Scratch.Add "localeCount" 1 }}
+                {{ partial "translations.html" . }}
               {{ else }}
                 <a
                   href="{{ .URL }}"

layouts/partials/translations.html

@@ -1,16 +1,60 @@
+{{- $ctx := "" -}}
+{{- $dir := default "down" -}}
+{{- if (reflect.IsMap . ) -}}
+  {{- $ctx = .ctx -}}
+  {{- $dir = cond (not .dir) nil .dir -}}
+{{- else -}}
+  {{- $ctx = . -}}
+{{- end -}}
+{{ with page }}
   {{ if .IsTranslated }}
     {{ $currentLang := .Page.Lang }}
-  <ul class="flex list-none flex-row">
+    {{ if site.IsMultiLingual }}
-    {{ range .AllTranslations }}
+      <div class="relative group">
-      {{ if ne $currentLang .Lang }}
+        <button
-        <li class="ml-2">
+          class="flex items-center justify-end w-full transition-colors group-dark:hover:text-primary-400 group-hover:text-primary-600"
-          <a
-            href="{{ .RelPermalink }}"
-            class="decoration-primary-500 hover:underline hover:decoration-2 hover:underline-offset-2"
-            >{{ .Site.Params.displayName | emojify }}</a
         >
-        </li>
+          {{ partial "icon.html" "translate" }}<span class="text-sm">{{ .Lang | upper }}</span
+          ><span class="text-[0.6rem]"
+            >{{ partial "icon.html" (cond (eq $dir "down") "chevron-down" "chevron-up") }}</span
+          >
+        </button>
+        {{ if eq $dir "down" }}
+          <div class="invisible w-full h-2 bg-transparent group-hover:visible"></div>
+        {{ end }}
+        <div
+          class="{{ cond (eq $dir "down") "top-8" "bottom-7" }} invisible absolute ltr:right-0 rtl:left-0 z-50 flex flex-col whitespace-nowrap rounded border border-neutral-300 bg-neutral text-start text-base shadow group-hover:visible dark:border-neutral-600 dark:bg-neutral-800"
+        >
+          {{ $siteLanguages := site.Languages }}
+          {{ $pageLang := .Page.Lang }}
+          {{ range .Page.AllTranslations }}
+            {{ $translation := . }}
+            {{ range $siteLanguages }}
+              {{ if eq $translation.Lang .Lang }}
+                {{ $selected := false }}
+                <div class="flex flex-grow">
+                  {{ if eq $pageLang .Lang }}
+                    <a
+                      href="{{ $translation.RelPermalink }}"
+                      class="flex items-center justify-between w-full px-2 py-1 bg-primary-100 dark:bg-primary-900"
+                      >{{ .LanguageName }}<span
+                        class="w-6 ms-2 text-primary-600 dark:text-primary-400"
+                        >{{ partial "icon.html" "check" }}</span
+                      ></a
+                    >
+                  {{ else }}
+                    <a
+                      href="{{ $translation.RelPermalink }}"
+                      class="w-full py-1 pe-10 ps-2 decoration-primary-500 hover:underline hover:decoration-2 hover:underline-offset-2"
+                      >{{ .LanguageName }}</a
+                    >
+                  {{ end }}
+                </div>
+              {{ end }}
+            {{ end }}
+          {{ end }}
+        </div>
+      </div>
     {{ end }}
   {{ end }}
-  </ul>
 {{ end }}