[FEATURE] First setup for social previews in the backend, facebook an…

…d twitter (WIP)

Build/resources/javascript/Components/FacebookPreview.js

@@ -0,0 +1,27 @@
+import React from 'react';
+import {connect} from 'react-redux';
+
+import {FacebookPreview as YoastFacebookPreview} from '@yoast/social-metadata-previews';
+
+class FacebookPreview extends React.Component {
+
+    render() {
+        return (
+            <React.Fragment>
+                <YoastFacebookPreview {...this.props} />
+            </React.Fragment>
+        );
+    }
+
+}
+
+function mapStateToProps(state) {
+    return {
+        siteUrl: state.facebookPreview.siteBase,
+        title: state.facebookPreview.title,
+        description: state.facebookPreview.description,
+        imageUrl: state.facebookPreview.imageUrl
+    }
+}
+
+export default connect(mapStateToProps)(FacebookPreview);

Build/resources/javascript/Components/TwitterPreview.js

@@ -0,0 +1,27 @@
+import React from 'react';
+import { connect } from 'react-redux';
+
+import {TwitterPreview as YoastTwitterPreview} from '@yoast/social-metadata-previews';
+
+class TwitterPreview extends React.Component {
+
+    render() {
+        return (
+            <React.Fragment>
+                <YoastTwitterPreview {...this.props} />
+            </React.Fragment>
+        );
+    }
+
+}
+
+function mapStateToProps(state) {
+    return {
+        siteUrl: state.twitterPreview.siteBase,
+        title: state.twitterPreview.title,
+        description: state.twitterPreview.description,
+        imageUrl: state.twitterPreview.imageUrl
+    }
+}
+
+export default connect(mapStateToProps)(TwitterPreview);

Build/resources/javascript/plugin.js

@@ -11,17 +11,22 @@ import DescriptionProgressBar from './Components/DescriptionProgressBar';
 import LinkingSuggestions from "./Components/LinkingSuggestions";
 import Insights from "./Components/Insights";
 import FleschReadingScore from "./Components/FleschReadingScore";
+import FacebookPreview from "./Components/FacebookPreview";
+import TwitterPreview from "./Components/TwitterPreview";
+
 import store from './redux/store';
 import {getContent, updateContent} from './redux/actions/content';
 import {setFocusKeyword} from './redux/actions/focusKeyword';
-
 import {saveRelevantWords} from './redux/actions/relevantWords';
+import {setFocusKeywordSynonyms} from "./redux/actions/focusKeywordSynonyms";
+import {getLinkingSuggestions} from "./redux/actions/linkingSuggestions";
+import {getFacebookData, updateFacebookData} from "./redux/actions/facebookPreview";
+import {getTwitterData, updateTwitterData} from "./redux/actions/twitterPreview";
+
 import createAnalysisWorker from './analysis/createAnalysisWorker';
 import refreshAnalysis from './analysis/refreshAnalysis';
-import {setFocusKeywordSynonyms} from "./redux/actions/focusKeywordSynonyms";
 import {setLocaleData} from "@wordpress/i18n";
 import {Paper} from "yoastseo";
-import {getLinkingSuggestions} from "./redux/actions/linkingSuggestions";
 import ReadingTime from "./Components/ReadingTime";
 import WordCount from "./Components/WordCount";
 
@@ -97,6 +102,7 @@ let YoastPlugin = {
         YoastPlugin.initFocusKeyword();
         YoastPlugin.initRelatedFocusKeywords();
         YoastPlugin.initSeoTitle();
+        YoastPlugin.initSocialPreviews();
     },
 
     initContentAnalysis: () => {
@@ -408,6 +414,58 @@ let YoastPlugin = {
         });
     },
 
