feat: replace viframe by dframe

Dockerfile

@@ -17,7 +17,7 @@ ADD config config
 ADD contract contract
 
 # Build UI
-ENV NODE_ENV production
+ENV NODE_ENV=production
 RUN npm run build && \
     rm -rf dist
 
@@ -41,7 +41,7 @@ RUN rm -rf node_modules/.cache
 ##################################
 # Stage: main nodejs service stage
 FROM node:18.15.0-alpine3.17
-MAINTAINER "contact@koumoul.com"
+LABEL maintainer="contact@koumoul.com"
 
 RUN apk add --no-cache dumb-init
 
@@ -65,8 +65,8 @@ ADD LICENSE .
 ADD nodemon.json .
 
 # configure node webapp environment
-ENV NODE_ENV production
-ENV DEBUG db,upgrade*
+ENV NODE_ENV=production
+ENV DEBUG="db,upgrade*"
 # the following line would be a good practice
 # unfortunately it is a problem to activate now that the service was already deployed
 # with volumes belonging to root

docker-compose.yml

@@ -12,7 +12,7 @@ services:
       - MAILDEV_ACTIVE=true
       - STORAGE_TYPE=file
       - ROLES_DEFAULTS=["admin", "contrib", "user"]
-      - PROMETHEUS_ACTIVE=false
+      - OBSERVER_ACTIVE=false
       - NUXT_BUILD_BLOCKING=false
       - NO_UI=${NO_UI}
       - AUTHRATELIMIT_ATTEMPTS=200

package.json

