Merge pull request #2 from flotiq/feature/25864-surfer-seo-pluing-imp…

…rovements #25864 surfer seo pluing improvements
flotiq · Dec 10, 2024 · c6fa3cd · c6fa3cd
2 parents 6d525e2 + f3d74bf
commit c6fa3cd
Show file tree

Hide file tree

Showing 13 changed files with 393 additions and 70 deletions.
diff --git a/.docs/images/settings-screen.png b/.docs/images/settings-screen.png
diff --git a/Readme.md b/Readme.md
@@ -16,8 +16,36 @@ be performed. The analysis window will be displayed in the sidebar during conten
 real-time SEO analysis of the content from the selected rich text field. This seamless integration ensures that users
 can optimize their content as they work, without needing to switch between tools
 
+> **Note**: The plugin also supports optional fields such as title, whose content will be processed as an `<h1>`.
+> lead, whose content will be analyzed as a `<p>` and FAQ, whose content will also be included in the analysis.
+
 ![](.docs/images/settings-screen.png)
 
+**The fields selected in the plugin configuration will be passed for analysis in the following format.**
+
+```html
+
+<body>
+   <h1>{{Title}}</h1>
+   <p>{{Lead}}</p>
+   {{source}}
+
+   <h2>Frequently Asked Questions</h2>
+   <div>
+       <h3>{{question.1}}</h3>
+       <div>{{question.1}}</div>
+   </div>
+   <div>
+       <h3>{{question.2}}</h3>
+       <div>{{question.2}}</div>
+   </div>
+   {{...}}
+</body>
+```
+
+It's worth noting that if an optional field is not selected, it will not be included in the analysis. For example, if
+the title field is left empty, the `<h1>` tag **will not be sent for analysis.**
+
 ### Usage
 
 > **Note**: You must be logged into your Surfer SEO account and enable third-party cookies in your browser for this

diff --git a/common/valid-fields.js b/common/valid-fields.js
@@ -1,11 +1,23 @@
 import pluginInfo from '../plugin-manifest.json';
 
+export const validTitleFields = ['text'];
+export const validLeadFields = ['text', 'textarea'];
 export const validSourceFields = ['richtext'];
+export const validFaqFields = ['object'];
 
 export const getValidFields = (contentTypes) => {
   const sourceFields = {};
   const sourceFieldsKeys = {};
 
+  const titleFields = {};
+  const titleFieldsKeys = {};
+
+  const leadFields = {};
+  const leadFieldsKeys = {};
+
+  const faqFields = {};
+  const faqFieldsKeys = {};
+
   contentTypes
     ?.filter(({ internal }) => !internal)
     ?.map(({ name, label }) => ({ value: name, label }));
@@ -14,21 +26,69 @@ export const getValidFields = (contentTypes) => {
     sourceFields[name] = [];
     sourceFieldsKeys[name] = [];
 
+    titleFields[name] = [];
+    titleFieldsKeys[name] = [];
+
+    leadFields[name] = [];
+    leadFieldsKeys[name] = [];
+
+    faqFields[name] = [];
+    faqFieldsKeys[name] = [];
+
     Object.entries(metaDefinition?.propertiesConfig || {}).forEach(
       ([key, fieldConfig]) => {
         const inputType = fieldConfig?.inputType;
 
+        if (validTitleFields?.includes(inputType)) {
+          titleFields[name].push({ value: key, label: fieldConfig.label });
+          titleFieldsKeys[name].push(key);
+        }
+
+        if (validLeadFields?.includes(inputType)) {
+          leadFields[name].push({ value: key, label: fieldConfig.label });
+          leadFieldsKeys[name].push(key);
+        }
+
         if (validSourceFields?.includes(inputType)) {
           sourceFields[name].push({ value: key, label: fieldConfig.label });
           sourceFieldsKeys[name].push(key);
         }
+
+        if (validFaqFields?.includes(inputType)) {
+          const containsQuestion = Object.entries(
+            fieldConfig.items?.propertiesConfig || {},
+          ).some(
+            ([key, value]) =>
+              key === 'question' &&
+              ['text', 'textarea'].includes(value.inputType),
+          );
+
+          const containsAnswer = Object.entries(
+            fieldConfig.items?.propertiesConfig || {},
+          ).some(
+            ([key, value]) =>
+              key === 'answer' &&
+              ['text', 'textarea'].includes(value.inputType),
+          );
+
+          if (containsQuestion && containsAnswer) {
+            faqFields[name].push({ value: key, label: fieldConfig.label });
+            faqFieldsKeys[name].push(key);
+          }
+        }
       },
     );
   });
 
   return {
+    titleFields,
+    titleFieldsKeys,
+    leadFields,
+    leadFieldsKeys,
     sourceFields,
     sourceFieldsKeys,
+    faqFields,
+    faqFieldsKeys,
   };
 };
 

