Update ImageGallery, InlinePicture and SogLink

components/imageGalery.vue → components/ImageGallery.vue

@@ -7,7 +7,7 @@
     <div
       class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity"
       @click="$emit('close')"
-    ></div>
+    />
 
     <!-- Modal -->
     <div class="absolute p-2">
@@ -30,7 +30,7 @@
           />
         </svg>
       </div>
-      <nuxt-picture
+      <NuxtPicture
         :src="`${currentImg.src}`"
         :alt="`${currentImg.alt}`"
         format="webp"
@@ -41,13 +41,11 @@
   </div>
 </template>
 
-<script>
-export default {
-  name: 'InlineGalery',
-  props: {
-    open: { type: Boolean, default: false },
-    currentImg: { type: Object, default: () => {} },
-  },
-}
+<script setup lang="ts">
+defineProps<{
+  open: boolean
+  currentImg: { src: string; alt: string }
+}>()
+
+defineEmits(['close'])
 </script>
-<style></style>

components/inlinePicture.vue → components/InlinePicture.vue

@@ -36,7 +36,7 @@
         :alt="`${imgAlt}`"
         class="p-2"
       >
-        <nuxt-img
+        <NuxtImg
           :src="`${imgSrc}`"
           :alt="`${imgAlt}`"
           format="webp"
@@ -46,7 +46,7 @@
         />
       </SogLink>
       <div v-else class="cursor-pointer" @click="galery = true">
-        <nuxt-img
+        <NuxtImg
           :src="`${imgSrc}`"
           :alt="`${imgAlt}`"
           format="webp"
@@ -59,41 +59,31 @@
         {{ imgSub }}
       </div>
     </div>
-    <image-galery
+    <ImageGallery
       :open="galery"
       :current-img="{
         src: imgSrc,
         alt: imgAlt,
       }"
-      @close="closeGalery"
-    ></image-galery>
+      @close="closeGallery"
+    />
   </div>
 </template>
 
-<script>
-import SogLink from '~/components/sogLink'
-import ImageGalery from '~/components/imageGalery.vue'
-export default {
-  name: 'InlinePicture',
-  components: { SogLink, ImageGalery },
-  props: {
-    imgSrc: { type: String, default: '' },
-    imgAlt: { type: String, default: '' },
-    imgSub: { type: String, default: null },
-    imgUrl: { type: String, default: '/' },
-    position: { type: String, default: 'left' },
-    size: { type: String, default: 'full' },
-    marginLeft: { type: Boolean, default: true },
-  },
-  data: () => ({
-    galery: false,
-  }),
-  methods: {
-    closeGalery() {
-      this.galery = false
-    },
-  },
+<script setup lang="ts">
+defineProps({
+  imgSrc: { type: String, default: '' },
+  imgAlt: { type: String, default: '' },
+  imgSub: { type: String, default: null },
+  imgUrl: { type: String, default: '/' },
+  position: { type: String, default: 'left' },
+  size: { type: String, default: 'full' },
+  marginLeft: { type: Boolean, default: true },
+})
+
+const gallery = ref(false)
+
+const closeGallery = () => {
+  gallery.value = false
 }
 </script>
-
-<style></style>

components/SogLink.vue

@@ -0,0 +1,29 @@
+<template>
+  <div>
+    <NuxtLink
+      v-if="dest !== '' && !external"
+      :to="localePath(`/${dest}`)"
+      :alt="alt"
+    >
+      <slot />
+    </NuxtLink>
+    <a
+      v-else-if="dest !== '' && external"
+      :href="dest"
+      :alt="alt"
+      rel="noopener"
+      target="_blank"
+    >
+      <slot />
+    </a>
+    <slot v-else />
+  </div>
+</template>
+
+<script setup lang="ts">
+const props = defineProps<{ dest: string, alt: string }>()
+
+const localePath = useLocalePath()
+
+const external = computed(() => props.dest.indexOf('https://') === 0 || props.dest.indexOf('http://') === 0)
+</script>