Skip to content

Commit 2ae4bf5

Browse files
RinyVTRinyVT
committed
wip
1 parent f6a652d commit 2ae4bf5

73 files changed

Lines changed: 709171 additions & 3877 deletions

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎.gitignore‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,4 +14,4 @@ Documentation-GENERATED-temp
1414
composer.json.testing
1515
var
1616
*.map
17-
plugin.css
17+
Resources/Public/JavaScript/dist/*.css

‎Build/resources/javascript/helpers/getResult.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
const getResult = (analysis, resultType, resultSubtype) => {
22
if (resultSubtype !== undefined) {
3-
return analysis.result[resultType][resultSubtype];
3+
return analysis[resultType][resultSubtype];
44
} else {
5-
return analysis.result[resultType];
5+
return analysis[resultType];
66
}
77
}
88

‎Build/resources/javascript/webcomponents.tsx‎

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
import r2wc from "@r2wc/react-to-web-component"
2+
import Analysis from "./webcomponents/Analysis";
3+
import DescriptionProgressBar from "./webcomponents/DescriptionProgressBar";
4+
import SnippetPreview from "./webcomponents/SnippetPreview";
5+
import StatusIcon from "./webcomponents/StatusIcon";
6+
import {setLocaleData} from "@wordpress/i18n";
7+
8+
setLocaleData({'': {'yoast-components': {}}}, 'yoast-components');
9+
if (window.yoastTranslations) {
10+
for (let translation of yoastTranslations) {
11+
setLocaleData(translation.locale_data['wordpress-seo'], translation.domain);
12+
}
13+
} else {
14+
setLocaleData({'': {'wordpress-seo': {}}}, 'wordpress-seo');
15+
}
16+
17+
customElements.define('yoast-description-progress-bar', r2wc(DescriptionProgressBar, {
18+
props: {
19+
description: "string",
20+
date: "string",
21+
}
22+
}));
23+
24+
customElements.define('yoast-snippet-preview', r2wc(SnippetPreview, {
25+
props: {
26+
title: "string",
27+
url: "string",
28+
description: "string",
29+
faviconSrc: "string",
30+
locale: "string",
31+
wordsToHighlight: "json",
32+
siteName: "string",
33+
}
34+
}));
35+
36+
customElements.define('yoast-status-icon', r2wc(StatusIcon, {
37+
props: {
38+
analysisDone: "boolean",
39+
resultType: "string",
40+
details: "boolean",
41+
score: "number",
42+
}
43+
}))
44+
45+
46+
customElements.define('yoast-analysis', r2wc(Analysis, {
47+
props: {
48+
analysis: "json",
49+
}
50+
}))

‎Build/resources/javascript/webcomponents/Analysis.js‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
import React from 'react';
2+
import YoastContentAnalysis from '@yoast/analysis-report/ContentAnalysis';
3+
4+
const Analysis = ({analysis}) => {
5+
const {
6+
errorsResults,
7+
improvementsResults,
8+
goodResults,
9+
considerationsResults,
10+
problemsResults,
11+
} = analysis;
12+
const marksButtonStatus = 'disabled';
13+
14+
return <YoastContentAnalysis
15+
problemsResults={problemsResults}
16+
improvementsResults={improvementsResults}
17+
goodResults={goodResults}
18+
considerationsResults={considerationsResults}
19+
errorsResults={errorsResults}
20+
marksButtonStatus={marksButtonStatus}
21+
/>
22+
}
23+
24+
export default Analysis;

‎Build/resources/javascript/webcomponents/DescriptionProgressBar.js‎

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
import React, {useEffect, useState} from 'react';
2+
import { ProgressBar } from '@yoast/components';
3+
import getProgressColor from '../helpers/progressColor';
4+
import { assessments } from 'yoastseo';
5+
6+
/**
7+
* Gets the description progress.
8+
*
9+
* @param {string} description The description.
10+
* @param {string} date The meta description date
11+
*
12+
* @returns {Object} The description progress.
13+
*/
14+
const getDescriptionProgress = (description, date) => {
15+
let descriptionLength = description.length;
16+
/* If the meta description is preceded by a date, two spaces and a hyphen (" - ") are added as well. Therefore,
17+
three needs to be added to the total length. */
18+
if (date !== "" && descriptionLength > 0) {
19+
descriptionLength += date.length + 3;
20+
}
21+
const metaDescriptionLengthAssessment = new assessments.seo.MetaDescriptionLengthAssessment();
22+
const score = metaDescriptionLengthAssessment.calculateScore(descriptionLength);
23+
const maximumLength = metaDescriptionLengthAssessment.getMaximumLength();
24+
25+
return {
26+
max: maximumLength,
27+
actual: descriptionLength,
28+
score: score,
29+
};
30+
}
31+
32+
const DescriptionProgressBar = ({description = '', date = ''}) => {
33+
const [descriptionProgress, setDescriptionProgress] = useState({
34+
progress: null,
35+
description: ''
36+
});
37+
38+
useEffect(() => {
39+
setDescriptionProgress(prevState => {
40+
return {
41+
...prevState, ...{
42+
progress: getDescriptionProgress(description, date),
43+
description: description
44+
}
45+
}
46+
})
47+
}, [description]);
48+
49+
if (descriptionProgress.progress !== null) {
50+
return <ProgressBar min={0} max={descriptionProgress.progress.max} value={descriptionProgress.progress.actual} progressColor={getProgressColor(descriptionProgress.progress.score)} />
51+
}
52+
return <></>
53+
}
54+
55+
export default DescriptionProgressBar;

