@payloadcms/plugin-seo 1.0.0

package/dist/fields/MetaTitle.js

@@ -0,0 +1,159 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+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 (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (_) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getMetaTitleField = exports.MetaTitle = void 0;
+var react_1 = __importStar(require("react"));
+var Input_1 = __importDefault(require("payload/dist/admin/components/forms/field-types/Text/Input"));
+var forms_1 = require("payload/components/forms");
+var LengthIndicator_1 = require("../ui/LengthIndicator");
+var defaults_1 = require("../defaults");
+var _a = defaults_1.defaults.title, minLength = _a.minLength, maxLength = _a.maxLength;
+var MetaTitle = function (props) {
+    var _a = props || {}, label = _a.label, name = _a.name, path = _a.path, seoConfig = _a.seoConfig; // TODO: this typing is temporary until payload types are updated for custom field props
+    var field = (0, forms_1.useField)({
+        label: label,
+        name: name,
+        path: path
+    });
+    var fields = (0, forms_1.useWatchForm)().fields;
+    var value = field.value, setValue = field.setValue, showError = field.showError;
+    var regenerateTitle = (0, react_1.useCallback)(function () {
+        var generateTitle = seoConfig.generateTitle;
+        var getTitle = function () { return __awaiter(void 0, void 0, void 0, function () {
+            var generatedTitle;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        if (!(typeof generateTitle === 'function')) return [3 /*break*/, 2];
+                        return [4 /*yield*/, generateTitle({ doc: __assign({}, fields) })];
+                    case 1:
+                        generatedTitle = _a.sent();
+                        _a.label = 2;
+                    case 2:
+                        setValue(generatedTitle);
+                        return [2 /*return*/];
+                }
+            });
+        }); };
+        getTitle();
+    }, [
+        fields,
+        setValue,
+        seoConfig
+    ]);
+    return (react_1.default.createElement("div", { style: {
+            marginBottom: '20px',
+        } },
+        react_1.default.createElement("div", { style: {
+                marginBottom: '5px',
+                position: 'relative',
+            } },
+            react_1.default.createElement("div", null,
+                label,
+                "\u00A0 \u2014 \u00A0",
+                react_1.default.createElement("button", { onClick: regenerateTitle, type: "button", style: {
+                        padding: 0,
+                        background: 'none',
+                        border: 'none',
+                        backgroundColor: 'transparent',
+                        cursor: 'pointer',
+                        textDecoration: 'underline',
+                    } }, "Auto-generate")),
+            react_1.default.createElement("div", { style: {
+                    color: '#9A9A9A',
+                } }, "This should be between ".concat(minLength, " and ").concat(maxLength, " characters. Auto-generation will format a title using the page title. For help in writing quality meta titles, see "),
+                react_1.default.createElement("a", { href: "https://developers.google.com/search/docs/advanced/appearance/title-link#page-titles", rel: "noopener noreferrer", target: "_blank", style: {
+                        color: '-webkit-link',
+                        textDecoration: 'none',
+                    } }, "best practices"),
+                ".")),
+        react_1.default.createElement("div", { style: {
+                position: 'relative',
+                marginBottom: '10px',
+            } },
+            react_1.default.createElement(Input_1.default, { path: name, name: name, onChange: setValue, value: value, showError: showError, style: {
+                    marginBottom: 0
+                } })),
+        react_1.default.createElement("div", { style: {
+                display: 'flex',
+                alignItems: 'center',
+                width: '100%',
+            } },
+            react_1.default.createElement(LengthIndicator_1.LengthIndicator, { text: value, minLength: minLength, maxLength: maxLength }))));
+};
+exports.MetaTitle = MetaTitle;
+var getMetaTitleField = function (props) { return (react_1.default.createElement(exports.MetaTitle, __assign({}, props))); };
+exports.getMetaTitleField = getMetaTitleField;
+//# sourceMappingURL=MetaTitle.js.map

package/dist/fields/MetaTitle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MetaTitle.js","sourceRoot":"","sources":["../../src/fields/MetaTitle.tsx"],"names":[],"mappings":"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"}

package/dist/index.d.ts

