ci: v1

.drone.yml

@@ -0,0 +1,16 @@
+kind: pipeline
+type: docker
+name: default
+
+steps:
+  - name: deploy
+    image: docker:dind
+    commands:
+    - apk add --upgrade npm bash findutils rsync sed
+    - WORKDIR="/var/docker-web/apps/$DRONE_REPO_NAME"
+    - rm -rf $WORKDIR
+    - mkdir $WORKDIR
+    - rsync -av --exclude  ./node_modules /drone/src/ $WORKDIR
+    - cd $WORKDIR
+    - npm ci
+    - bash /var/docker-web/src/cli.sh up $DRONE_REPO_NAME

Dockerfile

@@ -0,0 +1,22 @@
+FROM node:lts-alpine
+
+# install simple http server for serving static content
+RUN npm install -g http-server
+
+# make the 'app' folder the current working directory
+WORKDIR /app
+
+# copy both 'package.json' and 'package-lock.json' (if available)
+COPY package*.json ./
+
+# install project dependencies
+RUN npm install
+
+# copy project files and folders to the current working directory (i.e. 'app' folder)
+COPY . .
+
+# build app for production with minification
+RUN npm run build
+
+EXPOSE 8080
+CMD [ "http-server", "dist" ]

README.md

@@ -1,16 +1,18 @@
-# virages.io
+<h1 align="center">
+  <picture>
+    <img align="center" alt="virages" src="./logo.svg" height="100">
+  </picture>
+  virages
+</h1>
 
-## DESIGN / FEATURES :
+## BASE FILES
 
-- mobile first -> scroll first
-- FEAT :: zoom
-- FEAT :: blur / focus
-- TOOL :: weaver's glass
-- TOOL :: "duality" slider-mask
-- TOOL :: themes
-- TOOL :: specific metas (paint, COLORS (auto gen from photos ?), catégories or tags or both ? ), paper, paint, nuancier,
-- TOOL :: class by 'sketchbook, a sketchbook as a sticker'logo ET/OU a name.'
-- TOOL :: Layer; overlay several photos of the paint and add a cursor-switch, looking-glass, desktop light spot
-- VIDEO :: joconde traveling
-- TOOL :: influence desc
-- TOOL :: pistes de lectures alphabet (numérique et lettres)
+config.sh
+docker-compose.yml
+logo.svg
+
+## EXTRA FILES
+
+nginx.conf
+post-install.sh
+pre-install.sh

config.sh

@@ -0,0 +1,4 @@
+export DOMAIN="virages.io"
+export PORT="7835"
+export PORT_EXPOSED="8080"
+export REDIRECTIONS="" # example.$MAIN_DOMAIN->/route $MAIN_DOMAIN->url /route->/another-route /route->url

docker-compose.yml

@@ -0,0 +1,20 @@
+services:
+
+  virages:
+    image: alpine
+    container_name: virages
+    restart: unless-stopped
+    ports:
+      - $PORT:$PORT_EXPOSED
+    volumes:
+      - "${MEDIA_DIR}:/mnt/media"
+    environment:
+      VIRTUAL_HOST: "${DOMAIN}"
+      LETSENCRYPT_HOST: "${DOMAIN}"
+      PUID: "${PUID}"
+      PGID: "${PGID}"
+
+networks:
+  default:
+    name: dockerweb
+    external: true

logo.svg

@@ -0,0 +1,25 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" width="200" height="200">
+  <!-- Background -->
+  <rect width="200" height="200" fill="white"/>
+
+  <!-- Calligraphic V -->
+  <path d="M70,50 L100,150 L130,50" 
+        stroke="black" stroke-width="5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>
+
+  <!-- Artistic Symbol: Paint Palette -->
+  <circle cx="100" cy="70" r="20" fill="gray" />
+  <circle cx="90" cy="65" r="3" fill="red" />
+  <circle cx="100" cy="60" r="3" fill="blue" />
+  <circle cx="110" cy="65" r="3" fill="yellow" />
+
+  <!-- RGB Rays -->
+  <line x1="100" y1="50" x2="70" y2="20" stroke="red" stroke-width="2"/>
+  <line x1="100" y1="50" x2="100" y2="10" stroke="green" stroke-width="2"/>
+  <line x1="100" y1="50" x2="130" y2="20" stroke="blue" stroke-width="2"/>
+
+  <!-- CMYB Rays -->
+  <line x1="100" y1="50" x2="50" y2="80" stroke="cyan" stroke-width="2"/>
+  <line x1="100" y1="50" x2="100" y2="90" stroke="magenta" stroke-width="2"/>
+  <line x1="100" y1="50" x2="150" y2="80" stroke="yellow" stroke-width="2"/>
+  <line x1="100" y1="50" x2="100" y2="110" stroke="black" stroke-width="2"/>
+</svg>

src/assets/stories.json

@@ -1,4 +1,31 @@
 [
+  {
+    "id": 3,
+    "name": "La Tour de Babel",
+    "author": "Pieter Brueghel l'Ancien",
+    "url": "https://via.hoff.in/demo/images/babel/babel.dzi",
+    "displayMode": "ARTICLE",
+    "markers": [
+      {
+        "id": 0,
+        "name": "first",
+        "order": 0,
+        "bounds": {
+          "degrees": 0,
+          "height": 0.028126953260643097,
+          "width": 0.09524470945402953,
+          "x": 0.32376980664954275,
+          "y": 0.283813392419349
+        },
+        "zoom": 9,
+        "point": {
+          "x": 0.3580975873485992,
+          "y": 0.2968103267302634
+        },
+        "annotation": "<b>lorem</b> ipsum dolor sit amet"
+      }
+    ]
+  },
   {
     "id": 2,
     "name": "Cells",

src/components/StoryContainer.vue

@@ -16,6 +16,7 @@
 import OpenSeadragon from 'openseadragon'
 import '@/assets/plugins/openseadragon-scalebar.js'
 import '@/assets/plugins/openseadragon-bookmark-url.js'
+import '@/assets/plugins/openseadragon-measure.js'
 import { onMounted, ref, provide, onUnmounted } from 'vue'
 import type { Story, ViewerConfiguration } from '@/types/virages'
 import ArticleTop from './StoryArticleTop.vue'
@@ -38,7 +39,7 @@ const defaultViewerConfiguration: ViewerConfiguration = {
   drawer: 'canvas',
   preventDefaultAction: true,
   visibilityRatio: 0.5,
-  defaultZoomLevel: 1.2,
+  defaultZoomLevel: 4,
   gestureSettingsMouse: {
     scrollToZoom: true,
     clickToZoom: false,
@@ -52,6 +53,7 @@ const initViewer = () => {
     element: openSeadragonElt.value,
     tileSources: props.story.url,
     ...defaultViewerConfiguration,
+    debugMode: true,
   })
 }
 

src/components/player/StoryEditor.vue

@@ -195,10 +195,11 @@ useEscapeKey(() => {
 onMounted(() => {
   nextTick(() => {
     Viewer?.value.clearOverlays()
-    // Viewer.value.viewport.defaultZoomLevel = 1
+    Viewer.value.viewport.defaultZoomLevel = 1.2
     loadStory(props.story.markers)
     editMarkerOnDragOrZoom()
     initScalebar()
+    const plugin = new OSDMeasure(viewer, {})
     Viewer.value.bookmarkUrl()
     zoomTo(6) // COMPOSABLE WORKS
   })