nextjs-link-preview 1.0.5 → 1.0.6

package/README.md

@@ -1,133 +1,187 @@
-# Next.js Link Preview
-
-A Next.js component for generating beautiful link preview cards with server-side metadata fetching.
-
-**No CORS issues** - Works with GitHub, Twitter, Reddit, and any public URL!
-
-## Features
-
-- ✅ Server-side fetching via Next.js API routes (no CORS!)
-- ✅ Automatic Open Graph and meta tag extraction
-- ✅ Built-in caching (1-hour TTL) to reduce server load and prevent rate limiting
-- ✅ Three size variants (small, medium, large)
-- ✅ Two layouts (vertical, horizontal)
-- ✅ TypeScript support
-- ✅ Loading and error states
-- ✅ Fully customizable styling
-
-## Installation
-
-```bash
-npm install nextjs-link-preview axios cheerio
-```
-
-## Setup
-
-Run the setup command to create the API route:
-
-```bash
-npx nextjs-link-preview
-```
-
-This creates the API route at `src/app/api/preview/route.ts` (or `app/api/preview/route.ts` depending on your project structure).
-
-## Usage
-
-```tsx
-import { LinkPreview } from "nextjs-link-preview";
-
-export default function Page() {
-  return <LinkPreview url="https://github.com" />;
-}
-```
-
-That's it! The component handles everything automatically.
-
-## Examples
-
-### Size Variants
-
-```tsx
-<LinkPreview url="https://github.com" size="small" />
-<LinkPreview url="https://github.com" size="medium" /> {/* default */}
-<LinkPreview url="https://github.com" size="large" />
-```
-
-### Layouts
-
-```tsx
-<LinkPreview url="https://github.com" layout="vertical" /> {/* default */}
-<LinkPreview url="https://github.com" layout="horizontal" />
-```
-
-### With Callbacks
-
-```tsx
-<LinkPreview
-  url="https://github.com"
-  onLoad={(data) => console.log("Loaded:", data)}
-  onError={(error) => console.error("Error:", error)}
-/>
-```
-
-### Custom Styling
-
-```tsx
-<LinkPreview url="https://github.com" width="400px" className="my-custom-class" />
-```
-
-## Props
-
-| Prop          | Type                                 | Default          | Description                |
-| ------------- | ------------------------------------ | ---------------- | -------------------------- |
-| `url`         | `string`                             | **required**     | URL to preview             |
-| `size`        | `"small"` \| `"medium"` \| `"large"` | `"medium"`       | Preview card size          |
-| `layout`      | `"vertical"` \| `"horizontal"`       | `"vertical"`     | Image position             |
-| `width`       | `string` \| `number`                 | `"100%"`         | Card width                 |
-| `height`      | `string` \| `number`                 | `"auto"`         | Card height                |
-| `className`   | `string`                             | `""`             | CSS class name             |
-| `apiEndpoint` | `string`                             | `"/api/preview"` | Custom API route path      |
-| `onLoad`      | `(data) => void`                     | `undefined`      | Called when metadata loads |
-| `onError`     | `(error) => void`                    | `undefined`      | Called when loading fails  |
-
-## Development
-
-```bash
-# Run demo
-npm run demo
-
-# Build package
-npm run build
-
-# Format code
-npm run format
-```
-
-## How It Works
-
-1. **API Route**: Next.js API route fetches HTML server-side (no CORS!)
-2. **Caching**: In-memory cache with 1-hour TTL reduces redundant requests and prevents rate limiting
-3. **Metadata Extraction**: Cheerio parses Open Graph and meta tags
-4. **Component**: React component displays the preview card
-
-### Caching Behavior
-
-The API route includes built-in caching to improve performance and prevent websites from blocking automated requests:
-
-- **Cache Duration**: 1 hour (3600 seconds)
-- **Cache Type**: In-memory Map (resets on server restart)
-- **Benefits**:
-  - Reduces server load and response time for frequently accessed URLs
-  - Prevents rate limiting from target websites
-  - Improves user experience with faster previews
-
-If you need to customize the cache TTL, you can modify the `CACHE_TTL` constant in your generated API route file.
-
-## License
-
-MIT
-
-## Links
-
-- [GitHub](https://github.com/sethcarney/nextjs-link-preview)
-- [npm](https://www.npmjs.com/package/nextjs-link-preview)
+# Next.js Link Preview
+
+A simple, lightweight Next.js component for displaying beautiful link preview cards.
+
+## Quick Start
+
+```bash
+npm install nextjs-link-preview
+```
+
+```tsx
+import { LinkPreview } from "nextjs-link-preview";
+
+<LinkPreview
+  url="https://github.com/vercel/next.js"
+  title="Next.js"
+  description="The React Framework for the Web"
+  preset="github"
+/>
+```
+
+## Features
+
+- ✅ Pure presentational component - no data fetching
+- ✅ Preset image support for GitHub and npm
+- ✅ Three size variants (small, medium, large)
+- ✅ Two layouts (vertical, horizontal)
+- ✅ TypeScript support
+- ✅ Fully customizable styling
+- ✅ Zero dependencies (only peer deps: React, Next.js)
+
+## Usage
+
+### Basic Usage
+
+```tsx
+import { LinkPreview } from "nextjs-link-preview";
+
+export default function Page() {
+  return (
+    <LinkPreview
+      url="https://example.com"
+      title="Example Site"
+      description="This is an example website"
+      image="https://example.com/preview.png"
+    />
+  );
+}
+```
+
+### With Presets
+
+Use built-in presets for popular platforms:
+
+```tsx
+// GitHub
+<LinkPreview
+  url="https://github.com/user/repo"
+  title="My Repository"
+  description="A cool open source project"
+  preset="github"
+/>
+
+// npm
+<LinkPreview
+  url="https://npmjs.com/package/my-package"
+  title="my-package"
+  description="An awesome npm package"
+  preset="npm"
+/>
+```
+
+### Size Variants
+
+```tsx
+<LinkPreview url="..." title="..." image="..." size="small" />
+<LinkPreview url="..." title="..." image="..." size="medium" /> {/* default */}
+<LinkPreview url="..." title="..." image="..." size="large" />
+```
+
+### Layouts
+
+```tsx
+{/* Vertical (default) - image on top */}
+<LinkPreview url="..." title="..." image="..." layout="vertical" />
+
+{/* Horizontal - image on left */}
+<LinkPreview url="..." title="..." image="..." layout="horizontal" />
+```
+
+### Custom Styling
+
+```tsx
+<LinkPreview
+  url="https://example.com"
+  title="Example"
+  image="..."
+  width="400px"
+  className="my-custom-class"
+/>
+```
+
+## Props
+
+| Prop          | Type                                 | Default      | Description                            |
+| ------------- | ------------------------------------ | ------------ | -------------------------------------- |
+| `url`         | `string`                             | **required** | Link destination                       |
+| `title`       | `string`                             | **required** | Preview card title                     |
+| `description` | `string`                             | `undefined`  | Preview card description (optional)    |
+| `image`       | `string`                             | `undefined`  | Custom image URL (optional)            |
+| `preset`      | `"github"` \| `"npm"`                | `undefined`  | Use preset image (optional)            |
+| `size`        | `"small"` \| `"medium"` \| `"large"` | `"medium"`   | Preview card size                      |
+| `layout`      | `"vertical"` \| `"horizontal"`       | `"vertical"` | Image position                         |
+| `width`       | `string` \| `number`                 | `"100%"`     | Card width                             |
+| `height`      | `string` \| `number`                 | `"auto"`     | Card height                            |
+| `className`   | `string`                             | `""`         | Additional CSS classes                 |
+
+**Note:** Either `image` or `preset` should be provided. If both are provided, `image` takes precedence.
+
+## Presets
+
+Available presets:
+
+- `github` - GitHub logo
+- `npm` - npm logo
+
+## Examples
+
+### GitHub Repository Preview
+
+```tsx
+<LinkPreview
+  url="https://github.com/vercel/next.js"
+  title="Next.js"
+  description="The React Framework for the Web"
+  preset="github"
+  size="large"
+/>
+```
+
+### npm Package Preview
+
+```tsx
+<LinkPreview
+  url="https://npmjs.com/package/react"
+  title="react"
+  description="React is a JavaScript library for building user interfaces."
+  preset="npm"
+  layout="horizontal"
+/>
+```
+
+### Custom Article Preview
+
+```tsx
+<LinkPreview
+  url="https://example.com/article"
+  title="How to Build Amazing Web Apps"
+  description="Learn the best practices for modern web development"
+  image="https://example.com/article-cover.jpg"
+  size="medium"
+/>
+```
+
+## Testing
+
+To test the component locally:
+
+```bash
+npm test
+```
+
+This will:
+1. Build the component
+2. Start the demo at http://localhost:3000
+3. Open your browser to see the interactive demo
+
+That's it!
+
+## License
+
+MIT
+
+## Links
+
+- [GitHub](https://github.com/sethcarney/nextjs-link-preview)
+- [npm](https://www.npmjs.com/package/nextjs-link-preview)

package/dist/index.d.ts

@@ -1,37 +1,41 @@
 import React from 'react';
 
 /**
- * Next.js Link Preview Component
+ * Simple Link Preview Component
  *
- * This component uses the Next.js API route to fetch metadata server-side,
- * avoiding CORS issues entirely.
+ * Usage with custom image:
+ *   <LinkPreview
+ *     url="https://example.com"
+ *     title="Example"
+ *     description="Example description"
+ *     image="https://example.com/image.png"
+ *   />
  *
- * Usage:
- *   import { LinkPreview } from './components/LinkPreview';
- *
- *   <LinkPreview url="https://github.com" size="medium" />
+ * Usage with preset:
+ *   <LinkPreview
+ *     url="https://github.com/user/repo"
+ *     title="My Repo"
+ *     description="A cool repository"
+ *     preset="github"
+ *   />
  */
 
-interface LinkPreviewData {
-    title: string;
-    description: string;
-    image: string;
-    url: string;
-}
 type LinkPreviewSize = "small" | "medium" | "large";
 type LinkPreviewLayout = "vertical" | "horizontal";
+type LinkPreviewPreset = "github" | "npm";
 interface LinkPreviewProps {
     url: string;
+    title: string;
+    description?: string;
+    image?: string;
+    preset?: LinkPreviewPreset;
     size?: LinkPreviewSize;
     layout?: LinkPreviewLayout;
     width?: string | number;
     height?: string | number;
     className?: string;
-    onError?: (error: Error) => void;
-    onLoad?: (data: LinkPreviewData) => void;
-    apiEndpoint?: string;
 }
-declare function LinkPreview({ url, size, layout, width, height, className, onError, onLoad, apiEndpoint }: LinkPreviewProps): React.JSX.Element | null;
+declare function LinkPreview({ url, title, description, image, preset, size, layout, width, height, className }: LinkPreviewProps): React.JSX.Element;
 
 export { LinkPreview, LinkPreview as default };
-export type { LinkPreviewData, LinkPreviewLayout, LinkPreviewProps, LinkPreviewSize };
+export type { LinkPreviewLayout, LinkPreviewPreset, LinkPreviewProps, LinkPreviewSize };

package/dist/index.esm.js

@@ -1,6 +1,11 @@
 'use client';
-import React, { useState, useEffect } from 'react';
+import React from 'react';
 
+// Inline SVG data URIs for preset images
+const PRESET_IMAGES = {
+    github: `data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iOTgiIGhlaWdodD0iOTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik00OC44NTQgMEMyMS44MzkgMCAwIDIyIDAgNDkuMjE3YzAgMjEuNzU2IDEzLjk5MyA0MC4xNzIgMzMuNDA1IDQ2LjY5IDIuNDI3LjQ5IDMuMzE2LTEuMDU5IDMuMzE2LTIuMzYyIDAtMS4xNDEtLjA4LTUuMDUyLS4wOC05LjEyNy0xMy41OSAyLjkzNC0xNi40Mi01Ljg2Ny0xNi40Mi01Ljg2Ny0yLjE4NC01LjcwNC01LjQyLTcuMTctNS40Mi03LjE3LTQuNDQ4LTMuMDE1LjMyNC0zLjAxNS4zMjQtMy4wMTUgNC45MzQuMzI2IDcuNTIzIDUuMDUyIDcuNTIzIDUuMDUyIDQuMzY3IDcuNDk2IDExLjQwNCA1LjM3OCAxNC4yMzUgNC4wNzQuNDA0LTMuMTc4IDEuNjk5LTUuMzc4IDMuMDc0LTYuNi0xMC44MzktMS4xNDEtMjIuMjQzLTUuMzc4LTIyLjI0My0yNC4yODMgMC01LjM3OCAxLjk0LTkuNzc4IDUuMDE0LTEzLjItLjQ4NS0xLjIyMi0yLjE4NC02LjI3NS40ODYtMTMuMDM4IDAgMCA0LjEyNS0xLjMwNCAxMy40MjYgNS4wNTJhNDYuOTcgNDYuOTcgMCAwIDEgMTIuMjE0LTEuNjNjNC4xMjUgMCA4LjMzLjU3MSAxMi4yMTMgMS42MyA5LjMwMi02LjM1NiAxMy40MjctNS4wNTIgMTMuNDI3LTUuMDUyIDIuNjcgNi43NjMuOTcgMTEuODE2LjQ4NSAxMy4wMzggMy4xNTUgMy40MjIgNS4wMTUgNy44MjIgNS4wMTUgMTMuMiAwIDE4LjkwNS0xMS40MDQgMjMuMDYtMjIuMzI0IDI0LjI4MyAxLjc4IDEuNTQ4IDMuMzE2IDQuNDgxIDMuMzE2IDkuMTI2IDAgNi42LS4wOCAxMS44OTctLjA4IDEzLjUyNiAwIDEuMzA0Ljg5IDIuODUzIDMuMzE2IDIuMzY0IDE5LjQxMi02LjUyIDMzLjQwNS0yNC45MzUgMzMuNDA1LTQ2LjY5MUM5Ny43MDcgMjIgNzUuNzg4IDAgNDguODU0IDB6IiBmaWxsPSIjMjQyOTJmIi8+PC9zdmc+`,
+    npm: "https://avatars.githubusercontent.com/u/6078720?s=200&v=4"
+};
 const sizeConfig = {
     small: {
         imageHeight: "120px",
@@ -27,65 +32,16 @@ const sizeConfig = {
         lineClamp: 3
     }
 };
-function LinkPreview({ url, size = "medium", layout = "vertical", width = "100%", height = "auto", className = "", onError, onLoad, apiEndpoint = "/api/preview" }) {
-    const [data, setData] = useState(null);
-    const [loading, setLoading] = useState(true);
-    const [error, setError] = useState(null);
+function LinkPreview({ url, title, description, image, preset, size = "medium", layout = "vertical", width = "100%", height = "auto", className = "" }) {
     const config = sizeConfig[size];
-    useEffect(() => {
-        const fetchMetadata = async () => {
-            try {
-                setLoading(true);
-                setError(null);
-                const response = await fetch(`${apiEndpoint}?url=${encodeURIComponent(url)}`);
-                if (!response.ok) {
-                    const errorData = await response.json();
-                    throw new Error(errorData.error || "Failed to fetch metadata");
-                }
-                const metadata = await response.json();
-                setData(metadata);
-                onLoad?.(metadata);
-            }
-            catch (err) {
-                const error = err instanceof Error ? err : new Error("Unknown error");
-                setError(error);
-                onError?.(error);
-            }
-            finally {
-                setLoading(false);
-            }
-        };
-        fetchMetadata();
-    }, [url, apiEndpoint]); // Don't include callbacks in dependencies to avoid infinite loops
-    if (loading) {
-        return (React.createElement("div", { style: {
-                padding: "1rem",
-                textAlign: "center",
-                color: "#666",
-                border: "1px solid #e0e0e0",
-                borderRadius: "8px",
-                background: "#f9f9f9"
-            } }, "Loading preview..."));
-    }
-    if (error) {
-        return (React.createElement("div", { style: {
-                padding: "1rem",
-                background: "#fff3f3",
-                border: "1px solid #f44336",
-                borderRadius: "8px"
-            } },
-            React.createElement("strong", { style: { color: "#d32f2f" } }, "Error loading preview:"),
-            " ",
-            error.message));
-    }
-    if (!data) {
-        return null;
-    }
     const isHorizontal = layout === "horizontal";
+    // Use preset image if no custom image provided
+    const imageUrl = image || (preset ? PRESET_IMAGES[preset] : undefined);
     return (React.createElement("a", { href: url, target: "_blank", rel: "noopener noreferrer", className: `link-preview ${className}`, style: {
             display: isHorizontal ? "flex" : "block",
             flexDirection: isHorizontal ? "row" : undefined,
             width,
+            maxWidth: isHorizontal ? undefined : "400px",
             height,
             textDecoration: "none",
             color: "inherit",
@@ -98,14 +54,16 @@ function LinkPreview({ url, size = "medium", layout = "vertical", width = "100%"
         }, onMouseLeave: (e) => {
             e.currentTarget.style.boxShadow = "none";
         } },
-        data.image && (React.createElement("div", { style: {
+        imageUrl && (React.createElement("div", { style: {
                 width: isHorizontal ? config.imageWidth : "100%",
                 height: isHorizontal ? "100%" : config.imageHeight,
                 minHeight: isHorizontal ? config.imageHeight : undefined,
                 flexShrink: isHorizontal ? 0 : undefined,
-                backgroundImage: `url(${data.image})`,
-                backgroundSize: "cover",
-                backgroundPosition: "center"
+                backgroundImage: `url(${imageUrl})`,
+                backgroundSize: preset ? "contain" : "cover",
+                backgroundPosition: "center",
+                backgroundRepeat: "no-repeat",
+                backgroundColor: preset ? "#f6f8fa" : "transparent"
             } })),
         React.createElement("div", { style: {
                 padding: config.padding,
@@ -114,8 +72,8 @@ function LinkPreview({ url, size = "medium", layout = "vertical", width = "100%"
                 flexDirection: "column",
                 justifyContent: "center"
             } },
-            data.title && (React.createElement("h3", { style: { margin: "0 0 8px 0", fontSize: config.titleSize } }, data.title)),
-            data.description && (React.createElement("p", { style: {
+            React.createElement("h3", { style: { margin: "0 0 8px 0", fontSize: config.titleSize } }, title),
+            description && (React.createElement("p", { style: {
                     margin: 0,
                     fontSize: config.descriptionSize,
                     color: "#666",
@@ -123,7 +81,7 @@ function LinkPreview({ url, size = "medium", layout = "vertical", width = "100%"
                     WebkitLineClamp: config.lineClamp,
                     WebkitBoxOrient: "vertical",
                     overflow: "hidden"
-                } }, data.description)))));
+                } }, description)))));
 }
 
 export { LinkPreview, LinkPreview as default };

package/dist/index.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.esm.js","sources":["../src/nextjs/components/LinkPreview.tsx"],"sourcesContent":["\"use client\";\r\n\r\n/**\r\n * Next.js Link Preview Component\r\n *\r\n * This component uses the Next.js API route to fetch metadata server-side,\r\n * avoiding CORS issues entirely.\r\n *\r\n * Usage:\r\n *   import { LinkPreview } from './components/LinkPreview';\r\n *\r\n *   <LinkPreview url=\"https://github.com\" size=\"medium\" />\r\n */\r\n\r\nimport React, { useEffect, useState } from \"react\";\r\n\r\nexport interface LinkPreviewData {\r\n  title: string;\r\n  description: string;\r\n  image: string;\r\n  url: string;\r\n}\r\n\r\nexport type LinkPreviewSize = \"small\" | \"medium\" | \"large\";\r\nexport type LinkPreviewLayout = \"vertical\" | \"horizontal\";\r\n\r\nexport interface LinkPreviewProps {\r\n  url: string;\r\n  size?: LinkPreviewSize;\r\n  layout?: LinkPreviewLayout;\r\n  width?: string | number;\r\n  height?: string | number;\r\n  className?: string;\r\n  onError?: (error: Error) => void;\r\n  onLoad?: (data: LinkPreviewData) => void;\r\n  apiEndpoint?: string; // Override the API endpoint if needed\r\n}\r\n\r\nconst sizeConfig = {\r\n  small: {\r\n    imageHeight: \"120px\",\r\n    imageWidth: \"120px\",\r\n    titleSize: \"14px\",\r\n    descriptionSize: \"12px\",\r\n    padding: \"8px\",\r\n    lineClamp: 1\r\n  },\r\n  medium: {\r\n    imageHeight: \"200px\",\r\n    imageWidth: \"200px\",\r\n    titleSize: \"16px\",\r\n    descriptionSize: \"14px\",\r\n    padding: \"12px\",\r\n    lineClamp: 2\r\n  },\r\n  large: {\r\n    imageHeight: \"300px\",\r\n    imageWidth: \"280px\",\r\n    titleSize: \"20px\",\r\n    descriptionSize: \"16px\",\r\n    padding: \"16px\",\r\n    lineClamp: 3\r\n  }\r\n};\r\n\r\nexport function LinkPreview({\r\n  url,\r\n  size = \"medium\",\r\n  layout = \"vertical\",\r\n  width = \"100%\",\r\n  height = \"auto\",\r\n  className = \"\",\r\n  onError,\r\n  onLoad,\r\n  apiEndpoint = \"/api/preview\"\r\n}: LinkPreviewProps) {\r\n  const [data, setData] = useState<LinkPreviewData | null>(null);\r\n  const [loading, setLoading] = useState(true);\r\n  const [error, setError] = useState<Error | null>(null);\r\n\r\n  const config = sizeConfig[size];\r\n\r\n  useEffect(() => {\r\n    const fetchMetadata = async () => {\r\n      try {\r\n        setLoading(true);\r\n        setError(null);\r\n\r\n        const response = await fetch(`${apiEndpoint}?url=${encodeURIComponent(url)}`);\r\n\r\n        if (!response.ok) {\r\n          const errorData = await response.json();\r\n          throw new Error(errorData.error || \"Failed to fetch metadata\");\r\n        }\r\n\r\n        const metadata = await response.json();\r\n        setData(metadata);\r\n        onLoad?.(metadata);\r\n      } catch (err) {\r\n        const error = err instanceof Error ? err : new Error(\"Unknown error\");\r\n        setError(error);\r\n        onError?.(error);\r\n      } finally {\r\n        setLoading(false);\r\n      }\r\n    };\r\n\r\n    fetchMetadata();\r\n  }, [url, apiEndpoint]); // Don't include callbacks in dependencies to avoid infinite loops\r\n\r\n  if (loading) {\r\n    return (\r\n      <div\r\n        style={{\r\n          padding: \"1rem\",\r\n          textAlign: \"center\",\r\n          color: \"#666\",\r\n          border: \"1px solid #e0e0e0\",\r\n          borderRadius: \"8px\",\r\n          background: \"#f9f9f9\"\r\n        }}\r\n      >\r\n        Loading preview...\r\n      </div>\r\n    );\r\n  }\r\n\r\n  if (error) {\r\n    return (\r\n      <div\r\n        style={{\r\n          padding: \"1rem\",\r\n          background: \"#fff3f3\",\r\n          border: \"1px solid #f44336\",\r\n          borderRadius: \"8px\"\r\n        }}\r\n      >\r\n        <strong style={{ color: \"#d32f2f\" }}>Error loading preview:</strong> {error.message}\r\n      </div>\r\n    );\r\n  }\r\n\r\n  if (!data) {\r\n    return null;\r\n  }\r\n\r\n  const isHorizontal = layout === \"horizontal\";\r\n\r\n  return (\r\n    <a\r\n      href={url}\r\n      target=\"_blank\"\r\n      rel=\"noopener noreferrer\"\r\n      className={`link-preview ${className}`}\r\n      style={{\r\n        display: isHorizontal ? \"flex\" : \"block\",\r\n        flexDirection: isHorizontal ? \"row\" : undefined,\r\n        width,\r\n        height,\r\n        textDecoration: \"none\",\r\n        color: \"inherit\",\r\n        border: \"1px solid #e0e0e0\",\r\n        borderRadius: \"8px\",\r\n        overflow: \"hidden\",\r\n        transition: \"box-shadow 0.3s\"\r\n      }}\r\n      onMouseEnter={(e) => {\r\n        (e.currentTarget as HTMLElement).style.boxShadow = \"0 4px 12px rgba(0,0,0,0.15)\";\r\n      }}\r\n      onMouseLeave={(e) => {\r\n        (e.currentTarget as HTMLElement).style.boxShadow = \"none\";\r\n      }}\r\n    >\r\n      {data.image && (\r\n        <div\r\n          style={{\r\n            width: isHorizontal ? config.imageWidth : \"100%\",\r\n            height: isHorizontal ? \"100%\" : config.imageHeight,\r\n            minHeight: isHorizontal ? config.imageHeight : undefined,\r\n            flexShrink: isHorizontal ? 0 : undefined,\r\n            backgroundImage: `url(${data.image})`,\r\n            backgroundSize: \"cover\",\r\n            backgroundPosition: \"center\"\r\n          }}\r\n        />\r\n      )}\r\n      <div\r\n        style={{\r\n          padding: config.padding,\r\n          flex: isHorizontal ? 1 : undefined,\r\n          display: \"flex\",\r\n          flexDirection: \"column\",\r\n          justifyContent: \"center\"\r\n        }}\r\n      >\r\n        {data.title && (\r\n          <h3 style={{ margin: \"0 0 8px 0\", fontSize: config.titleSize }}>{data.title}</h3>\r\n        )}\r\n        {data.description && (\r\n          <p\r\n            style={\r\n              {\r\n                margin: 0,\r\n                fontSize: config.descriptionSize,\r\n                color: \"#666\",\r\n                display: \"-webkit-box\",\r\n                WebkitLineClamp: config.lineClamp,\r\n                WebkitBoxOrient: \"vertical\",\r\n                overflow: \"hidden\"\r\n              } as React.CSSProperties\r\n            }\r\n          >\r\n            {data.description}\r\n          </p>\r\n        )}\r\n      </div>\r\n    </a>\r\n  );\r\n}\r\n\r\nexport default LinkPreview;\r\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.esm.js","sources":["../src/nextjs/components/LinkPreview.tsx"],"sourcesContent":["\"use client\";\n\n/**\n * Simple Link Preview Component\n *\n * Usage with custom image:\n *   <LinkPreview\n *     url=\"https://example.com\"\n *     title=\"Example\"\n *     description=\"Example description\"\n *     image=\"https://example.com/image.png\"\n *   />\n *\n * Usage with preset:\n *   <LinkPreview\n *     url=\"https://github.com/user/repo\"\n *     title=\"My Repo\"\n *     description=\"A cool repository\"\n *     preset=\"github\"\n *   />\n */\n\nimport React from \"react\";\n\nexport type LinkPreviewSize = \"small\" | \"medium\" | \"large\";\nexport type LinkPreviewLayout = \"vertical\" | \"horizontal\";\nexport type LinkPreviewPreset = \"github\" | \"npm\";\n\n// Inline SVG data URIs for preset images\nconst PRESET_IMAGES: Record<LinkPreviewPreset, string> = {\n  github: `data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iOTgiIGhlaWdodD0iOTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik00OC44NTQgMEMyMS44MzkgMCAwIDIyIDAgNDkuMjE3YzAgMjEuNzU2IDEzLjk5MyA0MC4xNzIgMzMuNDA1IDQ2LjY5IDIuNDI3LjQ5IDMuMzE2LTEuMDU5IDMuMzE2LTIuMzYyIDAtMS4xNDEtLjA4LTUuMDUyLS4wOC05LjEyNy0xMy41OSAyLjkzNC0xNi40Mi01Ljg2Ny0xNi40Mi01Ljg2Ny0yLjE4NC01LjcwNC01LjQyLTcuMTctNS40Mi03LjE3LTQuNDQ4LTMuMDE1LjMyNC0zLjAxNS4zMjQtMy4wMTUgNC45MzQuMzI2IDcuNTIzIDUuMDUyIDcuNTIzIDUuMDUyIDQuMzY3IDcuNDk2IDExLjQwNCA1LjM3OCAxNC4yMzUgNC4wNzQuNDA0LTMuMTc4IDEuNjk5LTUuMzc4IDMuMDc0LTYuNi0xMC44MzktMS4xNDEtMjIuMjQzLTUuMzc4LTIyLjI0My0yNC4yODMgMC01LjM3OCAxLjk0LTkuNzc4IDUuMDE0LTEzLjItLjQ4NS0xLjIyMi0yLjE4NC02LjI3NS40ODYtMTMuMDM4IDAgMCA0LjEyNS0xLjMwNCAxMy40MjYgNS4wNTJhNDYuOTcgNDYuOTcgMCAwIDEgMTIuMjE0LTEuNjNjNC4xMjUgMCA4LjMzLjU3MSAxMi4yMTMgMS42MyA5LjMwMi02LjM1NiAxMy40MjctNS4wNTIgMTMuNDI3LTUuMDUyIDIuNjcgNi43NjMuOTcgMTEuODE2LjQ4NSAxMy4wMzggMy4xNTUgMy40MjIgNS4wMTUgNy44MjIgNS4wMTUgMTMuMiAwIDE4LjkwNS0xMS40MDQgMjMuMDYtMjIuMzI0IDI0LjI4MyAxLjc4IDEuNTQ4IDMuMzE2IDQuNDgxIDMuMzE2IDkuMTI2IDAgNi42LS4wOCAxMS44OTctLjA4IDEzLjUyNiAwIDEuMzA0Ljg5IDIuODUzIDMuMzE2IDIuMzY0IDE5LjQxMi02LjUyIDMzLjQwNS0yNC45MzUgMzMuNDA1LTQ2LjY5MUM5Ny43MDcgMjIgNzUuNzg4IDAgNDguODU0IDB6IiBmaWxsPSIjMjQyOTJmIi8+PC9zdmc+`,\n  npm: \"https://avatars.githubusercontent.com/u/6078720?s=200&v=4\"\n};\n\nexport interface LinkPreviewProps {\n  url: string;\n  title: string;\n  description?: string;\n  image?: string;\n  preset?: LinkPreviewPreset;\n  size?: LinkPreviewSize;\n  layout?: LinkPreviewLayout;\n  width?: string | number;\n  height?: string | number;\n  className?: string;\n}\n\nconst sizeConfig = {\n  small: {\n    imageHeight: \"120px\",\n    imageWidth: \"120px\",\n    titleSize: \"14px\",\n    descriptionSize: \"12px\",\n    padding: \"8px\",\n    lineClamp: 1\n  },\n  medium: {\n    imageHeight: \"200px\",\n    imageWidth: \"200px\",\n    titleSize: \"16px\",\n    descriptionSize: \"14px\",\n    padding: \"12px\",\n    lineClamp: 2\n  },\n  large: {\n    imageHeight: \"300px\",\n    imageWidth: \"280px\",\n    titleSize: \"20px\",\n    descriptionSize: \"16px\",\n    padding: \"16px\",\n    lineClamp: 3\n  }\n};\n\nexport function LinkPreview({\n  url,\n  title,\n  description,\n  image,\n  preset,\n  size = \"medium\",\n  layout = \"vertical\",\n  width = \"100%\",\n  height = \"auto\",\n  className = \"\"\n}: LinkPreviewProps) {\n  const config = sizeConfig[size];\n  const isHorizontal = layout === \"horizontal\";\n\n  // Use preset image if no custom image provided\n  const imageUrl = image || (preset ? PRESET_IMAGES[preset] : undefined);\n\n  return (\n    <a\n      href={url}\n      target=\"_blank\"\n      rel=\"noopener noreferrer\"\n      className={`link-preview ${className}`}\n      style={{\n        display: isHorizontal ? \"flex\" : \"block\",\n        flexDirection: isHorizontal ? \"row\" : undefined,\n        width,\n        maxWidth: isHorizontal ? undefined : \"400px\",\n        height,\n        textDecoration: \"none\",\n        color: \"inherit\",\n        border: \"1px solid #e0e0e0\",\n        borderRadius: \"8px\",\n        overflow: \"hidden\",\n        transition: \"box-shadow 0.3s\"\n      }}\n      onMouseEnter={(e) => {\n        (e.currentTarget as HTMLElement).style.boxShadow = \"0 4px 12px rgba(0,0,0,0.15)\";\n      }}\n      onMouseLeave={(e) => {\n        (e.currentTarget as HTMLElement).style.boxShadow = \"none\";\n      }}\n    >\n      {imageUrl && (\n        <div\n          style={{\n            width: isHorizontal ? config.imageWidth : \"100%\",\n            height: isHorizontal ? \"100%\" : config.imageHeight,\n            minHeight: isHorizontal ? config.imageHeight : undefined,\n            flexShrink: isHorizontal ? 0 : undefined,\n            backgroundImage: `url(${imageUrl})`,\n            backgroundSize: preset ? \"contain\" : \"cover\",\n            backgroundPosition: \"center\",\n            backgroundRepeat: \"no-repeat\",\n            backgroundColor: preset ? \"#f6f8fa\" : \"transparent\"\n          }}\n        />\n      )}\n      <div\n        style={{\n          padding: config.padding,\n          flex: isHorizontal ? 1 : undefined,\n          display: \"flex\",\n          flexDirection: \"column\",\n          justifyContent: \"center\"\n        }}\n      >\n        <h3 style={{ margin: \"0 0 8px 0\", fontSize: config.titleSize }}>{title}</h3>\n        {description && (\n          <p\n            style={\n              {\n                margin: 0,\n                fontSize: config.descriptionSize,\n                color: \"#666\",\n                display: \"-webkit-box\",\n                WebkitLineClamp: config.lineClamp,\n                WebkitBoxOrient: \"vertical\",\n                overflow: \"hidden\"\n              } as React.CSSProperties\n            }\n          >\n            {description}\n          </p>\n        )}\n      </div>\n    </a>\n  );\n}\n\nexport default LinkPreview;\n"],"names":[],"mappings":";;;AA4BA;AACA,MAAM,aAAa,GAAsC;AACvD,IAAA,MAAM,EAAE,CAAA,8xCAAA,CAAgyC;AACxyC,IAAA,GAAG,EAAE;CACN;AAeD,MAAM,UAAU,GAAG;AACjB,IAAA,KAAK,EAAE;AACL,QAAA,WAAW,EAAE,OAAO;AACpB,QAAA,UAAU,EAAE,OAAO;AACnB,QAAA,SAAS,EAAE,MAAM;AACjB,QAAA,eAAe,EAAE,MAAM;AACvB,QAAA,OAAO,EAAE,KAAK;AACd,QAAA,SAAS,EAAE;AACZ,KAAA;AACD,IAAA,MAAM,EAAE;AACN,QAAA,WAAW,EAAE,OAAO;AACpB,QAAA,UAAU,EAAE,OAAO;AACnB,QAAA,SAAS,EAAE,MAAM;AACjB,QAAA,eAAe,EAAE,MAAM;AACvB,QAAA,OAAO,EAAE,MAAM;AACf,QAAA,SAAS,EAAE;AACZ,KAAA;AACD,IAAA,KAAK,EAAE;AACL,QAAA,WAAW,EAAE,OAAO;AACpB,QAAA,UAAU,EAAE,OAAO;AACnB,QAAA,SAAS,EAAE,MAAM;AACjB,QAAA,eAAe,EAAE,MAAM;AACvB,QAAA,OAAO,EAAE,MAAM;AACf,QAAA,SAAS,EAAE;AACZ;CACF;AAEK,SAAU,WAAW,CAAC,EAC1B,GAAG,EACH,KAAK,EACL,WAAW,EACX,KAAK,EACL,MAAM,EACN,IAAI,GAAG,QAAQ,EACf,MAAM,GAAG,UAAU,EACnB,KAAK,GAAG,MAAM,EACd,MAAM,GAAG,MAAM,EACf,SAAS,GAAG,EAAE,EACG,EAAA;AACjB,IAAA,MAAM,MAAM,GAAG,UAAU,CAAC,IAAI,CAAC;AAC/B,IAAA,MAAM,YAAY,GAAG,MAAM,KAAK,YAAY;;AAG5C,IAAA,MAAM,QAAQ,GAAG,KAAK,KAAK,MAAM,GAAG,aAAa,CAAC,MAAM,CAAC,GAAG,SAAS,CAAC;IAEtE,QACE,2BACE,IAAI,EAAE,GAAG,EACT,MAAM,EAAC,QAAQ,EACf,GAAG,EAAC,qBAAqB,EACzB,SAAS,EAAE,gBAAgB,SAAS,CAAA,CAAE,EACtC,KAAK,EAAE;YACL,OAAO,EAAE,YAAY,GAAG,MAAM,GAAG,OAAO;YACxC,aAAa,EAAE,YAAY,GAAG,KAAK,GAAG,SAAS;YAC/C,KAAK;YACL,QAAQ,EAAE,YAAY,GAAG,SAAS,GAAG,OAAO;YAC5C,MAAM;AACN,YAAA,cAAc,EAAE,MAAM;AACtB,YAAA,KAAK,EAAE,SAAS;AAChB,YAAA,MAAM,EAAE,mBAAmB;AAC3B,YAAA,YAAY,EAAE,KAAK;AACnB,YAAA,QAAQ,EAAE,QAAQ;AAClB,YAAA,UAAU,EAAE;AACb,SAAA,EACD,YAAY,EAAE,CAAC,CAAC,KAAI;YACjB,CAAC,CAAC,aAA6B,CAAC,KAAK,CAAC,SAAS,GAAG,6BAA6B;AAClF,QAAA,CAAC,EACD,YAAY,EAAE,CAAC,CAAC,KAAI;YACjB,CAAC,CAAC,aAA6B,CAAC,KAAK,CAAC,SAAS,GAAG,MAAM;QAC3D,CAAC,EAAA;AAEA,QAAA,QAAQ,KACP,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACE,KAAK,EAAE;gBACL,KAAK,EAAE,YAAY,GAAG,MAAM,CAAC,UAAU,GAAG,MAAM;gBAChD,MAAM,EAAE,YAAY,GAAG,MAAM,GAAG,MAAM,CAAC,WAAW;gBAClD,SAAS,EAAE,YAAY,GAAG,MAAM,CAAC,WAAW,GAAG,SAAS;gBACxD,UAAU,EAAE,YAAY,GAAG,CAAC,GAAG,SAAS;gBACxC,eAAe,EAAE,CAAA,IAAA,EAAO,QAAQ,CAAA,CAAA,CAAG;gBACnC,cAAc,EAAE,MAAM,GAAG,SAAS,GAAG,OAAO;AAC5C,gBAAA,kBAAkB,EAAE,QAAQ;AAC5B,gBAAA,gBAAgB,EAAE,WAAW;gBAC7B,eAAe,EAAE,MAAM,GAAG,SAAS,GAAG;AACvC,aAAA,EAAA,CACD,CACH;AACD,QAAA,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACE,KAAK,EAAE;gBACL,OAAO,EAAE,MAAM,CAAC,OAAO;gBACvB,IAAI,EAAE,YAAY,GAAG,CAAC,GAAG,SAAS;AAClC,gBAAA,OAAO,EAAE,MAAM;AACf,gBAAA,aAAa,EAAE,QAAQ;AACvB,gBAAA,cAAc,EAAE;AACjB,aAAA,EAAA;AAED,YAAA,KAAA,CAAA,aAAA,CAAA,IAAA,EAAA,EAAI,KAAK,EAAE,EAAE,MAAM,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,CAAC,SAAS,EAAE,EAAA,EAAG,KAAK,CAAM;AAC3E,YAAA,WAAW,KACV,KAAA,CAAA,aAAA,CAAA,GAAA,EAAA,EACE,KAAK,EACH;AACE,oBAAA,MAAM,EAAE,CAAC;oBACT,QAAQ,EAAE,MAAM,CAAC,eAAe;AAChC,oBAAA,KAAK,EAAE,MAAM;AACb,oBAAA,OAAO,EAAE,aAAa;oBACtB,eAAe,EAAE,MAAM,CAAC,SAAS;AACjC,oBAAA,eAAe,EAAE,UAAU;AAC3B,oBAAA,QAAQ,EAAE;AACY,iBAAA,EAAA,EAGzB,WAAW,CACV,CACL,CACG,CACJ;AAER;;;;"}

package/dist/index.js

@@ -5,6 +5,11 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
 
+// Inline SVG data URIs for preset images
+const PRESET_IMAGES = {
+    github: `data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iOTgiIGhlaWdodD0iOTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik00OC44NTQgMEMyMS44MzkgMCAwIDIyIDAgNDkuMjE3YzAgMjEuNzU2IDEzLjk5MyA0MC4xNzIgMzMuNDA1IDQ2LjY5IDIuNDI3LjQ5IDMuMzE2LTEuMDU5IDMuMzE2LTIuMzYyIDAtMS4xNDEtLjA4LTUuMDUyLS4wOC05LjEyNy0xMy41OSAyLjkzNC0xNi40Mi01Ljg2Ny0xNi40Mi01Ljg2Ny0yLjE4NC01LjcwNC01LjQyLTcuMTctNS40Mi03LjE3LTQuNDQ4LTMuMDE1LjMyNC0zLjAxNS4zMjQtMy4wMTUgNC45MzQuMzI2IDcuNTIzIDUuMDUyIDcuNTIzIDUuMDUyIDQuMzY3IDcuNDk2IDExLjQwNCA1LjM3OCAxNC4yMzUgNC4wNzQuNDA0LTMuMTc4IDEuNjk5LTUuMzc4IDMuMDc0LTYuNi0xMC44MzktMS4xNDEtMjIuMjQzLTUuMzc4LTIyLjI0My0yNC4yODMgMC01LjM3OCAxLjk0LTkuNzc4IDUuMDE0LTEzLjItLjQ4NS0xLjIyMi0yLjE4NC02LjI3NS40ODYtMTMuMDM4IDAgMCA0LjEyNS0xLjMwNCAxMy40MjYgNS4wNTJhNDYuOTcgNDYuOTcgMCAwIDEgMTIuMjE0LTEuNjNjNC4xMjUgMCA4LjMzLjU3MSAxMi4yMTMgMS42MyA5LjMwMi02LjM1NiAxMy40MjctNS4wNTIgMTMuNDI3LTUuMDUyIDIuNjcgNi43NjMuOTcgMTEuODE2LjQ4NSAxMy4wMzggMy4xNTUgMy40MjIgNS4wMTUgNy44MjIgNS4wMTUgMTMuMiAwIDE4LjkwNS0xMS40MDQgMjMuMDYtMjIuMzI0IDI0LjI4MyAxLjc4IDEuNTQ4IDMuMzE2IDQuNDgxIDMuMzE2IDkuMTI2IDAgNi42LS4wOCAxMS44OTctLjA4IDEzLjUyNiAwIDEuMzA0Ljg5IDIuODUzIDMuMzE2IDIuMzY0IDE5LjQxMi02LjUyIDMzLjQwNS0yNC45MzUgMzMuNDA1LTQ2LjY5MUM5Ny43MDcgMjIgNzUuNzg4IDAgNDguODU0IDB6IiBmaWxsPSIjMjQyOTJmIi8+PC9zdmc+`,
+    npm: "https://avatars.githubusercontent.com/u/6078720?s=200&v=4"
+};
 const sizeConfig = {
     small: {
         imageHeight: "120px",
@@ -31,65 +36,16 @@ const sizeConfig = {
         lineClamp: 3
     }
 };
-function LinkPreview({ url, size = "medium", layout = "vertical", width = "100%", height = "auto", className = "", onError, onLoad, apiEndpoint = "/api/preview" }) {
-    const [data, setData] = React.useState(null);
-    const [loading, setLoading] = React.useState(true);
-    const [error, setError] = React.useState(null);
+function LinkPreview({ url, title, description, image, preset, size = "medium", layout = "vertical", width = "100%", height = "auto", className = "" }) {
     const config = sizeConfig[size];
-    React.useEffect(() => {
-        const fetchMetadata = async () => {
-            try {
-                setLoading(true);
-                setError(null);
-                const response = await fetch(`${apiEndpoint}?url=${encodeURIComponent(url)}`);
-                if (!response.ok) {
-                    const errorData = await response.json();
-                    throw new Error(errorData.error || "Failed to fetch metadata");
-                }
-                const metadata = await response.json();
-                setData(metadata);
-                onLoad?.(metadata);
-            }
-            catch (err) {
-                const error = err instanceof Error ? err : new Error("Unknown error");
-                setError(error);
-                onError?.(error);
-            }
-            finally {
-                setLoading(false);
-            }
-        };
-        fetchMetadata();
-    }, [url, apiEndpoint]); // Don't include callbacks in dependencies to avoid infinite loops
-    if (loading) {
-        return (React.createElement("div", { style: {
-                padding: "1rem",
-                textAlign: "center",
-                color: "#666",
-                border: "1px solid #e0e0e0",
-                borderRadius: "8px",
-                background: "#f9f9f9"
-            } }, "Loading preview..."));
-    }
-    if (error) {
-        return (React.createElement("div", { style: {
-                padding: "1rem",
-                background: "#fff3f3",
-                border: "1px solid #f44336",
-                borderRadius: "8px"
-            } },
-            React.createElement("strong", { style: { color: "#d32f2f" } }, "Error loading preview:"),
-            " ",
-            error.message));
-    }
-    if (!data) {
-        return null;
-    }
     const isHorizontal = layout === "horizontal";
+    // Use preset image if no custom image provided
+    const imageUrl = image || (preset ? PRESET_IMAGES[preset] : undefined);
     return (React.createElement("a", { href: url, target: "_blank", rel: "noopener noreferrer", className: `link-preview ${className}`, style: {
             display: isHorizontal ? "flex" : "block",
             flexDirection: isHorizontal ? "row" : undefined,
             width,
+            maxWidth: isHorizontal ? undefined : "400px",
             height,
             textDecoration: "none",
             color: "inherit",
@@ -102,14 +58,16 @@ function LinkPreview({ url, size = "medium", layout = "vertical", width = "100%"
         }, onMouseLeave: (e) => {
             e.currentTarget.style.boxShadow = "none";
         } },
-        data.image && (React.createElement("div", { style: {
+        imageUrl && (React.createElement("div", { style: {
                 width: isHorizontal ? config.imageWidth : "100%",
                 height: isHorizontal ? "100%" : config.imageHeight,
                 minHeight: isHorizontal ? config.imageHeight : undefined,
                 flexShrink: isHorizontal ? 0 : undefined,
-                backgroundImage: `url(${data.image})`,
-                backgroundSize: "cover",
-                backgroundPosition: "center"
+                backgroundImage: `url(${imageUrl})`,
+                backgroundSize: preset ? "contain" : "cover",
+                backgroundPosition: "center",
+                backgroundRepeat: "no-repeat",
+                backgroundColor: preset ? "#f6f8fa" : "transparent"
             } })),
         React.createElement("div", { style: {
                 padding: config.padding,
@@ -118,8 +76,8 @@ function LinkPreview({ url, size = "medium", layout = "vertical", width = "100%"
                 flexDirection: "column",
                 justifyContent: "center"
             } },
-            data.title && (React.createElement("h3", { style: { margin: "0 0 8px 0", fontSize: config.titleSize } }, data.title)),
-            data.description && (React.createElement("p", { style: {
+            React.createElement("h3", { style: { margin: "0 0 8px 0", fontSize: config.titleSize } }, title),
+            description && (React.createElement("p", { style: {
                     margin: 0,
                     fontSize: config.descriptionSize,
                     color: "#666",
@@ -127,7 +85,7 @@ function LinkPreview({ url, size = "medium", layout = "vertical", width = "100%"
                     WebkitLineClamp: config.lineClamp,
                     WebkitBoxOrient: "vertical",
                     overflow: "hidden"
-                } }, data.description)))));
+                } }, description)))));
 }
 
 exports.LinkPreview = LinkPreview;

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../src/nextjs/components/LinkPreview.tsx"],"sourcesContent":["\"use client\";\r\n\r\n/**\r\n * Next.js Link Preview Component\r\n *\r\n * This component uses the Next.js API route to fetch metadata server-side,\r\n * avoiding CORS issues entirely.\r\n *\r\n * Usage:\r\n *   import { LinkPreview } from './components/LinkPreview';\r\n *\r\n *   <LinkPreview url=\"https://github.com\" size=\"medium\" />\r\n */\r\n\r\nimport React, { useEffect, useState } from \"react\";\r\n\r\nexport interface LinkPreviewData {\r\n  title: string;\r\n  description: string;\r\n  image: string;\r\n  url: string;\r\n}\r\n\r\nexport type LinkPreviewSize = \"small\" | \"medium\" | \"large\";\r\nexport type LinkPreviewLayout = \"vertical\" | \"horizontal\";\r\n\r\nexport interface LinkPreviewProps {\r\n  url: string;\r\n  size?: LinkPreviewSize;\r\n  layout?: LinkPreviewLayout;\r\n  width?: string | number;\r\n  height?: string | number;\r\n  className?: string;\r\n  onError?: (error: Error) => void;\r\n  onLoad?: (data: LinkPreviewData) => void;\r\n  apiEndpoint?: string; // Override the API endpoint if needed\r\n}\r\n\r\nconst sizeConfig = {\r\n  small: {\r\n    imageHeight: \"120px\",\r\n    imageWidth: \"120px\",\r\n    titleSize: \"14px\",\r\n    descriptionSize: \"12px\",\r\n    padding: \"8px\",\r\n    lineClamp: 1\r\n  },\r\n  medium: {\r\n    imageHeight: \"200px\",\r\n    imageWidth: \"200px\",\r\n    titleSize: \"16px\",\r\n    descriptionSize: \"14px\",\r\n    padding: \"12px\",\r\n    lineClamp: 2\r\n  },\r\n  large: {\r\n    imageHeight: \"300px\",\r\n    imageWidth: \"280px\",\r\n    titleSize: \"20px\",\r\n    descriptionSize: \"16px\",\r\n    padding: \"16px\",\r\n    lineClamp: 3\r\n  }\r\n};\r\n\r\nexport function LinkPreview({\r\n  url,\r\n  size = \"medium\",\r\n  layout = \"vertical\",\r\n  width = \"100%\",\r\n  height = \"auto\",\r\n  className = \"\",\r\n  onError,\r\n  onLoad,\r\n  apiEndpoint = \"/api/preview\"\r\n}: LinkPreviewProps) {\r\n  const [data, setData] = useState<LinkPreviewData | null>(null);\r\n  const [loading, setLoading] = useState(true);\r\n  const [error, setError] = useState<Error | null>(null);\r\n\r\n  const config = sizeConfig[size];\r\n\r\n  useEffect(() => {\r\n    const fetchMetadata = async () => {\r\n      try {\r\n        setLoading(true);\r\n        setError(null);\r\n\r\n        const response = await fetch(`${apiEndpoint}?url=${encodeURIComponent(url)}`);\r\n\r\n        if (!response.ok) {\r\n          const errorData = await response.json();\r\n          throw new Error(errorData.error || \"Failed to fetch metadata\");\r\n        }\r\n\r\n        const metadata = await response.json();\r\n        setData(metadata);\r\n        onLoad?.(metadata);\r\n      } catch (err) {\r\n        const error = err instanceof Error ? err : new Error(\"Unknown error\");\r\n        setError(error);\r\n        onError?.(error);\r\n      } finally {\r\n        setLoading(false);\r\n      }\r\n    };\r\n\r\n    fetchMetadata();\r\n  }, [url, apiEndpoint]); // Don't include callbacks in dependencies to avoid infinite loops\r\n\r\n  if (loading) {\r\n    return (\r\n      <div\r\n        style={{\r\n          padding: \"1rem\",\r\n          textAlign: \"center\",\r\n          color: \"#666\",\r\n          border: \"1px solid #e0e0e0\",\r\n          borderRadius: \"8px\",\r\n          background: \"#f9f9f9\"\r\n        }}\r\n      >\r\n        Loading preview...\r\n      </div>\r\n    );\r\n  }\r\n\r\n  if (error) {\r\n    return (\r\n      <div\r\n        style={{\r\n          padding: \"1rem\",\r\n          background: \"#fff3f3\",\r\n          border: \"1px solid #f44336\",\r\n          borderRadius: \"8px\"\r\n        }}\r\n      >\r\n        <strong style={{ color: \"#d32f2f\" }}>Error loading preview:</strong> {error.message}\r\n      </div>\r\n    );\r\n  }\r\n\r\n  if (!data) {\r\n    return null;\r\n  }\r\n\r\n  const isHorizontal = layout === \"horizontal\";\r\n\r\n  return (\r\n    <a\r\n      href={url}\r\n      target=\"_blank\"\r\n      rel=\"noopener noreferrer\"\r\n      className={`link-preview ${className}`}\r\n      style={{\r\n        display: isHorizontal ? \"flex\" : \"block\",\r\n        flexDirection: isHorizontal ? \"row\" : undefined,\r\n        width,\r\n        height,\r\n        textDecoration: \"none\",\r\n        color: \"inherit\",\r\n        border: \"1px solid #e0e0e0\",\r\n        borderRadius: \"8px\",\r\n        overflow: \"hidden\",\r\n        transition: \"box-shadow 0.3s\"\r\n      }}\r\n      onMouseEnter={(e) => {\r\n        (e.currentTarget as HTMLElement).style.boxShadow = \"0 4px 12px rgba(0,0,0,0.15)\";\r\n      }}\r\n      onMouseLeave={(e) => {\r\n        (e.currentTarget as HTMLElement).style.boxShadow = \"none\";\r\n      }}\r\n    >\r\n      {data.image && (\r\n        <div\r\n          style={{\r\n            width: isHorizontal ? config.imageWidth : \"100%\",\r\n            height: isHorizontal ? \"100%\" : config.imageHeight,\r\n            minHeight: isHorizontal ? config.imageHeight : undefined,\r\n            flexShrink: isHorizontal ? 0 : undefined,\r\n            backgroundImage: `url(${data.image})`,\r\n            backgroundSize: \"cover\",\r\n            backgroundPosition: \"center\"\r\n          }}\r\n        />\r\n      )}\r\n      <div\r\n        style={{\r\n          padding: config.padding,\r\n          flex: isHorizontal ? 1 : undefined,\r\n          display: \"flex\",\r\n          flexDirection: \"column\",\r\n          justifyContent: \"center\"\r\n        }}\r\n      >\r\n        {data.title && (\r\n          <h3 style={{ margin: \"0 0 8px 0\", fontSize: config.titleSize }}>{data.title}</h3>\r\n        )}\r\n        {data.description && (\r\n          <p\r\n            style={\r\n              {\r\n                margin: 0,\r\n                fontSize: config.descriptionSize,\r\n                color: \"#666\",\r\n                display: \"-webkit-box\",\r\n                WebkitLineClamp: config.lineClamp,\r\n                WebkitBoxOrient: \"vertical\",\r\n                overflow: \"hidden\"\r\n              } as React.CSSProperties\r\n            }\r\n          >\r\n            {data.description}\r\n          </p>\r\n        )}\r\n      </div>\r\n    </a>\r\n  );\r\n}\r\n\r\nexport default LinkPreview;\r\n"],"names":["useState","useEffect"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../src/nextjs/components/LinkPreview.tsx"],"sourcesContent":["\"use client\";\n\n/**\n * Simple Link Preview Component\n *\n * Usage with custom image:\n *   <LinkPreview\n *     url=\"https://example.com\"\n *     title=\"Example\"\n *     description=\"Example description\"\n *     image=\"https://example.com/image.png\"\n *   />\n *\n * Usage with preset:\n *   <LinkPreview\n *     url=\"https://github.com/user/repo\"\n *     title=\"My Repo\"\n *     description=\"A cool repository\"\n *     preset=\"github\"\n *   />\n */\n\nimport React from \"react\";\n\nexport type LinkPreviewSize = \"small\" | \"medium\" | \"large\";\nexport type LinkPreviewLayout = \"vertical\" | \"horizontal\";\nexport type LinkPreviewPreset = \"github\" | \"npm\";\n\n// Inline SVG data URIs for preset images\nconst PRESET_IMAGES: Record<LinkPreviewPreset, string> = {\n  github: `data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iOTgiIGhlaWdodD0iOTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik00OC44NTQgMEMyMS44MzkgMCAwIDIyIDAgNDkuMjE3YzAgMjEuNzU2IDEzLjk5MyA0MC4xNzIgMzMuNDA1IDQ2LjY5IDIuNDI3LjQ5IDMuMzE2LTEuMDU5IDMuMzE2LTIuMzYyIDAtMS4xNDEtLjA4LTUuMDUyLS4wOC05LjEyNy0xMy41OSAyLjkzNC0xNi40Mi01Ljg2Ny0xNi40Mi01Ljg2Ny0yLjE4NC01LjcwNC01LjQyLTcuMTctNS40Mi03LjE3LTQuNDQ4LTMuMDE1LjMyNC0zLjAxNS4zMjQtMy4wMTUgNC45MzQuMzI2IDcuNTIzIDUuMDUyIDcuNTIzIDUuMDUyIDQuMzY3IDcuNDk2IDExLjQwNCA1LjM3OCAxNC4yMzUgNC4wNzQuNDA0LTMuMTc4IDEuNjk5LTUuMzc4IDMuMDc0LTYuNi0xMC44MzktMS4xNDEtMjIuMjQzLTUuMzc4LTIyLjI0My0yNC4yODMgMC01LjM3OCAxLjk0LTkuNzc4IDUuMDE0LTEzLjItLjQ4NS0xLjIyMi0yLjE4NC02LjI3NS40ODYtMTMuMDM4IDAgMCA0LjEyNS0xLjMwNCAxMy40MjYgNS4wNTJhNDYuOTcgNDYuOTcgMCAwIDEgMTIuMjE0LTEuNjNjNC4xMjUgMCA4LjMzLjU3MSAxMi4yMTMgMS42MyA5LjMwMi02LjM1NiAxMy40MjctNS4wNTIgMTMuNDI3LTUuMDUyIDIuNjcgNi43NjMuOTcgMTEuODE2LjQ4NSAxMy4wMzggMy4xNTUgMy40MjIgNS4wMTUgNy44MjIgNS4wMTUgMTMuMiAwIDE4LjkwNS0xMS40MDQgMjMuMDYtMjIuMzI0IDI0LjI4MyAxLjc4IDEuNTQ4IDMuMzE2IDQuNDgxIDMuMzE2IDkuMTI2IDAgNi42LS4wOCAxMS44OTctLjA4IDEzLjUyNiAwIDEuMzA0Ljg5IDIuODUzIDMuMzE2IDIuMzY0IDE5LjQxMi02LjUyIDMzLjQwNS0yNC45MzUgMzMuNDA1LTQ2LjY5MUM5Ny43MDcgMjIgNzUuNzg4IDAgNDguODU0IDB6IiBmaWxsPSIjMjQyOTJmIi8+PC9zdmc+`,\n  npm: \"https://avatars.githubusercontent.com/u/6078720?s=200&v=4\"\n};\n\nexport interface LinkPreviewProps {\n  url: string;\n  title: string;\n  description?: string;\n  image?: string;\n  preset?: LinkPreviewPreset;\n  size?: LinkPreviewSize;\n  layout?: LinkPreviewLayout;\n  width?: string | number;\n  height?: string | number;\n  className?: string;\n}\n\nconst sizeConfig = {\n  small: {\n    imageHeight: \"120px\",\n    imageWidth: \"120px\",\n    titleSize: \"14px\",\n    descriptionSize: \"12px\",\n    padding: \"8px\",\n    lineClamp: 1\n  },\n  medium: {\n    imageHeight: \"200px\",\n    imageWidth: \"200px\",\n    titleSize: \"16px\",\n    descriptionSize: \"14px\",\n    padding: \"12px\",\n    lineClamp: 2\n  },\n  large: {\n    imageHeight: \"300px\",\n    imageWidth: \"280px\",\n    titleSize: \"20px\",\n    descriptionSize: \"16px\",\n    padding: \"16px\",\n    lineClamp: 3\n  }\n};\n\nexport function LinkPreview({\n  url,\n  title,\n  description,\n  image,\n  preset,\n  size = \"medium\",\n  layout = \"vertical\",\n  width = \"100%\",\n  height = \"auto\",\n  className = \"\"\n}: LinkPreviewProps) {\n  const config = sizeConfig[size];\n  const isHorizontal = layout === \"horizontal\";\n\n  // Use preset image if no custom image provided\n  const imageUrl = image || (preset ? PRESET_IMAGES[preset] : undefined);\n\n  return (\n    <a\n      href={url}\n      target=\"_blank\"\n      rel=\"noopener noreferrer\"\n      className={`link-preview ${className}`}\n      style={{\n        display: isHorizontal ? \"flex\" : \"block\",\n        flexDirection: isHorizontal ? \"row\" : undefined,\n        width,\n        maxWidth: isHorizontal ? undefined : \"400px\",\n        height,\n        textDecoration: \"none\",\n        color: \"inherit\",\n        border: \"1px solid #e0e0e0\",\n        borderRadius: \"8px\",\n        overflow: \"hidden\",\n        transition: \"box-shadow 0.3s\"\n      }}\n      onMouseEnter={(e) => {\n        (e.currentTarget as HTMLElement).style.boxShadow = \"0 4px 12px rgba(0,0,0,0.15)\";\n      }}\n      onMouseLeave={(e) => {\n        (e.currentTarget as HTMLElement).style.boxShadow = \"none\";\n      }}\n    >\n      {imageUrl && (\n        <div\n          style={{\n            width: isHorizontal ? config.imageWidth : \"100%\",\n            height: isHorizontal ? \"100%\" : config.imageHeight,\n            minHeight: isHorizontal ? config.imageHeight : undefined,\n            flexShrink: isHorizontal ? 0 : undefined,\n            backgroundImage: `url(${imageUrl})`,\n            backgroundSize: preset ? \"contain\" : \"cover\",\n            backgroundPosition: \"center\",\n            backgroundRepeat: \"no-repeat\",\n            backgroundColor: preset ? \"#f6f8fa\" : \"transparent\"\n          }}\n        />\n      )}\n      <div\n        style={{\n          padding: config.padding,\n          flex: isHorizontal ? 1 : undefined,\n          display: \"flex\",\n          flexDirection: \"column\",\n          justifyContent: \"center\"\n        }}\n      >\n        <h3 style={{ margin: \"0 0 8px 0\", fontSize: config.titleSize }}>{title}</h3>\n        {description && (\n          <p\n            style={\n              {\n                margin: 0,\n                fontSize: config.descriptionSize,\n                color: \"#666\",\n                display: \"-webkit-box\",\n                WebkitLineClamp: config.lineClamp,\n                WebkitBoxOrient: \"vertical\",\n                overflow: \"hidden\"\n              } as React.CSSProperties\n            }\n          >\n            {description}\n          </p>\n        )}\n      </div>\n    </a>\n  );\n}\n\nexport default LinkPreview;\n"],"names":[],"mappings":"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"}

package/dist/types/nextjs/components/LinkPreview.d.ts

@@ -1,34 +1,38 @@
 /**
- * Next.js Link Preview Component
+ * Simple Link Preview Component
  *
- * This component uses the Next.js API route to fetch metadata server-side,
- * avoiding CORS issues entirely.
+ * Usage with custom image:
+ *   <LinkPreview
+ *     url="https://example.com"
+ *     title="Example"
+ *     description="Example description"
+ *     image="https://example.com/image.png"
+ *   />
  *
- * Usage:
- *   import { LinkPreview } from './components/LinkPreview';
- *
- *   <LinkPreview url="https://github.com" size="medium" />
+ * Usage with preset:
+ *   <LinkPreview
+ *     url="https://github.com/user/repo"
+ *     title="My Repo"
+ *     description="A cool repository"
+ *     preset="github"
+ *   />
  */
 import React from "react";
-export interface LinkPreviewData {
-    title: string;
-    description: string;
-    image: string;
-    url: string;
-}
 export type LinkPreviewSize = "small" | "medium" | "large";
 export type LinkPreviewLayout = "vertical" | "horizontal";
+export type LinkPreviewPreset = "github" | "npm";
 export interface LinkPreviewProps {
     url: string;
+    title: string;
+    description?: string;
+    image?: string;
+    preset?: LinkPreviewPreset;
     size?: LinkPreviewSize;
     layout?: LinkPreviewLayout;
     width?: string | number;
     height?: string | number;
     className?: string;
-    onError?: (error: Error) => void;
-    onLoad?: (data: LinkPreviewData) => void;
-    apiEndpoint?: string;
 }
-export declare function LinkPreview({ url, size, layout, width, height, className, onError, onLoad, apiEndpoint }: LinkPreviewProps): React.JSX.Element | null;
+export declare function LinkPreview({ url, title, description, image, preset, size, layout, width, height, className }: LinkPreviewProps): React.JSX.Element;
 export default LinkPreview;
 //# sourceMappingURL=LinkPreview.d.ts.map

package/dist/types/nextjs/components/LinkPreview.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"LinkPreview.d.ts","sourceRoot":"","sources":["../../../../src/nextjs/components/LinkPreview.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;GAUG;AAEH,OAAO,KAA8B,MAAM,OAAO,CAAC;AAEnD,MAAM,WAAW,eAAe;IAC9B,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,CAAC;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,GAAG,EAAE,MAAM,CAAC;CACb;AAED,MAAM,MAAM,eAAe,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AAC3D,MAAM,MAAM,iBAAiB,GAAG,UAAU,GAAG,YAAY,CAAC;AAE1D,MAAM,WAAW,gBAAgB;IAC/B,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,CAAC,EAAE,eAAe,CAAC;IACvB,MAAM,CAAC,EAAE,iBAAiB,CAAC;IAC3B,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;IACjC,MAAM,CAAC,EAAE,CAAC,IAAI,EAAE,eAAe,KAAK,IAAI,CAAC;IACzC,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AA6BD,wBAAgB,WAAW,CAAC,EAC1B,GAAG,EACH,IAAe,EACf,MAAmB,EACnB,KAAc,EACd,MAAe,EACf,SAAc,EACd,OAAO,EACP,MAAM,EACN,WAA4B,EAC7B,EAAE,gBAAgB,4BA+IlB;AAED,eAAe,WAAW,CAAC"}
+{"version":3,"file":"LinkPreview.d.ts","sourceRoot":"","sources":["../../../../src/nextjs/components/LinkPreview.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;;GAkBG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,MAAM,MAAM,eAAe,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AAC3D,MAAM,MAAM,iBAAiB,GAAG,UAAU,GAAG,YAAY,CAAC;AAC1D,MAAM,MAAM,iBAAiB,GAAG,QAAQ,GAAG,KAAK,CAAC;AAQjD,MAAM,WAAW,gBAAgB;IAC/B,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,iBAAiB,CAAC;IAC3B,IAAI,CAAC,EAAE,eAAe,CAAC;IACvB,MAAM,CAAC,EAAE,iBAAiB,CAAC;IAC3B,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AA6BD,wBAAgB,WAAW,CAAC,EAC1B,GAAG,EACH,KAAK,EACL,WAAW,EACX,KAAK,EACL,MAAM,EACN,IAAe,EACf,MAAmB,EACnB,KAAc,EACd,MAAe,EACf,SAAc,EACf,EAAE,gBAAgB,qBA8ElB;AAED,eAAe,WAAW,CAAC"}

package/package.json

@@ -1,80 +1,72 @@
-{
-  "name": "nextjs-link-preview",
-  "version": "1.0.5",
-  "type": "module",
-  "description": "A Next.js component for generating beautiful link preview cards with server-side metadata fetching - No CORS issues!",
-  "keywords": [
-    "nextjs",
-    "next",
-    "react",
-    "link-preview",
-    "preview",
-    "metadata",
-    "opengraph",
-    "og",
-    "card",
-    "component",
-    "typescript",
-    "server-side"
-  ],
-  "author": "Seth Carney",
-  "license": "MIT",
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/sethcarney/nextjs-link-preview.git"
-  },
-  "homepage": "https://github.com/sethcarney/nextjs-link-preview#readme",
-  "bugs": {
-    "url": "https://github.com/sethcarney/nextjs-link-preview/issues"
-  },
-  "publishConfig": {
-    "registry": "https://registry.npmjs.org/",
-    "access": "public"
-  },
-  "main": "dist/index.js",
-  "module": "dist/index.esm.js",
-  "types": "dist/index.d.ts",
-  "files": [
-    "dist",
-    "bin",
-    "README.md",
-    "LICENSE"
-  ],
-  "bin": {
-    "nextjs-link-preview": "bin/setup.js"
-  },
-  "scripts": {
-    "build": "rollup -c",
-    "build:watch": "rollup -c --watch",
-    "prepublishOnly": "npm run build",
-    "demo": "cd nextjs-demo && npm run dev",
-    "demo:install": "cd nextjs-demo && npm install",
-    "demo:build": "cd nextjs-demo && npm run build",
-    "dev:link": "npm link && cd nextjs-demo && npm link nextjs-link-preview && cd ..",
-    "dev:unlink": "cd nextjs-demo && npm unlink nextjs-link-preview && npm install nextjs-link-preview@latest && cd ..",
-    "format": "prettier --write \"**/*.{js,jsx,ts,tsx,json,md}\"",
-    "format:check": "prettier --check \"**/*.{js,jsx,ts,tsx,json,md}\""
-  },
-  "peerDependencies": {
-    "next": ">=14.0.0",
-    "react": ">=18.0.0",
-    "react-dom": ">=18.0.0"
-  },
-  "dependencies": {
-    "axios": "^1.6.0",
-    "cheerio": "^1.0.0-rc.12"
-  },
-  "devDependencies": {
-    "@rollup/plugin-commonjs": "^29.0.0",
-    "@rollup/plugin-node-resolve": "^16.0.3",
-    "@rollup/plugin-typescript": "^12.3.0",
-    "@types/react": "^19.2.2",
-    "@types/react-dom": "^19.2.2",
-    "prettier": "^3.6.2",
-    "rollup": "^4.53.1",
-    "rollup-plugin-dts": "^6.2.3",
-    "rollup-plugin-peer-deps-external": "^2.2.4",
-    "tslib": "^2.8.1",
-    "typescript": "^5.9.3"
-  }
-}
+{
+  "name": "nextjs-link-preview",
+  "version": "1.0.6",
+  "type": "module",
+  "description": "A simple, lightweight Next.js component for displaying beautiful link preview cards with preset image support",
+  "keywords": [
+    "nextjs",
+    "next",
+    "react",
+    "link-preview",
+    "preview",
+    "card",
+    "component",
+    "typescript",
+    "presentational",
+    "github",
+    "npm",
+    "preset"
+  ],
+  "author": "Seth Carney",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/sethcarney/nextjs-link-preview.git"
+  },
+  "homepage": "https://github.com/sethcarney/nextjs-link-preview#readme",
+  "bugs": {
+    "url": "https://github.com/sethcarney/nextjs-link-preview/issues"
+  },
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/",
+    "access": "public"
+  },
+  "main": "dist/index.js",
+  "module": "dist/index.esm.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist",
+    "bin",
+    "README.md",
+    "LICENSE"
+  ],
+  "bin": {
+    "nextjs-link-preview": "bin/setup.js"
+  },
+  "scripts": {
+    "build": "rollup -c",
+    "copy-component": "cp src/nextjs/components/LinkPreview.tsx nextjs-demo/src/components/LinkPreview.tsx",
+    "dev": "npm run copy-component && cd nextjs-demo && npm run dev",
+    "test": "npm run copy-component && cd nextjs-demo && npm run dev",
+    "prepublishOnly": "npm run build"
+  },
+  "peerDependencies": {
+    "next": ">=14.0.0",
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0"
+  },
+  "dependencies": {},
+  "devDependencies": {
+    "@rollup/plugin-commonjs": "^29.0.0",
+    "@rollup/plugin-node-resolve": "^16.0.3",
+    "@rollup/plugin-typescript": "^12.3.0",
+    "@types/react": "^19.2.2",
+    "@types/react-dom": "^19.2.2",
+    "prettier": "^3.6.2",
+    "rollup": "^4.53.1",
+    "rollup-plugin-dts": "^6.2.3",
+    "rollup-plugin-peer-deps-external": "^2.2.4",
+    "tslib": "^2.8.1",
+    "typescript": "^5.9.3"
+  }
+}

package/bin/setup.js

@@ -1,132 +0,0 @@
-#!/usr/bin/env node
-
-import fs from "fs";
-import path from "path";
-import { fileURLToPath } from "url";
-
-const __dirname = path.dirname(fileURLToPath(import.meta.url));
-
-const API_ROUTE_CONTENT = `import { NextRequest, NextResponse } from "next/server";
-import axios from "axios";
-import * as cheerio from "cheerio";
-
-// Simple in-memory cache with 1 hour TTL
-const cache = new Map<string, { data: any; timestamp: number }>();
-const CACHE_TTL = 60 * 60 * 1000; // 1 hour
-
-export async function GET(request: NextRequest) {
-  const searchParams = request.nextUrl.searchParams;
-  const targetUrl = searchParams.get("url");
-
-  if (!targetUrl) {
-    return NextResponse.json(
-      { error: "URL parameter is required" },
-      { status: 400 }
-    );
-  }
-
-  // Check cache first
-  const cached = cache.get(targetUrl);
-  if (cached && Date.now() - cached.timestamp < CACHE_TTL) {
-    return NextResponse.json(cached.data);
-  }
-
-  try {
-    const response = await axios.get(targetUrl, {
-      headers: {
-        "User-Agent": "Mozilla/5.0 (compatible; LinkPreviewBot/1.0)",
-      },
-      timeout: 10000,
-    });
-
-    const $ = cheerio.load(response.data);
-
-    const metadata = {
-      title:
-        $('meta[property="og:title"]').attr("content") ||
-        $('meta[name="twitter:title"]').attr("content") ||
-        $("title").text() ||
-        "",
-      description:
-        $('meta[property="og:description"]').attr("content") ||
-        $('meta[name="twitter:description"]').attr("content") ||
-        $('meta[name="description"]').attr("content") ||
-        "",
-      image:
-        $('meta[property="og:image"]').attr("content") ||
-        $('meta[name="twitter:image"]').attr("content") ||
-        "",
-      url: targetUrl,
-    };
-
-    // Store in cache
-    cache.set(targetUrl, { data: metadata, timestamp: Date.now() });
-
-    return NextResponse.json(metadata);
-  } catch (error) {
-    console.error("Error fetching preview:", error);
-    return NextResponse.json(
-      { error: "Failed to fetch preview" },
-      { status: 500 }
-    );
-  }
-}
-`;
-
-function setupApiRoute() {
-  const cwd = process.cwd();
-
-  // Check if we're in a Next.js project
-  const packageJsonPath = path.join(cwd, "package.json");
-  if (!fs.existsSync(packageJsonPath)) {
-    console.error(
-      "❌ Error: package.json not found. Make sure you're in a Next.js project directory."
-    );
-    process.exit(1);
-  }
-
-  const packageJson = JSON.parse(fs.readFileSync(packageJsonPath, "utf8"));
-  if (!packageJson.dependencies?.next && !packageJson.devDependencies?.next) {
-    console.error(
-      "❌ Error: Next.js not found in dependencies. Make sure this is a Next.js project."
-    );
-    process.exit(1);
-  }
-
-  // Detect if project uses src/app or app directory structure
-  const hasSrcApp = fs.existsSync(path.join(cwd, "src", "app"));
-  const appDir = hasSrcApp ? path.join(cwd, "src", "app") : path.join(cwd, "app");
-  const relativePath = hasSrcApp ? "src/app/api/preview/route.ts" : "app/api/preview/route.ts";
-
-  // Create the API route directory structure
-  const apiRoutePath = path.join(appDir, "api", "preview");
-  const routeFilePath = path.join(apiRoutePath, "route.ts");
-
-  // Check if route already exists
-  if (fs.existsSync(routeFilePath)) {
-    console.log(`⚠️  API route already exists at ${relativePath}`);
-    console.log("To reinstall, delete the existing file and run this command again.");
-    process.exit(0);
-  }
-
-  // Create directories
-  fs.mkdirSync(apiRoutePath, { recursive: true });
-
-  // Write the route file
-  fs.writeFileSync(routeFilePath, API_ROUTE_CONTENT);
-
-  console.log(`✅ Successfully created API route at ${relativePath}`);
-  console.log("");
-  console.log("📦 Make sure you have the required dependencies:");
-  console.log("   npm install axios cheerio");
-  console.log("");
-  console.log("🎉 Setup complete! You can now use the LinkPreview component:");
-  console.log("");
-  console.log('   import { LinkPreview } from "nextjs-link-preview";');
-  console.log("");
-  console.log("   export default function Page() {");
-  console.log('     return <LinkPreview url="https://github.com" />;');
-  console.log("   }");
-}
-
-setupApiRoute();