Skip to content

Commit

Permalink
fix: translation for navbar menu
Browse files Browse the repository at this point in the history
docs: update docs for multi-language
chore: add custom css support
chore: add social icons
  • Loading branch information
imfing committed Aug 21, 2023
1 parent aa13050 commit 8073722
Show file tree
Hide file tree
Showing 12 changed files with 110 additions and 20 deletions.
Empty file added assets/css/custom.css
Empty file.
9 changes: 9 additions & 0 deletions data/icons.yaml
Original file line number Diff line number Diff line change
Expand Up @@ -259,3 +259,12 @@ x: <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strok
x-circle: <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
zoom-in: <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0zM10 7v3m0 0v3m0-3h3m-3 0H7"/></svg>
zoom-out: <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0zM13 10H7"/></svg>

# Socials
instagram: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15 15"><path fill="currentColor" fill-rule="evenodd" d="M12.91 12.909c.326-.327.582-.72.749-1.151c.16-.414.27-.886.302-1.578c.032-.693.04-.915.04-2.68c0-1.765-.008-1.987-.04-2.68c-.032-.692-.142-1.164-.302-1.578a3.185 3.185 0 0 0-.75-1.151a3.187 3.187 0 0 0-1.151-.75c-.414-.16-.886-.27-1.578-.302C9.487 1.007 9.265 1 7.5 1c-1.765 0-1.987.007-2.68.04c-.692.03-1.164.14-1.578.301a3.2 3.2 0 0 0-1.151.75a3.2 3.2 0 0 0-.75 1.151c-.16.414-.27.886-.302 1.578C1.007 5.513 1 5.735 1 7.5c0 1.765.007 1.987.04 2.68c.03.692.14 1.164.301 1.578c.164.434.42.826.75 1.151c.325.33.718.586 1.151.75c.414.16.886.27 1.578.302c.693.031.915.039 2.68.039c1.765 0 1.987-.008 2.68-.04c.692-.03 1.164-.14 1.578-.301a3.323 3.323 0 0 0 1.151-.75ZM2 6.735v1.53c-.002.821-.002 1.034.02 1.5c.026.586.058 1.016.156 1.34c.094.312.199.63.543 1.012c.344.383.675.556 1.097.684c.423.127.954.154 1.415.175c.522.024.73.024 1.826.024H8.24c.842.001 1.054.002 1.526-.02c.585-.027 1.015-.059 1.34-.156c.311-.094.629-.2 1.011-.543c.383-.344.556-.676.684-1.098c.127-.422.155-.953.176-1.414C13 9.247 13 9.04 13 7.947v-.89c0-1.096 0-1.303-.023-1.826c-.021-.461-.049-.992-.176-1.414c-.127-.423-.3-.754-.684-1.098c-.383-.344-.7-.449-1.011-.543c-.325-.097-.755-.13-1.34-.156A27.29 27.29 0 0 0 8.24 2H7.057c-1.096 0-1.304 0-1.826.023c-.461.021-.992.049-1.415.176c-.422.128-.753.301-1.097.684c-.344.383-.45.7-.543 1.012c-.098.324-.13.754-.156 1.34c-.022.466-.022.679-.02 1.5ZM7.5 5.25a2.25 2.25 0 1 0 0 4.5a2.25 2.25 0 0 0 0-4.5ZM4.25 7.5a3.25 3.25 0 1 1 6.5 0a3.25 3.25 0 0 1-6.5 0Zm6.72-2.72a.75.75 0 1 0 0-1.5a.75.75 0 0 0 0 1.5Z" clip-rule="evenodd"/></svg>
facebook: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M22 12c0-5.52-4.48-10-10-10S2 6.48 2 12c0 4.84 3.44 8.87 8 9.8V15H8v-3h2V9.5C10 7.57 11.57 6 13.5 6H16v3h-2c-.55 0-1 .45-1 1v2h3v3h-3v6.95c5.05-.5 9-4.76 9-9.95z"/></svg>
discord: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20.317 4.3698a19.7913 19.7913 0 00-4.8851-1.5152.0741.0741 0 00-.0785.0371c-.211.3753-.4447.8648-.6083 1.2495-1.8447-.2762-3.68-.2762-5.4868 0-.1636-.3933-.4058-.8742-.6177-1.2495a.077.077 0 00-.0785-.037 19.7363 19.7363 0 00-4.8852 1.515.0699.0699 0 00-.0321.0277C.5334 9.0458-.319 13.5799.0992 18.0578a.0824.0824 0 00.0312.0561c2.0528 1.5076 4.0413 2.4228 5.9929 3.0294a.0777.0777 0 00.0842-.0276c.4616-.6304.8731-1.2952 1.226-1.9942a.076.076 0 00-.0416-.1057c-.6528-.2476-1.2743-.5495-1.8722-.8923a.077.077 0 01-.0076-.1277c.1258-.0943.2517-.1923.3718-.2914a.0743.0743 0 01.0776-.0105c3.9278 1.7933 8.18 1.7933 12.0614 0a.0739.0739 0 01.0785.0095c.1202.099.246.1981.3728.2924a.077.077 0 01-.0066.1276 12.2986 12.2986 0 01-1.873.8914.0766.0766 0 00-.0407.1067c.3604.698.7719 1.3628 1.225 1.9932a.076.076 0 00.0842.0286c1.961-.6067 3.9495-1.5219 6.0023-3.0294a.077.077 0 00.0313-.0552c.5004-5.177-.8382-9.6739-3.5485-13.6604a.061.061 0 00-.0312-.0286zM8.02 15.3312c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9555-2.4189 2.157-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.9555 2.4189-2.1569 2.4189zm7.9748 0c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9554-2.4189 2.1569-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.946 2.4189-2.1568 2.4189Z"></path></svg>
twitter: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z"></path></svg>
mastodon: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M23.268 5.313c-.35-2.578-2.617-4.61-5.304-5.004C17.51.242 15.792 0 11.813 0h-.03c-3.98 0-4.835.242-5.288.309C3.882.692 1.496 2.518.917 5.127.64 6.412.61 7.837.661 9.143c.074 1.874.088 3.745.26 5.611.118 1.24.325 2.47.62 3.68.55 2.237 2.777 4.098 4.96 4.857 2.336.792 4.849.923 7.256.38.265-.061.527-.132.786-.213.585-.184 1.27-.39 1.774-.753a.057.057 0 0 0 .023-.043v-1.809a.052.052 0 0 0-.02-.041.053.053 0 0 0-.046-.01 20.282 20.282 0 0 1-4.709.545c-2.73 0-3.463-1.284-3.674-1.818a5.593 5.593 0 0 1-.319-1.433.053.053 0 0 1 .066-.054c1.517.363 3.072.546 4.632.546.376 0 .75 0 1.125-.01 1.57-.044 3.224-.124 4.768-.422.038-.008.077-.015.11-.024 2.435-.464 4.753-1.92 4.989-5.604.008-.145.03-1.52.03-1.67.002-.512.167-3.63-.024-5.545zm-3.748 9.195h-2.561V8.29c0-1.309-.55-1.976-1.67-1.976-1.23 0-1.846.79-1.846 2.35v3.403h-2.546V8.663c0-1.56-.617-2.35-1.848-2.35-1.112 0-1.668.668-1.67 1.977v6.218H4.822V8.102c0-1.31.337-2.35 1.011-3.12.696-.77 1.608-1.164 2.74-1.164 1.311 0 2.302.5 2.962 1.498l.638 1.06.638-1.06c.66-.999 1.65-1.498 2.96-1.498 1.13 0 2.043.395 2.74 1.164.675.77 1.012 1.81 1.012 3.12z"></path></svg>
youtube: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="currentColor" d="M8.051 1.999h.089c.822.003 4.987.033 6.11.335a2.01 2.01 0 0 1 1.415 1.42c.101.38.172.883.22 1.402l.01.104l.022.26l.008.104c.065.914.073 1.77.074 1.957v.075c-.001.194-.01 1.108-.082 2.06l-.008.105l-.009.104c-.05.572-.124 1.14-.235 1.558a2.007 2.007 0 0 1-1.415 1.42c-1.16.312-5.569.334-6.18.335h-.142c-.309 0-1.587-.006-2.927-.052l-.17-.006l-.087-.004l-.171-.007l-.171-.007c-1.11-.049-2.167-.128-2.654-.26a2.007 2.007 0 0 1-1.415-1.419c-.111-.417-.185-.986-.235-1.558L.09 9.82l-.008-.104A31.4 31.4 0 0 1 0 7.68v-.123c.002-.215.01-.958.064-1.778l.007-.103l.003-.052l.008-.104l.022-.26l.01-.104c.048-.519.119-1.023.22-1.402a2.007 2.007 0 0 1 1.415-1.42c.487-.13 1.544-.21 2.654-.26l.17-.007l.172-.006l.086-.003l.171-.007A99.788 99.788 0 0 1 7.858 2h.193zM6.4 5.209v4.818l4.157-2.408L6.4 5.209z"/></svg>
x-twitter: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M389.2 48h70.6L305.6 224.2 487 464H345L233.7 318.6 106.5 464H35.8L200.7 275.5 26.8 48H172.4L272.9 180.9 389.2 48zM364.4 421.8h39.1L151.1 88h-42L364.4 421.8z"/></svg>
10 changes: 5 additions & 5 deletions exampleSite/content/docs/_index.md
Original file line number Diff line number Diff line change
Expand Up @@ -9,8 +9,8 @@ Welcome to the Hextra documentation!