@@ -0,0 +1,4 @@
+import { Config } from 'payload/config';
+import { SEOConfig } from './types';
+declare const seo: (seoConfig: SEOConfig) => (config: Config) => Config;
+export default seo;

package/dist/index.js

@@ -0,0 +1,100 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var MetaDescription_1 = require("./fields/MetaDescription");
+var Overview_1 = require("./ui/Overview");
+var MetaTitle_1 = require("./fields/MetaTitle");
+var Preview_1 = require("./ui/Preview");
+var MetaImage_1 = require("./fields/MetaImage");
+var seo = function (seoConfig) { return function (config) {
+    var _a;
+    var seoFields = [
+        {
+            name: 'meta',
+            label: 'SEO',
+            type: 'group',
+            fields: __spreadArray(__spreadArray([
+                {
+                    name: 'overview',
+                    label: 'Overview',
+                    type: 'ui',
+                    admin: {
+                        components: {
+                            Field: Overview_1.Overview,
+                        },
+                    },
+                },
+                {
+                    name: 'title',
+                    type: 'text',
+                    admin: {
+                        components: {
+                            Field: function (props) { return (0, MetaTitle_1.getMetaTitleField)(__assign(__assign({}, props), { seoConfig: seoConfig })); },
+                        },
+                    },
+                },
+                {
+                    name: 'description',
+                    type: 'textarea',
+                    admin: {
+                        components: {
+                            Field: function (props) { return (0, MetaDescription_1.getMetaDescriptionField)(__assign(__assign({}, props), { seoConfig: seoConfig })); },
+                        },
+                    },
+                }
+            ], (seoConfig === null || seoConfig === void 0 ? void 0 : seoConfig.uploadsCollection) ? [{
+                    name: 'image',
+                    label: 'Meta Image',
+                    type: 'upload',
+                    relationTo: seoConfig === null || seoConfig === void 0 ? void 0 : seoConfig.uploadsCollection,
+                    admin: {
+                        description: 'Maximum upload file size: 12MB. Recommended file size for images is <500KB.',
+                        components: {
+                            Field: function (props) { return (0, MetaImage_1.getMetaImageField)(__assign(__assign({}, props), { seoConfig: seoConfig })); },
+                        },
+                    },
+                }] : [], true), [
+                {
+                    name: 'preview',
+                    label: 'Preview',
+                    type: 'ui',
+                    admin: {
+                        components: {
+                            Field: function (props) { return (0, Preview_1.getPreviewField)(__assign(__assign({}, props), { seoConfig: seoConfig })); },
+                        },
+                    },
+                },
+            ], false)
+        }
+    ];
+    return (__assign(__assign({}, config), { collections: ((_a = config.collections) === null || _a === void 0 ? void 0 : _a.map(function (collection) {
+            var _a;
+            var slug = collection.slug;
+            var isEnabled = (_a = seoConfig === null || seoConfig === void 0 ? void 0 : seoConfig.collections) === null || _a === void 0 ? void 0 : _a.includes(slug);
+            if (isEnabled) {
+                return (__assign(__assign({}, collection), { fields: __spreadArray(__spreadArray([], (collection === null || collection === void 0 ? void 0 : collection.fields) || [], true), seoFields, true) }));
+            }
+            return collection;
+        })) || [] }));
+}; };
+exports.default = seo;
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AACA,4DAAmE;AACnE,0CAAyC;AACzC,gDAAuD;AACvD,wCAA+C;AAC/C,gDAAuD;AAIvD,IAAM,GAAG,GAAG,UAAC,SAAoB,IAAK,OAAA,UAAC,MAAc;;IACnD,IAAM,SAAS,GAAY;QACzB;YACE,IAAI,EAAE,MAAM;YACZ,KAAK,EAAE,KAAK;YACZ,IAAI,EAAE,OAAO;YACb,MAAM;gBACJ;oBACE,IAAI,EAAE,UAAU;oBAChB,KAAK,EAAE,UAAU;oBACjB,IAAI,EAAE,IAAI;oBACV,KAAK,EAAE;wBACL,UAAU,EAAE;4BACV,KAAK,EAAE,mBAAQ;yBAChB;qBACF;iBACF;gBACD;oBACE,IAAI,EAAE,OAAO;oBACb,IAAI,EAAE,MAAM;oBACZ,KAAK,EAAE;wBACL,UAAU,EAAE;4BACV,KAAK,EAAE,UAAC,KAAK,IAAK,OAAA,IAAA,6BAAiB,wBAAM,KAAK,KAAE,SAAS,WAAA,IAAG,EAA1C,CAA0C;yBAC7D;qBACF;iBACF;gBACD;oBACE,IAAI,EAAE,aAAa;oBACnB,IAAI,EAAE,UAAU;oBAChB,KAAK,EAAE;wBACL,UAAU,EAAE;4BACV,KAAK,EAAE,UAAC,KAAK,IAAK,OAAA,IAAA,yCAAuB,wBAAM,KAAK,KAAE,SAAS,WAAA,IAAG,EAAhD,CAAgD;yBACnE;qBACF;iBACF;eACE,CAAA,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,iBAAiB,EAAC,CAAC,CAAC,CAAC;oBACjC,IAAI,EAAE,OAAO;oBACb,KAAK,EAAE,YAAY;oBACnB,IAAI,EAAE,QAAQ;oBACd,UAAU,EAAE,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,iBAAiB;oBACxC,KAAK,EAAE;wBACL,WAAW,EAAE,6EAA6E;wBAC1F,UAAU,EAAE;4BACV,KAAK,EAAE,UAAC,KAAK,IAAK,OAAA,IAAA,6BAAiB,wBAAM,KAAK,KAAE,SAAS,WAAA,IAAG,EAA1C,CAA0C;yBAC7D;qBACF;iBACO,CAAC,CAAC,CAAC,CAAC,EAAE;gBAChB;oBACE,IAAI,EAAE,SAAS;oBACf,KAAK,EAAE,SAAS;oBAChB,IAAI,EAAE,IAAI;oBACV,KAAK,EAAE;wBACL,UAAU,EAAE;4BACV,KAAK,EAAE,UAAC,KAAK,IAAK,OAAA,IAAA,yBAAe,wBAAM,KAAK,KAAE,SAAS,WAAA,IAAG,EAAxC,CAAwC;yBAC3D;qBACF;iBACF;qBACF;SACF;KACF,CAAA;IAED,OAAO,uBACF,MAAM,KACT,WAAW,EAAE,CAAA,MAAA,MAAM,CAAC,WAAW,0CAAE,GAAG,CAAC,UAAC,UAAU;;YACtC,IAAA,IAAI,GAAK,UAAU,KAAf,CAAgB;YAC5B,IAAM,SAAS,GAAG,MAAA,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,WAAW,0CAAE,QAAQ,CAAC,IAAI,CAAC,CAAC;YAEzD,IAAI,SAAS,EAAE;gBACb,OAAO,uBACF,UAAU,KACb,MAAM,kCACD,CAAA,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,MAAM,KAAI,EAAE,SACxB,SAAS,WAEd,CAAA;aACH;YACD,OAAO,UAAU,CAAC;QACpB,CAAC,CAAC,KAAI,EAAE,IACR,CAAA;AACJ,CAAC,EA/EqC,CA+ErC,CAAC;AAEF,kBAAe,GAAG,CAAC"}

