Add gallery videos

config.toml

@@ -53,6 +53,12 @@ summaryLength = 70  # number of words for article summaries
         name = "About"
         url = "/about/"
         weight = 0
+    # TODO: enable when ready to show
+    #[[menu.main]]
+    #   identifier = "gallery"
+    #   name = "Gallery"
+    #   url = "/gallery/"
+    #   weight = 0
     [[menu.icons]]
         identifier = "github"
         name = "GitHub"

content/about.md

@@ -7,7 +7,6 @@ showDate: false
 aliases:
   - /stories/about.html
 ---
-
 Hello, my name is Andrés!
 
 I'm a software developer, passionate about the web, frontend technologies, and the open source ecosystem.

content/gallery.md

@@ -0,0 +1,50 @@
+---
+title: Gallery
+date: 2024-09-02T23:46:00+01:00
+norss: true
+nosearch: true
+showDate: false
+---
+
+<style type="text/css">
+.video-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+}
+
+.video-grid video {
+  width: 100%;
+  height: auto;
+  background-color: #000;
+  border-radius: 0;
+}
+
+@media (max-width: 768px) {
+  .video-grid {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+</style>
+<div class="video-grid">
+  <video src="/images/screenshots/gallery/3d.webm" autoplay loop muted></video>
+  <video src="/images/screenshots/gallery/cityscape.webm" autoplay loop muted></video>
+  <video src="/images/screenshots/gallery/earthbound.webm" autoplay loop muted></video>
+  <video src="/images/screenshots/gallery/lel.webm" autoplay loop muted></video>
+  <video src="/images/screenshots/gallery/rainbow-sprinkler2.webm" autoplay loop muted></video>
+  <video src="/images/screenshots/gallery/starry-sky.webm" autoplay loop muted></video>
+  <video src="/images/screenshots/gallery/turtle.webm" autoplay loop muted></video>
+  <video src="/images/screenshots/gallery/beings.webm" autoplay loop muted></video>
+  <video src="/images/screenshots/gallery/dance.webm" autoplay loop muted></video>
+  <video src="/images/screenshots/gallery/fireworks.webm" autoplay loop muted></video>
+  <video src="/images/screenshots/gallery/lines.webm" autoplay loop muted></video>
+  <video src="/images/screenshots/gallery/random-blocks.webm" autoplay loop muted></video>
+  <video src="/images/screenshots/gallery/tap.webm" autoplay loop muted></video>
+  <video src="/images/screenshots/gallery/tyc.webm" autoplay loop muted></video>
+  <video src="/images/screenshots/gallery/checker.webm" autoplay loop muted></video>
+  <video src="/images/screenshots/gallery/dots.webm" autoplay loop muted></video>
+  <video src="/images/screenshots/gallery/grid.webm" autoplay loop muted></video>
+  <video src="/images/screenshots/gallery/p2.webm" autoplay loop muted></video>
+  <video src="/images/screenshots/gallery/starfield.webm" autoplay loop muted></video>
+  <video src="/images/screenshots/gallery/tunnel.webm" autoplay loop muted></video>
+  <video src="/images/screenshots/gallery/vs.webm" autoplay loop muted></video>
+</div>

scripts/.gitignore

@@ -0,0 +1 @@
+node_modules/

scripts/anim_thumb.sh

@@ -0,0 +1,20 @@
+#!/bin/sh
+
+if [ "$#" -ne 2 ]; then
+  echo "Usage: $0 <url> <output_file>"
+  exit 1
+fi
+
+URL="$1"
+OUTPUT_FILE="$2"
+OUTPUT_DIR="screenshots-$2" # Directory to store screenshots
+
+SCRIPT_DIR=$(CDPATH= cd -- "$(dirname -- "$0")" && pwd)
+
+node "$SCRIPT_DIR/create_screenshots.js" "$URL" "$OUTPUT_DIR"
+
+ffmpeg -framerate 16 -i "$OUTPUT_DIR/screenshot-%d.png" -c:v libvpx-vp9 -pix_fmt yuva420p -vf "scale=320:240,fps=16" -r 16 -auto-alt-ref 0 -loop 0 "$OUTPUT_FILE"
+
+rm -rf "$OUTPUT_DIR"
+
+echo "File created: $OUTPUT_FILE"

scripts/anim_thumbs.sh

@@ -0,0 +1,15 @@
+#!/bin/sh
+
+FILES="3d beings checker cityscape dance dots earthbound fireworks grid lel lines p2 rainbow-sprinkler2 random-blocks starfield tap tunnel turtle tyc vs"
+
+SCRIPT_DIR=$(CDPATH= cd -- "$(dirname -- "$0")" && pwd)
+
+export SCRIPT_DIR
+
+run_anim_thumb() {
+  "$SCRIPT_DIR/anim_thumb.sh" "https://kaeru.neritic.net/projects/short-experiments/$1" "$1.webm"
+}
+
+export -f run_anim_thumb
+
+echo "$FILES" | xargs -n 1 -P 5 -I {} sh -c 'run_anim_thumb "$@"' _ {}

scripts/create_screenshots.js

@@ -0,0 +1,29 @@
+import { chromium } from "playwright";
+import { existsSync, mkdirSync } from "fs";
+
+const url = process.argv[2];
+const outputDir = process.argv[3];
+const viewportWidth = 1024;
+const viewportHeight = 768;
+const count = 16 * 3;
+const delay = 62.5;
+
+// Create screenshots directory if it doesn"t exist
+if (!existsSync(outputDir)){
+  mkdirSync(outputDir);
+}
+
+const browser = await chromium.launch();
+const context = await browser.newContext({
+  viewport: { width: viewportWidth, height: viewportHeight }
+});
+const page = await context.newPage();
+
+await page.goto(url);
+
+for (let i = 1; i <= count; i++) {
+  await page.screenshot({ path: `${outputDir}/screenshot-${i}.png` });
+  await page.waitForTimeout(delay);
+}
+
+await browser.close();

scripts/package.json

@@ -0,0 +1,9 @@
+{
+  "type": "module",
+  "dependencies": {
+    "playwright": "^1.46.1"
+  },
+  "engines": {
+    "node": ">=20"
+  }
+}