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