**Hextra** is a modern, responsive and powerful [Hugo](https://gohugo.io/) theme built with [Tailwind CSS](https://tailwindcss.com/). It is inspired by Next.js theme [Nextra](https://github.com/shuding/nextra).

It is designed for building websites for documentation, blogs, books and landing pages.
It is easy to use out of the box, and batteries are included to make your site fast and beautiful.
It is designed for building beautiful websites for documentation, blogs, books and landing pages.
It is easy to use out of the box, and batteries are included to make your site versatile and powerful.

## Features

Expand All @@ -19,14 +19,14 @@ It is easy to use out of the box, and batteries are included to make your site f
- **Lightweight and Fast** - Hextra is solely dependent on Hugo, one of the world's fastest static site generator that comes with just a single binary file.
- **Full-text Search** - Hextra offers built-in offline full-text search powered by [FlexSearch](https://github.com/nextapps-de/flexsearch).
- **Battery included** - Hextra supports Markdown, syntax highlighting, LaTeX, diagrams, and comes with Shortcodes components as building blocks for your Markdown content.
- **Muliti-language** - Hextra supports multi-language sites out of the box.
- **Multi-language Support** - Multi-language sites made easy with Hugo's multilingual mode.
- **SEO Friendly** - Out of the box support for SEO tags, Open Graph, and Twitter Cards.
- **Customizable** - You can easily customize the theme to make the site look the way you want.

## Next

Explore the following sections to get started:
Explore the following section to get started:

{{< cards >}}
{{< card link="/" title="Getting Started" icon="play" >}}
{{< card link="getting-started" title="Getting Started" icon="play" >}}
{{< /cards >}}
4 changes: 4 additions & 0 deletions exampleSite/content/docs/advanced/customization.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,3 +2,7 @@
title: Customizing Hextra
linkTitle: Customization
---

## Custom CSS

To add custom CSS, we need to create a file `assets/css/custom.css` in our site. Hextra will automatically load this file.
70 changes: 70 additions & 0 deletions exampleSite/content/docs/advanced/multi-language.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,70 @@
---
title: "Multi-language"
weight: 1
---

Hextra supports creating site with multiple languages using Hugo's [multilingual mode](https://gohugo.io/content-management/multilingual/).

## Enable Multi-language

To make our site multi-language, we need to tell Hugo the supported languages. We need to add to the site configuration file:

```yaml {filename="hugo.yaml"}
defaultContentLanguage: en
languages:
en:
languageName: English
weight: 1
fr:
languageName: Français
weight: 2
ja:
languageName: 日本語
weight: 3
```
## Manage Translations by Filename
Hugo supports managing translations by filename. For example, if we have a file `content/docs/_index.md` in English, we can create a file `content/docs/_index.fr.md` for French translation.

{{< filetree/container >}}
{{< filetree/folder name="content" >}}
{{< filetree/folder name="docs" state="open" >}}
{{< filetree/file name="_index.md" >}}
{{< filetree/file name="_index.fr.md" >}}
{{< filetree/file name="_index.ja.md" >}}
{{< /filetree/folder >}}
{{< /filetree/folder >}}
{{< /filetree/container >}}

Note: Hugo also supports [Translation by content directory](https://gohugo.io/content-management/multilingual/#translation-by-content-directory).

## Translate Menu Items

To translate menu items in the navigation bar, we need to set the `identifier` field:

```yaml {filename="hugo.yaml"}
menu:
main:
- identifier: documentation
name: Documentation
pageRef: /docs
weight: 1
- identifier: blog
name: Blog
pageRef: /blog
weight: 2
```

and translate them in the corresponding i18n file:

```yaml {filename="i18n/fr.yaml"}
documentation: Documentation
blog: Blog
```

## Read More

- [Hugo Multilingual Mode](https://gohugo.io/content-management/multilingual/)
- [Hugo Multilingual Part 1: Content translation](https://www.regisphilibert.com/blog/2018/08/hugo-multilingual-part-1-managing-content-translation/)
- [Hugo Multilingual Part 2: Strings localization](https://www.regisphilibert.com/blog/2018/08/hugo-multilingual-part-2-i18n-string-localization/)
2 changes: 0 additions & 2 deletions exampleSite/content/docs/guide/configuration.md
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,6 @@ menu:
weight: 4
params:
type: search
placeholder: Search Hextra docs...
- name: GitHub
weight: 5
url: "https://github.com/imfing/hextra"
Expand All @@ -54,7 +53,6 @@ There are different types of menu items:
- name: Search
params:
type: search
placeholder: Search Hextra docs...
```
4. Icon
```yaml
Expand Down
10 changes: 6 additions & 4 deletions exampleSite/hugo.yaml
Original file line number Diff line number Diff line change
Expand Up @@ -42,20 +42,22 @@ enableInlineShortcodes: true

menu:
main:
- name: Documentation
- identifier: documentation
name: Documentation
pageRef: /docs
weight: 1
- name: Blog
- identifier: blog
name: Blog
pageRef: /blog
weight: 2
- name: About
- identifier: about
name: About
pageRef: /about
weight: 3
- name: Search
weight: 4
params:
type: search
placeholder: Search Hextra docs...
- name: GitHub
weight: 5
url: "https://github.com/imfing/hextra"
Expand Down
2 changes: 0 additions & 2 deletions exampleSite/hugo_stats.json
Original file line number Diff line number Diff line change
Expand Up @@ -327,7 +327,6 @@
"mb-8",
"md:h-[calc(100vh-var(--navbar-height)-var(--menu-height))]",
"md:hidden",
"md:inline",
"md:inline-block",
"md:justify-start",
"md:max-h-[min(calc(100vh-5rem-env(safe-area-inset-bottom)),400px)]",
Expand All @@ -350,7 +349,6 @@
"min-w-full",
"ml-1",
"ml-4",
"ml-auto",
"mr-1",
"mr-2",
"mt-1.5",
Expand Down
6 changes: 6 additions & 0 deletions i18n/ja.yaml
Original file line number Diff line number Diff line change
@@ -1,2 +1,8 @@
documentation: "ドキュメンテーション"
blog: "ブログ"
about: "このサイトについて"

search_placeholder: "検索ドキュメント..."

article:
on_this_page: "このページでは"
3 changes: 3 additions & 0 deletions layouts/partials/head-css.html
Original file line number Diff line number Diff line change
Expand Up @@ -7,4 +7,7 @@
{{ $styles = $styles | minify | fingerprint | resources.PostProcess }}
<link rel="preload" href="{{ $styles.RelPermalink }}" as="style" />
<link href="{{ $styles.RelPermalink }}" rel="stylesheet" integrity="{{ $styles.Data.integrity }}" />

{{ $custom := resources.Get "css/custom.css" }}
{{ $custom = $custom | minify | fingerprint }}
{{ end }}
12 changes: 6 additions & 6 deletions layouts/partials/navbar.html
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@
<img class="block dark:hidden" src="{{ $logoPath | relURL }}" alt="{{ .Site.Title }}" height="{{ $logoWidth }}" width="{{ $logoHeight }}" />
<img class="hidden dark:block" src="{{ $logoDarkPath | relURL }}" alt="{{ .Site.Title }}" height="{{ $logoWidth }}" width="{{ $logoHeight }}" />
{{- if .Site.Params.navbar.displayTitle -}}
<span class="mx-2 font-extrabold hidden md:inline select-none" title="{{ .Site.Title }}">{{- .Site.Title -}}</span>
<span class="mx-2 font-extrabold inline select-none" title="{{ .Site.Title }}">{{- .Site.Title -}}</span>
{{- end -}}
</a>

Expand All @@ -25,26 +25,26 @@
{{- $external := strings.HasPrefix .URL "http" -}}
{{/* Display icon menu item */}}
{{- if .Params.icon -}}
<a class="p-2 text-current" {{ if $external }}target="_blank" rel="noreferer"{{ end }} href="{{ .URL | safeURL }}">
<a class="p-2 text-current" {{ if $external }}target="_blank" rel="noreferer"{{ end }} href="{{ .URL | relLangURL }}">
{{- partial "utils/icon.html" (dict "name" .Params.icon "attributes" "height=24") -}}
<span class="sr-only">{{ .Name }}</span>
<span class="sr-only">{{ or (T .Identifier) .Name | safeHTML }}</span>
</a>
{{- else -}}
{{- $active := or ($currentPage.HasMenuCurrent "main" .) ($currentPage.IsMenuCurrent "main" .) -}}
{{- $activeClass := cond $active "font-medium" "text-gray-600 hover:text-gray-800 dark:text-gray-400 dark:hover:text-gray-200" -}}
<a
href="{{ .URL | safeURL }}"
href="{{ .URL | relLangURL }}"

This comment has been minimized.

Copy link
@fastmind2014

fastmind2014 Oct 4, 2023

Here should not be relative url for external urls. Maybe need to revert back to safeURL.

This comment has been minimized.

Copy link
@imfing

imfing Oct 4, 2023

Author Owner

Did you observe any issue with this? relLangURL won't affect the external URLs

This comment has been minimized.

Copy link
@fastmind2014

fastmind2014 Oct 7, 2023

I encounter this problem in my project. I set url='https://www.twitter.com', and it renders 'http://localhost:1313/https://www.twitter.com'.

This comment has been minimized.

Copy link
@imfing

imfing Oct 7, 2023

Author Owner

can you please raise an issue?

{{ if $external }}target="_blank" rel="noreferer"{{ end }}
class="text-sm contrast-more:text-gray-700 contrast-more:dark:text-gray-100 relative -ml-2 hidden whitespace-nowrap p-2 md:inline-block {{ $activeClass }}"
>
<span class="text-center">{{ .Name }}</span>
<span class="text-center">{{ or (T .Identifier) .Name | safeHTML }}</span>
</a>
{{- end -}}
{{- end -}}
{{- end -}}


<button type="button" aria-label="Menu" class="hamburger-menu ml-auto -mr-2 rounded p-2 active:bg-gray-400/20 md:hidden">
<button type="button" aria-label="Menu" class="hamburger-menu -mr-2 rounded p-2 active:bg-gray-400/20 md:hidden">
{{- partial "utils/icon.html" (dict "name" "hamburger-menu" "attributes" "height=24") -}}
</button>
</nav>
Expand Down
2 changes: 1 addition & 1 deletion layouts/partials/search.html
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
{{- $placeholder := .params.placeholder | default "Search..." -}}
{{- $placeholder := (T "search_placeholder") | default "Search..." -}}


<div class="search-wrapper relative md:w-64">
Expand Down

0 comments on commit 8073722

Please sign in to comment.