yoast / javascript

Monorepo for all the JavaScript within Yoast

JavaScript

❗This repository has been archived. Please create your issues and PRs on https://github.com/Yoast/wordpress-seo. ❗

Packages

Monorepo for all the JavaScript within Yoast.

javascript/packages

This monorepo includes reusable packages:

• @yoast/analysis-report
  • React components that can be used to visualise the outcome of the Yoast content analysis provided by the yoastseo package.
• @yoast/components
  • All-purpose React components.
• @yoast/configuration-wizard
  • A wizard that guides users trough their initial Yoast SEO plugin setup.
• @yoast/feature-toggle
  • A utility that keeps track of enabled and disabled features.
• @yoast/helpers
  • A set of helper functions that can be used across multiple projects.
• @yoast/replacement-variable-editor
  • The replacement variable editor currently used in the Search Metadata previews. In the future, this component will also be used in the Social Metadata previews.
• @yoast/schema-blocks
  • classes and React components used in generating schema blocks from wordpress posts.
• @yoast/search-metadata-previews
  • React components that can be used to generate a preview of what a page will look like in Google's search results.
• @yoast/social-metadata-forms
  • React components that can be used to render forms for controlling the social preview settings. This includes the redux store.
• @yoast/social-metadata-previews [Will replace yoast-social-previews]
  • React components that can be used to generate a preview of what a page will look like when shared trough Facebook or Twitter.
• @yoast/style-guide
  • A combination of style constants and functions that can be used to conform to the Yoast corporate identity.
• eslint-config-yoast
  • ESLint configuration for Yoast projects.
• yoast-components [deprecated. replaced by @yoast/components]
  • All-purpose React components.
• yoast-social-previews [Will be replaced by @yoast/social-metadata-previews]
  • Classes that can be used to generate a preview of what a page will look like when shared trough Facebook or Twitter.
• yoastseo [Replaces YoastSEO.js]
  • Text analysis and assessment library in JavaScript. This library can generate interesting metrics about a text and assess these metrics to give you an assessment which can be used to improve the text.

All new package should be scoped with @yoast/ , so they can be published as part of the Yoast organisation. When creating a new package with translations, please mind that they need to be added to the pipeline (for context see this issue).

javascript/apps

This monorepo includes apps for testing purposes. These apps are not published. Apps include:

• Components
  • A test application for most @yoast packages.
• Content-analysis
  • A test application for the content analysis.

General file structure of a package

• /src. Source files
• /tests. Unit tests.
• /tools. Tooling necessary to build or test.
• /package.json

Useful commands

The following commands can be executed from the javascript project root:

• yarn install, will install all dependencies for all packages.
• yarn lint, will run linting for all packages.
• yarn test, will run tests for all packages.
• yarn link-all, will run yarn link for all packages.
• yarn unlink-all, will run yarn unlink for all packages.

What lives where?

https://github.com/Yoast/YoastSEO.js moved to packages/yoastseo. https://github.com/Yoast/yoast-components moved to packages/yoast-components.

Moving pull requests & branches

These need to be moved manually. For your convenience the yarn transfer-branch command exists. It has 3 arguments:

• Package: Which package to transfer to/from, has the following options:

  • yoastseo
  • yoast-components

• Base branch: Which branch the branch you want to move is based on. It is the base branch in a pull request.

• Branch to move: The branch you want to move.

These arguments are positional. Think yarn transfer-branch [package] [base-branch] [branch-to-move].

After moving the branch connected to a pull request you need to manually recreate the pull request here. That should be a matter of copy & pasting and linking to the original PR for archive purposes.

javascript's Issues

Combine all separate TwitterPreview components to have a working preview

When resolving this issue we should have the following components:

• TwitterTextContainer #51
• TwitterImage #50

These components should be combined in the TwitterPreview component something like:

    return ( <div>
          <TwitterImage src={ props.image } />
          <TwitterTextContainer
            ...
           />
       </div>
    );

Reference:
https://developer.twitter.com/en/docs/tweets/optimize-with-cards/overview/markup.html
https://developer.twitter.com/en/docs/tweets/optimize-with-cards/overview/summary-card-with-large-image

