feat(reinit): place zoom point

.drone.yml

@@ -1,16 +0,0 @@
-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

.editorconfig

@@ -0,0 +1,6 @@
+[*.{js,jsx,mjs,cjs,ts,tsx,mts,cts,vue}]
+charset = utf-8
+indent_size = 2
+indent_style = space
+insert_final_newline = true
+trim_trailing_whitespace = true

.env

@@ -1,4 +0,0 @@
-DOMAIN=virages.io
-PORT=7828
-DASHBOARD_HIDDEN=false
-REDIRECTIONS=screenshit.erudi.fr->/screenshit

.eslintrc.json

@@ -0,0 +1,5 @@
+{
+  "rules": {
+    "vue/block-lang": "off"
+  }
+}

.gitignore

@@ -1,19 +1,33 @@
-# Nuxt dev/build outputs
-.output
-.data
-.nuxt
-.nitro
-.cache
-dist
-
-# Node dependencies
-node_modules
-
 # Logs
 logs
 *.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
 
-# Misc
+node_modules
 .DS_Store
-.fleet
+dist
+dist-ssr
+coverage
+*.local
+
+/cypress/videos/
+/cypress/screenshots/
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
 .idea
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
+*.tsbuildinfo
+
+test-results/
+playwright-report/

.nvmrc

@@ -1 +0,0 @@
-18.20.2

.prettierrc.json

@@ -0,0 +1,7 @@
+
+{
+  "$schema": "https://json.schemastore.org/prettierrc",
+  "semi": false,
+  "singleQuote": true,
+  "printWidth": 100
+}

.vscode/extensions.json

@@ -0,0 +1,10 @@
+{
+  "recommendations": [
+    "Vue.volar",
+    "vitest.explorer",
+    "ms-playwright.playwright",
+    "dbaeumer.vscode-eslint",
+    "EditorConfig.EditorConfig",
+    "esbenp.prettier-vscode"
+  ]
+}

Dockerfile

@@ -1,20 +0,0 @@
-# INSTALL
-FROM node:18-alpine as builder
-WORKDIR /app
-COPY . .
-RUN npm ci && npm cache clean --force
-ADD . .
-
-# BUILD
-RUN npm run build
-
-# PROD
-FROM node:18-alpine
-RUN apk add vips nano
-WORKDIR /app
-COPY --from=builder /app/.output /app/.output
-COPY --from=builder /app/.nuxt /app/.nuxt
-COPY --from=builder /app/.env /app/.env
-ENV HOST 0.0.0.0
-EXPOSE 3000
-CMD source .env && node .output/server/index.mjs

README.md

@@ -1,9 +1,58 @@
 # virages.io
 
+## ROADMAP
+
+1. define a Marker in the viewport
+
+- x
+- y
+
+2. define a ZoomArea
+
+- x
+- y
+- w
+- h
+
+3. define a Mask
+
+- Trace
+
+## TOOLS
+
+DSIGN SYSTEMS
+
+- StoryLite
+  https://atlas-viewer-storybook.netlify.app/#/stories/testing-ensuremouseeventsareaccuratewhenboxchanges
+- micr.io
+  https://i.micr.io/aoxENNv/en/poulpatore-bigjpg
+
+BACK OFFICE
+
+- https://atlas-viewer-storybook.netlify.app/#/stories/annotations-selectiondemo
+- https://github.com/altert/OpenseadragonFabricjsOverlay
+- https://dash.micr.io/u:ErWRfBqNb1ef0QEnIRPzkQ/tets/@aoxENNv/en
+
+FRONT OFFICE
+
+- https://canvas-panel.digirati.com/#/about
+- https://canvas-panel.digirati.com/#/examples/fullpage?manifest=https://stephenwf.github.io/ocean-liners.json
+- https://github.com/digirati-co-uk/canvas-panel/tree/master
+
+CONCURENTS
+
+- https://micr.io/
+- https://archief.ntr.nl/tuinderlusten/en.html
+
+LOGO
+Virages est un outils pour les historiens de l'art qui veulent expliquer/analyser des images (peintures) en très haute résolution
+Concevez un logo minimaliste, moderne pour virages.io, incorporant un V, les couleurs CMJN & RGB.
+
 - [ ] drone clone as $USER
 - [ ] https://github.com/ncsu-libraries/annona
 
 ws apps :
