Add thumbnails

Makefile

@@ -9,10 +9,13 @@ DIST_DIR ?= dist
 # Temporary build artifacts
 BUILD_DIR ?= build
 
+THUMB_DIR := $(DIST_DIR)/thumbs
+
 images := $(shell find $(IMAGE_DIR) -iname '*.jpg')
 image_names_cs := $(notdir $(images))
 image_names := $(shell echo $(image_names_cs) | tr A-Z a-z)
 dist_images := $(addprefix $(DIST_DIR)/,$(image_names))
+dist_thumbs := $(patsubst $(DIST_DIR)/%.jpg,$(THUMB_DIR)/%.webp,$(dist_images))
 
 extra_files := $(wildcard extra/*)
 dist_extra_files := $(extra_files:%=dist/%)
@@ -28,7 +31,7 @@ dist_html := $(dist_images:$(DIST_DIR)/%.jpg=$(DIST_DIR)/%.html)
 
 ### RULES ###
 
-all: $(dist_html) $(dist_extra_files) $(DIST_DIR)/index.html
+all: $(dist_images) $(dist_thumbs) $(dist_extra_files) $(dist_html) $(DIST_DIR)/all.zip $(DIST_DIR)/index.html
 
 clean-dist:
 	rm -rf $(DIST_DIR)
@@ -38,21 +41,29 @@ clean: clean-dist
 
 $(foreach f,$(image_names),$(eval $(call copy_image_rule,$(f))))
 
+$(THUMB_DIR)/%.webp: $(DIST_DIR)/%.jpg
+	@mkdir -p $(THUMB_DIR)
+	magick $< -strip -thumbnail 300x300 $@
+
 $(BUILD_DIR)/index.json: $(build_metas) build-index.py
 	./build-index.py $(filter-out build-index.py,$^) > $@
 
-$(BUILD_DIR)/%.meta.json: $(DIST_DIR)/%.jpg extract-metadata.py
+$(BUILD_DIR)/%.meta.json: $(DIST_DIR)/%.jpg $(THUMB_DIR)/%.webp extract-metadata.py
 	@mkdir -p $(BUILD_DIR)
-	./extract-metadata.py --root $(DIST_DIR) --dist-path $(patsubst $(BUILD_DIR)/%.meta.json,$(DIST_DIR)/%.html,$@) --key $(patsubst $(BUILD_DIR)/%.meta.json,%,$@) $< > $@
+	./extract-metadata.py --root $(DIST_DIR) --dist-path $(patsubst $(BUILD_DIR)/%.meta.json,$(DIST_DIR)/%.html,$@) --key $(patsubst $(BUILD_DIR)/%.meta.json,%,$@) --thumbnail $(patsubst $(BUILD_DIR)/%.meta.json,$(THUMB_DIR)/%.webp,$@) $< > $@
 
 $(DIST_DIR)/index.html: $(BUILD_DIR)/index.json index.hbs
 	@mkdir -p $(DIST_DIR)
-	handlebars-cli index.hbs "$$(cat $(BUILD_DIR)/index.json)" > $@
+	handlebars-cli index.hbs @$(BUILD_DIR)/index.json > $@
 
 $(DIST_DIR)/%.html: $(BUILD_DIR)/%.meta.json $(BUILD_DIR)/index.json photo.hbs
 	@mkdir -p $(DIST_DIR)
-	handlebars-cli photo.hbs "$$(cat $(BUILD_DIR)/index.json | jq .$(patsubst $(BUILD_DIR)/%.meta.json,%,$<))" > $@
+	cat $(BUILD_DIR)/index.json | jq .index.$(patsubst $(BUILD_DIR)/%.meta.json,%,$<) | handlebars-cli photo.hbs @/dev/stdin > $@
 
 $(DIST_DIR)/extra/%: extra/%
 	@mkdir -p $(DIST_DIR)/extra
 	cp -r $< $@
+
+$(DIST_DIR)/all.zip: $(dist_images)
+	@mkdir -p $(DIST_DIR)
+	zip --junk-paths $@ $^

README.md

@@ -4,7 +4,7 @@ Makefile-based static site generator for sharing photos.
 
 ## TODO
 
-- [ ] Generate .zip archive of all photos and offer it for download
+- [x] Generate .zip archive of all photos and offer it for download
 - [ ] Make `make clean-dist` remove only unused photos (i.e. all photos in dist setminus photos that are supposed to be in dist)
 - [ ] Make a pretty index page
-- [ ] Generate .webp thumbnails for index page
+- [x] Generate .webp thumbnails for index page

build-index.py

@@ -35,7 +35,10 @@ def build_index(*meta_paths: Path):
         }
         metas_dict[meta["key"]] = meta
 
-    print(json.dumps(metas_dict, indent=2))
+    index = {
+        "index": metas_dict,
+    }
+    print(json.dumps(index, indent=2))
 
 
 if __name__ == "__main__":

extra/index.css

@@ -0,0 +1,8 @@
+html {
+  font-size: 16px;
+}
+
+body {
+  margin: 0;
+  font-family: 'Source Sans Pro', sans-serif;
+}

extract-metadata.py

@@ -57,7 +57,7 @@ def extract_stat_data(image_path: Path):
 
 
 
-def extract_metadata(image_path: Path, *, root: Path, dist_path: Path, key: str):
+def extract_metadata(image_path: Path, *, root: Path, dist_path: Path, key: str, thumbnail: Path):
     exif_data = extract_exif_data(image_path)
     stat_data = extract_stat_data(image_path)
 
@@ -68,6 +68,7 @@ def extract_metadata(image_path: Path, *, root: Path, dist_path: Path, key: str)
             "name": image_path.name,
             "relativeToRoot": str(image_path.relative_to(root)),
             "distRelativeToRoot": str(dist_path.relative_to(root)),
+            "thumbnailRelativeToRoot": str(thumbnail.relative_to(root)),
         },
         "key": key,
     }

flake.nix

@@ -24,6 +24,7 @@
             pkgs.imagemagick
             pkgs.gnumake
             pkgs.jq
+            pkgs.zip
             (pkgs.python3.withPackages (ps: [ps.clize ps.exif]))
           ];
         };

index.hbs

@@ -6,10 +6,11 @@
 <link rel="stylesheet" href="./extra/index.css">
 </head>
 <body>
+  <a href="/all.zip">download all photos</a>
   <ul>
-  {{#each this}}
+  {{#each index}}
     <li>
-     <a href="/{{ path.distRelativeToRoot }}"><img src="/{{ path.relativeToRoot }}" width=100></a>
+     <a href="/{{ path.distRelativeToRoot }}"><img src="/{{ path.thumbnailRelativeToRoot }}" loading="lazy" width=100></a>
     </li>
   {{/each}}
   </ul>