@uptechworks/url-preview-field 0.1.0

package/README.md

@@ -0,0 +1,73 @@
+# url-preview-field
+
+A custom field plugin for Strapi that allows you to preview a URL with a social share card, similar to what you see when sharing a link on social media.
+
+## Features
+
+- **Custom URL Field:** Adds a new custom field type (`url`) to Strapi content types.
+- **Live Preview:** When entering a URL, the field fetches and displays a preview card with the page’s title, image, and domain.
+- **Social Card Style:** The preview mimics the appearance of social media link previews.
+- **Advanced Settings:** Optionally mark the field as required in the content type builder (UI only).
+- **Backend Metadata Fetching:** Uses a Strapi backend route to fetch Open Graph and Twitter card metadata for the given URL.
+
+## Installation
+
+```bash
+# In your Strapi project root
+npm install url-preview-field
+# or
+yarn add url-preview-field
+```
+
+You will need to add the following to your `config/middlewares.ts` to ensure the image from the URL can be displayed. In the img-src add the nessecary domains, otherwise Strapi will not display the image.
+
+```
+{
+    name: 'strapi::security',
+    config: {
+      contentSecurityPolicy: {
+        directives: {
+          'script-src': ["'self'", "'unsafe-inline'"],
+          'img-src': ["'self'", 'data:', 'strapi.io'],
+        },
+      },
+    },
+  },
+  ```
+
+Then, enable the plugin in your Strapi project as you would with any other plugin.
+
+## Usage
+
+1. **Add the Field to a Content Type:**
+   - In the Strapi admin panel, edit or create a content type.
+   - Add a new field, select Custom then select the “URL” custom field (provided by this plugin).
+
+2. **Enter a URL:**
+   - In the content manager, enter a URL in the field.
+   - The plugin will fetch and display a preview card with the page’s metadata (title, image, domain, etc.).
+
+## How It Works
+
+- **Admin UI:**  
+  The plugin registers a custom field with a React component that handles user input and displays the preview card.
+- **Backend:**  
+  The plugin exposes a POST endpoint (`/url-preview-field/url-metadata`) that fetches the target URL, parses its HTML for Open Graph/Twitter metadata, and returns the relevant information to the frontend.
+
+## Development
+
+### Scripts
+
+- `npm run build` – Build the plugin for production.
+- `npm run watch` – Watch for changes and rebuild automatically.
+- `npm run verify` – Verify the plugin.
+- `npm run test:ts:front` – Type-check the admin (frontend) code.
+- `npm run test:ts:back` – Type-check the server (backend) code.
+
+## Limitations
+
+- The plugin fetches metadata using the backend; the server must be able to access the target URLs.
+
+## License
+
+MIT

package/dist/_chunks/UrlFieldInput-BhujW-Fo.js

