Remove the images.json and replace with frontmatter

assets/style.css

@@ -45,6 +45,29 @@ nav {
   justify-content: left;
   font-size: 1.2em;
   margin-bottom: 20px;
+  flex-wrap: wrap;
+  align-items: center;
+}
+
+@media (max-width: 600px) {
+  nav {
+    justify-content: center;
+    font-size: 1em;
+  }
+  
+  .site-title {
+    font-size: 2em;
+    text-align: center;
+  }
+  
+  body {
+    width: 100%;
+    padding: 10px;
+  }
+  
+  html {
+    font-size: 1em;
+  }
 }
 
 .block {

content/film/2025-06-17/images.json

@@ -1,36 +0,0 @@
-{
-  "images": [
-    "000011750007.webp",
-    "000011750008.webp",
-    "000011750009.webp",
-    "000011750010.webp",
-    "000011750013.webp",
-    "000011750014.webp",
-    "000011750016.webp",
-    "000011750018.webp",
-    "000011750021.webp",
-    "000011750022.webp",
-    "000011750023.webp",
-    "000011750024.webp",
-    "000011750027.webp",
-    "000011750030.webp",
-    "000011750031.webp",
-    "000011760005.webp",
-    "000011760006.webp",
-    "000011760007.webp",
-    "000011760008.webp",
-    "000011760010.webp",
-    "000011760012.webp",
-    "000011760013.webp",
-    "000011760014.webp",
-    "000011760018.webp",
-    "000011760021.webp",
-    "000011760022.webp",
-    "000011760023.webp",
-    "000011760024.webp",
-    "000011760026.webp",
-    "000011760029.webp",
-    "000011760030.webp",
-    "000011760032.webp"
-  ]
-}

content/film/2025-06-17/index.smd

@@ -5,5 +5,8 @@
 .layout = "film.shtml",
 .description = "Banff",
 .draft = false,
+.custom = {
+.images = [ "000011750007.webp", "000011750008.webp", "000011750009.webp", "000011750010.webp", "000011750013.webp", "000011750014.webp", "000011750016.webp", "000011750018.webp", "000011750021.webp", "000011750022.webp", "000011750023.webp", "000011750024.webp", "000011750027.webp", "000011750030.webp", "000011750031.webp", "000011760005.webp", "000011760006.webp", "000011760007.webp", "000011760008.webp", "000011760010.webp", "000011760012.webp", "000011760013.webp", "000011760014.webp", "000011760018.webp", "000011760021.webp", "000011760022.webp", "000011760023.webp", "000011760024.webp", "000011760026.webp", "000011760029.webp", "000011760030.webp", "000011760032.webp" ],
+},
 ---
 Film Rolls from banff

content/microblog/2025.smd

@@ -12,6 +12,19 @@ A place for short form thoughts and ideas
 
 > This page lists entries for the current year, for past entries consult the [microblog archive](/microblog/).
 
+## [FILM]($section.id("2025-08-23T01:45+08:00"))
+Just added a new tab to the site, film. AND IM SO HAPPY I HAVE A SPACE TO DUMP MY PICTURES. I didn't really want to post them on Instagram cause theres too many pictures from 1 roll, and I didn't really want to filter them. Here, at least I can dump them and not really think too hard. 
+
+Getting my images here was a journey though. Initially, I assumed zine had a `$page.assets` directive that I could use to iterate through the images. It didn't appear to have one, so that got me to dive into the surprisingly complex zine codebase, and implemented that [here](https://github.com/yaudnut/zine). 
+
+After building that, I tried to create a docker file with zig 0.15.1 and my zine version, and found out how annoying it is to do that. So I decided to dive into the codebase and realized that zine could read json files. 
+
+This gave me a much simpler way of inserting the images into the page, by creating a json file, listing the images (`ls *.webp > images.json`, and a quick vim macro) and consuming that from the `film.shtml`. 
+
+Thats the previous version, and now, I've moved the `images.json` to the frontmatter of the `index.shtml` and that seems much easier to maintain. 
+
+The final step, would be to create a zig build which checks the frontmatter of any file in the film directory, and if it doesn't have a particular image in the directory, update the frontmatter. 
+
 ## [Cleaning up nix]($section.id("2025-08-19T15:31+08:00"))
 In the spirit of procastinating on my hard projects, I decided to clean up my nix files, and have some organization in the chaos. The current configuration can be found [here](https://git.yadunut.dev/yadunut/nix), old configuration [here](https://git.yadunut.dev/yadunut/dotfiles)
 

layouts/film.shtml

@@ -96,7 +96,7 @@
   <div class="film-container">
     <h1 :text="$page.title"></h1>
     <div class="post" :html="$page.content()"></div>
-    <div class="image-grid" :loop="$page.asset('images.json').ziggy().get('images')">
+    <div class="image-grid" :loop="$page.custom.get('images')">
       <a href="$page.asset($loop.it).link()" target="_blank">
         <img src="$page.asset($loop.it).link()">
       </a>