‎Build/resources/javascript/webcomponents/SnippetPreview.js‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
import React, {useState} from 'react';
2+
import {SnippetPreview as YoastSnippetPreview} from '@yoast/search-metadata-previews';
3+
import ModeSwitcher from './../Components/ModeSwitcher';
4+
import {DEFAULT_MODE} from '@yoast/search-metadata-previews/build/snippet-preview/constants';
5+
import LoadingIndicator from "../Components/LoadingIndicator";
6+
7+
const SnippetPreview = ({title, url, faviconSrc, wordsToHighlight, description, locale, siteName}) => {
8+
const [mode, setMode] = useState(DEFAULT_MODE);
9+
10+
if (!title && !url && !description) {
11+
return <LoadingIndicator />
12+
}
13+
14+
return <>
15+
<ModeSwitcher onChange={(newMode) => setMode(newMode)} active={mode}/>
16+
<YoastSnippetPreview siteName={siteName} title={title} url={url} description={description} faviconSrc={faviconSrc}
17+
wordsToHighlight={wordsToHighlight} locale={locale} mode={mode} onMouseUp={() => {}}
18+
/>
19+
</>
20+
}
21+
22+
export default SnippetPreview;

‎Build/resources/javascript/webcomponents/StatusIcon.js‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
import React from 'react';
2+
3+
import { SvgIcon } from '@yoast/components';
4+
5+
import {getIconForScore, getTextForScore, getTypeLabelForScore} from "../helpers/mapResults";
6+
import { interpreters } from "yoastseo";
7+
8+
const StatusIcon = ({analysisDone, resultType, score, details}) => {
9+
const { scoreToRating } = interpreters;
10+
11+
if (analysisDone) {
12+
let scoreRating = scoreToRating(score);
13+
let iconForScore = getIconForScore(scoreRating);
14+
15+
return <>
16+
<SvgIcon icon={iconForScore.icon} color={iconForScore.color} />{' '}
17+
{details && <><span className={`score-label-${resultType}`}>{getTypeLabelForScore(resultType)}</span> <span>{getTextForScore(scoreRating)}</span></>}
18+
</>
19+
} else {
20+
return <>
21+
<SvgIcon icon='circle' color='#bebebe' />{' '}
22+
{details && <span className={`score-label-${resultType}`}>{getTypeLabelForScore(resultType)}</span>}
23+
</>
24+
}
25+
}
26+
27+
export default StatusIcon;

‎Build/resources/package.json‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,9 @@
4343
"languageteam": "Yoast Translate <translations@yoast.com>",
4444
"lasttranslator": "Yoast Translate Team <translations@yoast.com>"
4545
},
46-
"dependencies": {},
46+
"dependencies": {
47+
"@r2wc/react-to-web-component": "^2.0.4"
48+
},
4749
"repository": {
4850
"type": "git",
4951
"url": "https://github.com/YoastSeoForTypo3/t3ext-yoast-seo.git"

‎Build/resources/sass/yoast.scss‎

Lines changed: 70 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88

99
#yoast-snippet-preview-container {
1010
background-color: var(--module-bg, $color-white) !important;
11-
div:nth-child(1) > div:first-child {
11+
div:nth-child(1) > div:first-child, div > div > div > span > div {
1212
color: var(--module-color, $color_headings) !important;
1313
}
1414
div:nth-child(2) > div {
@@ -122,7 +122,14 @@
122122
//background-color: $color-white;
123123
}
124124

125+
.yoast-snippet-header-label {
126+
float: right;
127+
padding: 10px;
128+
font-weight: bold;
129+
}
130+
125131
.yoast-seo-snippet-preview-styling {
132+
padding: 10px;
126133
min-height: 235px;
127134
fieldset {
128135
legend {
@@ -250,3 +257,65 @@ div.yoast-analysis {
250257
}
251258
}
252259
}
260+
261+
.yoast-modal {
262+
.modal-body li button:disabled, h4 button svg {
263+
display: none;
264+
}
265+
266+
h4 button {
267+
cursor: inherit !important;
268+
font-size: 12px !important;
269+
background-color: inherit !important;
270+
font-weight: bold !important;
271+
margin: 0 !important;
272+
padding: 0 !important;
273+
}
274+
275+
h4 button span {
276+
font-size: 12px;
277+
font-weight: bold;
278+
}
279+
280+
li a {
281+
text-decoration: underline;
282+
}
283+
284+
button {
285+
-webkit-box-pack: start;
286+
justify-content: flex-start;
287+
box-shadow: none;
288+
font-weight: normal;
289+
padding: 16px;
290+
border-width: initial;
291+
border-style: none;
292+
border-color: initial;
293+
border-image: initial;
294+
border-radius: 0;
295+
}
296+
297+
svg.yoast-svg-icon-circle {
298+
width: 13px;
299+
height: 13px;
300+
flex: 0 0 auto;
301+
margin: 3px 11px 0 0;
302+
}
303+
304+
ul {
305+
margin: 8px 0;
306+
padding: 0;
307+
list-style: none;
308+
}
309+
310+
li {
311+
min-height: 24px;
312+
display: flex;
313+
align-items: flex-start;
314+
padding: 0;
315+
}
316+
317+
li p {
318+
margin: 0 8px 0 0;
319+
flex: 1 1 auto;
320+
}
321+
}

‎Build/resources/webpack.config.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ module.exports = [
88
entry: {
99
plugin: './javascript/plugin.js',
1010
worker: './javascript/worker.js',
11+
webcomponents: './javascript/webcomponents.tsx',
1112
},
1213
output: {
1314
filename: outputFilename,

0 commit comments

Comments
 (0)