FunctionalHacker/hugo-toha
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Translations and i18n (#60)

Browse source 
* Managing i18n

* Fix absolute path

* Config files

* Home link manage langage

* Fixing footer i18n

* Implemented i18n on newsletter

* Implemented two languages in example

* Removed old section directory

* Using yaml in data to organize home summary

* Fully working for old versions without i18n

* Integrating language menu CSS

* Fix language dropdown CSS

* Refactor translation codes

* Remove duplicate code

* Fix URL issues

* Move customMenus and other site related config into data section

* Fix error during language toggle

* Only show the available translation for the posts

* Handle navbar brand URL properly

* Fix responsiveness

Co-authored-by: Hugo MARTIN <hugo.martin.69@gmail.com>
Co-authored-by: hossainemruz <emruz@appscode.com>
This commit is contained in:
Hugo MARTIN 2020-10-03 05:59:28 +02:00 • committed by GitHub
parent 6c2cca0127
commit 46b21e028c
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
56 changed files with 1116 additions and 190 deletions
Download patch file Download diff file Expand all files Collapse all files

4
layouts/partials/cards/post.html
View file

@ -1,5 +1,5 @@
<div class="post-card">
<a href="{{ .RelPermalink }}" class="post-card-link">
<a href="{{ .RelPermalink | relLangURL }}" class="post-card-link">
<div class="card">
<div class="card-head">
<img class="card-img-top" src='{{ partial "helpers/get-hero.html" . }}'/>
@ -11,7 +11,7 @@
<div class="card-footer">
<span class="float-left">{{ .Date.Format "January 2, 2006" }}</span>
<a
href="{{ .RelPermalink }}"
href="{{ .RelPermalink | relLangURL }}"
class="float-right btn btn-outline-info btn-sm"
>Read</a
>

2
layouts/partials/cards/project.html
View file

@ -8,7 +8,7 @@
<div>
<div class="d-flex">
{{ if .logo }}
<img class="card-img-xs" src="{{ .logo }}" alt="{{ .name }}" />
<img class="card-img-xs" src="{{ .logo | absURL }}" alt="{{ .name }}" />
{{ end }}
<h5 class="card-title mb-0">{{ .name }}</h5>
</div>

2
layouts/partials/cards/skill.html
View file

@ -3,7 +3,7 @@
<div class="card">
<div class="card-head d-flex">
{{ if .icon }}
<img class="card-img-xs" src="{{ .icon }}" alt="{{ .name }}" />
<img class="card-img-xs" src="{{ .icon | absURL }}" alt="{{ .name }}" />
{{ end }}
<h5 class="card-title">{{ .name }}</h5>
</div>

42
layouts/partials/footer.html
View file

@ -1,11 +1,29 @@
{{ $author:= .Site.Data.author }}
{{ if (index .Site.Data .Site.Language.Lang).author }}
{{ $author = (index .Site.Data .Site.Language.Lang).author }}
{{ end }}
{{ $sections:= .Site.Data.sections }}
{{ if (index .Site.Data .Site.Language.Lang).sections }}
{{ $sections = (index .Site.Data .Site.Language.Lang).sections }}
{{ end }}
{{ $copyrightNotice := "© 2020 Copyright."}}
{{ if (index .Site.Data .Site.Language.Lang).site }}
{{ $siteConfig := (index .Site.Data .Site.Language.Lang).site }}
{{ if $siteConfig.copyright }}
{{ $copyrightNotice = $siteConfig.copyright }}
{{ end }}
{{ end }}
<footer class="container-fluid text-center align-content-center footer pb-2">
<div class="container pt-5">
<div class="row text-left">
<div class="col-md-4 col-sm-12">
<h5>Navigation</h5>
{{ if .Site.Data.sections }}
<h5>{{ i18n "navigation" }}</h5>
{{ if $sections }}
<ul>
{{- range sort .Site.Data.sections "section.weight" }}
{{- range sort $sections "section.weight" }}
{{ if and (.section.enable) (.section.showOnNavbar)}}
<li class="nav-item">
<a class="smooth-scroll" href="/#{{ replace (lower .section.name) " " "-" }}">{{ .section.name }}</a>
@ -16,18 +34,20 @@
{{ end }}
</div>
{{ if $author }}
<div class="col-md-4 col-sm-12">
<h5>Contact Me</h5>
<h5>{{ i18n "contact_me" }}</h5>
<ul>
{{ range $key,$value:=.Site.Params.author.contactInfo }}
{{ range $key,$value:= $author.contactInfo }}
<li><span>{{ title $key }}: </span> <span>{{ $value }}</span></li>
{{ end }}
</ul>
</div>
{{ end }}
{{ if .Site.Params.newsletter.enable }}
<div class="col-md-4 col-sm-12">
<!-- <h5>Newsletter</h5> -->
<p>Stay up to date with email notification</p>
<p>{{ i18n "newsletter_text" }}</p>
<form>
<div class="form-group">
<input
@ -35,13 +55,13 @@
class="form-control"
id="exampleInputEmail1"
aria-describedby="emailHelp"
placeholder="Enter email"
placeholder="{{ i18n "newsletter_input_placeholder" }}"
/>
<small id="emailHelp" class="form-text text-muted"
>We'll never share your email with anyone else.</small
>{{ i18n "newsletter_warning" }}</small
>
</div>
<button type="submit" class="btn btn-info">Submit</button>
<button type="submit" class="btn btn-info">{{ i18n "submit" }}</button>
</form>
</div>
{{ end }}
@ -56,9 +76,9 @@
Toha
</a>
</div>
<div class="col-md-4 text-center">{{ if .Site.Params.copyright }}{{ .Site.Params.copyright }}{{ else }}© 2020 Copyright.{{ end }}</div>
<div class="col-md-4 text-center">{{ $copyrightNotice }}</div>
<div class="col-md-4 text-right">
<a id="hugo" href="https://gohugo.io/">Powered by Hugo
<a id="hugo" href="https://gohugo.io/">{{ i18n "hugoAttributionText" }}
<img
src="/assets/images/hugo-logo-wide.svg"
alt="Hugo Logo"

2
layouts/partials/header.html
View file

@ -13,7 +13,7 @@
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css" />
<!--================= fab-icon =========================-->
<link rel="icon" type="image/png" href="{{ .Site.Params.logo.favicon | default "/assets/images/favicon.png"}}" />
<link rel="icon" type="image/png" href="{{ .Site.Params.logo.favicon | default "/assets/images/favicon.png" | absURL }}" />
<!--================= custom style overrides =========================-->
<link rel="stylesheet" href="/assets/css/style.css" />

13
layouts/partials/helpers/country-code.html Normal file
View file

@ -0,0 +1,13 @@
{{ $languageCode:= .Lang }}
{{/* by default the language code and the country code are same */}}
{{ $countryCode:= $languageCode }}
{{/* language code and country code are not same for some countries. we need to fix them. */}}
{{ if eq $languageCode "en" }}
{{ $countryCode = "gb" }}
{{ else if eq $languageCode "bn" }}
{{ $countryCode = "bd" }}
{{ end }}
{{/* return the country code */}}
{{ return $countryCode }}

19
layouts/partials/navigators/floating-lang-selector.html Normal file
View file

@ -0,0 +1,19 @@
{{ $pageURL:= .RelPermalink }}
{{ if .Site.IsMultiLingual }}
{{ $pageURL = strings.TrimPrefix (path.Join "/" .Language.Lang) $pageURL }}
{{ end }}
<div class="dropdown languageSelector">
<a class="btn dropdown-toggle" href="#" id="languageSelector" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<img class="flag" src="https://www.countryflags.io/{{ partial "helpers/country-code.html" .Language }}/flat/16.png">
{{ .Site.Language.LanguageName }}
</a>
<div class="dropdown-menu" aria-labelledby="languageSelector">
{{ range .Translations }}
<a class="dropdown-item nav-link languages-item" href="{{ path.Join "/" (cond (eq .Language.Lang "en") "" .Language.Lang) $pageURL }}">
<img class="flag" src="https://www.countryflags.io/{{ partial "helpers/country-code.html" .Language }}/flat/24.png">
{{ .Language.LanguageName }}
</a>
{{ end }}
</div>
</div>

19
layouts/partials/navigators/lang-selector-2.html Normal file
View file

@ -0,0 +1,19 @@
{{ $pageURL:= .RelPermalink }}
{{ if .Site.IsMultiLingual }}
{{ $pageURL = strings.TrimPrefix (path.Join "/" .Language.Lang) $pageURL }}
{{ end }}
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="languageSelector" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<img class="flag" src="https://www.countryflags.io/{{ partial "helpers/country-code.html" .Language }}/flat/16.png">
{{ .Site.Language.LanguageName }}
</a>
<div class="dropdown-menu" aria-labelledby="languageSelector">
{{ range .Translations }}
<a class="dropdown-item nav-link languages-item" href="{{ path.Join "/" (cond (eq .Language.Lang "en") "" .Language.Lang) $pageURL }}">
<img class="flag" src="https://www.countryflags.io/{{ partial "helpers/country-code.html" .Language }}/flat/24.png">
{{ .Language.LanguageName }}
</a>
{{ end }}
</div>
</li>

14
layouts/partials/navigators/lang-selector.html Normal file
View file

@ -0,0 +1,14 @@
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="languageSelector" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<img class="flag" src="https://www.countryflags.io/{{ partial "helpers/country-code.html" .Language }}/flat/16.png">
{{ .Site.Language.LanguageName }}
</a>
<div class="dropdown-menu" aria-labelledby="languageSelector">
{{ range $.Site.Home.AllTranslations }}
<a class="dropdown-item nav-link languages-item" href="{{ .Permalink }}">
<img class="flag" src="https://www.countryflags.io/{{ partial "helpers/country-code.html" .Language }}/flat/24.png">
{{ .Language.LanguageName }}
</a>
{{ end }}
</div>
</li>

30
layouts/partials/navigators/navbar-2.html
View file

@ -1,30 +1,34 @@
{{ $mainLogo:="assets/images/main-logo.png" }}
{{ $invertedLogo:="assets/images/inverted-logo.png" }}
{{ if .Site.Params.logo.main }}
{{ $mainLogo = .Site.Params.logo.main }}
{{ end }}
{{ if .Site.Params.logo.inverted }}
{{ $invertedLogo = .Site.Params.logo.inverted }}
{{ end }}
<nav class="navbar navbar-expand-xl top-navbar final-navbar shadow">
<div class="container">
{{ $mainLogo:="/assets/images/main-logo.png" }}
{{ $invertedLogo:="/assets/images/inverted-logo.png" }}
{{ if .Site.Params.logo.main }}
{{ $mainLogo = .Site.Params.logo.main }}
{{ end }}
{{ if .Site.Params.logo.inverted }}
{{ $invertedLogo = .Site.Params.logo.inverted }}
{{ end }}
<button class="navbar-toggler navbar-light" id="sidebar-toggler" type="button" onclick="toggleSidebar()">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="{{ site.BaseURL }}">
<img src="{{ $mainLogo }}">
<a class="navbar-brand" href="{{ site.BaseURL | relLangURL }}">
<img src="{{ $mainLogo | absURL }}">
{{- site.Title -}}
</a>
<button class="navbar-toggler navbar-light" id="toc-toggler" type="button" onclick="toggleTOC()">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="top-nav-items">
<div class="collapse navbar-collapse lang-selector" id="top-nav-items">
<ul class="navbar-nav ml-auto">
{{ if .IsTranslated }}
{{ partial "navigators/lang-selector-2.html" . }}
{{ end }}
</ul>
</div>
</div>
<!-- Store the logo information in a hidden img for the JS -->
<img src="{{ $mainLogo }}" class="d-none" id="main-logo">
<img src="{{ $invertedLogo }}" class="d-none" id="inverted-logo">
<img src="{{ $mainLogo | absURL }}" class="d-none" id="main-logo">
<img src="{{ $invertedLogo | absURL }}" class="d-none" id="inverted-logo">
</nav>

43
layouts/partials/navigators/navbar.html
View file

@ -1,15 +1,21 @@
{{ $mainLogo:="assets/images/main-logo.png" }}
{{ $invertedLogo:="assets/images/inverted-logo.png" }}
{{ if .Site.Params.logo.main }}
{{ $mainLogo = .Site.Params.logo.main }}
{{ end }}
{{ if .Site.Params.logo.inverted }}
{{ $invertedLogo = .Site.Params.logo.inverted }}
{{ end }}
{{ $sections:= .Site.Data.sections }}
{{ if (index .Site.Data .Site.Language.Lang).sections }}
{{ $sections = (index .Site.Data .Site.Language.Lang).sections }}
{{ end }}
<nav class="navbar navbar-expand-xl top-navbar initial-navbar" id="top-navbar">
<div class="container">
{{ $mainLogo:="/assets/images/main-logo.png" }}
{{ $invertedLogo:="/assets/images/inverted-logo.png" }}
{{ if .Site.Params.logo.main }}
{{ $mainLogo = .Site.Params.logo.main }}
{{ end }}
{{ if .Site.Params.logo.inverted }}
{{ $invertedLogo = .Site.Params.logo.inverted }}
{{ end }}
<a class="navbar-brand" href="{{ .Site.BaseURL }}">
<img src="{{ $invertedLogo }}" id="logo">
<a class="navbar-brand" href="{{ .Site.BaseURL | relLangURL }}">
<img src="{{ $invertedLogo | absURL }}" id="logo">
{{- .Site.Title -}}
</a>
<button
@ -25,10 +31,10 @@
<div class="collapse navbar-collapse" id="top-nav-items">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#home">Home</a>
<a class="nav-link" href="#home">{{ i18n "home" }}</a>
</li>
{{- if .Site.Data.sections }}
{{- range sort .Site.Data.sections "section.weight" }}
{{ if $sections }}
{{ range sort $sections "section.weight" }}
{{ if and (.section.enable) (.section.showOnNavbar)}}
<li class="nav-item">
<a class="nav-link" href="#{{ replace (lower .section.name) " " "-" }}">{{ .section.name }}</a>
@ -47,18 +53,21 @@
{{ end }}
{{ if site.Params.enableBlogPost }}
<li class="nav-item">
<a class="nav-link" id="blog-link" href="/posts">Posts</a>
<a class="nav-link" id="blog-link" href="{{ "/post" | relLangURL }}">{{ i18n "posts" }}</a>
</li>
{{ end }}
{{ range site.Params.customMenus }}
{{ range (index .Site.Data .Site.Language.Lang).site.customMenus }}
<li class="nav-item">
<a class="nav-link" href="{{ .url }}">{{ .name }}</a>
</li>
{{ end }}
{{ if .IsTranslated }}
{{ partial "navigators/lang-selector.html" . }}
{{ end }}
</ul>
</div>
</div>
<!-- Store the logo information in a hidden img for the JS -->
<img src="{{ $mainLogo }}" class="d-none" id="main-logo">
<img src="{{ $invertedLogo }}" class="d-none" id="inverted-logo">
<img src="{{ $mainLogo | absURL }}" class="d-none" id="main-logo">
<img src="{{ $invertedLogo | absURL }}" class="d-none" id="inverted-logo">
</nav>

4
layouts/partials/navigators/sidebar.html
View file

@ -9,7 +9,7 @@
{{ if .HasChildren }}
<!-- Add current entry -->
<li>
<i class="fas {{ $icon }}"></i><a class="{{$class}}" href="{{.URL}}">{{.Name}}</a>
<i class="fas {{ $icon }}"></i><a class="{{$class}}" href="{{ .URL }}">{{.Name}}</a>
<!-- Add sub-tree -->
<ul class="{{ $class }}">
{{ partial "navigators/sidebar.html" (dict "menus" .Children "ctx" $.ctx) }}
@ -17,6 +17,6 @@
</li>
{{ else }}
<!-- No sub-tree. So, only add current entry -->
<li><a class="{{$class}}" href="{{.URL}}">{{.Name}}</a></li>
<li><a class="{{$class}}" href="{{ .URL }}">{{.Name}}</a></li>
{{ end }}
{{ end }}

1
layouts/partials/scripts.html
View file

@ -1,4 +1,5 @@
<script src="/assets/js/jquery-3.4.1.min.js"></script>
<script src="/assets/js/popper.min.js"></script>
<script src="/assets/js/bootstrap.min.js"></script>
<script src="/assets/js/navbar.js"></script>

4
layouts/partials/sections/about.html
View file

@ -28,8 +28,8 @@
</ul>
</div>
{{ if .resume }}
<a href="{{ .resume }}" target="#"
><button class="btn btn-dark">My Resume</button></a
<a href="{{ .resume | absURL }}" target="#"
><button class="btn btn-dark">{{ i18n "resume"}}</button></a
>
{{ end }}
</div>

2
layouts/partials/sections/achievements/entry.html
View file

@ -1,6 +1,6 @@
<div
class="achievement-entry text-center"
style="background-image: url({{ .image }});"
style="background-image: url({{ .image | absURL }});"
>
<i class="fas fa-search-plus" id="enlarge-icon"></i>
<h4 class="title" id="achievement-title">{{ .title }}</h4>

47
layouts/partials/sections/home.html
View file

@ -1,34 +1,53 @@
{{ $greeting:="Hi! I am" }}
{{ if .Site.Params.author.greeting }}
{{ $greeting = .Site.Params.author.greeting }}
{{ $author:= .Site.Data.author }}
{{ if (index .Site.Data .Site.Language.Lang).author }}
{{ $author = (index .Site.Data .Site.Language.Lang).author }}
{{ end }}
{{ $name:="Jane Doe" }}
{{ if .Site.Params.author.nickname }}
{{ $name = .Site.Params.author.nickname }}
{{ else if .Site.Params.author.name }}
{{ $name = .Site.Params.author.name }}
{{ if $author.nickname }}
{{ $name = $author.nickname }}
{{ else if $author.name }}
{{ $name = $author.name }}
{{ end }}
{{ $sections:= .Site.Data.sections }}
{{ if (index .Site.Data .Site.Language.Lang).sections }}
{{ $sections = (index .Site.Data .Site.Language.Lang).sections }}
{{ end }}
{{ $backgroundImage:= "assets/images/default-background.jpg" }}
{{ if .Site.Params.background }}
{{ $backgroundImage = .Site.Params.background }}
{{ end }}
{{ $authorImage:= "assets/images/default-avatar.png" }}
{{ if $author.image }}
{{ $authorImage = $author.image }}
{{ end }}
<div class="container-fluid home" id="home">
<div
class="background container-fluid"
style="background-image: url('{{ if .Site.Params.background }}{{ .Site.Params.background }}{{ else }}/assets/images/default-background.jpg{{ end }}');"
style="background-image: url('{{ $backgroundImage | absURL }}');"
></div>
<div class="container content text-center">
<img src="{{ if .Site.Params.author.image }}{{ .Site.Params.author.image }}{{ else }}/assets/images/default-avatar.png{{ end }}"
<img src="{{ $authorImage | absURL }}"
class="rounded-circle mx-auto d-block img-fluid"
/>
<h1 class="greeting"> {{ $greeting }} {{ $name }}</h1>
<h1 class="greeting"> {{ $author.greeting }} {{ $name }}</h1>
<div class="typing-carousel">
<span id="ityped" class="ityped"></span>
<span class="ityped-cursor"></span>
</div>
<ul id="typing-carousel-data">
{{ range .Site.Params.author.summary }}
<li>{{ . }}</li>
{{ if $author.summary }}
{{ range $author.summary }}
<li>{{ . }}</li>
{{ end}}
{{ end }}
</ul>
{{ if .Site.Data.sections }}
{{ range first 1 (where (sort .Site.Data.sections "section.weight") ".section.enable" true) }}
{{ if $sections }}
{{ range first 1 (where (sort $sections "section.weight") ".section.enable" true) }}
<a href="#{{ replace (lower .section.name) " " "-" }}"><i class="arrow bounce fa fa-chevron-down"></i></a>
{{ end }}
{{ end }}