favicon-stealer 1.0.0

package/dist/lib/utils/index.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getDomain = void 0;
+const getDomain = (url) => {
+    try {
+        // Add https:// protocol if not present
+        const urlWithProtocol = url.startsWith('http') ? url : `https://${url}`;
+        const domain = new URL(urlWithProtocol).hostname;
+        // Remove 'www.' prefix if exists
+        return domain.replace(/^www\./, '');
+    }
+    catch (error) {
+        // Return original input if URL parsing fails
+        return url;
+    }
+};
+exports.getDomain = getDomain;

package/dist/src/Favicon.js

@@ -0,0 +1,93 @@
+"use strict";
+"use client";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+const utils_1 = require("@/lib/utils");
+const react_1 = __importStar(require("react"));
+const Favicon = ({ url, size = 32, className = "", timeout = 1000, // 1 second
+ }) => {
+    const domain = (0, utils_1.getDomain)(url);
+    const [imgSrc, setImgSrc] = (0, react_1.useState)(`https://${domain}/logo.svg`);
+    const [fallbackIndex, setFallbackIndex] = (0, react_1.useState)(0);
+    const [isLoading, setIsLoading] = (0, react_1.useState)(true);
+    const [hasError, setHasError] = (0, react_1.useState)(false);
+    const fallbackSources = [
+        `https://${domain}/logo.svg`,
+        `https://${domain}/logo.png`,
+        `https://${domain}/apple-touch-icon.png`,
+        `https://${domain}/apple-touch-icon-precomposed.png`,
+        `https://www.google.com/s2/favicons?domain=${domain}&sz=64`,
+        `https://icons.duckduckgo.com/ip3/${domain}.ico`,
+        `https://${domain}/favicon.ico`,
+    ];
+    (0, react_1.useEffect)(() => {
+        let timeoutId;
+        if (isLoading) {
+            timeoutId = setTimeout(() => {
+                handleError();
+            }, timeout);
+        }
+        return () => {
+            if (timeoutId) {
+                clearTimeout(timeoutId);
+            }
+        };
+    }, [imgSrc, isLoading]);
+    const handleError = () => {
+        const nextIndex = fallbackIndex + 1;
+        if (nextIndex < fallbackSources.length) {
+            setFallbackIndex(nextIndex);
+            setImgSrc(fallbackSources[nextIndex]);
+            setIsLoading(true);
+        }
+        else {
+            setHasError(true);
+            setIsLoading(false);
+        }
+    };
+    const handleLoad = () => {
+        setIsLoading(false);
+        setHasError(false);
+    };
+    return (react_1.default.createElement("div", { className: `relative inline-block ${className}`, style: { width: size, height: size } },
+        isLoading && (react_1.default.createElement("div", { className: "absolute inset-0 animate-pulse" },
+            react_1.default.createElement("div", { className: "w-full h-full rounded-md bg-gray-200/60" }))),
+        react_1.default.createElement("img", { src: imgSrc, alt: `${domain} logo`, width: size, height: size, onError: handleError, onLoad: handleLoad, className: `inline-block transition-opacity duration-300 ${isLoading ? "opacity-0" : "opacity-100"}`, style: {
+                objectFit: "contain",
+                display: hasError ? "none" : "inline-block",
+            } }),
+        hasError && (react_1.default.createElement("div", { className: "w-full h-full flex items-center justify-center bg-gray-100 rounded-md", style: { fontSize: `${size * 0.5}px` } }, domain.charAt(0).toUpperCase()))));
+};
+exports.default = Favicon;

package/dist/src/index.js

@@ -0,0 +1,8 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Favicon = void 0;
+var Favicon_1 = require("./Favicon");
+Object.defineProperty(exports, "Favicon", { enumerable: true, get: function () { return __importDefault(Favicon_1).default; } });

package/dist/types/lib/utils/index.d.ts

@@ -0,0 +1 @@
+export declare const getDomain: (url: string) => string;

package/dist/types/src/Favicon.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+interface IProps {
+    url: string;
+    size?: number;
+    className?: string;
+    timeout?: number;
+}
+declare const Favicon: ({ url, size, className, timeout, }: IProps) => React.JSX.Element;
+export default Favicon;

package/dist/types/src/index.d.ts

@@ -0,0 +1 @@
+export { default as Favicon } from './Favicon';

package/lib/utils/index.ts

