Trez/congo-hindi-gujarati
4
0
Fork 0
mirror of https://github.com/TrezOne/congo-hindi-gujarati.git synced 2026-07-20 18:01:36 -04:00
Code Issues Packages Projects Releases Wiki Activity

✨ Add new locale picker and related improvements

Browse Source 
Closes: #583
This commit is contained in:
James Panther
2023-09-12 09:22:49 +10:00
parent 1e90d7f077
commit ad8a1b0390
31 changed files with 255 additions and 107 deletions
Download Patch File Download Diff File Expand all files Collapse all files
layouts/partials/footer.html
+35 -24
View File
@@ -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,29 +98,37 @@
</p>
{{ end }}
</div>
{{/* Appearance switcher */}}
{{ if .Site.Params.footer.showAppearanceSwitcher | default false }}
<div
class="{{ if .Site.Params.footer.showScrollToTop | default true -}}
me-14
{{- end }} cursor-pointer text-sm text-neutral-700 hover:text-primary-600 dark:text-neutral dark:hover:text-primary-400"
>
<button id="appearance-switcher-0" type="button" aria-label="appearance switcher">
<div
class="flex h-12 w-12 items-center justify-center dark:hidden"
title="{{ i18n "footer.dark_appearance" }}"
>
{{ partial "icon.html" "moon" }}
</div>
<div
class="hidden h-12 w-12 items-center justify-center dark:flex"
title="{{ i18n "footer.light_appearance" }}"
>
{{ partial "icon.html" "sun" }}
</div>
</button>
</div>
{{ end }}
<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
class="{{ if .Site.Params.footer.showScrollToTop | default true -}}
me-14
{{- end }} cursor-pointer text-sm text-neutral-700 hover:text-primary-600 dark:text-neutral dark:hover:text-primary-400"
>
<button id="appearance-switcher-0" type="button" aria-label="appearance switcher">
<div
class="flex h-12 w-12 items-center justify-center dark:hidden"
title="{{ i18n "footer.dark_appearance" }}"
>
{{ partial "icon.html" "moon" }}
</div>
<div
class="hidden h-12 w-12 items-center justify-center dark:flex"
title="{{ i18n "footer.light_appearance" }}"
>
{{ partial "icon.html" "sun" }}
</div>
</button>
</div>
{{ end }}
</div>
</div>
{{/* Extend footer - eg. for extra scripts, etc. */}}
{{ if templates.Exists "partials/extend-footer.html" }}
layouts/partials/functions/init.html
+1
View File
@@ -1,2 +1,3 @@
{{ $.Scratch.Set "searchCount" 0 }}
{{ $.Scratch.Set "switchCount" 0 }}
{{ $.Scratch.Set "localeCount" 0 }}
layouts/partials/head.html
+2 -5
View File
@@ -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" />
@@ -17,7 +14,7 @@
{{/* Metadata */}}
<meta name="description" content="{{ with .Description }}{{ . }}{{ else }}{{ if .IsPage }}{{ .Summary }}{{ else }}{{ with .Site.Params.description }}{{ . }}{{ end }}{{ end }}{{ end }}" />
{{ with union .Site.Params.keywords .Params.keywords -}}
<meta name="keywords" content="{{ delimit . `, `}}" />
<meta name="keywords" content="{{ delimit . `, ` }}" />
{{- end }}
{{ with .Site.Params.robots }}
<meta name="robots" content="{{ . }}" />
@@ -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
+4 -2
View File
@@ -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
+12 -10
View File
@@ -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
+8 -3
View File
@@ -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
+57 -13
View File
@@ -1,16 +1,60 @@
{{ if .IsTranslated }}
{{ $currentLang := .Page.Lang }}
<ul class="flex list-none flex-row">
{{ range .AllTranslations }}
{{ if ne $currentLang .Lang }}
<li class="ml-2">
<a
href="{{ .RelPermalink }}"
class="decoration-primary-500 hover:underline hover:decoration-2 hover:underline-offset-2"
>{{ .Site.Params.displayName | emojify }}</a
{{- $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 }}
{{ if site.IsMultiLingual }}
<div class="relative group">
<button
class="flex items-center justify-end w-full transition-colors group-dark:hover:text-primary-400 group-hover:text-primary-600"
>
{{ 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
>
</li>
{{ end }}
</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 }}
</ul>
{{ end }}
{{ end }}