drowl87/hextra_mirror
1
0
Fork 1
mirror of https://github.com/imfing/hextra.git synced 2025-06-20 04:51:24 -04:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat: add multi-language select and fix minor issues

Browse Source 
fix: navbar icon should use home relative link

fix: copy code for raw <code> element

fix: missing breadcrumb hover style

fix: tabs typo preventing loading the script
This commit is contained in:
Xin
2023-08-13 22:18:20 +01:00
parent 3d7a4b7c99
commit 7a2cca9181
12 changed files with 120 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
layouts/_default/_markup/render-codeblock.html
View File

@ -1,6 +1,6 @@
{{ $class := .Attributes.class | default "" }}
{{ $filename := .Attributes.filename | default "" }}
{{ $lang := .Attributes.lang | default .Type }}
{{- $class := .Attributes.class | default "" -}}
{{- $filename := .Attributes.filename | default "" -}}
{{- $lang := .Attributes.lang | default .Type -}}
<div class="code-block relative mt-6 first:mt-0 group/code">
@ -12,7 +12,7 @@
{{- highlight .Inner $lang .Options -}}
</div>
{{- else -}}
<pre><code id="code-block-{{ .Ordinal }}">{{- .Inner -}}</code></pre>
<pre><code id="code-block-{{ .Ordinal }}">{{ .Inner }}</code></pre>
{{- end -}}
<div class="opacity-0 transition group-hover/code:opacity-100 flex gap-1 absolute m-[11px] right-0 {{ if $filename }}top-8{{ else }}top-0{{ end }}">
<button class="code-copy-btn group/copybtn transition-all active:opacity-50 bg-primary-700/5 border border-black/5 text-gray-600 hover:text-gray-900 rounded-md p-1.5 dark:bg-primary-300/10 dark:border-white/10 dark:text-gray-400 dark:hover:text-gray-50" title="Copy code" data-clipboard-target="#code-block-{{ .Ordinal }}">

2
layouts/partials/breadcrumb.html
View File

@ -1,7 +1,7 @@
<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 }}
<div class="whitespace-nowrap transition-colors min-w-[24px] overflow-hidden text-ellipsis">
<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\"") }}

13
layouts/partials/footer.html
View File

@ -2,7 +2,12 @@
<footer class="hextra-footer bg-gray-100 pb-[env(safe-area-inset-bottom)] dark:bg-neutral-900 print:bg-transparent">
{{- if $enableFooterSwitches }}{{ template "footer-switches" }}{{ end -}}
{{- if $enableFooterSwitches }}
<div class="mx-auto flex max-w-[90rem] gap-2 py-2 px-4">
{{ partial "language-switch.html" (dict "context" .) }}
{{ partial "theme-toggle.html" }}
</div>
{{ end -}}
<hr class="dark:border-neutral-800" />
<div class="mx-auto flex max-w-[90rem] 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">
@ -16,9 +21,3 @@
</div>
</div>
</footer>
{{- define "footer-switches" -}}
<div class="mx-auto flex max-w-[90rem] gap-2 py-2 px-4">
{{ partial "theme-toggle.html" }}
</div>
{{- end -}}

30
layouts/partials/language-switch.html Normal file
View File

