nextjs-link-preview 1.0.5 → 2.0.0

package/README.md

@@ -1,127 +1,189 @@
 # Next.js Link Preview
 
-A Next.js component for generating beautiful link preview cards with server-side metadata fetching.
+A simple, lightweight Next.js component for displaying beautiful link preview cards.
 
-**No CORS issues** - Works with GitHub, Twitter, Reddit, and any public URL!
+## Quick Start
 
-## Features
+### Option 1: Install as npm package
 
-- ✅ 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
+```bash
+npm install nextjs-link-preview
+```
 
-## Installation
+```tsx
+import { FaGithub } from "react-icons/fa";
+import { LinkPreview } from "nextjs-link-preview";
 
-```bash
-npm install nextjs-link-preview axios cheerio
+<LinkPreview
+  url="https://github.com/vercel/next.js"
+  title="Next.js"
+  description="The React Framework for the Web"
+  preset={FaGithub}
+/>;
 ```
 
-## Setup
+### Option 2: Copy to your project
 
-Run the setup command to create the API route:
+```bash
+npx nextjs-link-preview init
+```
+
+This copies the component source into `src/components/LinkPreview.tsx`. You own the code and can customize it however you want.
 
 ```bash
-npx nextjs-link-preview
+# Custom path
+npx nextjs-link-preview init --path src/ui/LinkPreview.tsx
 ```
 
-This creates the API route at `src/app/api/preview/route.ts` (or `app/api/preview/route.ts` depending on your project structure).
+## Features
+
+- Pure presentational component - no data fetching
+- Preset icon support via react-icons
+- Custom icon support (react-icons, lucide, heroicons, any React element)
+- Customizable text colors
+- Three size variants (small, medium, large)
+- Two layouts (vertical, horizontal)
+- TypeScript support
+- Fully customizable styling
+- CLI copy-to-source support
+- Peer deps only: React, Next.js, react-icons
 
 ## Usage
 
+### Basic Usage
+
 ```tsx
 import { LinkPreview } from "nextjs-link-preview";
 
 export default function Page() {
-  return <LinkPreview url="https://github.com" />;
+  return (
+    <LinkPreview
+      url="https://example.com"
+      title="Example Site"
+      description="This is an example website"
+      image="https://example.com/preview.png"
+    />
+  );
 }
 ```
 
-That's it! The component handles everything automatically.
+### With Preset Icons
 
-## Examples
+```tsx
+import { FaGithub, FaNpm } from "react-icons/fa";
 
-### Size Variants
+// GitHub
+<LinkPreview
+  url="https://github.com/user/repo"
+  title="My Repository"
+  description="A cool open source project"
+  preset={FaGithub}
+/>
 
-```tsx
-<LinkPreview url="https://github.com" size="small" />
-<LinkPreview url="https://github.com" size="medium" /> {/* default */}
-<LinkPreview url="https://github.com" size="large" />
+// npm
+<LinkPreview
+  url="https://npmjs.com/package/my-package"
+  title="my-package"
+  description="An awesome npm package"
+  preset={FaNpm}
+/>
 ```
 
-### Layouts
+### With Icons
+
+Pass any React element as an icon. Works with react-icons, lucide, heroicons, or plain SVGs:
 
 ```tsx
-<LinkPreview url="https://github.com" layout="vertical" /> {/* default */}
-<LinkPreview url="https://github.com" layout="horizontal" />
+import { FaGithub } from "react-icons/fa";
+
+<LinkPreview
+  url="https://github.com/user/repo"
+  title="My Repository"
+  description="A cool open source project"
+  icon={<FaGithub size={48} />}
+/>;
 ```
 
-### With Callbacks
+Priority order: `icon` > `image` > `preset`.
+
+### Custom Text Colors
 
 ```tsx
 <LinkPreview
-  url="https://github.com"
-  onLoad={(data) => console.log("Loaded:", data)}
-  onError={(error) => console.error("Error:", error)}
+  url="https://example.com"
+  title="Styled Preview"
+  description="With custom colors"
+  image="https://example.com/preview.png"
+  titleColor="#1a1a2e"
+  descriptionColor="#999"
 />
 ```
 
