How to generate reports?

[avalanche1]

I've installed yoastseo from npm. How can I generate a report similar to this one - https://github.com/Yoast/YoastSEO.js/blob/develop/images/assessment.png?

[aomini]

+1

[cod3rshotout]

I've installed yoastseo from npm. How can I generate a report similar to this one - https://github.com/Yoast/YoastSEO.js/blob/develop/images/assessment.png?

I spend a lot of times to understand how to implement this library correctly and generate the report. I never found a documentation so poor, anyway, that's how I have implemented it:

1. Add this to package.json

   "devDependencies": { "cross-env": "^5.1", "lodash": "^4.17.5", "resolve-url-loader": "^2.3.1", "snarkdown": "^1.2.2", "babel-plugin-transform-regenerator": "^6.26.0", "babel-polyfill": "^6.26.0" }, "dependencies": { "yoastseo": "^1.57.0" }

2. Add file Presenter.js and add this code:

   import { helpers } from 'yoastseo' import isObject from 'lodash/isObject' import forEach from 'lodash/forEach' import filter from 'lodash/filter'

   export default class Presenter {

    getScoresAsHTML(h, data) {
        return h('div', { className: 'yoast' },
            h('h3', { className: 'yoast__heading' }, 'SEO'),
            h('ul', { className: 'yoast__items' },
                this.getScoreItemsAsHTML(h, data.seo)
            ),
            h('h3', { className: 'yoast__heading' }, 'Content'),
            h('ul', { className: 'yoast__items yoast__items--bottom' },
                this.getScoreItemsAsHTML(h, data.content)
            )
        )
    }
   
    getScoreItemsAsHTML(h, items) {
        return items.map(item => this.getScoreItemAsHTML(h, item))
    }
   
    getScoreItemAsHTML(h, item) {
        return h('li', { className: `yoast__item yoast__item--${item.rating}` }, item.text.replace(/<(?:.|\n)*?>/gm, ''))
    }
   
    getScores(assessor) {
        const scores = []
   
        forEach (this.getScoresWithRatings(assessor), (item, key) =>
            scores.push(this.addRating(item))
        )
   
        return scores
    }
   
    addRating(item) {
        return {
            rating: item.rating,
            text: item.text,
            identifier: item.getIdentifier()
        }
    }
   
    getScoresWithRatings(assessor) {
        const scores = assessor.getValidResults().map(r => {
            if (!isObject(r) || !r.getIdentifier()) {
                return ``;
            }
            r.rating = helpers.scoreToRating(r.score)
            return r
        })
   
        return filter(scores, r => r !== ``);
    }
   

   }

3. All the following steps should be in the same file.

   import babelPolyfill from 'babel-polyfill'; import { Paper, ContentAssessor, Researcher, SnippetPreview } from "yoastseo"; import SEOAssessor from 'yoastseo/src/seoAssessor'; import zipObject from 'lodash/zipObject' import omit from 'lodash/omit' import Jed from 'jed'; import snarkdown from 'snarkdown'; import Presenter from 'Presenter';

4. Add this function:

   getScores(seoAssessor, contentAssessor) { return { seo: new Presenter().getScoresWithRatings(seoAssessor), content: new Presenter().getScoresWithRatings(contentAssessor) } }, getScoresAsHTML(scores) { return new Presenter().getScoresAsHTML(h, scores); }, i18n() { return new Jed({ domain: js-text-analysis, locale_data: { "js-text-analysis": { "": {} } } }) }

5. enjoy

   const paper = new Paper(this.text, { keyword: this.keyword, title: this.title, description: this.description, url: this.url, metaDescription: this.metaDescription, titleWidth: this.titleWidth, locale: this.en_locale, permalink: this.permalink }); const contentAssessor = new ContentAssessor(this.i18n()); const seoAssessor = new SEOAssessor(this.i18n()); contentAssessor.assess(paper); seoAssessor.assess(paper); const final_scores = this.getScores(seoAssessor, contentAssessor); this.seo = final_scores.seo; this.content = final_scores.content; console.log(this.seo); console.log(this.content);

the function that you need to call is getScoresAsHTML and you have to install hypescript too: https://www.npmjs.com/package/hyperscript