Compare commits

...

11 Commits

Author SHA1 Message Date
d313bdcc32 Fix EXIF rotation
Signed-off-by: Nikolaos Karaolidis <nick@karaolidis.com>
2025-09-16 19:15:59 +01:00
19ce16fabb Fix hero spacing
Signed-off-by: Nikolaos Karaolidis <nick@karaolidis.com>
2025-09-14 23:54:35 +01:00
62882e5943 Update theme
Signed-off-by: Nikolaos Karaolidis <nick@karaolidis.com>
2025-09-14 23:32:19 +01:00
c50910bcec Update theme
Signed-off-by: Nikolaos Karaolidis <nick@karaolidis.com>
2025-09-14 22:01:44 +01:00
e56e1e8e51 Format
Signed-off-by: Nikolaos Karaolidis <nick@karaolidis.com>
2025-09-14 20:09:36 +01:00
3938d190d5 Add comments
Signed-off-by: Nikolaos Karaolidis <nick@karaolidis.com>
2025-09-14 19:40:37 +01:00
e7d8ece65d Add summary animation
Signed-off-by: Nikolaos Karaolidis <nick@karaolidis.com>
2025-09-14 11:17:14 +01:00
d9a3c4b4a1 Fix crash on missing hero
Signed-off-by: Nikolaos Karaolidis <nick@karaolidis.com>
2025-09-13 23:23:17 +00:00
8834c6dc21 Hide reading time when 0
Signed-off-by: Nikolaos Karaolidis <nick@karaolidis.com>
2025-09-13 22:44:48 +00:00
6353c33ae2 Add exif hero images
Signed-off-by: Nikolaos Karaolidis <nick@karaolidis.com>
2025-09-13 22:32:16 +00:00
08b8041c43 Update gallery page
Signed-off-by: Nikolaos Karaolidis <nick@karaolidis.com>
2025-09-13 21:36:59 +00:00
24 changed files with 334 additions and 292 deletions

View File

