@fy-/fws-vue 2.1.6 → 2.1.8

package/components/fws/CmsArticleBoxed.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { CalendarDaysIcon } from "@heroicons/vue/24/solid";
+import { CalendarDaysIcon } from '@heroicons/vue/24/solid'
 
 defineProps({
   article: {
@@ -8,13 +8,13 @@ defineProps({
   },
   type: {
     type: String,
-    default: "blog",
+    default: 'blog',
   },
   imageDomain: {
     type: String,
-    default: "https://s.nocachenocry.com",
+    default: 'https://s.nocachenocry.com',
   },
-});
+})
 </script>
 
 <template>
@@ -23,21 +23,22 @@ defineProps({
     itemtype="https://schema.org/Article"
     class="p-3 flex flex-col justify-between bg-white noise rounded-lg border border-fv-neutral-200 shadow-md dark:bg-fv-neutral-800 dark:border-fv-neutral-700"
   >
-    <meta itemprop="wordCount" :content="article.WordCount" />
-    <meta itemprop="datePublished" :content="article.CreatedAt.iso" />
-    <meta itemprop="dateModified" :content="article.UpdatedAt.iso" />
-    <meta itemprop="inLanguage" :content="article.Locale" />
-    <meta itemprop="headline" :content="article.Title" />
+    <meta itemprop="wordCount" :content="article.WordCount">
+    <meta itemprop="datePublished" :content="article.CreatedAt.iso">
+    <meta itemprop="dateModified" :content="article.UpdatedAt.iso">
+    <meta itemprop="inLanguage" :content="article.Locale">
+    <meta itemprop="headline" :content="article.Title">
     <meta
-      itemprop="thumbnailUrl"
       v-if="article.CoverUUID"
+      itemprop="thumbnailUrl"
       :content="`${imageDomain}/${article.CoverUUID}?vars=format=webp:resize=512x512`"
-    />
+    >
     <RouterLink
       :to="`/${type}/${article.Slug}`"
       :title="article.Title"
       :alt="article.Title"
-      ><img
+    >
+      <img
         v-if="article.CoverUUID"
         :src="`${imageDomain}/${article.CoverUUID}?vars=format=webp:scale_crop_center=400x195`"
         loading="lazy"
@@ -46,15 +47,17 @@ defineProps({
         class="w-full rounded-lg bg-fv-neutral-800 shadow mb-3 flex-grow-0 flex-shrink-0"
         width="400"
         height="250"
-    /></RouterLink>
+      >
+    </RouterLink>
     <h2 class="title-1 font-semibold mb-2 flex-grow-0">
       <RouterLink
         :to="`/${type}/${article.Slug}`"
         :title="article.Title"
         :alt="article.Title"
         rel="bookmark"
-        >{{ article.Title }}</RouterLink
       >
+        {{ article.Title }}
+      </RouterLink>
     </h2>
     <p
       class="mb-5 font-light text-fv-neutral-500 dark:text-fv-neutral-400 flex-grow"
@@ -76,14 +79,14 @@ defineProps({
         <meta
           itemprop="dateModified"
           :content="new Date(parseInt(article.UpdatedAt.unixms)).toISOString()"
-        />
-        <meta itemprop="inLanguage" :content="article.Language__" />
+        >
+        <meta itemprop="inLanguage" :content="article.Language__">
         <meta
           itemprop="dateModified"
           :content="new Date(parseInt(article.UpdatedAt.unixms)).toISOString()"
-        />
+        >
       </div>
-      <!--<span
+      <!-- <span
         ><img
           class="h-4 shadow"
           :src="langs[article.Locale]"
@@ -91,7 +94,7 @@ defineProps({
           height="16"
           loading="lazy"
         />
-      </span>-->
+      </span> -->
       <RouterLink
         :to="`/${type}/${article.Slug}`"
         :title="article.Title"
@@ -109,7 +112,7 @@ defineProps({
             fill-rule="evenodd"
             d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z"
             clip-rule="evenodd"
-          ></path>
+          />
         </svg>
       </RouterLink>
     </div>

package/components/fws/CmsArticleSingle.vue

@@ -1,27 +1,28 @@
 <script setup lang="ts">
-import { ref, watchEffect } from "vue";
-import { useRoute } from "vue-router";
-import type { Component } from "vue";
-import { useRest } from "../../composables/rest";
-import { LazyHead, useSeo } from "../../composables/seo";
-import type { BreadcrumbLink } from "../../types";
-import DefaultBreadcrumb from "../ui/DefaultBreadcrumb.vue";
-import { defineWebPage, useSchemaOrg } from "@unhead/schema-org";
+import type { Component } from 'vue'
+import type { LazyHead } from '../../composables/seo'
+import type { BreadcrumbLink } from '../../types'
+import { defineWebPage, useSchemaOrg } from '@unhead/schema-org'
+import { ref, watchEffect } from 'vue'
+import { useRoute } from 'vue-router'
+import { useRest } from '../../composables/rest'
+import { useSeo } from '../../composables/seo'
+import DefaultBreadcrumb from '../ui/DefaultBreadcrumb.vue'
 
 const props = withDefaults(
   defineProps<{
-    baseUrl: string;
-    cmsAlias: string;
-    notFound: Component;
-    baseBreadcrumb?: BreadcrumbLink[];
-    showImage?: boolean;
-    showPreview?: boolean;
-    showTitle?: boolean;
-    postValue?: any;
-    passData?: boolean;
-    imageDomain?: string;
-    multLanguage?: boolean;
-    urlSlug?: string;
+    baseUrl: string
+    cmsAlias: string
+    notFound: Component
+    baseBreadcrumb?: BreadcrumbLink[]
+    showImage?: boolean
+    showPreview?: boolean
+    showTitle?: boolean
+    postValue?: any
+    passData?: boolean
+    imageDomain?: string
+    multLanguage?: boolean
+    urlSlug?: string
   }>(),
   {
     baseBreadcrumb: () => [],
@@ -30,66 +31,71 @@ const props = withDefaults(
     showTitle: true,
     postValue: () => undefined,
     passData: false,
-    imageDomain: "https://s.nocachenocry.com",
+    imageDomain: 'https://s.nocachenocry.com',
     multLanguage: true,
-    urlSlug: "blog",
+    urlSlug: 'blog',
   },
-);
+)
 
-const rest = useRest();
-const post = ref<any>([]);
-const route = useRoute();
-const seo = ref<LazyHead>({});
-const is404 = ref(false);
-const getBlogPost = async () => {
-  let data: any = undefined;
+const rest = useRest()
+const post = ref<any>([])
+const route = useRoute()
+const seo = ref<LazyHead>({})
+const is404 = ref(false)
+async function getBlogPost() {
+  let data: any
   if (!props.passData) {
-    data = await rest(`Cms/${props.cmsAlias}/Post/${route.params.slug}`, "GET");
-  } else {
-    data = props.postValue;
+    data = await rest(`Cms/${props.cmsAlias}/Post/${route.params.slug}`, 'GET')
   }
-  if (data && data.result == "success") {
-    post.value = data.data;
-    seo.value.title = post.value.Title;
-    seo.value.description = post.value.Overview;
+  else {
+    data = props.postValue
+  }
+  if (data && data.result === 'success') {
+    post.value = data.data
+    seo.value.title = post.value.Title
+    seo.value.description = post.value.Overview
 
     if (post.value.CoverUUID) {
-      seo.value.image = `${props.imageDomain}/${post.value.CoverUUID}?vars=format=png:resize=512x512`;
-      seo.value.imageWidth = "512";
-      seo.value.imageHeight = "512";
-      seo.value.imageType = "image/png";
+      seo.value.image = `${props.imageDomain}/${post.value.CoverUUID}?vars=format=png:resize=512x512`
+      seo.value.imageWidth = '512'
+      seo.value.imageHeight = '512'
+      seo.value.imageType = 'image/png'
+    }
+    if (post.value.Locale !== '') {
+      seo.value.locale = post.value.Locale
     }
-    if (post.value.Locale != "") {
-      seo.value.locale = post.value.Locale;
-    } else {
-      seo.value.locale = "en-US";
+    else {
+      seo.value.locale = 'en-US'
     }
     if (props.multLanguage) {
-      seo.value.url = `https://${props.baseUrl}/l/${seo.value.locale}/${props.urlSlug}/${post.value.Slug}`;
-    } else {
-      seo.value.url = `https://${props.baseUrl}/${props.urlSlug}/${post.value.Slug}`;
+      seo.value.url = `https://${props.baseUrl}/l/${seo.value.locale}/${props.urlSlug}/${post.value.Slug}`
+    }
+    else {
+      seo.value.url = `https://${props.baseUrl}/${props.urlSlug}/${post.value.Slug}`
     }
     if (post.value.Locales && post.value.Locales.length > 1) {
-      seo.value.alternateLocales = post.value.Locales;
+      seo.value.alternateLocales = post.value.Locales
     }
-  } else {
+  }
+  else {
     if (!props.passData) {
-      is404.value = true;
+      is404.value = true
     }
   }
-};
-await getBlogPost();
+}
+await getBlogPost()
 watchEffect(() => {
-  getBlogPost();
-});
-useSeo(seo);
+  getBlogPost()
+})
+useSeo(seo)
 useSchemaOrg([
   defineWebPage({
     datePublished: post.value.CreatedAt.iso,
     dateModified: post.value.UpdatedAt.iso,
   }),
-]);
+])
 </script>
+
 <template>
   <div>
     <div v-if="!is404 && post">
@@ -102,25 +108,25 @@ useSchemaOrg([
         />
       </div>
       <article itemscope itemtype="https://schema.org/Article">
-        <meta itemprop="wordCount" :content="post.WordCount" />
-        <meta itemprop="datePublished" :content="post.CreatedAt.iso" />
-        <meta itemprop="dateModified" :content="post.UpdatedAt.iso" />
-        <meta itemprop="inLanguage" :content="post.Locale" />
-        <meta itemprop="headline" :content="post.Title" />
+        <meta itemprop="wordCount" :content="post.WordCount">
+        <meta itemprop="datePublished" :content="post.CreatedAt.iso">
+        <meta itemprop="dateModified" :content="post.UpdatedAt.iso">
+        <meta itemprop="inLanguage" :content="post.Locale">
+        <meta itemprop="headline" :content="post.Title">
         <meta
-          itemprop="thumbnailUrl"
           v-if="post.CoverUUID"
+          itemprop="thumbnailUrl"
           :content="`${props.imageDomain}/${post.CoverUUID}?vars=format=webp:resize=512x512`"
-        />
-        <div class="py-4 px-4 !max-w-full mx-auto w-full" v-if="showTitle">
+        >
+        <div v-if="showTitle" class="py-4 px-4 !max-w-full mx-auto w-full">
           <h1
             class="mb-4 text-4xl tracking-tight font-extrabold text-center text-fv-neutral-900 dark:text-white"
           >
             {{ post.Title }}
           </h1>
           <p
-            class="font-light text-center text-fv-neutral-500 dark:text-fv-neutral-400 sm:text-xl"
             v-if="showPreview"
+            class="font-light text-center text-fv-neutral-500 dark:text-fv-neutral-400 sm:text-xl"
           >
             {{ post.Overview }}
           </p>
@@ -130,12 +136,12 @@ useSchemaOrg([
           :src="`${props.imageDomain}/${post.CoverUUID}?vars=format=webp:resize=768x768`"
           :alt="post.Title"
           class="h-auto rounded-xl shadow max-w-[768px] max-h-[280px] mx-auto mb-6"
-        />
+        >
         <section
           itemprop="articleBody"
           class="prose dark:prose-invert !max-w-full mx-auto w-full mb-6"
           v-html="post.Body"
-        ></section>
+        />
       </article>
     </div>
     <component :is="notFound" v-if="is404" />