diff --git a/CHANGELOG.md b/CHANGELOG.md index ecc87ceba..1a1982689 100644 --- a/CHANGELOG.md +++ b/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 diff --git a/examples/webpack/.eslintrc b/examples/webpack/.eslintrc index 3ac9e5980..b2efa40b8 100644 --- a/examples/webpack/.eslintrc +++ b/examples/webpack/.eslintrc @@ -1,3 +1,4 @@ rules: require-jsdoc: 0 react/prop-types: 0 + react/jsx-no-bind: 0 diff --git a/examples/webpack/config/env.js b/examples/webpack/config/env.js index 30a6c7f1b..2e38ad87a 100644 --- a/examples/webpack/config/env.js +++ b/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 diff --git a/examples/webpack/package.json b/examples/webpack/package.json index af253320c..c09cedcc7 100644 --- a/examples/webpack/package.json +++ b/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" }, diff --git a/examples/webpack/src/App.js b/examples/webpack/src/App.js index acc82fb85..9799d1a70 100644 --- a/examples/webpack/src/App.js +++ b/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 (

YoastSEO.js development tool

- - - + + + + + + - - + + + + + + + + + @@ -124,10 +131,6 @@ class App extends React.Component { /> - - - - Design Todos: @@ -169,5 +172,5 @@ export default connect( setConfigurationAttribute: ( ...args ) => dispatch( setConfigurationAttribute( ...args ) ), setWorkerStatus: ( status ) => dispatch( setStatus( status ) ), }; - } + }, )( App ); diff --git a/examples/webpack/src/Results.js b/examples/webpack/src/Results.js deleted file mode 100644 index 7a412c63e..000000000 --- a/examples/webpack/src/Results.js +++ /dev/null @@ -1,59 +0,0 @@ -// External dependencies. -import React, { Component } from "react"; -import PropTypes from "prop-types"; - -// Internal dependencies. -import scoreToRating from "../../../src/interpreters/scoreToRating"; - -class Results extends Component { - /** - * Renders the results. - * - * @returns {ReactElement} The results. - */ - render() { - let results = [ ...this.props.results ]; - - results.sort( ( a, b ) => { - if ( a.score < b.score ) { - return -1; - } - - if ( a.score > b.score ) { - return 1; - } - - // Value a must be equal to value b - return 0; - } ); - - return ( - - ); - } -} - -Results.propTypes = { - results: PropTypes.array.isRequired, -}; - -export default Results; diff --git a/examples/webpack/src/components/Button.js b/examples/webpack/src/components/Button.js index d5dd7839f..c159a2299 100644 --- a/examples/webpack/src/components/Button.js +++ b/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; diff --git a/examples/webpack/src/components/Checkbox.js b/examples/webpack/src/components/Checkbox.js index b94209206..b452237ff 100644 --- a/examples/webpack/src/components/Checkbox.js +++ b/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 { /** diff --git a/examples/webpack/src/components/Columns.js b/examples/webpack/src/components/Columns.js new file mode 100644 index 000000000..b1883f13b --- /dev/null +++ b/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; + } +`; + diff --git a/examples/webpack/src/components/Container.js b/examples/webpack/src/components/Container.js new file mode 100644 index 000000000..4ac866296 --- /dev/null +++ b/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" }; +`; diff --git a/examples/webpack/src/components/Controls.js b/examples/webpack/src/components/Controls.js index 7904985e7..eae7508a2 100644 --- a/examples/webpack/src/components/Controls.js +++ b/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
- +

Configuration

- { - setConfigurationAttribute( "useKeywordDistribution", value ); - } } - onToggleDisabled={ noop } - /> + + { + setConfigAttribute( "useKeywordDistribution", value ); + } } + onToggleDisabled={ noop } + /> +
; } @@ -50,5 +59,5 @@ export default connect( return { setConfigurationAttribute: ( name, value ) => dispatch( setConfigurationAttribute( name, value ) ), }; - } + }, )( Controls ); diff --git a/examples/webpack/src/components/Input.js b/examples/webpack/src/components/Input.js index d04ed6dc5..dc3afc925 100644 --- a/examples/webpack/src/components/Input.js +++ b/examples/webpack/src/components/Input.js @@ -1,9 +1,9 @@ -import React from "react"; +import { isFunction, noop } from "lodash-es"; import PropTypes from "prop-types"; -import { isFunction } from "lodash-es"; +import React from "react"; +import styled from "styled-components"; import { H3 } from "./headings"; -import styled from "styled-components"; const TextInput = styled.input` flex: 0 1 100%; @@ -50,7 +50,7 @@ class Input extends React.PureComponent { * @returns {void} */ handleChange( event ) { - const { type, onChange } = this.props; + const { id, type, onChange } = this.props; if ( isFunction( onChange ) ) { let name = "value"; @@ -60,7 +60,7 @@ class Input extends React.PureComponent { name = "checked"; } - onChange( event.target[ name ] ); + onChange( id, event.target[ name ] ); } } @@ -76,7 +76,7 @@ class Input extends React.PureComponent { setPaperAttribute( id, value ) } + onChange={ onChange } /> ); } -function Inputs( props ) { +function renderLeftColumn( props ) { return
- { renderPaperAttribute( props, "text", "Write a text", null, TextArea ) } - { renderPaperAttribute( props, "keyword", "Choose a focus keyword", "Focus keyword" ) } + { renderPaperAttribute( props, "keyword", "Choose a focus keyword", "Focus keyphrase" ) } + + { + props.setConfigurationAttribute( "isRelatedKeyphrase", value ); + } } + onToggleDisabled={ noop } + /> + { renderPaperAttribute( props, "synonyms", "Choose keyword synonyms" ) } - { renderPaperAttribute( props, "title", "Write the SEO title" ) } - { renderPaperAttribute( props, "description", "Write a meta description" ) } + { renderPaperAttribute( props, "title", "Write the SEO title", "SEO title", ( id, value ) => { + props.setPaperAttribute( id, value ); + props.setPaperAttribute( "titleWidth", measureTextWidth( value ) ); + } ) } +