dn-react-router-toolkit 0.1.1 → 0.1.2

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

@@ -0,0 +1,103 @@
+import * as Schema from 'schema-dts';
+import React from 'react';
+import { MetaFunction } from 'react-router';
+
+type SEOImage = {
+    id?: string;
+    url: string;
+    alt?: string;
+    width?: number;
+    height?: number;
+};
+type SEO = Awaited<ReturnType<ReturnType<typeof configSEO>["init"]>>;
+declare function configSEO(config: {
+    origin: string;
+    siteName: string;
+    description: string;
+    keywords?: string[];
+    thumbnail?: SEOImage | (() => SEOImage | null | Promise<SEOImage | null>);
+    structedData?: Schema.Thing[] | (() => Schema.Thing[] | Promise<Schema.Thing[]>);
+    copyright?: string;
+}): {
+    config: {
+        origin: string;
+        siteName: string;
+        description: string;
+        keywords?: string[];
+        thumbnail?: SEOImage | (() => SEOImage | null | Promise<SEOImage | null>);
+        structedData?: Schema.Thing[] | (() => Schema.Thing[] | Promise<Schema.Thing[]>);
+        copyright?: string;
+    };
+    init(props?: {
+        title?: string;
+        description?: string;
+        keywords?: string[];
+        path?: string;
+        type?: string;
+        canonicalPath?: string;
+        breadcrumbs?: {
+            label: string;
+            href: string;
+        }[];
+        thumbnail?: SEOImage;
+        images?: SEOImage[];
+        updatedAt?: Date;
+        createdAt?: Date;
+        structedData?: Schema.Thing[] | (() => Schema.Thing[] | Promise<Schema.Thing[]>);
+        article?: boolean;
+        blogPosting?: boolean;
+        creativeWork?: boolean;
+        visualArtwork?: boolean;
+        collection?: {
+            title: string;
+            url: string;
+            description?: string;
+            thumbnail?: SEOImage;
+            updatedAt?: Date;
+            createdAt?: Date;
+        }[];
+    }): Promise<{
+        config: {
+            origin: string;
+            siteName: string;
+            description: string;
+            keywords?: string[];
+            thumbnail?: SEOImage | (() => SEOImage | null | Promise<SEOImage | null>);
+            structedData?: Schema.Thing[] | (() => Schema.Thing[] | Promise<Schema.Thing[]>);
+            copyright?: string;
+        };
+        props: {
+            title?: string;
+            description?: string;
+            keywords?: string[];
+            path?: string;
+            type?: string;
+            canonicalPath?: string;
+            breadcrumbs?: {
+                label: string;
+                href: string;
+            }[];
+            thumbnail?: SEOImage;
+            images?: SEOImage[];
+            updatedAt?: Date;
+            createdAt?: Date;
+            structedData?: Schema.Thing[] | (() => Schema.Thing[] | Promise<Schema.Thing[]>);
+            article?: boolean;
+            blogPosting?: boolean;
+            creativeWork?: boolean;
+            visualArtwork?: boolean;
+            collection?: {
+                title: string;
+                url: string;
+                description?: string;
+                thumbnail?: SEOImage;
+                updatedAt?: Date;
+                createdAt?: Date;
+            }[];
+        };
+        meta: MetaFunction<unknown, Record<string, unknown>>;
+        generateJSONLD: () => React.JSX.Element;
+    }>;
+};
+
+export { type SEO, type SEOImage, configSEO };

package/dist/{esm/seo-kit → seo-kit}/seo.d.ts

@@ -1,14 +1,16 @@
-import * as Schema from "schema-dts";
-import type { MetaFunction } from "react-router";
-export type SEOImage = {
+import * as Schema from 'schema-dts';
+import React from 'react';
+import { MetaFunction } from 'react-router';
+
+type SEOImage = {
     id?: string;
     url: string;
     alt?: string;
     width?: number;
     height?: number;
 };
-export type SEO = Awaited<ReturnType<ReturnType<typeof configSEO>["init"]>>;
-export declare function configSEO(config: {
+type SEO = Awaited<ReturnType<ReturnType<typeof configSEO>["init"]>>;
+declare function configSEO(config: {
     origin: string;
     siteName: string;
     description: string;
@@ -94,6 +96,8 @@ export declare function configSEO(config: {
             }[];
         };
         meta: MetaFunction<unknown, Record<string, unknown>>;
-        generateJSONLD: () => import("react/jsx-runtime").JSX.Element;
+        generateJSONLD: () => React.JSX.Element;
     }>;
 };
+
+export { type SEO, type SEOImage, configSEO };

package/dist/seo-kit/seo.js

@@ -0,0 +1,286 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/seo-kit/seo.tsx
+var seo_exports = {};
+__export(seo_exports, {
+  configSEO: () => configSEO
+});
+module.exports = __toCommonJS(seo_exports);
+var import_react = __toESM(require("react"));
+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"
+      };
+      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,
+          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
+          },
+          { 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"
+          },
+          { 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`
+              };
+            })
+          ].filter(Boolean)
+        };
+      }
+      function generateJSONLD() {
+        const structedData = getStructedData();
+        return /* @__PURE__ */ import_react.default.createElement(
+          "script",
+          {
+            type: "application/ld+json",
+            dangerouslySetInnerHTML: {
+              __html: JSON.stringify(structedData).replace(/</g, "\\u003c")
+            }
+          }
+        );
+      }
+      return {
+        config,
+        props,
+        meta,
+        generateJSONLD
+      };
+    }
+  };
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  configSEO
+});

package/dist/seo-kit/seo.mjs

@@ -0,0 +1,251 @@
+// src/seo-kit/seo.tsx
+import React from "react";
+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"
+      };
+      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,
+          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
+          },
+          { 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"
+          },
+          { 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`
+              };
+            })
+          ].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
+      };
+    }
+  };
+}
+export {
+  configSEO
+};

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

@@ -0,0 +1,16 @@
+import { LoaderFn } from './loader.mjs';
+import * as react_router from 'react-router';
+import React, { JSX } from 'react';
+import { SEO } from './seo.mjs';
+import 'schema-dts';
+
+declare function createSEOLoader<T, U extends JSX.IntrinsicAttributes & {
+    seo: SEO;
+}>(fn?: LoaderFn<T, U>): {
+    meta: (props: T) => Promise<react_router.MetaFunction<unknown, Record<string, unknown>>>;
+    Page(Fc: React.FC<U>): (props: T) => Promise<JSX.Element>;
+    getData(): U;
+    wrap<V>(mapper: (props: U) => V | Promise<V>): (props: T) => Promise<V>;
+};
+
+export { createSEOLoader };