diff --git a/components/content/MolstarPdbePlugin.vue b/components/content/MolstarPdbePlugin.vue index 70822d08de186ebe1e628a8833adbfe51b72ee6f..5e40ebdfbbd47e0647ac60f4fa98f40a07fc2a15 100644 --- a/components/content/MolstarPdbePlugin.vue +++ b/components/content/MolstarPdbePlugin.vue @@ -1,9 +1,21 @@ <script setup lang="ts"> +import { withTrailingSlash, withLeadingSlash, joinURL } from 'ufo' +import { useRuntimeConfig, computed } from '#imports' export interface Props { height?: number dataUrl: string } +const refinedDataUrl = computed(() => { + if (props.dataUrl?.startsWith('/') && !props.dataUrl.startsWith('//')) { + const _base = withLeadingSlash(withTrailingSlash(useRuntimeConfig().app.baseURL)) + if (_base !== '/' && !props.dataUrl.startsWith(_base)) { + return joinURL(_base, props.dataUrl) + } + } + return props.dataUrl +}) + const props = withDefaults(defineProps<Props>(), { height: 600, }) @@ -28,7 +40,7 @@ useHead({ <template> <v-card flat color="transparent" :min-height="height" position="relative" class="my-3"> - <pdbe-molstar :custom-data-url="dataUrl" custom-data-format="pdb" alphafold-view="true" landscape="true" + <pdbe-molstar :custom-data-url="refinedDataUrl" custom-data-format="pdb" alphafold-view="true" landscape="true" hide-expand-icon sequence-panel></pdbe-molstar> </v-card> </template>