@@ -4,6 +4,7 @@ import Masonry from "masonry-layout";
const lightbox = new PhotoSwipeLightbox({ const lightbox = new PhotoSwipeLightbox({
gallery: ".lightbox", gallery: ".lightbox",
children: ".pswp-image", children: ".pswp-image",
bgOpacity: 1,
showAnimationDuration: 300, showAnimationDuration: 300,
hideAnimationDuration: 300, hideAnimationDuration: 300,
initialZoomLevel: "fit", initialZoomLevel: "fit",

View File

@@ -12,7 +12,7 @@ blockquote {
} }
p { p {
margin: 0 0 0.5rem 0; margin: 0.5rem 0 0.5rem 0;
} }
p:last-child { p:last-child {

View File

@@ -14,7 +14,7 @@ pre {
/* Error */ /* Error */
.err { .err {
color: var(--accent-500); color: var(--accent-600);
} }
/* LineLink */ /* LineLink */
@@ -42,7 +42,7 @@ pre {
/* LineHighlight */ /* LineHighlight */
.hl { .hl {
background-color: var(--background-200); background-color: var(--background-100);
} }
/* LineNumbersTable */ /* LineNumbersTable */
@@ -71,250 +71,250 @@ pre {
/* Keyword */ /* Keyword */
.k { .k {
color: var(--secondary-600); color: var(--secondary-700);
} }
/* KeywordConstant */ /* KeywordConstant */
.kc { .kc {
color: var(--primary-500); color: var(--primary-600);
} }
/* KeywordDeclaration */ /* KeywordDeclaration */
.kd { .kd {
color: var(--secondary-600); color: var(--secondary-700);
} }
/* KeywordNamespace */ /* KeywordNamespace */
.kn { .kn {
color: var(--secondary-600); color: var(--secondary-700);
} }
/* KeywordPseudo */ /* KeywordPseudo */
.kp { .kp {
color: var(--primary-500); color: var(--primary-600);
} }
/* KeywordReserved */ /* KeywordReserved */
.kr { .kr {
color: var(--secondary-600); color: var(--secondary-700);
} }
/* KeywordType */ /* KeywordType */
.kt { .kt {
color: var(--secondary-600); color: var(--secondary-700);
} }
/* Name */ /* Name */
.nc { .nc {
color: var(--accent-600); color: var(--accent-700);
font-weight: bold; font-weight: bold;
} }
/* NameConstant */ /* NameConstant */
.no { .no {
color: var(--primary-500); color: var(--primary-600);
font-weight: bold; font-weight: bold;
} }
/* NameDecorator */ /* NameDecorator */
.nd { .nd {
color: var(--secondary-700); color: var(--secondary-800);
font-weight: bold; font-weight: bold;
} }
/* NameEntity */ /* NameEntity */
.ni { .ni {
color: var(--accent-600); color: var(--accent-700);
} }
/* NameException */ /* NameException */
.ne { .ne {
color: var(--accent-600); color: var(--accent-700);
font-weight: bold; font-weight: bold;
} }
/* NameLabel */ /* NameLabel */
.nl { .nl {
color: var(--primary-500); color: var(--primary-600);
font-weight: bold; font-weight: bold;
} }
/* NameNamespace */ /* NameNamespace */
.nn { .nn {
color: var(--secondary-600); color: var(--secondary-700);
} }
/* NameProperty */ /* NameProperty */
.py { .py {
color: var(--primary-500); color: var(--primary-600);
} }
/* NameTag */ /* NameTag */
.nt { .nt {
color: var(--primary-600); color: var(--primary-700);
} }
/* NameVariable */ /* NameVariable */
.nv { .nv {
color: var(--primary-500); color: var(--primary-600);
} }
/* NameVariableClass */ /* NameVariableClass */
.vc { .vc {
color: var(--primary-500); color: var(--primary-600);
} }
/* NameVariableGlobal */ /* NameVariableGlobal */
.vg { .vg {
color: var(--primary-500); color: var(--primary-600);
} }
/* NameVariableInstance */ /* NameVariableInstance */
.vi { .vi {
color: var(--primary-500); color: var(--primary-600);
} }
/* NameVariableMagic */ /* NameVariableMagic */
.vm { .vm {
color: var(--primary-500); color: var(--primary-600);
} }
/* NameFunction */ /* NameFunction */
.nf { .nf {
color: var(--secondary-700); color: var(--secondary-800);
font-weight: bold; font-weight: bold;
} }
/* NameFunctionMagic */ /* NameFunctionMagic */
.fm { .fm {
color: var(--secondary-700); color: var(--secondary-800);
font-weight: bold; font-weight: bold;
} }
/* Literal */ /* Literal */
.l { .l {
color: var(--primary-600); color: var(--primary-700);
} }
/* LiteralDate */ /* LiteralDate */
.ld { .ld {
color: var(--primary-500); color: var(--primary-600);
} }
/* LiteralString */ /* LiteralString */
.s { .s {
color: var(--primary-600); color: var(--primary-700);
} }
/* LiteralStringAffix */ /* LiteralStringAffix */
.sa { .sa {
color: var(--primary-500); color: var(--primary-600);
} }
/* LiteralStringBacktick */ /* LiteralStringBacktick */
.sb { .sb {
color: var(--primary-600); color: var(--primary-700);
} }
/* LiteralStringChar */ /* LiteralStringChar */
.sc { .sc {
color: var(--primary-600); color: var(--primary-700);
} }
/* LiteralStringDelimiter */ /* LiteralStringDelimiter */
.dl { .dl {
color: var(--primary-500); color: var(--primary-600);
} }
/* LiteralStringDoc */ /* LiteralStringDoc */
.sd { .sd {
color: var(--primary-600); color: var(--primary-700);
} }
/* LiteralStringDouble */ /* LiteralStringDouble */
.s2 { .s2 {
color: var(--primary-600); color: var(--primary-700);
} }
/* LiteralStringEscape */ /* LiteralStringEscape */
.se { .se {
color: var(--primary-500); color: var(--primary-600);
} }
/* LiteralStringHeredoc */ /* LiteralStringHeredoc */
.sh { .sh {
color: var(--primary-500); color: var(--primary-600);
} }
/* LiteralStringInterpol */ /* LiteralStringInterpol */
.si { .si {
color: var(--primary-600); color: var(--primary-700);
} }
/* LiteralStringOther */ /* LiteralStringOther */
.sx { .sx {
color: var(--primary-600); color: var(--primary-700);
} }
/* LiteralStringRegex */ /* LiteralStringRegex */
.sr { .sr {
color: var(--primary-500); color: var(--primary-600);
} }
/* LiteralStringSingle */ /* LiteralStringSingle */
.s1 { .s1 {
color: var(--primary-600); color: var(--primary-700);
} }
/* LiteralStringSymbol */ /* LiteralStringSymbol */
.ss { .ss {
color: var(--primary-600); color: var(--primary-700);
} }
/* LiteralNumber */ /* LiteralNumber */
.m { .m {
color: var(--primary-600); color: var(--primary-700);
} }
/* LiteralNumberBin */ /* LiteralNumberBin */
.mb { .mb {
color: var(--primary-600); color: var(--primary-700);
} }
/* LiteralNumberFloat */ /* LiteralNumberFloat */
.mf { .mf {
color: var(--primary-600); color: var(--primary-700);
} }
/* LiteralNumberHex */ /* LiteralNumberHex */
.mh { .mh {
color: var(--primary-600); color: var(--primary-700);
} }
/* LiteralNumberInteger */ /* LiteralNumberInteger */
.mi { .mi {
color: var(--primary-600); color: var(--primary-700);
} }
/* LiteralNumberIntegerLong */ /* LiteralNumberIntegerLong */
.il { .il {
color: var(--primary-600); color: var(--primary-700);
} }
/* LiteralNumberOct */ /* LiteralNumberOct */
.mo { .mo {
color: var(--primary-600); color: var(--primary-700);
} }
/* Operator */ /* Operator */
.o { .o {
color: var(--secondary-600); color: var(--secondary-700);
font-weight: bold; font-weight: bold;
} }
/* OperatorWord */ /* OperatorWord */
.ow { .ow {
color: var(--secondary-600); color: var(--secondary-700);
font-weight: bold; font-weight: bold;
} }
@@ -376,12 +376,12 @@ pre {
/* GenericError */ /* GenericError */
.gr { .gr {
color: var(--accent-500); color: var(--accent-600);
} }
/* GenericHeading */ /* GenericHeading */
.gh { .gh {
color: var(--primary-500); color: var(--primary-600);
font-weight: bold; font-weight: bold;
} }
@@ -408,12 +408,12 @@ pre {
/* GenericSubheading */ /* GenericSubheading */
.gu { .gu {
color: var(--primary-500); color: var(--primary-600);
} }
/* GenericTraceback */ /* GenericTraceback */
.gt { .gt {
color: var(--secondary-600); color: var(--secondary-700);
} }
/* GenericUnderline */ /* GenericUnderline */

View File

@@ -1,143 +1,71 @@
:root { // https://www.realtimecolors.com/
--text: #050c0e;
--background: #f1f8fa;
--primary: #51a9c3;
--secondary: #d88fb9;
--accent: #ce7f71;
}
@media (prefers-color-scheme: dark) {
:root { :root {
--text: #f0f8fa; --text: #0d1416;
--background: #050d0f; --background: #fdfdfd;
--primary: #3c94af; --primary: #669ca3;
--secondary: #712853; --secondary: #a5abc9;
--accent: #8d3e30; --accent: #8d8cba;
}
} }
:root { :root {
--text-50: #ecf6f8; --text-50: #eff4f6;
--text-100: #daecf1; --text-100: #dfe9ec;
--text-200: #b4dae4; --text-200: #bfd4d9;
--text-300: #8fc7d6; --text-300: #9fbec6;
--text-400: #69b4c9; --text-400: #7ea8b4;
--text-500: #44a1bb; --text-500: #5e92a1;
--text-600: #368196; --text-600: #4b7581;
--text-700: #296170; --text-700: #395860;
--text-800: #1b414b; --text-800: #263b40;
--text-900: #0e2025; --text-900: #131d20;
--text-950: #071013; --text-950: #090f10;
--background-50: #ecf6f8; --background-50: #f0f5f5;
--background-100: #daecf1; --background-100: #e0ebeb;
--background-200: #b4dae4; --background-200: #c2d6d6;
--background-300: #8fc7d6; --background-300: #a3c2c2;
--background-400: #69b4c9; --background-400: #85adad;
--background-500: #44a1bb; --background-500: #669999;
--background-600: #368196; --background-600: #527a7a;
--background-700: #296170; --background-700: #3d5c5c;
--background-800: #1b414b; --background-800: #293d3d;
--background-900: #0e2025; --background-900: #141f1f;
--background-950: #071013; --background-950: #0a0f0f;
--primary-50: #ecf6f8; --primary-50: #eff5f5;
--primary-100: #d9ecf2; --primary-100: #dfeaec;
--primary-200: #b3d9e5; --primary-200: #bfd6d9;
--primary-300: #8dc6d8; --primary-300: #9fc1c6;
--primary-400: #67b4cb; --primary-400: #80adb3;
--primary-500: #41a1be; --primary-500: #60989f;
--primary-600: #348198; --primary-600: #4d7a80;
--primary-700: #276072; --primary-700: #395b60;
--primary-800: #1a404c; --primary-800: #263d40;
--primary-900: #0d2026; --primary-900: #131e20;
--primary-950: #071013; --primary-950: #0a0f10;
--secondary-50: #f8ecf3; --secondary-50: #eff0f5;
--secondary-100: #f2d9e8; --secondary-100: #dfe1ec;
--secondary-200: #e4b4d0; --secondary-200: #bfc4d9;
--secondary-300: #d78eb9; --secondary-300: #9fa6c6;
--secondary-400: #ca68a1; --secondary-400: #8088b3;
--secondary-500: #bd428a; --secondary-500: #606a9f;
--secondary-600: #97356e; --secondary-600: #4d5580;
--secondary-700: #712853; --secondary-700: #394060;
--secondary-800: #4b1b37; --secondary-800: #262b40;
--secondary-900: #260d1c; --secondary-900: #131520;
--secondary-950: #13070e; --secondary-950: #0a0b10;
--accent-50: #f8eeec; --accent-50: #efeff5;
--accent-100: #f2ddd9; --accent-100: #dfdfec;
--accent-200: #e5bbb3; --accent-200: #c0bfd9;
--accent-300: #d8988d; --accent-300: #a09fc6;
--accent-400: #cb7667; --accent-400: #8080b3;
--accent-500: #be5441; --accent-500: #61609f;
--accent-600: #984334; --accent-600: #4d4d80;
--accent-700: #723227; --accent-700: #3a3960;
--accent-800: #4c221a; --accent-800: #272640;
--accent-900: #26110d; --accent-900: #131320;
--accent-950: #130807; --accent-950: #0a0a10;
}
@media (prefers-color-scheme: dark) {
:root {
--text-50: #061113;
--text-100: #0d2126;
--text-200: #19424d;
--text-300: #266373;
--text-400: #338599;
--text-500: #40a6bf;
--text-600: #66b8cc;
--text-700: #8cc9d9;
--text-800: #b3dbe6;
--text-900: #d9edf2;
--text-950: #ecf6f9;
--background-50: #061113;
--background-100: #0d2126;
--background-200: #19424d;
--background-300: #266373;
--background-400: #338599;
--background-500: #40a6bf;
--background-600: #66b8cc;
--background-700: #8cc9d9;
--background-800: #b3dbe6;
--background-900: #d9edf2;
--background-950: #ecf6f9;
--primary-50: #071013;
--primary-100: #0d2026;
--primary-200: #1a404c;
--primary-300: #276072;
--primary-400: #348198;
--primary-500: #41a1be;
--primary-600: #67b4cb;
--primary-700: #8dc6d8;
--primary-800: #b3d9e5;
--primary-900: #d9ecf2;
--primary-950: #ecf6f8;
--secondary-50: #13070e;
--secondary-100: #260d1c;
--secondary-200: #4b1b37;
--secondary-300: #712853;
--secondary-400: #97356e;
--secondary-500: #bd428a;
--secondary-600: #ca68a1;
--secondary-700: #d78eb9;
--secondary-800: #e4b4d0;
--secondary-900: #f2d9e8;
--secondary-950: #f8ecf3;
--accent-50: #130807;
--accent-100: #26110d;
--accent-200: #4c221a;
--accent-300: #723227;
--accent-400: #984334;
--accent-500: #be5441;
--accent-600: #cb7667;
--accent-700: #d8988d;
--accent-800: #e5bbb3;
--accent-900: #f2ddd9;
--accent-950: #f8eeec;
}
} }

View File

@@ -62,3 +62,35 @@ p {
li { li {
margin: 0.5rem 0 0.5rem 0; margin: 0.5rem 0 0.5rem 0;
} }
details {
background-color: var(--background-50);
padding: 1rem 1.5rem 1rem 1.5rem;
border-radius: 0.5rem;
p {
margin: 0.5rem 0 0.5rem 0;
}
summary {
margin: 0.5rem;
font-weight: bold;
display: inline-flex;
align-items: center;
gap: 0.5rem;
cursor: pointer;
}
summary::before {
content: "";
border-width: 0.4rem;
border-style: solid;
border-color: transparent transparent transparent var(--text);
transition: transform 0.3s ease;
transform-origin: 25% 50%;
}
&[open] summary::before {
transform: rotate(90deg);
}
}

View File

@@ -19,7 +19,7 @@ main.with-details {
} }
.length { .length {
color: color-mix(in srgb, var(--text) 50%, var(--background)); color: color-mix(in srgb, var(--text) 70%, var(--background));
margin: 0.5rem 0 0.5rem 0; margin: 0.5rem 0 0.5rem 0;
font-size: 0.8rem; font-size: 0.8rem;
} }

View File

@@ -13,7 +13,7 @@
font-size: 0.85rem; font-size: 0.85rem;
color: color-mix(in srgb, var(--text) 30%, var(--background)); color: color-mix(in srgb, var(--text) 50%, var(--background));
a { a {
color: inherit; color: inherit;

View File

@@ -15,6 +15,6 @@
@media (max-width: $width-mobile) { @media (max-width: $width-mobile) {
.hero { .hero {
padding: 1rem; padding: 1rem 1rem 0 1rem;
} }
} }

View File

@@ -10,7 +10,7 @@ img {
figcaption { figcaption {
text-align: center; text-align: center;
padding-top: 0.5rem; padding-top: 1rem;
color: color-mix(in srgb, var(--text) 50%, var(--background)); color: color-mix(in srgb, var(--text) 70%, var(--background));
} }
} }

View File

@@ -2,19 +2,19 @@
margin: 1rem 0 1rem 0; margin: 1rem 0 1rem 0;
font-size: 0.8rem; font-size: 0.8rem;
.date {
color: var(--text);
}
.tag { .tag {
color: var(--secondary-600); color: var(--primary-600);
} }
.tag:hover { .tag:hover {
color: var(--secondary-800); color: var(--primary-800);
}
.date {
color: var(--text-600);
} }
.duration { .duration {
color: color-mix(in srgb, var(--text) 50%, var(--background)); color: color-mix(in srgb, var(--text) 70%, var(--background));
} }
} }

View File

@@ -18,13 +18,13 @@
position: fixed; position: fixed;
bottom: 0; bottom: 0;
width: 100%; width: 100%;
height: 5rem; height: auto;
padding: 1rem 2rem; padding: 1rem 2rem;
text-align: center; text-align: center;
line-height: 1.5rem; line-height: 1.5rem;
.meta { .meta {
font-size: 0.7rem; margin: 0;
} }
a { a {

View File

@@ -1,7 +1,3 @@
{{ partial "components/image/index.html" (dict "page" .Page "image" (dict {{ $data := partial "components/image/process.html" (dict "page" .Page "src" .Destination) }}
"src" .Destination {{ partial "components/image/index.html" (merge $data (dict "caption" .Text "title" .Title)) }}
"caption" .Text
"alt" .Title
))
}}
{{- /* chomp trailing newline */ -}} {{- /* chomp trailing newline */ -}}

View File

@@ -3,6 +3,10 @@
{{ partial "components/hero/index.html" . }} {{ partial "components/hero/index.html" . }}
<div class="content"> <div class="content">
{{ .Content }} {{ .Content }}
{{ if (default true .Params.comments) }}
{{ partial "comments.html" . }}
{{ end }}
</div> </div>
{{ partial "components/postnav/index.html" . }} {{ partial "components/postnav/index.html" . }}
</main> </main>

View File

@@ -0,0 +1,5 @@
<details class="toc">
<summary>Post Contents</summary>
{{ .Page.TableOfContents }}
</details>
{{- /* chomp trailing newline */ -}}

View File

@@ -0,0 +1,25 @@
{{ $src := "" }}
{{ if .IsNamedParams }}
{{ $src = .Get "src" }}
{{ else }}
{{ $src = .Get 0 }}
{{ end }}
{{ $title := "" }}
{{ if .IsNamedParams }}
{{ $title = .Get "title" }}
{{ else }}
{{ $title = .Get 1 }}
{{ end }}
{{ $alt := "" }}
{{ if .IsNamedParams }}
{{ $alt = .Get "alt" }}
{{ else }}
{{ $alt = .Get 1 }}
{{ end }}
{{ $data := partial "components/image/process.html" (dict "page" .Page "src" $src) }}
{{ $caption := partial "components/image/exif.html" $data.original }}
{{ partial "components/image/index.html" (merge $data (dict "caption" $caption "title" $title "alt" $alt)) }}
{{- /* chomp trailing newline */ -}}

View File

View File

@@ -1,5 +1,17 @@
<section class="hero"> <section class="hero">
<h1 class="title">{{ .Title }}</h1> <h1 class="title">{{ .Title }}</h1>
{{ partial "components/meta/index.html" . }} {{ partial "components/meta/index.html" . }}
{{ partial "components/image/index.html" (dict "page" .Page "image" .Params.hero) }}
{{ $hero := partial "components/hero/process.html" .Params.hero }}
{{ if $hero.src }}
{{ $data := partial "components/image/process.html" (dict "page" .Page "src" $hero.src) }}
{{ $final := merge $data $hero }}
{{ if $hero.exif }}
{{ $caption := partial "components/image/exif.html" $data.original }}
{{ $final = merge $final (dict "caption" $caption) }}
{{ end }}
{{ partial "components/image/index.html" $final }}
{{ end }}
</section> </section>

View File

@@ -0,0 +1,17 @@
{{- $src := "" -}}
{{- $caption := "" -}}
{{- $title := "" -}}
{{- $alt := "" -}}
{{- $exif := false -}}
{{- if reflect.IsMap . -}}
{{- $src = .src -}}
{{- $caption = .caption -}}
{{- $title = .title -}}
{{- $alt = .alt -}}
{{- $exif = .exif | default false -}}
{{- else -}}
{{- $src = . -}}
{{- end -}}
{{- return dict "src" $src "caption" $caption "title" $title "alt" $alt "exif" $exif -}}

View File

@@ -0,0 +1,22 @@
{{ $exif := .Exif.Tags }}
{{ $make := $exif.Make }}
{{ $model := $exif.Model }}
{{ $lensMake := $exif.LensMake }}
{{ $lensModel := $exif.LensModel }}
{{ $lens := "" }}
{{ if ne $make $lensMake }}
{{ $lens = printf "%s %s" $lensMake $lensModel }}
{{ else }}
{{ $lens = $lensModel }}
{{ end }}
{{ $focal := printf "%.1f" (float $exif.FocalLength) }}
{{ $focal35 := printf "%.1f" (float $exif.FocalLengthIn35mmFormat) }}
{{ $shutter := printf "%d" $exif.ExposureTime }}
{{ $aperture := printf "%d" $exif.FNumber }}
{{ $iso := printf "%d" $exif.ISO }}
{{ return printf "%s %s, %s @ %s mm (%s mm), %s s, f/%s, ISO %s" $make $model $lens $focal $focal35 $shutter $aperture $iso }}

View File

@@ -1,52 +1,20 @@
{{- $page := .page -}} {{- $caption := .caption | default "" -}}
{{- $image := .image -}} {{- $title := .title | default $caption | plainify -}}
{{- $alt := .alt | default $title | plainify -}}
{{- $src := $image -}}
{{- $caption := "" -}}
{{- $title := "" -}}
{{- $alt := "" -}}
{{- if reflect.IsMap $image -}}
{{- $src = $image.src | default "" -}}
{{- $caption = $image.caption | default "" -}}
{{- $title = $image.title | default $caption | default "" | plainify -}}
{{- $alt = $image.alt | default $title | default "" | plainify -}}
{{- end -}}
{{- if $src -}}
{{- $isRemote := strings.HasPrefix $src "http" -}}
{{- if $isRemote -}}
{{- $remote := resources.GetRemote $src -}}
{{- $image = resources.Copy (printf "static/3rd-party/%s" $remote.Name) $remote -}}
{{- else -}}
{{- $image = ($page.Resources.Get $src) | default (resources.Get $src) -}}
{{- end -}}
{{- end -}}
{{- with $image -}}
{{ $full := . | images.Filter (images.Process "webp q90") }}
{{ $thumb := . }}
{{- if gt .Width 2000 -}}
{{- $thumb = . | images.Filter (images.Process "resize 2000x webp q75") -}}
{{- else -}}
{{- $thumb = . | images.Filter (images.Process "webp q75") -}}
{{- end -}}
<figure class="captioned-image lightbox"> <figure class="captioned-image lightbox">
<a <a
href="{{- $full.RelPermalink -}}" href="{{- .full.RelPermalink -}}"
data-pswp-src="{{- $full.RelPermalink -}}" data-pswp-src="{{- .full.RelPermalink -}}"
data-pswp-width="{{- $full.Width -}}" data-pswp-width="{{- .full.Width -}}"
data-pswp-height="{{- $full.Height -}}" data-pswp-height="{{- .full.Height -}}"
class="pswp-image" class="pswp-image"
> >
<img <img
src="{{- $thumb.RelPermalink -}}" src="{{- .thumb.RelPermalink -}}"
width="{{- $thumb.Width -}}" width="{{- .thumb.Width -}}"
height="{{- $thumb.Height -}}" height="{{- .thumb.Height -}}"
loading="lazy" loading="lazy"
{{ with $title }}title="{{- . -}}"{{ end }} {{ with $title }}title="{{- . -}}"{{ end }}
{{ with $alt }}alt="{{- . -}}"{{ end }} {{ with $alt }}alt="{{- . -}}"{{ end }}
@@ -56,4 +24,3 @@
<figcaption>{{ . | safeHTML }}</figcaption> <figcaption>{{ . | safeHTML }}</figcaption>
{{ end }} {{ end }}
</figure> </figure>
{{- end -}}

View File

@@ -0,0 +1,27 @@
{{- $page := .page -}}
{{- $src := .src -}}
{{- $original := "" -}}
{{- $isRemote := strings.HasPrefix $src "http" -}}
{{- if $isRemote -}}
{{- $remote := resources.GetRemote $src -}}
{{- $original = resources.Copy (printf "static/3rd-party/%s" $remote.Name) $remote -}}
{{- else -}}
{{- $original = ($page.Resources.Get $src) | default (resources.Get $src) -}}
{{- end -}}
{{- $rotate := images.AutoOrient -}}
{{- $processFull := images.Process "webp q90" -}}
{{- $full := $original | images.Filter (slice $rotate $processFull) -}}
{{- $processThumb := "" -}}
{{- if gt $original.Width 2000 -}}
{{- $processThumb = images.Process "resize 2000x webp q75" -}}
{{- else -}}
{{- $processThumb = images.Process "webp q75" -}}
{{- end -}}
{{- $thumb := $original | images.Filter (slice $rotate $processThumb) -}}
{{- return dict "original" $original "full" $full "thumb" $thumb -}}

View File

@@ -1,14 +1,18 @@
<div class="meta"> <div class="meta">
<span class="date">{{ .Date | time.Format ":date_medium" }}</span> <span class="date">{{ .Date | time.Format ":date_medium" }}</span>
&middot;
{{ if eq .Kind "page" }} {{ if eq .Kind "page" }}
{{ range .Params.tags }} {{ range .Params.tags }}
<a href="/tags/{{ . | urlize }}" class="tag">{{ . }}</a>
&middot; &middot;
<a href="/tags/{{ . | urlize }}" class="tag">{{ . }}</a>
{{ end }} {{ end }}
{{ if ge .ReadingTime 1 }}
&middot;
<span class="duration"> <span class="duration">
{{ printf "%d min. read" .ReadingTime }} {{ printf "%d min. read" .ReadingTime }}
</span> </span>
{{ end }}
{{ else }} {{ else }}
{{ $count := len .Pages }} {{ $count := len .Pages }}
<span class="duration"> <span class="duration">

View File

@@ -2,34 +2,36 @@
<div class="grid-sizer"></div> <div class="grid-sizer"></div>
{{ range sort .Pages "Date" "desc" }} {{ range sort .Pages "Date" "desc" }}
{{ if not .Params.private }} {{ if not .Params.private }}
{{ $page := . }} {{ $hero := partial "components/hero/process.html" .Params.hero }}
{{ $imageData := partial "components/image/reflect.html" .Params.hero }} {{ if $hero.src }}
{{ with $imageData.image }} {{ $data := partial "components/image/process.html" (dict "page" . "src" $hero.src) }}
{{- $caption := .Title -}}
{{- $title := $hero.title | default $caption | plainify -}}
{{- $alt := $hero.alt | default $title | plainify -}}
<div class="image grid-item"> <div class="image grid-item">
<a <a
href="{{- $page.RelPermalink -}}" href="{{- .RelPermalink -}}"
data-pswp-src="{{- .RelPermalink -}}" data-pswp-src="{{- $data.full.RelPermalink -}}"
data-pswp-width="{{- .Width -}}" data-pswp-width="{{- $data.full.Width -}}"
data-pswp-height="{{- .Height -}}" data-pswp-height="{{- $data.full.Height -}}"
class="pswp-image" class="pswp-image"
> >
<img <img
src="{{- .RelPermalink -}}" src="{{- $data.thumb.RelPermalink -}}"
width="{{- .Width -}}" width="{{- $data.thumb.Width -}}"
height="{{- .Height -}}" height="{{- $data.thumb.Height -}}"
loading="lazy" loading="lazy"
{{ with $imageData.title }}title="{{- . -}}"{{ end }} {{ with $title }}title="{{- . -}}"{{ end }}
{{ with $imageData.alt }}alt="{{- . -}}"{{ end }} {{ with $alt }}alt="{{- . -}}"{{ end }}
/> />
</a> </a>
<div class="pswp-caption-content"> <div class="pswp-caption-content">
<div> <div>
{{ upper $page.Title }} <a href="{{- .RelPermalink -}}">{{ $caption }}</a>
<div class="meta"> {{ partial "components/meta/index.html" . }}
{{ $page.Date | time.Format ":date_medium" }}
&middot;
<a href="{{- $page.RelPermalink -}}">View Post</a>
</div>
</div> </div>
</div> </div>
</div> </div>