Parent of #51
Parent of #50
Parent of #209

Generating trees for HTML with paragraphs nested in headings fails.

Summary

The tree parser fails when entering trying to parse paragraphs within other headings:

<h1>This is a <p>paragraph</p></h1>

Although this is not entirely valid HTML, we do not want it to fail completely.

Change class name for the Explanation component

The Explanation component is moved from the OnBoardingWizard directory to the @yoast/components. This is because a not onboarding wizard components is using it. The only thing is that the component has a class name yoast-wizard-input__explanation and that should be changed.

I think we should pass the class name as a property to the component.

Phase out material UI as a dependency

Summary

We are currently using material-UI as a dependency in our projects. We want to stop using material UI as a dependency in the long run.

Explanation

• Remove material-ui dependency from packages/yoast-components/composites/OnboardingWizard/OnboardingWizard.js
• Remove material-ui dependency from packages/yoast-components/composites/OnboardingWizard/LoadingIndicator.js
• Remove material-ui dependency from packages/yoast-components/composites/OnboardingWizard/StepIndicator.js
• Remove material-ui dependencies from packages/yoast-components/composites/OnboardingWizard/tests/WizardTest.js
• Remove material-ui dependencies from packages/yoast-components/composites/OnboardingWizard/config/yoast-theme.js
• Remove material-ui dependencies from packages/yoast-components/composites/OnboardingWizard/StepButton.js
• Remove material-ui from the packages/yoastseo/examples/webpack/package.json
• Remove material-ui from the packages/yoast-components/package.json
• Remove material-ui from all the comments and README.md files

Technical decisions

Other components should be created to replace the components from material-ui.

Move a11y files to @yoast/a11y

Summary

We want to have structured packages for all our components. To achieve this, we need to move the a11y files to a new package.

Explanation

These a11y files need to be moved to the new @Yoast/a11y package:
javascript/packages/yoast-components/a11y/

Technical decisions

The version of the new package needs to be 0.1.0

Feedback?

Merge yoast/eslint into the JS monorepo

Summary

The yoast/eslint repo has to be merged into the javascript monorepo.

Explanation

yoast-social-previews, yoastSEO.js, yoast-components, my-yoast client, my-yoast manage and eslint are all merged into the same monorepo to keep all javascript together.

Technical decisions

All mentioned existing repos above will be placed in their own packages in the monorepo.

Feedback?

Create a TwitterTitle component

The TwitterTitle is the bold piece of the Twitter preview:

On Twitter it will be rendered as an H2.

Properties

• title (max-length of 70 characters)

Styling

The component should have the following CSS props:

    font-weight: bold;
    font-size: 14px;
    max-height: 18.2px;
    line-height: 18.2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 2.1px

Parent #51

Abstract social-metadata-previews into package

Summary

We need a new package for the social-metadata-previews: @yoast/social-metadata-previews

Explanation

There's no code for this yet, so all we need to do is create a new (empty) package in the javascript/packages directory. This can be done with the yarn init wizard.

Port `SubHeadingsKeywordAssessment` to work with the tree.

The assessment should extend the class that has been created in #413. It should return the same result as the current SubHeadingsKeywordAssessment, but with a slightly different API. See the base class to see what the changes are to the API

My intention with the new tree research is that this assessment should have an easy time finding all headings with keywords. It should be a matter of: (pseudocode)

let headings = researcher.getResearch( "headings", completeTree );

headings.forEach( ( heading ) => {
    const keyphrases = researcher.getResearch( "keyphrases", heading );

    const hasKeyphrase = keyphrases.length > 0;

    // Determine assessment results...
} );

Requires Yoast/YoastSEO.js#2194
Requires Yoast/YoastSEO.js#2193

Move plugin help-center files to @yoast/help-center package

Summary

We want to have structured packages for all our components. To achieve this, we need to move the plugin help-center files to a new package.

Explanation

These plugin help-center files need to be moved to the new @yoast/help-center package:
wordpress-seo/js/src/wp-seo-help-center.js

