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

feat: allow disable toc on page frontmatter

Browse Source 
refactor: move pager to partial/components

chore: add head-css and favicons

- support favicons and page descriptions
- dynamic title based on page
- add custom head-end hook

feat: add opengraph to head

fix: sidebar not hiding when resizing
This commit is contained in:
Xin 2023-08-09 22:57:43 +01:00
parent ad3c607623
commit 750e566d24
11 changed files with 96 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
layouts/blog/single.html
View File

@ -27,7 +27,7 @@
</div> </div>
{{ partial "components/last-updated.html" . }} {{ partial "components/last-updated.html" . }}
{{ .Scratch.Set "reversePagination" true }} {{ .Scratch.Set "reversePagination" true }}
{{ partial "pager.html" . }} {{ partial "components/pager.html" . }}
</main> </main>
</article> </article>
</div> </div>

2
layouts/docs/list.html
View File

@ -10,7 +10,7 @@
{{ .Content }} {{ .Content }}
</div> </div>
<div class="mt-16"></div> <div class="mt-16"></div>
{{ partial "pager.html" . }} {{ partial "components/pager.html" . }}
</main> </main>
</article> </article>
</div> </div>

2
layouts/docs/single.html
View File

@ -10,7 +10,7 @@
{{ .Content }} {{ .Content }}
</div> </div>
{{ partial "components/last-updated.html" . }} {{ partial "components/last-updated.html" . }}
{{ partial "pager.html" . }} {{ partial "components/pager.html" . }}
</main> </main>
</article> </article>
</div> </div>

0
layouts/partials/pager.html → layouts/partials/components/pager.html
View File

0
layouts/partials/custom/head-end.html Normal file
View File

10
layouts/partials/favicons.html Normal file
View File

@ -0,0 +1,10 @@
<link rel="shortcut icon" href="{{ "favicons/favicon.ico" | relURL }}" />
<link rel="apple-touch-icon" href="{{ "favicons/apple-touch-icon-180x180.png" | relURL }}" sizes="180x180" />
<link rel="icon" type="image/png" href="{{ "favicons/favicon-16x16.png" | relURL }}" sizes="16x16" />
<link rel="icon" type="image/png" href="{{ "favicons/favicon-32x32.png" | relURL }}" sizes="32x32" />
<link rel="icon" type="image/png" href="{{ "favicons/android-36x36.png" | relURL }}" sizes="36x36" />
<link rel="icon" type="image/png" href="{{ "favicons/android-48x48.png" | relURL }}" sizes="48x48" />
<link rel="icon" type="image/png" href="{{ "favicons/android-72x72.png" | relURL }}" sizes="72x72" />
<link rel="icon" type="image/png" href="{{ "favicons/android-96x96.png" | relURL }}" sizes="96x96" />
<link rel="icon" type="image/png" href="{{ "favicons/android-144x144.png" | relURL }}" sizes="144x144" />
<link rel="icon" type="image/png" href="{{ "favicons/android-192x192.png" | relURL }}" sizes="192x192" />

10
layouts/partials/head-css.html Normal file
View File

@ -0,0 +1,10 @@
{{ $options := dict "inlineImports" true }}
{{ $styles := resources.Get "css/styles.css" }}
{{ $styles = $styles | resources.PostCSS $options }}
{{ if not hugo.IsProduction }}
<link href="{{ $styles.RelPermalink }}" rel="stylesheet" />
{{ else }}
{{ $styles = $styles | minify | fingerprint | resources.PostProcess }}
<link rel="preload" href="{{ $styles.RelPermalink }}" as="style" />
<link href="{{ $styles.RelPermalink }}" rel="stylesheet" integrity="{{ $styles.Data.integrity }}" />
{{ end }}

24
layouts/partials/head.html
View File

