@fy-/fws-vue 2.1.6 → 2.1.7

package/composables/seo.ts

@@ -1,116 +1,120 @@
-// @ts-nocheck
-import type { Ref } from "vue";
-import { useHead, useSeoMeta } from "@unhead/vue";
-import { getURL, getLocale, getPrefix } from "@fy-/fws-js";
-import { useRoute } from "vue-router";
+import type { Ref } from 'vue'
+import { getLocale, getPrefix, getURL } from '@fy-/fws-js'
+import { useHead, useSeoMeta } from '@unhead/vue'
+import { useRoute } from 'vue-router'
 
 export interface LazyHead {
-  name?: string;
-  title?: string;
-  image?: string;
-  imageType?: string;
-  imageWidth?: string;
-  imageHeight?: string;
-  description?: string;
-  published?: string;
-  modified?: string;
-  keywords?: string;
-  type?: "blog" | "search" | "article" | "website";
-  searchAction?: string;
-  next?: string;
-  prev?: string;
-  locale?: string;
-  robots?: string;
-  url?: string;
-  canonical?: string;
-  isAdult?: boolean;
-  alternateLocales?: string[];
-  twitterCreator?: string;
+  name?: string
+  title?: string
+  image?: string
+  imageType?: string
+  imageWidth?: string
+  imageHeight?: string
+  description?: string
+  published?: string
+  modified?: string
+  keywords?: string
+  type?: 'blog' | 'search' | 'article' | 'website'
+  searchAction?: string
+  next?: string
+  prev?: string
+  locale?: string
+  robots?: string
+  url?: string
+  canonical?: string
+  isAdult?: boolean
+  alternateLocales?: string[]
+  twitterCreator?: string
 }
 