Technical decisions

The version of the new package needs to be 0.1.0

Feedback?

Move CornerstoneContent to the plugin

Summary

CornerstoneConent is currently located in yoast-components/composites/Plugin/CornerstoneContent. However, since this is simply a toggle with some text above it and because it is used in only a few locations (maybe even 1) we want to remove it from yoast-components. Instead, the CornerstoneContent should directly be used at the places where it is currently used.

Create a FacebookAuthorName component

The FacebookAuthorName should be placed within the FacebookSiteName component (Yoast/yoast-components#807)

When the name is present it should start with a separator (|). The name itself should be styled as a link (but it is not a link).

Styling

The styling for the separator (span) is

    padding-left: 5px;
    padding-right: 5px;
}

The styling for the name (link) will be:

    color: #3b5998;
    position: relative;
    text-decoration: none;
    cursor: pointer;
    z-index: 5;

Needs Yoast/yoast-components#807

Parent #46

Move KeywordSuggestions files to @yoast/components package

Summary

We want to have structured packages for all our components. To achieve this, we need to move the KeywordSuggestions files to another package.

Explanation

These KeywordSuggestions files need to be renamed to WordList (or OrderedWordList) and moved to the new @yoast/components package:
javascript/packages/yoast-components/composites/KeywordSuggestions/

Technical decisions

The version of the new package needs to be 0.1.0

Feedback?

Not all characters are properly matched if used as a keyword

What did you expect to happen?

When adding special characters as my keyword, such as <,> etc., I expect them to be matched in the Snippet Editor.

Oddly enough this does work with €.

What happened instead?

The keyword is not being emphasised in the Snippet Preview.

How can we reproduce this behavior?

Make a new post and add a title and some content containing a > or < character.
Set your keyword to something such as >.
Check the Snippet Preview's output.

Technical info

• WordPress version: 4.5.2
• Yoast SEO version: Latest trunk (or 3.3 beta 3 release)

Create a FacebookTitle component

The FacebookTitle is the bold piece of the Facebook preview:

The element has been rendered as a div element on Facebook.

Sidenotes about the length

There is something vague about the title. Facebook has no description about the max length. When the title is long it will be shown on multiple lines (mostly 2 lines). When this is the case the description will be (probably) shortened.

