add foldseek link in system article

components/content/ArticleStructure.vue

 <script setup lang="ts">
 import { toValue } from '@vueuse/core';
 // import MolstarPdbePlugin from './MolstarPdbePlugin.vue';
+import { joinURL } from 'ufo'
+
 import * as d3 from "d3";
 import SystemOperonStructure from './SystemOperonStructure.vue';
 import type { OperonStructureIndexName, StructureItem, StructureOperonGene } from '~/types/structure';
@@ -20,6 +22,7 @@ const operonSructIndexName = ref<OperonStructureIndexName>("systemoperonstruct")
 // const stuctureUrls = ref<string[] | undefined>(undefined)
 const headers = ref<Record<string, any>[]>([
     { title: 'Structure', key: 'structure', sortable: false, removable: false, fixed: true, minWidth: "110px" },
+    { title: 'Foldseek', key: 'Foldseek_name', sortable: false },
 
     { title: "System", key: "system" },
     { title: "Gene name", key: "gene_name", removable: false },
@@ -74,7 +77,11 @@ function displayStructure(item) {
     structureTitle.value = `${item.subsystem} - ${item.gene_name}`
 
 }
-
+function toFolseekUrl(item) {
+    const url = joinURL("/" + item.system.toLocaleLowerCase(), item.pdb.replace(/\.pdb$/i, ".html"))
+    const { refinedUrl } = useRefinedUrl(url)
+    return toValue(refinedUrl)
+}
 
 const sanitizedStructures = computed(() => {
     const toValStructures = toValue(structures)
@@ -182,6 +189,10 @@ async function fetchAllOperonStructures() {
                     <v-card-title>Summary</v-card-title>
                 </v-card-item>
                 <v-data-table :headers="headers" :items="sanitizedStructures" :group-by="groupBy">
+                    <template #[`item.Foldseek_name`]="{ item }">
+                        <FoldseekDialog v-if="item?.pdb !== 'na'" :foldseek-path="toFolseekUrl(item)"></FoldseekDialog>
+
+                    </template>
                     <template #[`item.proteins_in_the_prediction`]="{ item }">
                         <CollapsibleChips
                             :items="namesToCollapsibleChips(item.proteins_in_the_prediction, item.system, item.fasta_file)">

nuxt.config.ts

@@ -12,7 +12,6 @@ export default defineNuxtConfig({
     '@nuxtjs/plausible',
     '@nuxtjs/seo',
     '@nuxt/eslint',
-    "@nuxt/image"
   ],
   app: {
     head: {