-### Custom Styling
+### Size Variants
 
 ```tsx
-<LinkPreview url="https://github.com" width="400px" className="my-custom-class" />
+<LinkPreview url="..." title="..." image="..." size="small" />
+<LinkPreview url="..." title="..." image="..." size="medium" /> {/* default */}
+<LinkPreview url="..." title="..." image="..." size="large" />
 ```
 
-## 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  |
+### Layouts
 
-## Development
+```tsx
+{/* Vertical (default) - image on top */}
+<LinkPreview url="..." title="..." image="..." layout="vertical" />
 
-```bash
-# Run demo
-npm run demo
+{/* Horizontal - image on left */}
+<LinkPreview url="..." title="..." image="..." layout="horizontal" />
+```
 
-# Build package
-npm run build
+### Custom Styling
 
-# Format code
-npm run format
+```tsx
+<LinkPreview
+  url="https://example.com"
+  title="Example"
+  image="..."
+  width="400px"
+  className="my-custom-class"
+/>
 ```
 
-## How It Works
+## Props
+
+| Prop               | Type                                 | Default      | Description                                            |
+| ------------------ | ------------------------------------ | ------------ | ------------------------------------------------------ |
+| `url`              | `string`                             | **required** | Link destination                                       |
+| `title`            | `string`                             | **required** | Preview card title                                     |
+| `description`      | `string`                             | `undefined`  | Preview card description                               |
+| `image`            | `string`                             | `undefined`  | Custom image URL                                       |
+| `preset`           | `IconType`                           | `undefined`  | Preset icon component (from react-icons)               |
+| `icon`             | `React.ReactNode`                    | `undefined`  | Custom icon element (takes priority over image/preset) |
+| `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                                 |
+| `titleColor`       | `string`                             | `undefined`  | Custom title text color                                |
+| `descriptionColor` | `string`                             | `"#666"`     | Custom description text color                          |
+
+## Preset Icons
+
+Pass any react-icons component as the `preset` prop. This gives you access to the full react-icons catalog.
 
-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
+## Testing
 
-### Caching Behavior
+To test the component locally:
 
-The API route includes built-in caching to improve performance and prevent websites from blocking automated requests:
+```bash
+npm test
+```
 
-- **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
+This will:
 
-If you need to customize the cache TTL, you can modify the `CACHE_TTL` constant in your generated API route file.
+1. Build the component
+2. Start the demo at http://localhost:3000
+3. Open your browser to see the interactive demo
 
 ## License
 

package/bin/cli.mjs