@@ -0,0 +1,173 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const designSystem = require("@strapi/design-system");
+const icons = require("@strapi/icons");
+const admin = require("@strapi/strapi/admin");
+const styledComponents = require("styled-components");
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
+  if (e) {
+    for (const k in e) {
+      if (k !== "default") {
+        const d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: () => e[k]
+        });
+      }
+    }
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+const React__namespace = /* @__PURE__ */ _interopNamespace(React);
+const PreviewCard = styledComponents.styled(designSystem.Box)`
+  border: 1px solid #e4e7eb;
+  border-radius: 4px;
+  max-width: 400px;
+  margin-top: 8px;
+  padding: 16px;
+  background: white;
+`;
+const UrlPreview = styledComponents.styled.div`
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  color: #666;
+  font-size: 12px;
+  margin-bottom: 8px;
+`;
+const PreviewImage = styledComponents.styled.img`
+  width: 100%;
+  height: 200px;
+  object-fit: cover;
+  border-radius: 4px;
+  margin-bottom: 12px;
+`;
+const PreviewTitle = styledComponents.styled(designSystem.Typography)`
+  font-size: 1.25rem;
+  font-weight: bold;
+  color: #222;
+  margin-bottom: 8px;
+`;
+const PreviewLink = styledComponents.styled.a`
+  color: #0099e5;
+  text-decoration: underline;
+  font-weight: 500;
+  font-size: 1rem;
+  margin-top: 8px;
+  display: inline-block;
+`;
+const UrlFieldInput = React__namespace.forwardRef(
+  ({ hint, disabled, labelAction, label, name, required, attribute, onChange, error, ...props }, forwardedRef) => {
+    const { value } = admin.useField(name);
+    const [inputValue, setInputValue] = React.useState(value || "");
+    const [metadata, setMetadata] = React.useState(null);
+    const [loading, setLoading] = React.useState(false);
+    const [fetchError, setFetchError] = React.useState(null);
+    const fetchUrlMetadata = async (url) => {
+      if (!url || url.trim() === "") {
+        setMetadata(null);
+        setFetchError(null);
+        return;
+      }
+      setLoading(true);
+      setFetchError(null);
+      try {
+        const response = await fetch("/url-preview-field/url-metadata", {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json"
+          },
+          body: JSON.stringify({ url })
+        });
+        if (!response.ok) {
+          throw new Error(`Metadata fetch failed: ${response.status} ${response.statusText}`);
+        }
+        const data = await response.json();
+        console.log("Metadata received:", JSON.stringify(data));
+        setMetadata(data);
+      } catch (err) {
+        console.error("Error fetching URL metadata:", err);
+        const errorMessage = err instanceof Error ? err.message : "Unknown error occurred";
+        setFetchError(`Failed to fetch URL metadata: ${errorMessage}`);
+        setMetadata(null);
+      } finally {
+        setLoading(false);
+      }
+    };
+    React.useEffect(() => {
+      const timeoutId = setTimeout(() => {
+        if (inputValue) {
+          fetchUrlMetadata(inputValue);
+        } else {
+          setMetadata(null);
+          setFetchError(null);
+        }
+      }, 1e3);
+      return () => clearTimeout(timeoutId);
+    }, [inputValue]);
+    React.useEffect(() => {
+      setInputValue(value || "");
+    }, [value]);
+    const handleChange = (e) => {
+      const newValue = e.target.value;
+      setInputValue(newValue);
+      if (onChange) {
+        onChange(e);
+      }
+    };
+    return /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Root, { name, id: name, error, hint, required, children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", alignItems: "stretch", gap: 2, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Label, { action: labelAction, children: label }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        designSystem.Field.Input,
+        {
+          type: "url",
+          placeholder: "https://example.com",
+          value: inputValue,
+          onChange: handleChange,
+          disabled
+        }
+      ),
+      loading && /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { alignItems: "center", gap: 2, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Loader, { small: true }),
+        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", children: "Fetching preview..." })
+      ] }),
+      fetchError && /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", textColor: "danger600", children: fetchError }),
+      metadata && !loading && !fetchError && /* @__PURE__ */ jsxRuntime.jsx(PreviewCard, { children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", gap: 3, alignItems: "flex-start", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(UrlPreview, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(icons.Globe, { width: "12", height: "12" }),
+          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", children: metadata.domain })
+        ] }),
+        metadata.image && /* @__PURE__ */ jsxRuntime.jsx(
+          PreviewImage,
+          {
+            src: metadata.image,
+            alt: metadata.title,
+            onError: (e) => {
+              e.currentTarget.style.display = "none";
+            }
+          }
+        ),
+        metadata.title && /* @__PURE__ */ jsxRuntime.jsx(PreviewTitle, { as: "div", children: metadata.title }),
+        metadata.url && /* @__PURE__ */ jsxRuntime.jsxs(
+          PreviewLink,
+          {
+            href: metadata.url,
+            target: "_blank",
+            rel: "noopener noreferrer",
+            children: [
+              "View on ",
+              metadata.domain,
+              " >"
+            ]
+          }
+        )
+      ] }) })
+    ] }) });
+  }
+);
+exports.UrlFieldInput = UrlFieldInput;

package/dist/_chunks/UrlFieldInput-D0OIBuvW.mjs