@ -0,0 +1,30 @@
{{- $page := .context -}}
{{- $grow := .grow -}}
{{- $hideLabel := .hideLabel | default false -}}
{{- 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">
<div class="flex items-center gap-2 capitalize">
{{- partial "utils/icon" (dict "name" "globe" "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;">
{{ 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 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">
{{- partial "utils/icon" (dict "name" "check" "attributes" "height=1em width=1em") -}}
</span>
{{- end -}}
</a>
</li>
{{ end -}}
</ul>
</div>
{{- end -}}

2
layouts/partials/navbar.html
View File

@ -2,7 +2,7 @@
<div class="pointer-events-none absolute z-[-1] h-full w-full bg-white shadow-[0_2px_4px_rgba(0,0,0,.02),0_1px_0_rgba(0,0,0,.06)] contrast-more:shadow-[0_0_0_1px_#000] dark:bg-dark dark:shadow-[0_-1px_0_rgba(255,255,255,.1)_inset] contrast-more:dark:shadow-[0_0_0_1px_#fff]"></div>
<nav class="mx-auto flex items-center justify-end gap-2 h-16 px-6 max-w-[90rem]">
<a class="flex items-center hover:opacity-75 ltr:mr-auto rtl:ml-auto" href="{{ .Site.BaseURL }}">
<a class="flex items-center hover:opacity-75 ltr:mr-auto rtl:ml-auto" href="{{ .Site.Home.RelPermalink }}">
{{ partial "utils/icon.html" (dict "name" "hextra" "attributes" "height=20") }}
<span class="mx-2 font-extrabold hidden md:inline select-none" title="{{ .Site.Title }}">
{{ .Site.Title }}

5
layouts/partials/scripts.html
View File

@ -1,9 +1,10 @@
{{ $jsTheme := resources.Get "js/theme.js" }}
{{ $jsMenu := resources.Get "js/menu.js" }}
{{ $jsCodeCopy := resources.Get "js/code-copy.js" }}
{{ $jsTabs := resources.Get "js/code-copy.js" }}
{{ $jsTabs := resources.Get "js/tabs.js" }}
{{ $jsLang := resources.Get "js/lang.js" }}
{{ $scripts := slice $jsTheme $jsMenu $jsCodeCopy $jsTabs | resources.Concat "js/main.js" }}
{{ $scripts := slice $jsTheme $jsMenu $jsCodeCopy $jsTabs $jsLang | resources.Concat "js/main.js" }}
{{ if hugo.IsProduction }}
{{ $scripts = $scripts | minify | fingerprint }}
{{ end }}

15
layouts/partials/sidebar.html
View File

@ -43,7 +43,11 @@
{{ end }}
</div>
{{/* Hide theme switch when sidebar is disabled */}}
{{ template "theme-switch" (dict "class" (cond $disableSidebar "md:hidden" "")) }}
{{ $switchesClass := cond $disableSidebar "md:hidden" "" }}
<div class="{{ $switchesClass }} sticky bottom-0 bg-white dark:bg-dark mx-4 py-4 shadow-[0_-12px_16px_#fff] flex justify-end items-center gap-2 dark:border-neutral-800 dark:shadow-[0_-12px_16px_#111] contrast-more:border-neutral-400 contrast-more:shadow-none contrast-more:dark:shadow-none border-t" data-toggle-animation="show">
{{ partial "language-switch" (dict "context" $context "grow" true) }}
{{ partial "theme-toggle" (dict "hideLabel" true) }}
</div>
</aside>
{{- define "sidebar-main" -}}
@ -156,12 +160,3 @@
{{- define "sidebar-separator" -}}
<div class="mt-4 border-t py-4 dark:border-neutral-800 contrast-more:border-neutral-400 dark:contrast-more:border-neutral-400" />
{{- end -}}
{{- define "theme-switch" -}}
{{- $class := .class -}}
<div class="{{ $class }} sticky bottom-0 bg-white dark:bg-dark mx-4 py-4 shadow-[0_-12px_16px_#fff] flex items-center gap-2 dark:border-neutral-800 dark:shadow-[0_-12px_16px_#111] contrast-more:border-neutral-400 contrast-more:shadow-none contrast-more:dark:shadow-none border-t" data-toggle-animation="show">
<div class="grow flex flex-col">
{{ partial "theme-toggle" }}
</div>
</div>
{{- end -}}

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

@ -1,8 +1,11 @@
{{- $hideLabel := .hideLabel | default false -}}
<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">
<div class="flex items-center gap-2 capitalize">
{{- partial "utils/icon.html" (dict "name" "sun" "attributes" "height=12 class=\"group-data-[theme=light]:hidden\"") -}}
<span class="group-data-[theme=light]:hidden">Light</span>
{{- if not $hideLabel }}<span class="group-data-[theme=light]:hidden">Light</span>{{ end -}}
{{- partial "utils/icon.html" (dict "name" "moon" "attributes" "height=12 class=\"group-data-[theme=dark]:hidden\"") -}}
<span class="group-data-[theme=dark]:hidden">Dark</span>
{{- if not $hideLabel }}<span class="group-data-[theme=dark]:hidden">Dark</span>{{ end -}}
</div>
</button>

25
layouts/partials/utils/lang-link.html Normal file
View File

@ -0,0 +1,25 @@
{{/* Get relative link of a page for given language */}}
{{/* If not found, return the homepage of the language page */}}
{{ $page := .context }}
{{ $lang := .lang }}
{{ $link := false }}
{{ range $page.AllTranslations }}
{{ if eq .Language.Lang $lang }}
{{ $link = .RelPermalink }}
{{ end }}
{{ end }}
{{ if not $link }}
{{ range where $page.Sites ".Language.Lang" $lang }}
{{ $link = .Home.RelPermalink }}
{{ end }}
{{ end }}
{{ if not $link }}
{{ $link = site.Home.RelPermalink }}
{{ end }}
{{ return $link }}