diff --git a/i18n.js b/i18n.js
@@ -8,27 +8,50 @@ i18n.init({
       translation: {
         Source: 'Source field name',
         SourceHelpText:
-          'Select the field from which the analysis is to be performed',
+          'Select the field from which the content will be given for analysis, as the main content',
+        Title: 'Title field name',
+        TitleHelpText:
+          'Select the field whose content will be provided for analysis as an h1 tag',
+        Lead: 'Lead field name',
+        LeadHelpText:
+          'Select the field whose contents will be given to the analysis as p tag',
+        Faq: 'FAQ',
+        FaqHelpText: 'Select the field from FAQ will be embeded to analysis',
         ContentType: 'Content Type',
         ContentTypeHelpText: '',
         FieldRequired: 'Field is required',
         WrongFieldType: 'This field type is not supported',
         NonRequiredFieldsInCTD:
           'Make sure the selected content type contains fields that can be used in the plugin. ' +
           'Allowed types: {{types}}',
+        ThirdPartyCookies:
+          'You might need to enable third-party cookies in your browser for this integration to function properly',
       },
     },
     pl: {
       translation: {
         Source: 'Pole źródła',
-        SourceHelpText: 'Wybierz pole z którego ma być przeprowadzona analiza',
+        SourceHelpText:
+          'Wybierz pole z którego zawartość będzie podana do analizy, jako główny content',
+        Title: 'Pole tytułu',
+        TitleHelpText:
+          'Wybierz pole którego zawartość będzie podana do analizy jako tag h1',
+        Lead: 'Pole wprowadzenia',
+        LeadHelpText:
+          'Wybierz pole którego zawartość będzie podana analizy jako tag p',
+        Faq: 'FAQ',
+        FaqHelpText:
+          'Wybierz pole którego z którego zostaną pobrane FAQ, oraz przekazane do analizy',
         ContentType: 'Typ zawartości',
         ContentTypeHelpText: '',
         FieldRequired: 'Pole jest wymagane',
         WrongFieldType: 'Ten typ pola nie jest wspierany',
         NonRequiredFieldsInCTD:
           'Upewnij się, że wybrany typ definicji zawiera pola, które mogą być wykorzystane we wtyczce. ' +
           'Dozwolone typy: {{types}}',
+        ThirdPartyCookies:
+          'Aby ta integracja działała poprawnie, konieczne może być włączenie w przeglądarce obsługi ' +
+          'plików cookie innych firm',
       },
     },
   },

diff --git a/plugin-manifest.json b/plugin-manifest.json
@@ -1,9 +1,9 @@
 {
   "id": "flotiq.surferseo-content-analyzer",
-  "name": "Surferseo content analyzer plugin",
+  "name": "SurferSEO content analyzer plugin",
   "description": "Flotiq ui plugin for analyze selected fields for SEO optimization directly with SurferSEO, providing real-time content improvement suggestions.",
-  "version": "1.0.0",
-  "repository": "https://github.com/flotiq/flotuq-ui-plugin-surferseo-content-analyzer",
+  "version": "1.1.0",
+  "repository": "https://github.com/flotiq/flotiq-ui-plugin-surferseo-content-analyzer",
   "url": "https://localhost:3053/index.js",
   "permissions": []
 }
diff --git a/plugins/field-config/plugin-form/index.js b/plugins/field-config/plugin-form/index.js
@@ -1,6 +1,9 @@
 import {
+  validFaqFields,
   validFieldsCacheKey,
+  validLeadFields,
   validSourceFields,
+  validTitleFields,
 } from '../../../common/valid-fields.js';
 import { getCachedElement } from '../../../common/plugin-element-cache.js';
 import i18n from 'i18next';
@@ -23,9 +26,10 @@ export const handlePluginFormConfig = ({ name, config, formik }) => {
 
   if (index == null || !type) return;
   const ctd = formik.values.surferSeoAnalyzer[index].content_type;
-  const { sourceFields } = getCachedElement(validFieldsCacheKey);
+  const { titleFields, leadFields, sourceFields, faqFields } =
+    getCachedElement(validFieldsCacheKey);
 
-  const keysToClearOnCtdChange = ['source'];
+  const keysToClearOnCtdChange = ['title', 'lead', 'source', 'faq'];
 
   switch (type) {
     case 'content_type':
@@ -38,6 +42,24 @@ export const handlePluginFormConfig = ({ name, config, formik }) => {
         });
       };
       break;
