It's a real pain to work an a light theme in the dark....🙃

#laravel #inertiajs #vue #primevue #tailwind

Previously, 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.

https://jws.news/2024/the-final-form-for-my-photo-blog/

#Leaflet #PrimeVue #VueJs

#74: But it’s soup

After a long hiatus, the whole gang is back! @javajuneau @dhinojosa @ianhlavats and @kito99@mastadon.social are joined by pilot and #OSS contributor, lprimak@mastodon.social. They discuss #microprofile, #htmlx, @devoxx Genie, #IntelliJ #AI Assistant, #Apache #Shiro, #Arquillian, #PrimeVue, #PrimeNG, #Angular, #BDD, #Jsoup, #JBake, #TestContainers, and much more! https://www.pubhouse.net/2024/10/stackd74-but-its-soup.html

#74: But it’s soup

After a long hiatus, the whole gang is back! @javajuneau @dhinojosa @ianhlavats and @kito99 are joined by pilot and #OSS contributor, @lprimak. They discuss #microprofile, #htmlx, @devoxx Genie, #IntelliJ #AI Assistant, #Apache #Shiro, #Arquillian, #PrimeVue, #PrimeNG, #Angular, #BDD, #Jsoup, #JBake, #TestContainers, and much more! https://www.pubhouse.net/2024/10/stackd74-but-its-soup.html

Last month, I wrote about an idea that I got to use GitHub Pages as the canonical home for my photos.  Over the years, I have hosted pictures on Flickr, Blogger, Pixelfed, Instagram, 500px, and Twitter.  At one point, I even primarily hosted them here on this blog.  Every solution had one issue or another.  In the previous post, I talked about using the GitHub API. After some thought, I decided to use GitHub Actions instead to handle the image processing and generation of static JSON files.  That eliminates the need for that API.

I created the site at https://jws.pictures and hosted it with GitHub Pages.  I am using Vue, PrimeVue, and Leaflet.  Adding a new image is still simply a matter of committing an image to the GitHub repository.  The image description and physical location come from the commit message.

The remainder of the data on the website comes from the image’s EXIF data.

Now that JWS Pictures exists, I need to add photos. Do you have any questions, comments, etc.? Please comment below.

https://jws.news/2024/building-a-home-for-my-photos/

#Git #Github #GithubActions #PrimeVue #VueJs