@@ -0,0 +1,12 @@
+export const getDomain = (url: string) => {
+  try {
+    // Add https:// protocol if not present
+    const urlWithProtocol = url.startsWith('http') ? url : `https://${url}`;
+    const domain = new URL(urlWithProtocol).hostname;
+    // Remove 'www.' prefix if exists
+    return domain.replace(/^www\./, '');
+  } catch (error) {
+    // Return original input if URL parsing fails
+    return url;
+  }
+};

package/package.json

@@ -0,0 +1,23 @@
+{
+  "name": "favicon-stealer",
+  "version": "1.0.0",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "build": "tsc",
+    "prepublishOnly": "npm run build"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "description": "",
+  "dependencies": {
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^19.0.7",
+    "@types/react-dom": "^19.0.3",
+    "typescript": "^5.7.3"
+  }
+}

package/src/Favicon.tsx

@@ -0,0 +1,109 @@
+"use client";
+
+import { getDomain } from "@/lib/utils";
+import React, { useEffect, useState } from "react";
+
+interface IProps {
+  url: string;
+  size?: number;
+  className?: string;
+  timeout?: number;
+}
+
+const Favicon = ({
+  url,
+  size = 32,
+  className = "",
+  timeout = 1000, // 1 second
+}: IProps) => {
+  const domain = getDomain(url);
+  const [imgSrc, setImgSrc] = useState(`https://${domain}/logo.svg`);
+  const [fallbackIndex, setFallbackIndex] = useState(0);
+  const [isLoading, setIsLoading] = useState(true);
+  const [hasError, setHasError] = useState(false);
+
+  const fallbackSources = [
+    `https://${domain}/logo.svg`,
+    `https://${domain}/logo.png`,
+    `https://${domain}/apple-touch-icon.png`,
+    `https://${domain}/apple-touch-icon-precomposed.png`,
+    `https://www.google.com/s2/favicons?domain=${domain}&sz=64`,
+    `https://icons.duckduckgo.com/ip3/${domain}.ico`,
+    `https://${domain}/favicon.ico`,
+  ];
+
+  useEffect(() => {
+    let timeoutId: any;
+
+    if (isLoading) {
+      timeoutId = setTimeout(() => {
+        handleError();
+      }, timeout);
+    }
+
+    return () => {
+      if (timeoutId) {
+        clearTimeout(timeoutId);
+      }
+    };
+  }, [imgSrc, isLoading]);
+
+  const handleError = () => {
+    const nextIndex = fallbackIndex + 1;
+    if (nextIndex < fallbackSources.length) {
+      setFallbackIndex(nextIndex);
+      setImgSrc(fallbackSources[nextIndex]);
+      setIsLoading(true);
+    } else {
+      setHasError(true);
+      setIsLoading(false);
+    }
+  };
+
+  const handleLoad = () => {
+    setIsLoading(false);
+    setHasError(false);
+  };
+
+  return (
+    <div
+      className={`relative inline-block ${className}`}
+      style={{ width: size, height: size }}
+    >
+      {/* placeholder */}
+      {isLoading && (
+        <div className="absolute inset-0 animate-pulse">
+          <div className="w-full h-full rounded-md bg-gray-200/60" />
+        </div>
+      )}
+
+      <img
+        src={imgSrc}
+        alt={`${domain} logo`}
+        width={size}
+        height={size}
+        onError={handleError}
+        onLoad={handleLoad}
+        className={`inline-block transition-opacity duration-300 ${
+          isLoading ? "opacity-0" : "opacity-100"
+        }`}
+        style={{
+          objectFit: "contain",
+          display: hasError ? "none" : "inline-block",
+        }}
+      />
+
+      {/* Fallback: Display first letter of domain when all image sources fail */}
+      {hasError && (
+        <div
+          className="w-full h-full flex items-center justify-center bg-gray-100 rounded-md"
+          style={{ fontSize: `${size * 0.5}px` }}
+        >
+          {domain.charAt(0).toUpperCase()}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default Favicon;

package/src/index.tsx

@@ -0,0 +1 @@
+export { default as Favicon } from './Favicon';

package/tsconfig.json

@@ -0,0 +1,21 @@
+{
+  "compilerOptions": {
+    "outDir": "dist",
+    "module": "commonjs",
+    "target": "es2015",
+    "jsx": "react",
+    "declaration": true,
+    "declarationDir": "dist/types",
+    "strict": true,
+    "moduleResolution": "node",
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./*"]
+    },
+    "esModuleInterop": true
+  },
+  "include": [
+    "src",
+    "lib"
+  ]
+}