dn-react-router-toolkit 0.1.6 → 0.1.8

package/dist/seo-kit/seo.mjs

@@ -1,249 +1,257 @@
 // src/seo-kit/seo.tsx
 import React from "react";
+import { useMatches } from "react-router";
 function configSEO(config) {
-  return {
-    config,
-    async init(props = {}) {
-      const canonicalPath = props.canonicalPath;
-      const url = canonicalPath ? `${config.origin}${canonicalPath}` : `${config.origin}${props.path || ""}`;
-      const pageTitle = props.title ? `${props.title} | ${config.siteName}` : config.siteName;
-      const description = props.description || config.description;
-      const keywords = props.keywords || config.keywords;
-      const websiteSchemaId = `${config.origin}/#website`;
-      const websiteSchema = {
-        "@type": "WebSite",
-        "@id": websiteSchemaId,
-        url: config.origin,
-        name: config.siteName,
-        alternateName: config.siteName,
-        description: config.description,
-        inLanguage: "ko"
+  function init(props) {
+    const canonicalPath = props.canonicalPath;
+    const url = canonicalPath ? `${config.origin}${canonicalPath === "/" ? "" : canonicalPath}` : `${config.origin}${props.path || ""}`;
+    const pageTitle = props.title ? `${props.title} | ${config.siteName}` : config.siteName;
+    const description = props.description || config.description;
+    const keywords = props.keywords || config.keywords;
+    const thumbnail = props.thumbnail || (typeof config.thumbnail === "function" ? config.thumbnail() : config.thumbnail);
+    return {
+      pageTitle,
+      type: props.type,
+      description,
+      keywords,
+      url,
+      thumbnail
+    };
+  }
+  const meta = ({ loaderData }) => {
+    const props = loaderData?.seo || {};
+    const { pageTitle, type, description, keywords, url, thumbnail } = props;
+    const socialImage = thumbnail ? [
+      typeof thumbnail === "string" ? {
+        url: thumbnail,
+        alt: `${props.title} \uB300\uD45C \uC774\uBBF8\uC9C0`
+      } : thumbnail
+    ] : [];
+    return [
+      pageTitle && { title: pageTitle },
+      description && { name: "description", content: description },
+      keywords && { name: "keywords", content: keywords.join(", ") },
+      url && {
+        tagName: "link",
+        rel: "canonical",
+        href: url
+      },
+      { property: "og:type", content: type || "website" },
+      pageTitle && { property: "og:title", content: pageTitle },
+      description && { property: "og:description", content: description },
+      url && { property: "og:url", content: url },
+      { property: "og:site_name", content: config.siteName },
+      ...socialImage?.map((file) => ({
+        property: "og:image",
+        content: file.url
+      })),
+      {
+        property: "twitter:card",
+        content: socialImage.length > 0 ? "summary_large_image" : "summary"
+      },
+      pageTitle && { property: "twitter:title", content: pageTitle },
+      description && { property: "twitter:description", content: description },
+      ...socialImage?.map((file) => ({
+        property: "twitter:image",
+        content: file.url
+      }))
+    ];
+  };
+  function StructedData() {
+    const matches = useMatches();
+    const data = matches.reduce((acc, match) => {
+      return {
+        ...acc,
+        ...match.loaderData?.seo || {}
       };
-      const thumbnailSchemaId = `${url}/#thumbnail`;
-      const thumbnail = props.thumbnail || (typeof config.thumbnail === "function" ? await config.thumbnail() : config.thumbnail);
-      const thumbnailUrl = thumbnail?.url;
-      const socialImage = thumbnail ? [
-        typeof thumbnail === "string" ? {
-          url: thumbnail,
+    }, {});
+    const { pageTitle, description, keywords, url, thumbnail } = data;
+    const thumbnailUrl = thumbnail?.url;
+    const props = data?.seo || {};
+    const websiteSchemaId = `${config.origin}/#website`;
+    const websiteSchema = {
+      "@type": "WebSite",
+      "@id": websiteSchemaId,
+      url: config.origin,
+      name: config.siteName,
+      alternateName: config.siteName,
+      description: config.description,
+      inLanguage: "ko"
+    };
+    const thumbnailSchemaId = `${url}/#thumbnail`;
+    const images = [
+      ...thumbnailUrl ? [
+        {
+          id: thumbnailSchemaId,
+          url: thumbnailUrl,
           alt: `${props.title} \uB300\uD45C \uC774\uBBF8\uC9C0`
-        } : thumbnail
-      ] : [];
-      const images = [
-        ...thumbnailUrl ? [
-          {
-            id: thumbnailSchemaId,
-            url: thumbnailUrl,
-            alt: `${props.title} \uB300\uD45C \uC774\uBBF8\uC9C0`
-          }
-        ] : [],
-        ...props.images || [],
-        ...props.collection?.map((portfolio) => portfolio.thumbnail) || []
-      ].filter(Boolean);
-      const image = images.filter((file) => file.id).map((file) => ({
-        "@type": "ImageObject",
-        "@id": `${url}/#${file.id}`
-      }));
-      const breadcrumbSchemaId = `${url}#breadcrumb`;
-      const updatedAt = props.updatedAt;
-      const createdAt = props.createdAt;
-      const meta = () => {
-        return [
-          { title: pageTitle },
-          { name: "description", content: description },
-          { name: "keywords", content: keywords?.join(", ") || "" },
-          {
-            tagName: "link",
-            rel: "canonical",
-            href: url
+        }
+      ] : [],
+      ...props.images || [],
+      ...props.collection?.map((portfolio) => portfolio.thumbnail) || []
+    ].filter(Boolean);
+    const image = images.filter((file) => file.id).map((file) => ({
+      "@type": "ImageObject",
+      "@id": `${url}/#${file.id}`
+    }));
+    const breadcrumbSchemaId = `${url}#breadcrumb`;
+    const updatedAt = props.updatedAt;
+    const createdAt = props.createdAt;
+    const additionalStructedData = [
+      ...typeof props.structedData === "function" ? props.structedData() : props.structedData || [],
+      ...typeof config.structedData === "function" ? config.structedData() : config.structedData || []
+    ];
+    const collectionMainEntity = props.collection ? {
+      "@type": "ItemList",
+      numberOfItems: props.collection.length,
+      itemListElement: props.collection.map((item, index) => ({
+        "@type": "ListItem",
+        position: index + 1,
+        url: item.url,
+        item: {
+          "@type": "WebPage",
+          "@id": `${item.url}#webpage`,
+          url: item.url,
+          name: item.title,
+          thumbnailUrl: item.thumbnail?.url,
+          dateModified: item.updatedAt?.toISOString(),
+          dateCreated: item.createdAt?.toISOString(),
+          datePublished: item.createdAt?.toISOString()
+        }
+      }))
+    } : void 0;
+    const structuredData = {
+      "@context": "https://schema.org",
+      "@graph": [
+        {
+          "@type": "WebPage",
+          "@id": `${url}#webpage`,
+          url,
+          name: pageTitle,
+          description,
+          keywords,
+          dateModified: updatedAt?.toISOString(),
+          datePublished: createdAt?.toISOString(),
+          dateCreated: createdAt?.toISOString(),
+          primaryImageOfPage: thumbnail ? {
+            "@id": thumbnailSchemaId
+          } : void 0,
+          isPartOf: {
+            "@id": websiteSchemaId
           },
-          { property: "og:type", content: props.type || "website" },
-          { property: "og:title", content: pageTitle },
-          { property: "og:description", content: description },
-          { property: "og:url", content: url },
-          { property: "og:site_name", content: config.siteName },
-          ...socialImage.map((file) => ({
-            property: "og:image",
-            content: file.url
-          })),
-          {
-            property: "twitter:card",
-            content: socialImage.length > 0 ? "summary_large_image" : "summary"
+          inLanguage: "ko",
+          breadcrumb: props.breadcrumbs && props.breadcrumbs.length > 0 ? {
+            "@id": breadcrumbSchemaId
+          } : void 0,
+          image,
+          mainEntity: collectionMainEntity
+        },
+        props.article && {
+          "@type": "Article",
+          "@id": `${url}#article`,
+          url,
+          name: pageTitle,
+          description,
+          keywords,
+          headline: pageTitle,
+          dateModified: updatedAt?.toISOString(),
+          datePublished: createdAt?.toISOString(),
+          dateCreated: createdAt?.toISOString(),
+          isPartOf: {
+            "@id": websiteSchemaId
           },
-          { property: "twitter:title", content: pageTitle },
-          { property: "twitter:description", content: description },
-          ...socialImage.map((file) => ({
-            property: "twitter:image",
-            content: file.url
-          }))
-        ];
-      };
-      const additionalStructedData = [
-        ...typeof props.structedData === "function" ? await props.structedData() : props.structedData || [],
-        ...typeof config.structedData === "function" ? await config.structedData() : config.structedData || []
-      ];
-      function getStructedData() {
-        const collectionMainEntity = props.collection ? {
-          "@type": "ItemList",
-          numberOfItems: props.collection.length,
-          itemListElement: props.collection.map((item, index) => ({
-            "@type": "ListItem",
-            position: index + 1,
-            url: item.url,
-            item: {
-              "@type": "WebPage",
-              "@id": `${item.url}#webpage`,
-              url: item.url,
-              name: item.title,
-              thumbnailUrl: item.thumbnail?.url,
-              dateModified: item.updatedAt?.toISOString(),
-              dateCreated: item.createdAt?.toISOString(),
-              datePublished: item.createdAt?.toISOString()
-            }
-          }))
-        } : void 0;
-        return {
-          "@context": "https://schema.org",
-          "@graph": [
-            {
-              "@type": "WebPage",
-              "@id": `${url}#webpage`,
-              url,
-              name: pageTitle,
-              description,
-              keywords,
-              dateModified: updatedAt?.toISOString(),
-              datePublished: createdAt?.toISOString(),
-              dateCreated: createdAt?.toISOString(),
-              primaryImageOfPage: thumbnail ? {
-                "@id": thumbnailSchemaId
-              } : void 0,
-              isPartOf: {
-                "@id": websiteSchemaId
-              },
-              inLanguage: "ko",
-              breadcrumb: props.breadcrumbs && props.breadcrumbs.length > 0 ? {
-                "@id": breadcrumbSchemaId
-              } : void 0,
-              image,
-              mainEntity: collectionMainEntity
-            },
-            props.article && {
-              "@type": "Article",
-              "@id": `${url}#article`,
-              url,
-              name: pageTitle,
-              description,
-              keywords,
-              headline: pageTitle,
-              dateModified: updatedAt?.toISOString(),
-              datePublished: createdAt?.toISOString(),
-              dateCreated: createdAt?.toISOString(),
-              isPartOf: {
-                "@id": websiteSchemaId
-              },
-              inLanguage: "ko",
-              image
-            },
-            props.blogPosting && {
-              "@type": "BlogPosting",
-              "@id": `${url}/#blogposting`,
-              url,
-              headline: pageTitle,
-              description,
-              thumbnailUrl,
-              datePublished: createdAt?.toISOString(),
-              dateModified: updatedAt?.toISOString(),
-              isPartOf: { "@id": websiteSchemaId },
-              image
-            },
-            props.creativeWork && {
-              "@type": "CreativeWork",
-              "@id": `${url}/#creativework`,
-              url,
-              name: pageTitle,
-              description,
-              datePublished: createdAt?.toISOString(),
-              dateModified: updatedAt?.toISOString(),
-              isPartOf: { "@id": websiteSchemaId },
-              thumbnailUrl,
-              image
-            },
-            props.visualArtwork && {
-              "@type": "VisualArtwork",
-              "@id": `${url}/#visualartwork`,
-              url,
-              name: pageTitle,
-              description,
-              datePublished: createdAt?.toISOString(),
-              dateModified: updatedAt?.toISOString(),
-              isPartOf: { "@id": websiteSchemaId },
-              thumbnailUrl,
-              image
-            },
-            props.collection && {
-              "@type": "CollectionPage",
-              "@id": `${url}/#collectionpage`,
-              url,
-              name: pageTitle,
-              description,
-              isPartOf: { "@id": websiteSchemaId },
-              image,
-              inLanguage: "ko-KR",
-              breadcrumb: props.breadcrumbs && props.breadcrumbs.length > 0 ? {
-                "@id": `${url}/#breadcrumb`
-              } : void 0,
-              mainEntity: collectionMainEntity
-            },
-            websiteSchema,
-            props.breadcrumbs && props.breadcrumbs.length > 0 && {
-              "@id": breadcrumbSchemaId,
-              "@type": "BreadcrumbList",
-              itemListElement: props.breadcrumbs.map((breadcrumb, index) => ({
-                "@type": "ListItem",
-                position: index + 1,
-                name: breadcrumb.label,
-                item: `${config.origin}${breadcrumb.href}`
-              }))
-            },
-            ...additionalStructedData,
-            ...images.map((file) => {
-              return {
-                "@type": "ImageObject",
-                "@id": `${url}/#${file.id}`,
-                url: file.url,
-                contentUrl: file.url,
-                name: file.alt,
-                description: file.alt,
-                width: file?.width?.toString(),
-                height: file?.height?.toString(),
-                creditText: config.copyright,
-                license: `${config.origin}/terms`,
-                copyrightNotice: config.copyright,
-                acquireLicensePage: `${config.origin}/terms`
-              };
+          inLanguage: "ko",
+          image
+        },
+        props.blogPosting && {
+          "@type": "BlogPosting",
+          "@id": `${url}/#blogposting`,
+          url,
+          headline: pageTitle,
+          description,
+          thumbnailUrl,
+          datePublished: createdAt?.toISOString(),
+          dateModified: updatedAt?.toISOString(),
+          isPartOf: { "@id": websiteSchemaId },
+          image
+        },
+        props.creativeWork && {
+          "@type": "CreativeWork",
+          "@id": `${url}/#creativework`,
+          url,
+          name: pageTitle,
+          description,
+          datePublished: createdAt?.toISOString(),
+          dateModified: updatedAt?.toISOString(),
+          isPartOf: { "@id": websiteSchemaId },
+          thumbnailUrl,
+          image
+        },
+        props.visualArtwork && {
+          "@type": "VisualArtwork",
+          "@id": `${url}/#visualartwork`,
+          url,
+          name: pageTitle,
+          description,
+          datePublished: createdAt?.toISOString(),
+          dateModified: updatedAt?.toISOString(),
+          isPartOf: { "@id": websiteSchemaId },
+          thumbnailUrl,
+          image
+        },
+        props.collection && {
+          "@type": "CollectionPage",
+          "@id": `${url}/#collectionpage`,
+          url,
+          name: pageTitle,
+          description,
+          isPartOf: { "@id": websiteSchemaId },
+          image,
+          inLanguage: "ko-KR",
+          breadcrumb: props.breadcrumbs && props.breadcrumbs.length > 0 ? {
+            "@id": `${url}/#breadcrumb`
+          } : void 0,
+          mainEntity: collectionMainEntity
+        },
+        websiteSchema,
+        props.breadcrumbs && props.breadcrumbs.length > 0 && {
+          "@id": breadcrumbSchemaId,
+          "@type": "BreadcrumbList",
+          itemListElement: props.breadcrumbs.map(
+            (breadcrumb, index) => ({
+              "@type": "ListItem",
+              position: index + 1,
+              name: breadcrumb.title,
+              item: `${config.origin}${breadcrumb.href}`
             })
-          ].filter(Boolean)
-        };
-      }
-      function generateJSONLD() {
-        const structedData = getStructedData();
-        return /* @__PURE__ */ React.createElement(
-          "script",
-          {
-            type: "application/ld+json",
-            dangerouslySetInnerHTML: {
-              __html: JSON.stringify(structedData).replace(/</g, "\\u003c")
-            }
-          }
-        );
-      }
-      return {
-        config,
-        props,
-        meta,
-        generateJSONLD
-      };
-    }
+          )
+        },
+        ...additionalStructedData,
+        ...images.map((file) => {
+          return {
+            "@type": "ImageObject",
+            "@id": `${url}/#${file.id}`,
+            url: file.url,
+            contentUrl: file.url,
+            name: file.alt,
+            description: file.alt,
+            width: file?.width?.toString(),
+            height: file?.height?.toString(),
+            creditText: config.copyright,
+            license: `${config.origin}/terms`,
+            copyrightNotice: config.copyright,
+            acquireLicensePage: `${config.origin}/terms`
+          };
+        })
+      ].filter(Boolean)
+    };
+    return /* @__PURE__ */ React.createElement("script", { type: "application/ld+json" }, JSON.stringify(structuredData));
+  }
+  return {
+    config,
+    init,
+    meta,
+    StructedData
   };
 }
 export {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dn-react-router-toolkit",
-  "version": "0.1.6",
+  "version": "0.1.8",
   "types": "./dist/index.d.ts",
   "main": "./dist/index.mjs",
   "module": "./dist/index.js",

package/dist/seo-kit/index.d.mts

@@ -1,6 +0,0 @@
-export { LoaderFn, createLoader } from './loader.mjs';
-export { createSEOLoader } from './seo_loader.mjs';
-export { SEO, SEOImage, configSEO } from './seo.mjs';
-import 'react-router';
-import 'react';
-import 'schema-dts';

package/dist/seo-kit/index.d.ts

@@ -1,6 +0,0 @@
-export { LoaderFn, createLoader } from './loader.js';
-export { createSEOLoader } from './seo_loader.js';
-export { SEO, SEOImage, configSEO } from './seo.js';
-import 'react-router';
-import 'react';
-import 'schema-dts';