Skip to content

Latest commit

 

History

History
90 lines (64 loc) · 3.49 KB

Adding-new-page.md

File metadata and controls

90 lines (64 loc) · 3.49 KB
Raw

When adding a new learner-facing page…

  1. Get an approval from Diana ([email protected]) and Sean ([email protected]) regarding the Page Title and the Page Meta tag content that will be used by the new page before creating a PR.

  2. In the PR that introduces the new page, make sure that it handles the page title and meta tag changes. If it is a public user-facing page, the sitemap should also be updated.

    • For static pages, the HTML should contain <title> and <meta> tags. Example:

      <title itemprop="name">Title of the page.</title>
<meta charset="UTF-8">
<meta name="referrer" content="no-referrer">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=yes">
<meta name="description" content="Meta tag content goes here.">
<meta itemprop="name" content="Title of the page.">
<meta property="og:title" content="Title of the page.">
<meta property="og:type" content="article">
<meta property="og:site_name" content="Oppia">
<meta property="og:description" content="Meta tag content goes here.">

    • For dynamic pages, follow this example:

      https://github.com/oppia/oppia/blob/dacde388ab3a8eac535a1a848afaed24b9ffc7b6/core/templates/pages/story-viewer-page/story-viewer-page.component.ts#L158-L161

  3. In the PR description, explain the following in detail:

    • Is the page learner facing and public?

    • How can it be accessed i.e. the user journey to get to the new page?

    • A clear description of the contents of the page.

    • What is the page title and meta tag content that will be used in the new page?

    • Does the sitemap.xml need to be updated?

  4. Add @dchen97 and @seanlip as reviewers for the PR.

Technical part

Files

  • generic-page.import.ts — imports necessary for the page initialization
  • generic-page.mainpage.html — the main HTML
  • generic-page.module.ts — Angular module definition

Webpack

When you're adding new HTML page (not directive HTML) that uses TypeScript you also need to add it to webpack.common.config.ts:

  1. You need to define the TypeScript entry point for the page into module.exports.entries.
  2. You need to add new HtmlWebpackPlugin({…}) into module.exports.plugins.

For example when adding pages/generic-page/generic-page.mainpage.html with asocciated TypeScript file pages/generic-page/generic-page.scripts.ts, you will need to add page: commonPrefix + '/pages/generic-page/generic-page.scripts.ts' to module.exports.entries and

new HtmlWebpackPlugin({
  chunks: ['page'],
  meta: { // if default meta is used this can be ommited
    name: 'name',
    description: 'description'
  },
  filename: 'generic-page.mainpage.html',
  template: commonPrefix + '/pages/generic-page/generic-page.mainpage.html',
  minify: htmlMinifyConfig,
  inject: false
})

into module.exports.plugins.

Lighthouse

The new page should be added both to the .lighthouserc.js and .lighthouserc-accessibility.js. The page URL should be added to ci.collect.url and in the .lighthouserc.js

{
  'matchingUrlPattern': 'http://[^/]+/url',
  'assertions': {
    'uses-webp-images': [
      'error', {'maxLength': 0, 'strategy': 'pessimistic'}      
    ],
    'uses-passive-event-listeners': ['error', {'minScore': 1}],
    'deprecations': ['error', {'minScore': 1}]
  }
}

into ci.collect.assert.assertMatrix.