+    initSocialPreviews: () => {
+        const socialPreviews = [{
+            socialType: 'facebook',
+            component: <FacebookPreview />,
+            socialDataRetrieve: function (imageUrl, siteBase) {
+                return getFacebookData(imageUrl, siteBase);
+            },
+            socialDataUpdate: function (payload) {
+                return updateFacebookData(payload);
+            },
+            updateFields: {
+                title: YoastConfig.fieldSelectors.ogTitle,
+                description: YoastConfig.fieldSelectors.ogDescription
+            }
+        }, {
+            socialType: 'twitter',
+            component: <TwitterPreview />,
+            socialDataRetrieve: function (imageUrl, siteBase) {
+                return getTwitterData(imageUrl, siteBase);
+            },
+            socialDataUpdate: function (payload) {
+                return updateTwitterData(payload);
+            },
+            updateFields: {
+                title: YoastConfig.fieldSelectors.twitterTitle,
+                description: YoastConfig.fieldSelectors.twitterDescription
+            }
+        }];
+
+        socialPreviews.forEach(item => {
+            let previewElement = document.querySelector('[data-yoast-social-preview-type="' + item.socialType + '"]');
+            if (previewElement) {
+                let imageUrl = previewElement.dataset.yoastSocialPreviewImage,
+                    siteBase = previewElement.dataset.yoastSocialPreviewBase;
+
+                store.dispatch(item.socialDataRetrieve(imageUrl, siteBase));
+                const socialPreviewRoot = createRoot(previewElement);
+                socialPreviewRoot.render(<Provider store={store}>{item.component}</Provider>);
+
+                for (let field in item.updateFields) {
+                    if (item.updateFields.hasOwnProperty(field)) {
+                        let fieldElement = document.querySelector('[data-formengine-input-name="' + item.updateFields[field] + '"]');
+                        fieldElement.addEventListener('input', debounce(_ => {
+                            console.log(field + ' - ' + fieldElement.value);
+                            store.dispatch(item.socialDataUpdate({[field]: fieldElement.value}));
+                        }));
+                    }
+                }
+            }
+        });
+    },
+
     getTitleValue: (value) => {
         if (typeof YoastConfig.pageTitlePrepend !== "undefined" &&
             YoastConfig.pageTitlePrepend !== null &&

Build/resources/javascript/redux/actions/facebookPreview.js

@@ -0,0 +1,41 @@
+export const UPDATE_FACEBOOK_PREVIEW = 'UPDATE_FACEBOOK_PREVIEW';
+
+export function getFacebookData(imageUrl, siteBase) {
+    return dispatch => {
+
+        let ogTitle = getInputValue(YoastConfig.fieldSelectors.ogTitle);
+        if (ogTitle === '') {
+            ogTitle = getInputValue(YoastConfig.fieldSelectors.pageTitle);
+        }
+        let ogDescription = getInputValue(YoastConfig.fieldSelectors.ogDescription);
+        console.log(ogDescription + '?');
+        if (ogDescription === '') {
+            ogDescription = getInputValue(YoastConfig.fieldSelectors.description);
+        }
+
+        dispatch({
+            type: UPDATE_FACEBOOK_PREVIEW,
+            payload: {
+                title: ogTitle,
+                description: ogDescription,
+                siteBase: siteBase,
+                imageUrl: imageUrl
+            }
+        });
+    };
+}
+
+function getInputValue(fieldName) {
+    let inputField = document.querySelector('[name="' + fieldName + '"]');
+    if (inputField) {
+        return inputField.value;
+    }
+    return '';
+}
+
+export function updateFacebookData(content) {
+    return {
+        type: UPDATE_FACEBOOK_PREVIEW,
+        payload: content
+    };
+}

Build/resources/javascript/redux/actions/index.js

@@ -8,6 +8,8 @@ import {getFleschReadingScore} from "./flesch";
 import {getLinkingSuggestions} from "./linkingSuggestions";
 import {getReadingTime} from "./readingTime";
 import {getWordCount} from "./wordCount";
+import {getFacebookData} from "./facebookPreview";
+import {getTwitterData} from "./twitterPreview";
 
 export default {
     getContent,
@@ -19,5 +21,7 @@ export default {
     getFleschReadingScore,
     getReadingTime,
     getWordCount,
-    getLinkingSuggestions
+    getLinkingSuggestions,
+    getFacebookData,
+    getTwitterData
 };

Build/resources/javascript/redux/actions/twitterPreview.js

@@ -0,0 +1,40 @@
+export const UPDATE_TWITTER_PREVIEW = 'UPDATE_TWITTER_PREVIEW';
+
+export function getTwitterData(imageUrl, siteBase) {
+    return dispatch => {
+
+        let twitterTitle = getInputValue(YoastConfig.fieldSelectors.twitterTitle);
+        if (twitterTitle === '') {
+            twitterTitle = getInputValue(YoastConfig.fieldSelectors.pageTitle);
+        }
+        let twitterDescription = getInputValue(YoastConfig.fieldSelectors.twitterDescription);
+        if (twitterDescription === '') {
+            twitterDescription = getInputValue(YoastConfig.fieldSelectors.description);
+        }
+
+        dispatch({
+            type: UPDATE_TWITTER_PREVIEW,
+            payload: {
+                title: twitterTitle,
+                description: twitterDescription,
+                siteBase: siteBase,
+                imageUrl: imageUrl
+            }
+        });
+    };
+}
+
+function getInputValue(fieldName) {
+    let inputField = document.querySelector('[name="' + fieldName + '"]');
+    if (inputField) {
+        return inputField.value;
+    }
+    return '';
+}
+
+export function updateTwitterData(content) {
+    return {
+        type: UPDATE_TWITTER_PREVIEW,
+        payload: content
+    };
+}

Build/resources/javascript/redux/reducers/facebookPreview.js

@@ -0,0 +1,12 @@
+import {UPDATE_FACEBOOK_PREVIEW} from '../actions/facebookPreview';
+
+const initialState = '';
+
+export default (state = initialState, action) => {
+    switch(action.type) {
+        case UPDATE_FACEBOOK_PREVIEW:
+            return {...state, ...action.payload};
+        default:
+            return state;
+    }
+};

Build/resources/javascript/redux/reducers/index.js

@@ -8,6 +8,9 @@ import flesch from "./flesch";
 import readingTime from "./readingTime";
 import wordCount from "./wordCount";
 import linkingSuggestions from "./linkingSuggestions";
+import facebookPreview from "./facebookPreview";
+import twitterPreview from "./twitterPreview";
+
 export default {
     content,
     focusKeyword,
@@ -18,5 +21,7 @@ export default {
     flesch,
     readingTime,
     wordCount,
-    linkingSuggestions
+    linkingSuggestions,
+    facebookPreview,
+    twitterPreview
 }

Build/resources/javascript/redux/reducers/twitterPreview.js

@@ -0,0 +1,12 @@
+import {UPDATE_TWITTER_PREVIEW} from '../actions/twitterPreview';
+
+const initialState = '';
+
+export default (state = initialState, action) => {
+    switch(action.type) {
+        case UPDATE_TWITTER_PREVIEW:
+            return {...state, ...action.payload};
+        default:
+            return state;
+    }
+};

Build/resources/package.json

@@ -43,7 +43,9 @@
     "languageteam": "Yoast Translate <[email protected]>",
     "lasttranslator": "Yoast Translate Team <[email protected]>"
   },
-  "dependencies": {},
+  "dependencies": {
+    "@yoast/social-metadata-previews": "^2.0.0-alpha.0"
+  },
   "repository": {
     "type": "git",
     "url": "https://github.com/YoastSeoForTypo3/t3ext-yoast-seo.git"

Build/resources/sass/yoast.scss

@@ -250,3 +250,9 @@ div.yoast-analysis {
 		}
 	}
 }
+
+#facebookPreview {
+	span.screen-reader-text {
+		display: none;
+	}
+}

Build/resources/yarn.lock

@@ -3693,6 +3693,23 @@
     redux "^3.7.2"
     styled-components "^5.3.6"
 
+"@yoast/social-metadata-previews@^2.0.0-alpha.0":
+  version "2.0.0-alpha.0"
+  resolved "https://registry.yarnpkg.com/@yoast/social-metadata-previews/-/social-metadata-previews-2.0.0-alpha.0.tgz#50b6d56dbb0a5fd25c05d99c4b73de86f5602b4f"
+  integrity sha512-MCrOXZwu9v/Y5SgnDzI7gJFjcvsTlTxpHq2LJwHDPMCN72Pne0YVzOXMiQLgtCveFGdmOs/oEW+PqqQ+IkInKA==
+  dependencies:
+    "@wordpress/i18n" "^1.1.0"
+    "@yoast/components" "^3.0.0-alpha.0"
+    "@yoast/replacement-variable-editor" "^2.0.0-alpha.0"
+    "@yoast/social-metadata-forms" "^2.0.0-alpha.0"
+    "@yoast/style-guide" "^0.14.0-alpha.0"
+    lodash "^4.17.11"
+    prop-types "^15.6.0"
+    react "^18.2.0"
+    react-dom "^18.2.0"
+    redux "^3.7.2"
+    styled-components "^5.3.6"
+
 "@yoast/style-guide@^0.13.0":
   version "0.13.0"
   resolved "https://registry.yarnpkg.com/@yoast/style-guide/-/style-guide-0.13.0.tgz#69e41ddacc62e378fbc98df9aebe1d63115ea047"