@@ -0,0 +1,86 @@
+#!/usr/bin/env node
+
+import { readFileSync, writeFileSync, mkdirSync, existsSync } from "node:fs";
+import { resolve, dirname, join } from "node:path";
+import { fileURLToPath } from "node:url";
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+
+const args = process.argv.slice(2);
+const command = args[0];
+
+if (!command || command === "--help" || command === "-h") {
+  console.log(`
+nextjs-link-preview CLI
+
+Usage:
+  npx nextjs-link-preview init [--path <destination>]
+
+Commands:
+  init    Copy the LinkPreview component into your project
+
+Options:
+  --path  Destination path (default: src/components/LinkPreview.tsx)
+  --help  Show this help message
+`);
+  process.exit(command === "--help" || command === "-h" ? 0 : 1);
+}
+
+if (command !== "init") {
+  console.error(`Unknown command: ${command}`);
+  console.error('Run "npx nextjs-link-preview --help" for usage info.');
+  process.exit(1);
+}
+
+// Parse --path flag
+let destPath = "src/components/LinkPreview.tsx";
+const pathIndex = args.indexOf("--path");
+if (pathIndex !== -1 && args[pathIndex + 1]) {
+  destPath = args[pathIndex + 1];
+}
+
+const sourcePath = join(__dirname, "..", "src", "nextjs", "components", "LinkPreview.tsx");
+const targetPath = resolve(process.cwd(), destPath);
+const targetDir = dirname(targetPath);
+
+if (!existsSync(sourcePath)) {
+  console.error("Error: Could not find LinkPreview.tsx source file.");
+  console.error("This may be a packaging issue. Please report it at:");
+  console.error("https://github.com/sethcarney/nextjs-link-preview/issues");
+  process.exit(1);
+}
+
+if (existsSync(targetPath)) {
+  console.log(`File already exists at: ${destPath}`);
+  console.log("Overwriting with the latest version...\n");
+}
+
+if (!existsSync(targetDir)) {
+  mkdirSync(targetDir, { recursive: true });
+}
+
+try {
+  const source = readFileSync(sourcePath, "utf-8");
+  writeFileSync(targetPath, source, "utf-8");
+
+  const importPath = destPath.replace(/\.tsx$/, "").replace(/\\/g, "/");
+  console.log(`
+LinkPreview component copied to: ${destPath}
+
+Usage:
+  import { LinkPreview } from './${importPath}';
+
+  <LinkPreview
+    url="https://github.com/user/repo"
+    title="My Repo"
+    description="A cool repository"
+    preset="github"
+  />
+
+The component is now yours to customize!
+`);
+} catch (err) {
+  console.error("Error copying component:", err.message);
+  process.exit(1);
+}

package/dist/index.d.ts

@@ -1,37 +1,41 @@
 import React from 'react';
+import { IconType } from 'react-icons';
 
 /**
- * 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="..." title="..." image="https://example.com/image.png" />
  *
- * Usage:
- *   import { LinkPreview } from './components/LinkPreview';
+ * Usage with preset icon (react-icons component):
+ *   <LinkPreview url="..." title="..." preset={FaGithub} />
  *
- *   <LinkPreview url="https://github.com" size="medium" />
+ * Usage with icon (any React element, e.g. react-icons):
+ *   <LinkPreview url="..." title="..." icon={<FaGithub size={48} />} />
+ *
+ * Usage with custom text colors:
+ *   <LinkPreview url="..." title="..." titleColor="#333" descriptionColor="#999" />
  */
 
-interface LinkPreviewData {
-    title: string;
-    description: string;
-    image: string;
-    url: string;
-}
 type LinkPreviewSize = "small" | "medium" | "large";
 type LinkPreviewLayout = "vertical" | "horizontal";
+type LinkPreviewPreset = IconType;
 interface LinkPreviewProps {
     url: string;
+    title: string;
+    description?: string;
+    image?: string;
+    preset?: LinkPreviewPreset;
+    icon?: React.ReactNode;
     size?: LinkPreviewSize;
     layout?: LinkPreviewLayout;
     width?: string | number;
     height?: string | number;
     className?: string;
-    onError?: (error: Error) => void;
-    onLoad?: (data: LinkPreviewData) => void;
-    apiEndpoint?: string;
+    titleColor?: string;
+    descriptionColor?: 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, icon, size, layout, width, height, className, titleColor, descriptionColor }: 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,5 +1,5 @@
 'use client';
