Page MenuHomePhabricator

Port the generation of dynamic banner text to Vue
Closed, ResolvedPublic13 Estimated Story Points

Description

Acceptance Criteria

  • The generation of dynamic text for the campaign day sentence and the visitors vs donors sentence is ported to Vue.

Implementation Notes

  • We should refactor this to an object tree or use a Builder pattern while porting.

Event Timeline

kai.nissen set the point value for this task to 13.

Suggestion for resolving the campaign parameters without bundling dev, wpde and wporg resolution classes with every banner (getting rid of the old getCampaignParameters):

  1. Have one class that derives the values from an HTML element with data attributes (doing Number conversion as needed). We can probably reuse most of the code from HtmlDataCampaignParameters. We could use this ticket to investigate storing JSON in the wiki (also needed for T332168: Put use of funds content on the meta wiki ), being able to pass in JSON instead of an HTML element
  2. Create a webpack resolve alias that resolves to different files in webpack.config and webpack.production.config. The dev implementation should be a wrapper around the production implementation with the ability to specifiy override values in the constructor. Our "prototyping banner" on CentralNotice already includes the campaign parameters. We just have to remember to change it once a year.
  3. Create a cron job on wikipedia.de that periodically pulls the campaign parameters from wp.org (via API) change the index.php files of wikipedia.org to include the resulting HTML in the wikipedia.de page (remove the inclusion of stats.js). With this change, the wp.de banners can use the same value resolution class as the wp.org banners.

Example snippet of the webpack config

// webpack.config
module.exports = {
  //...
  resolve: {
    alias: {
      BannerParameters: path.resolve(__dirname, 'src/util/BannerParameters/DevEnvironment.js'),
    },
  },
};
// webpack.production.config
module.exports = {
  //...
  resolve: {
    alias: {
      BannerParameters: path.resolve(__dirname, 'src/util/BannerParameters/BannerParameters.js'),
    },
  },
};
// banner_ctrl.js

// This looks like a module, but is a webpack alias
import {getCampaignParameters} from 'BannerParameters';