@websolutespa/payload-plugin-seo 0.0.1

package/CHANGELOG.md

@@ -0,0 +1,7 @@
+# @websolutespa/payload-plugin-seo
+
+## 0.0.1
+
+### Patch Changes
+
+- 06a3127: Initial release

package/README.md

@@ -0,0 +1,21 @@
+# @websolutespa/payload-plugin-seo
+
+[![npm version](https://badge.fury.io/js/%40websolutespa%2Fpayload-plugin-seo.svg)](https://badge.fury.io/js/%40websolutespa%2Fpayload-plugin-seo)
+
+[![status alpha](https://img.shields.io/badge/status-alpha-red.svg)](https://shields.io/)
+
+SEO plugin for PayloadCms.
+
+# Payload SEO Plugin
+
+### Requirements:
+
+- Payload version 2.11.2 or higher is required.
+
+## Installation
+
+```bash
+npm i @websolutespa/payload-plugin-seo
+```
+
+##### _this library is for internal usage and not production ready_

package/dist/index.d.ts

@@ -0,0 +1,53 @@
+import { Resource } from 'i18next';
+import { Locale, Access, Plugin } from 'payload/config';
+import { TextField, NumberField, EmailField, TextareaField, CheckboxField, DateField, BlockField, RadioField, RelationshipField, ArrayField, RichTextField, SelectField, UploadField, CodeField, PointField, PayloadRequest, CollectionConfig } from 'payload/types';
+import { JSONField } from 'payload/dist/fields/config/types';
+
+type DataField = JSONField | TextField | NumberField | EmailField | TextareaField | CheckboxField | DateField | BlockField | RadioField | RelationshipField | ArrayField | RichTextField | SelectField | UploadField | CodeField | PointField;
+
+type SeoInitOptions = {
+    collections?: string[];
+    additionalFields?: DataField[];
+    customTokens?: SeoToken[];
+    qsMetatagsRules?: string;
+    metatagsRulesAccess?: MetatagsRuleAccess;
+};
+type SeoSlug = {
+    metatagsRule: string;
+    [key: string]: string;
+};
+type SeoGroup = {
+    seo: string;
+    [key: string]: string;
+};
+type SeoToken = {
+    name: string;
+    replacementFunction: (req: PayloadRequest, collection: CollectionConfig, doc: {
+        [key: string]: any;
+    }, locale: Locale | null) => Promise<string> | string;
+};
+type MetatagsRuleAccess = {
+    create?: Access;
+    read?: Access;
+    readVersions?: Access;
+    update?: Access;
+    delete?: Access;
+    admin?: (args?: any) => boolean | Promise<boolean>;
+    unlock?: Access;
+};
+type SeoOptions = {
+    collections: string[];
+    customTokens: SeoToken[];
+    additionalFields: DataField[];
+    qsMetatagsRules: string;
+    defaultLocale: string;
+    defaultMarket: string;
+    group: SeoGroup;
+    locales: string[] | Locale[];
+    slug: SeoSlug;
+    translations: Resource;
+};
+
+declare const seo: (sourceOptions: SeoInitOptions) => Plugin;
+
+export { MetatagsRuleAccess, SeoGroup, SeoInitOptions, SeoOptions, SeoSlug, SeoToken, seo as default };

package/dist/index.js

@@ -0,0 +1,520 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var src_exports = {};
+__export(src_exports, {
+  default: () => src_default
+});
+module.exports = __toCommonJS(src_exports);
+
+// src/api/tokens.service.ts
+var import_payload = __toESM(require("payload"));
+
+// src/translations.ts
+var translations = {
+  en: {
+    group: {
+      cronJob: "Tasks"
+    },
+    collection: {
+      singular: {
+        cronJob: "Job",
+        cronLog: "Log"
+      },
+      plural: {
+        cronJob: "Jobs",
+        cronLog: "Logs"
+      }
+    },
+    global: {},
+    field: {
+      cron: "Cron",
+      duration: "Duration",
+      job: "Job",
+      message: "Messagge",
+      status: "Status",
+      startedAt: "Started At",
+      completedAt: "Completed At",
+      executedAt: "Last Execution"
+    },
+    cronJob: {
+      runNow: "Run now"
+    }
+  },
+  it: {
+    group: {
+      cronJob: "Schedulazione"
+    },
+    collection: {
+      singular: {
+        cronJob: "Attivit\xE0",
+        cronLog: "Registro"
+      },
+      plural: {
+        cronJob: "Attivit\xE0",
+        cronLog: "Registro"
+      }
+    },
+    global: {},
+    field: {
+      cron: "Cron",
+      duration: "Durata",
+      job: "Attivit\xE0",
+      message: "Messaggio",
+      status: "Stato",
+      startedAt: "Iniziato il",
+      completedAt: "Completato il",
+      executedAt: "Ultima esecuzione"
+    },
+    cronJob: {
+      runNow: "Esegui ora"
+    }
+  }
+};
+
+// src/options.ts
+var defaultSlug = {
+  metatagsRule: "metatagsRule"
+};
+var defaultGroup = {
+  seo: "SEO"
+};
+var defaultLocale = process.env.DEFAULT_LOCALE || "en";
+var defaultMarket = process.env.DEFAULT_MARKET || "ww";
+var defaultLocales = ["en", "it"];
+var options = {
+  additionalFields: [],
+  collections: [],
+  customTokens: [],
+  defaultLocale,
+  defaultMarket,
+  group: defaultGroup,
+  locales: defaultLocales,
+  slug: defaultSlug,
+  qsMetatagsRules: "seoMetatagsRules",
+  translations
+};
+var internalSlugs = Object.entries(defaultSlug).map((x) => x[1]);
+
+// src/utils/eachField.ts
+var PRESENTATION_FIELDS = ["collapsible", "row", "tabs", "ui"];
+function isPresentationField(field) {
+  return PRESENTATION_FIELDS.includes(field.type);
+}
+__name(isPresentationField, "isPresentationField");
+function isDataField(field) {
+  return !PRESENTATION_FIELDS.includes(field.type);
+}
+__name(isDataField, "isDataField");
+function eachField(fields, callback, options2) {
+  const acc = typeof options2 === "number" ? {
+    paths: [],
+    depth: 0,
+    maxDepth: options2
+  } : typeof options2 === "object" ? options2 : {
+    paths: [],
+    depth: 0,
+    maxDepth: -1
+  };
+  for (const field of fields) {
+    let shouldBreak = callback(field, acc.paths, acc.parent);
+    if (shouldBreak === true) {
+      return shouldBreak;
+    }
+    let nextAcc = {
+      ...acc,
+      paths: [...acc.paths],
+      parent: field
+    };
+    if (isDataField(field)) {
+      nextAcc.paths.push(field.name);
+    }
+    if (acc.maxDepth === -1 || acc.depth < acc.maxDepth || isPresentationField(field)) {
+      switch (field.type) {
+        case "array":
+          nextAcc.depth++;
+          shouldBreak = eachField(field.fields, callback, nextAcc);
+          break;
+        case "blocks":
+          nextAcc.depth++;
+          for (const block of field.blocks) {
+            nextAcc = {
+              ...nextAcc,
+              parent: block
+            };
+            shouldBreak = eachField(block.fields, callback, nextAcc);
+            if (shouldBreak === true) {
+              return shouldBreak;
+            }
+          }
+          break;
+        case "collapsible":
+        case "group":
+        case "row":
+          shouldBreak = eachField(field.fields, callback, nextAcc);
+          break;
+        case "tabs":
+          for (const tab of field.tabs) {
+            shouldBreak = eachField(tab.fields, callback, nextAcc);
+            if (shouldBreak === true) {
+              return shouldBreak;
+            }
+          }
+      }
+      if (shouldBreak === true) {
+        return shouldBreak;
+      }
+    }
+  }
+}
+__name(eachField, "eachField");
+var TOKENIZABLE_FIELDS = ["text", "textarea", "richText", "relationship"];
+function isTokenizableField(field) {
+  return TOKENIZABLE_FIELDS.includes(field.type);
+}
+__name(isTokenizableField, "isTokenizableField");
+function eachTokenizableField(fields, callback, maxDepth = -1) {
+  return eachField(fields, (field, paths, parent) => {
+    if (isTokenizableField(field)) {
+      return callback(field, paths, parent);
+    }
+  }, maxDepth);
+}
+__name(eachTokenizableField, "eachTokenizableField");
+var getTokenizableFields = /* @__PURE__ */ __name((collection) => {
+  const fields = [];
+  eachTokenizableField(collection.fields, (field) => {
+    fields.push(field);
+  });
+  return fields;
+}, "getTokenizableFields");
+
+// src/api/tokens.service.ts
+var getTokens = /* @__PURE__ */ __name((collections) => {
+  const collectionConfigs = collections.length ? import_payload.default.config.collections.filter((config) => collections.includes(config.slug)) : import_payload.default.config.collections.filter((config) => options.collections.includes(config.slug));
+  let tokens = collectionConfigs.reduce((acc, config) => {
+    const fields = [];
+    eachTokenizableField(config.fields, (field) => {
+      fields.push(`[${field.name}]`);
+    });
+    return acc.length ? acc.filter((field) => fields.includes(field)) : fields;
+  }, []);
+  tokens = [...new Set(tokens)];
+  tokens = [...tokens, ...options.customTokens.map((token) => `[${token.name}]`)];
+  return tokens;
+}, "getTokens");
+var tokensGet = /* @__PURE__ */ __name(() => ({
+  path: "/seo/tokens",
+  method: "get",
+  handler: async (req, res) => {
+    try {
+      const qsCollections = req.query.collections || "";
+      const collections = qsCollections !== "" ? qsCollections.split(",") : [];
+      const tokens = getTokens(collections);
+      res.status(200).send(tokens);
+    } catch (error) {
+      res.status(400).send(error);
+    }
+  }
+}), "tokensGet");
+
+// src/components/Tokens.tsx
+var import_forms = require("payload/components/forms");
+var React = __toESM(require("react"));
+var import_jsx_runtime = require("react/jsx-runtime");
+var Tokens = /* @__PURE__ */ __name(({ path }) => {
+  const collectionsField = (0, import_forms.useFormFields)(([fields]) => fields["collections"]);
+  const [tokens, setTokens] = React.useState([]);
+  React.useEffect(() => {
+    const fetchOptions = /* @__PURE__ */ __name(async () => {
+      try {
+        const collections = collectionsField.value;
+        const url = (process.env.PAYLOAD_PUBLIC_BASE_PATH || "") + "/api/seo/tokens?collections=" + (collections?.join(",") || "");
+        const response = await fetch(url, {
+          method: "GET",
+          headers: {
+            "Content-Type": "application/json"
+          }
+        });
+        if (response.ok) {
+          const tokens2 = await response.json();
+          console.log(tokens2);
+          setTokens(tokens2);
+        } else {
+          setTokens([]);
+        }
+      } catch (error) {
+        console.error("Error fetching data:", error);
+      }
+    }, "fetchOptions");
+    fetchOptions();
+  }, [collectionsField]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "tokens-list", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("ul", { children: tokens.map((token) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("li", { children: token }, token)) }) });
+}, "Tokens");
+
+// src/collections/MetatagsRule.ts
+var MetatagsRule = {
+  slug: options.slug.metatagsRule,
+  admin: {
+    group: options.group.seo
+  },
+  fields: [
+    {
+      name: "collections",
+      type: "select",
+      options: options.collections,
+      hasMany: true
+    },
+    {
+      name: "title",
+      type: "text"
+    },
+    {
+      name: "description",
+      type: "textarea"
+    },
+    {
+      name: "keywords",
+      type: "textarea"
+    },
+    {
+      label: "Available Tokens",
+      type: "collapsible",
+      admin: {
+        initCollapsed: true,
+        position: "sidebar"
+      },
+      fields: [
+        {
+          name: "tokens",
+          type: "ui",
+          admin: {
+            components: {
+              Field: Tokens
+            }
+          }
+        }
+      ]
+    }
+  ]
+};
+
+// src/utils/findVal.ts
+var findVal = /* @__PURE__ */ __name((obj, keyToFind) => {
+  let value;
+  Object.keys(obj).some((k) => {
+    if (k === keyToFind) {
+      value = obj[k];
+      return true;
+    }
+    if (obj[k] && typeof obj[k] === "object") {
+      value = findVal(obj[k], keyToFind);
+      return value !== void 0;
+    }
+    return false;
+  });
+  return value;
+}, "findVal");
+
+// src/utils/richTextSerialize.ts
+var import_slate = require("slate");
+var stripHtml = /* @__PURE__ */ __name((html) => {
+  return html.replace(/<[^>]*>/g, "");
+}, "stripHtml");
+function richTextSerialize(children) {
+  if (Array.isArray(children)) {
+    return children.map((node, i) => {
+      if (import_slate.Text.isText(node)) {
+        return node.text;
+      }
+      if (!node) {
+        return null;
+      }
+      return richTextSerialize(node.children);
+    }).join("\n");
+  }
+  if (typeof children === "string") {
+    return stripHtml(children);
+  }
+  return "";
+}
+__name(richTextSerialize, "richTextSerialize");
+
+// src/seo.ts
+var replaceTokens = /* @__PURE__ */ __name(async (req, collection, doc, str, locale) => {
+  const tokens = str.match(/\[(.*?)\]/g) || [];
+  const defaultLocale2 = req.payload.config.localization ? req.payload.config.localization.defaultLocale : "en";
+  const fields = getTokenizableFields(collection);
+  for (const token of tokens) {
+    const customToken = options.customTokens.find((customToken2) => `[${customToken2.name}]` === token);
+    if (customToken) {
+      try {
+        str = str.replace(token, await customToken.replacementFunction(req, collection, doc, locale));
+      } catch (error) {
+        console.error(`Error while replacing customtoken "${token}": ${error}`);
+      }
+    } else {
+      const fieldName = token.replace(/[[\]]/g, "");
+      const fieldConfig = fields.find((f) => f.name === fieldName);
+      if (!fieldConfig) {
+        str = str.replace(token, "");
+        continue;
+      }
+      const fieldValue = findVal(doc, fieldName);
+      if (!fieldValue || Object.keys(fieldValue).length === 0) {
+        str = str.replace(token, "");
+        continue;
+      }
+      switch (fieldConfig?.type) {
+        case "text":
+        case "textarea": {
+          str = str.replace(token, locale && fieldConfig?.localized ? fieldValue[locale.code] ?? fieldValue[defaultLocale2] : fieldValue);
+          break;
+        }
+        case "richText": {
+          str = str.replace(token, locale && fieldConfig?.localized ? richTextSerialize(fieldValue[locale.code]) ?? richTextSerialize(fieldValue[defaultLocale2]) : richTextSerialize(fieldValue));
+          break;
+        }
+        case "relationship": {
+          const isPolymorphicRel = Array.isArray(fieldConfig.relationTo);
+          if (!isPolymorphicRel) {
+            if (locale && fieldConfig.hasMany) {
+              str = str.replace(token, fieldValue.map((id) => id).join(", "));
+            } else {
+              const relatedConfig = req.payload.config.collections.find((c) => c.slug === fieldConfig.relationTo);
+              if (relatedConfig) {
+                const relatedCollfields = getTokenizableFields(relatedConfig);
+                const titleField = relatedConfig?.admin?.useAsTitle ? relatedCollfields.find((f) => f.name === relatedConfig.admin.useAsTitle) : relatedCollfields.find((f) => f.name === "title");
+                if (titleField) {
+                  if (fieldConfig.hasMany) {
+                    const titleFieldValue = fieldValue.map((value) => findVal(value, titleField.name)).join(", ");
+                    str = str.replace(token, titleFieldValue);
+                  } else {
+                    const titleFieldValue = findVal(fieldValue, titleField.name);
+                    str = str.replace(token, locale && titleField?.localized ? titleFieldValue[locale.code] ?? titleFieldValue[defaultLocale2] : titleFieldValue);
+                  }
+                } else {
+                  str = str.replace(token, "");
+                }
+              }
+            }
+          } else {
+            str = str.replace(token, "");
+          }
+          break;
+        }
+      }
+    }
+  }
+  return str;
+}, "replaceTokens");
+var setCollectionMetatags = /* @__PURE__ */ __name(({ req, doc, query }) => async (collection) => {
+  try {
+    if (req.query[options.qsMetatagsRules] === void 0) {
+      return doc;
+    }
+    const result = await req.payload.find({
+      collection: options.slug.metatagsRule,
+      where: {
+        or: [
+          { collections: { equals: "" } },
+          { collections: { equals: [] } },
+          { collections: { equals: null } },
+          { collections: { exists: false } },
+          { collections: { contains: collection.slug } }
+        ]
+      },
+      pagination: false
+    });
+    let rules = result.docs;
+    rules = rules.sort((a, b) => a.collections.length === 0 ? 1 : b.collections.length === 0 ? -1 : 0);
+    const metaFields = ["title", "description", "keywords", ...options.additionalFields.map((field) => field.name)];
+    for (const rule of rules) {
+      for (const metafield of metaFields) {
+        doc.meta = doc.meta || {};
+        const ruleValue = rule[metafield];
+        if (!ruleValue || doc.meta[metafield]) {
+          continue;
+        }
+        if (req.locale === "all") {
+          const locales = req.payload?.config.localization ? req.payload.config.localization.locales : [];
+          for (const locale of locales) {
+            doc.meta[metafield] = doc.meta[metafield] || {};
+            doc.meta[metafield][locale.code] = await replaceTokens(req, collection, doc, ruleValue, locale);
+          }
+        } else {
+          doc.meta[metafield] = await replaceTokens(req, collection, doc, ruleValue, null);
+        }
+      }
+    }
+  } catch (error) {
+    console.error(`Error while setting seo metatags: ${error}`);
+  }
+  return doc;
+}, "setCollectionMetatags");
+var seo = /* @__PURE__ */ __name((sourceOptions) => (sourceConfig) => {
+  options.collections = sourceOptions.collections ? Object.assign(options.collections, sourceOptions.collections) : Object.assign(options.collections, sourceConfig.collections?.map((x) => x.slug));
+  options.additionalFields = sourceOptions.additionalFields || [];
+  options.customTokens = sourceOptions.customTokens ? Object.assign(options.customTokens, sourceOptions.customTokens) : [];
+  options.qsMetatagsRules = sourceOptions.qsMetatagsRules || "seoMetatagsRules";
+  const collections = sourceConfig.collections?.filter((collection) => options.collections.includes(collection.slug));
+  collections?.forEach((collection) => {
+    collection.hooks = {
+      ...collection.hooks,
+      afterRead: [...collection.hooks?.afterRead || [], (args) => setCollectionMetatags(args)(collection)]
+    };
+  });
+  const targetConfig = {
+    ...sourceConfig,
+    collections: [
+      ...sourceConfig.collections || [],
+      {
+        ...MetatagsRule,
+        fields: [
+          ...MetatagsRule.fields,
+          ...options.additionalFields
+        ],
+        access: {
+          ...MetatagsRule.access,
+          ...sourceOptions.metatagsRulesAccess
+        }
+      }
+    ],
+    endpoints: [
+      ...sourceConfig.endpoints || [],
+      tokensGet()
+    ]
+  };
+  return targetConfig;
+}, "seo");
+
+// src/index.ts
+var src_default = seo;

package/package.json

@@ -0,0 +1,64 @@
+{
+  "name": "@websolutespa/payload-plugin-seo",
+  "version": "0.0.1",
+  "description": "SEO plugin for PayloadCms",
+  "keywords": [
+    "payload",
+    "seo"
+  ],
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git://github.com/websolutespa/bom.git"
+  },
+  "scripts": {
+    "lint": "eslint *.ts*",
+    "test": "jest --forceExit --runInBand --workerIdleMemoryLimit='1000MB'",
+    "test-watch": "npm test -- --watch",
+    "coverage:integration": "npm run test -- --coverage",
+    "coverage": "run-s -c --silent coverage:*",
+    "compile": "tsup ./src/index.ts --format cjs --dts --external react",
+    "prepack": "bom prepack",
+    "postpack": "bom postpack"
+  },
+  "dependencies": {
+    "ts-deepmerge": "^2.0.1"
+  },
+  "peerDependencies": {
+    "@payloadcms/db-mongodb": ">= 1.2.0",
+    "payload": ">= 2.11.2",
+    "react": ">= 18.2.0",
+    "uuid": ">= 9.0.1"
+  },
+  "devDependencies": {
+    "@types/express": "^4.17.15",
+    "@types/uuid": "^9.0.2",
+    "@websolutespa/bom-cli": "*",
+    "@websolutespa/bom-env": "*",
+    "@websolutespa/test": "*",
+    "@websolutespa/tsconfig": "*",
+    "esbuild-sass-plugin": "^2.10.0",
+    "eslint-config-websolute": "*",
+    "eslint": "^8.56.0",
+    "mongodb-memory-server": "^8.13.0",
+    "react": "^18.2.0",
+    "ts-node": "^10.9.2",
+    "tsup": "^6.7.0",
+    "typescript": "^5.4.5",
+    "uuid": "^9.0.1"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "sideEffects": false,
+  "prepack": {
+    "types": "./dist/index.d.ts",
+    "main": "./dist/index.js"
+  },
+  "postpack": {
+    "types": "./src/index.ts",
+    "main": "./src/index.ts"
+  },
+  "types": "./dist/index.d.ts",
+  "main": "./dist/index.js"
+}