+
 - logo virages
 
 logo
@@ -15,7 +64,7 @@ https://github.com/IIIF/awesome-iiif/tree/66f8c724ee7fdb44f750ed4d7cedad449bb5f7
 FRONT: OpenSeaDragon
 FRONT OFFICE: https://annotorious.github.io/guides/annotorious-in-vue/
 
-BACK:    vips (Zoomable or ZoomHub)
+BACK: vips (Zoomable or ZoomHub)
 BACK office : https://annotorious.github.io/getting-started/
 
 https://github.com/IIIF/awesome-iiif
@@ -23,7 +72,6 @@ https://github.com/IIIF/awesome-iiif
 IIIF
 Giga pixel
 
-
 - [ ] load a picture from a props on mounted in a 2d canvas
 - [ ] display that picture with a good ratio and cover the full window
 - [ ] a method focusOn(x, y, zoom) will change the scale of the image targetting a specific point
@@ -36,16 +84,17 @@ calvitie
 
 forme de nudité
 ex :
+
 - Hunter Thomson
 - Gérard jugnot
 - Sébastien Tellier
 
 qu'apporte l'analyse
- artistique ?
- quel est son sens ?
+artistique ?
+quel est son sens ?
 
- l'analyse peint une âme à l'oeuvre, elle renvoit la passion à l'objet d'art.
- En ce sens l'analyse peut enfermer l'oeuvre dans un cadre, dans des lignes droites comme elle peut démontrer son aura par l'interprétation voir la surpasser par la sur-interprétation.
+l'analyse peint une âme à l'oeuvre, elle renvoit la passion à l'objet d'art.
+En ce sens l'analyse peut enfermer l'oeuvre dans un cadre, dans des lignes droites comme elle peut démontrer son aura par l'interprétation voir la surpasser par la sur-interprétation.
 
 un film aléatoire
 
@@ -72,10 +121,12 @@ https://shop.gandi.net/en/6514bca2-b7cc-11ec-87b3-00163eada87b/domain/suggest/7c
 - [ ] Inpaint in ... well painting :)
 
 ### rembrandt:
+
 https://www.youtube.com/results?search_query=tu+delft+rembrandt
 
 ### Depth map
-Inpainting /  Outpainting -> youtube
+
+Inpainting / Outpainting -> youtube
 https://github.com/AUTOMATIC1111/stable-diffusion-webui
 https://github.com/docker-mailserver/docker-mailserver
 
@@ -83,11 +134,11 @@ https://tresjs.org/examples/load-textures.html
 https://atroposjs.com/docs/vue#whats-next
 
 - découpe d'une image avec clip - d'abord basic ellipse ou cercle
-MODULES:
+  MODULES:
 
