Merge branch '10-annotot-v2' into 'main'

Annotot

Closes #10 and #16

See merge request iiif/POC-mirador!10

.env.template

@@ -19,5 +19,18 @@ HTTP_FOLDER=./www
 # hosts allowed to access ressources from $HTTP_FOLDER
 # * to allow all, http://localhost:$DEV_PORT to allow only devserver
 CORS_ALLOWED_HOSTS=http://localhost:$DEV_PORT
+# Annotot configuration (annotation storage server
+# ENV = development or production
+ANNOTOT_ENV=development
+ANNOTOT_PORT=3000
+ANNOTOT_LISTEN_IP=0.0.0.0
+# This is the host used by annotot request launched by the client using mirador
+# It should be localhost on dev mode, an something like annotot.yourservice.com in production
+ANNOTOT_HOST=localhost
+# For production only
+ANNOTOT_SECRET_KEY_BASE=insert-a-random-key-here
+# http or https
+ANNOTOT_PROTO=http
+# For traefik (optionnal)
 NAME=IIIF
 HOST=IIIF.tetras-lab.io

.gitignore

@@ -4,3 +4,4 @@ node_modules/
 dist/
 .cache/
 .*.sw?
+annotot-db/

README.md

@@ -21,6 +21,7 @@ This readme assumes that you now a few basic about `docker` and `docker-compose`
 
 Copy `.env.template` to `.env` and change variables to suit your need.
 
+You **MUST** set at least the `ANNOTOT_SECRET_KEY_BASE` to a random string, the rest is preconfigured for a local development environment.
 
 The `$HTTP_FOLDER` (`./www` by default) directory will be accessible via HTTP at `http://localhost:$PORT/data` and can be used to store manifests and theirs ressources and see them in Mirador.  
 
@@ -31,6 +32,9 @@ Run `docker-compose up -d`, which will serve a mirador instance at `http://local
 For production, one **also** need to setup :
 
 + `COMPOSE_FILE` should be at least `docker-compose.yml`
++ `ANNOTOT_ENV` should be `production`
++ `ANNOTOT_HOST` should be the public hostname of your annotot server
+
 Run `docker-compose up -d`, which will serve a mirador instance at `http://localhost:$PORT` (default port is 8080).
 
 If sources files are modified, run `docker-compose up -d --build` to update Mirador  

dev.yml

@@ -18,3 +18,7 @@ services:
   httpd:
     ports:
       - $PORT:80
+
+  annotot:
+    ports:
+      - ${ANNOTOT_PORT}:3000

docker-compose.yml

@@ -9,3 +9,12 @@ services:
     volumes:
       - $HTTP_FOLDER:/srv/data
       - ./Caddyfile:/etc/caddy/Caddyfile
+
+  annotot:
+    image: tetraslibre/annotot-app
+    environment:
+      - IP=${ANNOTOT_LISTEN_IP}
+      - ENV=${ANNOTOT_ENV}
+      - SECRET_KEY_BASE=${ANNOTOT_SECRET_KEY_BASE}
+    volumes:
+      - ./annotot-db:/app/db

package-lock.json

@@ -10,6 +10,7 @@
       "license": "ISC",
       "dependencies": {
         "css-loader": "^3.6.0",
+        "dotenv-webpack": "^8.0.1",
         "mirador": "git+https://gitlab.tetras-libre.fr/iiif/mirador-video-annotation#wip-webpack-from-git",
         "mirador-annotations": "0.4.0",
         "react": "^16.13.1",
@@ -2470,6 +2471,36 @@
       "resolved": "https://registry.npmjs.org/dompurify/-/dompurify-2.4.0.tgz",
       "integrity": "sha512-Be9tbQMZds4a3C6xTmz68NlMfeONA//4dOavl/1rNw50E+/QO0KVpbcU0PcaW0nsQxurXls9ZocqFxk8R2mWEA=="
     },
+    "node_modules/dotenv": {
+      "version": "8.6.0",
+      "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-8.6.0.tgz",
+      "integrity": "sha512-IrPdXQsk2BbzvCBGBOTmmSH5SodmqZNt4ERAZDmW4CT+tL8VtvinqywuANaFu4bOMWki16nqf0e4oC0QIaDr/g==",
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/dotenv-defaults": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/dotenv-defaults/-/dotenv-defaults-2.0.2.tgz",
+      "integrity": "sha512-iOIzovWfsUHU91L5i8bJce3NYK5JXeAwH50Jh6+ARUdLiiGlYWfGw6UkzsYqaXZH/hjE/eCd/PlfM/qqyK0AMg==",
+      "dependencies": {
+        "dotenv": "^8.2.0"
+      }
+    },
+    "node_modules/dotenv-webpack": {
+      "version": "8.0.1",
+      "resolved": "https://registry.npmjs.org/dotenv-webpack/-/dotenv-webpack-8.0.1.tgz",
+      "integrity": "sha512-CdrgfhZOnx4uB18SgaoP9XHRN2v48BbjuXQsZY5ixs5A8579NxQkmMxRtI7aTwSiSQcM2ao12Fdu+L3ZS3bG4w==",
+      "dependencies": {
+        "dotenv-defaults": "^2.0.2"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "webpack": "^4 || ^5"
+      }
+    },
     "node_modules/draft-js": {
       "version": "0.11.7",
       "resolved": "https://registry.npmjs.org/draft-js/-/draft-js-0.11.7.tgz",
@@ -10145,6 +10176,27 @@
       "resolved": "https://registry.npmjs.org/dompurify/-/dompurify-2.4.0.tgz",
       "integrity": "sha512-Be9tbQMZds4a3C6xTmz68NlMfeONA//4dOavl/1rNw50E+/QO0KVpbcU0PcaW0nsQxurXls9ZocqFxk8R2mWEA=="
     },
