Merge branch 'release-yoast-seo/9.2'

1.43.0 November 19th, 2018
Fixed
* Fixes assessments failing when using a `<` sign in the content.
* Fixes a bug where paragraphs were sometimes not correctly detected because paragraph tags were not automatically added in WordPress-like fashion.

Added
* Adds toggles to use the different assessors in the webpack example (e.g., for all the different combinations for cornerstone and taxonomy pages and related keyphrase).
* Introduce logger in the AnalysisWebWorker to replace the development console log.

Changed
* Refactor SEO assessment file names and exports. Props [Kingdutch](https://github.com/Kingdutch).
* Disables the non-functioning markers for the subheading distribution assessment.

CHANGELOG.md

@@ -5,6 +5,19 @@ This changelog is according to [Keep a Changelog](http://keepachangelog.com).
 All notable changes to this project will be documented in this file.
 We will follow [Semantic Versioning](http://semver.org/) from version 2 and onwards.
 
+### 1.43.0 November 19th, 2018
+### Fixed
+* Fixes assessments failing when using a `<` sign in the content.
+* Fixes a bug where paragraphs were sometimes not correctly detected because paragraph tags were not automatically added in WordPress-like fashion.
+
+### Added
+* Adds toggles to use the different assessors in the webpack example (e.g., for all the different combinations for cornerstone and taxonomy pages and related keyphrase).
+* Introduce logger in the AnalysisWebWorker to replace the development console log.
+
+### Changed
+* Refactor SEO assessment file names and exports. Props [Kingdutch](https://github.com/Kingdutch).
+* Disables the non-functioning markers for the subheading distribution assessment.
+
 ## 1.42.0 November 5th, 2018
 
 ### Fixed

examples/webpack/.eslintrc

@@ -1,3 +1,4 @@
 rules:
   require-jsdoc: 0
   react/prop-types: 0
+  react/jsx-no-bind: 0

examples/webpack/config/env.js

@@ -77,6 +77,8 @@ function getClientEnvironment(publicUrl) {
         // This should only be used as an escape hatch. Normally you would put
         // images into the `src` and `import` them in code to get their paths.
         PUBLIC_URL: publicUrl,
+        // Custom variables.
+        YOAST_RECALIBRATION: process.env.YOAST_RECALIBRATION || "disabled",
       }
     );
   // Stringify all values so we can feed into Webpack DefinePlugin

examples/webpack/package.json

@@ -17,12 +17,12 @@
     "dotenv-expand": "4.2.0",
     "eslint": "4.10.0",
     "eslint-config-react-app": "^2.1.0",
-    "eslint-config-yoast": "^3.0.1",
+    "eslint-config-yoast": "^5.0.1",
     "eslint-loader": "1.9.0",
     "eslint-plugin-flowtype": "2.39.1",
     "eslint-plugin-import": "2.8.0",
-    "eslint-plugin-jsx-a11y": "5.1.1",
-    "eslint-plugin-react": "7.4.0",
+    "eslint-plugin-jsx-a11y": "^6.1.2",
+    "eslint-plugin-react": "^7.11.1",
     "eslint-plugin-yoast": "^1.0.1",
     "extract-text-webpack-plugin": "3.0.2",
     "file-loader": "1.1.5",
@@ -56,10 +56,11 @@
     "webpack-manifest-plugin": "1.3.2",
     "whatwg-fetch": "2.0.3",
     "worker-loader": "2.0.0",
-    "yoast-components": "^4.10.1"
+    "yoast-components": "^4.13.0"
   },
   "scripts": {
     "start": "node scripts/start.js",
+    "start-recalibration": "YOAST_RECALIBRATION=enabled node scripts/start.js",
     "build": "node scripts/build.js",
     "test": "node scripts/test.js --env=jsdom"
   },

examples/webpack/src/App.js

@@ -17,6 +17,8 @@ import { setResults } from "./redux/actions/results";
 import { setConfigurationAttribute } from "./redux/actions/configuration";
 import Inputs from "./components/Inputs";
 import { setStatus } from "./redux/actions/worker";
+import formatAnalyzeResult from "./utils/formatAnalyzeResult";
+import { ColumnLeft, ColumnRight, Columns } from "./components/Columns";
 
 class App extends React.Component {
 	/**
@@ -48,9 +50,7 @@ class App extends React.Component {
 	initialize() {
 		const { configuration, worker } = this.props;
 
-		worker.initialize( configuration )
-			.then( data => console.log( "initialization done!", data ) )
-			.then( this.analyze );
+		worker.initialize( configuration ).then( this.analyze );
 	}
 
 	/**
@@ -71,11 +71,8 @@ class App extends React.Component {
 			.then( ( { result } ) => {
 				setWorkerStatus( "idling" );
 
-				this.props.setResults( {
-					readability: result.readability.results,
-					seo: result.seo[ "" ].results,
-				} );
-		    } );
+				this.props.setResults( formatAnalyzeResult( result, "" ) );
+			} );
 	}
 
 	/**
@@ -97,19 +94,29 @@ class App extends React.Component {
 	/**
 	 * Renders the app.
 	 *
-	 * @returns {ReactElement} The app.
+	 * @returns {React.Element} The app.
 	 */
 	render() {
 		return (
 			<Fragment>
 				<h1>YoastSEO.js development tool</h1>
 
-				<Collapsible title="Input">
-					<Inputs />
-				</Collapsible>
+				<Columns minWidth="768px">
+					<ColumnLeft minWidth="768px">
+						<Collapsible title="Input">
+							<Inputs />
+						</Collapsible>
+					</ColumnLeft>
 
-				<Collapsible title="Results">
-					<Results />
+					<ColumnRight minWidth="768px">
+						<Collapsible title="Results">
+							<Results />
+						</Collapsible>
+					</ColumnRight>
+				</Columns>
+
+				<Collapsible title="Markings">
+					<Markings />
 				</Collapsible>
 
 				<Collapsible title="Worker status">
@@ -124,10 +131,6 @@ class App extends React.Component {
 					/>
 				</Collapsible>
 
-				<Collapsible title="Markings">
-					<Markings />
-				</Collapsible>
-
 				<ul>
 					<li>Debugging information</li>
 					<li>Worker communication</li>
@@ -144,7 +147,7 @@ class App extends React.Component {
 
 					<li>Performance information</li>
 					<li>Re-order collapsibles</li>
-					<li>Add button to trigger a ton of analyses continiously. This can be used to check for performance & memory leaks.</li>
+					<li>Add button to trigger a ton of analyses continuously. This can be used to check for performance & memory leaks.</li>
 				</ul>
 
 				Design Todos:
@@ -169,5 +172,5 @@ export default connect(
 			setConfigurationAttribute: ( ...args ) => dispatch( setConfigurationAttribute( ...args ) ),
 			setWorkerStatus: ( status ) => dispatch( setStatus( status ) ),
 		};
-	}
+	},
 )( App );

examples/webpack/src/components/Button.js

@@ -1,6 +1,6 @@
 import React from "react";
 import PropTypes from "prop-types";
-import { isFunction } from "lodash-es";
+import { isFunction, noop } from "lodash-es";
 
 class Button extends React.PureComponent {
 	/**
@@ -56,4 +56,10 @@ Button.propTypes = {
 	onClick: PropTypes.func,
 };
 
+Button.defaultProps = {
+	id: null,
+	children: [],
+	onClick: noop,
+};
+
 export default Button;

examples/webpack/src/components/Checkbox.js

@@ -1,6 +1,6 @@
 import React from "react";
 import PropTypes from "prop-types";
-import isFunction from "lodash/isFunction";
+import { isFunction } from "lodash-es";
 
 class Checkbox extends React.PureComponent {
 	/**

examples/webpack/src/components/Columns.js

@@ -0,0 +1,23 @@
+import styled from "styled-components";
+
+export const ColumnLeft = styled.div`
+	flex: 1;
+	@media (min-width: ${ props => props.minWidth }) {
+		padding-right: 10px;
+	}
+`;
+
+export const ColumnRight = styled.div`
+	flex: 1;
+	@media (min-width: ${ props => props.minWidth }) {
+		padding-left: 10px;
+	}
+`;
+
+export const Columns = styled.div`
+	@media (min-width: ${ props => props.minWidth }) {
+		display: flex;
+		align-content: space-between;
+	}
+`;
+

examples/webpack/src/components/Container.js

@@ -0,0 +1,5 @@
+import styled from "styled-components";
+
+export default styled.div`
+	margin-top: ${ props => props.marginTop ? props.marginTop : "16px" };
+`;

examples/webpack/src/components/Controls.js

@@ -1,42 +1,51 @@
 /* External */
+import { noop } from "lodash-es";
 import React, { Fragment } from "react";
 import { connect } from "react-redux";
+import Toggle from "yoast-components/composites/Plugin/Shared/components/Toggle";
 
 /* Internal */
-import Button from "./Button";
+import { setConfigurationAttribute } from "../redux/actions/configuration";
 import { clearStorage } from "../redux/utils/localstorage";
 import AutomaticAnalysis from "./AutomaticAnalysis";
-import { setConfigurationAttribute } from "../redux/actions/configuration";
-import Toggle
-	from "yoast-components/composites/Plugin/Shared/components/Toggle";
-import { noop } from "lodash-es";
+import Button from "./Button";
+import Container from "./Container";
 
+function clearStorageAction() {
+	clearStorage();
+	window.location.reload();
+}
 
-function Controls( { useKeywordDistribution, onInitialize, onAnalyze, onAnalyzeSpam, setConfigurationAttribute } ) {
+function Controls( {
+	useKeywordDistribution,
+	onInitialize,
+	onAnalyze,
+	onAnalyzeSpam,
+	setConfigurationAttribute: setConfigAttribute,
+} ) {
 	return <Fragment>
 		<div className="button-container">
 			<AutomaticAnalysis />
 
 			<Button onClick={ onInitialize }>Initialize</Button>
 			<Button onClick={ onAnalyze }>Analyze</Button>
-			<Button onClick={ () => {
-				clearStorage();
-				window.location.reload();
-			} }>Clear</Button>
+			<Button onClick={ clearStorageAction }>Clear</Button>
 			<Button onClick={ onAnalyzeSpam }>Analyze Spam</Button>
 		</div>
 
 		<h2>Configuration</h2>
 
-		<Toggle
-			id="toggle-use-keyword-distribution"
-			labelText="Use keyword distribution"
-			isEnabled={ useKeywordDistribution }
-			onSetToggleState={ value => {
-				setConfigurationAttribute( "useKeywordDistribution", value );
-			} }
-			onToggleDisabled={ noop }
-		/>
+		<Container>
+			<Toggle
+				id="toggle-use-keyword-distribution"
+				labelText="Use keyphrase distribution"
+				isEnabled={ useKeywordDistribution }
+				onSetToggleState={ value => {
+					setConfigAttribute( "useKeywordDistribution", value );
+				} }
+				onToggleDisabled={ noop }
+			/>
+		</Container>
 	</Fragment>;
 }
 
@@ -50,5 +59,5 @@ export default connect(
 		return {
 			setConfigurationAttribute: ( name, value ) => dispatch( setConfigurationAttribute( name, value ) ),
 		};
-	}
+	},
 )( Controls );