-- errance       [tuiles + zoom + full screen]
-- histoire       [tuiles + scroll + zoom]
-- analyse       [click + zoom + animation
+- errance [tuiles + zoom + full screen]
+- histoire [tuiles + scroll + zoom]
+- analyse [click + zoom + animation
 - épaisseurs [3d]
 
 ## Pourquoi virages alors que l'art génératif existe ?
@@ -99,6 +150,7 @@ Il n'y a pas d'artiste,
 Il n'y a que de l'art et leurs auteurs.
 
 ### MARCHÉ :
+
 https://www.tumblr.com
 https://behance.net
 https://vitali-studio.com
@@ -108,13 +160,16 @@ https://www.artsy.net/
 https://www.flickr.com
 
 ### THEMES:
+
 plutôt que perdre du temps sur du web design fait et refait,
 pourquoi ne pas créer des thèmes sur des modèles comme :
+
 - https://www.apple.com/fr/newsroom/
 - https://www.louvre.fr/en/what-s-on/exhibitions/leonardo-da-vinci#exhibition-overview
 - https://salvatormundirevisited.com/
 
 ### CSS
+
 backdrop-filter
 Filter color on hover :
 https://cosmicmagazine.com.au/
@@ -127,11 +182,13 @@ Virag.es is a fullstack "framework" since it's a CMS
 Virag.es back should be build with the best back (prisma nest) framework & vue
 
 ## Photo
+
 - meta
 - raw compat
 - correction ...
 
 ## Paintings
+
 - explorable table
 - compte-fils / thread counter (https://codesandbox.io/s/github/WebsiteBeaver/vue-magnifier)
 - video ?
@@ -142,6 +199,7 @@ Virag.es back should be build with the best back (prisma nest) framework & vue
 ## Lister toutes les références & symbole dans une page qui s'appelerai Mythologie
 
 ## DESIGN / FEATURES :
+
 - mobile first -> scroll first
 - FEAT :: zoom
 - FEAT :: blur / focus

app.vue

@@ -1,3 +0,0 @@
-<template>
-    <NuxtPage />
-</template>

components/annotorious.vue

@@ -1,80 +0,0 @@
-<template>
-  <div class="w-full h-screen">
-    <section class="UI bg-red-800">
-      <button @click="getAnotations()">
-        get annotations
-      </button>
-      <button v-for="tool in tools" :key="tool" class="m-4 p-4" @click="anno.setDrawingTool(tool)">
-        {{ tool }}
-      </button>
-    </section>
-    <img id="annotorious" src="https://files.erudi.fr/virages/snake.jpg">
-  </div>
-</template>
-
-<script>
-import { Annotorious } from '@annotorious/openseadragon'
-import SelectorPack from '@annotorious/selector-pack'
-import BetterPolygon from '@annotorious/better-polygon'
-import '@annotorious/dist/annotorious.min.css'
-
-export default {
-  data() {
-    return {
-      anno: null,
-      tools: ['rect', 'polygon', 'point', 'circle', 'ellipse', 'freehand']
-    }
-  },
-
-  mounted() {
-    this.initAnno()
-  },
-  methods: {
-    initAnno() {
-      this.anno = new Annotorious({
-        image: document.getElementById('annotorious'),
-        widgets: ['COMMENT']
-      })
-
-      BetterPolygon(this.anno)
-      SelectorPack(this.anno, {
-        tools: this.tools
-      })
-      this.anno.setDrawingTool('polygon')
-
-      this.anno.on('createAnnotation', function (annotation) {
-        console.log('Created annotation', annotation)
-      })
-
-      this.anno.on('createSelection', function (selection) {
-        console.log('Created selection', selection)
-      })
-
-      this.anno.on('deleteAnnotation', function (annotation) {
-        console.log('Delete annotation', annotation)
-      })
-
-      this.anno.on('mouseEnterAnnotation', function (annotation, element) {
-        console.log('Mouse ENTERED annotation', annotation)
-      })
-
-      this.anno.on('selectAnnotation', function (annotation, element) {
-        console.log('Select annotation', annotation)
-      })
-
-      this.anno.on('cancelSelected', function (selection) {
-        console.log('UNSELECTED')
-      })
-
-      this.anno.on('clickAnnotation', function (annotation, element) {
-        console.log('Clicked annotation', annotation)
-      })
-    },
-    getAnotations() {
-      const annotations = this.anno.getAnnotations()
-      console.log(annotations)
-    }
-  }
-}
-
-</script>

components/atropos.vue

@@ -1,17 +0,0 @@
-<template>
-  <article class="atropos">
-    there shoudlbe atropos
-    <atropos-component class="my-atropos">
-    </atropos-component>
-  </article>
-</template>
-
-<style>
-.atropos {
-  background-color: red;
-}
-.my-atropos {
-  width: 320px;
-  height: 460px;
-}
-</style>

components/openseadragon.vue

@@ -1,29 +0,0 @@
-<template>
-  <div>
-    openseadragon:
-    <div ref="openSeadragonElt" style="width: 100%; height: 500px; background: transparent;"></div>
-  </div>
-</template>
-
-<script setup>
-// vips dzsave --layout iiif --id /vignemale/dz vignemale.png dz
-
-import iiifConfig from './public/deepzoom/vignemale/dz/info.json'
-import * as Annotorious from '@annotorious/openseadragon'
-// import '@annotorious/openseadragon/dist/annotorious-openseadragon.css'
-
-const openSeadragonElt = ref()
-
-onMounted(() => {
-  if (import.meta.client) {
-    import('openseadragon').then(OpenSeadragon => {
-      OpenSeadragon.default({
-        element: openSeadragonElt.value,
-        prefixUrl: 'https://openseadragon.github.io/openseadragon/images/',
-        tileSources: iiifConfig
-      })
-      Annotorious(viewer, {})
-    })
-  }
-})
-</script>

composables/useOpenseadragon.ts

@@ -1,5 +0,0 @@
-export default () => {
-  onMounted(() => {
-    console.log('useOpenseardragon clearerly here')
-  })
-}

docker-compose.yml

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

e2e/tsconfig.json

@@ -0,0 +1,4 @@
+{
+  "extends": "@tsconfig/node22/tsconfig.json",
+  "include": ["./**/*"]
+}

e2e/vue.spec.ts

@@ -0,0 +1,8 @@
+import { test, expect } from '@playwright/test';
+
+// See here how to get started:
+// https://playwright.dev/docs/intro
+test('visits the app root url', async ({ page }) => {
+  await page.goto('/');
+  await expect(page.locator('div.greetings > h1')).toHaveText('You did it!');
+})

env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

eslint.config.js

@@ -0,0 +1,31 @@
+import pluginVue from 'eslint-plugin-vue'
+import vueTsEslintConfig from '@vue/eslint-config-typescript'
+import pluginVitest from '@vitest/eslint-plugin'
+import pluginPlaywright from 'eslint-plugin-playwright'
+import skipFormatting from '@vue/eslint-config-prettier/skip-formatting'
+
+export default [
+  {
+    name: 'app/files-to-lint',
+    files: ['**/*.{ts,mts,tsx,vue}'],
+  },
+
+  {
+    name: 'app/files-to-ignore',
+    ignores: ['**/dist/**', '**/dist-ssr/**', '**/coverage/**'],
+  },
+
+  ...pluginVue.configs['flat/essential'],
+  ...vueTsEslintConfig(),
+  
+  {
+    ...pluginVitest.configs.recommended,
+    files: ['src/**/__tests__/*'],
+  },
+  
+  {
+    ...pluginPlaywright.configs['flat/recommended'],
+    files: ['e2e/**/*.{test,spec}.{js,ts,jsx,tsx}'],
+  },
+  skipFormatting,
+]

index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="">
+  <head>
+    <meta charset="UTF-8">
+    <link rel="icon" href="/favicon.ico">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Vite App</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>

logo.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" width="512px" height="512px"><linearGradient id="neWh_vRuogN2YpsZ_Gur0a" x1=".337" x2="58.343" y1=".337" y2="58.343" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#889097"/><stop offset="1" stop-color="#4c5963"/></linearGradient><path fill="url(#neWh_vRuogN2YpsZ_Gur0a)" d="M42,39H6c-1.105,0-2-0.895-2-2V11c0-1.105,0.895-2,2-2h36c1.105,0,2,0.895,2,2v26 C44,38.105,43.105,39,42,39z"/><linearGradient id="neWh_vRuogN2YpsZ_Gur0b" x1="13" x2="13" y1="-4.391" y2="24.676" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#f44f5a"/><stop offset=".443" stop-color="#ee3d4a"/><stop offset="1" stop-color="#e52030"/></linearGradient><path fill="url(#neWh_vRuogN2YpsZ_Gur0b)" d="M6,11h14v14H6V11z"/><linearGradient id="neWh_vRuogN2YpsZ_Gur0c" x1="25" x2="25" y1="-2.826" y2="34.377" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#ffd869"/><stop offset="1" stop-color="#fec52b"/></linearGradient><path fill="url(#neWh_vRuogN2YpsZ_Gur0c)" d="M21,11h8v7h-8V11z"/><linearGradient id="neWh_vRuogN2YpsZ_Gur0d" x1="25" x2="25" y1="13.902" y2="43.007" gradientUnits="userSpaceOnUse"><stop offset=".002" stop-color="#427fdb"/><stop offset=".397" stop-color="#2668cb"/><stop offset=".763" stop-color="#1358bf"/><stop offset="1" stop-color="#0c52bb"/></linearGradient><path fill="url(#neWh_vRuogN2YpsZ_Gur0d)" d="M21,26h8v11h-8V26z"/><linearGradient id="neWh_vRuogN2YpsZ_Gur0e" x1="13" x2="13" y1="7.152" y2="48.479" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#f9f9f9"/><stop offset=".26" stop-color="#f0f1f2"/><stop offset=".678" stop-color="#d9dcdf"/><stop offset="1" stop-color="#c2c8cc"/></linearGradient><path fill="url(#neWh_vRuogN2YpsZ_Gur0e)" d="M6,26h14v11H6V26z"/><linearGradient id="neWh_vRuogN2YpsZ_Gur0f" x1="25" x2="25" y1="7.152" y2="48.479" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#f9f9f9"/><stop offset=".26" stop-color="#f0f1f2"/><stop offset=".678" stop-color="#d9dcdf"/><stop offset="1" stop-color="#c2c8cc"/></linearGradient><path fill="url(#neWh_vRuogN2YpsZ_Gur0f)" d="M21,19h8v6h-8V19z"/><linearGradient id="neWh_vRuogN2YpsZ_Gur0g" x1="33.5" x2="33.5" y1="7.152" y2="48.479" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#f9f9f9"/><stop offset=".26" stop-color="#f0f1f2"/><stop offset=".678" stop-color="#d9dcdf"/><stop offset="1" stop-color="#c2c8cc"/></linearGradient><path fill="url(#neWh_vRuogN2YpsZ_Gur0g)" d="M30,11h7v7h-7V11z"/><linearGradient id="neWh_vRuogN2YpsZ_Gur0h" x1="40" x2="40" y1="7.152" y2="48.479" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#f9f9f9"/><stop offset=".26" stop-color="#f0f1f2"/><stop offset=".678" stop-color="#d9dcdf"/><stop offset="1" stop-color="#c2c8cc"/></linearGradient><path fill="url(#neWh_vRuogN2YpsZ_Gur0h)" d="M38,16h4v7h-4V16z"/><linearGradient id="neWh_vRuogN2YpsZ_Gur0i" x1="40" x2="40" y1="-4.391" y2="24.676" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#f44f5a"/><stop offset=".443" stop-color="#ee3d4a"/><stop offset="1" stop-color="#e52030"/></linearGradient><path fill="url(#neWh_vRuogN2YpsZ_Gur0i)" d="M38,11h4v4h-4V11z"/><linearGradient id="neWh_vRuogN2YpsZ_Gur0j" x1="36" x2="36" y1="-2.826" y2="34.377" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#ffd869"/><stop offset="1" stop-color="#fec52b"/></linearGradient><path fill="url(#neWh_vRuogN2YpsZ_Gur0j)" d="M30,24h12v13H30V24z"/><linearGradient id="neWh_vRuogN2YpsZ_Gur0k" x1="33.5" x2="33.5" y1="13.902" y2="43.007" gradientUnits="userSpaceOnUse"><stop offset=".002" stop-color="#427fdb"/><stop offset=".397" stop-color="#2668cb"/><stop offset=".763" stop-color="#1358bf"/><stop offset="1" stop-color="#0c52bb"/></linearGradient><path fill="url(#neWh_vRuogN2YpsZ_Gur0k)" d="M30,19h7v4h-7V19z"/></svg>

nuxt.config.ts

@@ -1,21 +0,0 @@
-// https://nuxt.com/docs/api/configuration/nuxt-config
-export default defineNuxtConfig({
-  devtools: { enabled: true },
-  css: ['~/assets/css/main.css'],
-
-  postcss: {
-    plugins: {
-      tailwindcss: {},
-      autoprefixer: {},
-    },
-  },
-
-  app: {
-    head: {
-      charset: 'utf-8',
-      viewport: 'width=device-width, initial-scale=1',
-    }
-  },
-
-  compatibilityDate: '2024-07-10'
-})

package.json

@@ -1,28 +1,50 @@
 {
-  "name": "nuxt-app",
+  "name": "virages",
+  "version": "0.0.0",
   "private": true,
   "type": "module",
   "scripts": {
-    "build": "nuxt build",
-    "dev": "nuxt dev",
-    "generate": "nuxt generate",
-    "preview": "nuxt preview",
-    "postinstall": "nuxt prepare"
+    "dev": "vite",
+    "build": "run-p type-check \"build-only {@}\" --",
+    "preview": "vite preview",
+    "test:unit": "vitest",
+    "test:e2e": "playwright test",
+    "build-only": "vite build",
+    "type-check": "vue-tsc --build",
+    "lint": "eslint . --fix",
+    "format": "prettier --write src/"
   },
   "dependencies": {
-    "@annotorious/openseadragon": "^3.0.11",
-    "atropos": "^2.0.2",
-    "cheerio": "^1.0.0",
-    "nuxt": "^3.12.3",
-    "openseadragon": "^5.0.0",
-    "unhead": "^1.9.15",
-    "vue": "^3.4.31",
-    "vue-router": "^4.4.0"
+    "openseadragon": "^5.0.1",
+    "pinia": "^2.2.6",
+    "vue": "^3.5.13",
+    "vue-router": "^4.4.5"
   },
   "devDependencies": {
-    "autoprefixer": "^10.4.19",
-    "postcss": "^8.4.39",
-    "sass": "^1.77.6",
-    "tailwindcss": "^3.4.4"
+    "@playwright/test": "^1.49.0",
+    "@tsconfig/node22": "^22.0.0",
+    "@types/jsdom": "^21.1.7",
+    "@types/node": "^22.9.3",
+    "@vitejs/plugin-vue": "^5.2.1",
+    "@vitest/eslint-plugin": "1.1.10",
+    "@vue/eslint-config-prettier": "^10.1.0",
+    "@vue/eslint-config-typescript": "^14.1.3",
+    "@vue/test-utils": "^2.4.6",
+    "@vue/tsconfig": "^0.7.0",
+    "autoprefixer": "^10.4.20",
+    "eslint": "^9.14.0",
+    "eslint-plugin-playwright": "^2.1.0",
+    "eslint-plugin-vue": "^9.30.0",
+    "jsdom": "^25.0.1",
+    "npm-run-all2": "^7.0.1",
+    "postcss": "^8.4.49",
+    "prettier": "^3.3.3",
+    "sass-embedded": "^1.83.0",
+    "tailwindcss": "^3.4.16",
+    "typescript": "~5.6.3",
+    "vite": "^6.0.1",
+    "vite-plugin-vue-devtools": "^7.6.5",
+    "vitest": "^2.1.5",
+    "vue-tsc": "^2.1.10"
   }
 }

pages/index.vue

@@ -1,44 +0,0 @@
-<template>
-  <div class="main">
-    <client-only>
-      <Openseadragon />
-    </client-only>
-    <Article />
-  </div>
-</template>
-
-<style>
-@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap');
-
-.bebas-neue-regular {
-  font-family: 'Bebas Neue', sans-serif;
-  font-weight: 400;
-  font-style: normal;
-}
-
-.noto-sans-400 {
-  font-family: "Noto Sans", sans-serif;
-  font-optical-sizing: auto;
-  font-weight: 400;
-  font-style: normal;
-  font-variation-settings:
-    "wdth" 100;
-}
-
-.text-6xl {
-  font-size: 120px;
-}
-
-.main {
-  margin: 0 auto;
-  max-width: 860px;
-}
-
-.z-article-title {
-  z-index: 50;
-}
-
-.z-article-image {
-  z-index: 49;
-}
-</style>

pages/logo.vue

@@ -1,5 +0,0 @@
-<template>
-    <div class="bg-black h-screen w-full flex justify-center p-16">
-        <img src="/logo.svg">
-    </div>
-</template>

pages/screenshit.vue

@@ -1,61 +0,0 @@
-<template>
-  <div class="masonry text-white">
-    <figure v-for="file in files">
-      <a :href="'https://files.erudi.fr/screenshit/' + file" target="_blank">
-        <img :src="'https://files.erudi.fr/screenshit/' + file">
-        {{ file }}
-      </a>
-    </figure>
-  </div>
-</template>
-
-<script setup>
-const { data: files } = await useFetch('/api/screenshit')
-</script>
-
-<style>
-body {
-  background-color: #000;
-  font: 1.1em Arial, Helvetica, sans-serif;
-}
-
-img {
-  max-width: 100%;
-  display: block;
-}
-
-figure {
-  margin: 0;
-  display: grid;
-  grid-template-rows: 1fr auto;
-}
-
-figure>img {
-  grid-row: 1 / -1;
-  grid-column: 1;
-}
-
-figure a {
-  color: black;
-  text-decoration: none;
-}
-
-figcaption {
-  grid-row: 2;
-  grid-column: 1;
-  background-color: rgba(255, 255, 255, .5);
-  padding: .2em .5em;
-  justify-self: start;
-}
-
-.masonry {
-  display: grid;
-  grid-template-columns: repeat(4, 1fr);
-  grid-auto-flow: dense;
-  gap: 10px;
-}
-
-.landscape {
-  grid-column-end: span 2;
-}
-</style>

playwright.config.ts

@@ -0,0 +1,110 @@
+import process from 'node:process'
+import { defineConfig, devices } from '@playwright/test'
+
+/**
+ * Read environment variables from file.
+ * https://github.com/motdotla/dotenv
+ */
+// require('dotenv').config();
+
+/**
+ * See https://playwright.dev/docs/test-configuration.
+ */
+export default defineConfig({
+  testDir: './e2e',
+  /* Maximum time one test can run for. */
+  timeout: 30 * 1000,
+  expect: {
+    /**
+     * Maximum time expect() should wait for the condition to be met.
+     * For example in `await expect(locator).toHaveText();`
+     */
+    timeout: 5000,
+  },
+  /* Fail the build on CI if you accidentally left test.only in the source code. */
+  forbidOnly: !!process.env.CI,
+  /* Retry on CI only */
+  retries: process.env.CI ? 2 : 0,
+  /* Opt out of parallel tests on CI. */
+  workers: process.env.CI ? 1 : undefined,
+  /* Reporter to use. See https://playwright.dev/docs/test-reporters */
+  reporter: 'html',
+  /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
+  use: {
+    /* Maximum time each action such as `click()` can take. Defaults to 0 (no limit). */
+    actionTimeout: 0,
+    /* Base URL to use in actions like `await page.goto('/')`. */
+    baseURL: process.env.CI ? 'http://localhost:4173' : 'http://localhost:5173',
+
+    /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
+    trace: 'on-first-retry',
+
+    /* Only on CI systems run the tests headless */
+    headless: !!process.env.CI,
+  },
+
+  /* Configure projects for major browsers */
+  projects: [
+    {
+      name: 'chromium',
+      use: {
+        ...devices['Desktop Chrome'],
+      },
+    },
+    {
+      name: 'firefox',
+      use: {
+        ...devices['Desktop Firefox'],
+      },
+    },
+    {
+      name: 'webkit',
+      use: {
+        ...devices['Desktop Safari'],
+      },
+    },
+
+    /* Test against mobile viewports. */
+    // {
+    //   name: 'Mobile Chrome',
+    //   use: {
+    //     ...devices['Pixel 5'],
+    //   },
+    // },
+    // {
+    //   name: 'Mobile Safari',
+    //   use: {
+    //     ...devices['iPhone 12'],
+    //   },
+    // },
+
+    /* Test against branded browsers. */
+    // {
+    //   name: 'Microsoft Edge',
+    //   use: {
+    //     channel: 'msedge',
+    //   },
+    // },
+    // {
+    //   name: 'Google Chrome',
+    //   use: {
+    //     channel: 'chrome',
+    //   },
+    // },
+  ],
+
+  /* Folder for test artifacts such as screenshots, videos, traces, etc. */
+  // outputDir: 'test-results/',
+
+  /* Run your local dev server before starting the tests */
+  webServer: {
+    /**
+     * Use the dev server by default for faster feedback loop.
+     * Use the preview server on CI for more realistic testing.
+     * Playwright will re-use the local server if there is already a dev-server running.
+     */
+    command: process.env.CI ? 'npm run preview' : 'npm run dev',
+    port: process.env.CI ? 4173 : 5173,
+    reuseExistingServer: !process.env.CI,
+  },
+})

plugins/atropos.js

@@ -1,9 +0,0 @@
-import { defineNuxtPlugin } from '#app'
-
-export default defineNuxtPlugin(() => {
-  if (process.client) {
-    import('atropos/element').then(({ default: AtroposComponent }) => {
-      customElements.define('atropos-component', AtroposComponent)
-    })
-  }
-})

postcss.config.js

@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

public/data.json

@@ -0,0 +1,32 @@
+[
+  {
+    "id": 0,
+    "order": 0,
+    "title": "Poulpatore",
+    "url": "https://verrochi92.github.io/axolotl/data/W255B_0.dzi",
+    "story": [
+      {
+        "id": 0,
+        "zoom": 4,
+        "x": 0.5,
+        "y": 0.7,
+        "annotation": "lorem ipsum dolor sit amet"
+      },
+      {
+        "id": 1,
+        "zoom": 3,
+        "x": 0.2,
+        "y": 0.3,
+        "annotation": "second annotation"
+      },
+      {
+        "id": 2,
+        "zoom": 5,
+        "x": 0.1,
+        "y": 0.1,
+        "annotation": "third"
+      },
+    ]
+    }]
+  }
+]