@ -1,18 +1,18 @@
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
{{ partialCached "favicons.html" . }}
<title> <title>
{{ .Title }} {{- if .IsHome -}}
{{ .Site.Title -}}
{{ else -}}
{{ with .Title }}{{ . }} – {{ end -}}
{{ .Site.Title -}}
{{ end -}}
</title> </title>
<meta name="description" content="{{ .Description }}" /> <meta name="description" content="{{ partial "utils/page-description.html" . }}" />
{{ $options := dict "inlineImports" true }} {{ partial "opengraph.html" . }}
{{ $styles := resources.Get "css/styles.css" }} {{ partial "head-css.html" . }}
{{ $styles = $styles | resources.PostCSS $options }}
{{ if hugo.IsProduction }}
{{ $styles = $styles | minify | fingerprint | resources.PostProcess }}
{{ end }}
<link href="{{ $styles.RelPermalink }}" rel="stylesheet" />
<script> <script>
/* Initialize light/dark mode */ /* Initialize light/dark mode */
if (localStorage.getItem("color-theme") === "dark" || (!("color-theme" in localStorage) && window.matchMedia("(prefers-color-scheme: dark)").matches)) { if (localStorage.getItem("color-theme") === "dark" || (!("color-theme" in localStorage) && window.matchMedia("(prefers-color-scheme: dark)").matches)) {
@ -21,4 +21,6 @@
document.documentElement.classList.remove("dark"); document.documentElement.classList.remove("dark");
} }
</script> </script>
{{ partial "custom/head-end.html" . }}
</head> </head>

31
layouts/partials/opengraph.html Normal file
View File

@ -0,0 +1,31 @@
{{/* From https://github.com/gohugoio/gohugoioTheme/blob/master/layouts/partials/opengraph/opengraph.html */}}
<meta property="og:title" content="{{ .Title }}" />
<meta property="og:description" content="{{ with .Description }}{{ . }}{{ else }}{{if .IsPage}}{{ .Summary }}{{ else }}{{ with .Site.Params.description }}{{ . }}{{ end }}{{ end }}{{ end }}" />
<meta property="og:type" content="{{ if .IsPage }}article{{ else }}website{{ end }}" />
<meta property="og:url" content="{{ .Permalink }}" />
{{- with $.Params.images -}}
{{- range first 6 . }}<meta property="og:image" content="{{ . | absURL }}" />{{ end -}}
{{- else -}}
{{- $featured := "" }}
{{- with $featured -}}
<meta property="og:image" content="{{ $featured.Permalink }}"/>
{{- else -}}
{{- with $.Site.Params.images }}<meta property="og:image" content="{{ index . 0 | absURL }}"/>{{ end -}}
{{- end -}}
{{- end -}}
{{- if .IsPage }}
{{- $iso8601 := "2006-01-02T15:04:05-07:00" -}}
<meta property="article:section" content="{{ .Section }}" />
{{ with .PublishDate }}<meta property="article:published_time" {{ .Format $iso8601 | printf "content=%q" | safeHTMLAttr }} />{{ end }}
{{ with .Lastmod }}<meta property="article:modified_time" {{ .Format $iso8601 | printf "content=%q" | safeHTMLAttr }} />{{ end }}
{{- end -}}
{{- with .Params.audio }}<meta property="og:audio" content="{{ . }}" />{{ end }}
{{- with .Params.locale }}<meta property="og:locale" content="{{ . }}" />{{ end }}
{{- with .Site.Params.title }}<meta property="og:site_name" content="{{ . }}" />{{ end }}
{{- with .Params.videos }}{{- range . }}
<meta property="og:video" content="{{ . | absURL }}" />
{{ end }}{{ end }}

3
layouts/partials/sidebar.html
View File

@ -1,12 +1,13 @@
{{ $context := .context }} {{ $context := .context }}
{{ $disableSidebar := .disableSidebar | default false }} {{ $disableSidebar := .disableSidebar | default false }}
{{ $sidebarClass := cond $disableSidebar "md:hidden xl:block" "md:sticky" }}
{{ $navRoot := cond (eq site.Home.Type "docs") site.Home $context.FirstSection }} {{ $navRoot := cond (eq site.Home.Type "docs") site.Home $context.FirstSection }}
{{ $navPages := union $navRoot.RegularPages $navRoot.Sections }} {{ $navPages := union $navRoot.RegularPages $navRoot.Sections }}
{{ $pageURL := $context.RelPermalink }} {{ $pageURL := $context.RelPermalink }}
<aside class="sidebar-container flex flex-col print:hidden md:top-16 md:shrink-0 md:w-64 md:sticky md:self-start max-md:[transform:translate3d(0,-100%,0)]"> <aside class="sidebar-container flex flex-col print:hidden md:top-16 md:shrink-0 md:w-64 md:self-start max-md:[transform:translate3d(0,-100%,0)] {{ $sidebarClass }}">
<!-- Search bar on small screen --> <!-- Search bar on small screen -->
<div class="px-4 pt-4 md:hidden"> <div class="px-4 pt-4 md:hidden">
{{ partial "search.html" }} {{ partial "search.html" }}

