Foldseek pages

package.json

 {
   "private": true,
+  "name": "defense-finder-wiki",
+  "author": "Rémi Planel <rplanel@pasteur.fr>",
   "scripts": {
     "build": "nuxt build",
     "dev": "nuxt dev",
@@ -7,13 +9,22 @@
     "preview": "nuxt preview"
   },
   "devDependencies": {
+    "@iconify-json/game-icons": "^1.1.7",
+    "@iconify-json/gravity-ui": "^1.1.1",
+    "@iconify-json/material-symbols": "^1.1.69",
+    "@iconify-json/mdi": "^1.1.64",
+    "@iconify-json/ph": "^1.1.10",
+    "@iconify-json/tabler": "^1.1.103",
+    "@iconify-json/vscode-icons": "^1.1.32",
     "@nuxt/content": "^2.10.0",
-    "@types/node": "^20.10.6",
+    "@types/node": "^20.11.0",
+    "@unocss/nuxt": "^0.58.3",
+    "@unocss/preset-icons": "^0.58.3",
     "@vueuse/core": "^10.7.1",
     "@vueuse/nuxt": "^10.7.1",
-    "nuxt": "^3.9.0",
+    "nuxt": "^3.9.1",
     "nuxt-meilisearch": "^1.1.0",
-    "vuetify-nuxt-module": "^0.8.0"
+    "vuetify-nuxt-module": "^0.9.0"
   },
   "overrides": {
     "vue": "latest"

pages/foldseek.vue

+<script setup lang="ts">
+definePageMeta({
+    documentDriven: false
+})
+</script>
+
+<template>
+    <NuxtPage></NuxtPage>
+</template>
\ No newline at end of file

pages/foldseek/[system]/[fileName].vue

+<script setup lang="ts">
+import { toValue } from '@vueuse/core';
+import { withTrailingSlash, withLeadingSlash, joinURL } from 'ufo'
+
+import { useDisplay } from "vuetify"
+definePageMeta({
+    documentDriven: false
+})
+definePageMeta({
+    layout: 'foldseek'
+})
+const runtimeConfig: { public: { hostUrl: string } } = useRuntimeConfig();
+
+const { width, height } = useDisplay()
+const route = useRoute()
+
+
+const layout = ref({
+    scrollbarWidth: 15,
+    paddingLeft: 24,
+    paddingRight: 24,
+    toolbarHeight: 48,
+    containerPaddingTop: 16,
+    paddingTopCol: 16,
+    containerPaddingBottom: 10,
+    toolbarModalHeight: 48
+
+
+})
+
+const xMargin = computed(() => {
+    const toValLayout = toValue(layout)
+    return toValLayout.scrollbarWidth + toValLayout.paddingLeft + toValLayout.paddingRight
+})
+
+const yMargin = computed(() => {
+    const toValLayout = toValue(layout)
+    return toValLayout.toolbarHeight
+        + toValLayout.toolbarModalHeight
+        + toValLayout.containerPaddingBottom
+        + toValLayout.containerPaddingTop
+        + toValLayout.paddingTopCol
+})
+
+const computedWidth = computed(() => {
+    return toValue(width) - toValue(xMargin)
+})
+const computedHeight = computed(() => {
+    return toValue(height) - toValue(yMargin)
+})
+
+const breadcrumbItems = computed(() => {
+    return [
+        {
+            title: 'Structures DB',
+            disabled: false,
+            to: '/structure/'
+        },
+        {
+            title: route.params.system,
+            disabled: true,
+            exact: true,
+            to: {
+                name: route.name, params: {
+                    ...route.params,
+                }
+            }
+        }
+    ]
+
+})
+
+
+const refinedFoldseekPath = computed(() => {
+    // return 'https://defense-finder.dev.pasteur.cloud/wiki/abia/AbiA_large__AbiA_large-plddts_90.82916.html'
+    const url = `/${route.params.system}/${route.params.fileName}.html`
+    console.log(useRuntimeConfig())
+    if (url?.startsWith('/') && !url.startsWith('//')) {
+        const _base = withLeadingSlash(withTrailingSlash(useRuntimeConfig().app.baseURL))
+        if (_base !== '/' && !url.startsWith(_base)) {
+            return joinURL(runtimeConfig.public.hostUrl, _base, url)
+        }
+    }
+    return url
+})
+
+
+
+const iframe = ref()
+function fullscreen() {
+    console.log(iframe.value)
+    iframe.value.requestFullscreen();
+}
+</script>
+
+<template>
+    <!-- <v-breadcrumbs :items="breadcrumbItems"></v-breadcrumbs> -->
+    <v-card variant="flat" color="transparent" class="pa-0">
+        <v-toolbar flat color="transparent" density="compact">
+            <v-spacer></v-spacer>
+            <v-btn @click="fullscreen()" icon="md:fullscreen"></v-btn>
+        </v-toolbar>
+        <iframe ref="iframe" :width="computedWidth" :height="computedHeight" allow="fullscreen" loading="lazy"
+            :src="refinedFoldseekPath"></iframe>
+    </v-card>
+</template>
\ No newline at end of file

pages/foldseek/[system]/index.vue

+<script setup lang="ts">
+import { toValue } from '@vueuse/core';
+import { withTrailingSlash, withLeadingSlash, joinURL } from 'ufo'
+
+import { useDisplay } from "vuetify"
+definePageMeta({
+    documentDriven: false
+})
+definePageMeta({
+    layout: 'foldseek'
+})
+const runtimeConfig: { public: { hostUrl: string } } = useRuntimeConfig();
+
+const { width, height } = useDisplay()
+const route = useRoute()
+
+
+const layout = ref({
+    scrollbarWidth: 15,
+    paddingLeft: 24,
+    paddingRight: 24,
+    toolbarHeight: 48,
+    containerPaddingTop: 16,
+    paddingTopCol: 16,
+    containerPaddingBottom: 10,
+    toolbarModalHeight: 48
+
+
+})
+
+const xMargin = computed(() => {
+    const toValLayout = toValue(layout)
+    console.log(route)
+    return toValLayout.scrollbarWidth + toValLayout.paddingLeft + toValLayout.paddingRight
+})
+
+const yMargin = computed(() => {
+    const toValLayout = toValue(layout)
+    return toValLayout.toolbarHeight
+        + toValLayout.toolbarModalHeight
+        + toValLayout.containerPaddingBottom
+        + toValLayout.containerPaddingTop
+        + toValLayout.paddingTopCol
+})
+
+const computedWidth = computed(() => {
+    return toValue(width) - toValue(xMargin)
+})
+const computedHeight = computed(() => {
+    return toValue(height) - toValue(yMargin)
+})
+
+const breadcrumbItems = computed(() => {
+    return [
+        {
+            title: 'Structures DB',
+            disabled: false,
+            to: '/structure/'
+        },
+        {
+            title: route.params.system,
+            disabled: true,
+            exact: true,
+            to: {
+                name: route.name, params: {
+                    ...route.params,
+                }
+            }
+        }
+    ]
+
+})
+
+
+const refinedFoldseekPath = computed(() => {
+    // return 'https://defense-finder.dev.pasteur.cloud/wiki/abia/AbiA_large__AbiA_large-plddts_90.82916.html'
+    const url = `/${route.params.system}/${route.query.html}.html`
+    console.log(useRuntimeConfig())
+    if (url?.startsWith('/') && !url.startsWith('//')) {
+        const _base = withLeadingSlash(withTrailingSlash(useRuntimeConfig().app.baseURL))
+        if (_base !== '/' && !url.startsWith(_base)) {
+            const sanitizedUrl = joinURL(runtimeConfig.public.hostUrl, _base, url)
+            console.log(sanitizedUrl)
+            return sanitizedUrl
+        }
+    }
+    return url
+})
+
+
+
+const iframe = ref()
+function fullscreen() {
+    console.log(iframe.value)
+    iframe.value.requestFullscreen();
+}
+</script>
+
+<template>
+    <!-- <v-breadcrumbs :items="breadcrumbItems"></v-breadcrumbs> -->
+    <v-card variant="flat" color="transparent" class="pa-0">
+        <v-toolbar flat color="transparent" density="compact">
+            <v-spacer></v-spacer>
+            <v-btn @click="fullscreen()" icon="md:fullscreen"></v-btn>
+        </v-toolbar>
+        <iframe ref="iframe" :width="computedWidth" :height="computedHeight" allow="fullscreen"
+            :src="refinedFoldseekPath"></iframe>
+    </v-card>
+</template>
\ No newline at end of file

pages/foldseek/index.vue

+<script setup lang="ts">
+import { toValue } from '@vueuse/core';
+import { withTrailingSlash, withLeadingSlash, joinURL } from 'ufo'
+
+import { useDisplay } from "vuetify"
+definePageMeta({
+    documentDriven: false
+})
+definePageMeta({
+    layout: 'foldseek'
+})
+const runtimeConfig: { public: { hostUrl: string } } = useRuntimeConfig();
+
+const { width, height } = useDisplay()
+const route = useRoute()
+
+
+const layout = ref({
+    scrollbarWidth: 15,
+    paddingLeft: 24,
+    paddingRight: 24,
+    toolbarHeight: 48,
+    containerPaddingTop: 16,
+    paddingTopCol: 16,
+    containerPaddingBottom: 10,
+    toolbarModalHeight: 48
+
+
+})
+
+const xMargin = computed(() => {
+    const toValLayout = toValue(layout)
+    console.log(route)
+    return toValLayout.scrollbarWidth + toValLayout.paddingLeft + toValLayout.paddingRight
+})
+
+const yMargin = computed(() => {
+    const toValLayout = toValue(layout)
+    return toValLayout.toolbarHeight
+        + toValLayout.toolbarModalHeight
+        + toValLayout.containerPaddingBottom
+        + toValLayout.containerPaddingTop
+        + toValLayout.paddingTopCol
+})
+
+const computedWidth = computed(() => {
+    return toValue(width) - toValue(xMargin)
+})
+const computedHeight = computed(() => {
+    return toValue(height) - toValue(yMargin)
+})
+
+// const breadcrumbItems = computed(() => {
+//     return [
+//         {
+//             title: 'Structures DB',
+//             disabled: false,
+//             to: '/structure/'
+//         },
+//         {
+//             title: route.params.system,
+//             disabled: true,
+//             exact: true,
+//             to: {
+//                 name: route.name, params: {
+//                     ...route.params,
+//                 }
+//             }
+//         }
+//     ]
+// })
+
+
+const refinedFoldseekPath = computed(() => {
+    // return 'https://defense-finder.dev.pasteur.cloud/wiki/abia/AbiA_large__AbiA_large-plddts_90.82916.html'
+    const url = `/${route.query.system}/${route.query.html}.html`
+    console.log(useRuntimeConfig())
+    if (url?.startsWith('/') && !url.startsWith('//')) {
+        const _base = withLeadingSlash(withTrailingSlash(useRuntimeConfig().app.baseURL))
+        if (_base !== '/' && !url.startsWith(_base)) {
+            const sanitizedUrl = joinURL(_base, url)
+            return sanitizedUrl
+        }
+    }
+    return url
+})
+
+
+
+const iframe = ref()
+function fullscreen() {
+    console.log(iframe.value)
+    iframe.value.requestFullscreen();
+}
+</script>
+
+<template>
+    <!-- <v-breadcrumbs :items="breadcrumbItems"></v-breadcrumbs> -->
+    <v-card variant="flat" color="transparent" class="pa-0">
+        <v-toolbar flat color="transparent" density="compact">
+            <v-spacer></v-spacer>
+            <v-btn @click="fullscreen()" icon="md:fullscreen"></v-btn>
+        </v-toolbar>
+        <iframe ref="iframe" :width="computedWidth" :height="computedHeight" allow="fullscreen"
+            :src="refinedFoldseekPath"></iframe>
+    </v-card>
+</template>
\ No newline at end of file

scripts/copy-structure-data.sh

 #!/bin/bash 
 
-find * -type d -exec sh -c 'for d in "$@"; do (cd "/usr/share/nginx/html/$d"; cp --archive --recursive --symbolic-link /structure-data/sanitized-dump/$d/* .) done' argv0 {} +
+# find * -type d -exec sh -c 'for d in "$@"; do (cd "/usr/src/app/public/$d"; cp --archive --recursive --symbolic-link /structure-data/sanitized-dump/$d/* .) done' argv0 {} +
+find * -type d -exec sh -c 'for d in "$@"; do (cd "/usr/share/nginx/html/$d"; cp --archive --recursive --symbolic-link /structure-data/sanitized-dump/$d/* .) done' argv0 {} +
\ No newline at end of file

uno.config.ts

+import { defineConfig, presetUno, presetIcons, presetAttributify } from 'unocss'
+
+export default defineConfig({
+  // ...UnoCSS options
+  presets: [
+    presetUno(),
+    presetAttributify(),
+    presetIcons(),
+  ]
+})
\ No newline at end of file