-export const useSeo = (seoData: Ref<LazyHead>, initial: boolean = false) => {
-  const route = useRoute();
-  const currentLocale = getLocale();
-  const url = getURL();
+// eslint-disable-next-line unused-imports/no-unused-vars
+export function useSeo(seoData: Ref<LazyHead>, initial: boolean = false) {
+  const route = useRoute()
+  const currentLocale = getLocale()
+  const url = getURL()
 
   useHead({
     meta: () => {
-      const metas: any[] = [];
+      const metas: any[] = []
       if (seoData.value.isAdult) {
         metas.push({
-          name: "rating",
-          content: "RTA-5042-1996-1400-1577-RTA",
-          key: "rating",
-        });
+          name: 'rating',
+          content: 'RTA-5042-1996-1400-1577-RTA',
+          key: 'rating',
+        })
       }
 
-      return metas;
+      return metas
     },
     link: () => {
-      const links: any[] = [];
+      const links: any[] = []
+      const page
+        = route.query.page && Number.parseInt(route.query.page.toString()) > 1
+          ? `?page=${route.query.page}`
+          : ''
 
       links.push({
-        rel: "canonical",
-        href: `${url.Scheme}://${url.Host}${route.fullPath}`,
-        key: "canonical",
-      });
+        rel: 'canonical',
+        href: `${url.Scheme}://${url.Host}${getURL().Path}${page}`,
+      })
 
       seoData.value.alternateLocales?.forEach((locale) => {
         if (locale !== currentLocale) {
           links.push({
-            rel: "alternate",
+            rel: 'alternate',
             hreflang: locale,
             href: `${getURL().Scheme}://${
               getURL().Host
-            }/l/${locale}${getURL().Path.replace(getPrefix(), "")}`,
+            }/l/${locale}${getURL().Path.replace(getPrefix(), '')}`,
             key: `alternate-${locale}`,
-          });
+          })
         }
-      });
+      })
 
       if (seoData.value.image) {
         links.push({
-          rel: "preload",
+          rel: 'preload',
           href: seoData.value.image,
-          as: "image",
-          fetchpriority: "high",
-        });
+          as: 'image',
+          fetchpriority: 'high',
+        })
       }
 
-      return links;
+      return links
     },
-  });
+  })
 
   useSeoMeta({
     ogUrl: () => `${getURL().Scheme}://${getURL().Host}${route.fullPath}`,
     ogLocale: () => {
       if (currentLocale) {
-        return currentLocale.replace("-", "_");
+        return currentLocale.replace('-', '_')
       }
     },
     robots:
-      "index, follow, max-image-preview:large, max-snippet:-1, max-video-preview:-1",
-    title: () => seoData.value.title,
+      'index, follow, max-image-preview:large, max-snippet:-1, max-video-preview:-1',
+    title: () => seoData.value.title || '',
     ogTitle: () => seoData.value.title,
     ogDescription: () => seoData.value.description,
-    twitterCard: "summary_large_image",
+    twitterCard: 'summary_large_image',
     ogSiteName: () => seoData.value.name,
     twitterTitle: () => seoData.value.title,
     twitterDescription: () => seoData.value.description,
     ogImageAlt: () => {
       if (seoData.value.image) {
-        return seoData.value.title;
+        return seoData.value.title
       }
-      return undefined;
+      return undefined
     },
-    ogType: () => (seoData.value.type ? seoData.value.type : "website"),
+    // @ts-expect-error: Type 'string' is not assignable to type 'undefined'.
+    ogType: () => (seoData.value.type ? seoData.value.type : 'website'),
     twitterCreator: () => seoData.value.twitterCreator,
     twitterSite: () => seoData.value.twitterCreator,
     twitterImageAlt: () => {
       if (seoData.value.image) {
-        return seoData.value.title;
+        return seoData.value.title
       }
-      return undefined;
+      return undefined
     },
     description: () => seoData.value.description,
     keywords: () => seoData.value.keywords,
@@ -118,68 +122,75 @@ export const useSeo = (seoData: Ref<LazyHead>, initial: boolean = false) => {
     articleModifiedTime: () => seoData.value.modified,
     ogImageSecureUrl: () => {
       if (seoData.value.image) {
-        if (seoData.value.image.includes("?vars=")) {
+        if (seoData.value.image.includes('?vars=')) {
           if (seoData.value.imageType) {
             return seoData.value.image.replace(
-              "?vars=",
-              `.${seoData.value.imageType.replace("image/", "")}?vars=`,
-            );
-          } else {
-            return seoData.value.image.replace("?vars=", ".png?vars=");
+              '?vars=',
+              `.${seoData.value.imageType.replace('image/', '')}?vars=`,
+            )
+          }
+          else {
+            return seoData.value.image.replace('?vars=', '.png?vars=')
           }
         }
-        return seoData.value.image;
+        return seoData.value.image
       }
     },
     ogImageUrl: () => {
       if (seoData.value.image) {
-        if (seoData.value.image.includes("?vars=")) {
+        if (seoData.value.image.includes('?vars=')) {
           if (seoData.value.imageType) {
             return seoData.value.image.replace(
-              "?vars=",
-              `.${seoData.value.imageType.replace("image/", "")}?vars=`,
-            );
-          } else {
-            return seoData.value.image.replace("?vars=", ".png?vars=");
+              '?vars=',
+              `.${seoData.value.imageType.replace('image/', '')}?vars=`,
+            )
+          }
+          else {
+            return seoData.value.image.replace('?vars=', '.png?vars=')
           }
         }
-        return seoData.value.image;
+        return seoData.value.image
       }
     },
     ogImageType: () => {
       if (seoData.value.imageType) {
-        return seoData.value.imageType
-          ? seoData.value.imageType.includes("image/")
-            ? seoData.value.imageType
-            : `image/${seoData.value.imageType}`
-          : "image/png";
+        const type = seoData.value.imageType.includes('image/')
+          ? seoData.value.imageType
+          : `image/${seoData.value.imageType}`
+        if (type === 'image/jpeg' || type === 'image/gif' || type === 'image/png') {
+          return type
+        }
+        return 'image/png'
       }
-      return undefined;
+      return undefined
     },
     twitterImageUrl: () => {
       if (seoData.value.image) {
-        if (seoData.value.image.includes("?vars=")) {
+        if (seoData.value.image.includes('?vars=')) {
           if (seoData.value.imageType) {
             return seoData.value.image.replace(
-              "?vars=",
-              `.${seoData.value.imageType.replace("image/", "")}?vars=`,
-            );
-          } else {
-            return seoData.value.image.replace("?vars=", ".png?vars=");
+              '?vars=',
+              `.${seoData.value.imageType.replace('image/', '')}?vars=`,
+            )
+          }
+          else {
+            return seoData.value.image.replace('?vars=', '.png?vars=')
           }
         }
-        return seoData.value.image;
+        return seoData.value.image
       }
     },
     twitterImageType() {
       if (seoData.value.imageType) {
-        return seoData.value.imageType
-          ? seoData.value.imageType.includes("image/")
-            ? seoData.value.imageType
-            : `image/${seoData.value.imageType}`
-          : "image/png";
+        const type = seoData.value.imageType.includes('image/')
+          ? seoData.value.imageType
+          : `image/${seoData.value.imageType}`
+        if (type === 'image/jpeg' || type === 'image/gif' || type === 'image/png') {
+          return type
+        }
+        return 'image/png'
       }
-      return undefined;
+      return undefined
     },
-  });
-};
+  })
+}

