Joe SteinbringPreviously, I wrote about my idea to use the GitHub API to create a photo blog with its content completely in Git commits. Later, I tweaked the idea to replace the API with CI/CD actions. Since then, I have tried many things that didn’t work. I finally declared it done for now, though. If you want to check out the code behind JWS Pictures, it is all available on GitHub.
What worked
I started the process with three goals:
- “Free” hosting
- An interface for adding images that only asks for the file, a physical location for where I took it, and a description of what the photo was of.
- Robust, well-thought-out APIs that give maximum flexibility in the future
The design meets those three goals, but I had to figure out what would be a bridge too far for the APIs.
There are six static data files:
- A JSON and an XML file for all photos
- A JSON and an XML file for the images taken in a given year
- A JSON and an XML file for the photo that you are looking at at the moment
There is a “photos” folder in the project, and separate year sub-folders are inside of that. When you commit an image file into a year sub-folder, it starts a GitHub Actions (just a CI/CD Pipeline) workflow that:
- Checks out the image that I just committed
- Extracts the commit description and summary
- Extracts the camera used to take the image, the date the photo was taken, and the GPS latitude and longitude of where it was taken
- Generates a low-resolution, medium-resolution, and high-resolution version of the image in both JPEG and WebP
- Writes the new images to the folder and renames the original to have “-original” before the extension
- Writes the links to the image files, the Git commit messages, and the EXIF data to the six data files.
- Commits the changes back to the repository
The workflow has limitations. You can only commit and push one image file at a time and can’t batch them.
The Interface
When I wrote the site, I used Vue.js because “why not?” and PrimeVue because I hadn’t used it before. It uses “dark mode” or “light mode,” depending on the user’s system preferences. I also made it a Progressive Web App (PWA), so you can install it onto your device. The large images are 80% of the original, the medium-sized photos are 25% of the original, and the small image images are 10% of the original. The image displayed at the top of the page uses one of the three depending on the size of the user’s device.
I used Leaflet (a pretty cool library for generating mobile-friendly interactive maps) for the map at the bottom of the page. I’ll need to do a dedicated post about it at some point.
What didn’t work
A lot of things didn’t work. I tried using web mentions to allow people to comment on images. I attempted to use createWebHistory() to get rid of the # in the URL but had to use a hack with the 404 handler to do it. I tried to use a fediverse account and a Blusky account using Bridgy to auto-post photos, but I couldn’t get the bridge to work.
Some of these issues are due how I am hosting the site and some of it is due to the fact that I’m trying to use GoToSocial with it.
What do I want to do with it next?
I built this to have reasonably good APIs, so I have a few plans for it.
- I still want to build a GoToSocial bot that posts the photos and is bridged to Bluesky.
- I think that I want to build a “related images” widget. It should be easy enough to query the API for images on the same day and/or images from the same place.
- If I ever get enough interest to explore React Native or Flutter, I’ll have APIs to write to.
Have any questions, comments, etc? Please feel free to drop a comment.