From 27c976bcc1d66141e6db258dfc3bb1d1274d9c10 Mon Sep 17 00:00:00 2001 From: Xin Date: Thu, 16 Nov 2023 20:49:18 -0500 Subject: [PATCH] feat: display author avatar images in blog post (#204) * feat: support displaying author images in blog post * chore: fix typo * chore: run build:css * refactor: support both plain author list * chore: run build:css * chore: add support for local avatar images * chore: update css classes --- assets/css/compiled/main.css | 23 ++++++++++-- exampleSite/content/blog/markdown.md | 8 +++- exampleSite/hugo_stats.json | 6 ++- layouts/_default/_markup/render-image.html | 6 +-- layouts/blog/single.html | 43 ++++++++++++++-------- 5 files changed, 62 insertions(+), 24 deletions(-) diff --git a/assets/css/compiled/main.css b/assets/css/compiled/main.css index d1c4c55..b1450b5 100644 --- a/assets/css/compiled/main.css +++ b/assets/css/compiled/main.css @@ -634,6 +634,9 @@ video { .ml-4 { margin-left: 1rem; } +.mr-1 { + margin-right: 0.25rem; +} .mr-2 { margin-right: 0.5rem; } @@ -848,6 +851,9 @@ video { .flex-col { flex-direction: column; } +.flex-wrap { + flex-wrap: wrap; +} .items-start { align-items: flex-start; } @@ -878,6 +884,17 @@ video { .gap-4 { gap: 1rem; } +.gap-x-1 { + -moz-column-gap: 0.25rem; + column-gap: 0.25rem; +} +.gap-x-1\.5 { + -moz-column-gap: 0.375rem; + column-gap: 0.375rem; +} +.gap-y-2 { + row-gap: 0.5rem; +} .overflow-auto { overflow: auto; } @@ -1408,9 +1425,6 @@ video { -webkit-hyphens: auto; hyphens: auto; } -.\[text-underline-position\:from-font\] { - text-underline-position: from-font; -} .\[transition\:background-color_1\.5s_ease\] { transition: background-color 1.5s ease; } @@ -2735,6 +2749,9 @@ body { --tw-rotate: 90deg; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } +.group:hover .group-hover\:underline { + text-decoration-line: underline; +} .group\/code:hover .group-hover\/code\:opacity-100 { opacity: 1; } diff --git a/exampleSite/content/blog/markdown.md b/exampleSite/content/blog/markdown.md index c4fb64e..9831fa7 100644 --- a/exampleSite/content/blog/markdown.md +++ b/exampleSite/content/blog/markdown.md @@ -2,8 +2,12 @@ title: Markdown Syntax Guide date: 2020-01-01 authors: - - name: John Doe - link: https://example.com/johndoe + - name: imfing + link: https://github.com/imfing + image: https://github.com/imfing.png + - name: Octocat + link: https://github.com/octocat + image: https://github.com/octocat.png tags: - Markdown - Example diff --git a/exampleSite/hugo_stats.json b/exampleSite/hugo_stats.json index 0a25b08..ff7af3d 100644 --- a/exampleSite/hugo_stats.json +++ b/exampleSite/hugo_stats.json @@ -66,7 +66,6 @@ "[-webkit-touch-callout:none]", "[counter-reset:step]", "[hyphens:auto]", - "[text-underline-position:from-font]", "[transition:background-color_1.5s_ease]", "[word-break:break-word]", "absolute", @@ -241,6 +240,7 @@ "fixed", "flex", "flex-col", + "flex-wrap", "focus:bg-white", "focus:outline-none", "focus:ring-4", @@ -258,6 +258,8 @@ "gap-1", "gap-2", "gap-4", + "gap-x-1.5", + "gap-y-2", "grid", "grid-cols-1", "group", @@ -266,6 +268,7 @@ "group-data-[theme=dark]:hidden", "group-data-[theme=light]:hidden", "group-hover/code:opacity-100", + "group-hover:underline", "group-open:before:rotate-90", "group/code", "group/copybtn", @@ -407,6 +410,7 @@ "ml-1", "ml-4", "mobile-menu-overlay", + "mr-1", "mr-2", "mt-1", "mt-1.5", diff --git a/layouts/_default/_markup/render-image.html b/layouts/_default/_markup/render-image.html index 21a1e19..16a91f9 100644 --- a/layouts/_default/_markup/render-image.html +++ b/layouts/_default/_markup/render-image.html @@ -1,13 +1,13 @@ {{- $alt := .PlainText | safeHTML -}} -{{- $lazyLoading := .Page.Site.Params.enableImagelazyLoading | default true -}} +{{- $lazyLoading := .Page.Site.Params.enableImageLazyLoading | default true -}} {{- $dest := .Destination -}} -{{- $isRemote := not (urls.Parse $dest).Scheme -}} +{{- $isLocal := not (urls.Parse $dest).Scheme -}} {{- $isPage := and (eq .Page.Kind "page") (not .Page.BundleType) -}} {{- $startsWithSlash := hasPrefix $dest "/" -}} {{- $startsWithRelative := hasPrefix $dest "../" -}} -{{- if and $dest $isRemote -}} +{{- if and $dest $isLocal -}} {{- if $startsWithSlash -}} {{/* Images under static directory */}} {{- $dest = (relURL (strings.TrimPrefix "/" $dest)) -}} diff --git a/layouts/blog/single.html b/layouts/blog/single.html index 5d8df16..db83123 100644 --- a/layouts/blog/single.html +++ b/layouts/blog/single.html @@ -1,27 +1,40 @@ {{ define "main" }} -
+
{{ partial "sidebar.html" (dict "context" . "disableSidebar" true "displayPlaceholder" true) }} {{ partial "toc.html" . }}
{{ partial "breadcrumb.html" . }}

{{ .Title }}

- {{ with $date := .Date }} -
- {{ partial "utils/format-date" $date }} - {{- if $.Params.authors }} by {{ end -}} - {{- with $.Params.authors -}} - {{- range $i, $author := . -}} - {{- if $i }},{{ end -}} - {{- if $author.link -}} - {{ $author.name }} - {{- else -}} - {{ $author.name }} - {{- end -}} +
+ {{- with $date := .Date }}{{ partial "utils/format-date" $date }}{{ end -}} + {{- $lazyLoading := site.Params.enableImageLazyLoading | default true -}} + {{ if and .Date .Params.authors }}ยท{{ end -}} + {{- with $.Params.authors -}} + {{- range $i, $author := . -}} + {{- if reflect.IsMap $author -}} + {{- if and $i (not $author.image) }},{{ end -}} + + {{- with $image := $author.image }} + {{- $isLocal := not (urls.Parse $image).Scheme -}} + {{- $startsWithSlash := hasPrefix $image "/" -}} + {{- if and $isLocal $startsWithSlash }} + {{- $image = (relURL (strings.TrimPrefix "/" $image)) -}} + {{ end -}} + {{ $author.name }} + {{ end -}} +
{{ $author.name }}
+ + {{- else -}} + {{- if $i }},{{ end -}}{{ $author }} {{- end -}} {{- end -}} -
- {{ end }} + {{- end -}} +
{{ .Content }}