From 6f472b30091fdeb939a3025dfc9c18364efc9498 Mon Sep 17 00:00:00 2001 From: Alex Shpak Date: Thu, 18 Sep 2025 10:12:03 +0200 Subject: [PATCH] #692, #723: Redesign blog, add thumbnails support and pagination --- assets/_main.scss | 37 ++++++++++++++-------- assets/_shortcodes.scss | 2 +- assets/_utils.scss | 4 +++ exampleSite/assets/thumbnail.svg | 2 ++ layouts/_partials/docs/pagination.html | 28 ++++++++++++++++ layouts/_partials/docs/post-prev-next.html | 18 +++++++++++ layouts/posts/list.html | 26 +++++++++++---- layouts/posts/single.html | 8 +++-- layouts/term.html | 2 +- 9 files changed, 103 insertions(+), 24 deletions(-) create mode 100644 exampleSite/assets/thumbnail.svg create mode 100644 layouts/_partials/docs/pagination.html create mode 100644 layouts/_partials/docs/post-prev-next.html diff --git a/assets/_main.scss b/assets/_main.scss index eaebb62..853de43 100644 --- a/assets/_main.scss +++ b/assets/_main.scss @@ -87,13 +87,6 @@ ul.pagination { a .book-icon { height: 1em; width: 1em; - - &:first-child { - margin-inline-end: $padding-8; - } - &:last-child { - margin-inline-start: $padding-8; - } } .book-brand { @@ -189,9 +182,19 @@ body[dir="rtl"] .book-menu { margin-inline-end: .5em; } - .book-post-content > :first-child { + .book-post-content { margin-top: $padding-16; } + + .book-post-thumbnail { + flex: 0 0 34%; + + img { + width: 100%; + aspect-ratio: 4 / 3; + object-fit: cover; + } + } } .book-header { @@ -314,6 +317,10 @@ body[dir="rtl"] .book-menu { a { margin: $padding-8 0; } + + a.flex { + gap: $padding-8; + } } .book-comments { @@ -341,11 +348,6 @@ body[dir="rtl"] .book-menu { } @media screen and (max-width: $mobile-breakpoint) { - #menu-control, - #toc-control { - display: inline; - } - .book-menu { visibility: hidden; margin-inline-start: -$menu-width; @@ -360,6 +362,15 @@ body[dir="rtl"] .book-menu { display: block; } + .book-post-container { + flex-direction: column-reverse; + } + + #menu-control, + #toc-control { + display: inline; + } + #menu-control:focus ~ main label[for="menu-control"] { @include outline; } diff --git a/assets/_shortcodes.scss b/assets/_shortcodes.scss index 3a19735..5a09eba 100644 --- a/assets/_shortcodes.scss +++ b/assets/_shortcodes.scss @@ -210,7 +210,7 @@ background: var(--gray-100); } - img { + > img { width: 100%; display: block; aspect-ratio: 4 / 3; diff --git a/assets/_utils.scss b/assets/_utils.scss index 92fad0f..52f97f3 100644 --- a/assets/_utils.scss +++ b/assets/_utils.scss @@ -1,5 +1,9 @@ .flex { display: flex; + + &.gap { + gap: $padding-16; + } } .flex-auto { diff --git a/exampleSite/assets/thumbnail.svg b/exampleSite/assets/thumbnail.svg new file mode 100644 index 0000000..0a9c9e0 --- /dev/null +++ b/exampleSite/assets/thumbnail.svg @@ -0,0 +1,2 @@ + + \ No newline at end of file diff --git a/layouts/_partials/docs/pagination.html b/layouts/_partials/docs/pagination.html new file mode 100644 index 0000000..9e0d154 --- /dev/null +++ b/layouts/_partials/docs/pagination.html @@ -0,0 +1,28 @@ +{{- if .Paginator -}} +
+ + {{- with .Paginator.Prev }} + + Previous + + {{ end }} + + {{ if gt (len .Paginator.Pagers) 1 }} + + {{- $currentPageNumber := .Paginator.PageNumber -}} + {{- range $pageIndex := (slice -2 -1 0 1 2) -}} + {{- with index $.Paginator.Pagers (add $currentPageNumber $pageIndex -1) -}} + {{ .PageNumber }} + {{- end -}} + {{- end -}} + + {{ end }} + + {{- with .Paginator.Next }} + + Next + + {{ end }} + +
+{{- end -}} diff --git a/layouts/_partials/docs/post-prev-next.html b/layouts/_partials/docs/post-prev-next.html new file mode 100644 index 0000000..d7192c0 --- /dev/null +++ b/layouts/_partials/docs/post-prev-next.html @@ -0,0 +1,18 @@ +
+ + {{ with .NextInSection }} + + Previous + {{ partial "docs/title" . }} + + {{ end }} + + + {{ with .PrevInSection }} + + {{ partial "docs/title" . }} + Next + + {{ end }} + +
\ No newline at end of file diff --git a/layouts/posts/list.html b/layouts/posts/list.html index f2b660a..0d7df53 100644 --- a/layouts/posts/list.html +++ b/layouts/posts/list.html @@ -1,17 +1,25 @@ {{ define "main" }} {{ range sort .Paginator.Pages }} -
+

- {{ partial "docs/title.html" . }} + {{ partial "docs/title" . }}

- {{ partial "docs/post-meta" . }} -
- {{- .Summary -}} +
+
+ {{ partial "docs/post-meta" . }} +
+ {{- .Summary | truncate 256 -}} +
+
+ {{- $thumbnail := default "thumbnail.*" .Params.BookPostThumbnail -}} + {{- with or (.Resources.GetMatch $thumbnail) (resources.GetMatch $thumbnail) -}} +
+ +
+ {{- end -}}
{{ end }} - - {{ template "_internal/pagination.html" . }} {{ end }} {{ define "toc-container" }} @@ -25,3 +33,7 @@ {{ define "toc" }} {{ partial "docs/taxonomy" . }} {{ end }} + +{{ define "footer" }} + {{ partial "docs/pagination.html" . }} +{{ end }} \ No newline at end of file diff --git a/layouts/posts/single.html b/layouts/posts/single.html index cebdd11..232e14e 100644 --- a/layouts/posts/single.html +++ b/layouts/posts/single.html @@ -1,10 +1,10 @@ {{ define "main" }}

- {{ partial "docs/title.html" . }} + {{ partial "docs/title" . }}

{{ partial "docs/post-meta" . }} -
+
{{- .Content -}}
@@ -13,3 +13,7 @@ {{ define "toc" }} {{ partial "docs/toc" . }} {{ end }} + +{{ define "footer" }} + {{ partial "docs/post-prev-next" . }} +{{ end }} \ No newline at end of file diff --git a/layouts/term.html b/layouts/term.html index f2b660a..1bae9a0 100644 --- a/layouts/term.html +++ b/layouts/term.html @@ -2,7 +2,7 @@ {{ range sort .Paginator.Pages }}