Image Gallery

Simple HTML / CSS / Webasm (Rust Yew) image gallery made for my cat and deployed with Docker.

Yew Documentation · Report Bug · Request Feature

Table of Contents

1. About The Project
• Built With
2. Project Structure
   • Modules
3. Getting Started
• Prerequisites
• Installation and Custom UI
4. Deploying Your Custom App
• Option A: Push to ghcr.io Using GitHub Actions
• Option B: Use the Dockerfile Directly
5. Contributing
6. License
7. Contact

About The Project

This project is an image gallery application that dynamically generates a JSON list of images from a specified directory. It uses Nginx to serve the content and monitors the images directory for any changes, updating the JSON file accordingly. The application is containerised using Docker and integrated with GitHub Actions for continuous integration and deployment.

(back to top)

Built With

˙ ˙

(back to top)

Project Structure

The project is organised as follows:

image_gallery/
├── Cargo.toml
├── generate_images_json.sh # Script to serve as a local "API" discovering the images
├── static/
│ ├── images/
│ ├── resources/
│ └── images.json # Needed for the page to know what images to load
└── src/
  ├── main.rs
  ├── models.rs # Data structures
  ├── router.rs # Define the URL routes
  ├── components/
  │ ├── gallery.rs
  │ └── mod.rs
  ├── pages/
  │ ├── home.rs
  │ └── mod.rs

Modules

• main.rs: Entrypoint of the application.
• models.rs: Contains data structures for counters and SVG options.
• router.rs: Controls the directing of the URL (just / our case)
• components/gallery.rs: Fetches the images and generates the grid with them.
• pages/home.rs: Contains the main logic and HTML code.

(back to top)

Getting Started

Follow these instructions to set up a local instance of the Image Gallery.

Note

You have to build this locally or fork this repository to be able to modify the HTML to your liking.

Prerequisites

• Rust installed (includes Cargo)
• WebAssembly target

  rustup target add wasm32-unknown-unknown

• Trunk

  cargo install --locked trunk

• (Optional) Docker if you plan to deploy in a container

Installation and Custom UI

1. Clone the repository:

   git clone https://github.com/AitorAstorga/image_gallery.git
   cd image_gallery

2. Modify the HTML

   • Edit the File: Open /src/pages/home.rs. It contains the HTML (and Yew component code) for the home page.

   • Make Your Changes: Update the HTML, styles, or layout as desired. Remember that because this is a Rust Yew app, any UI changes will require a rebuild for them to take effect.

3. Run the application locally:

   trunk serve --address 0.0.0.0

By default, Yew runs on localhost:8080.

(back to top)

Deploying Your Custom App

You have two options to deploy your changes:

Option A: Push to ghcr.io Using GitHub Actions

You can use GitHub Actions to automatically build the project and push a Docker image to GitHub Container Registry (ghcr.io).

1. Ensure the Workflow Exists: Check that your fork contains the GitHub Actions workflow (found in .github/workflows/). It should be configured to build your project and push the image.

2. Configure Repository Secrets: In your forked repository, set up the following secrets (via Settings > Secrets and variables > Actions):

   • GHCR_TOKEN: Your GitHub Container Registry Personal Access Token.
   • (Any other secrets required by your workflow.)

3. Commit and Push Your Changes:

   git add .
   git commit -m "Customize home page HTML"
   git push origin main

   The GitHub Actions workflow will trigger automatically, build your project, and push the Docker image to:

   ghcr.io/<your-username>/aichan-image-gallery:latest

4. Update docker-compose (if needed): If you use Docker Compose, update the image reference in your docker-compose.yml to point to your custom image.

   A sample. Keep in mind this will use my image, you should make your own.

   services:
   web:
      container_name: image-gallery
      image: ghcr.io/aitorastorga/aichan-image-gallery:latest
      ports:
         - "YOUR_PORT:80"
      volumes:
         - /PATH_TO_YOUR_IMAGES:/usr/share/nginx/html/static/images
      restart: unless-stopped

Option B: Use the Dockerfile Directly

If you prefer local container builds, use the provided Dockerfile:

1. Build the Docker Image:

   docker build -t your-image-name .

2. Run the Container:

   docker run -d -p YOUR_PORT:80 your-image-name

3. Update docker-compose.yml (Optional): If you deploy with Docker Compose, modify the image field in docker-compose.yml to use your newly built image.

Note

Reminder: Every time you modify the UI or other front-end code (such as /src/pages/home.rs), be sure to rebuild your project (or Docker image) so that your changes are included in your deployment.

(back to top)

Contributing

Contributions are welcome! Please fork the repository, make your changes, and open a pull request.

1. Fork the Project
2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
3. Commit your Changes (git commit -m 'Add some AmazingFeature')
4. Push to the Branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

(back to top)

License

Distributed under the European Union Public License v1.2. See LICENSE for more information.

(back to top)

Contact

Aitor Astorga Saez de Vicuña - [email protected]

Project Link: https://github.com/AitorAstorga/image_gallery

(back to top)

Acknowledgments

Thanks to these nice projects!

• Rust Yew A framework for creating reliable and efficient web applications.

(back to top)