Skip to content

wikimedia/openedx-frontend-component-header

 
 

Repository files navigation

frontend-component-header

Build Status Codecov npm_version npm_downloads license semantic-release

Overview

A generic header for Open edX micro-frontend applications.

Requirements

This component uses @edx/frontend-platform services such as i18n, analytics, configuration, and the AppContext React component, and expects that it has been loaded into a micro-frontend that has been properly initialized via @edx/frontend-platform's initialize function. Please visit the frontend template application to see an example.

Environment Variables

  • LMS_BASE_URL - The URL of the LMS of your Open edX instance.
  • LOGOUT_URL - The URL of the API endpoint which performs a user logout.
  • LOGIN_URL - The URL of the login page where a user can sign into their account.
  • SITE_NAME - The user-facing name of the site, used as alt text on the logo in the header. Defaults to "localhost" in development.
  • LOGO_URL - The URL of the site's logo. This logo is displayed in the header.
  • ORDER_HISTORY_URL - The URL of the order history page.
  • ACCOUNT_PROFILE_URL - The URL of the account profile page.
  • ACCOUNT_SETTINGS_URL - The URL of the account settings page.
  • AUTHN_MINIMAL_HEADER - A boolean flag which hides the main menu, user menu, and logged-out menu items when truthy. This is intended to be used in micro-frontends like frontend-app-authentication in which these menus are considered distractions from the user's task.

Installation

To install this header into your Open edX micro-frontend, run the following command in your MFE:

npm i --save @edx/frontend-component-header

This will make the component available to be imported into your application.

Usage

This library has the following exports:

  • (default): The header as a React component.
  • messages: Internationalization messages suitable for use with @edx/frontend-platform/i18n
  • dist/index.scss: A SASS file which contains style information for the component. It should be imported into the micro-frontend's own SCSS file.

Examples

Development

Install dependencies:

npm ci

Start the development server:

npm start

Build a production distribution:

npm run build

About

fork for customizations of this Open edX component for [[m:WikiLearn]]

Resources

License

Code of conduct

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 91.5%
  • SCSS 4.9%
  • Makefile 3.2%
  • HTML 0.4%