First cut at a photos site

config.toml

@@ -34,6 +34,10 @@ name = 'Eryn Wells'
         identifier = 'about'
         name = 'About'
         url = '/about/'
+    [[menu.main]]
+        identifier = 'photos'
+        name = 'Photos'
+        url = '/photos/'
 
 [outputFormats]
     [outputFormats.RSS]
@@ -53,6 +57,7 @@ description = 'Home page of Eryn Wells'
 
 [permalinks]
 blog = 'blog/:year/:month/:slug/'
+photos = 'photos/:year/:month/:slug/'
 
 [taxonomies]
 category = 'categories'

content/photos/_index.md

@@ -0,0 +1,3 @@
+---
+title: Photos
+---

content/photos/photos.css

@@ -0,0 +1,99 @@
+:root {
+    --photo-params-background: #ddd;
+    --photo-params-border-color: #aaa;
+}
+
+@media (prefers-color-scheme: dark) {
+    :root {
+        --photo-params-background: #444;
+        --photo-params-background: #777;
+    }
+}
+
+ul.grid {
+    align-items: center;
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    gap: 5px;
+    justify-content: flex-start;
+    margin: 0;
+    padding: 0;
+}
+
+.grid li {
+    display: block;
+    height: 210px;
+    list-style: none;
+    width: 210px;
+}
+
+.grid li img {
+    border-radius: 0.5rem;
+}
+
+.photo-params {
+    background-color: var(--photo-params-background);
+    border-collapse: collapse;
+    border-radius: 6px;
+    margin: 1rem auto;
+    table-layout: fixed;
+    text-align: center;
+    width: 66%;
+}
+
+.photo-params thead td {
+    border-bottom: 1px solid var(--photo-params-border-color);
+    font-size: 80%;
+    font-weight: bold;
+}
+
+.photo-params tr.exposure-attributes td {
+    border-top: 1px solid var(--photo-params-border-color);
+    border-left: 1px solid var(--photo-params-border-color);
+}
+
+.photo-params tr.exposure-attributes td:first-child {
+    border-left: none;
+}
+
+.photo-params td {
+    font-size: 75%;
+    padding: 1rem;
+}
+
+.photo-params td:last-child {
+    text-align: end;
+}
+
+.photo-params td:first-child {
+    text-align: start;
+}
+
+.photo-params .make-model {
+    font-weight: bold;
+}
+
+.photo-params .size {
+    border-left: 0;
+}
+
+.photo-params .location {
+    border-right: 0;
+}
+
+.photo-params.debug thead {
+    font-size: 2rem;
+    font-weight: bold;
+    border-bottom: 2px solid var(--dark);
+}
+
+.photo-params.debug {
+    width: 100%;
+}
+
+.photo-params.debug td {
+    border: 1px solid var(--photo-params-border-color);
+    overflow: scroll;
+    vertical-align: top;
+}

layouts/partials/development/photo_exif_table.html

@@ -0,0 +1,15 @@
+<details>
+    <summary>Debug EXIF Data</summary>
+    <table class="photo-params debug">
+        <thead>
+            <td>Key</td>
+            <td>Value</td>
+        </thead>
+        {{ range $k, $v := .Tags }}
+        <tr>
+            <td>{{ $k }}</td>
+            <td>{{ $v }}</td>
+        </tr>
+        {{ end }}
+    </table>
+</details>

layouts/partials/head.html

@@ -8,7 +8,7 @@
   {{- if eq .Kind "page" -}}
     <meta name="description" content="{{ .Summary }}" />
     <meta name="author" content="{{ .Params.Author | default site.Author.name }}">
-  {{- else -}}
+    {{ else }}
     <meta name="description" content="{{ .Params.description }}">
     <meta name="author" content="{{ site.Author.name }}">
   {{- end -}}

layouts/partials/photo_exif_table.html

