yoast / javascript Goto Github PK
View Code? Open in Web Editor NEWMonorepo for all the JavaScript within Yoast
Monorepo for all the JavaScript within Yoast
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.
The button should be hidden if an empty array of replacement variables is passed.
We need a new package for the search-metadata-previews: @yoast/search-metadata-previews
.
The contents of these composites should be included in this new package:
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.
We want to have structured packages for all our components. To achieve this, we need to move the a11y files to a new package.
These a11y files need to be moved to the new @Yoast/a11y package:
javascript/packages/yoast-components/a11y/
The version of the new package needs to be 0.1.0
The twitter preview wrapper component (TwitterPreview
) contains the whole twitter preview.
This component will receive:
Example:
<TwitterPreview
title='The title'
description='The description to show'
image='image.jpg'
siteName='domain.com' >
<TwitterTextContainer
...
/>
<TwitterImage
...
/>
</TwitterPreview>
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)
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
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.
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.
When resolving this issue we should have the following components:
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
We want to have structured packages for all our components. To achieve this, we need to move a course-overview file to another package.
This course-overview file needs to be moved to the new @yoast/components package:
javascript/packages/yoast-components/composites/CoursesOverview/Card.js
The version of the new package needs to be 0.1.0
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.
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.
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.
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
The TwitterDescription
is shown as a paragraph in the Twitter preview:
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
The MyYoastManage package has to be merged into the javascript monorepo.
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.
All mentioned existing repos above will be placed in their own packages in the monorepo.
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.
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
.
We want to have structured packages for all our components. To achieve this, we need to move the KeywordSuggestions files to another package.
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/
The version of the new package needs to be 0.1.0
This TwitterTextContainer component contains the title, description and sitename.
This component will receive:
The dimensions of this component depend on the cardType:
Summary:
Summary with large image:
Parent #48
Move the yoast-components/composites/Plugin/Shared/components
to the @yoast/components
package
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.
We need a new package for the algoliaSearch: @yoast/algolia-search
.
The contents of this composite should be included in this new package:
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.
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:
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.
All mentioned existing repos above will be placed in their own packages in the monorepo.
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.
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:
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;
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;
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;
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)
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;
<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'
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
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.
We need a new package for the configuration-wizard: @yoast/configuration-wizard
.
The contents of this composite should be included in this new package:
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.
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
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.
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.
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.
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
The version of the new packages needs to be 0.1.0
When resolving this issue we should have the following components:
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
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.
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
The version of the new package needs to be 0.1.0
The TwitterTitle
is the bold piece of the Twitter preview:
On Twitter it will be rendered as an H2
.
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
The Facebook preview wrapper component (FacebookPreview
) contains the whole Facebook preview.
This component will receive:
Example:
<FacebookPreview
title='The title'
description='The description to show'
image='https://example.org/image.jpg'
imageType='square'
siteName='domain.com'
authorName='Jane Doe' />
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.
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
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.
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.
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/
The version of this new package needs to be 0.1.0
The TwitterImage component will be rendered as an img
Example of the summary with large image card.
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:
General specs for the image
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.
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
The page would show the filtered keywords
It took you to the post view to show filtered keywords. Because keywords were used on pages it then showed blan.
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
Creates a components package: packages/components
that will be accessible from @yoast/components
.
What we have to do is:
packages/components
packages/yoast-components/forms/
to this directoryforms
directory is accessible/referenced in packages/yoast-components/index.js
packages/yoast-components/composites/basic/
to the root of packages/components
packages/yoast-components/index.js
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 โฌ
.
The keyword is not being emphasised in the Snippet Preview.
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.
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.
These component analysis-result files need to be moved to the new @yoast/analysis-report package:
javascript/packages/yoast-components/composites/Plugin/ContentAnalysis/components/
The version of this new package needs to be 0.1.0
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.
The plugin needs a command which does:
trunk
should checkout develop
in the monorepo.yarn link-all
inside the monorepo.yarn link [package]
for every package inside the Yoast SEO package.json
that is scoped using @yoast
.The command should also run on Travis.
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:
The FacebookDescription
is shown as a div in the Facebook preview:
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
We need a new package for the social-metadata-previews: @yoast/social-metadata-previews
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.
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.
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.
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.
De npm/yoast-components package needs to be spit up into 4 packages.
These are the 4 new packages that need to be created:
This issue needs to be split up in smaller issues.
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).
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
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.
Separate all the things! Offering a separate a11y components package ensure that it will be easier to reuse these components in our existing projects.
We want to use __
over intl
. Therefore we are removing the intl
from the ConfigurationWizard and making sure that __
is used instead of it.
The my-yoast client package has to be merged into the JavaScript monorepo.
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.
All mentioned existing repos above will be placed in their own packages in the monorepo.
The yoast/eslint repo has to be merged into the javascript monorepo.
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.
All mentioned existing repos above will be placed in their own packages in the monorepo.
The FacebookTitle
is the bold piece of the Facebook preview:
The element has been rendered as a div
element on Facebook.
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)
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
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.
packages/yoast-components/composites/OnboardingWizard/OnboardingWizard.js
packages/yoast-components/composites/OnboardingWizard/LoadingIndicator.js
packages/yoast-components/composites/OnboardingWizard/StepIndicator.js
packages/yoast-components/composites/OnboardingWizard/tests/WizardTest.js
packages/yoast-components/composites/OnboardingWizard/config/yoast-theme.js
packages/yoast-components/composites/OnboardingWizard/StepButton.js
packages/yoastseo/examples/webpack/package.json
packages/yoast-components/package.json
Other components should be created to replace the components from material-ui.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.