+    "dotenv": {
+      "version": "8.6.0",
+      "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-8.6.0.tgz",
+      "integrity": "sha512-IrPdXQsk2BbzvCBGBOTmmSH5SodmqZNt4ERAZDmW4CT+tL8VtvinqywuANaFu4bOMWki16nqf0e4oC0QIaDr/g=="
+    },
+    "dotenv-defaults": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/dotenv-defaults/-/dotenv-defaults-2.0.2.tgz",
+      "integrity": "sha512-iOIzovWfsUHU91L5i8bJce3NYK5JXeAwH50Jh6+ARUdLiiGlYWfGw6UkzsYqaXZH/hjE/eCd/PlfM/qqyK0AMg==",
+      "requires": {
+        "dotenv": "^8.2.0"
+      }
+    },
+    "dotenv-webpack": {
+      "version": "8.0.1",
+      "resolved": "https://registry.npmjs.org/dotenv-webpack/-/dotenv-webpack-8.0.1.tgz",
+      "integrity": "sha512-CdrgfhZOnx4uB18SgaoP9XHRN2v48BbjuXQsZY5ixs5A8579NxQkmMxRtI7aTwSiSQcM2ao12Fdu+L3ZS3bG4w==",
+      "requires": {
+        "dotenv-defaults": "^2.0.2"
+      }
+    },
     "draft-js": {
       "version": "0.11.7",
       "resolved": "https://registry.npmjs.org/draft-js/-/draft-js-0.11.7.tgz",

package.json

@@ -11,6 +11,7 @@
   "license": "ISC",
   "dependencies": {
     "css-loader": "^3.6.0",
+    "dotenv-webpack": "^8.0.1",
     "mirador": "git+https://gitlab.tetras-libre.fr/iiif/mirador-video-annotation#wip-webpack-from-git",
     "mirador-annotations": "0.4.0",
     "react": "^16.13.1",

src/index.js

@@ -5,11 +5,10 @@ import annotationPlugins from 'mirador-annotations/es/index';
 import LocalStorageAdapter from 'mirador-annotations/es/LocalStorageAdapter';
 import AnnototAdapter from 'mirador-annotations/es/AnnototAdapter';
 
-const endpointUrl = 'http://127.0.0.1:3000/annotations';
+const endpointUrl = `${process.env.ANNOTOT_PROTO}://${process.env.ANNOTOT_HOST}:${process.env.ANNOTOT_PORT}/annotations`;
 const config = {
   annotation: {
-    adapter: (canvasId) => new LocalStorageAdapter(`localStorage://?canvasId=${canvasId}`),
-    // adapter: (canvasId) => new AnnototAdapter(canvasId, endpointUrl),
+    adapter: (canvasId) => new AnnototAdapter(canvasId, endpointUrl),
     exportLocalStorageAnnotations: false, // display annotation JSON export button
   },
   id: 'demo',

traefik.yml

@@ -12,6 +12,18 @@ services:
       - "traefik.http.routers.${NAME}.entrypoints=web,websecure"
       - "traefik.http.routers.${NAME}.middlewares=hardening@docker"
 
+  annotot:
+    networks:
+      - default
+      - traefik
+    labels:
+      - "traefik.enable=true"
+      - "traefik.docker.network=traefik"
+      - "traefik.http.routers.ANNOTOT_${NAME}.rule=Host(`${ANNOTOT_HOST}`)"
+      - "traefik.http.routers.ANNOTOT_${NAME}.tls.certresolver=myresolver"
+      - "traefik.http.routers.ANNOTOT_${NAME}.entrypoints=web,websecure"
+      - "traefik.http.routers.ANNOTOT_${NAME}.middlewares=hardening@docker"
+      - "traefik.http.services.ANNOTOT_${NAME}.loadbalancer.server.port=3000"
 
 networks:
   traefik:

webpack.config.js

 const path = require('path');
 const webpack = require('webpack');
+const Dotenv = require('dotenv-webpack');
 
 module.exports = {
     mode: process.env.WEBPACK_MODE,
@@ -35,6 +36,7 @@ module.exports = {
       new webpack.IgnorePlugin({
         /* cf https://gitlab.tetras-libre.fr/iiif/mirador-video-annotation/-/blob/annotation-on-video/webpack.config.js#L42 */
         resourceRegExp: /@blueprintjs\/(core|icons)/, // ignore optional UI framework dependencies
-      })
+      }),
+      new Dotenv()
     ]
 };