@@ -0,0 +1,27 @@
+<table class="photo-params">
+    <thead>
+        <td class="make-model" colspan=4>{{ .Tags.Make }} {{ .Tags.Model }}</td>
+    </thead>
+    <tr>
+        <td colspan="2" class="location">
+            {{ $lat := float .Lat }}{{ $latDir := cond (eq $lat 0) "" (cond (gt $lat 0) "N" "S") }}
+            <data class="latitude" value="{{ $lat }}">{{ .Lat | lang.FormatNumber (cond (ne $lat 0) 3 0) }}º{{ $latDir }}</data>,
+            {{ $long := float .Long }}{{ $longDir := cond (eq $long 0) "" (cond (gt $long 0) "E" "W") }}
+            <data class="longitude" value="{{ $long }}">{{ .Long | lang.FormatNumber (cond (ne $long 0) 3 0) }}º{{ $longDir }}</data>
+        </td>
+        <td colspan="2" class="size">
+            {{ $widthpx := .Tags.PixelXDimension }}
+            {{ $heightpx := .Tags.PixelYDimension }}
+            {{ if and (gt $widthpx 0) (gt $heightpx 0) }}
+                {{ $megapixels := div (mul $widthpx $heightpx) 1e6 }}
+                <data value="{{ $megapixels }}">{{ $megapixels | lang.FormatNumber 0 }} MP</data> • {{ $widthpx }} × {{ $heightpx }}
+            {{ end }}
+        </td>
+    </tr>
+    <tr class="exposure-attributes">
+        <td class="iso">{{ with .Tags.ISOSpeedRatings }}ISO {{ . }}{{ end }}</td>
+        <td class="focal-length">{{ with .Tags.FocalLengthIn35mmFilm }}{{ . }} mm{{ end }}</td>
+        <td class="f-number">{{ with .Tags.FNumber }}ƒ{{ . }}{{ end }}</td>
+        <td class="exposure-time">{{ with .Tags.ExposureTime }}{{ . }} s{{ end }}</td>
+    </tr>
+</table>

layouts/photos/list.html

@@ -0,0 +1,12 @@
+{{ define "main" }}
+<section class="photos">
+    <ul class="grid">
+        {{ range .Pages }}
+        {{ $thumbnailResource := (index (.Resources.ByType "image") 0) }}
+        {{ $thumbnail := $thumbnailResource.Fit "600x600" }}
+        {{ $thumbnail := $thumbnail.Crop "600x600" }}
+        <li><a href="{{ .RelPermalink }}" title="{{ .Title }}"><img src="{{ $thumbnail.RelPermalink }}"></a></li>
+        {{ end }}
+    </ul>
+</section>
+{{ end }}

layouts/photos/single.html

@@ -0,0 +1,46 @@
+{{ define "main" }}
+<article class="post-single">
+<nav class="post-nav">
+    <a class="back" href="{{ ref . `photos` }}">Back</a>
+</nav>
+
+{{ if .Title }}
+    <header>
+        {{ partial "development/draft_tag.html" . }}
+        <div class="post-title">
+            <h1>{{ .Title }}</h1>
+            <div class="post-date"><time>{{ .Date | time.Format "January 2, 2006" }}</time></div>
+        </div>
+    </header>
+{{ end }}
+
+{{ $photos := .Resources.ByType "image" }}
+{{ if eq (len $photos) 0 }}
+{{ errorf "Missing photo from photos page %q" .Path }}
+{{ end }}
+
+{{ if eq (len $photos) 1 }}
+{{ $img := index $photos 0 }}
+    <figure>
+        <img src="{{ $img.RelPermalink }}">
+    </figure>
+
+    {{ .Content }}
+
+    {{ partial "photo_exif_table.html" $img.Exif }}
+
+    {{ if in ($.Site.BaseURL | string) "localhost" }}
+    {{ partial "development/photo_exif_table.html" $img.Exif }}
+    {{ end }}
+{{ else }}
+    <figure>
+        <ul class="carousel">
+            {{ range $photos }}
+            <li>{{ . }}</li>
+            {{ end }}
+        </ul>
+    </figure>
+{{ end }}
+
+</article>
+{{ end }}