package/dist/types.d.ts

@@ -0,0 +1,24 @@
+import { Field } from "payload/dist/fields/config/types";
+export declare type SEOConfig = {
+    collections?: string[];
+    uploadsCollection?: string;
+    fields?: Partial<Field>[];
+    generateTitle?: (args: {
+        doc: any;
+    }) => string | Promise<string>;
+    generateDescription?: (args: {
+        doc: any;
+    }) => string | Promise<string>;
+    generateImage?: (args: {
+        doc: any;
+    }) => string | Promise<string>;
+    generateURL?: (args: {
+        doc: any;
+    }) => string | Promise<string>;
+};
+export declare type Meta = {
+    title?: string;
+    description?: string;
+    keywords?: string;
+    image?: any;
+};

package/dist/types.js

@@ -0,0 +1,3 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+//# sourceMappingURL=types.js.map

package/dist/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":""}

package/dist/ui/LengthIndicator.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+export declare const LengthIndicator: React.FC<{
+    text?: string;
+    minLength?: number;
+    maxLength?: number;
+}>;

package/dist/ui/LengthIndicator.js

@@ -0,0 +1,127 @@
+"use strict";
+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 (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LengthIndicator = void 0;
+/* eslint-disable react/require-default-props  */
+/* eslint-disable import/no-extraneous-dependencies */
+/* eslint-disable no-use-before-define */
+var react_1 = __importStar(require("react"));
+var Pill_1 = require("./Pill");
+var LengthIndicator = function (props) {
+    var text = props.text, _a = props.minLength, minLength = _a === void 0 ? 0 : _a, _b = props.maxLength, maxLength = _b === void 0 ? 0 : _b;
+    var _c = (0, react_1.useState)({
+        color: '',
+        backgroundColor: '',
+    }), labelStyle = _c[0], setLabelStyle = _c[1];
+    var _d = (0, react_1.useState)(''), label = _d[0], setLabel = _d[1];
+    var _e = (0, react_1.useState)(0), barWidth = _e[0], setBarWidth = _e[1];
+    (0, react_1.useEffect)(function () {
+        var textLength = (text === null || text === void 0 ? void 0 : text.length) || 0;
+        if (textLength === 0) {
+            setLabel('Missing');
+            setLabelStyle({
+                backgroundColor: 'red',
+                color: 'white',
+            });
+            setBarWidth(0);
+        }
+        else {
+            var progress = (textLength - minLength) / (maxLength - minLength);
+            if (progress < 0) {
+                var ratioUntilMin = textLength / minLength;
+                if (ratioUntilMin > 0.9) {
+                    setLabel('Almost there');
+                    setLabelStyle({
+                        backgroundColor: 'orange',
+                        color: 'white',
+                    });
+                }
+                else {
+                    setLabel('Too short');
+                    setLabelStyle({
+                        backgroundColor: 'orangered',
+                        color: 'white',
+                    });
+                }
+                setBarWidth(ratioUntilMin);
+            }
+            if (progress >= 0 && progress <= 1) {
+                setLabel('Good');
+                setLabelStyle({
+                    backgroundColor: 'green',
+                    color: 'white',
+                });
+                setBarWidth(progress);
+            }
+            if (progress > 1) {
+                setLabel('Too long');
+                setLabelStyle({
+                    backgroundColor: 'red',
+                    color: 'white',
+                });
+                setBarWidth(1);
+            }
+        }
+    }, [
+        minLength,
+        maxLength,
+        text,
+    ]);
+    var textLength = (text === null || text === void 0 ? void 0 : text.length) || 0;
+    var charsUntilMax = maxLength - textLength;
+    var charsUntilMin = minLength - textLength;
+    return (react_1.default.createElement("div", { style: {
+            width: '100%',
+            display: 'flex',
+            alignItems: 'center',
+        } },
+        react_1.default.createElement(Pill_1.Pill, { label: label, color: labelStyle.color, backgroundColor: labelStyle.backgroundColor }),
+        react_1.default.createElement("div", { style: {
+                marginRight: '10px',
+                whiteSpace: 'nowrap',
+                flexShrink: 0,
+                lineHeight: 1
+            } },
+            react_1.default.createElement("small", null, "".concat((text === null || text === void 0 ? void 0 : text.length) || 0, "/").concat(minLength, "-").concat(maxLength, " chars, "),
+                (textLength === 0 || charsUntilMin > 0) && (react_1.default.createElement(react_1.Fragment, null, "".concat(charsUntilMin, " to go"))),
+                charsUntilMin <= 0 && charsUntilMax >= 0 && (react_1.default.createElement(react_1.Fragment, null, "".concat(charsUntilMax, " left over"))),
+                charsUntilMax < 0 && (react_1.default.createElement(react_1.Fragment, null, "".concat(charsUntilMax * -1, " too many"))))),
+        react_1.default.createElement("div", { style: {
+                height: '2px',
+                width: '100%',
+                backgroundColor: '#F3F3F3',
+                position: 'relative',
+            } },
+            react_1.default.createElement("div", { style: {
+                    height: '100%',
+                    width: "".concat(barWidth * 100, "%"),
+                    backgroundColor: labelStyle.backgroundColor,
+                    position: 'absolute',
+                    left: 0,
+                    top: 0,
+                } }))));
+};
+exports.LengthIndicator = LengthIndicator;
+//# sourceMappingURL=LengthIndicator.js.map

package/dist/ui/LengthIndicator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LengthIndicator.js","sourceRoot":"","sources":["../../src/ui/LengthIndicator.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,iDAAiD;AACjD,sDAAsD;AACtD,yCAAyC;AACzC,6CAA6D;AAC7D,+BAA8B;AAEvB,IAAM,eAAe,GAIvB,UAAC,KAAK;IAEP,IAAA,IAAI,GAGF,KAAK,KAHH,EACJ,KAEE,KAAK,UAFM,EAAb,SAAS,mBAAG,CAAC,KAAA,EACb,KACE,KAAK,UADM,EAAb,SAAS,mBAAG,CAAC,KAAA,CACL;IAEJ,IAAA,KAA8B,IAAA,gBAAQ,EAAC;QAC3C,KAAK,EAAE,EAAE;QACT,eAAe,EAAE,EAAE;KACpB,CAAC,EAHK,UAAU,QAAA,EAAE,aAAa,QAG9B,CAAC;IAEG,IAAA,KAAoB,IAAA,gBAAQ,EAAC,EAAE,CAAC,EAA/B,KAAK,QAAA,EAAE,QAAQ,QAAgB,CAAC;IACjC,IAAA,KAA0B,IAAA,gBAAQ,EAAS,CAAC,CAAC,EAA5C,QAAQ,QAAA,EAAE,WAAW,QAAuB,CAAC;IAEpD,IAAA,iBAAS,EAAC;QACR,IAAM,UAAU,GAAG,CAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,MAAM,KAAI,CAAC,CAAC;QAErC,IAAI,UAAU,KAAK,CAAC,EAAE;YACpB,QAAQ,CAAC,SAAS,CAAC,CAAC;YACpB,aAAa,CAAC;gBACZ,eAAe,EAAE,KAAK;gBACtB,KAAK,EAAE,OAAO;aACf,CAAC,CAAC;YACH,WAAW,CAAC,CAAC,CAAC,CAAC;SAChB;aAAM;YACL,IAAM,QAAQ,GAAG,CAAC,UAAU,GAAG,SAAS,CAAC,GAAG,CAAC,SAAS,GAAG,SAAS,CAAC,CAAC;YAEpE,IAAI,QAAQ,GAAG,CAAC,EAAE;gBAChB,IAAM,aAAa,GAAG,UAAU,GAAG,SAAS,CAAC;gBAE7C,IAAI,aAAa,GAAG,GAAG,EAAE;oBACvB,QAAQ,CAAC,cAAc,CAAC,CAAC;oBACzB,aAAa,CAAC;wBACZ,eAAe,EAAE,QAAQ;wBACzB,KAAK,EAAE,OAAO;qBACf,CAAC,CAAC;iBACJ;qBAAM;oBACL,QAAQ,CAAC,WAAW,CAAC,CAAC;oBACtB,aAAa,CAAC;wBACZ,eAAe,EAAE,WAAW;wBAC5B,KAAK,EAAE,OAAO;qBACf,CAAC,CAAC;iBACJ;gBAED,WAAW,CAAC,aAAa,CAAC,CAAC;aAC5B;YAED,IAAI,QAAQ,IAAI,CAAC,IAAI,QAAQ,IAAI,CAAC,EAAE;gBAClC,QAAQ,CAAC,MAAM,CAAC,CAAC;gBACjB,aAAa,CAAC;oBACZ,eAAe,EAAE,OAAO;oBACxB,KAAK,EAAE,OAAO;iBACf,CAAC,CAAC;gBACH,WAAW,CAAC,QAAQ,CAAC,CAAC;aACvB;YAED,IAAI,QAAQ,GAAG,CAAC,EAAE;gBAChB,QAAQ,CAAC,UAAU,CAAC,CAAC;gBACrB,aAAa,CAAC;oBACZ,eAAe,EAAE,KAAK;oBACtB,KAAK,EAAE,OAAO;iBACf,CAAC,CAAC;gBACH,WAAW,CAAC,CAAC,CAAC,CAAC;aAChB;SACF;IACH,CAAC,EAAE;QACD,SAAS;QACT,SAAS;QACT,IAAI;KACL,CAAC,CAAC;IAEH,IAAM,UAAU,GAAG,CAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,MAAM,KAAI,CAAC,CAAC;IAErC,IAAM,aAAa,GAAG,SAAS,GAAG,UAAU,CAAC;IAC7C,IAAM,aAAa,GAAG,SAAS,GAAG,UAAU,CAAC;IAE7C,OAAO,CACL,uCACE,KAAK,EAAE;YACL,KAAK,EAAE,MAAM;YACb,OAAO,EAAE,MAAM;YACf,UAAU,EAAE,QAAQ;SACrB;QAED,8BAAC,WAAI,IACH,KAAK,EAAE,KAAK,EACZ,KAAK,EAAE,UAAU,CAAC,KAAK,EACvB,eAAe,EAAE,UAAU,CAAC,eAAe,GAC3C;QACF,uCACE,KAAK,EAAE;gBACL,WAAW,EAAE,MAAM;gBACnB,UAAU,EAAE,QAAQ;gBACpB,UAAU,EAAE,CAAC;gBACb,UAAU,EAAE,CAAC;aACd;YAED,6CACG,UAAG,CAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,MAAM,KAAI,CAAC,cAAI,SAAS,cAAI,SAAS,aAAU;gBACxD,CAAC,UAAU,KAAK,CAAC,IAAI,aAAa,GAAG,CAAC,CAAC,IAAI,CAC1C,8BAAC,gBAAQ,QACN,UAAG,aAAa,WAAQ,CAChB,CACZ;gBACA,aAAa,IAAI,CAAC,IAAI,aAAa,IAAI,CAAC,IAAI,CAC3C,8BAAC,gBAAQ,QACN,UAAG,aAAa,eAAY,CACpB,CACZ;gBACA,aAAa,GAAG,CAAC,IAAI,CACpB,8BAAC,gBAAQ,QACN,UAAG,aAAa,GAAG,CAAC,CAAC,cAAW,CACxB,CACZ,CACK,CACJ;QACN,uCACE,KAAK,EAAE;gBACL,MAAM,EAAE,KAAK;gBACb,KAAK,EAAE,MAAM;gBACb,eAAe,EAAE,SAAS;gBAC1B,QAAQ,EAAE,UAAU;aACrB;YAED,uCACE,KAAK,EAAE;oBACL,MAAM,EAAE,MAAM;oBACd,KAAK,EAAE,UAAG,QAAQ,GAAG,GAAG,MAAG;oBAC3B,eAAe,EAAE,UAAU,CAAC,eAAe;oBAC3C,QAAQ,EAAE,UAAU;oBACpB,IAAI,EAAE,CAAC;oBACP,GAAG,EAAE,CAAC;iBACP,GACD,CACE,CACF,CACP,CAAC;AACJ,CAAC,CAAC;AA9IW,QAAA,eAAe,mBA8I1B"}

package/dist/ui/Overview.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const Overview: React.FC;

package/dist/ui/Overview.js

@@ -0,0 +1,72 @@
+"use strict";
+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 (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Overview = void 0;
+// import { Button } from 'payload/components';
+var forms_1 = require("payload/components/forms");
+var react_1 = __importStar(require("react"));
+var defaults_1 = require("../defaults");
+var _a = defaults_1.defaults.title, minTitle = _a.minLength, maxTitle = _a.maxLength, _b = defaults_1.defaults.description, minDesc = _b.minLength, maxDesc = _b.maxLength;
+var Overview = function () {
+    var _a = (0, forms_1.useForm)(), dispatchFields = _a.dispatchFields, getFields = _a.getFields;
+    var _b = (0, forms_1.useWatchForm)().fields, _c = _b["meta.title"], _d = _c === void 0 ? {} : _c, metaTitle = _d.value, _e = _b["meta.description"], _f = _e === void 0 ? {} : _e, metaDesc = _f.value, _g = _b["meta.image"], _h = _g === void 0 ? {} : _g, metaImage = _h.value;
+    var _j = (0, react_1.useState)(), titleIsValid = _j[0], setTitleIsValid = _j[1];
+    var _k = (0, react_1.useState)(), descIsValid = _k[0], setDescIsValid = _k[1];
+    var _l = (0, react_1.useState)(), imageIsValid = _l[0], setImageIsValid = _l[1];
+    var resetAll = (0, react_1.useCallback)(function () {
+        var fields = getFields();
+        var fieldsWithoutMeta = fields;
+        fieldsWithoutMeta['meta.title'].value = '';
+        fieldsWithoutMeta['meta.description'].value = '';
+        fieldsWithoutMeta['meta.image'].value = '';
+        dispatchFields(fieldsWithoutMeta);
+    }, [
+        dispatchFields,
+        getFields,
+    ]);
+    (0, react_1.useEffect)(function () {
+        if (typeof metaTitle === 'string')
+            setTitleIsValid(metaTitle.length >= minTitle && metaTitle.length <= maxTitle);
+        if (typeof metaDesc === 'string')
+            setDescIsValid(metaDesc.length >= minDesc && metaDesc.length <= maxDesc);
+        setImageIsValid(Boolean(metaImage));
+    }, [
+        metaTitle,
+        metaDesc,
+        metaImage,
+    ]);
+    var testResults = [
+        titleIsValid,
+        descIsValid,
+        imageIsValid,
+    ];
+    var numberOfPasses = testResults.filter(Boolean).length;
+    return (react_1.default.createElement("div", { style: {
+            marginBottom: '20px',
+        } },
+        react_1.default.createElement("div", null, "".concat(numberOfPasses, "/").concat(testResults.length, " checks are passing"))));
+};
+exports.Overview = Overview;
+//# sourceMappingURL=Overview.js.map

package/dist/ui/Overview.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Overview.js","sourceRoot":"","sources":["../../src/ui/Overview.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAA+C;AAC/C,kDAAiE;AAEjE,6CAAgE;AAChE,wCAAuC;AAGrC,IAAA,KAQE,mBAAQ,MALT,EAFY,QAAQ,eAAA,EACR,QAAQ,eAAA,EAErB,KAIE,mBAAQ,YADT,EAFY,OAAO,eAAA,EACP,OAAO,eACnB,CACU;AAEN,IAAM,QAAQ,GAAa;IAC1B,IAAA,KAGF,IAAA,eAAO,GAAE,EAFX,cAAc,oBAAA,EACd,SAAS,eACE,CAAC;IAGZ,IAAA,KAWE,IAAA,oBAAY,GAAE,OADf,EATC,qBAEe,EAFf,qBAEI,EAAW,KAAA,EADN,SAAS,WAAA,EAElB,2BAEe,EAFf,qBAEI,EAAW,KAAA,EADN,QAAQ,WAAA,EAEjB,qBAEe,EAFf,qBAEI,EAAW,KAAA,EADN,SAAS,WAEnB,CACgB;IAEb,IAAA,KAAkC,IAAA,gBAAQ,GAAuB,EAAhE,YAAY,QAAA,EAAE,eAAe,QAAmC,CAAC;IAClE,IAAA,KAAgC,IAAA,gBAAQ,GAAuB,EAA9D,WAAW,QAAA,EAAE,cAAc,QAAmC,CAAC;IAChE,IAAA,KAAkC,IAAA,gBAAQ,GAAuB,EAAhE,YAAY,QAAA,EAAE,eAAe,QAAmC,CAAC;IAExE,IAAM,QAAQ,GAAG,IAAA,mBAAW,EAAC;QAC3B,IAAM,MAAM,GAAG,SAAS,EAAE,CAAC;QAC3B,IAAM,iBAAiB,GAAG,MAAM,CAAC;QACjC,iBAAiB,CAAC,YAAY,CAAC,CAAC,KAAK,GAAG,EAAE,CAAC;QAC3C,iBAAiB,CAAC,kBAAkB,CAAC,CAAC,KAAK,GAAG,EAAE,CAAC;QACjD,iBAAiB,CAAC,YAAY,CAAC,CAAC,KAAK,GAAG,EAAE,CAAC;QAC3C,cAAc,CAAC,iBAAiB,CAAC,CAAC;IACpC,CAAC,EAAE;QACD,cAAc;QACd,SAAS;KACV,CAAC,CAAC;IAEH,IAAA,iBAAS,EAAC;QACR,IAAI,OAAO,SAAS,KAAK,QAAQ;YAAE,eAAe,CAAC,SAAS,CAAC,MAAM,IAAI,QAAQ,IAAI,SAAS,CAAC,MAAM,IAAI,QAAQ,CAAC,CAAC;QACjH,IAAI,OAAO,QAAQ,KAAK,QAAQ;YAAE,cAAc,CAAC,QAAQ,CAAC,MAAM,IAAI,OAAO,IAAI,QAAQ,CAAC,MAAM,IAAI,OAAO,CAAC,CAAC;QAC3G,eAAe,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC,CAAC;IACtC,CAAC,EAAE;QACD,SAAS;QACT,QAAQ;QACR,SAAS;KACV,CAAC,CAAC;IAEH,IAAM,WAAW,GAAG;QAClB,YAAY;QACZ,WAAW;QACX,YAAY;KACb,CAAC;IAEF,IAAM,cAAc,GAAG,WAAW,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,MAAM,CAAC;IAE1D,OAAO,CACL,uCACE,KAAK,EAAE;YACL,YAAY,EAAE,MAAM;SACrB;QAED,2CACG,UAAG,cAAc,cAAI,WAAW,CAAC,MAAM,wBAAqB,CACzD,CACF,CACP,CAAC;AACJ,CAAC,CAAC;AAjEW,QAAA,QAAQ,YAiEnB"}

package/dist/ui/Pill.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+export declare const Pill: React.FC<{
+    backgroundColor: string;
+    color: string;
+    label: string;
+}>;

package/dist/ui/Pill.js

@@ -0,0 +1,25 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Pill = void 0;
+/* eslint-disable no-use-before-define */
+/* eslint-disable import/no-extraneous-dependencies */
+var react_1 = __importDefault(require("react"));
+var Pill = function (props) {
+    var backgroundColor = props.backgroundColor, color = props.color, label = props.label;
+    return (react_1.default.createElement("div", { style: {
+            padding: '4px 6px',
+            backgroundColor: backgroundColor,
+            color: color,
+            borderRadius: '2px',
+            marginRight: '10px',
+            whiteSpace: 'nowrap',
+            flexShrink: 0,
+            lineHeight: 1,
+        } },
+        react_1.default.createElement("small", null, label)));
+};
+exports.Pill = Pill;
+//# sourceMappingURL=Pill.js.map

package/dist/ui/Pill.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Pill.js","sourceRoot":"","sources":["../../src/ui/Pill.tsx"],"names":[],"mappings":";;;;;;AAAA,yCAAyC;AACzC,sDAAsD;AACtD,gDAA0B;AAEnB,IAAM,IAAI,GAIZ,UAAC,KAAK;IAEP,IAAA,eAAe,GAGb,KAAK,gBAHQ,EACf,KAAK,GAEH,KAAK,MAFF,EACL,KAAK,GACH,KAAK,MADF,CACG;IAEV,OAAO,CACL,uCACE,KAAK,EAAE;YACL,OAAO,EAAE,SAAS;YAClB,eAAe,iBAAA;YACf,KAAK,OAAA;YACL,YAAY,EAAE,KAAK;YACnB,WAAW,EAAE,MAAM;YACnB,UAAU,EAAE,QAAQ;YACpB,UAAU,EAAE,CAAC;YACb,UAAU,EAAE,CAAC;SACd;QAED,6CACG,KAAK,CACA,CACJ,CACP,CAAC;AACJ,CAAC,CAAC;AA7BW,QAAA,IAAI,QA6Bf"}

package/dist/ui/Preview.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { Field } from 'payload/dist/admin/components/forms/Form/types';
+import { SEOConfig } from '../types';
+declare type PreviewFieldWithProps = Field & {
+    seoConfig: SEOConfig;
+};
+export declare const Preview: React.FC<PreviewFieldWithProps | {}>;
+export declare const getPreviewField: (props: any) => JSX.Element;
+export {};