@@ -54,10 +54,12 @@
   "dependencies": {
     "@data-fair/sd-express": "^1.4.3",
     "@koumoul/nuxt-config-inject": "^0.4.10",
+    "@koumoul/v-iframe": "^1.4.2",
     "@nuxtjs/axios": "^5.13.6",
     "@nuxtjs/i18n": "^7.2.2",
     "agentkeepalive": "^4.5.0",
     "ajv": "^6.12.6",
+    "buffer": "^6.0.3",
     "cacheable-lookup": "^6.0.4",
     "config": "^3.3.3",
     "cookie-parser": "^1.4.5",
@@ -102,9 +104,8 @@
   "devDependencies": {
     "@commitlint/cli": "^17.5.0",
     "@commitlint/config-conventional": "^17.4.4",
-    "@data-fair/frame": "^0.12.0",
+    "@data-fair/frame": "^0.18.0",
     "@data-fair/sd-vue": "4.0.0",
-    "@koumoul/v-iframe": "^1.4.2",
     "@koumoul/vjsf": "2.22.1",
     "@koumoul/vue-multianalytics": "^1.11.4",
     "@mdi/font": "^7.0.96",

public/components-no-autoload/d-frame-wrapper.vue

@@ -1,21 +1,23 @@
 <template>
   <d-frame
-    :iframe-title="title"
-    :src="src"
-    :height="height"
-    :resize="resize"
-    sync-params
+    v-bind="$attrs"
+    :adapter.prop="dFrameAdapter"
+    v-on="$listeners"
   />
 </template>
 
 <script>
 import '@data-fair/frame/lib/d-frame.js'
+import createDFrameAdapter from '@data-fair/frame/lib/vue-router/state-change-adapter.js'
+
 export default {
-  props: {
-    src: { type: String, required: true },
-    title: { type: String, required: true },
-    height: { type: String, default: '' },
-    resize: { type: String, default: 'no' }
+  data () {
+    return {
+      dFrameAdapter: null
+    }
+  },
+  created () {
+    this.dFrameAdapter = createDFrameAdapter(this.$router)
   }
 }
 </script>

public/components/application/capture.vue

@@ -55,8 +55,8 @@ export default {
       url.searchParams.set('width', this.meta['df:capture-width'] || '1280')
       url.searchParams.set('height', this.meta['df:capture-height'] || '720')
       url.searchParams.set('updatedAt', this.application.updatedAt)
-      if (this.syncedState && this.syncedState.href) {
-        const stateUrl = new URL(this.syncedState.href)
+      if (this.syncedState && this.syncedState) {
+        const stateUrl = new URL(this.syncedState)
         for (const key of stateUrl.searchParams.keys()) {
           url.searchParams.set('app_' + key, stateUrl.searchParams.get(key))
         }

public/components/application/featured.vue

@@ -22,26 +22,26 @@
       />
     </v-row>
     <client-only>
-      <v-iframe
-        :src="`${dataFairUrl}/app/${applicationRef}`"
-        :title="application.title"
+      <d-frame-wrapper
+        :src="`${dataFairUrl}/app/${applicationRef}?d-frame=true&primary=${readablePrimaryColor}`"
+        :iframe-title="application.title"
         :style="iframeStyle"
-        :sync-state="true"
-        :query-params-extra="queryParamsExtra"
-        :query-params-exclude="queryParamsExclude"
-        @state="s => syncedState = s"
+        scrolling="no"
+        resize="no"
+        aspect-ratio
+        state-change-events
+        @state-change="s => syncedState = s.detail[1]"
       />
     </client-only>
   </div>
 </template>
 
 <script>
 import { mapGetters } from 'vuex'
-import VIframe from '@koumoul/v-iframe'
 
 export default {
   components: {
-    VIframe
+    DFrameWrapper: () => process.client ? import('~/components-no-autoload/d-frame-wrapper.vue') : null
   },
   props: {
     application: {
@@ -65,18 +65,12 @@ export default {
     },
     syncedStateParams () {
       if (!this.syncedState) return {}
-      const url = new URL(this.syncedState.href)
+      const url = new URL(this.syncedState)
       const params = {}
       for (const key of [...url.searchParams.keys()]) {
-        if (key !== 'embed' && key !== 'primary') params[key] = url.searchParams.get(key)
+        if (key !== 'primary') params[key] = url.searchParams.get(key)
       }
       return params
-    },
-    queryParamsExtra () {
-      return { primary: this.readablePrimaryColor, embed: true }
-    },
-    queryParamsExclude () {
-      return ['portalId']
     }
   },
   async mounted () {

public/components/application/fullscreen.vue

@@ -36,7 +36,7 @@ export default {
     },
     syncedStateParams () {
       if (!this.syncedState) return {}
-      const url = new URL(this.syncedState.href)
+      const url = new URL(this.syncedState)
       const params = {}
       for (const key of [...url.searchParams.keys()]) {
         if (key !== 'embed' && key !== 'primary') params[key] = url.searchParams.get(key)

public/components/application/view.vue

@@ -40,23 +40,23 @@
         </v-btn>
       </v-toolbar>
       <client-only>
-        <v-iframe
-          :id="'application-' + application.slug"
-          :title="application.title"
-          :src="application.exposedUrl + `?embed=true&primary=${encodeURIComponent(readablePrimaryColor)}`"
+        <d-frame-wrapper
+          :iframe-title="application.title"
+          :src="application.exposedUrl + `?d-frame=true&primary=${encodeURIComponent(readablePrimaryColor)}`"
+          aspect-ratio
         />
       </client-only>
     </v-card>
   </v-dialog>
 </template>
 
 <script>
-import 'iframe-resizer/js/iframeResizer'
-import VIframe from '@koumoul/v-iframe'
 const { mapState, mapGetters } = require('vuex')
 
 export default {
-  components: { VIframe },
+  components: {
+    DFrameWrapper: () => process.client ? import('~/components-no-autoload/d-frame-wrapper.vue') : null
+  },
   props: ['application'],
   data () {
     return {

public/components/catalog-api-view.vue

@@ -36,19 +36,18 @@
       <client-only>
         <d-frame-wrapper
           :src="`${openapiViewerUrl}/?urlType=catalog`"
-          title="Documentation de l'API du catalogue"
+          iframe-title="Documentation de l'API du catalogue"
         />
       </client-only>
     </v-card>
   </v-dialog>
 </template>
 
 <script>
-import 'iframe-resizer/js/iframeResizer'
 import { mapState, mapGetters } from 'vuex'
 export default {
   components: {
-    DFrameWrapper: () => process.client ? import('../components-no-autoload/d-frame-wrapper.vue') : null
+    DFrameWrapper: () => process.client ? import('~/components-no-autoload/d-frame-wrapper.vue') : null
   },
   props: ['color'],
   data () {

public/components/dataset/dataset-external-reuses.vue

@@ -16,9 +16,9 @@
             width="100%"
             class="mt-2"
           />
-          <v-iframe
+          <d-frame-wrapper
             v-else
-            :title="reuse.title"
+            :iframe-title="reuse.title"
             :src="reuse.link"
             class="mt-2"
           />
@@ -76,11 +76,13 @@
 </template>
 
 <script>
-import VIframe from '@koumoul/v-iframe'
 import VClamp from 'vue-clamp'
 
 export default {
-  components: { VIframe, VClamp },
+  components: {
+    VClamp,
+    DFrameWrapper: () => process.client ? import('~/components-no-autoload/d-frame-wrapper.vue') : null
+  },
   props: {
     dataset: { type: Object, required: true },
     showIframes: { type: Boolean, default: true },

public/components/dataset/dataset-uses.vue

@@ -16,9 +16,9 @@
             width="100%"
             class="mt-2"
           />
-          <v-iframe
+          <d-frame-wrapper
             v-else
-            :title="application.title"
+            :iframe-title="application.title"
             :src="application.link"
             class="mt-2"
           />
@@ -76,11 +76,13 @@
 </template>
 
 <script>
-import VIframe from '@koumoul/v-iframe'
 import VClamp from 'vue-clamp'
 
 export default {
-  components: { VIframe, VClamp },
+  components: {
+    VClamp,
+    DFrameWrapper: () => process.client ? import('~/components-no-autoload/d-frame-wrapper.vue') : null
+  },
   props: {
     dataset: { type: Object, required: true },
     showIframes: { type: Boolean, default: true },

public/components/dataset/embed.vue

@@ -59,26 +59,31 @@
         <code
           class="pa-2 mt-2"
           style="line-height:1.9rem"
-        >&lt;iframe src="{{ iframeState ? iframeState.href : previewLink }}" width="100%" height="500px" style="background-color: transparent; border: none;"&gt;&lt;/iframe&gt;</code>
+        >&lt;iframe src="{{ iframeState ? iframeState : previewLink }}" width="100%" height="500px" style="background-color: transparent; border: none;"&gt;&lt;/iframe&gt;</code>
         <br>
         Résultat:
-        <v-iframe
-          :title="'Vue tableau du jeu de données : ' + dataset.title"
-          :src="previewLink"
-          @state="s => iframeState = s"
-        />
+        <client-only>
+          <d-frame-wrapper
+            :iframe-title="'Vue tableau du jeu de données : ' + dataset.title"
+            :src="previewLink"
+            scrolling="no"
+            resize="no"
+            aspect-ratio
+            state-change-events
+            @state-change="s => iframeState = s.detail[1]"
+          />
+        </client-only>
       </v-card-text>
     </v-card>
   </v-dialog>
 </template>
 
 <script>
-import VIframe from '@koumoul/v-iframe'
 const { mapState } = require('vuex')
 
 export default {
   components: {
-    VIframe
+    DFrameWrapper: () => process.client ? import('~/components-no-autoload/d-frame-wrapper.vue') : null
   },
   props: ['dataset'],
   data () {

public/components/dataset/map-preview.vue

@@ -39,22 +39,25 @@
         </v-btn>
       </v-toolbar>
       <client-only>
-        <v-iframe
-          :title="'Vue carte du jeu de données : ' + dataset.title"
+        <d-frame-wrapper
+          :iframe-title="'Vue carte du jeu de données : ' + dataset.title"
           :src="iframeSrc"
-          :aspect-ratio="$vuetify.breakpoint.smAndDown ? windowWidth / (windowHeight - 48) : undefined"
+          aspect-ratio
+          scrolling="no"
+          resize="no"
         />
       </client-only>
     </v-card>
   </v-dialog>
 </template>
 
 <script>
-import VIframe from '@koumoul/v-iframe'
 const { mapState } = require('vuex')
 
 export default {
-  components: { VIframe },
+  components: {
+    DFrameWrapper: () => process.client ? import('~/components-no-autoload/d-frame-wrapper.vue') : null
+  },
   props: ['dataset', 'color', 'fab'],
   data () {
     return {

public/components/dataset/notif-edit.vue

@@ -41,10 +41,11 @@
       </v-toolbar>
       <v-card-text class="pa-0">
         <client-only>
-          <v-iframe
-            :title="'Notifications pour le jeu de données : ' + dataset.title"
-            :aspect-ratio="0.1"
+          <d-frame-wrapper
+            :iframe-title="'Notifications pour le jeu de données : ' + dataset.title"
             :src="notifUrl"
+            scrolling="no"
+            aspect-ratio
           />
         </client-only>
       </v-card-text>
@@ -53,12 +54,12 @@
 </template>
 
 <script>
-import 'iframe-resizer/js/iframeResizer'
-import VIframe from '@koumoul/v-iframe'
 const { mapState, mapGetters } = require('vuex')
 
 export default {
-  components: { VIframe },
+  components: {
+    DFrameWrapper: () => process.client ? import('~/components-no-autoload/d-frame-wrapper.vue') : null
+  },
   props: ['dataset', 'color'],
   data () {
     return {