@@ -0,0 +1,156 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { useState, useEffect } from "react";
+import { Field, Flex, Loader, Typography, Box } from "@strapi/design-system";
+import { Globe } from "@strapi/icons";
+import { useField } from "@strapi/strapi/admin";
+import { styled } from "styled-components";
+const PreviewCard = styled(Box)`
+  border: 1px solid #e4e7eb;
+  border-radius: 4px;
+  max-width: 400px;
+  margin-top: 8px;
+  padding: 16px;
+  background: white;
+`;
+const UrlPreview = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  color: #666;
+  font-size: 12px;
+  margin-bottom: 8px;
+`;
+const PreviewImage = styled.img`
+  width: 100%;
+  height: 200px;
+  object-fit: cover;
+  border-radius: 4px;
+  margin-bottom: 12px;
+`;
+const PreviewTitle = styled(Typography)`
+  font-size: 1.25rem;
+  font-weight: bold;
+  color: #222;
+  margin-bottom: 8px;
+`;
+const PreviewLink = styled.a`
+  color: #0099e5;
+  text-decoration: underline;
+  font-weight: 500;
+  font-size: 1rem;
+  margin-top: 8px;
+  display: inline-block;
+`;
+const UrlFieldInput = React.forwardRef(
+  ({ hint, disabled, labelAction, label, name, required, attribute, onChange, error, ...props }, forwardedRef) => {
+    const { value } = useField(name);
+    const [inputValue, setInputValue] = useState(value || "");
+    const [metadata, setMetadata] = useState(null);
+    const [loading, setLoading] = useState(false);
+    const [fetchError, setFetchError] = useState(null);
+    const fetchUrlMetadata = async (url) => {
+      if (!url || url.trim() === "") {
+        setMetadata(null);
+        setFetchError(null);
+        return;
+      }
+      setLoading(true);
+      setFetchError(null);
+      try {
+        const response = await fetch("/url-preview-field/url-metadata", {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json"
+          },
+          body: JSON.stringify({ url })
+        });
+        if (!response.ok) {
+          throw new Error(`Metadata fetch failed: ${response.status} ${response.statusText}`);
+        }
+        const data = await response.json();
+        console.log("Metadata received:", JSON.stringify(data));
+        setMetadata(data);
+      } catch (err) {
+        console.error("Error fetching URL metadata:", err);
+        const errorMessage = err instanceof Error ? err.message : "Unknown error occurred";
+        setFetchError(`Failed to fetch URL metadata: ${errorMessage}`);
+        setMetadata(null);
+      } finally {
+        setLoading(false);
+      }
+    };
+    useEffect(() => {
+      const timeoutId = setTimeout(() => {
+        if (inputValue) {
+          fetchUrlMetadata(inputValue);
+        } else {
+          setMetadata(null);
+          setFetchError(null);
+        }
+      }, 1e3);
+      return () => clearTimeout(timeoutId);
+    }, [inputValue]);
+    useEffect(() => {
+      setInputValue(value || "");
+    }, [value]);
+    const handleChange = (e) => {
+      const newValue = e.target.value;
+      setInputValue(newValue);
+      if (onChange) {
+        onChange(e);
+      }
+    };
+    return /* @__PURE__ */ jsx(Field.Root, { name, id: name, error, hint, required, children: /* @__PURE__ */ jsxs(Flex, { direction: "column", alignItems: "stretch", gap: 2, children: [
+      /* @__PURE__ */ jsx(Field.Label, { action: labelAction, children: label }),
+      /* @__PURE__ */ jsx(
+        Field.Input,
+        {
+          type: "url",
+          placeholder: "https://example.com",
+          value: inputValue,
+          onChange: handleChange,
+          disabled
+        }
+      ),
+      loading && /* @__PURE__ */ jsxs(Flex, { alignItems: "center", gap: 2, children: [
+        /* @__PURE__ */ jsx(Loader, { small: true }),
+        /* @__PURE__ */ jsx(Typography, { variant: "pi", children: "Fetching preview..." })
+      ] }),
+      fetchError && /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "danger600", children: fetchError }),
+      metadata && !loading && !fetchError && /* @__PURE__ */ jsx(PreviewCard, { children: /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: 3, alignItems: "flex-start", children: [
+        /* @__PURE__ */ jsxs(UrlPreview, { children: [
+          /* @__PURE__ */ jsx(Globe, { width: "12", height: "12" }),
+          /* @__PURE__ */ jsx(Typography, { variant: "pi", children: metadata.domain })
+        ] }),
+        metadata.image && /* @__PURE__ */ jsx(
+          PreviewImage,
+          {
+            src: metadata.image,
+            alt: metadata.title,
+            onError: (e) => {
+              e.currentTarget.style.display = "none";
+            }
+          }
+        ),
+        metadata.title && /* @__PURE__ */ jsx(PreviewTitle, { as: "div", children: metadata.title }),
+        metadata.url && /* @__PURE__ */ jsxs(
+          PreviewLink,
+          {
+            href: metadata.url,
+            target: "_blank",
+            rel: "noopener noreferrer",
+            children: [
+              "View on ",
+              metadata.domain,
+              " >"
+            ]
+          }
+        )
+      ] }) })
+    ] }) });
+  }
+);
+export {
+  UrlFieldInput
+};

package/dist/_chunks/en-B4KWt_jN.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const en = {};
+exports.default = en;

package/dist/_chunks/en-Byx4XI2L.mjs

@@ -0,0 +1,4 @@
+const en = {};
+export {
+  en as default
+};

package/dist/admin/index.js

@@ -0,0 +1,86 @@
+"use strict";
+const React = require("react");
+const jsxRuntime = require("react/jsx-runtime");
+const designSystem = require("@strapi/design-system");
+const icons = require("@strapi/icons");
+const styledComponents = require("styled-components");
+const __variableDynamicImportRuntimeHelper = (glob, path, segs) => {
+  const v = glob[path];
+  if (v) {
+    return typeof v === "function" ? v() : Promise.resolve(v);
+  }
+  return new Promise((_, reject) => {
+    (typeof queueMicrotask === "function" ? queueMicrotask : setTimeout)(
+      reject.bind(
+        null,
+        new Error(
+          "Unknown variable dynamic import: " + path + (path.split("/").length !== segs ? ". Note that variables only represent file names one level deep." : "")
+        )
+      )
+    );
+  });
+};
+const PLUGIN_ID = "url-preview-field";
+const Initializer = ({ setPlugin }) => {
+  const ref = React.useRef(setPlugin);
+  React.useEffect(() => {
+    ref.current(PLUGIN_ID);
+  }, []);
+  return null;
+};
+const IconBox = styledComponents.styled(designSystem.Flex)`
+  /* Hard code color values */
+  /* to stay consistent between themes */
+  background-color: #f0f0ff; /* primary100 */
+  border: 1px solid #d9d8ff; /* primary200 */
+
+  svg > path {
+    fill: #4945ff; /* primary600 */
+  }
+`;
+const UrlFieldIcon = () => {
+  return /* @__PURE__ */ jsxRuntime.jsx(IconBox, { justifyContent: "center", alignItems: "center", width: 7, height: 6, hasRadius: true, "aria-hidden": true, children: /* @__PURE__ */ jsxRuntime.jsx(icons.ExternalLink, {}) });
+};
+const index = {
+  register(app) {
+    app.registerPlugin({
+      id: PLUGIN_ID,
+      initializer: Initializer,
+      isReady: false,
+      name: PLUGIN_ID
+    });
+    app.customFields.register({
+      name: "url",
+      pluginId: PLUGIN_ID,
+      // Use the PLUGIN_ID constant to match server registration
+      type: "string",
+      intlLabel: {
+        id: "url-preview-field.url.label",
+        defaultMessage: "URL"
+      },
+      intlDescription: {
+        id: "url-preview-field.url.description",
+        defaultMessage: "Enter an URL to see a social share card preview."
+      },
+      icon: UrlFieldIcon,
+      components: {
+        Input: async () => Promise.resolve().then(() => require("../_chunks/UrlFieldInput-BhujW-Fo.js")).then((module2) => ({
+          default: module2.UrlFieldInput
+        }))
+      }
+    });
+  },
+  async registerTrads({ locales }) {
+    return Promise.all(
+      locales.map(async (locale) => {
+        try {
+          const { default: data } = await __variableDynamicImportRuntimeHelper(/* @__PURE__ */ Object.assign({ "./translations/en.json": () => Promise.resolve().then(() => require("../_chunks/en-B4KWt_jN.js")) }), `./translations/${locale}.json`, 3);
+          return { data, locale };
+        } catch {
+          return { data: {}, locale };
+        }
+      })
+    );
+  }
+};
+module.exports = index;

package/dist/admin/index.mjs

@@ -0,0 +1,87 @@
+import { useRef, useEffect } from "react";
+import { jsx } from "react/jsx-runtime";
+import { Flex } from "@strapi/design-system";
+import { ExternalLink } from "@strapi/icons";
+import { styled } from "styled-components";
+const __variableDynamicImportRuntimeHelper = (glob, path, segs) => {
+  const v = glob[path];
+  if (v) {
+    return typeof v === "function" ? v() : Promise.resolve(v);
+  }
+  return new Promise((_, reject) => {
+    (typeof queueMicrotask === "function" ? queueMicrotask : setTimeout)(
+      reject.bind(
+        null,
+        new Error(
+          "Unknown variable dynamic import: " + path + (path.split("/").length !== segs ? ". Note that variables only represent file names one level deep." : "")
+        )
+      )
+    );
+  });
+};
+const PLUGIN_ID = "url-preview-field";
+const Initializer = ({ setPlugin }) => {
+  const ref = useRef(setPlugin);
+  useEffect(() => {
+    ref.current(PLUGIN_ID);
+  }, []);
+  return null;
+};
+const IconBox = styled(Flex)`
+  /* Hard code color values */
+  /* to stay consistent between themes */
+  background-color: #f0f0ff; /* primary100 */
+  border: 1px solid #d9d8ff; /* primary200 */
+
+  svg > path {
+    fill: #4945ff; /* primary600 */
+  }
+`;
+const UrlFieldIcon = () => {
+  return /* @__PURE__ */ jsx(IconBox, { justifyContent: "center", alignItems: "center", width: 7, height: 6, hasRadius: true, "aria-hidden": true, children: /* @__PURE__ */ jsx(ExternalLink, {}) });
+};
+const index = {
+  register(app) {
+    app.registerPlugin({
+      id: PLUGIN_ID,
+      initializer: Initializer,
+      isReady: false,
+      name: PLUGIN_ID
+    });
+    app.customFields.register({
+      name: "url",
+      pluginId: PLUGIN_ID,
+      // Use the PLUGIN_ID constant to match server registration
+      type: "string",
+      intlLabel: {
+        id: "url-preview-field.url.label",
+        defaultMessage: "URL"
+      },
+      intlDescription: {
+        id: "url-preview-field.url.description",
+        defaultMessage: "Enter an URL to see a social share card preview."
+      },
+      icon: UrlFieldIcon,
+      components: {
+        Input: async () => import("../_chunks/UrlFieldInput-D0OIBuvW.mjs").then((module) => ({
+          default: module.UrlFieldInput
+        }))
+      }
+    });
+  },
+  async registerTrads({ locales }) {
+    return Promise.all(
+      locales.map(async (locale) => {
+        try {
+          const { default: data } = await __variableDynamicImportRuntimeHelper(/* @__PURE__ */ Object.assign({ "./translations/en.json": () => import("../_chunks/en-Byx4XI2L.mjs") }), `./translations/${locale}.json`, 3);
+          return { data, locale };
+        } catch {
+          return { data: {}, locale };
+        }
+      })
+    );
+  }
+};
+export {
+  index as default
+};

package/dist/admin/src/components/Initializer.d.ts

@@ -0,0 +1,5 @@
+type InitializerProps = {
+    setPlugin: (id: string) => void;
+};
+declare const Initializer: ({ setPlugin }: InitializerProps) => null;
+export { Initializer };

package/dist/admin/src/components/PluginIcon.d.ts

@@ -0,0 +1,2 @@
+declare const PluginIcon: () => import("react/jsx-runtime").JSX.Element;
+export { PluginIcon };

package/dist/admin/src/components/UrlFieldIcon.d.ts

@@ -0,0 +1 @@
+export declare const UrlFieldIcon: () => import("react/jsx-runtime").JSX.Element;

package/dist/admin/src/components/UrlFieldInput.d.ts

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import { type InputProps } from '@strapi/strapi/admin';
+type UrlFieldInputProps = InputProps & {
+    labelAction?: React.ReactNode;
+    attribute?: {
+        options?: {
+            url?: string;
+        };
+    };
+    onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    error?: string;
+};
+declare const UrlFieldInput: React.ForwardRefExoticComponent<UrlFieldInputProps & React.RefAttributes<HTMLButtonElement>>;
+export { UrlFieldInput };

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

@@ -0,0 +1,10 @@
+declare const _default: {
+    register(app: any): void;
+    registerTrads({ locales }: {
+        locales: string[];
+    }): Promise<{
+        data: any;
+        locale: string;
+    }[]>;
+};
+export default _default;

package/dist/admin/src/pluginId.d.ts

@@ -0,0 +1 @@
+export declare const PLUGIN_ID = "url-preview-field";

package/dist/admin/src/utils/getTranslation.d.ts

@@ -0,0 +1,2 @@
+declare const getTranslation: (id: string) => string;
+export { getTranslation };

package/dist/server/index.js

@@ -0,0 +1,141 @@
+"use strict";
+const fetch = require("node-fetch");
+const cheerio = require("cheerio");
+const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
+  if (e) {
+    for (const k in e) {
+      if (k !== "default") {
+        const d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: () => e[k]
+        });
+      }
+    }
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+const fetch__default = /* @__PURE__ */ _interopDefault(fetch);
+const cheerio__namespace = /* @__PURE__ */ _interopNamespace(cheerio);
+const bootstrap = ({ strapi }) => {
+};
+const destroy = ({ strapi }) => {
+};
+const PLUGIN_ID = "url-preview-field";
+const register = ({ strapi }) => {
+  strapi.customFields.register({
+    name: "url",
+    plugin: PLUGIN_ID,
+    type: "string",
+    inputSize: {
+      default: 4,
+      isResizable: true
+    }
+  });
+};
+const config = {
+  default: {},
+  validator() {
+  }
+};
+const contentTypes = {};
+const controller = ({ strapi }) => ({
+  index(ctx) {
+    ctx.body = strapi.plugin("url-preview-field").service("service").getWelcomeMessage();
+  },
+  async fetchMetadata(ctx) {
+    const { url } = ctx.request.body;
+    ctx.body = await strapi.plugin("url-preview-field").service("service").getUrlMetadata(url);
+  }
+});
+const controllers = {
+  controller
+};
+const middlewares = {};
+const policies = {};
+const routes = [
+  {
+    method: "GET",
+    path: "/",
+    // name of the controller file & the method.
+    handler: "controller.index",
+    config: {
+      policies: []
+    }
+  },
+  {
+    method: "POST",
+    path: "/url-metadata",
+    handler: "controller.fetchMetadata",
+    config: {
+      auth: false
+    }
+  }
+];
+const service = ({ strapi }) => ({
+  getWelcomeMessage() {
+    return "Welcome to Strapi 🚀";
+  },
+  async getUrlMetadata(url) {
+    try {
+      const response = await fetch__default.default(url);
+      if (!response.ok) {
+        throw new Error(`Failed to fetch URL: ${response.statusText}`);
+      }
+      const html = await response.text();
+      const $ = cheerio__namespace.load(html);
+      const title = $('meta[property="og:title"]').attr("content") || $("title").text() || "";
+      const image = $('meta[property="og:image"]').attr("content") || $('meta[name="twitter:image"]').attr("content") || "";
+      const domain = (() => {
+        try {
+          return new URL(url).hostname.replace(/^www\./, "");
+        } catch {
+          return "";
+        }
+      })();
+      console.log(
+        `Found Data: ${JSON.stringify({
+          title,
+          image,
+          url,
+          domain
+        })}`
+      );
+      return {
+        title,
+        image,
+        url,
+        domain
+      };
+    } catch (err) {
+      console.error("Error fetching URL metadata:", err);
+      return {
+        title: "",
+        image: "",
+        url,
+        domain: "",
+        error: err.message
+      };
+    }
+  }
+});
+const services = {
+  service
+};
+const index = {
+  register,
+  bootstrap,
+  destroy,
+  config,
+  controllers,
+  routes,
+  services,
+  contentTypes,
+  policies,
+  middlewares
+};
+module.exports = index;

package/dist/server/index.mjs

@@ -0,0 +1,122 @@
+import fetch from "node-fetch";
+import * as cheerio from "cheerio";
+const bootstrap = ({ strapi }) => {
+};
+const destroy = ({ strapi }) => {
+};
+const PLUGIN_ID = "url-preview-field";
+const register = ({ strapi }) => {
+  strapi.customFields.register({
+    name: "url",
+    plugin: PLUGIN_ID,
+    type: "string",
+    inputSize: {
+      default: 4,
+      isResizable: true
+    }
+  });
+};
+const config = {
+  default: {},
+  validator() {
+  }
+};
+const contentTypes = {};
+const controller = ({ strapi }) => ({
+  index(ctx) {
+    ctx.body = strapi.plugin("url-preview-field").service("service").getWelcomeMessage();
+  },
+  async fetchMetadata(ctx) {
+    const { url } = ctx.request.body;
+    ctx.body = await strapi.plugin("url-preview-field").service("service").getUrlMetadata(url);
+  }
+});
+const controllers = {
+  controller
+};
+const middlewares = {};
+const policies = {};
+const routes = [
+  {
+    method: "GET",
+    path: "/",
+    // name of the controller file & the method.
+    handler: "controller.index",
+    config: {
+      policies: []
+    }
+  },
+  {
+    method: "POST",
+    path: "/url-metadata",
+    handler: "controller.fetchMetadata",
+    config: {
+      auth: false
+    }
+  }
+];
+const service = ({ strapi }) => ({
+  getWelcomeMessage() {
+    return "Welcome to Strapi 🚀";
+  },
+  async getUrlMetadata(url) {
+    try {
+      const response = await fetch(url);
+      if (!response.ok) {
+        throw new Error(`Failed to fetch URL: ${response.statusText}`);
+      }
+      const html = await response.text();
+      const $ = cheerio.load(html);
+      const title = $('meta[property="og:title"]').attr("content") || $("title").text() || "";
+      const image = $('meta[property="og:image"]').attr("content") || $('meta[name="twitter:image"]').attr("content") || "";
+      const domain = (() => {
+        try {
+          return new URL(url).hostname.replace(/^www\./, "");
+        } catch {
+          return "";
+        }
+      })();
+      console.log(
+        `Found Data: ${JSON.stringify({
+          title,
+          image,
+          url,
+          domain
+        })}`
+      );
+      return {
+        title,
+        image,
+        url,
+        domain
+      };
+    } catch (err) {
+      console.error("Error fetching URL metadata:", err);
+      return {
+        title: "",
+        image: "",
+        url,
+        domain: "",
+        error: err.message
+      };
+    }
+  }
+});
+const services = {
+  service
+};
+const index = {
+  register,
+  bootstrap,
+  destroy,
+  config,
+  controllers,
+  routes,
+  services,
+  contentTypes,
+  policies,
+  middlewares
+};
+export {
+  index as default
+};

package/dist/server/src/bootstrap.d.ts

@@ -0,0 +1,5 @@
+import type { Core } from '@strapi/strapi';
+declare const bootstrap: ({ strapi }: {
+    strapi: Core.Strapi;
+}) => void;
+export default bootstrap;

package/dist/server/src/config/index.d.ts

@@ -0,0 +1,5 @@
+declare const _default: {
+    default: {};
+    validator(): void;
+};
+export default _default;

package/dist/server/src/content-types/index.d.ts

@@ -0,0 +1,2 @@
+declare const _default: {};
+export default _default;

package/dist/server/src/controllers/controller.d.ts

@@ -0,0 +1,8 @@
+import type { Core } from '@strapi/strapi';
+declare const controller: ({ strapi }: {
+    strapi: Core.Strapi;
+}) => {
+    index(ctx: any): void;
+    fetchMetadata(ctx: any): Promise<void>;
+};
+export default controller;

package/dist/server/src/controllers/index.d.ts

@@ -0,0 +1,9 @@
+declare const _default: {
+    controller: ({ strapi }: {
+        strapi: import("@strapi/types/dist/core").Strapi;
+    }) => {
+        index(ctx: any): void;
+        fetchMetadata(ctx: any): Promise<void>;
+    };
+};
+export default _default;

package/dist/server/src/destroy.d.ts

@@ -0,0 +1,5 @@
+import type { Core } from '@strapi/strapi';
+declare const destroy: ({ strapi }: {
+    strapi: Core.Strapi;
+}) => void;
+export default destroy;

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

@@ -0,0 +1,67 @@
+declare const _default: {
+    register: ({ strapi }: {
+        strapi: import("@strapi/types/dist/core").Strapi;
+    }) => void;
+    bootstrap: ({ strapi }: {
+        strapi: import("@strapi/types/dist/core").Strapi;
+    }) => void;
+    destroy: ({ strapi }: {
+        strapi: import("@strapi/types/dist/core").Strapi;
+    }) => void;
+    config: {
+        default: {};
+        validator(): void;
+    };
+    controllers: {
+        controller: ({ strapi }: {
+            strapi: import("@strapi/types/dist/core").Strapi;
+        }) => {
+            index(ctx: any): void;
+            fetchMetadata(ctx: any): Promise<void>;
+        };
+    };
+    routes: ({
+        method: string;
+        path: string;
+        handler: string;
+        /**
+         * Plugin server methods
+         */
+        config: {
+            policies: any[];
+            auth?: undefined;
+        };
+    } | {
+        method: string;
+        path: string;
+        handler: string;
+        config: {
+            auth: boolean;
+            policies?: undefined;
+        };
+    })[];
+    services: {
+        service: ({ strapi }: {
+            strapi: import("@strapi/types/dist/core").Strapi;
+        }) => {
+            getWelcomeMessage(): string;
+            getUrlMetadata(url: string): Promise<{
+                title: string;
+                image: string;
+                url: string;
+                domain: string;
+                error?: undefined;
+            } | {
+                title: string;
+                image: string;
+                url: string;
+                domain: string;
+                error: string;
+            }>;
+        };
+    };
+    contentTypes: {};
+    policies: {};
+    middlewares: {};
+};
+export default _default;

package/dist/server/src/middlewares/index.d.ts

@@ -0,0 +1,2 @@
+declare const _default: {};
+export default _default;

package/dist/server/src/pluginId.d.ts

@@ -0,0 +1 @@
+export declare const PLUGIN_ID = "url-preview-field";

package/dist/server/src/policies/index.d.ts

@@ -0,0 +1,2 @@
+declare const _default: {};
+export default _default;

package/dist/server/src/register.d.ts

@@ -0,0 +1,5 @@
+import type { Core } from '@strapi/strapi';
+declare const register: ({ strapi }: {
+    strapi: Core.Strapi;
+}) => void;
+export default register;

package/dist/server/src/routes/index.d.ts

@@ -0,0 +1,18 @@
+declare const _default: ({
+    method: string;
+    path: string;
+    handler: string;
+    config: {
+        policies: any[];
+        auth?: undefined;
+    };
+} | {
+    method: string;
+    path: string;
+    handler: string;
+    config: {
+        auth: boolean;
+        policies?: undefined;
+    };
+})[];
+export default _default;

package/dist/server/src/services/index.d.ts

@@ -0,0 +1,21 @@
+declare const _default: {
+    service: ({ strapi }: {
+        strapi: import("@strapi/types/dist/core").Strapi;
+    }) => {
+        getWelcomeMessage(): string;
+        getUrlMetadata(url: string): Promise<{
+            title: string;
+            image: string;
+            url: string;
+            domain: string;
+            error?: undefined;
+        } | {
+            title: string;
+            image: string;
+            url: string;
+            domain: string;
+            error: string;
+        }>;
+    };
+};
+export default _default;

package/dist/server/src/services/service.d.ts

@@ -0,0 +1,20 @@
+import type { Core } from '@strapi/strapi';
+declare const service: ({ strapi }: {
+    strapi: Core.Strapi;
+}) => {
+    getWelcomeMessage(): string;
+    getUrlMetadata(url: string): Promise<{
+        title: string;
+        image: string;
+        url: string;
+        domain: string;
+        error?: undefined;
+    } | {
+        title: string;
+        image: string;
+        url: string;
+        domain: string;
+        error: string;
+    }>;
+};
+export default service;

package/package.json

@@ -0,0 +1,83 @@
+{
+  "version": "0.1.0",
+  "keywords": [],
+  "type": "commonjs",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/uptech/strapi-url-preview-field.git"
+  },
+  "exports": {
+    "./package.json": "./package.json",
+    "./strapi-admin": {
+      "types": "./dist/admin/src/index.d.ts",
+      "source": "./admin/src/index.ts",
+      "import": "./dist/admin/index.mjs",
+      "require": "./dist/admin/index.js",
+      "default": "./dist/admin/index.js"
+    },
+    "./strapi-server": {
+      "types": "./dist/server/src/index.d.ts",
+      "source": "./server/src/index.ts",
+      "import": "./dist/server/index.mjs",
+      "require": "./dist/server/index.js",
+      "default": "./dist/server/index.js"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "strapi-plugin build",
+    "watch": "strapi-plugin watch",
+    "watch:link": "strapi-plugin watch:link",
+    "verify": "strapi-plugin verify",
+    "test:ts:front": "run -T tsc -p admin/tsconfig.json",
+    "test:ts:back": "run -T tsc -p server/tsconfig.json"
+  },
+  "dependencies": {
+    "@strapi/design-system": "^2.0.0-rc.29",
+    "@strapi/icons": "^2.0.0-rc.29",
+    "axios": "^1.6.0",
+    "cheerio": "^1.1.2",
+    "node-fetch": "^2.7.0",
+    "react-intl": "^7.1.11"
+  },
+  "devDependencies": {
+    "@strapi/sdk-plugin": "^5.3.2",
+    "@strapi/strapi": "^5.18.0",
+    "@strapi/typescript-utils": "^5.18.0",
+    "@types/cheerio": "^0.22.35",
+    "@types/node-fetch": "^2.6.12",
+    "@types/react": "^19.1.8",
+    "@types/react-dom": "^19.1.6",
+    "prettier": "^3.6.2",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-router-dom": "^6.30.1",
+    "styled-components": "^6.1.19",
+    "typescript": "^5.8.3"
+  },
+  "peerDependencies": {
+    "@strapi/sdk-plugin": "^5.3.2",
+    "@strapi/strapi": "^5.18.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-router-dom": "^6.30.1",
+    "styled-components": "^6.1.19"
+  },
+  "strapi": {
+    "kind": "plugin",
+    "name": "url-preview-field",
+    "displayName": "URL Share Preview",
+    "description": "A custom field plugin for Strapi that allows you to preview the URL. The preview is similar to the one you see when you share a link on social media."
+  },
+  "name": "@uptechworks/url-preview-field",
+  "description": "A custom field plugin for Strapi that allows you to preview the URL. The preview is similar to the one you see when you share a link on social media.",
+  "license": "MIT",
+  "author": "Uptech Studio <jon@uptechstudio.com>",
+  "main": "index.js",
+  "bugs": {
+    "url": "https://github.com/uptech/strapi-url-preview-field/issues"
+  },
+  "homepage": "https://github.com/uptech/strapi-url-preview-field#readme"
+}