package/composables/ssr.ts

@@ -1,39 +1,39 @@
-import { Router } from "vue-router";
-import { Pinia } from "pinia";
-import { renderToString } from "@vue/server-renderer";
-import { getInitialState, getPath, getURL, getUUID } from "@fy-/fws-js";
-import { useServerRouter } from "../stores/serverRouter";
-import { renderSSRHead } from "@unhead/ssr";
+import type { Pinia } from 'pinia'
+import type { Router } from 'vue-router'
+import { getInitialState, getPath, getURL, getUUID } from '@fy-/fws-js'
+import { renderSSRHead } from '@unhead/ssr'
+import { renderToString } from '@vue/server-renderer'
+import { useServerRouter } from '../stores/serverRouter'
 
 export interface SSRResult {
   initial: {
-    isSSR: boolean;
-    pinia?: string;
-  };
-  uuid?: string;
-  meta?: string;
-  link?: string;
-  bodyAttributes?: string;
-  bodyTagsOpen?: string;
-  htmlAttributes?: string;
-  bodyTags?: string;
-  app?: string;
-  statusCode?: number;
-  redirect?: string;
+    isSSR: boolean
+    pinia?: string
+  }
+  uuid?: string
+  meta?: string
+  link?: string
+  bodyAttributes?: string
+  bodyTagsOpen?: string
+  htmlAttributes?: string
+  bodyTags?: string
+  app?: string
+  statusCode?: number
+  redirect?: string
 }
 
 export function isServerRendered() {
-  const state = getInitialState();
-  if (state && state.isSSR) return true;
-  return false;
+  const state = getInitialState()
+  if (state && state.isSSR) return true
+  return false
 }
 
 export function initVueClient(router: Router, pinia: Pinia) {
-  const state = getInitialState();
+  const state = getInitialState()
   if (state.isSSR && state && state.pinia) {
-    pinia.state.value = state.pinia;
+    pinia.state.value = state.pinia
   }
-  useServerRouter(pinia)._setRouter(router);
+  useServerRouter(pinia)._setRouter(router)
 }
 
 export async function initVueServer(
@@ -41,13 +41,13 @@ export async function initVueServer(
   callback: Function,
   options: { url?: string } = {},
 ) {
-  const url =
-    options.url || `${getPath()}${getURL().Query ? `?${getURL().Query}` : ""}`;
-  const { app, router, head, pinia } = await createApp(true);
-  const serverRouter = useServerRouter(pinia);
-  serverRouter._setRouter(router);
-  await router.push(url);
-  await router.isReady();
+  const url
+    = options.url || `${getPath()}${getURL().Query ? `?${getURL().Query}` : ''}`
+  const { app, router, head, pinia } = await createApp(true)
+  const serverRouter = useServerRouter(pinia)
+  serverRouter._setRouter(router)
+  await router.push(url)
+  await router.isReady()
 
   const result: SSRResult = {
     uuid: getUUID(),
@@ -55,47 +55,49 @@ export async function initVueServer(
       isSSR: true,
       pinia: undefined,
     },
-  };
+  }
 
   if (url !== serverRouter.route.fullPath) {
-    result.redirect = serverRouter.route.value.fullPath;
-    result.statusCode = 307;
-    callback(result);
-    return result;
+    result.redirect = serverRouter.route.value.fullPath
+    result.statusCode = 307
+    callback(result)
+    return result
   }
 
   try {
-    const html = await renderToString(app);
-    const payload = await renderSSRHead(head);
+    const html = await renderToString(app)
+    const payload = await renderSSRHead(head)
 
-    result.meta = payload.headTags;
-    result.bodyAttributes = payload.bodyAttrs;
-    result.htmlAttributes = payload.htmlAttrs;
-    result.bodyTags = payload.bodyTags;
-    result.bodyTagsOpen = payload.bodyTagsOpen;
-    result.app = html;
-    if (serverRouter.status != 200) {
+    result.meta = payload.headTags
+    result.bodyAttributes = payload.bodyAttrs
+    result.htmlAttributes = payload.htmlAttrs
+    result.bodyTags = payload.bodyTags
+    result.bodyTagsOpen = payload.bodyTagsOpen
+    result.app = html
+    if (serverRouter.status !== 200) {
       if ([301, 302, 303, 307].includes(serverRouter.status)) {
         if (serverRouter.redirect) {
-          result.statusCode = serverRouter.status;
-          result.redirect = serverRouter.redirect;
+          result.statusCode = serverRouter.status
+          result.redirect = serverRouter.redirect
         }
-      } else {
-        result.statusCode = serverRouter.status;
+      }
+      else {
+        result.statusCode = serverRouter.status
       }
     }
 
-    serverRouter._router = null;
-    result.initial.pinia = pinia.state.value;
-    callback(result);
-    return result;
-  } catch (error) {
-    //console.error(error);
-    result.statusCode = 500;
-    const err =
-      error instanceof Error ? `${error.message}\n${error.stack}` : error;
-    result.app = `<pre>${err}</pre>`;
-    callback(result);
-    return result;
+    serverRouter._router = null
+    result.initial.pinia = pinia.state.value
+    callback(result)
+    return result
+  }
+  catch (error) {
+    // console.error(error);
+    result.statusCode = 500
+    const err
+      = error instanceof Error ? `${error.message}\n${error.stack}` : error
+    result.app = `<pre>${err}</pre>`
+    callback(result)
+    return result
   }
 }

package/composables/templating.ts

@@ -1,88 +1,88 @@
-import { format as formatDateTimeago } from "timeago.js";
-import { useTranslation } from "./translations";
-import { getLocale } from "@fy-/fws-js";
+import { getLocale } from '@fy-/fws-js'
+import { format as formatDateTimeago } from 'timeago.js'
+import { useTranslation } from './translations'
 
-const cropText = (str: string, ml = 100, end = "...") => {
+function cropText(str: string, ml = 100, end = '...') {
   if (str.length > ml) {
-    return `${str.slice(0, ml)}${end}`;
+    return `${str.slice(0, ml)}${end}`
   }
-  return str;
-};
-const getContrastingTextColor = (backgroundColor: string) => {
-  const r = parseInt(backgroundColor.substring(1, 3), 16);
-  const g = parseInt(backgroundColor.substring(3, 5), 16);
-  const b = parseInt(backgroundColor.substring(5, 7), 16);
+  return str
+}
+function getContrastingTextColor(backgroundColor: string) {
+  const r = Number.parseInt(backgroundColor.substring(1, 3), 16)
+  const g = Number.parseInt(backgroundColor.substring(3, 5), 16)
+  const b = Number.parseInt(backgroundColor.substring(5, 7), 16)
 
-  const luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255;
+  const luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255
 
-  return luminance > 0.5 ? "#000000" : "#FFFFFF";
-};
-const formatBytes = (bytes: number, decimals = 2) => {
-  if (!+bytes) return "0 Bytes";
+  return luminance > 0.5 ? '#000000' : '#FFFFFF'
+}
+function formatBytes(bytes: number, decimals = 2) {
+  if (!+bytes) return '0 Bytes'
 
-  const k = 1024;
-  const dm = decimals < 0 ? 0 : decimals;
-  const sizes = ["Bytes", "KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"];
+  const k = 1024
+  const dm = decimals < 0 ? 0 : decimals
+  const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB']
 
-  const i = Math.floor(Math.log(bytes) / Math.log(k));
+  const i = Math.floor(Math.log(bytes) / Math.log(k))
 
-  return `${parseFloat((bytes / Math.pow(k, i)).toFixed(dm))} ${sizes[i]}`;
-};
+  return `${Number.parseFloat((bytes / k ** i).toFixed(dm))} ${sizes[i]}`
+}
 
-const formatDate = (dt: Date | string | number) => {
-  let _dt = dt as number;
-  if (typeof dt === "string") {
-    _dt = Date.parse(dt);
+function formatDate(dt: Date | string | number) {
+  let _dt = dt as number
+  if (typeof dt === 'string') {
+    _dt = Date.parse(dt)
     if (Number.isNaN(_dt)) {
-      _dt = parseInt(dt);
+      _dt = Number.parseInt(dt)
     }
   }
 
-  const translate = useTranslation();
-  return translate("global_datetime", {
+  const translate = useTranslation()
+  return translate('global_datetime', {
     val: new Date(_dt),
     formatParams: {
       val: {
-        year: "numeric",
-        month: "long",
-        day: "numeric",
+        year: 'numeric',
+        month: 'long',
+        day: 'numeric',
       },
     },
-  });
-};
-const formatDatetime = (dt: Date | string | number) => {
-  let _dt = dt as number;
-  if (typeof dt === "string") {
-    _dt = Date.parse(dt);
+  })
+}
+function formatDatetime(dt: Date | string | number) {
+  let _dt = dt as number
+  if (typeof dt === 'string') {
+    _dt = Date.parse(dt)
     if (Number.isNaN(_dt)) {
-      _dt = parseInt(dt);
+      _dt = Number.parseInt(dt)
     }
   }
-  const translate = useTranslation();
-  return translate("global_datetime", {
+  const translate = useTranslation()
+  return translate('global_datetime', {
     val: new Date(_dt),
     formatParams: {
       val: {
-        year: "numeric",
-        month: "long",
-        day: "numeric",
-        hour: "numeric",
-        minute: "numeric",
-        second: "numeric",
+        year: 'numeric',
+        month: 'long',
+        day: 'numeric',
+        hour: 'numeric',
+        minute: 'numeric',
+        second: 'numeric',
       },
     },
-  });
-};
-const formatTimeago = (dt: Date | string | number) => {
-  let _dt = dt as number;
-  if (typeof dt === "string") {
-    _dt = Date.parse(dt);
+  })
+}
+function formatTimeago(dt: Date | string | number) {
+  let _dt = dt as number
+  if (typeof dt === 'string') {
+    _dt = Date.parse(dt)
     if (Number.isNaN(_dt)) {
-      _dt = parseInt(dt);
+      _dt = Number.parseInt(dt)
     }
   }
-  return formatDateTimeago(new Date(_dt), getLocale().replace("_", "-"));
-};
+  return formatDateTimeago(new Date(_dt), getLocale().replace('_', '-'))
+}
 
 export {
   cropText,
@@ -91,4 +91,4 @@ export {
   formatDatetime,
   formatTimeago,
   getContrastingTextColor,
-};
+}

package/composables/translations.ts

@@ -1,29 +1,29 @@
-import type { TFunction } from "i18next";
-import i18next from "i18next";
-import { inject } from "vue";
-import { I18nBackend } from "@fy-/fws-js";
+import type { I18nBackend } from '@fy-/fws-js'
+import type { TFunction } from 'i18next'
+import i18next from 'i18next'
+import { inject } from 'vue'
 
-export type I18nextTranslate = typeof i18next.t;
+export type I18nextTranslate = typeof i18next.t
 
 export function useTranslation() {
-  const translate = inject<TFunction>("fwsVueTranslate");
-  if (!translate) throw new Error("Did you apply app.use(fwsVue)?");
+  const translate = inject<TFunction>('fwsVueTranslate')
+  if (!translate) throw new Error('Did you apply app.use(fwsVue)?')
 
-  return translate;
+  return translate
 }
 
 export function i18nextPromise(
   backend: typeof I18nBackend,
-  locale: string = "en-US",
+  locale: string = 'en-US',
   debug: boolean = false,
-  ns: string = "translation",
+  ns: string = 'translation',
 ) {
   return i18next.use(backend).init({
     ns: [ns],
     defaultNS: ns,
-    debug: debug,
+    debug,
     lng: locale,
-    load: "currentOnly",
+    load: 'currentOnly',
     initImmediate: false,
-  });
+  })
 }

package/env.d.ts

@@ -1,6 +1,8 @@
 /// <reference types="vite/client" />
-declare module "*.vue" {
-  import type { DefineComponent } from "vue";
-  const component: DefineComponent<{}, {}, any>;
-  export default component;
+declare module '*.vue' {
+  import type { DefineComponent } from 'vue'
+
+  // eslint-disable-next-line ts/no-empty-object-type
+  const component: DefineComponent<{}, {}, any>
+  export default component
 }