From fc02b933bbb00cad2c03717a14f7d1c70c01d789 Mon Sep 17 00:00:00 2001 From: Jacob Fletcher Date: Wed, 17 Nov 2021 17:55:25 -0500 Subject: [PATCH 01/85] feat: renames meta plugin to seo --- packages/plugin-seo/defaults.ts | 10 ++ .../plugin-seo/fields/MetaDescription.tsx | 111 ++++++++++++++ packages/plugin-seo/fields/MetaImage.tsx | 104 ++++++++++++++ packages/plugin-seo/fields/MetaTitle.tsx | 109 ++++++++++++++ packages/plugin-seo/index.ts | 86 +++++++++++ packages/plugin-seo/ui/LengthIndicator.tsx | 136 ++++++++++++++++++ packages/plugin-seo/ui/Overview.tsx | 85 +++++++++++ packages/plugin-seo/ui/Pill.tsx | 34 +++++ packages/plugin-seo/ui/Snippet.tsx | 71 +++++++++ .../utilities/generateMetaDescription.ts | 58 ++++++++ .../plugin-seo/utilities/generateMetaImage.ts | 61 ++++++++ .../plugin-seo/utilities/generateMetaTitle.ts | 13 ++ .../plugin-seo/utilities/stringifyRichText.ts | 14 ++ 13 files changed, 892 insertions(+) create mode 100644 packages/plugin-seo/defaults.ts create mode 100644 packages/plugin-seo/fields/MetaDescription.tsx create mode 100644 packages/plugin-seo/fields/MetaImage.tsx create mode 100644 packages/plugin-seo/fields/MetaTitle.tsx create mode 100644 packages/plugin-seo/index.ts create mode 100644 packages/plugin-seo/ui/LengthIndicator.tsx create mode 100644 packages/plugin-seo/ui/Overview.tsx create mode 100644 packages/plugin-seo/ui/Pill.tsx create mode 100644 packages/plugin-seo/ui/Snippet.tsx create mode 100644 packages/plugin-seo/utilities/generateMetaDescription.ts create mode 100644 packages/plugin-seo/utilities/generateMetaImage.ts create mode 100644 packages/plugin-seo/utilities/generateMetaTitle.ts create mode 100644 packages/plugin-seo/utilities/stringifyRichText.ts diff --git a/packages/plugin-seo/defaults.ts b/packages/plugin-seo/defaults.ts new file mode 100644 index 000000000..61ac94bf5 --- /dev/null +++ b/packages/plugin-seo/defaults.ts @@ -0,0 +1,10 @@ +export const defaults = { + title: { + minLength: 50, + maxLength: 60, + }, + description: { + minLength: 100, + maxLength: 150, + }, +}; diff --git a/packages/plugin-seo/fields/MetaDescription.tsx b/packages/plugin-seo/fields/MetaDescription.tsx new file mode 100644 index 000000000..30d6459f5 --- /dev/null +++ b/packages/plugin-seo/fields/MetaDescription.tsx @@ -0,0 +1,111 @@ +/* eslint-disable no-use-before-define */ +/* eslint-disable import/no-extraneous-dependencies */ +import React, { useCallback } from 'react'; +import { Props as TextFieldType } from 'payload/dist/admin/components/forms/field-types/Text/types'; +import { useFieldType, useWatchForm } from 'payload/components/forms'; +import { FieldType as UseFieldType, Options } from 'payload/dist/admin/components/forms/useFieldType/types'; +import { LengthIndicator } from '../ui/LengthIndicator'; +import { defaults } from '../defaults'; +import { generateMetaDescription } from '../utilities/generateMetaDescription'; + +const { + minLength, + maxLength, +} = defaults.description; + +export const MetaDescription: React.FC = (props) => { + const { + label, + } = props; + + const { fields } = useWatchForm(); + + const field: UseFieldType = useFieldType(props as Options); + + const { + value, + setValue, + } = field; + + const generate = useCallback(() => { + const generatedDesc = generateMetaDescription(fields); + setValue(generatedDesc); + }, [ + fields, + setValue, + ]); + + return ( +
+
+
+ {label} +   + — +   + +
+
+ {`This should be between ${minLength} and ${maxLength} characters. Auto-generation will format a description using the page content.`} +
+
+
+