+    case 'title':
+      insertSelectOptions(
+        config,
+        titleFields?.[ctd],
+        i18n.t('NonRequiredFieldsInCTD', {
+          types: validTitleFields.join(', '),
+        }),
+      );
+      break;
+    case 'lead':
+      insertSelectOptions(
+        config,
+        leadFields?.[ctd],
+        i18n.t('NonRequiredFieldsInCTD', {
+          types: validLeadFields.join(', '),
+        }),
+      );
+      break;
     case 'source':
       insertSelectOptions(
         config,
@@ -47,6 +69,15 @@ export const handlePluginFormConfig = ({ name, config, formik }) => {
         }),
       );
       break;
+    case 'faq':
+      insertSelectOptions(
+        config,
+        faqFields?.[ctd],
+        i18n.t('NonRequiredFieldsInCTD', {
+          types: validFaqFields.join(', '),
+        }),
+      );
+      break;
     default:
       break;
   }

diff --git a/plugins/images/information.svg b/plugins/images/information.svg
diff --git a/plugins/index.js b/plugins/index.js
@@ -6,6 +6,7 @@ import { handlePluginFormConfig } from './field-config/plugin-form/index.js';
 import { createSidebar } from './sidebar/index.js';
 import { parsePluginSettings } from '../common/helpers.js';
 import i18n from 'i18next';
+import { buildTemplate } from './template/template.js';
 
 const setupSurferSeo = () => {
   (() => {
@@ -41,50 +42,58 @@ const appendStyles = () => {
   }
 };
 
-registerFn(pluginInfo, (handler, _, { getPluginSettings, getLanguage }) => {
-  const getSettings = (contentType) => {
-    const pluginConfig = parsePluginSettings(getPluginSettings());
-    return pluginConfig?.[contentType?.name];
-  };
+registerFn(
+  pluginInfo,
+  (handler, _, { getPluginSettings, getLanguage, getSpaceId }) => {
+    const getSettings = (contentType) => {
+      const pluginConfig = parsePluginSettings(getPluginSettings());
+      return pluginConfig?.[contentType?.name];
+    };
 
-  setupSurferSeo();
-  appendStyles();
+    setupSurferSeo();
+    appendStyles();
 
-  const language = getLanguage();
-  if (language !== i18n.language) {
-    i18n.changeLanguage(language);
-  }
+    const language = getLanguage();
+    if (language !== i18n.language) {
+      i18n.changeLanguage(language);
+    }
 
-  handler.on('flotiq.plugins.manage::form-schema', (data) =>
-    handleManagePlugin(data),
-  );
+    handler.on('flotiq.plugins.manage::form-schema', (data) =>
+      handleManagePlugin(data),
+    );
 
-  handler.on('flotiq.form.field::config', (data) => {
-    return handlePluginFormConfig(data);
-  });
+    handler.on('flotiq.form.field::config', (data) =>
+      handlePluginFormConfig(data),
+    );
 
-  handler.on(
-    'flotiq.form.sidebar-panel::add',
-    ({ contentType, contentObject }) => {
-      const ctdConfig = getSettings(contentType);
-      if (!ctdConfig) return;
+    handler.on(
+      'flotiq.form.sidebar-panel::add',
+      ({ contentType, contentObject }) => {
+        const ctdConfig = getSettings(contentType);
+        if (!ctdConfig) return;
 
-      return createSidebar(contentObject?.id);
-    },
-  );
+        return createSidebar(getSpaceId, contentObject?.id);
+      },
+    );
 
-  handler.on('flotiq.form::add', ({ formik, contentType }) => {
-    const ctdConfig = getSettings(contentType);
-    if (!ctdConfig) return;
+    handler.on('flotiq.form::add', ({ formik, contentType }) => {
+      const ctdConfig = getSettings(contentType);
+      if (!ctdConfig) return;
 
-    const source = formik.values[ctdConfig.source];
+      const source = buildTemplate(
+        formik.values[ctdConfig.title],
+        formik.values[ctdConfig.lead],
+        formik.values[ctdConfig.source],
+        formik.values[ctdConfig.faq],
+      );
 
-    window.surferGuidelines.setHtml(source);
-  });
+      window.surferGuidelines.setHtml(source);
+    });
 
-  handler.on('flotiq.language::changed', ({ language }) => {
-    if (language !== i18n.language) {
-      i18n.changeLanguage(language);
-    }
-  });
-});
+    handler.on('flotiq.language::changed', ({ language }) => {
+      if (language !== i18n.language) {
+        i18n.changeLanguage(language);
+      }
+    });
+  },
+);