When the title is short (1 line) in most cases the description will be longer. There is no documentation about this behaviour (it's my own observation)

Examples of the preview:

Properties

• title

Styling

The component should have the following CSS props:

    color: #1d2129;
    font-weight: 600;
    overflow: hidden;
    font-size: 16px;
    line-height: 20px;
    margin: 5px 0 0;
    max-height: 110px;
    word-wrap: break-word;
    letter-spacing: normal;
    text-overflow: ellipsis;
    white-space: normal;
    cursor: pointer; // It is a link on Facebook

Parent #46

Refactor configuration wizard to use __ instead of intl provider

Summary

We want to use __ over intl. Therefore we are removing the intl from the ConfigurationWizard and making sure that __ is used instead of it.

Move yoast-components example app to `apps` directory

Summary

Alongside the packages folder we are going to need an apps folder that contains JavaScript that we are not planning on releasing to npm, but that still needs to do a job.

Explanation

The first app that is going to move to the apps folder is the yoast-components example app, situated in yoast-components/app. Currently the app is started using yarn start in the yoast-components folder. I would say that the new app lives in apps/components and can be started using yarn start there.

All the configuration required to start this app (stubby, webpack, etc) needs to move to this app folder. We need to configure lerna so it will make sure the dependencies of these apps are still put in node_modules.

Technical decisions

Feedback?

Move the plugin/share/components to the @yoast/components package

Summary

Move the yoast-components/composites/Plugin/Shared/components to the @yoast/components package

Explanation

We have to move the components in yoast-components/composites/Plugin/Shared/components to the components package. For the most of the components this would't be a problem. However there will be components that already exists with the same name. These should be discussed with an architect.

Technical decisions

Feedback?

Create the components package

Summary

Creates a components package: packages/components that will be accessible from @yoast/components.

Explanation

What we have to do is:

• Create a new directory: packages/components
• Moving the contents of packages/yoast-components/forms/ to this directory
• Make all components from the old forms directory is accessible/referenced in packages/yoast-components/index.js
• Moves the contents of packages/yoast-components/composites/basic/ to the root of packages/components
• Change all references from '/basic' to the new locations in packages/yoast-components/index.js
• Makes sure all loaded components are loaded from the new locations.

Technical decisions

Feedback?

Integrate `packages/yoastseo/examples/webpack` into yarn workspaces

Summary

Fix the problem that we need to run another yarn install in packages/yoastseo/examples/webpack. Because Yarn doesn't know about this directory we need to do another yarn install, even after we have done a yarn install in the root.

Because of this, running the analysis dev tool a developer needs to do an extra step.

Explanation

The reason this happens is because yarn doesn't know about this package. One solution might be to add this directory to the list in workspaces. But I don't think this makes a lot of sense package wise. Maybe a better solution is to make the devtool a separate package.

Technical decisions

Feedback?

Create a FacebookPreview component

The Facebook preview wrapper component (FacebookPreview) contains the whole Facebook preview.

Properties

This component will receive:

• title
• description
• image
• imageType (landscape, portrait or square)
• siteName
• authorName (when applicable)

Example:

<FacebookPreview 
    title='The title' 
    description='The description to show' 
    image='https://example.org/image.jpg' 
    imageType='square'
    siteName='domain.com'
    authorName='Jane Doe' />

Styling

It should have the following CSS props:

    background-color: #f2f3f5;
    max-width: none;
    border: none;
    box-shadow: none;
    border: 1px solid #dddfe2;
    border-radius: 0;
    zoom: 1;
    float: left;
    overflow: hidden;
    position: relative;
    z-index: 0;
}

Parent #47

Don't forget to write tests.

Create a TwitterPreview component

The twitter preview wrapper component (TwitterPreview) contains the whole twitter preview.

Properties

This component will receive:

• title
• description
• image
• siteName
• cardType (summary, summary with large image)

Example:

<TwitterPreview 
    title='The title' 
    description='The description to show' 
    image='image.jpg' 
    siteName='domain.com' >
   <TwitterTextContainer
     ...
   />
   <TwitterImage
     ...
   />
</TwitterPreview>

Styling

It should have the following CSS props:

    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
    width: 506px;
    min-height: 130px;
    border-radius: 12px;
    border: 1px solid #E1E8ED;
    box-sizing: border-box;
    color: #292F33;
    background: #FFFFFF;

When the element is hovered or active it should have a background of #f5f8fa and the border will get the color rgba(136,153,166,.5)

CardType

When card type is summary, a square image should be loaded and will be placed on the left side. The width of every component (except the image) will be around the 357.562px.
If the large image card has been used the width will be 476px. The only exception is if the ratio of the image being 1:1, then the summary mode will be active.

Parent of #51
Parent of #50
Parent of #157

To do

• Check the existing component and its props
• Implement the component with the correct styling
• Make sure the styling depends on the card type
• Write tests

Move analysis-results files to @yoast/analysis-report package

Summary

We want to have structured packages for all our components. To achieve this, we need to move the analysis-result files to a new package.

Explanation

These component analysis-result files need to be moved to the new @yoast/analysis-report package:
javascript/packages/yoast-components/composites/Plugin/ContentAnalysis/components/

Technical decisions

The version of this new package needs to be 0.1.0

Feedback?

Generating tree structures for HTML with a comment inside a heading or paragraph fails.

Generating the tree structure fails for HTML that has a comment within a header or paragraph:

<h1>Hello World!<!-- How are you? --></h1>

The comment gets added to the header as a formatting element, as it should be, but something goes wrong when converting the comment from an Ignored node to a FormattingElement.

It currently errors on the calculation of the start- and end position of the formatting elements.
Specifically on this line, where it fails to get the start tag.

javascript/packages/yoastseo/src/tree/builder/cleanup/calculateTextIndices.js

Line 116 in 47b317e

