diff --git a/assets/_main.scss b/assets/_main.scss index 5972bcc..eaebb62 100644 --- a/assets/_main.scss +++ b/assets/_main.scss @@ -334,10 +334,7 @@ body[dir="rtl"] .book-menu { // Responsive styles .book-menu-content, -.book-toc-content, -.book-page, -.book-header aside, -.markdown { +.book-toc-content { transition: 0.2s ease-in-out; transition-property: transform, margin, opacity, visibility; will-change: transform, margin, opacity; diff --git a/assets/_markdown.scss b/assets/_markdown.scss index 9f2f803..58e02b3 100644 --- a/assets/_markdown.scss +++ b/assets/_markdown.scss @@ -200,9 +200,6 @@ figure { margin: $padding-16 0; - figcaption p { - margin-top: 0; - } } } diff --git a/assets/_shortcodes.scss b/assets/_shortcodes.scss index ca504fb..8dd12f2 100644 --- a/assets/_shortcodes.scss +++ b/assets/_shortcodes.scss @@ -120,6 +120,7 @@ .book-badge { display: inline-block; font-size: $font-size-14; + font-weight: $body-font-weight; vertical-align: middle; border-radius: $border-radius; overflow: hidden; @@ -149,6 +150,8 @@ // {{< steps >}} .book-steps { + position: relative; + >ol { counter-reset: steps; list-style: none; @@ -191,25 +194,25 @@ } } - // {{< card >}} - .book-card { - display: block; + // {{< card >}}, {{< figure >}} + .book-card, figure { + display: inline-block; overflow: hidden; height: 100%; border-radius: $border-radius; border: $padding-1 solid var(--gray-200); + &[href], &[href]:visited { + color: var(--body-font-color); + } &[href]:hover { text-decoration: none; background: var(--gray-100); } - &[href]:visited { - color: var(--body-font-color); - } img { + width: 100%; display: block; - object-fit: contain; aspect-ratio: 4 / 3; object-fit: cover; } @@ -217,6 +220,36 @@ .markdown-inner { padding: $padding-16; } + + figcaption { + @extend .markdown-inner; + padding: $padding-16; + } + } + + .book-image { + input + img { + cursor: zoom-in; + transition: transform 0.2s ease-in-out; + } + + input:checked + img { + position: fixed; + + top: 0; + left: 0; + right: 0; + bottom: 0; + + background: var(--body-background); + object-fit: contain; + width: 100%; + height: 100%; + + z-index: 1; + cursor: zoom-out; + padding: $padding-16; + } } .book-hero { diff --git a/exampleSite/content.en/docs/shortcodes/cards/placeholder.svg b/exampleSite/assets/placeholder.svg similarity index 100% rename from exampleSite/content.en/docs/shortcodes/cards/placeholder.svg rename to exampleSite/assets/placeholder.svg diff --git a/exampleSite/content.en/docs/shortcodes/cards.md b/exampleSite/content.en/docs/shortcodes/cards.md index 84c2514..85c4cc2 100644 --- a/exampleSite/content.en/docs/shortcodes/cards.md +++ b/exampleSite/content.en/docs/shortcodes/cards.md @@ -3,18 +3,18 @@ ## Example {{% columns %}} -- {{< card image="docs/shortcodes/cards/placeholder.svg" >}} +- {{< card image="placeholder.svg" >}} ### Line 1 Line 2 {{< /card >}} -- {{< card image="docs/shortcodes/cards/placeholder.svg" >}} +- {{< card image="placeholder.svg" >}} This is tab MacOS content. {{< /card >}} {{% /columns %}} {{% columns %}} -- {{< card href="/" >}} +- {{< card href="/docs/shortcodes/cards" >}} **Markdown** Suspendisse sed congue orci, eu congue metus. Nullam feugiat urna massa. {{< /card >}} @@ -28,3 +28,36 @@ This is tab MacOS content. {{< /card >}} {{% /columns %}} + +## Build-in figure shortcode +Hugo's built-in figure shortcode is also styled as a card + +{{% columns %}} +- ```go-html-template + {{}} + ``` + +- {{< figure + src="placeholder.svg" + alt="A placeholder image" + link="#" + caption="A placeholder image caption" + loading="lazy" + target="_blank" + title="Figure Title" + caption="A caption for the figure" + attr="An attribution" + attrlink="#" + >}} +{{% /columns %}} diff --git a/exampleSite/content.en/docs/shortcodes/images.md b/exampleSite/content.en/docs/shortcodes/images.md new file mode 100644 index 0000000..72f424f --- /dev/null +++ b/exampleSite/content.en/docs/shortcodes/images.md @@ -0,0 +1,30 @@ +# Images + +Image shortcode produces an image that can be clicked to expand. + +## Example + +```go-html-template +{{}} +``` +{{< image src="placeholder.svg" alt="A placeholder" title="A placeholder" loading="lazy" >}} + +## Parameters + +`src` {{< badge style="warning" title="Required" >}} +: The link to the image + +`class` {{< badge style="info" title="Optional" >}} +: An optional CSS class name that will be applied to the `img` element + +`alt` {{< badge style="info" title="Optional" >}} +: An optional alternate text for the image + +`title` {{< badge style="info" title="Optional" >}} +: An optional title for the image + +`loading` {{< badge style="info" title="Optional" >}} +: Sets `loading` control for the image: `lazy`, `eager` or `auto` + + + diff --git a/layouts/_markup/render-image.html b/layouts/_markup/render-image.html index 148cbaf..2453b46 100644 --- a/layouts/_markup/render-image.html +++ b/layouts/_markup/render-image.html @@ -1,19 +1,6 @@ +{{- $destination := .Destination -}} {{- if .Page.Site.Params.BookPortableLinks -}} - {{- template "portable-image" . -}} -{{- else -}} - {{ .Text }} -{{- end -}} - -{{- define "portable-image" -}} - {{- $isRemote := or (in .Destination "://") (strings.HasPrefix .Destination "//") }} - {{- if not $isRemote }} - {{- $path := print .Page.File.Dir .Destination }} - {{- if strings.HasPrefix .Destination "/" }} - {{- $path = print "/static" .Destination }} - {{- end }} - {{- if not (fileExists $path) }} - {{- warnf "Image '%s' not found in '%s'" .Destination .Page.File }} - {{- end }} - {{- end }} - {{ .Text }} + {{- $destination = partial "docs/links/portable-image" . -}} {{- end -}} +{{ .Text }} +{{- /**/ -}} \ No newline at end of file diff --git a/layouts/_markup/render-link.html b/layouts/_markup/render-link.html index 288d81c..8aefa3f 100644 --- a/layouts/_markup/render-link.html +++ b/layouts/_markup/render-link.html @@ -1,29 +1,6 @@ +{{- $destination := .Destination -}} {{- if .Page.Site.Params.BookPortableLinks -}} - {{- template "portable-link" . -}} -{{- else -}} - {{ .Text | safeHTML }} -{{- end -}} - -{{- define "portable-link" -}} - {{- $destination := .Destination }} - {{- $isRemote := or (in .Destination ":") (strings.HasPrefix .Destination "//") }} - {{- $isFragment := strings.HasPrefix .Destination "#" }} - {{- if and (not $isRemote) (not $isFragment) }} - {{- $url := urls.Parse .Destination }} - {{- $path := strings.TrimSuffix "/_index.md" $url.Path }} - {{- $path = strings.TrimSuffix "/_index" $path }} - {{- $path = strings.TrimSuffix ".md" $path }} - {{- $page := .Page.GetPage $path }} - {{- if $page }} - {{- $destination = $page.RelPermalink }} - {{- if $url.Fragment }} - {{- $destination = print $destination "#" $url.Fragment }} - {{- end }} - {{- else if fileExists (print .Page.File.Dir .Destination) }} - - {{- else -}} - {{- warnf "Page '%s' not found in '%s'" .Destination .Page.File }} - {{- end }} - {{- end }} - {{ .Text | safeHTML }} + {{- $destination = partial "docs/links/portable-link" . -}} {{- end -}} +{{ .Text | safeHTML }} +{{- /**/ -}} \ No newline at end of file diff --git a/layouts/_partials/docs/links/portable-image.html b/layouts/_partials/docs/links/portable-image.html new file mode 100644 index 0000000..4b9bc44 --- /dev/null +++ b/layouts/_partials/docs/links/portable-image.html @@ -0,0 +1,26 @@ +{{- $destination := .Destination -}} +{{- $url := urls.Parse .Destination -}} + +{{- $isRemote := gt (len $url.Host) 0 -}} +{{- $isFragment := strings.HasPrefix .Destination "#" -}} + +{{- if and (not $isRemote) (not $isFragment) -}} + {{- $path := strings.TrimPrefix "./" $url.Path -}} + {{- $path = strings.TrimPrefix "/assets/" $path -}} + + {{- with (.Page.Resources.Get $path) -}} + {{- $destination = .RelPermalink -}} + {{- else with (resources.Get $path) -}} + {{- $destination = .RelPermalink -}} + {{- else -}} + {{- warnf "Image reference '%s' not found in '%s'" .Destination .Page.Permalink -}} + {{- end -}} + + {{- with $url.RawQuery -}} + {{- $destination = print $destination "?" . -}} + {{- end -}} + {{- with $url.Fragment -}} + {{- $destination = print $destination "#" . -}} + {{- end -}} +{{- end -}} +{{- return $destination -}} diff --git a/layouts/_partials/docs/links/portable-link.html b/layouts/_partials/docs/links/portable-link.html new file mode 100644 index 0000000..4c5c0c0 --- /dev/null +++ b/layouts/_partials/docs/links/portable-link.html @@ -0,0 +1,29 @@ +{{- $destination := .Destination -}} +{{- $url := urls.Parse .Destination -}} + +{{- $isRemote := gt (len $url.Host) 0 -}} +{{- $isFragment := strings.HasPrefix .Destination "#" -}} + +{{- if and (not $isRemote) (not $isFragment) -}} + {{- $path := strings.TrimPrefix "./" $url.Path -}} + {{- $path = strings.TrimSuffix ".md" $path -}} + {{- $path = strings.TrimSuffix "/_index" $path -}} + + {{- with (.Page.GetPage $path) -}} + {{- $destination = .RelPermalink -}} + {{- else with (.Page.Resources.Get $path) -}} + {{- $destination = .RelPermalink -}} + {{- else with (resources.Get $path) -}} + {{- $destination = .RelPermalink -}} + {{- else -}} + {{- warnf "Reference '%s' not found in '%s'" .Destination .Page.Permalink -}} + {{- end -}} + + {{- with $url.RawQuery -}} + {{- $destination = print $destination "?" . -}} + {{- end -}} + {{- with $url.Fragment -}} + {{- $destination = print $destination "#" . -}} + {{- end -}} +{{- end -}} +{{- return $destination -}} \ No newline at end of file diff --git a/layouts/_partials/docs/menu-hugo.html b/layouts/_partials/docs/menu-hugo.html index d23f5d1..871eea7 100644 --- a/layouts/_partials/docs/menu-hugo.html +++ b/layouts/_partials/docs/menu-hugo.html @@ -10,8 +10,8 @@