@fy-/fws-vue 1.8.8 → 1.9.0

package/components/ui/DefaultBreadcrumb.vue

@@ -1,8 +1,9 @@
 <script lang="ts" setup>
 import { HomeIcon, ChevronRightIcon } from "@heroicons/vue/24/solid";
 import type { BreadcrumbLink } from "../../types";
+import { defineBreadcrumb, useSchemaOrg } from "@unhead/schema-org";
 
-withDefaults(
+const props = withDefaults(
   defineProps<{
     nav: BreadcrumbLink[];
     showHome: Boolean;
@@ -12,23 +13,26 @@ withDefaults(
     showHome: () => true,
   },
 );
+
+const breadcrumbsSchemaFormat = props.nav.map((item, index) => {
+  return {
+    position: index + 1,
+    name: item.name,
+    item: item.to,
+  };
+});
+
+useSchemaOrg([
+  defineBreadcrumb({
+    itemListElement: breadcrumbsSchemaFormat,
+  }),
+]);
 </script>
 
 <template>
-  <ol
-    class="inline-flex items-center flex-wrap"
-    itemscope
-    itemtype="https://schema.org/BreadcrumbList"
-  >
+  <ol class="inline-flex items-center flex-wrap">
     <template v-for="(item, index) in nav" :key="`bc_${index.toString()}`">
-      <li
-        class="inline-flex items-center"
-        itemprop="itemListElement"
-        itemscope
-        itemtype="https://schema.org/ListItem"
-      >
-        <meta itemprop="position" :content="(index + 1).toString()" />
-
+      <li class="inline-flex items-center">
         <ChevronRightIcon
           v-if="index != 0"
           :class="
@@ -46,7 +50,6 @@ withDefaults(
               ? 'text-xs font-medium text-fv-neutral-700 hover:text-fv-neutral-900 dark:text-fv-neutral-200 dark:hover:text-white'
               : 'text-xs font-medium text-fv-neutral-700 hover:text-fv-neutral-900 dark:text-fv-neutral-200 dark:hover:text-white'
           "
-          itemprop="item"
         >
           <HomeIcon
             v-if="showHome && index === 0"
@@ -56,12 +59,11 @@ withDefaults(
                 : 'w-4 h-4 text-fv-neutral-400 inline-block mx-0.5 md:mx-1.5'
             "
           />
-          <span itemprop="name">{{ item.name }}</span>
+          <span>{{ item.name }}</span>
         </router-link>
         <span
           v-else
           class="text-xs font-medium text-fv-neutral-500 dark:text-fv-neutral-200"
-          itemprop="name"
         >
           {{ item.name }}
         </span>

package/composables/seo.ts

@@ -1,6 +1,6 @@
 // @ts-nocheck
 import type { Ref } from "vue";
-import { useHead } from "@unhead/vue";
+import { useSeo, useSeoMeta } from "@unhead/vue";
 import { getURL, getLocale, getPrefix } from "@fy-/fws-js";
 import { useRoute } from "vue-router";
 
@@ -31,8 +31,7 @@ export const useSeo = (seo: Ref<LazyHead>, initial: boolean = false) => {
   const route = useRoute();
   const currentLocale = seo.value.locale || getLocale();
   const url = getURL();
-  useHead({
-    title: () => seo.value.title || "",
+  useSeo({
     link: () => {
       const links: any[] = [];
 
@@ -69,100 +68,29 @@ export const useSeo = (seo: Ref<LazyHead>, initial: boolean = false) => {
 
       return links;
     },
-    meta: () => {
-      const metas: any[] = [];
-      // @ts-ignore
-      metas.push(
-        { property: "og:locale", content: currentLocale },
-        {
-          property: "og:url",
-          key: "og:url",
-          content: seo.value.url
-            ? seo.value.url
-            : `${getURL().Scheme}://${getURL().Host}${route.fullPath}`,
-        },
-        {
-          property: "og:type",
-          content: seo.value.type || "website",
-          key: "og:type",
-        },
-        {
-          name: "robots",
-          content:
-            "index, follow, max-image-preview:large, max-snippet:-1, max-video-preview:-1",
-          key: "robots",
-        },
-      );
-
-      if (seo.value.isAdult) {
-        // @ts-ignore
-        metas.push(
-          { name: "rating", content: "adult", key: "rating" },
-          {
-            name: "RATING",
-            content: "RTA-5042-1996-1400-1577-RTA",
-            key: "RTA",
-          },
-          { property: "rating", content: "adult", key: "rating-property" },
-          {
-            property: "RATING",
-            content: "RTA-5042-1996-1400-1577-RTA",
-            key: "RTA-property",
-          },
-        );
-      }
-
-      const metaPairs = [
-        ["name", "og:site_name"],
-        ["title", "og:title", "twitter:title"],
-        ["description", "og:description", "twitter:description"],
-        ["published", "article:published_time"],
-        ["modified", "article:modified_time"],
-        ["imageWidth", "og:image:width"],
-        ["imageHeight", "og:image:height"],
-        ["imageType", "og:image:type", "twitter:image:type"],
-        ["image", "og:image", "twitter:image"],
-        ["keywords"],
-      ];
-
-      metaPairs.forEach(([seoKey, ...properties]) => {
-        const seoValue = seo.value[seoKey as keyof LazyHead];
-
-        if (seoValue !== undefined && seoValue !== null && seoValue !== "") {
-          properties.forEach((property) => {
-            if (
-              property === "description" ||
-              property === "keywords" ||
-              property.startsWith("twitter")
-            ) {
-              // @ts-ignore
-              metas.push({
-                name: property,
-                content: seoValue,
-                key: property,
-              });
-            } else {
-              // @ts-ignore
-              metas.push({
-                property,
-                content: seoValue as string,
-                key: property,
-              });
-            }
-          });
-        }
-      });
-
-      if (seo.value.description) {
-        // @ts-ignore
-        metas.push({
-          name: "description",
-          content: seo.value.description,
-          key: "description",
-        });
-      }
+  });
 
-      return metas;
-    },
+  useSeoMeta({
+    url: seo.value.url
+      ? seo.value.url
+      : `${getURL().Scheme}://${getURL().Host}${route.fullPath}`,
+    robots:
+      "index, follow, max-image-preview:large, max-snippet:-1, max-video-preview:-1",
+    title: () => seo.value.title,
+    rating: seo.value.isAdult ? "adult" : undefined,
+    RATING: seo.value.isAdult ? "adult" : undefined,
+    ogTitle: () => seo.value.title,
+    ogDescription: () => seo.value.description,
+    ogImage: () => seo.value.image || undefined,
+    ogImageType: () => seo.value.imageType || undefined,
+    ogImageWidth: () => seo.value.imageWidth || undefined,
+    ogImageHeight: () => seo.value.imageHeight || undefined,
+    twitterCard: "summary_large_image",
+    twitterTitle: () => seo.value.title,
+    twitterDescription: () => seo.value.description,
+    twitterImage: () => seo.value.image || undefined,
+    twitterImageAlt: () => seo.value.title,
+    description: () => seo.value.description || undefined,
+    keywords: () => seo.value.keywords?.split(",") || undefined,
   });
 };

package/composables/ssr.ts

@@ -14,6 +14,7 @@ export interface SSRResult {
   meta?: string;
   link?: string;
   bodyAttributes?: string;
+  bodyTagsOpen?: string;
   htmlAttributes?: string;
   bodyTags?: string;
   app?: string;
@@ -71,6 +72,7 @@ export async function initVueServer(
     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)) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fy-/fws-vue",
-  "version": "1.8.8",
+  "version": "1.9.0",
   "author": "Florian 'Fy' Gasquez <m@fy.to>",
   "license": "MIT",
   "repository": {
@@ -31,6 +31,7 @@
     "@fy-/fws-types": "^0.0.x",
     "@unhead/ssr": "^1.9.x",
     "@unhead/vue": "^1.9.x",
+    "@unhead/schema-org": "1.9.x",
     "@vuelidate/core": "^2.0.x",
     "@vuelidate/validators": "^2.0.x",
     "@vueuse/core": "^10.x.x",