const startTag = element.location.startTag;

More importantly, parse5 recognizes How are you? in the example below as a comment:

<h1>Hello World!</ How are you?

Which leads to an error when typing in a closing tag in a pre-existing text.

Combine all separate FacebookPreview components to have a working preview

When resolving this issue we should have the following components:

• FacebookImage Yoast/yoast-components#812
• FacebookTextContainer #46
  • FacebookTitle #40
  • FacebookDescription #41
  • FacebookSiteName Yoast/yoast-components#807
    • Related a11y issue: #89
  • FacebookAuthorName #42

These components should be combined in the FacebookPreview (#45) component something like:

    return ( <div>
          <FacebookImage src={ props.image } />
          <FacebookTextContainer 
             title={ props.title } 
             description={ props.description } 
             siteName={ props.siteName }
             authorName={ props.authorName }  />
       </div>
    );

Parent of #46
Parent of Yoast/yoast-components#812
Parent of #45
Parent of #89

Create a FacebookTextContainer component

The FacebookTextContainer should contain the following components:

• FacebookSiteName (Yoast/yoast-components#807) (and FacebookAuthorName (#42))
• FacebookTitle (#40)
• FacebookDescription (#41)

Depending on the image type the container should have the following dimensions:

• Landscape:
  • width: 500px. Height depends on the title and description, this needs a decision. It is probably 46px.
• Square mode:
  • width: 318px and height: 136px
• Portait:
  • width: 318px and height: 215px

Styling

The component should have the following CSS props:

   background-color: #F2F3F5;
    border-bottom: 1px solid #dddfe2;
    margin: 0;
    padding: 10px 12px;
    position: relative;

The portrait/square modus will have the following rules:

    border-top: 1px solid #dddfe2;

Inner container

The component should have a 'inner container'.

When the Preview is in portrait or square mode the css the inner container has to following props:

    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 136px;
    font-size: 12px;
   margin: 0;

When its landscape the inner container has the following CSS props:

    max-height: 190px;

FacebookSiteName and the FacebookAuthorName

The FacebookSiteName and the FacebookAuthorName components must be wrapped in a div with the following CSS rules:

   color: #606770;
    flex-shrink: 0;
    font-size: 12px;
    line-height: 16px;
    overflow: hidden;
    padding: 0;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;

When the view is landscape it should have the following CSS specs:

    position: relative;

For the square/portrait it should have:

   position: static;

FacebookTitle and FacebookDescription

Sidenotes about the length of the title and description

There is something vague about the title. Facebook has no description about the max length. When the title is long it will be shown on multiple lines (mostly 2 lines). When this is the case the description will be (probably) shortened.

When the title is short (1 line) in most cases the description will be longer. There is no documentation about this behaviour (it's my own observation)

Wrapping in a div

The FacebookTitle and FacebookDescription components should be wrapped in a div. This div should have the following CSS specs when in portrait mode:

    max-height: 46px;
    overflow: hidden;

How its been build in Facebook:

<container>
     <subcontainer>
         <div>Sitenaam | author</div>
         <textcontainer>
             <title></title>
             <description></description>
         </textcontainer>
     </subcontainer>
<container>

The description is always rendered, but might become invisible because of an overflow:hidden

For the FacebookTitle and FacebookDescription we have to create a container that is placed in a 'textcontainer'

Examples:

Portrait modus. Container with text has a width of 318px. Blurred most of it because I used a random search result of a portrait image

Square mode. Container with text has a width of 318px and a height of 136px

With no image the description seems to be longer

Parent #47

Parent of Yoast/yoast-components#807
Parent of #42
Parent of #41
Parent of #40

To do

• Create the TextContainer
• Create the subcontainer, containing the TextContainer and the combined site name and author.
• If possible, combine the subcontainer with the outer container into one container.
• If you know better names, be my guest :)
• Write tests

Merge MyYoastManage into the JS monorepo

Summary

The MyYoastManage package has to be merged into the javascript monorepo.

Explanation

yoast-social-previews, yoastSEO.js, yoast-components, my-yoast client, my-yoast manage and eslint are all merged into the same monorepo to keep all javascript together.

Technical decisions

All mentioned existing repos above will be placed in their own packages in the monorepo.

Feedback?

Create a FacebookDescription component

The FacebookDescription is shown as a div in the Facebook preview:

Properties

• description

Styling

The component should have the following CSS props:

    color: #606770;
    font-size: 14px;
    line-height: 20px;
    word-break: break-word;
    max-height: 80px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
    margin-top: 3px;

Parent #46

Abstract AlgoliaSearch into package

Summary

We need a new package for the algoliaSearch: @yoast/algolia-search.

Explanation

The contents of this composite should be included in this new package:

• yoast-components/composites/AlgoliaSearch

yoast-components should still export this composite if they did before, so we don't break backwards compatibility.
All usages of the composites inside the javascript repository should be updated. They should use the new @yoast/algolia-search package.

Create a TwitterTextContainer component

This TwitterTextContainer component contains the title, description and sitename.

Properties

This component will receive:

• title
• description
• siteName
• cardType (summary, summary with large image)

The dimensions of this component depend on the cardType:
Summary:

• width: 378px
• heigth: 120px

Summary with large image:

• width: 504px
• heigth: 102px, or 84px if the description is only one line. See #257

Parent #48

To do

• Create the component
• Make sure the height of the summary with large image is conditional based on the number of lines in the description. The context of #157 might be useful for this.
• Write tests

In `ReplacementVariableEditor`, hide the button if an empty array of replacement variables is passed

Summary

In ReplacementVariableEditor the button to add a replacement variable is always shown. In Yoast SEO for Neos there are no replacement variables (yet), so we want to be able to hide this button.

Technical decisions

The button should be hidden if an empty array of replacement variables is passed.

Move wp-dashboard-widget files

Summary

We want to have structured packages for all our components. To achieve this, we need to move the wp-dashboard-widget files to other packages.

Explanation

• This AssesmentResult file needs to be renamed to SiteSEOReport and moved to the new @yoast/analysis-report package:
  javascript/packages/yoast-components/composites/Plugin/DashboardWidget/components/SeoAssessment.js

• This WordPressFeed file needs to be renamed to ArticleList and moved to the new @yoast/components package:
  javascript/packages/yoast-components/composites/Plugin/DashboardWidget/components/WordpressFeed.js

• This StackedProgressBar file needs to be moved to the new @yoast/components package:
  javascript/packages/yoast-components/composites/Plugin/Shared/components/StackedProgressBar.js

Technical decisions

The version of the new packages needs to be 0.1.0

Feedback?

Link to where focus keyword has been used twice before on Pages results in showing Posts view

What did you expect to happen?

The page would show the filtered keywords

What happened instead?

It took you to the post view to show filtered keywords. Because keywords were used on pages it then showed blan.

How can we reproduce this behavior?

1.Add three pages with a focus keyword

2.Go to a page and see the warning "You've used this focus keyword 2 times before, it's probably a good idea to read this post on cornerstone content and improve your keyword strategy." appears

3.Click on "times before" link and see that it goes to a Posts filter keyword page which then fails to display the focus keywords

Technical info

• WordPress version: 4.8.1
• Yoast SEO version: 5.2

Focus keyphrase not recognized if the keyphrase contains a period

• I've read and understood the contribution guidelines.
• I've searched for any related issues and avoided creating a duplicate issue.

I insert the keyword of the page in the metadescription but Yoast dont show correctly.

Yoast must show it correctly

How can we reproduce this behavior?

1. Possible debug it

Technical info

• If relevant, which editor is affected (or editors):

• Classic Editor
• Gutenberg
• Classic Editor plugin
• AVADA

• Which browser is affected (or browsers):

• Chrome
• Firefox
• Safari
• Other

Used versions

• WordPress version: 5.1.1
• Yoast SEO version: 10.0
• Avada plugin version: 5.8.2

Bug Attachment:

Add a message to yarn test if the premium-configuration is not installed

Summary

The test suites fail if yoastseo does not have the premium-configuration. This can be fixed manually by running grunt get-premium-configuration in the packages/yoastseo directory. However, we want to give feedback to the user that this needs to happen.

Explanation

Ensure that yarn lint gives an error if the premium-configuration is not installed. This allows the user to fix the test. The solution that fixes the problem is running grunt get-premium-configuration in the packages/yoastseo directory.

Remove left-over Language Notice code

As we've disabled the language notice for the Readability Results in Yoast/wordpress-seo#11034, we need to clean up any code that was required to make it work in the first place.

Todo:

• Remove any props relating to the language notice (in the Analysis files)

Build development workflow for plugin and monorepo.

Summary

In the monorepo setup we can longer set yoastseo/yoast-components to a GitHub URL in the package.json. This is problematic for trunk development. Locally, developers can use yarn link to develop, but that doesn't work for Travis or for building a zip.

Explanation

The plugin needs a command which does:

• Clone the monorepo, or fetch the latest version if that is currently not the case.
  • It should fetch the same branch as is currently checked out, with one exception: trunk should checkout develop in the monorepo.
• Run yarn link-all inside the monorepo.
• Run yarn link [package] for every package inside the Yoast SEO package.json that is scoped using @yoast.

Technical decisions

The command should also run on Travis.

Create a TwitterDescription component

The TwitterDescription is shown as a paragraph in the Twitter preview:

Properties

• description (maximum length of 200 characters).

Styling

The component should have the following CSS props:

    font-size: 14px;
    max-height: 36.4px;
    line-height: 18.2px;
    overflow: hidden;
    margin-bottom: 4.52662px;
    width: 476px;

When the card type Summary with large image the paragraph will have a max-height of 36.4px.

When a squared image (summary card or image has ratio of 1:1) has been used the width will be 357.5px and the max-height will be 54.6px

Parent #51

Setup auto-publishing with lerna from Travis

If we use lerna publish from people's local machine then they all need publishing rights on all the packages. It's better to do it with Travis. We can use lerna publish from-git for this purpose. When people want to release they do a lerna version and then Travis does the rest after pushing to git.

Abstract search-metadata-previews into package

Summary

We need a new package for the search-metadata-previews: @yoast/search-metadata-previews.

Explanation

The contents of these composites should be included in this new package:

• yoast-components/composites/SnippetEditor
• yoast-components/composites/SnippetPreview

yoast-components should still export these composites if they did before, so we don't break backwards compatibility.
All usages of the composites inside the javascript repository should be updated. They should use the new @yoast/search-metadata-previews package.

Create a TwitterSiteName component

The TwitterSiteName will be shown as a span:

The sitename only contain the 'domain' part. The scheme and the path should be stripped out. Also strip the www. part if that is left. But keeping the subdomains. For example: 2019.us.wordcamp.org is a valid sitename.

Styling

The styling for this will be:

    text-transform: lowercase;
    color: #8899A6;
    max-height: 18.2px;
    line-height: 18.2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 4.52662px;

Parent #51

Move help-center files to @yoast/help-center package

Summary

We want to have structured packages for all our components. To achieve this, we need to move the help-center files to a new package.

Explanation

These component help-center files need to be moved to the new @yoast/help-center package:
javascript/packages/yoast-components/composites/Plugin/HelpCenter/
javascript/packages/yoast-components/composites/HelpCenter/views/

Technical decisions

The version of this new package needs to be 0.1.0

Feedback?

Merge yoast-social-previews into the JS monorepo

Summary

The yoast-social-previews repo has to be merged into the javascript monorepo.

yoast-social-previews has already been merged in the monorepo. The following still needs to be done before this issue is finished:

• Have a look at the issues, @atimmer is going to pick that up because it is unclear what needs to happen with them (do we move them, close them because they are outdated or something else).
• Archive the repository so it is impossible to create new issues or PRs on the repo.

Explanation

yoast-social-previews, yoastSEO.js, yoast-components, my-yoast client, my-yoast manage and eslint are all merged into the same monorepo to keep all javascript together.

Technical decisions

All mentioned existing repos above will be placed in their own packages in the monorepo.

Merge MyYoastClient into the JS monorepo

Summary

The my-yoast client package has to be merged into the JavaScript monorepo.

Explanation

yoast-social-previews, yoastSEO.js, yoast-components, my-yoast client, my-yoast manage and eslint are all merged into the same monorepo to keep all javascript together.

Technical decisions

All mentioned existing repos above will be placed in their own packages in the monorepo.

Feedback?

New internal linking mechanism should use stems

PRs:

wordpress-seo-premium: https://github.com/Yoast/wordpress-seo-premium/pull/2313
javascript: #186
YoastSEO.js-premium-configuration: https://github.com/Yoast/YoastSEO.js-premium-configuration/pull/31

When merging this into a release branch and creating an RC, also requires the file name change of the English morphology data (-v2), see PRs linked in this issue: https://github.com/Yoast/YoastSEO.js-premium-configuration/issues/42

Summary

We need to merge the feature/internal-linking branches on javascript, wordpress-seo-premium and yoastseo.js-premium-configuration to their respective develop/trunk to allow all changes that concern new version of internal linking to take place.

Explanation

Please see overview issue https://github.com/Yoast/wordpress-seo-premium/issues/2235 and four other relevant issues: Yoast/YoastSEO.js#2114, Yoast/YoastSEO.js#2149, Yoast/YoastSEO.js#2139, and https://github.com/Yoast/wordpress-seo-premium/issues/2292.

Technical decisions

Feedback?

Refactor npm/yoast-components into @yoast/components

Summary

De npm/yoast-components package needs to be spit up into 4 packages.

Explanation

These are the 4 new packages that need to be created:

• @yoast/compontents
• @yoast/search-metadata-previews
• @yoast/social-metadata-previews
• @yoast/configuration-wizard

Technical decisions

This issue needs to be split up in smaller issues.

Feedback?

@atimmer

Move a11y components to a new @Yoast/a11y package

Summary

We want to create a new @Yoast NPM package with all our a11y components in it. These components should be put in @Yoast/a11y/components. In the future our a11y helpers and other functions can also be moved to this package so that we offer one package that covers all (or most of) our a11y needs.

Explanation

Separate all the things! Offering a separate a11y components package ensure that it will be easier to reuse these components in our existing projects.

Abstract configuration-wizard into package

Summary

We need a new package for the configuration-wizard: @yoast/configuration-wizard.

Explanation

The contents of this composite should be included in this new package:

• yoast-components/composites/OnboardingWizard

yoast-components should still export this composite if they did before, so we don't break backwards compatibility.
All usages of the composites inside the javascript repository should be updated. They should use the new @yoast/configuration-wizard package.

Move course-overview file to @yoast/components

Summary

We want to have structured packages for all our components. To achieve this, we need to move a course-overview file to another package.

Explanation

This course-overview file needs to be moved to the new @yoast/components package:
javascript/packages/yoast-components/composites/CoursesOverview/Card.js

Technical decisions

The version of the new package needs to be 0.1.0

Feedback?

Create a TwitterImage component

The TwitterImage component will be rendered as an img

Example of the summary with large image card.

Example of the summary card.

Properties

• src (full path to the image)
• type ( summary, summary-large-image)

The type is relevant for the way we display the image. See the specifications below.

When no SRC has been given, we should show a placeholder:

Specifications

General specs for the image

• Images must be less than 5MB in size.
• JPG, PNG, WEBP and GIF formats are supported.
• Only the first frame of an animated GIF will be used.
• SVG is not supported.

About the summary with large image, Twitter says:

Images for this Card support an aspect ratio of 2:1 with minimum dimensions of 300x157 or maximum of 4096x4096 pixels.

And for the summary Twitter gives:

Images for this Card support an aspect ratio of 1:1 with minimum dimensions of 144x144 or maximum of 4096x4096 pixels. [...] The image will be cropped to a square on all platforms.

Styling

    background-color: #E1E8ED;

The square will have a width and height of 123.422px. The large image will have a width of 506px and a height of 253px.

Parent #48