Genius/hextra
1
0
Fork 0
forked from drowl87/hextra_mirror
Code Pull Requests Activity

chore: add more i18n options and update templates

Browse Source
This commit is contained in:
Xin 2023-08-27 17:32:44 +01:00
parent d9c44bc503
commit c8b1d764e0
15 changed files with 125 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.prettierrc
View File

@ -1,7 +1,7 @@
{
"goTemplateBracketSpacing": true,
"htmlWhitespaceSensitivity": "css",
"printWidth": 100,
"printWidth": 200,
"singleQuote": false,
"tabWidth": 2,
"trailingComma": "es5",

3
assets/js/flexsearch.js
View File

@ -6,6 +6,7 @@
// {{ if hugo.IsProduction }}
// {{ $searchData := $searchData | minify | fingerprint }}
// {{ end }}
// {{ $noResultsFound := (T "noResultsFound") | default "No results found." }}
(function () {
const searchDataURL = '{{ $searchData.RelPermalink }}';
@ -300,7 +301,7 @@
if (!resultsElement) return;
if (!results.length) {
resultsElement.innerHTML = `<span class="no-result">No results found.</span>`;
resultsElement.innerHTML = `<span class="no-result">{{ $noResultsFound | safeHTML }}</span>`;
return;
}

20
exampleSite/content/about/index.ja.md Normal file
View File

@ -0,0 +1,20 @@
---
title: "このサイトについて"
toc: false
---
Hextraは、現代的な静的ウェブサイトを構築するためのシンプルで高速で柔軟なテーマとして設計されています。特にドキュメンテーションウェブサイトに適していますが、ブログ、ポートフォリオなどのさまざまなタイプのサイトにも使用できます。
Hugoは、Jekyllと同様に静的サイトジェネレーターです。Hugoの特徴は、単一のバイナリであることで、さまざまなプラットフォームで簡単にインストールして実行できることです。また、数千ページのサイトをミリ秒単位でレンダリングできるほど非常に高速で信頼性があります。
Hextraは、最小限のフットプリントに焦点を当てた考え方で構築されています。始めるためには、Node.jsのような追加の依存関係は必要ありません。必要なのは、単一のYAML設定ファイルと、Markdownのコンテンツだけです。そのため、ツールのセットアップではなく、質の高いコンテンツの作成に集中できます。
## クレジット
Hextraをビルドするには、次のツールとインスピレーションが必要です：
- [Hugo](https://gohugo.io/)
- [Tailwind CSS](https://tailwindcss.com/)
- [Heroicons](https://heroicons.com/)
- [Nextra](https://nextra.vercel.app/)
- [Next.js](https://nextjs.org/)

12
exampleSite/content/docs/_index.ja.md
View File

@ -3,7 +3,13 @@ linkTitle: "ドキュメンテーション"
title: Hextraへようこそ
---
**Hextra**は、[Tailwind CSS](https://tailwindcss.com/)で構築された、モダンでレスポンシブでパワフルな[Hugo](https://gohugo.io/)テーマです。
[Next.js](https://nextjs.org/)テーマの[Nextra](https://github.com/shuding/nextra)にインスパイアされています。
👋 こんにちは！Hextraドキュメンテーションへようこそ！
## クイックスタート
## Hextraとは？
Hextraは、[Hugo][hugo]テーマの一つで、[Tailwind CSS][tailwind-css]を使用して作られた、現代的で高速なバッテリー内蔵のテーマです。
ドキュメンテーション、ブログ、ウェブサイトの美しいウェブサイトを構築するために設計され、様々な要件に対応するための機能と柔軟性を提供します。
[hugo]: https://gohugo.io/
[flex-search]: https://github.com/nextapps-de/flexsearch
[tailwind-css]: https://tailwindcss.com/

9
i18n/en.yaml
View File

@ -1,6 +1,5 @@
article:
on_this_page: "On this page"
edit_this_page: "Edit this page on GitHub →"
onThisPage: "On this page"
editThisPage: "Edit this page on GitHub →"
lastUpdated: "Last updated on"
footer:
copyright: "© 2023 Hextra Project."
copyright: "© 2023 Hextra Project."

14
i18n/ja.yaml
View File

@ -1,8 +1,16 @@
# Navbar
documentation: "ドキュメンテーション"
blog: "ブログ"
about: "このサイトについて"
search_placeholder: "検索ドキュメント..."
more: "もっと"
hugoDocs: "Hugoドキュメント ↗"
article:
on_this_page: "このページでは"
searchPlaceholder: "検索ドキュメント..."
noResultsFound: "検索結果が見つかりませんでした"
onThisPage: "このページでは"
editThisPage: "このページをGitHubで編集する →"
lastUpdated: "最終更新日"
copyright: "© 2023 Hextra Project."

12
layouts/partials/breadcrumb.html
View File

@ -1,13 +1,13 @@
<div class="mt-1.5 flex items-center gap-1 overflow-hidden text-sm text-gray-500 dark:text-gray-400 contrast-more:text-current">
{{ range .Ancestors.Reverse }}
{{ if not .IsHome }}
{{- range .Ancestors.Reverse }}
{{- if not .IsHome }}
<div class="whitespace-nowrap transition-colors min-w-[24px] overflow-hidden text-ellipsis hover:text-gray-900 dark:hover:text-gray-100">
<a href="{{ .Permalink }}">{{ .LinkTitle }}</a>
</div>
{{ partial "utils/icon.html" (dict "name" "chevron-right" "attributes" "class=\"w-3.5 shrink-0\"") }}
{{ end }}
{{ end }}
{{- partial "utils/icon.html" (dict "name" "chevron-right" "attributes" "class=\"w-3.5 shrink-0\"") -}}
{{ end -}}
{{ end -}}
<div class="whitespace-nowrap transition-colors font-medium text-gray-700 contrast-more:font-bold contrast-more:text-current dark:text-gray-100 contrast-more:dark:text-current">
{{ .LinkTitle }}
{{- .LinkTitle -}}
</div>
</div>

10
layouts/partials/components/last-updated.html
View File

@ -1,10 +1,12 @@
{{ if site.Params.displayUpdatedDate }}
{{- $lastUpdated := (T "lastUpdated") | default "Last updated on" -}}
{{- if site.Params.displayUpdatedDate -}}
{{- with .Lastmod -}}
{{ $datetime := (time.Format "2006-01-02T15:04:05.000Z" .) }}
<div class="mt-12 mb-8 block text-xs text-gray-500 ltr:text-right rtl:text-left dark:text-gray-400">Last updated on <time datetime="{{ $datetime }}">{{ partial "utils/format-date" . }}</time></div>
<div class="mt-12 mb-8 block text-xs text-gray-500 ltr:text-right rtl:text-left dark:text-gray-400">{{ $lastUpdated }} <time datetime="{{ $datetime }}">{{ partial "utils/format-date" . }}</time></div>
{{- else -}}
<div class="mt-16"></div>
{{- end -}}
{{ else }}
{{- else -}}
<div class="mt-16"></div>
{{ end }}
{{- end -}}

12
layouts/partials/components/pager.html
View File

@ -20,13 +20,21 @@
{{- if or $prev $next -}}
<div class="mb-8 flex items-center border-t pt-8 dark:border-neutral-800 contrast-more:border-neutral-400 dark:contrast-more:border-neutral-400 print:hidden">
{{- if $prev -}}
<a href="{{ $prev.RelPermalink }}" class="flex max-w-[50%] items-center gap-1 py-4 text-base font-medium text-gray-600 transition-colors [word-break:break-word] hover:text-primary-600 dark:text-gray-300 md:text-lg ltr:pr-4 rtl:pl-4">
<a
href="{{ $prev.RelPermalink }}"
title="{{ $prev.LinkTitle }}"
class="flex max-w-[50%] items-center gap-1 py-4 text-base font-medium text-gray-600 transition-colors [word-break:break-word] hover:text-primary-600 dark:text-gray-300 md:text-lg ltr:pr-4 rtl:pl-4"
>
{{- partial "utils/icon.html" (dict "name" "chevron-right" "attributes" "class=\"inline h-5 shrink-0 ltr:rotate-180\"") -}}
{{- $prev.LinkTitle -}}
</a>
{{- end -}}
{{- if $next -}}
<a href="{{ $next.RelPermalink }}" class="flex max-w-[50%] items-center gap-1 py-4 text-base font-medium text-gray-600 transition-colors [word-break:break-word] hover:text-primary-600 dark:text-gray-300 md:text-lg ltr:ml-auto ltr:pl-4 ltr:text-right rtl:mr-auto rtl:pr-4 rtl:text-left">
<a
href="{{ $next.RelPermalink }}"
title="{{ $next.LinkTitle }}"
class="flex max-w-[50%] items-center gap-1 py-4 text-base font-medium text-gray-600 transition-colors [word-break:break-word] hover:text-primary-600 dark:text-gray-300 md:text-lg ltr:ml-auto ltr:pl-4 ltr:text-right rtl:mr-auto rtl:pr-4 rtl:text-left"
>
{{- $next.LinkTitle -}}
{{- partial "utils/icon.html" (dict "name" "chevron-right" "attributes" "class=\"inline h-5 shrink-0\"") -}}
</a>

11
layouts/partials/footer.html
View File

@ -1,5 +1,7 @@
{{- $enableFooterSwitches := .Scratch.Get "enableFooterSwitches" | default false -}}
{{- $copyright := (T "copyright") | default "© 2023 Hextra." -}}
<footer class="hextra-footer bg-gray-100 pb-[env(safe-area-inset-bottom)] dark:bg-neutral-900 print:bg-transparent">
{{- if $enableFooterSwitches }}
@ -9,17 +11,20 @@
</div>
{{ end -}}
<hr class="dark:border-neutral-800" />
<div class="mx-auto flex max-w-screen-xl justify-center py-12 pl-[max(env(safe-area-inset-left),1.5rem)] pr-[max(env(safe-area-inset-right),1.5rem)] text-gray-600 dark:text-gray-400 md:justify-start">
<div
class="mx-auto flex max-w-screen-xl justify-center py-12 pl-[max(env(safe-area-inset-left),1.5rem)] pr-[max(env(safe-area-inset-right),1.5rem)] text-gray-600 dark:text-gray-400 md:justify-start"
>
<div class="flex w-full flex-col items-center sm:items-start">
{{- if (.Site.Params.footer.displayPoweredBy | default true) }}<div class="font-semibold">{{ template "theme-credit" . }}</div>{{ end }}
{{- if .Site.Params.footer.displayCopyright }}<p class="mt-6 text-xs">{{ i18n "footer.copyright" }}</p>{{ end }}
{{- if .Site.Params.footer.displayCopyright }}<p class="mt-6 text-xs">{{ $copyright }}</p>{{ end }}
</div>
</div>
</footer>
{{- define "theme-credit" -}}
<a class="flex text-sm items-center gap-1 text-current" target="_blank" rel="noopener noreferrer" title="Hextra GitHub Homepage" href="https://github.com/imfing/hextra">
<span>Powered by Hextra
<span
>Powered by Hextra
{{- partial "utils/icon.html" (dict "name" "hextra" "attributes" "height=1em class=\"inline-block ml-1 align-text-bottom\"") -}}
</span>
</a>

20
layouts/partials/language-switch.html
View File

@ -3,19 +3,33 @@
{{- $grow := .grow -}}
{{- $hideLabel := .hideLabel | default false -}}
{{- $changeLanguage := (T "changeLanguage") | default "Change language" -}}
{{- if site.IsMultiLingual -}}
<div class="flex justify-items-start {{ if $grow }}grow{{ end }}">
<button title="Change language" data-state="closed" class="language-switcher h-7 rounded-md px-2 text-left text-xs font-medium text-gray-600 transition-colors dark:text-gray-400 hover:bg-gray-100 hover:text-gray-900 dark:hover:bg-primary-100/5 dark:hover:text-gray-50 grow" type="button" aria-label="Switch Language">
<button
title="{{ $changeLanguage }}"
data-state="closed"
class="language-switcher h-7 rounded-md px-2 text-left text-xs font-medium text-gray-600 transition-colors dark:text-gray-400 hover:bg-gray-100 hover:text-gray-900 dark:hover:bg-primary-100/5 dark:hover:text-gray-50 grow"
type="button"
aria-label="{{ $changeLanguage }}"
>
<div class="flex items-center gap-2 capitalize">
{{- partial "utils/icon" (dict "name" "globe-alt" "attributes" "height=12") -}}
{{- if not $hideLabel }}<span>{{ site.Language.LanguageName }}</span>{{ end -}}
</div>
</button>
<ul class="language-options hidden z-20 max-h-64 overflow-auto rounded-md ring-1 ring-black/5 bg-white py-1 text-sm shadow-lg dark:ring-white/20 dark:bg-neutral-800" style="position: fixed; inset: auto auto 0px 0px; margin: 0px; min-width: 100px;">
<ul
class="language-options hidden z-20 max-h-64 overflow-auto rounded-md ring-1 ring-black/5 bg-white py-1 text-sm shadow-lg dark:ring-white/20 dark:bg-neutral-800"
style="position: fixed; inset: auto auto 0px 0px; margin: 0px; min-width: 100px;"
>
{{ range site.Languages }}
{{ $link := partial "utils/lang-link" (dict "lang" .Lang "context" $page) }}
<li class="flex flex-col">
<a href="{{ $link }}" class="text-gray-800 dark:text-gray-100 hover:bg-primary-50 hover:text-primary-600 hover:dark:bg-primary-500/10 hover:dark:text-primary-600 relative cursor-pointer whitespace-nowrap py-1.5 transition-colors ltr:pl-3 ltr:pr-9 rtl:pr-3 rtl:pl-9">
<a
href="{{ $link }}"
class="text-gray-800 dark:text-gray-100 hover:bg-primary-50 hover:text-primary-600 hover:dark:bg-primary-500/10 hover:dark:text-primary-600 relative cursor-pointer whitespace-nowrap py-1.5 transition-colors ltr:pl-3 ltr:pr-9 rtl:pr-3 rtl:pl-9"
>
{{- .LanguageName -}}
{{- if eq .LanguageName site.Language.LanguageName -}}
<span class="absolute inset-y-0 flex items-center ltr:right-3 rtl:left-3">

19
layouts/partials/search.html
View File

@ -1,14 +1,25 @@
{{- $placeholder := (T "search_placeholder") | default "Search..." -}}
{{- $placeholder := (T "searchPlaceholder") | default "Search..." -}}
<div class="search-wrapper relative md:w-64">
<div class="relative flex items-center text-gray-900 contrast-more:text-gray-800 dark:text-gray-300 contrast-more:dark:text-gray-300">
<input placeholder="{{ $placeholder }}" class="search-input block w-full appearance-none rounded-lg px-3 py-2 transition-colors text-base leading-tight md:text-sm bg-black/[.05] dark:bg-gray-50/10 focus:bg-white dark:focus:bg-dark placeholder:text-gray-500 dark:placeholder:text-gray-400 contrast-more:border contrast-more:border-current" type="search" value="" spellcheck="false" />
<kbd class="absolute my-1.5 select-none ltr:right-1.5 rtl:left-1.5 h-5 rounded bg-white px-1.5 font-mono text-[10px] font-medium text-gray-500 border dark:border-gray-100/20 dark:bg-dark/50 contrast-more:border-current contrast-more:text-current contrast-more:dark:border-current items-center gap-1 transition-opacity pointer-events-none hidden sm:flex"> <span class="text-xs">⌘</span>K </kbd>
<input
placeholder="{{ $placeholder }}"
class="search-input block w-full appearance-none rounded-lg px-3 py-2 transition-colors text-base leading-tight md:text-sm bg-black/[.05] dark:bg-gray-50/10 focus:bg-white dark:focus:bg-dark placeholder:text-gray-500 dark:placeholder:text-gray-400 contrast-more:border contrast-more:border-current"
type="search"
value=""
spellcheck="false"
/>
<kbd
class="absolute my-1.5 select-none ltr:right-1.5 rtl:left-1.5 h-5 rounded bg-white px-1.5 font-mono text-[10px] font-medium text-gray-500 border dark:border-gray-100/20 dark:bg-dark/50 contrast-more:border-current contrast-more:text-current contrast-more:dark:border-current items-center gap-1 transition-opacity pointer-events-none hidden sm:flex"
>
<span class="text-xs">⌘</span>K
</kbd>
</div>
<div>
<ul class="search-results hidden border border-gray-200 bg-white text-gray-100 dark:border-neutral-800 dark:bg-neutral-900 absolute top-full z-20 mt-2 overflow-auto overscroll-contain rounded-xl py-2.5 shadow-xl max-h-[min(calc(50vh-11rem-env(safe-area-inset-bottom)),400px)] md:max-h-[min(calc(100vh-5rem-env(safe-area-inset-bottom)),400px)] inset-x-0 ltr:md:left-auto rtl:md:right-auto contrast-more:border contrast-more:border-gray-900 contrast-more:dark:border-gray-50 w-screen min-h-[100px] max-w-[min(calc(100vw-2rem),calc(100%+20rem))]"
<ul
class="search-results hidden border border-gray-200 bg-white text-gray-100 dark:border-neutral-800 dark:bg-neutral-900 absolute top-full z-20 mt-2 overflow-auto overscroll-contain rounded-xl py-2.5 shadow-xl max-h-[min(calc(50vh-11rem-env(safe-area-inset-bottom)),400px)] md:max-h-[min(calc(100vh-5rem-env(safe-area-inset-bottom)),400px)] inset-x-0 ltr:md:left-auto rtl:md:right-auto contrast-more:border contrast-more:border-gray-900 contrast-more:dark:border-gray-50 w-screen min-h-[100px] max-w-[min(calc(100vw-2rem),calc(100%+20rem))]"
style="transition: max-height 0.2s ease 0s;"
></ul>
</div>

5
layouts/partials/sidebar.html
View File

@ -120,12 +120,13 @@
{{- define "sidebar-footer" -}}
{{- range site.Menus.sidebar -}}
{{- $name := or (T .Identifier) .Name -}}
{{ if eq .Params.type "separator" }}
<li class="[word-break:break-word] mt-5 mb-2 px-2 py-1.5 text-sm font-semibold text-gray-900 first:mt-0 dark:text-gray-100">
<span class="cursor-default">{{ .Name }}</span>
<span class="cursor-default">{{ $name }}</span>
</li>
{{ else }}
<li>{{ template "sidebar-item-link" dict "active" false "title" .Name "link" .URL }}</li>
<li>{{ template "sidebar-item-link" dict "active" false "title" $name "link" (.URL | relLangURL) }}</li>
{{ end }}
{{- end -}}
{{- end -}}

10
layouts/partials/theme-toggle.html
View File

@ -1,7 +1,15 @@
{{- $hideLabel := .hideLabel | default false -}}
{{- $changeTheme := (T "changeTheme") | default "Change theme" -}}
<button title="Change theme" data-theme="light" class="theme-toggle group h-7 rounded-md px-2 text-left text-xs font-medium text-gray-600 transition-colors dark:text-gray-400 hover:bg-gray-100 hover:text-gray-900 dark:hover:bg-primary-100/5 dark:hover:text-gray-50" type="button" aria-label="Toggle Dark Mode">
<button
title="{{ $changeTheme }}"
data-theme="light"
class="theme-toggle group h-7 rounded-md px-2 text-left text-xs font-medium text-gray-600 transition-colors dark:text-gray-400 hover:bg-gray-100 hover:text-gray-900 dark:hover:bg-primary-100/5 dark:hover:text-gray-50"
type="button"
aria-label="Toggle Dark Mode"
>
<div class="flex items-center gap-2 capitalize">
{{- partial "utils/icon.html" (dict "name" "sun" "attributes" "height=12 class=\"group-data-[theme=light]:hidden\"") -}}
{{- if not $hideLabel }}<span class="group-data-[theme=light]:hidden">Light</span>{{ end -}}

7
layouts/partials/toc.html
View File

@ -1,13 +1,14 @@
{{/* Table of Contents */}}
{{/* TODO: toc bottom part should be able to hide */}}
{{- $toc := .Params.toc | default true -}}
{{- $onThisPage := (T "onThisPage") | default "On this page"}}
{{- $editThisPage := (T "editThisPage") | default "Edit this page"}}
<nav class="hextra-toc order-last hidden w-64 shrink-0 xl:block print:hidden px-4" aria-label="table of contents">
{{- if $toc }}
<div class="sticky top-16 overflow-y-auto pr-4 pt-6 text-sm [hyphens:auto] max-h-[calc(100vh-var(--navbar-height)-env(safe-area-inset-bottom))] ltr:-mr-4 rtl:-ml-4">
{{- with .Fragments.Headings -}}
<p class="mb-4 font-semibold tracking-tight">{{ i18n "article.on_this_page" }}</p>
<p class="mb-4 font-semibold tracking-tight">{{ $onThisPage }}</p>
{{- range . -}}
<ul>
{{- with .Headings -}}{{ template "toc-subheading" (dict "headings" . "level" 0) }}{{- end -}}
@ -26,7 +27,7 @@
{{- $editURL := site.Params.editURL.base | default "" -}}
{{- with .File -}}{{ $editURL = urls.JoinPath $editURL .Path }}{{- end -}}
{{- with .Params.editURL -}}{{ $editURL = .Params.editURL }}{{- end -}}
<a class="text-xs font-medium text-gray-500 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-100 contrast-more:text-gray-800 contrast-more:dark:text-gray-50" href="{{ $editURL }}" target="_blank" rel="noreferer">{{ i18n "article.edit_this_page" }}</a>
<a class="text-xs font-medium text-gray-500 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-100 contrast-more:text-gray-800 contrast-more:dark:text-gray-50" href="{{ $editURL }}" target="_blank" rel="noreferer">{{ $editThisPage }}</a>
{{- end -}}
</div>
</div>