-import React, { useState, useEffect } from 'react';
+import React from 'react';
 
 const sizeConfig = {
     small: {
@@ -27,65 +27,17 @@ 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, icon, size = "medium", layout = "vertical", width = "100%", height = "auto", className = "", titleColor, descriptionColor }) {
     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";
+    const PresetIcon = preset;
+    const iconSize = size === "large" ? 96 : size === "medium" ? 64 : 48;
+    const iconFontSize = size === "large" ? "96px" : size === "medium" ? "64px" : "48px";
     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,15 +50,36 @@ function LinkPreview({ url, size = "medium", layout = "vertical", width = "100%"
         }, onMouseLeave: (e) => {
             e.currentTarget.style.boxShadow = "none";
         } },
-        data.image && (React.createElement("div", { style: {
+        icon ? (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})`,
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+                backgroundColor: "#f6f8fa",
+                fontSize: iconFontSize
+            } }, icon)) : image ? (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(${image})`,
                 backgroundSize: "cover",
-                backgroundPosition: "center"
-            } })),
+                backgroundPosition: "center",
+                backgroundRepeat: "no-repeat"
+            } })) : PresetIcon ? (React.createElement("div", { style: {
+                width: isHorizontal ? config.imageWidth : "100%",
+                height: isHorizontal ? "100%" : config.imageHeight,
+                minHeight: isHorizontal ? config.imageHeight : undefined,
+                flexShrink: isHorizontal ? 0 : undefined,
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+                backgroundColor: "#f6f8fa"
+            } },
+            React.createElement(PresetIcon, { size: iconSize }))) : null,
         React.createElement("div", { style: {
                 padding: config.padding,
                 flex: isHorizontal ? 1 : undefined,
@@ -114,16 +87,16 @@ 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, color: titleColor } }, title),
+            description && (React.createElement("p", { style: {
                     margin: 0,
                     fontSize: config.descriptionSize,
-                    color: "#666",
+                    color: descriptionColor || "#666",
                     display: "-webkit-box",
                     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\";\r\n\r\n/**\r\n * Simple Link Preview Component\r\n *\r\n * Usage with custom image:\r\n *   <LinkPreview url=\"...\" title=\"...\" image=\"https://example.com/image.png\" />\r\n *\r\n * Usage with preset icon (react-icons component):\r\n *   <LinkPreview url=\"...\" title=\"...\" preset={FaGithub} />\r\n *\r\n * Usage with icon (any React element, e.g. react-icons):\r\n *   <LinkPreview url=\"...\" title=\"...\" icon={<FaGithub size={48} />} />\r\n *\r\n * Usage with custom text colors:\r\n *   <LinkPreview url=\"...\" title=\"...\" titleColor=\"#333\" descriptionColor=\"#999\" />\r\n */\r\n\r\nimport React from \"react\";\r\nimport type { IconType } from \"react-icons\";\r\n\r\nexport type LinkPreviewSize = \"small\" | \"medium\" | \"large\";\r\nexport type LinkPreviewLayout = \"vertical\" | \"horizontal\";\r\nexport type LinkPreviewPreset = IconType;\r\n\r\nexport interface LinkPreviewProps {\r\n  url: string;\r\n  title: string;\r\n  description?: string;\r\n  image?: string;\r\n  preset?: LinkPreviewPreset;\r\n  icon?: React.ReactNode;\r\n  size?: LinkPreviewSize;\r\n  layout?: LinkPreviewLayout;\r\n  width?: string | number;\r\n  height?: string | number;\r\n  className?: string;\r\n  titleColor?: string;\r\n  descriptionColor?: string;\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  title,\r\n  description,\r\n  image,\r\n  preset,\r\n  icon,\r\n  size = \"medium\",\r\n  layout = \"vertical\",\r\n  width = \"100%\",\r\n  height = \"auto\",\r\n  className = \"\",\r\n  titleColor,\r\n  descriptionColor\r\n}: LinkPreviewProps) {\r\n  const config = sizeConfig[size];\r\n  const isHorizontal = layout === \"horizontal\";\r\n\r\n  const PresetIcon = preset;\r\n  const iconSize = size === \"large\" ? 96 : size === \"medium\" ? 64 : 48;\r\n  const iconFontSize = size === \"large\" ? \"96px\" : size === \"medium\" ? \"64px\" : \"48px\";\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        maxWidth: isHorizontal ? undefined : \"400px\",\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      {icon ? (\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            display: \"flex\",\r\n            alignItems: \"center\",\r\n            justifyContent: \"center\",\r\n            backgroundColor: \"#f6f8fa\",\r\n            fontSize: iconFontSize\r\n          }}\r\n        >\r\n          {icon}\r\n        </div>\r\n      ) : 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(${image})`,\r\n            backgroundSize: \"cover\",\r\n            backgroundPosition: \"center\",\r\n            backgroundRepeat: \"no-repeat\"\r\n          }}\r\n        />\r\n      ) : PresetIcon ? (\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            display: \"flex\",\r\n            alignItems: \"center\",\r\n            justifyContent: \"center\",\r\n            backgroundColor: \"#f6f8fa\"\r\n          }}\r\n        >\r\n          <PresetIcon size={iconSize} />\r\n        </div>\r\n      ) : null}\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        <h3 style={{ margin: \"0 0 8px 0\", fontSize: config.titleSize, color: titleColor }}>{title}</h3>\r\n        {description && (\r\n          <p\r\n            style={\r\n              {\r\n                margin: 0,\r\n                fontSize: config.descriptionSize,\r\n                color: descriptionColor || \"#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            {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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"}

package/dist/index.js

@@ -31,65 +31,17 @@ 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, icon, size = "medium", layout = "vertical", width = "100%", height = "auto", className = "", titleColor, descriptionColor }) {
     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";
+    const PresetIcon = preset;
+    const iconSize = size === "large" ? 96 : size === "medium" ? 64 : 48;
+    const iconFontSize = size === "large" ? "96px" : size === "medium" ? "64px" : "48px";
     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,15 +54,36 @@ function LinkPreview({ url, size = "medium", layout = "vertical", width = "100%"
         }, onMouseLeave: (e) => {
             e.currentTarget.style.boxShadow = "none";
         } },
-        data.image && (React.createElement("div", { style: {
+        icon ? (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})`,
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+                backgroundColor: "#f6f8fa",
+                fontSize: iconFontSize
+            } }, icon)) : image ? (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(${image})`,
                 backgroundSize: "cover",
-                backgroundPosition: "center"
-            } })),
+                backgroundPosition: "center",
+                backgroundRepeat: "no-repeat"
+            } })) : PresetIcon ? (React.createElement("div", { style: {
+                width: isHorizontal ? config.imageWidth : "100%",
+                height: isHorizontal ? "100%" : config.imageHeight,
+                minHeight: isHorizontal ? config.imageHeight : undefined,
+                flexShrink: isHorizontal ? 0 : undefined,
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+                backgroundColor: "#f6f8fa"
+            } },
+            React.createElement(PresetIcon, { size: iconSize }))) : null,
         React.createElement("div", { style: {
                 padding: config.padding,
                 flex: isHorizontal ? 1 : undefined,
@@ -118,16 +91,16 @@ 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, color: titleColor } }, title),
+            description && (React.createElement("p", { style: {
                     margin: 0,
                     fontSize: config.descriptionSize,
-                    color: "#666",
+                    color: descriptionColor || "#666",
                     display: "-webkit-box",
                     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\";\r\n\r\n/**\r\n * Simple Link Preview Component\r\n *\r\n * Usage with custom image:\r\n *   <LinkPreview url=\"...\" title=\"...\" image=\"https://example.com/image.png\" />\r\n *\r\n * Usage with preset icon (react-icons component):\r\n *   <LinkPreview url=\"...\" title=\"...\" preset={FaGithub} />\r\n *\r\n * Usage with icon (any React element, e.g. react-icons):\r\n *   <LinkPreview url=\"...\" title=\"...\" icon={<FaGithub size={48} />} />\r\n *\r\n * Usage with custom text colors:\r\n *   <LinkPreview url=\"...\" title=\"...\" titleColor=\"#333\" descriptionColor=\"#999\" />\r\n */\r\n\r\nimport React from \"react\";\r\nimport type { IconType } from \"react-icons\";\r\n\r\nexport type LinkPreviewSize = \"small\" | \"medium\" | \"large\";\r\nexport type LinkPreviewLayout = \"vertical\" | \"horizontal\";\r\nexport type LinkPreviewPreset = IconType;\r\n\r\nexport interface LinkPreviewProps {\r\n  url: string;\r\n  title: string;\r\n  description?: string;\r\n  image?: string;\r\n  preset?: LinkPreviewPreset;\r\n  icon?: React.ReactNode;\r\n  size?: LinkPreviewSize;\r\n  layout?: LinkPreviewLayout;\r\n  width?: string | number;\r\n  height?: string | number;\r\n  className?: string;\r\n  titleColor?: string;\r\n  descriptionColor?: string;\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  title,\r\n  description,\r\n  image,\r\n  preset,\r\n  icon,\r\n  size = \"medium\",\r\n  layout = \"vertical\",\r\n  width = \"100%\",\r\n  height = \"auto\",\r\n  className = \"\",\r\n  titleColor,\r\n  descriptionColor\r\n}: LinkPreviewProps) {\r\n  const config = sizeConfig[size];\r\n  const isHorizontal = layout === \"horizontal\";\r\n\r\n  const PresetIcon = preset;\r\n  const iconSize = size === \"large\" ? 96 : size === \"medium\" ? 64 : 48;\r\n  const iconFontSize = size === \"large\" ? \"96px\" : size === \"medium\" ? \"64px\" : \"48px\";\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        maxWidth: isHorizontal ? undefined : \"400px\",\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      {icon ? (\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            display: \"flex\",\r\n            alignItems: \"center\",\r\n            justifyContent: \"center\",\r\n            backgroundColor: \"#f6f8fa\",\r\n            fontSize: iconFontSize\r\n          }}\r\n        >\r\n          {icon}\r\n        </div>\r\n      ) : 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(${image})`,\r\n            backgroundSize: \"cover\",\r\n            backgroundPosition: \"center\",\r\n            backgroundRepeat: \"no-repeat\"\r\n          }}\r\n        />\r\n      ) : PresetIcon ? (\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            display: \"flex\",\r\n            alignItems: \"center\",\r\n            justifyContent: \"center\",\r\n            backgroundColor: \"#f6f8fa\"\r\n          }}\r\n        >\r\n          <PresetIcon size={iconSize} />\r\n        </div>\r\n      ) : null}\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        <h3 style={{ margin: \"0 0 8px 0\", fontSize: config.titleSize, color: titleColor }}>{title}</h3>\r\n        {description && (\r\n          <p\r\n            style={\r\n              {\r\n                margin: 0,\r\n                fontSize: config.descriptionSize,\r\n                color: descriptionColor || \"#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            {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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"}

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="..." title="..." image="https://example.com/image.png" />
  *
- * Usage:
- *   import { LinkPreview } from './components/LinkPreview';
+ * Usage with preset icon (react-icons component):
+ *   <LinkPreview url="..." title="..." preset={FaGithub} />
  *
- *   <LinkPreview url="https://github.com" size="medium" />
+ * Usage with icon (any React element, e.g. react-icons):
+ *   <LinkPreview url="..." title="..." icon={<FaGithub size={48} />} />
+ *
+ * Usage with custom text colors:
+ *   <LinkPreview url="..." title="..." titleColor="#333" descriptionColor="#999" />
  */
 import React from "react";
-export interface LinkPreviewData {
-    title: string;
-    description: string;
-    image: string;
-    url: string;
-}
+import type { IconType } from "react-icons";
 export type LinkPreviewSize = "small" | "medium" | "large";
 export type LinkPreviewLayout = "vertical" | "horizontal";
+export type LinkPreviewPreset = IconType;
 export interface LinkPreviewProps {
     url: string;
+    title: string;
+    description?: string;
+    image?: string;
+    preset?: LinkPreviewPreset;
+    icon?: React.ReactNode;
     size?: LinkPreviewSize;
     layout?: LinkPreviewLayout;
     width?: string | number;
     height?: string | number;
     className?: string;
-    onError?: (error: Error) => void;
-    onLoad?: (data: LinkPreviewData) => void;
-    apiEndpoint?: string;
+    titleColor?: string;
+    descriptionColor?: 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, icon, size, layout, width, height, className, titleColor, descriptionColor }: 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;;;;;;;;;;;;;;GAcG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAE5C,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,CAAC;AAEzC,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,KAAK,CAAC,SAAS,CAAC;IACvB,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,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B;AA6BD,wBAAgB,WAAW,CAAC,EAC1B,GAAG,EACH,KAAK,EACL,WAAW,EACX,KAAK,EACL,MAAM,EACN,IAAI,EACJ,IAAe,EACf,MAAmB,EACnB,KAAc,EACd,MAAe,EACf,SAAc,EACd,UAAU,EACV,gBAAgB,EACjB,EAAE,gBAAgB,qBA6GlB;AAED,eAAe,WAAW,CAAC"}

package/package.json

@@ -1,21 +1,21 @@
 {
   "name": "nextjs-link-preview",
-  "version": "1.0.5",
+  "version": "2.0.0",
   "type": "module",
-  "description": "A Next.js component for generating beautiful link preview cards with server-side metadata fetching - No CORS issues!",
+  "description": "A simple, lightweight Next.js component for displaying beautiful link preview cards with preset image support",
   "keywords": [
     "nextjs",
     "next",
     "react",
     "link-preview",
     "preview",
-    "metadata",
-    "opengraph",
-    "og",
     "card",
     "component",
     "typescript",
-    "server-side"
+    "presentational",
+    "github",
+    "npm",
+    "preset"
   ],
   "author": "Seth Carney",
   "license": "MIT",
@@ -34,45 +34,38 @@
   "main": "dist/index.js",
   "module": "dist/index.esm.js",
   "types": "dist/index.d.ts",
+  "bin": {
+    "nextjs-link-preview": "bin/cli.mjs"
+  },
   "files": [
     "dist",
     "bin",
+    "src/nextjs/components/LinkPreview.tsx",
     "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}\""
+    "dev": "node bin/cli.mjs init --path nextjs-demo/src/components/LinkPreview.tsx && cd nextjs-demo && npm run dev",
+    "test": "node bin/cli.mjs init --path nextjs-demo/src/components/LinkPreview.tsx && 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": {
-    "axios": "^1.6.0",
-    "cheerio": "^1.0.0-rc.12"
+    "react-dom": ">=18.0.0",
+    "react-icons": ">=4.0.0"
   },
   "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",
+    "@types/react": "^19.2.13",
+    "@types/react-dom": "^19.2.3",
+    "prettier": "^3.8.1",
+    "react-icons": "^5.5.0",
+    "rollup": "^4.57.1",
+    "rollup-plugin-dts": "^6.3.0",
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "tslib": "^2.8.1",
     "typescript": "^5.9.3"

package/src/nextjs/components/LinkPreview.tsx

@@ -0,0 +1,194 @@
+"use client";
+
+/**
+ * Simple Link Preview Component
+ *
+ * Usage with custom image:
+ *   <LinkPreview url="..." title="..." image="https://example.com/image.png" />
+ *
+ * Usage with preset icon (react-icons component):
+ *   <LinkPreview url="..." title="..." preset={FaGithub} />
+ *
+ * Usage with icon (any React element, e.g. react-icons):
+ *   <LinkPreview url="..." title="..." icon={<FaGithub size={48} />} />
+ *
+ * Usage with custom text colors:
+ *   <LinkPreview url="..." title="..." titleColor="#333" descriptionColor="#999" />
+ */
+
+import React from "react";
+import type { IconType } from "react-icons";
+
+export type LinkPreviewSize = "small" | "medium" | "large";
+export type LinkPreviewLayout = "vertical" | "horizontal";
+export type LinkPreviewPreset = IconType;
+
+export interface LinkPreviewProps {
+  url: string;
+  title: string;
+  description?: string;
+  image?: string;
+  preset?: LinkPreviewPreset;
+  icon?: React.ReactNode;
+  size?: LinkPreviewSize;
+  layout?: LinkPreviewLayout;
+  width?: string | number;
+  height?: string | number;
+  className?: string;
+  titleColor?: string;
+  descriptionColor?: string;
+}
+
+const sizeConfig = {
+  small: {
+    imageHeight: "120px",
+    imageWidth: "120px",
+    titleSize: "14px",
+    descriptionSize: "12px",
+    padding: "8px",
+    lineClamp: 1
+  },
+  medium: {
+    imageHeight: "200px",
+    imageWidth: "200px",
+    titleSize: "16px",
+    descriptionSize: "14px",
+    padding: "12px",
+    lineClamp: 2
+  },
+  large: {
+    imageHeight: "300px",
+    imageWidth: "280px",
+    titleSize: "20px",
+    descriptionSize: "16px",
+    padding: "16px",
+    lineClamp: 3
+  }
+};
+
+export function LinkPreview({
+  url,
+  title,
+  description,
+  image,
+  preset,
+  icon,
+  size = "medium",
+  layout = "vertical",
+  width = "100%",
+  height = "auto",
+  className = "",
+  titleColor,
+  descriptionColor
+}: LinkPreviewProps) {
+  const config = sizeConfig[size];
+  const isHorizontal = layout === "horizontal";
+
+  const PresetIcon = preset;
+  const iconSize = size === "large" ? 96 : size === "medium" ? 64 : 48;
+  const iconFontSize = size === "large" ? "96px" : size === "medium" ? "64px" : "48px";
+
+  return (
+    <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",
+        border: "1px solid #e0e0e0",
+        borderRadius: "8px",
+        overflow: "hidden",
+        transition: "box-shadow 0.3s"
+      }}
+      onMouseEnter={(e) => {
+        (e.currentTarget as HTMLElement).style.boxShadow = "0 4px 12px rgba(0,0,0,0.15)";
+      }}
+      onMouseLeave={(e) => {
+        (e.currentTarget as HTMLElement).style.boxShadow = "none";
+      }}
+    >
+      {icon ? (
+        <div
+          style={{
+            width: isHorizontal ? config.imageWidth : "100%",
+            height: isHorizontal ? "100%" : config.imageHeight,
+            minHeight: isHorizontal ? config.imageHeight : undefined,
+            flexShrink: isHorizontal ? 0 : undefined,
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            backgroundColor: "#f6f8fa",
+            fontSize: iconFontSize
+          }}
+        >
+          {icon}
+        </div>
+      ) : image ? (
+        <div
+          style={{
+            width: isHorizontal ? config.imageWidth : "100%",
+            height: isHorizontal ? "100%" : config.imageHeight,
+            minHeight: isHorizontal ? config.imageHeight : undefined,
+            flexShrink: isHorizontal ? 0 : undefined,
+            backgroundImage: `url(${image})`,
+            backgroundSize: "cover",
+            backgroundPosition: "center",
+            backgroundRepeat: "no-repeat"
+          }}
+        />
+      ) : PresetIcon ? (
+        <div
+          style={{
+            width: isHorizontal ? config.imageWidth : "100%",
+            height: isHorizontal ? "100%" : config.imageHeight,
+            minHeight: isHorizontal ? config.imageHeight : undefined,
+            flexShrink: isHorizontal ? 0 : undefined,
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            backgroundColor: "#f6f8fa"
+          }}
+        >
+          <PresetIcon size={iconSize} />
+        </div>
+      ) : null}
+      <div
+        style={{
+          padding: config.padding,
+          flex: isHorizontal ? 1 : undefined,
+          display: "flex",
+          flexDirection: "column",
+          justifyContent: "center"
+        }}
+      >
+        <h3 style={{ margin: "0 0 8px 0", fontSize: config.titleSize, color: titleColor }}>{title}</h3>
+        {description && (
+          <p
+            style={
+              {
+                margin: 0,
+                fontSize: config.descriptionSize,
+                color: descriptionColor || "#666",
+                display: "-webkit-box",
+                WebkitLineClamp: config.lineClamp,
+                WebkitBoxOrient: "vertical",
+                overflow: "hidden"
+              } as React.CSSProperties
+            }
+          >
+            {description}
+          </p>
+        )}
+      </div>
+    </a>
+  );
+}
+
+export default LinkPreview;

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();