52
layouts/partials/toc.html
View File

@ -1,35 +1,37 @@
{{/* Table of Contents */}} {{/* Table of Contents */}}
{{/* TODO: toc should be able to get disabled through page frontmatter */}}
{{/* TODO: toc bottom part should be able to hide */}} {{/* TODO: toc bottom part should be able to hide */}}
<div class="order-last hidden w-64 shrink-0 xl:block print:hidden px-4" aria-label="table of contents"> {{- $toc := .Params.toc | default true -}}
<div class="sticky top-16 overflow-y-auto pr-4 pt-6 text-sm [hyphens:auto] max-h-[calc(100vh-4rem-env(safe-area-inset-bottom))] ltr:-mr-4 rtl:-ml-4">
{{ with .Fragments.Headings }}
<p class="mb-4 font-semibold tracking-tight">On This Page</p> <nav class="order-last hidden w-64 shrink-0 xl:block print:hidden px-4" aria-label="table of contents">
{{ range . }} {{ if $toc }}
<ul> <div class="sticky top-16 overflow-y-auto pr-4 pt-6 text-sm [hyphens:auto] max-h-[calc(100vh-4rem-env(safe-area-inset-bottom))] ltr:-mr-4 rtl:-ml-4">
{{ with .Headings }} {{ with .Fragments.Headings }}
{{ template "side-toc-subheading" (dict "headings" . "level" 0) }} <p class="mb-4 font-semibold tracking-tight">On This Page {{ $toc }}</p>
{{ end }} {{ range . }}
</ul> <ul>
{{ with .Headings }}
{{ template "toc-subheading" (dict "headings" . "level" 0) }}
{{ end }}
</ul>
{{ end }}
{{ end }} {{ end }}
{{ end }}
{{ $borderClass := "mt-8 border-t bg-white pt-8 shadow-[0_-12px_16px_white] dark:bg-dark dark:shadow-[0_-12px_16px_#111]" }} {{ $borderClass := "mt-8 border-t bg-white pt-8 shadow-[0_-12px_16px_white] dark:bg-dark dark:shadow-[0_-12px_16px_#111]" }}
{{ if not .Fragments.Headings }} {{ if not .Fragments.Headings }}
{{ $borderClass = "" }} {{ $borderClass = "" }}
{{ end }} {{ end }}
<div class="{{ $borderClass }} sticky bottom-0 flex flex-col items-start gap-2 pb-8 dark:border-neutral-800 contrast-more:border-t contrast-more:border-neutral-400 contrast-more:shadow-none contrast-more:dark:border-neutral-400"> <div class="{{ $borderClass }} sticky bottom-0 flex flex-col items-start gap-2 pb-8 dark:border-neutral-800 contrast-more:border-t contrast-more:border-neutral-400 contrast-more:shadow-none contrast-more:dark:border-neutral-400">
<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="{{ .Params.editURL }}">Edit this page on GitHub →</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="{{ .Params.editURL }}">Edit this page on GitHub →</a>
</div>
</div> </div>
</div> {{ end }}
</div> </nav>
{{/* TOC subheading component. {{/* TOC subheadings component. This is a recursive component that renders a list of headings. */}}
This is a recursive component that renders a list of headings. {{- define "toc-subheading" -}}
*/}}
{{- define "side-toc-subheading" -}}
{{ $headings := .headings }} {{ $headings := .headings }}
{{ $level := .level }} {{ $level := .level }}
{{ if ge $level 6 }} {{ if ge $level 6 }}
@ -48,7 +50,7 @@
</li> </li>
{{ end }} {{ end }}
{{ with .Headings }} {{ with .Headings }}
{{ template "side-toc-subheading" (dict "headings" . "level" (add $level 1)) }} {{ template "toc-subheading" (dict "headings" . "level" (add $level 1)) }}
{{ end }} {{ end }}
{{ end }} {{ end }}