Hugin is one of a pair of ravens that fly all over the world, Midgard, and bring information to the god Odin.

Hugin is a front-end for image galleries generated with Munin

Demo

Features

• Responsive design
• Display image metadata
• Display albums
• Explore images with people tag
• Explore images with keywords
• Fuzzy search keywords
• Use geodata from images to display map
• Slideshow modus for album

Installation

Hugin can be hosted by all webservers that can serve static files, but does rely on a Munin generated gallery served under /content from the same domain.

For example

https://hugin.example.no ⬅  Hugin static files
https://hugin.example.no/content ⬅ Munin gallery

Nginx

Here is an example configuration with Nginx:

server {
    listen 80 default_server;
    listen [::]:80 default_server;


    root /var/www/html;

    # Add index.php to the list if you are using PHP
    index index.html index.htm index.nginx-debian.html;

    server_name _;

    location / {
        try_files $uri $uri/ =404;
    }

    location / {
        alias /var/www/hugin; # ⬅  Hugin static files
    }

    location /content {
        alias /storage/pictures/example/munin/content; # ⬅ Munin gallery
    }

}

Kubernetes

The current setup of the Hugin demo is installed on Kubernetes with the /content served from a storage server and proxied. Following is an example of that setup adding the storage server as a Kubernetes service and setting up the Ingress.

A up to date Hugin docker container can be found here

Munin service:

kind: Service
apiVersion: v1
metadata:
  name: munin-content-service
  namespace: hugin
spec:
  ports:
  - protocol: TCP
    port: 80
    targetPort: 80
  type: ExternalName
  externalName: storage.example.no

Ingress:

---
apiVersion: extensions/v1beta1
kind: Ingress
metadata:
  name: hugin-ingress
  namespace: hugin
  annotations:
    ingress.kubernetes.io/ssl-redirect: "true"
    kubernetes.io/ingress.class: "nginx"
    kubernetes.io/tls-acme: "true"
spec:
  tls:
  - hosts:
    - hugin.example.no
    secretName: hugin-example-no-tls
  rules:
  - host: hugin.example.no
    http:
      paths:
      - path: /
        backend:
          serviceName: hugin-service
          servicePort: 80
      - path: /content
        backend:
          serviceName: munin-content-service
          servicePort: 80

Helm

Check out the helm/ directory for a Helm chart implementing the aforementioned Kubernetes installation.

Development

Hugin is made with Elm and Node is required to install the compilers, and webpack.

To set up the development environment:

make install

Run the development server (with hot reload):

make dev

In addition to the development server, hugin needs a "api" from a Munin gallery to work. The easiest way to solve that is to use the Python HTTP server in a Munin directory. The node dev server is already configured to proxy it correctly from port 3000.

cd <MUNIN GALLERY>
python3 -m http.server 3000

Where <MUNIN GALLERY> is a directory containing a root/ and a keywords/ folder.

Code style

When developing on the project, be sure to follow the standard setup of elm-format and elm-analyse

All linters can be run with:

make lint

All linters are ran on the CI whenever a change is comitted.

Environment variables

For all features of the Hugin to work, you need tokens for a few services:

• HUGIN_MAPBOX_ACCESS_TOKEN - For rendering maps on Album and Photos pages
• HUGIN_ROLLBAR_ACCESS_TOKEN - For runtime error reporting (can be ommitted)
• HUGIN_SENTRY_DSN For runtime error reporting (can be ommitted)

This should be exported as environment variables and will be picked up by webpack.

Screenshots