FIX: no ssr for openseadragon & screenshit api & clt

Dockerfile

@@ -10,6 +10,7 @@ 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

components/openseadragon.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     openseadragon:
-    <div ref="openSeadragonElt" style="width: 100%; height: 500px;"></div>
+    <div ref="openSeadragonElt" style="width: 100%; height: 500px; background: transparent;"></div>
   </div>
 </template>
 
@@ -9,6 +9,9 @@
 // vips dzsave --layout iiif --id /vignemale/dz vignemale.png dz
 
 import iiifConfig from './public/deepzoom/vignemale/dz/info.json'
+import * as Annotorious from '@recogito/annotorious-openseadragon'
+import '@recogito/annotorious-openseadragon/dist/annotorious.min.css';
+
 
 const openSeadragonElt = ref()
 
@@ -20,6 +23,7 @@ onMounted(() => {
         prefixUrl: 'https://openseadragon.github.io/openseadragon/images/',
         tileSources: iiifConfig
       })
+      Annotorious(viewer, {})
     })
   }
 })

docker-compose.yml

@@ -11,6 +11,8 @@ services:
       LETSENCRYPT_HOST: "${DOMAIN}"
       PUID: "${PUID}"
       PGID: "${PGID}"
+    volumes:
+      - "${MEDIA_DIR}:/app/media"
 
 networks:
   default:

nuxt.config.ts

@@ -18,4 +18,4 @@ export default defineNuxtConfig({
   },
 
   compatibilityDate: '2024-07-10'
-})
+})

package.json

@@ -10,6 +10,7 @@
     "postinstall": "nuxt prepare"
   },
   "dependencies": {
+    "@recogito/annotorious-openseadragon": "^2.7.18",
     "atropos": "^2.0.2",
     "cheerio": "^1.0.0",
     "nuxt": "^3.12.3",

pages/index.vue

@@ -1,17 +1,21 @@
 <template>
   <div class="main">
-    <Openseadragon />
+    <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;
@@ -20,16 +24,20 @@
   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;
 }

pages/screenshit.vue

@@ -1,7 +1,7 @@
 <template>
-  <div class="masonry">
+  <div class="masonry text-white">
     <figure v-for="file in files">
-      <img :src="file.replace('./', 'https://files.erudi.fr/screenshit/')">
+      <img :src="'https://files.erudi.fr/screenshit/' + file">
     </figure>
   </div>
 </template>
@@ -27,7 +27,7 @@ figure {
   grid-template-rows: 1fr auto;
 }
 
-figure > img {
+figure>img {
   grid-row: 1 / -1;
   grid-column: 1;
 }
@@ -40,7 +40,7 @@ figure a {
 figcaption {
   grid-row: 2;
   grid-column: 1;
-  background-color: rgba(255,255,255,.5);
+  background-color: rgba(255, 255, 255, .5);
   padding: .2em .5em;
   justify-self: start;
 }

server/api/screenshit.ts

@@ -1,8 +1,17 @@
-import * as cheerio from 'cheerio'
+import fs from 'fs'
+import path from 'path'
 
-export default defineEventHandler(async (event) => {
-  const data = await $fetch('https://files.erudi.fr/screenshit/')
-  const $ = cheerio.load(data)
-  let links = []
-  return $('table a').map((i, el) => $(el).attr('href')).get()
+export default eventHandler(async (event) => {
+  const directoryPath = path.join(process.cwd(), 'media/files/screenshit/')
+
+  try {
+    const files = await fs.promises.readdir(directoryPath)
+
+    return files.filter(file => !file.startsWith('.'))
+  } catch (error) {
+    return {
+      success: false,
+      error: error.message
+    }
+  }
 })